gt6796c / mermaid-tw5 Goto Github PK

Mermaid has support for Gantt diagrams, and I have been able to use them successfully in the past on some of my web projects, but the TW5 plugin doesn't seem to support Gantt diagrams. When I try to make a Gantt diagram, nothing is rendered (the same behavior as if there is a syntax error). I double checked that the same code works with the latest Mermaid, so it's not a syntax error. Is this a result of wrapping an older version of Mermaid? Would you be able to fix this simply by updating the version of Mermaid you used?

Hey!

Glad to see there is a mermaid plugin for tw5 already.
Could you please share instructions about how to install it?

Thanks in advance.
Regards

Making a test Tiddler with the following contents on https://gt6796c.github.io/:

<$mermaid text="
sequenceDiagram
	participant Alice
    participant Bob
    Alice->Alice: Select either f from Funs[X,Y] or k from K
    loop Attack
    	Bob->Alice: x
    	Alice->Bob: f(x) or F(k,x)
    end
">
</$mermaid>

Is rendered as follows:

Note that the arrowheads aren't rendered.

This was tested on both Chrome and Safari, with the same results.

It currently looks like it claiming to be boot/preboot.js

It would be nice to have the ability to generate a single mermaid diagram that is rendered in several tiddlers.

i.e.:
the same as you can create an image-tiddler, which is embedded as an image in other tiddlers via the syntax [img[my_image_tiddler]], it would be handy to generate a single mermaid-tiddler to be embedded in multiple tiddlers by just referencing its name.

How to reproduce:

1. Go to https://gt6796c.github.io/#%24%3A%2Fplugins%2Fgt6796c%2Fmermaid-tw5%2Fexample
2. Edit the tiddler
3. Open the preview
4. Make any change that breaks the preview, for example change C((a circle)); to C(a circle); manually (no copy paste)
5. See a diagram appearing under the tiddler

Screenshot:

The Mermaid graph is not rendering last letter of any label.

We can try to resolve this by add extra characters to the end. The problem is part of those extra characters are visible.

Like

https://github.com/tiddly-gittly/tiddlywiki-whiteboard/blob/master/src/Startup/registerFileType.js

So it will appear in the type list as an suggestion.

@TiddlyTweeter
There are some extra copies of the graph below the tiddler. To replicate:
<$mermaid text="
graph LR;
a --> b;
b --> c;
"></$mermaid>

Hi @gt6796c

Can you please update TW5 Mermaid plugin to latest Mermaid 8.4.2? It has much improved Gantt charts and new features like State Transition Diagram, etc.

Or, please post some guidance on how to import latest code from https://github.com/mermaid-js/mermaid to your TW5 plugin.

Thanks.

Hi @gt6796c, could you please fix the link in the readme to:

https://knsv.github.io/mermaid/

Also, it would be nice to see a demo of this somewhere, e.g. here on GH.

In the readme.tid file, there is a claim that this plugin is currently based on mermaid release 0.5.1. However, a quick comparison to the main mermaid repo indicates that this plugin is actually using version 6.0.0. Is this in fact the correct version?

It would be great to be able to insert mermaid diagrams into a markdown styled tiddler (not just a TiddlyWiky complaint tiddler).

I have no idea of how TIddlyWiki plugins are developed, so I was wondering if it was too much effort to do that.
My favorite markdown plugin is tw5-markdown: Comprehensive Markdown plugin for TiddlyWiki which supports extended markdown, but it is not recognizing the mermaid widget.

Essentially I'd like to be able to put the widget tag

<$mermaid text="...
"><$mermaid>

into a markdown tiddler.

Even better, I'd like the text to be wrapped in an extended markdown code snippets like this.

```mermaid
graph LR
A-->B
B-->C
```

Also if you know about an extended markdown plugin for TiddlyWiki which works with your mermaid plugin it would as well welcome.

Finally I accept guidance/suggestions on how to implement it myself.

I'm using a graphviz plugin from https://github.com/chanilino/tw5viz. It draws the style of nodes using shape attributes. It appears that the mermaid stylesheets are used globally and so override the node styles.

after installing (and refreshing) to an empty flavor of TW, going to $:/plugins/gt6796c/mermaid-tw5 and to to the example tab produces the JS error: "Script error".

The content of the tab renders fine, but the "Results" portion is empty.