Validate Mermaid and audit every fenced diagram in your Markdown

How to use the diagram tools

Inventory diagrams in a Markdown document

1. Paste a Markdown document, or click Open .md to load one from disk.
2. The table lists every fenced code block with its kind (mermaid / math / other), language tag, starting line, line count, and a short preview.
3. The badge row above shows totals at a glance — useful when auditing a large docs repo before a static-site build.
4. Click Send first Mermaid block to validator to forward a diagram into the validator tab.

Validate Mermaid syntax

1. Paste Mermaid source, or pull one in from the inventory tab.
2. Press 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 message.
3. Fix the issue and validate again — there is no round trip to any server.

Why a separate Mermaid validator?

GitHub 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. By validating before you commit, you avoid landing broken diagrams in a release. The same applies to a docs CI pipeline: catching parse errors in pre-flight is much faster than discovering them after git push.

The diagram inventory adds a second layer of value: it gives you an instant overview of where diagrams live in a document or repo, which is invaluable when:

• Migrating doc platforms and you need to budget for diagram conversion.
• Theming or rebranding — finding every flowchart to update colors.
• Replacing PNGs with code-first diagrams and tracking progress.

Mermaid diagram types at a glance

Diagram	Use case	Example fence tag
Flowchart	Process flows, decision trees	mermaid
Sequence	API calls, messaging between actors	mermaid
Class	Object-oriented domain models	mermaid
State	Finite-state machines	mermaid
ER	Database entity relationships	mermaid
Gantt	Project timelines	mermaid
Pie	Quick percentage breakdowns	mermaid
Mindmap	Brainstorms, taxonomies	mermaid
Journey	User journey mapping	mermaid
Git graph	Branching workflows	mermaid

All of these are recognized by the validator. If the parser returns a diagram type you don't expect, double-check that the first non-empty line declares the intended diagram (e.g. sequenceDiagram vs. flowchart LR).

Tips for writing Mermaid that just works

• Keep one diagram per fence. Two diagrams in the same \``mermaid` block won't parse.
• Avoid reserved keywords in unquoted labels. Wrap labels containing end, class, or punctuation in double quotes.
• Use simple ASCII first. Smart quotes and en-dashes pasted from Notion or Word cause parse failures. Run new diagrams through this validator before committing.
• Pin Mermaid versions for production docs. Diagram types and node syntax sometimes evolve; pinning prevents a Mermaid upgrade from silently breaking pages.

Companion tools

• Markdown Editor — write and preview Mermaid live with KaTeX, GFM, and slug IDs.
• Markdown Outline Reorder — restructure a doc that contains many diagrams without losing them.
• GFM Compliance Checklist — verify fences declare languages so syntax highlighting works.

Privacy & data

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