How to preview Mermaid diagrams in Markdown

Mermaid lets you describe a diagram in plain text and have it drawn for you — no dragging boxes. Mermaid Preview renders your Mermaid code instantly so you can build flowcharts and diagrams as fast as you can type them.

How Mermaid works

You write the diagram's logic, and Mermaid handles the layout:

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Do this]
  B -->|No| D[Do that]

That renders as a flowchart with the boxes positioned and the arrows routed automatically. Change a line, and the diagram updates — no realigning shapes by hand.

What you can draw

Mermaid supports many diagram types from the same text approach:

• Flowcharts (graph / flowchart)
• Sequence diagrams for interactions over time
• Class and entity-relationship diagrams
• Gantt charts, state diagrams, pie charts, and more

Why text-based diagrams win

• They're diffable. A diagram in version control shows exactly what changed between commits.
• They're fast to edit. Reword a node by editing text, not nudging a shape.
• They live with your docs. GitHub, GitLab, and many docs tools render Mermaid in Markdown natively — paste the code block and it just appears.

Getting it into your document

Once the diagram renders correctly, wrap the code in a fenced block tagged mermaid in your Markdown. On platforms that support Mermaid, it renders automatically; on those that don't, export the diagram as an image. To generate the code block scaffold, the Mermaid Diagram Generator gives you a starting template.

Privacy

Rendering happens in your browser — your diagrams, including ones describing internal systems, stay local.

Describe the diagram, watch it draw itself, drop it in your docs.