OneTaskBy Tim King · Updated
Mermaid Live Editor
Preview and Export Mermaid Diagrams, Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Mermaid Live Editor works
This Mermaid live editor previews Mermaid diagrams as you type. Paste the code from a README, wiki or pull request, or write a new diagram, and the page renders it with the open-source Mermaid library, shows syntax errors in plain words and downloads the result as SVG or PNG. Everything runs in your browser and the diagram text is never uploaded.
Mermaid live editor: check the diagram before you commit it
Mermaid is a text format for diagrams that many documentation tools render directly. GitHub, GitLab, Notion, Obsidian and several wikis turn a fenced "mermaid" code block into a picture. That is handy until a typo breaks the diagram and you only find out after pushing. Editing here first shows the result on every keystroke, and the downloaded SVG or PNG is useful for slides, documents and tools that cannot render Mermaid themselves.
What you can draw
The first line names the diagram type. Common ones:
- flowchart TD or flowchart LR for process charts.
- sequenceDiagram for messages between participants.
- classDiagram for classes, fields and inheritance.
- erDiagram for database entities and relationships.
- gantt for project schedules.
- pie, mindmap, timeline, stateDiagram-v2 and journey for the rest.
Lines starting with "%%" are comments. The Mermaid documentation lists the full syntax for each type.
About this editor
The page bundles Mermaid 11.17.2, an MIT-licensed open-source library first released by Knut Sveidqvist in 2014. It renders in strict security mode, so scripts and clickable callbacks in the diagram text are ignored, and labels are drawn as plain SVG text so that PNG export works. Very wide diagrams are scaled down to fit the preview; the SVG download keeps the real size. Theme changes the colour scheme Mermaid uses, and the title box adds a heading above the diagram.
When to use the simpler makers
Mermaid's syntax is powerful but has to be exact. For quick everyday charts the dedicated tools here accept looser text: the flowchart maker, the sequence diagram maker, the ER diagram maker and the Gantt chart maker. Use this editor when the diagram needs to live as Mermaid code in a repository or wiki.
FAQ
Why does my diagram show a syntax error?
Mermaid is strict about keywords, arrows and brackets. The error message names the problem and usually the line. Common causes are a missing diagram type on the first line, unbalanced brackets in a label and special characters that need the label wrapped in quotes.
Will the diagram look the same on GitHub?
Usually very close. GitHub runs its own Mermaid version and its own theme, so colours, fonts and newer diagram types can differ slightly. The syntax that renders here is valid Mermaid 11.
Is my diagram text sent anywhere?
No. Mermaid runs inside this page, in your browser. The text you type is not uploaded, saved on a server or shared, so it is safe to paste diagrams describing private systems.
Why are links and click events not working?
The editor runs Mermaid in strict security mode, which disables click callbacks and links in the diagram text. That keeps pasted code from running scripts in your browser.
See also: all Diagram Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, 3D Science, Tracker Music.
Related tools
Flowchart Maker
Type step -> step lines and download a flowchart as SVG or PNG.
Sequence Diagram Maker
Type A -> B message lines and get a sequence diagram.
ER Diagram Maker
Type tables and relationships to draw a crow's foot ER diagram.
Gantt Chart Maker
Paste task, start and end rows; download a Gantt chart as SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.