Plugin: markdown-it-mermaid

Plugins
#1

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 github can also view mermaid

image
image1690×1052 74.3 KB

mermaid plugin

Screenity video - Jan 28, 2024

2 Likes
Another mermaid widget: mermaid-widget
#2

now mermaid support zoom as image with medium-zoom

Screenity video - Jan 28, 2024 (1)

1 Like
#3

:100:

image
image1614×537 37.3 KB

#4

This plugin is fantastic.

For anyone else looking to try it out, I had to install oeyoews/markdown-extensions-startup, oeyoews/markdown-it-mermaid, oeyoews/mermaid930 and oeyoews/mermaid-widget to get everything to work.

Interestingly, if I used the fence syntax shown above with markdown-it-mermaid, I could export tiddlers to static HTML with the diagrams still rendered. If I used the widget, I still had diagram SVG missing on export.

I’d love to see this added to the core markdown-it implementation.

#5

Yes, mermaid relies on browser rendering. The core codes of markdown-it-mermaid and mermaid-widget are almost exactly the same. However, for mermaid-widget, tiddlywiki seems to use its own virtual dom for the widget when exporting. It will obviously cause rendering errors, so I added these codes based on past experience, which also explains why the mermaid chart cannot be exported.

const domNode = this.document.createElement('div');
 if (domNode.isTiddlyWikiFakeDom) {
      console.warn('SSR not support export mermaid chart');
      return;
    }

I just added a warning message when exporting

image

#6

That makes sense. I spent some time debugging the other mermaid widget plugin and saw the virtual dom, but got pulled away before I could think too much about how to work around the problem.

Either way, the plugin is fantastic and I appreciate your publishing it!

#7

mermaid-tiny already supports the mermaid-widget plugin, but since markdownit does not support asynchronous methods, I have temporarily given up on tiny’s support for markdown-it-mermaid. It is a pity.