Add mermaid graph markdown setting pre tag class

[ellorenz2]

Hi,

If you try

#```
[mermaid] i cannot use the correct indication because in GitHub works
graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;
#```

Not set pre tag class name "mermaid" who needs to activate the mermaid diagaram

If i try to write

#```
graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;
#```

#{.mermaid} Html generator set mermaid class into tag ad not in

 tag

Can you help me?

[ellorenz2]

I founded a partial solution if you write ```{.mermaid} it's seems work, but the js script not will be executed from preview

[mohzy83]

An update of MarkDig is necessary, which supports mermaid. See : https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/DiagramsSpecs.md The last version of MarkDig is 0.41.1

[mohzy83]

@ellorenz2 plz check if the new version 0.9.0 resolves your issure https://github.com/mohzy83/NppMarkdownPanel/releases/tag/0.9.0

[zh-y-h]

@ellorenz2 plz check if the new version 0.9.0 resolves your issure https://github.com/mohzy83/NppMarkdownPanel/releases/tag/0.9.0

The 0.9.0 doesn't work~ I don't kown how to paste code.

graph LR
    A[基线情景] -->|无项目情景碳排放| B(碳库变化计算)
    C[项目情景] -->|海草生物量+沉积物碳| B
    B --> D[总碳汇量 = 项目碳汇 - 基线排放]
    D --> E[扣除10%缓冲池]
    E --> F[可签发碳信用]

[Beercow]

I got mermaid to work by adding this to the css file.

[Beercow]

You can also change the theme.

[mohzy83]

I got mermaid to work by adding this to the css file.

I wonder how this works since the contents of the css file are embedded in a "

[mohzy83]

Just put <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; </script> in the first line of your MD file. That should work too..

[Raph-frpa]

Just put <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; </script> in the first line of your MD file. That should work too..

I do confirm, it's working for me. From my test with 0.9.0, whether or not style.css contains this line doesn't change anything. mermaid graph is rendered only when it is the first line in my MD file.

However, any change doesn't reflect immediately in the rendering pane, even when right-click + Refresh. The easiest way I found is to switch to another file (click on another tab) and come back to the one you changed to update its rendering pane.