VS Code: Mermaid diagrams built into Markdown preview, notebooks, and chat
Visual Studio Code demonstrates how Mermaid diagrams can be rendered directly inside VS Code using the Mermaid Markdown Features extension.
Overview
Mermaid diagram rendering is available directly in:
- Markdown Preview
- Notebook Markdown cells
- VS Code Chat
How it works
- Create a Mermaid fenced code block in a Markdown file.
- VS Code automatically renders the diagram.
markdown mermaid sequenceDiagram participant A as User participant B as Service A->>B: Request B-→>A: Response
What this is useful for
- Documenting software architecture alongside code
- Visualizing workflows
- Creating sequence diagrams
- Keeping diagrams close to documentation in Markdown