Are there any alternatives to the mermaid.js plugin?

[si]

I've been using the mermaid plugin to draw simple networks/graphs in my wiki. It's nice because it's super quick to use.

Unfortunately it's pretty buggy and has not been updated to the latest version of mermaid for a while.

Anyone know of any alternatives options out there?

Thanks for your help.

[TiddlyTweeter]

Its buggy. Its not maintained. It is a shame :-(.

If TiddlyMap won't do as a replacement then you maybe need to say a bit more.

Best wishes

TT

[si]

Hi TT,

Yes I will add more detail.

I currently use mermaid to quickly add graphs while I'm writing. I only use it for basic graphs like this:

I love TiddlyMap but it is not practical for making a lot of small graphs. The above graph can be written really quickly and easily in the mermaid language.

Si.

[Ste]

There is rail road diagrams in the core or at least an official plugin. Not sure if that would help? 

[si]

Hi Ste, thanks for the suggestion.

Unfortunately I don't think railroad diagrams are really the same thing.

[Julio Cantarero]

Hi. 

Try https://github.com/tobibeer/tw5-plantuml. It is an excellent plugin for plantuml.com 

Julio

[Julio Cantarero]

Sorry, I just realized that this link is probably more useful:
https://tobibeer.github.io/tw5-plugins/#plantuml

[si]

Thanks Julio, I had not heard of UML before.

In case anyone else is looking I have found that there is a plugin for graphviz: https://chanilino.github.io/tw5viz/tw5.html

The syntax is not as streamlined as mermaid, and it is a bit slow to render, but it does the job.

[Florian Felix]

hey, do you have some examples, how you use it :)

[Soren Bjornstad]

What issues are you seeing? The only one I've noticed is the one where text is cut off, and I posted a workaround to that on the issue tracker (oddly, the user then apparently decided it wasn't an issue anymore and closed it).

Several forks also have updated to newer versions of Mermaid.

[si]

@flohit Are you referring to GraphViz? I'm not sure if you are asking how to use it, or if you are just curious about how I use it specifically. To learn the syntax just look at the usage and readme tabs on the plugin page.

@Soren Its been a while since I tried it, but IIR there was a bug where graphs would randomly get rendered at the bottom of the screen, outside of any tiddler. I can't remember more detail than that though. Thanks for sharing your fix for the text-cut-off bug, and maybe I will try out one of the updated forks at some point.

[Florian Felix]

I was looking for examples how ppl use it in tiddlywiki, especially in order to map tiddler relations with links. until now i haven't even been able to embed links^^
for these usecases there is no doc afaik.

[Florian Felix]

(iIm indifferent to using UML or graphviz by now :D)

[R²]

What's buggy about the mermaid.js plugin? I'm discovering this and it seems like a great library!

As Søren mentioned, there's are two forks that are updated to v8.84, which isn't too far off (https://github.com/cedarvera/mermaid-tw5 & https://github.com/jceb/mermaid-tw5).

[si]

@flohit I just use it every so often when I need to add a little image of a graph. For example say I had a tiddler on the Konigsber bridge problem, I might use graph-viz to illustrate various related concepts.

I don't think you can embed links with GraphViz (I don't know for sure though). If I want to map out tiddler relationships I would use TiddlyMap, which is much better suited for this IMO.

@R^2 See my reply to Soren - it's been a while since I tried the mermaid plugin so I don't remember the exact details. I was going to try out one of those forks, but then I realised that I have no idea how to get a plugin from github into my wiki. Do you know how I can do this?

[Soren Bjornstad]

Si, if you have a folder wiki handy, you can clone one of those repositories directly into its plugins/ subdirectory and reload the server, and it'll show up in the "Plugins" tab. You can then drag it from there into whatever wiki you like.

[Florian Felix]

tiddlymap is not compatible with some other plugins (esp. stroll) and themes, mobile, quite slow for bigger wikis and not "printable" in node.js which all in all make it a bad solution for what i want/need.

[Florian Felix]

oh and linking should be possible in general in graphviz, although i didn't make it work yet in TW

[john.edw...@gmail.com]

[Jason Houle]

This is a question that vexed me for quite some time, so for anyone coming across this later I want to update this thread to note that there are now two good options for using Mermaid.JS within TW5:

Lightweight TiddlyWiki5 plugin that wraps Mermaid Live Editor:

YouTube: https://www.youtube.com/watch?v=e78RRDp-NZg
GitHub repo: https://github.com/jasonmhoule/tw5-mermaid
Demo wiki: https://jasonmhoule.github.io/tw5-mermaid/

"Complete" Mermaid.js library installation into TW5:

Demo wiki: https://efurlanm.github.io/mermaid-tw5