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.

Mermaid diagrams inside Markdown

Mermaid is a text-based diagramming syntax: you describe a flowchart, sequence diagram, or gantt chart in a fenced ```mermaid code block, and the platform draws it. GitHub, GitLab, Notion, and Obsidian all render these blocks natively, so diagrams live in the same Markdown file as the prose and stay in version control as plain text rather than binary images.

The catch is that a small syntax slip renders as a broken block only after you push. This preview draws the diagrams as you type, alongside the rest of your Markdown, so you can get the arrows and labels right before committing. Everything runs in your browser — the document is never uploaded.

Common use cases

• Architecture diagrams — draft a flowchart of services and data flow for a design doc.
• API sequence diagrams — map the request and response steps between client, server, and database.
• RFCs and design docs — embed diagrams inline so they version alongside the text.
• Project timelines — sketch a gantt chart of milestones before sharing.
• Pre-commit checking — confirm a diagram renders correctly before pushing to a repo.