Mermaid diagram rendering in Markdown preview

[szabba]

Check for existing issues

• [X] Completed

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.

[^1]: I'm linking to the one with most installs as of submission.

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.