Mermaid-tw5 plugin update to mermaid 8.13.2 - 9.3.0

Plugins
#21

Hi R²,

I don’t have TW v5.2.1 empty file so I can’t test exactly your environment.
I only could validate this (firefox latest):

Did the error occur on a new TW or in one of your wikis? Are any other plugins installed?

Fred

1 Like
Building Older Versions of TiddlyWiki Using Git and Node
#22

Also, I’ve previously experienced non working mermaid plugin v0.3.6 on an old Firefox version. The mermaid graphs were not even displayed though, so I don’t think its the same bug.

Fred

#23

Thanks to @amreus trick above, I could get an empty TW v5.2.1 and reproduce an error, although not exactly the same as yours:

TypeError: selectedNode.offsetLeft is undefined

I’m investigating on causes and possibly a fix, but it looks like it’s triggered by the core eventcatcher widget definition ($:/core/modules/widgets/eventcatcher.js:76), so I don’t know what I’ll be able to do…

Fred

#24

@SonephetR2, here’s what I got:

  • opening my test wiki v5.2.1 in chromium showed the same error message as you, pointing the same line in core evencatcher widget definition tiddler.
  • the tiddler has been modified 3 times between v5.2.1 and 5.2.3, and AFAICT at least one sanity check was added in v5.2.3 which could explain why the error doesn’t occur in latest version.

So I’m afraid I can only advise you to update your wikis to v5.2.3 in order for the eventcatcher trick to work…

Fred

#25

example clickable links to navigate within the wiki Mermaid TW5 Plugin — http://github.com/efurlanm/mermaid-tw5

flowchart LR
    A-->B
    B-->C
    C-->D
    click A "#HelloThere" "HelloThere Tiddler" _blank
    click B "#Tips" "Tips Tiddler" _blank
    click C href "#Issues" "Issues Tiddler" _blank
    click D href "#Details" "Details Tiddler" _blank
3 Likes
#26

Hi @john.edw_gmail.com !

Thanks for the code, it works great!
The only downside is that it changes the URL of the browser, but I absolutely can live with that :wink:

Fred

#27

Thanks a lot for looking into this, @tw-FRed. You were right, updating to v.5.2.3 solved the issue :slight_smile:

#28

Hey folks. Loving this plugin - having Gantt and flow charts that I can embed in my wikis will be great.

One small question - any way to style the edge colors? They are hard to read on my background.

#29

Hi @Peter

You can style flowchart nodes using classes directly in the mermaid markup, as described here:
Flowchart styling and classes.

For Gantt charts though, according to Official Documentation you’ll have to use stylesheets, but I never tried this so I can’t help you here.

Fred

#30

Hi,

I just updated mermaid-tw5 to mermaid 9.3.0:

http://efurlanm.github.io/mermaid-tw5.html

Unfortunately this time it was not possible to add mindmap, as it “uses the experimental lazy loading & async rendering features which could change in the future” as described in Mindmap | Mermaid. But the other features are apparently working.

Like the other times, what I did this time was copy the content from https://unpkg.com/mermaid@9.3.0/dist/mermaid.min.js , paste it in the plugin’s tiddler, use the command “$tw.utils .repackPlugin(”$:/plugins/mermaid-tw5")" in the browser, and test the other tiddlers to see if they are working.

Hope it can be useful.

7 Likes
#31

Much appreciated!
Mermaid is a very useful plugin, especially when you going to have inline charts (flowcharts, eyc.).

It is interesting to know tw5-mermaid is only 974kB.
I use Uglify from @Flibbles and it lets to compress it even more, now 870kB.

I would recommend adding the plugin display name. I submitted a ticket on GitHub.

#32

Thank you for your comments. The change was made.
Also, I made some more changes, I added the “publisher” (orange) to follow the pattern “$:/plugins/publisher/name”, and also, just for fun, I made some changes to “$__plugins_mermaid-tw5_wrapper.js” to be able to run on “TiddlyWiki on Node.js” (https://tiddlywiki.com/static/TiddlyWiki%20on%20Node.js.html). To run this version just clone the repo with “git clone GitHub - efurlanm/mermaid-tw5: TiddlyWiki 5 plugin to support the mermaid library”, enter the root dir of the wiki with “cd mermaid-tw5” and run the server with “TIDDLYWIKI_PLUGIN_PATH=./ tiddlywiki plugins --listen”.
Hope it can be useful.

1 Like
#33

Thank you. You may learn from tiddlywiki.com how to arrange you plugin files into folders. You can use of $:/config/FileSystemPaths and $:/config/FileSystemExtensions, … to set your configuration when you are developing on node.js

#34

One small question - any way to style the edge colors? They are hard to read on my background.

You can! Mermaid offers the linkStyle command (Flowcharts - Basic Syntax | Mermaid), which works like this:

<$mermaid text='
	flowchart LR
		A --> B
		linkStyle 0 stroke:red;
' />

You can also declare themes on the individual diagrams if a built in theme (Theme Configuration | Mermaid) works better:

<$mermaid text="%%{init: {'theme':'dark'}}%%
	flowchart LR
		A --> B
" />

Finally, you can resort to good old CSS. I keep the following CSS in my wiki to give every diagram a white background specifically to offset the edges (tagged with $:/tags/Stylesheet).

div[id^="mermaid"] svg {
	background-color: white;
}
4 Likes
#35

Fantastic! I was just going to post a question about changing the flow-link color because the black arrows do not show up well in my dark theme. I tried changing them my themetweaks.css tiddler but that did not work.

#36

Hi!

This method works only once in my case, if for a second time, I click the link, the tiddler does not show up. And it does not work in Tiddlydesktop at all. Is anyone aware of some kind of fix for this?

Thank you in advance!

Regards,

Attila

#37

Hi @attila.horvath and welcome !

From previous problems on this matter, I can suggest you:

Good luck ! :slight_smile:

Fred

#38

This method still works for me if I create a new tiddler at Mermaid TW5 Plugin — http://github.com/efurlanm/mermaid-tw5

I don’t use tiddlydesktop so I can’t test it.

exported the tiddler i just created at the site.
Mermaidjs Click Interaction.tid (419 Bytes)

1 Like
#39

One slight oddity I’m noticing is that the widget renders as you would expect at runtime, but if you export a single tiddler to static HTML, the rendered output is not included. If you look at the resulting html it includes the container div, but no svg at all.

If you run dev tools, you can see that wrapper.js catches an exception (line 48) that reads:

TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at M0 ($:/plugins/mermaid-tw5/mermaid.min.js:1226:19753)
    at eval ($:/plugins/mermaid-tw5/mermaid.min.js:1229:4295)
    at Array.forEach (<anonymous>)
    at k3 ($:/plugins/mermaid-tw5/mermaid.min.js:1229:4017)
    at Object.draw ($:/plugins/mermaid-tw5/mermaid.min.js:1230:1320)
    at Object.SY [as render] ($:/plugins/mermaid-tw5/mermaid.min.js:1281:799)
    at MermaidWidget.render ($:/plugins/mermaid-tw5/wrapper.js:45:31)
    at Widget.renderChildren ($:/core/modules/widgets/widget.js:476:15)
    at ElementWidget.render ($:/core/modules/widgets/element.js:78:7)
    at Widget.renderChildren ($:/core/modules/widgets/widget.js:476:15)

Unfortunately, the minified source without a sourcemap makes it hard to trace into Mermaid itself.

If I dump the SVG into a standalone SVG tiddler and transclude it, it works. I suspect the problem lies somewhere in the rendering lifecycle, but it’s hard to be sure.

1 Like