Extension for mermaid syntax #37

New Issue

claunia · 2026-01-29T14:22:17Z

claunia commented

2026-01-29 14:22:17 +00:00

Originally created by @Hviid on GitHub (Jul 4, 2016).

I would like to propose an extension to support mermaid diagram syntax.
https://github.com/knsv/mermaid

I would also love to try doing a PR for it. But I think it would require a little guidance.

My initial thoughts could be something like:
{mermaid}(
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
)
Produces:
`

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

`

And then of course the mermaid JS needs to be included in the HTML file.

Originally created by @Hviid on GitHub (Jul 4, 2016). I would like to propose an extension to support mermaid diagram syntax. https://github.com/knsv/mermaid I would also love to try doing a PR for it. But I think it would require a little guidance. My initial thoughts could be something like: {mermaid}( graph TD; A-->B; A-->C; B-->D; C-->D; ) Produces: `<div class="mermaid"> graph TD; A-->B; A-->C; B-->D; C-->D; </div>` And then of course the mermaid JS needs to be included in the HTML file.

claunia added the enhancement label 2026-01-29 14:22:17 +00:00

claunia closed this issue

2026-01-29 14:22:19 +00:00

claunia commented

2026-01-29 14:22:21 +00:00

@Hviid commented on GitHub (Jul 5, 2016):

Wow, totally awesome @xoofx.

@Hviid commented on GitHub (Jul 5, 2016): Wow, totally awesome @xoofx.

claunia commented

2026-01-29 14:22:25 +00:00

@xoofx commented on GitHub (Jul 5, 2016):

I have added a preliminary support for mermaid diagrams block by commit c6c2f58

It is using the regular fenced code block and detect if mermaid is used to output a div block instead of a pre/code block:

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

will output:

<div class="mermaid">graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>

Note that in order to fully support this in the Markdown Editor for Visual Studio, we will have to add support for layouts.

@xoofx commented on GitHub (Jul 5, 2016): I have added a preliminary support for mermaid diagrams block by commit c6c2f58 It is using the regular fenced code block and detect if `mermaid` is used to output a div block instead of a pre/code block: <pre> ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` </pre> will output: ``` html <div class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D; </div> ``` Note that in order to fully support this in the Markdown Editor for Visual Studio, we will have to add support for layouts.

claunia commented

2026-01-29 14:22:29 +00:00

@janderson-bh commented on GitHub (Oct 24, 2025):

I think this should actually render as

<pre class="mermaid">graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</pre>

@janderson-bh commented on GitHub (Oct 24, 2025): I think this should actually render as ``` <pre class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D; </pre> ```

claunia commented

2026-01-29 14:22:32 +00:00

@xoofx commented on GitHub (Oct 24, 2025):

I think this should actually render as

Yes, it was actually changed by this commit 090e6d791a last year.

Not sure why I used div in the first place.

@xoofx commented on GitHub (Oct 24, 2025): > I think this should actually render as Yes, it was actually changed by this commit 090e6d791afbc4783839c71b71cde14f621f530d last year. Not sure why I used div in the first place.

claunia commented

2026-01-29 14:22:35 +00:00

@janderson-bh commented on GitHub (Oct 26, 2025):

That's strange, I'm using 0.43.0 and getting this output

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

@janderson-bh commented on GitHub (Oct 26, 2025): That's strange, I'm using 0.43.0 and getting this output <div class="lang-mermaid editor-colors"><div class="mermaid"><pre> graph TD; A-->B; A-->C; B-->D; C-->D;</pre></div> </div>

claunia commented

2026-01-29 14:22:36 +00:00

@xoofx commented on GitHub (Oct 28, 2025):

That's strange, I'm using 0.43.0 and getting this output

Please open a new issue with a small repro with exact code you are using to create this.

@xoofx commented on GitHub (Oct 28, 2025): > That's strange, I'm using 0.43.0 and getting this output Please open a new issue with a small repro with exact code you are using to create this.

claunia referenced this issue

2026-01-29 14:28:24 +00:00

Support for Pandoc YAML front matter #137

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#37