Another mermaid widget: mermaid-widget

[oeyoews]

I think currently this plugin solves the problem mentioned in this post below.

Zoomin info messes with svg rendering somehow

Rename the attachment to zoomin.html and load in a browser (I tested in Chrome). Go to the Bar tiddler, notice the line has no arrow head (the underlying text is exactly like Foo). Go to the control panel and change the story view to classic. The arrow head appears zoomin.json (3.4 MB)

mermaid2 plugin widget

Plugin: markdown-it-mermaid

Although I can use mermaid through <$mermaid text="xxx" /> or $$$text/vnd.tiddlywiki/mermaid xxxx$$$, or create a new type of text/vnd.tiddlywiki/mermaid tiddler, but these are not very convenient for me. And there are some areas in the original mermaid plugin that I would like to improve, but I have not rewritten that plugin. I created a markdown-it-mermaid plugin suitable for tiddlywiki. Fortunately, github also supports this format, so I can not only browse in tiddlywiki, but users on githu…

[oeyoews]

If the mermaid syntax is incorrect, there will be an extra picture of a bomb at the bottom of the page, which is obviously very unfriendly. Now this problem has been fixed by this plugin.

[michael1]

I’ll have to give it a try. Does this implementation show the image when a tiddler is exported to static HTML? That was one of the main disadvantages I remember the previous widget having. The SVG would render in wiki but would silently fail when exported to static HTML.

[oeyoews]

Of course it is supported, you can also manually select the rendering type, svg or png

[oeyoews]

By the way, the plug-in is currently compatible with two different versions: mermaid v9.3.0 and v11.0.0-alpha.4-tiny(more features)

[oeyoews]

[linonetwo]

Can you add the snippet described in About $$$ usage · Issue #6 · efurlanm/mermaid-tw5 · GitHub ? With this, switching between mermaid plugins will be seamless, no need to change widget in existing tiddlers.

efurlanm/mermaid-tw5 is unmaintained, glad to see there is a new one. Have you add it to CPL?

[oeyoews]

This plugin currently only provides a widget and does not provide the mermaid lib, so it is indeed compatible with the original mermaid plugin, so they can be used together.

[oeyoews]

Updated to CPL

[oeyoews]

Recently mermaid released v11, which seems to have been optimized in size. I think it’s time to try it again. Although v9.3.0 is very small, it is also subject to many restrictions. Many new features cannot be used, such as performance optimization and more types of icons. So I spent a day upgrading some of my plugins. In addition to the size of the mermaid plugin, this solved some problems that existed before, and the performance has been greatly optimized. The editing experience is smoother

[Mohammad]

Hi @oeyoews
Thank you for sharing. Install from CPL I got this error

Cannot read properties of undefined (reading 'initialize')

[oeyoews]

[oeyoews]

CPL has a some delay, I’m not sure how long this delay is, I haven’t tested cpl myself, it’s obviously a problem caused by the delay

[linonetwo]

I installed and don’t have error, but it rendered as codeblock ,not as graph, why?

[oeyoews]

It seems that this usage is still affected by wikirule in non-markdown mode, and it seems that you still need to use $$$text/vnd.tiddlywiki.mermaid（The plugin has not been written yet）

[Mohammad]

Do you have any plugin library? or do you recommend to directly install from GitHub?

[Mohammad]

It works now! One suggestion.

In example like:

<$mermaid2 rendertype="png" theme="forest">
graph LR;
a[Another mermaid widget] -.-> b[[mermaid-widget]]
</$mermaid2>

Is it possible to avoid entry in double square brackets? If not, does the links filter operator detect it as a missing link?
In summary I want to emphasis that [[…]] is a link in TiddlyWiki.

[Mohammad]

Thank you! One more thing:

<$mermaid2 rendertype="png" theme="forest">

</$mermaid2>

raises the RSOD! So the empty widget shall be handled correctly here!

I love the

```mermaid
~~ script here
```

much better than mermaid2!

[oeyoews]

Now it seems that this example happens to avoid this dash bug, and there are indeed many rsod problems in wiki mode. I am thinking about whether there is any good way to parse this text except using a new parser

[oeyoews]

I plan to abandon the use of mermaid widget and directly transform codeblock. In this way, whether it is markdown or not, you can directly use this syntax, and you don’t need to install other plugins, such as markdown-it-mermaid plugin.