tailwind-nextjs-starter-blog icon indicating copy to clipboard operation
tailwind-nextjs-starter-blog copied to clipboard

Diagram Generation

Open rtkelly13 opened this issue 3 years ago • 6 comments

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?

rtkelly13 avatar Feb 16 '22 13:02 rtkelly13

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

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

aloisdg avatar Feb 16 '22 14:02 aloisdg

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: https://github.com/remcohaszing/remark-mermaidjs/issues/3

timlrx avatar Feb 16 '22 15:02 timlrx

Note that mermaid is included in gitlab for a while

aloisdg avatar Feb 16 '22 15:02 aloisdg

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.

zlwu avatar Mar 02 '23 18:03 zlwu

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

danielmackay avatar Dec 30 '23 06:12 danielmackay