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
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.
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;
}
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!
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.
