Mermaid-tw5 plugin update to mermaid 8.13.2 - 9.3.0

[linonetwo]

@CodaCoder

Can the elements be linked/clicked?

Oh, I was opening this post to ask the same question. If so, then we can use mermaid to make a similar thing like the tiddlymap.

[makiaea]

i found something on “It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab”

but not sure how to make it work with tiddlywiki

mermaid-js/mermaid/blob/develop/docs/flowchart.md#interaction

[Furlan]

Hi

I just updated mermaid-tw5 to mermaid 9.0.1:

http://efurlanm.github.io/mermaid-tw5.html

I decided to post here instead of creating a new topic, in order to try to keep everything in one place.

– Furlan

[tw-FRed]

Linking Mermaid nodes to Tiddlers

Using the callback node interactions from within TiddlyWiki is not straightforward. AFAICT, even if you define a javascript callback function, the onclick html event doesn’t get bound to the node.

Here is a minimal working – although not very convenient – solution:

\define clickactions()
<$action-navigate $to=<<dom-title>>/>
\end

<$eventcatcher selector=".node" $click=<<clickactions>>>

<$mermaid text="""
flowchart LR
    A[Links to Tiddler A] --> B[Links to Tiddler B] --> C[No link]
    click A noop "Tiddler A"
    click B noop "Tiddler B"
"""/>
</$eventcatcher>

Click events are linked to tiddlers thanks to the click A noop "Tiddler A" and click B noop "Tiddler B" lines, where noop should have been the name of a callback function – here an unused parameter – and "Tiddler A" is the title of the linked tiddler.

Note that the node label (the text between square brackets) needs not be related to the target of the link (defined with the click line).

Fred

[SonephetR2]

Thanks Fred. Great to see things are happening in this space

Any idea why this is yielding me the following internal JavaScript error when clicking on either A or B: Uncaught TypeError: Cannot read properties of undefined (reading 'toString')? (This is on TW 5.2.1 & Mermaid TW5 0.3.6 [Mermaid 9.11], tested on both Chromium and Firefox).

Thanks,
R²

[tw-FRed]

Hi R²,

I don’t have TW v5.2.1 empty file so I can’t test exactly your environment.
I only could validate this (firefox latest):

• open tiddlywiki.com
• download empty.html
• open empty.html
• open Mermaid TW5 Plugin — http://github.com/efurlanm/mermaid-tw5 in another tab
• drag and drop the plugin link onto empty.html
• save and reload
• create a new tiddler and paste above example code in its body
• save, click on A or B => missing tiddlers “Tiddler A” and “Tiddler B” open.

Did the error occur on a new TW or in one of your wikis? Are any other plugins installed?

Fred

[tw-FRed]

Also, I’ve previously experienced non working mermaid plugin v0.3.6 on an old Firefox version. The mermaid graphs were not even displayed though, so I don’t think its the same bug.

Fred

[tw-FRed]

Building Older Versions of TiddlyWiki Using Git and Node

Continuing the discussion from Mermaid-tw5 plugin update to mermaid 8.13.2: If for any reason you want to create an older (or the opposite “prerelease”) version of a TiddlyWiki, you can use git and node to build one from the Github repository. For example, here are the commands to build a single-file empty v5.2.1 (I’m using Windows command line, but Linux would look identical I think.) > git clone https://github.com/Jermolene/TiddlyWiki5.git > cd TiddlyWiki5 > git checkout v5.2.1 > cd .. > n…

Thanks to @amreus trick above, I could get an empty TW v5.2.1 and reproduce an error, although not exactly the same as yours:

TypeError: selectedNode.offsetLeft is undefined

I’m investigating on causes and possibly a fix, but it looks like it’s triggered by the core eventcatcher widget definition ($:/core/modules/widgets/eventcatcher.js:76), so I don’t know what I’ll be able to do…

Fred

[tw-FRed]

@SonephetR2, here’s what I got:

• opening my test wiki v5.2.1 in chromium showed the same error message as you, pointing the same line in core evencatcher widget definition tiddler.
• the tiddler has been modified 3 times between v5.2.1 and 5.2.3, and AFAICT at least one sanity check was added in v5.2.3 which could explain why the error doesn’t occur in latest version.

