Mermaid diagram rendering in Markdown preview #10696
Comments
szabba
added
admin read
Moshyfawn
added
markdown
JosephTLyons
added
potential extension
|
@JosephTLyons is it still possible to develop this extension ? Does it depend on architectural stuff ? |
|
1 The only thing that keeps me using VSCode vs. Zed is the inability to properly edit README.md files for GitHub. In my case, the most glaring omission is the inability to include Mermaid diagrams. |
|
FWIW, I discovered it is possible to use Marked 2 (on MacOS) and use a simple preprocessor script to get Mermaid working in a preview with Zed. Not ideal, but maybe enough to allow me to stop using VSCode. |
|
@ckmjreynolds how do you use the preprocessor ? |
cat marked_preprocessor.sh
#!/bin/bash
cat ~/bin/head.html -
cat head.html
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
mermaid.initialize({ startOnLoad: true });
Marked.hooks.register('update', function() { mermaid.run(); });
</script>For some reason calling initialize twice is needed at least in my testing, you can instead do Cmd R to refresh. I pieced this together based on support information for both using Mermaid and using a preprocessor on Marked 2's support website. |
Check for existing issues
Describe the feature
Markdown is great for writing technical documentation maintained alongside the code, using the same workflows - but technical documentation often needs to contain diagrams.
Mermaid is a code-driven tool for preparing technical diagrams.
It supports different types of diagrams, with different syntaxes.
GitLab and GitHub support rendering mermaid diagrams from fenced code blocks annotated as Mermaid code.
VS Code code has plugins 1 that enable viewing them in the Markdown preview.
Notion.so supports something similar, though it's only Markdown-adjacent.
If applicable, add mockups / screenshots to help present your vision of the feature
Here I've overlayed how GitHub renders these ono Zed:
Here's a screenshot showing how Notion lets the user switch betwen the code vs diagram view.
This might be nice to have for Zed.
It is more important in Notion's use case.
They don't have a strict separation between viewing and editing.
In Zed that separation is the Markdown text buffer vs preview pane distinction.
Footnotes
I'm linking to the one with most installs as of submission. ↩
The text was updated successfully, but these errors were encountered: