Mermaid Live Editor — Free Online Diagram Editor
A mermaid online editor with the source on the left and a live-rendered chart on the right. Flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, gitGraph, user journey, quadrant and xyChart templates are one dropdown away. Pan and zoom the preview, copy the Mermaid or the SVG, download PNG at 1×/2×/3×, and paste a mermaid.live share link to pick up someone else’s diagram — all in the tab, with no upload.
Private by design. Your Mermaid source is parsed and rendered entirely in your browser — nothing is uploaded to a server. Share links encode the diagram into this page’s URL hash; mermaid.live imports are inflated locally and treated as untrusted text.
FreeNo sign-upRuns in your browserDeveloperApplication
Mermaid diagram types this editor actually renders
Mermaid is a text DSL, not a drawing app. Each diagram family has its own first keyword; mixing them in one file is the usual “it worked in the README but not here” failure. The live preview uses mermaid.js in your browser with securityLevel: strict, so HTML/JS inside a node label is treated as text, not as a page.
| Diagram | First line | What it is for |
|---|---|---|
| Flowchart | flowchart TD / LR | Boxes, diamonds, subgraphs — the default mermaid live editor diagram |
| Sequence | sequenceDiagram | Request/response between actors and participants |
| Class | classDiagram | Types, fields, and inheritance for a design sketch |
| State | stateDiagram-v2 | States and transitions; v1 syntax still works but v2 is the current form |
| ER | erDiagram | Entities and cardinalities for a schema sketch |
| Gantt | gantt | Dated bars. Needs dateFormat; a missing format is a parse error, not a blank chart |
| Pie | pie | Named slices. showData puts the number on the slice |
| Mindmap | mindmap | Indented tree. Indentation is the structure — tabs vs spaces can break it |
| Timeline | timeline | Dated events in a single column |
| gitGraph | gitGraph | Commits, branches, merges. commit id: must be unique |
| User journey | journey | Scored steps grouped into sections |
| Quadrant | quadrantChart | 2×2 with x-axis / y-axis lines and named points in [0,1] |
| xyChart | xychart-beta | Bar + line on a named axis. The -beta suffix is still required |
- A parse error names the line. This editor keeps the last good SVG on screen so a typo does not blank a finished chart.
- Share links on this page are #pako: hashes of a mermaid.live-shaped JSON state (code + theme). Pasting a mermaid.live /edit#pako: or #base64: URL into the import field loads the diagram locally — the bytes never leave the tab.
- PNG export is a raster of the SVG at 1×/2×/3×. Transparent PNGs skip the theme background; the checkbox puts default/neutral/forest/base on white-ish paper and dark on #1e1e1e so the file matches the preview.
How to make a Mermaid diagram online
- Type or pick a template. Start from a flowchart (the default) or choose sequence, class, state, ER, Gantt, pie, mindmap, timeline, gitGraph, user journey, quadrant, or xyChart from the template list.
- Watch the live preview. The right pane re-renders about 300ms after you stop typing. Invalid syntax shows the mermaid parse error and line number; the last good diagram stays on screen instead of going blank.
- Theme, pan, zoom. Switch Default / Neutral / Dark / Forest / Base. Scroll to zoom, drag to pan, or use the zoom buttons and fullscreen on the preview.
- Export or share. Copy Mermaid code, copy SVG markup, download .svg, or download a 1×/2×/3× PNG with or without the theme background. Copy share link puts a #pako: hash on this page; paste a mermaid.live link to import.
Frequently Asked Questions
- Is this mermaid.live?
- No. It is a mermaid live editor on orangebot.ai that runs the mermaid.js renderer in your browser. It can import mermaid.live #pako: and #base64: share links, and its own share links use the same hash shape so a diagram round-trips through the URL without a server.
- Is my diagram uploaded?
- No. Parsing, theming, pan/zoom and SVG/PNG export all run locally. Share links encode the source into the page hash; orangebot never stores the diagram.
- Can I paste a mermaid.live link?
- Yes. Paste the full https://mermaid.live/edit#pako:… URL (or a #base64: link) into the import field. The state JSON is inflated in the browser with DecompressionStream — no extra library, and the payload is treated as untrusted diagram text.
- Which diagrams are supported?
- Whatever mermaid.js v11 renders: flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, gitGraph, user journey, quadrantChart, xyChart, and the rest of the v11 language. The template dropdown covers the thirteen families people search for.
- Why does a syntax error not clear the preview?
- On purpose. mermaid.live and every other mermaid chart maker that blanks the pane on a typo makes you lose your place. Invalid input keeps the last successful SVG and shows the parse error with a line number above it.
- How do I export a PNG with a transparent background?
- Uncheck “PNG background”, pick 1×/2×/3×, and download. Checked, the PNG uses the mermaid theme’s paper color so a dark diagram is not composited onto white by the OS previewer.
- Does it work in dark mode?
- The chrome (editor, toolbar, site header) follows the site theme. The diagram canvas uses the mermaid theme you picked — Default/Neutral/Forest/Base sit on light paper, Dark on #1e1e1e — so a default flowchart does not vanish against a dark page.
Use Cases
- Draft a README flowchart in a mermaid live editor before committing it
- Turn a sequence diagram into an SVG or 2× PNG for a design doc
- Open a mermaid.live share link without leaving orangebot.ai
- Sketch an ER diagram or gitGraph while the last good render stays on screen
- Hand a teammate a #pako: link that reopens this exact mermaid chart maker view
Related tools
More free, in-browser tools from the Documents & Utility set — every one runs locally, with no sign-up and no upload.
Markdown PreviewLive preview a .md file with GitHub styling.LaTeX PreviewRender LaTeX math live with KaTeX. Inline + block.Markdown to Google DocsConvert Markdown to a paste-ready Google Doc. Roboto + LaTeX math.Fancy Font GeneratorType once, copy 114 text styles — bold, script, fraktur, glitch, frames, upside-down, vaporwave.Ad-Law Word CheckerCheck Chinese ad copy against 广告法 banned words — catches traditional characters and spacing tricks, no upload.Compare ListsPaste two lists, get unique/common/union in one pass — case, whitespace and find-replace clean-up.