So I’m afraid I can only advise you to update your wikis to v5.2.3 in order for the eventcatcher trick to work…

Fred

[john.edw_gmail.com]

example clickable links to navigate within the wiki Mermaid TW5 Plugin — http://github.com/efurlanm/mermaid-tw5

flowchart LR
    A-->B
    B-->C
    C-->D
    click A "#HelloThere" "HelloThere Tiddler" _blank
    click B "#Tips" "Tips Tiddler" _blank
    click C href "#Issues" "Issues Tiddler" _blank
    click D href "#Details" "Details Tiddler" _blank

[tw-FRed]

Hi @john.edw_gmail.com !

Thanks for the code, it works great!
The only downside is that it changes the URL of the browser, but I absolutely can live with that

Fred

[SonephetR2]

Thanks a lot for looking into this, @tw-FRed. You were right, updating to v.5.2.3 solved the issue

[Peter]

Hey folks. Loving this plugin - having Gantt and flow charts that I can embed in my wikis will be great.

One small question - any way to style the edge colors? They are hard to read on my background.

[tw-FRed]

Hi @Peter

You can style flowchart nodes using classes directly in the mermaid markup, as described here:
Flowchart styling and classes.

For Gantt charts though, according to Official Documentation you’ll have to use stylesheets, but I never tried this so I can’t help you here.

Fred

[Furlan]

Hi,

I just updated mermaid-tw5 to mermaid 9.3.0:

http://efurlanm.github.io/mermaid-tw5.html

Unfortunately this time it was not possible to add mindmap, as it “uses the experimental lazy loading & async rendering features which could change in the future” as described in Mindmap | Mermaid. But the other features are apparently working.

Like the other times, what I did this time was copy the content from https://unpkg.com/mermaid@9.3.0/dist/mermaid.min.js , paste it in the plugin’s tiddler, use the command “$tw.utils .repackPlugin(”$:/plugins/mermaid-tw5")" in the browser, and test the other tiddlers to see if they are working.

Hope it can be useful.

[Mohammad]

Much appreciated!
Mermaid is a very useful plugin, especially when you going to have inline charts (flowcharts, eyc.).

It is interesting to know tw5-mermaid is only 974kB.
I use Uglify from @Flibbles and it lets to compress it even more, now 870kB.

I would recommend adding the plugin display name. I submitted a ticket on GitHub.

[Furlan]

Thank you for your comments. The change was made.
Also, I made some more changes, I added the “publisher” (orange) to follow the pattern “$:/plugins/publisher/name”, and also, just for fun, I made some changes to “$__plugins_mermaid-tw5_wrapper.js” to be able to run on “TiddlyWiki on Node.js” (https://tiddlywiki.com/static/TiddlyWiki%20on%20Node.js.html). To run this version just clone the repo with “git clone GitHub - efurlanm/mermaid-tw5: TiddlyWiki 5 plugin to support the mermaid library”, enter the root dir of the wiki with “cd mermaid-tw5” and run the server with “TIDDLYWIKI_PLUGIN_PATH=./ tiddlywiki plugins --listen”.
Hope it can be useful.

[Mohammad]

Thank you. You may learn from tiddlywiki.com how to arrange you plugin files into folders. You can use of $:/config/FileSystemPaths and $:/config/FileSystemExtensions, … to set your configuration when you are developing on node.js

[michael1]

One small question - any way to style the edge colors? They are hard to read on my background.

You can! Mermaid offers the linkStyle command (Flowcharts - Basic Syntax | Mermaid), which works like this:

<$mermaid text='
	flowchart LR
		A --> B
		linkStyle 0 stroke:red;
' />

You can also declare themes on the individual diagrams if a built in theme (Theme Configuration | Mermaid) works better:

<$mermaid text="%%{init: {'theme':'dark'}}%%
	flowchart LR
		A --> B
" />

Finally, you can resort to good old CSS. I keep the following CSS in my wiki to give every diagram a white background specifically to offset the edges (tagged with $:/tags/Stylesheet).

div[id^="mermaid"] svg {
	background-color: white;
}

[CaptainPackers]

Fantastic! I was just going to post a question about changing the flow-link color because the black arrows do not show up well in my dark theme. I tried changing them my themetweaks.css tiddler but that did not work.