Hi
I was playing with mermaid-tw5 and ended up upgrading to mermaid 8.13.2 latest release. I did a lot of testing and apparently most things are working, apart from some font size issues (I think), at least that’s what I’ve noticed so far. Hope it can be useful.
https://efurlanm.github.io/mermaid-tw5
– Furlan
Whoah! That is great news! I will definitely take a look and comment.
Best, TT
Initial comment …
The fonts look good. Nothing went weird. It is a definite improvement over the other Mermaid plugin I tried before.
I’ll comment more IF I hit an issue.
Best wishes, TT
This is a useful plugin and needs some love!
Hi,
I’ve been playing a little more with the plugin and doing some more tests, and I could see a warning message in the Browser Console:
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: /$:/plugins/gt6796c/mermaid-tw5/mermaid.min.js
Source Map URL: mermaid.min.js.map
I have no idea how to fix this, but apparently it doesn’t interfere with the plugin’s functioning (I think). I’ve also been cleaning up what wasn’t being used, did some testing with themes, apparently everything I tested worked, and in the end I ended up uploading a new version 0.3.3 with these little changes. Hope it can be useful.
– Furlan
Hi @Furlan, really pleased to see you have updated this plugin - thanks! I have been using GraphViz but Mermaid has a much nicer syntax in my opinion. I will gradually try converting my GraphViz graphs into Mermaid, and let you know if I uncover any bugs.
Hi @Furlan
Is it possible to generate tiddler networks based on link/backlinks/tags/transclusion using Mermaid plugin! I am thinking something like tidgraph!
It needs to able nicely format the box and arrows created by mermaid! What do you think?
Hi Mohammad,
I find the idea interesting, and tidgraph is a very interesting project. I think that maybe this would be another project, with people developing, maintaining, documenting…
Thanks Furlan! The tidgraph has not been maintained for a while, by the way it is very powerful in creating information flow diagrams from tiddlers!
So, you think mermaid has capability to be used for such tiddler networks!
If we can customize the look and feel, I think we can create nice network graphs!
No, it won’t affect execution of the plugin. A source map is used to unminify a minified JavaScript source – mermaid.min.js in this case. And you only need that if you’re going to use the JavaScript debugger in DevTools. It’s a common warning, okay to ignore.
I’ve never seen it before. Intrigued to know if I can use it to map story arcs – in a superwide tiddler, of course (I think @TiddlyTweeter knows what I mean by superwide 
)
Can the elements be linked/clicked?
Yep. Should work. Though I haven’t had time to push it yet. FYI, the main thing I noticed with @Furlan’s version (hat’s off) is that the font handling is much, much better. Font sizing doesn’t break layout, unlike the other plugin version.
Since Mermaid will do diagrams of great complexity well, and via an economic notation system, both short-arses and super-wides might well be well accommodated?
It would be ideal if they were. Why? Because you could use Mermaid frontage to access a whole wiki without segue. (Being an idiot, I’m just not sure about how technically easy that would be to implement?)
Just comments
TT
Mermaid frontage - perfect 
Yeah, I looked, it’s svg elements so it shouldn’t be too hard (if it’s not already there). I just need to allocate some playtime.
Hi all,
Kudos to @Furlan for updating this plugin and posting a demo site - I wish I had this when I first started messing around with Mermaid in TW5!
I wanted to let the community know that I recently published a very lightweight (18kb) wrapper plugin of the Mermaid Live service - as long as you have internet, Mermaid Live handles all the rendering. All the power of Mermaid with streamlined code management and virtually no TW bloat.
I think this can use GitHub - tiddly-gittly/tw-echarts: An All-in-one Visualization Framework for TiddlyWiki5 based on ECharts from @Sttot
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.
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
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
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
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²