Mermaid in Markdown Preview

GitHub, GitLab, Notion, and Obsidian render Mermaid diagrams inside Markdown code blocks. This preview lets you edit a Markdown doc with ```mermaid blocks and see the rendered diagrams inline. Useful for drafting documentation, RFCs, or design docs before pushing to a repo.

How to use the Mermaid in Markdown Preview

Paste Markdown on the left. Any ```mermaid code block renders as a diagram in the preview. Other Markdown (headings, bold / italic, code, links, lists) renders as styled HTML.

Supports the most common Mermaid diagram types: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph.