Mermaid Diagram Validator

Validate Mermaid diagrams before they hit production

Paste any Mermaid source and check it with the official parser — instant pass/fail with line-level error messages. Catches the syntax mistakes that silently break GitHub, GitLab, and Docusaurus renders. Runs entirely in your browser.

Browse 18 templates Open the editor Math equations

Mermaid source

Uses the same Mermaid bundle as the editor preview with securityLevel: "strict". Syntax is checked locally — your diagram source never leaves the browser tab.

Looking for a starting diagram? Browse the Mermaid Diagram Inventory — 18 ready-to-use templates with live previews.

Open inventory →

How to use the Mermaid validator

Paste Mermaid source in the textarea, or click Open .mmd / .md to load a file. If you load a Markdown file, the tool auto-extracts the first mermaid block.
Click Validate syntax. The tool loads the official Mermaid parser and reports either a green confirmation with the diagram type, or a red error with the parser's exact message.
Fix the issue and validate again — no commit / push / refresh round trip.

Why a validator beats "render and see"

GitHub, GitLab, and most static-site generators render Mermaid silently — if the syntax is wrong, the block stays as plain text or shows an unhelpful "Unable to render" message. Validating before you commit avoids:

Landing broken diagrams in a release. A README with a non-rendering diagram looks unmaintained.
The CI guess-and-check loop. Edit → commit → push → wait → discover the diagram still doesn't render → repeat. A local validator collapses that to a one-second pass/fail.
Stale screenshots. Teams who can't trust Mermaid often fall back to PNG screenshots — which immediately fall out of sync with the codebase.

Common mistakes the validator catches

Symptom	Likely cause
"Lexical error" near a quote	Smart quote pasted from Word / Notion — replace with `"`
"expecting ARROW_HEAD"	Arrow syntax typo (e.g., `->` instead of `-->`)
"expecting NEWLINE"	Missing line break before a directive or comment
"No diagram type detected"	First non-empty line missing the diagram declaration
Diagram type "(parsed)" but render is blank	Valid syntax but unsupported by your renderer's Mermaid version

Workflow: lint before commit

Draft the diagram in our Markdown Editor with live preview.
Once it looks right, paste the Mermaid source here and validate.
If green, commit. If red, fix the reported line and re-validate.
For repeat tasks, consider running validation in CI with the @mermaid-js/mermaid-cli package.

Need diagrams to start from?

Validation only helps if you have a diagram. Browse the Mermaid Diagram Inventory for 18 ready-to-use templates across every diagram type:

Flowchart — basic, decision tree, microservice request
Sequence — login handshake, typed API call
Class — inheritance, composition
State — order lifecycle, auth session
ER — blog schema, e-commerce core
Gantt — two-week sprint
Pie, Mindmap, Timeline, Journey, Git graph, Quadrant — and more

Each template renders live so you can pick visually, copy the fenced mermaid block, and paste straight into any Markdown document.

Companion tools

Mermaid Diagram Inventory — 18 visual, copy-paste templates.
Markdown Editor — write Mermaid with live preview.
Math Equation Inventory — same idea, for KaTeX / LaTeX.
Markdown Code Block Extractor — pull every mermaid fence out of a document.
GFM Compliance Checklist — confirm fences declare languages.

Privacy & data

The Mermaid library, the parser, and your diagram source all stay inside your browser tab. Security level is set to strict — no JavaScript inside diagram labels is ever executed. We never upload, log, or store anything.

Frequently asked questions

What is a Mermaid validator?

A Mermaid validator parses your diagram source with the same engine Mermaid itself uses and reports whether the syntax is valid before you commit. It catches mistakes — wrong arrow direction, missing brackets, unknown diagram type, stray smart quotes — that would otherwise silently fail to render on GitHub, GitLab, or your docs site.

Which Mermaid diagram types are supported?

All diagram types shipped by the official Mermaid bundle: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, journey, gantt, pie, mindmap, timeline, gitGraph, requirement, quadrantChart, sankey, xychart, block, packet, architecture, and more. The validator uses the same Mermaid version as our [editor preview](/editor) and the [diagram inventory](/tools/markdown-diagram-inventory).

How do I find the line number of a syntax error?

Mermaid's parser produces error messages with line and column hints — they appear in the red panel after Validate. Common patterns: 'expecting NEWLINE' usually means a missing line break before a directive, 'expecting ARROW_HEAD' means an arrow type is malformed, 'Lexical error' means an unexpected character (often a smart quote).

Why is my GitHub Mermaid diagram blank?

Three usual causes: (1) syntax error — validate here to find it; (2) the diagram type isn't supported by GitHub's bundled Mermaid version (e.g., very new types may lag); (3) HTML inside labels was stripped by GitHub's sanitizer. The validator catches case 1; for case 2, downgrade to a supported diagram type; for case 3, escape angle brackets or simplify labels.

Is my diagram uploaded?

No. The Mermaid library is fetched once into your browser, configured with `securityLevel: strict`, and the parse runs locally. Nothing — neither the diagram source nor any metadata — leaves your tab.

Can I validate a .mmd file from my computer?

Yes. Click Open .mmd / .md to load a file. If you open a `.md` document, the tool extracts the first ```mermaid fenced code block so you don't have to manually carve out the source.

Need ready-made diagrams to start from?

Browse the [Mermaid Diagram Inventory](/tools/markdown-diagram-inventory) — 18 production-quality templates across every diagram type, rendered live so you can pick visually. Copy any one, paste into the validator, edit, and confirm it still parses.

Related tools

More free browser tools in the same workflow.

Use the API

Ship Markdown features in your product with our REST API — render, convert, audit, and transform documents at scale.

New to the platform? Start with the API quickstart, then try a live request in the API playground.

Explore the API platform