Skip to content
JamdeskUtilities
Free · Open source · Client-side

Mermaid Editor

Edit and preview Mermaid diagrams live

How to Edit Mermaid Diagrams Online

Type or paste Mermaid syntax into the editor and the preview renders the diagram instantly. The editor supports every Mermaid diagram type: flowcharts, sequence diagrams, timelines, pie charts, Gantt charts, class diagrams, state diagrams, and entity relationship diagrams. Syntax errors show inline with the parser message, and the last valid diagram stays visible while you fix them. When the diagram looks right, copy the Mermaid source into any tool that renders Mermaid: GitHub, GitLab, Notion, or a documentation platform.

What are Mermaid diagrams?

Mermaid is a text-based diagramming syntax. You describe a diagram in plain words (A --> B means "A points to B"), and a renderer turns that into a flowchart, sequence diagram, timeline, or any of a dozen other types. Because the source is just text, it lives in a code block next to your prose, versions cleanly in Git, and updates with a one-line edit instead of a round-trip through a drawing app. That's why you find Mermaid in GitHub issues, project READMEs, and most modern documentation tools. This editor runs the same Mermaid library those tools use, so whatever previews here renders the same way once you paste it back.

Official Mermaid documentation ↗

Mermaid timeline example

A timeline diagram starts with the timeline keyword, an optional title, and one line per period with events separated by colons. For example: timeline / title Product Launch Timeline / 2024 : Research : First prototype / 2025 : Private beta : Public beta / 2026 : GA launch. Each year (or any label) becomes a column, and each colon-separated entry becomes an event in that period. Load the built-in sample to see a rendered timeline you can edit.

Mermaid pie chart example

A pie chart begins with pie title followed by the chart name, then one quoted label and value per line. For example: pie title Browser Market Share / "Chrome" : 65 / "Safari" : 19 / "Firefox" : 9 / "Other" : 7. Values are relative, so Mermaid computes the percentages and they don't need to add up to 100.

Flowcharts, sequence diagrams, and more

Flowcharts use flowchart TD (top-down) or flowchart LR (left-right) with nodes and arrows like A[Start] --> B{Decision}. Sequence diagrams use sequenceDiagram with participant declarations and message arrows. The editor renders whatever the Mermaid parser accepts, so every diagram type in the Mermaid documentation works here. It runs Mermaid in strict security mode and sanitizes the rendered SVG, so a pasted diagram can't smuggle in a script.

More Mermaid examples in the Jamdesk docs ↗

Frequently Asked Questions

What is Mermaid?
Mermaid is an open-source JavaScript library that turns text definitions into diagrams: flowcharts, sequence diagrams, timelines, pie charts, Gantt charts, and more. You write a few lines of its plain-text syntax and Mermaid renders an SVG. GitHub, GitLab, and many documentation platforms render Mermaid code blocks automatically, so the same source works in an issue, a README, or your docs.
How do I make a timeline diagram in Mermaid?
Start the diagram with the timeline keyword, add an optional title line, then write one line per time period in the form 2025 : First event : Second event. Each period becomes a column with its events stacked beneath it. The editor ships with a timeline sample. Click Load Sample to start from a working example.
How do I make a pie chart in Mermaid?
Begin with pie title Your Chart Name, then list one entry per line as a quoted label, a colon, and a number, like "Chrome" : 65. Mermaid calculates the slice percentages from the values automatically.
Why does my Mermaid diagram show a syntax error?
The editor runs the official Mermaid parser and surfaces its error message, which usually names the unexpected token and line. Common causes: a missing diagram-type keyword on the first line, unclosed brackets in node labels, or special characters that need quoting. The last valid diagram stays visible while you fix the error.
Can I use these diagrams in my documentation?
Yes. Copy the Mermaid source into any platform that renders Mermaid code blocks — GitHub, GitLab, Notion, Obsidian, or a docs platform. Jamdesk renders mermaid fenced code blocks as SVG at build time, so the same source works in your docs unchanged.
Is the Mermaid Editor free and open source?
Yes. The Mermaid Editor is free and open source under the Apache 2.0 license. The full source code is on GitHub at github.com/jamdesk/utilities, and there are no ads, accounts, or usage limits.

About this tool

The Mermaid Editor is free and open source. It runs entirely in your browser. Your input is never uploaded, stored, or logged — you can verify this by opening the network tab in your browser developer tools while the tool runs. The full source code is on GitHub under the Apache 2.0 license, so you can read the code, file issues, or fork the project. There are no ads, no accounts, and no usage limits. Built and maintained by Jamdesk.

Mermaid renders natively in Jamdesk docs

Jamdesk builds Mermaid code blocks into SVG diagrams at build time. Learn more

Related Tools

⚡

MDX Formatter

Format and beautify MDX files

✓

MDX Validator

Check MDX for syntax errors

👁

MDX Viewer

Preview rendered MDX output

↓

MDX to Markdown

Strip JSX, get clean Markdown

🔄

Markdown to HTML

Convert Markdown to clean HTML

📋

YAML Validator

Validate YAML syntax and find errors

⇄

JSON ↔ YAML

Convert between JSON and YAML

📊

Markdown Table Generator

Convert CSV or TSV to Markdown tables

🔗

OpenGraph Preview

Preview and validate social share cards for any URL