Diagram Generation

[rtkelly13]

I'm always looking for ways to automatically generate diagrams in blog posts using DSLs rather than WYSIWYG solutions.

I've read this blog post from GitHub where they have integrated a really nice looking solution for using diagram generation from MD files
https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

There is a plugin for remark which seems like it could integrate easily.
https://github.com/sjwall/mdx-mermaid

I've already considered a solution using draw.io integrated into VSCode using SVG diagrams. This was in a previous issue on this repo as a good solution to solve this issue. Without being tied specifically to a VSCode and one extension, especially now this project.

Given the large amount of supported platforms this doesn't seem too big of a risk to add
https://mermaid-js.github.io/mermaid/#/./integrations

Would you be interested in me trying this out an possibly posing a PR if it works well enough?

[aloisdg]

I prefer PlantUML to Mermaid, but Mermaid is better than nothing.

https://wyssmann.com/blog/2021/03/diagrams-as-code-plantuml-or-mermaid/

[timlrx]

I don't really like the approach taken by mdx-mermaid. It basically injects mermaid.js as a dependency and renders the markup as a SVG on the client-side.

There's a discussion on remarksjs about adding mermaid support as well. Given that they have just introduced it on Github, I will just wait for the core maintainers of remarkjs to decide how best to handle it and not accept a PR till then.

There's a related thread here as well: remcohaszing/remark-mermaidjs#3

[aloisdg]

Note that mermaid is included in gitlab for a while

[zlwu]

I don't really like the approach taken by mdx-mermaid. It basically injects mermaid.js as a dependency and renders the markup as a SVG on the client-side.

There's a discussion on remarksjs about adding mermaid support as well. Given that they have just introduced it on Github, I will just wait for the core maintainers of remarkjs to decide how best to handle it and not accept a PR till then.

There's a related thread here as well: remcohaszing/remark-mermaidjs#3

Maybe we can use mermaid-cli to compile *.mmd file (mermaid source file) to svg directly.

[danielmackay]

Any update on this? I would love to be able to render Mermaid diagrams natively within the template.