Mermaid-tw5 plugin update to mermaid 8.13.2 - 9.3.0

Plugins
#14

Hi all,

Kudos to @Furlan for updating this plugin and posting a demo site - I wish I had this when I first started messing around with Mermaid in TW5!

I wanted to let the community know that I recently published a very lightweight (18kb) wrapper plugin of the Mermaid Live service - as long as you have internet, Mermaid Live handles all the rendering. All the power of Mermaid with streamlined code management and virtually no TW bloat.

3 Likes
#15

I think this can use GitHub - tiddly-gittly/tw-echarts: An All-in-one Visualization Framework for TiddlyWiki5 based on ECharts from @Sttot

1 Like
#16

Oh, I was opening this post to ask the same question. If so, then we can use mermaid to make a similar thing like the tiddlymap.

2 Likes
#17

i found something on “It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab”

but not sure how to make it work with tiddlywiki

1 Like
#18

Hi

I just updated mermaid-tw5 to mermaid 9.0.1:

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

I decided to post here instead of creating a new topic, in order to try to keep everything in one place.

– Furlan

3 Likes
#19

Linking Mermaid nodes to Tiddlers

Using the callback node interactions from within TiddlyWiki is not straightforward. AFAICT, even if you define a javascript callback function, the onclick html event doesn’t get bound to the node.

Here is a minimal working – although not very convenient – solution:

\define clickactions()
<$action-navigate $to=<<dom-title>>/>
\end

<$eventcatcher selector=".node" $click=<<clickactions>>>

<$mermaid text="""
flowchart LR
    A[Links to Tiddler A] --> B[Links to Tiddler B] --> C[No link]
    click A noop "Tiddler A"
    click B noop "Tiddler B"
"""/>
</$eventcatcher>

Click events are linked to tiddlers thanks to the click A noop "Tiddler A" and click B noop "Tiddler B" lines, where noop should have been the name of a callback function – here an unused parameter – and "Tiddler A" is the title of the linked tiddler.

Note that the node label (the text between square brackets) needs not be related to the target of the link (defined with the click line).

Fred

2 Likes
#20

Thanks Fred. Great to see things are happening in this space :slight_smile:

Any idea why this is yielding me the following internal JavaScript error when clicking on either A or B: Uncaught TypeError: Cannot read properties of undefined (reading 'toString')? (This is on TW 5.2.1 & Mermaid TW5 0.3.6 [Mermaid 9.11], tested on both Chromium and Firefox).

Thanks,
R²

1 Like
#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