Mermaid Diagram Viewer and Editor

1
Preview
100%

Rendered diagram will appear here

Supports Flowchart, Sequence, Class, State, ER, Gantt, and more

About the Mermaid Diagram Viewer

The Mermaid Viewer renders Mermaid markdown diagram definitions — flowcharts, sequence diagrams, ER diagrams, Gantt charts, state diagrams, mindmaps — into SVG inside your browser. Paste a definition, watch it render live as you edit, and download the result as PNG or SVG for slides, ADRs, or README files. Backed by the official Mermaid library, the viewer supports the full v11+ syntax including AI prompt-generated diagrams and the recent block diagram and architecture diagram types.

Updated: May 8, 2026

Related Tools

Diff CheckerCompare two Mermaid definitions to track architecture diagram changes.Try it JSON ViewerInspect JSON responses to extract data for ER diagrams.Try it JSON/YAML ConverterConvert OpenAPI YAML to JSON before generating diagrams.Try it Image UpscalerUpscale a PNG-rendered diagram for high-DPI presentation.Try it Regex TesterBuild patterns to extract diagram definitions from markdown.Try it

How to use the viewer

  • Paste a Mermaid definition into the editor — the syntax starts with the diagram type (`flowchart TD`, `sequenceDiagram`, `erDiagram`, `gantt`, `stateDiagram-v2`, etc.) on the first line.
  • Watch the right pane render the diagram in real time as you type. Syntax errors surface inline with line numbers from the Mermaid parser.
  • The diagram automatically follows the application theme — switch dark mode and the rendered SVG re-renders with Mermaid's `dark` theme; switch to light and it falls back to the `default` theme. Fonts and per-diagram tweaks remain configurable via Mermaid theme directives inside your definition.
  • Download as SVG (scales perfectly for documents and slides) or PNG (compatible with everything but loses quality on zoom). For README files, SVG is preferred.
  • Copy the rendered SVG markup directly to embed in HTML pages or to paste into wikis (Confluence, Notion) that accept inline SVG.

Common use cases

  • Architecture documentation in ADRs — render a flowchart of the request flow before writing the prose explanation. Mermaid in markdown renders inline on GitHub, GitLab, and most modern wikis.
  • Sequence diagrams for distributed system interactions — show the actual service-to-service calls during a user flow, including async messaging.
  • ER diagrams for database schemas — generate from Prisma schema or DBML once, refine in the viewer.
  • Gantt charts for sprint planning — quick visualization without spinning up Jira or Linear charts.
  • State diagrams for finite state machines — order processing, payment lifecycle, OAuth flow states.

Privacy and security

Mermaid runs entirely in your browser as a bundled JavaScript library (about 350 KB after gzip — heavier than other tools, but unavoidable for the parser + rendering engine). Diagram definitions, including any service names, internal endpoints, or proprietary architecture details, never leave the page. No outbound requests are made during rendering. The downloaded SVG/PNG is generated locally.

Tips and pitfalls

  • Special characters in node labels need escaping: parentheses, backticks, and quotes can break the parser. Wrap labels in double quotes when in doubt: `A["My (complex) label"]`.
  • Indentation matters in some diagram types (Gantt, mindmap) but not others (flowchart, sequence). Errors that say "expected DEDENT" usually mean inconsistent indentation.
  • GitHub renders Mermaid inline in markdown — the syntax is ````mermaid` followed by the definition followed by `````. The viewer here matches GitHub's rendering, so what you preview is what your README will show.
  • Theme overrides via `%%{init: {"theme": "dark"} }%%` directive at the top of the definition. Useful when the surrounding markdown is dark-mode but Mermaid would default to light.
  • Large diagrams (50+ nodes) may render slowly and become unreadable. Split into multiple diagrams linked by reference, or use the new architecture-beta diagram type which is designed for larger system maps.

Frequently Asked Questions

Which diagram types are supported?
All Mermaid v11+ types: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, mindmap, timeline, gitGraph, sankey, xychart, block, architecture, packet, kanban, requirementDiagram, c4. The viewer auto-detects type from the first line.
Where can I learn the syntax?
mermaid.js.org has the official documentation with examples for every diagram type. The repository on GitHub also has a thorough README and changelog. For ChatGPT/Claude prompt-engineering, the syntax is well-known to LLMs — ask for "a Mermaid flowchart showing X" and refine in the viewer.
Can I embed Mermaid in GitHub/GitLab markdown?
Yes — both GitHub and GitLab render Mermaid blocks inline. Use a fenced code block with `mermaid` as the language identifier. The diagram renders in PR diffs, README files, and wiki pages without configuration. Most modern static site generators (Docusaurus, MkDocs, Hugo) also support Mermaid via plugins.
Does the viewer handle Mermaid Live Editor URLs?
You can paste the diagram definition portion (extract from the URL hash); full URL parsing is not auto-supported. To migrate from Mermaid Live Editor, copy the textarea content and paste it here.
Why does my diagram look different in production?
Most often theme differences. The viewer defaults to "default" theme; GitHub uses "default" for light mode and "dark" for dark mode. Apply a `%%{init: {"theme": "dark"} }%%` directive at the top to lock the appearance.
How do I add custom styles?
Per-node styling: `style nodeId fill:#f9f,stroke:#333` after the node definition. Class-based: `classDef important fill:#f88; class A,B,C important;`. Theme variables can be overridden in the init directive.
Is my diagram code uploaded?
Never. The Mermaid library and renderer are bundled into the page; everything runs locally in JavaScript. Architecture diagrams, sequence diagrams, and ER diagrams describing your internal systems stay in your browser. The Share button is opt-in and uses lz-string compression.
PNG vs SVG download — which should I use?
SVG for documentation, ADRs, README files, and any context where the diagram might be viewed at multiple sizes. PNG for Slack pastes, email attachments, and slide decks where the consumer expects a raster image. SVG embeds in HTML, GitHub markdown, and most wikis natively.