Mermaid Editor — render diagrams from text in your browser

This mermaid editor turns Mermaid text into a live diagram as you type: write the diagram in the "mermaid" pane on the left and the rendered preview updates on the right. It is the quick way to draw a flowchart, sequence diagram, class diagram, state machine, ER diagram, gantt chart, pie chart or mindmap from plain text — a live mermaid editor that needs no install and no account.

Pick one of the built-in templates to start, or paste your own Mermaid code; the preview re-renders a few hundred milliseconds after you stop typing. Switch the diagram theme, then export the result as SVG or PNG, or download the raw .mmd source. Everything runs 100% client-side in your browser — the mermaid runtime renders the diagram locally and the SVG is sanitized before it is shown, so nothing you type is uploaded.

Usage

1. Type or paste your Mermaid code into the "mermaid" source pane on the left — start with the diagram keyword (e.g. `flowchart TD`, `sequenceDiagram`, `classDiagram`, `gantt`). The "preview" pane on the right renders it live.
2. Not sure where to start? Open the "templates…" dropdown and pick one — flowchart, sequence diagram, class diagram, state machine, ER diagram, gantt chart, pie chart or mindmap — to load a ready-made example you can edit.
3. Change the look with the "diagram theme" dropdown (default · dark · forest · neutral); the preview re-renders in the chosen theme.
4. Click "export svg" to save the rendered diagram as a vector SVG, or "export png" to save a high-resolution raster PNG.
5. Click "download .mmd" to save the raw Mermaid source so you can version it or reopen it later.
6. Use "clear" to empty the editor and start over. If the syntax is wrong, the preview shows a "syntax error" and the exact parser message so you can fix the line.

Examples

Draw a flowchart from text: flowchart TD A[Start] --> B{Valid?} --> C[Done]

Begin a diagram with `flowchart TD` (top-down) or `flowchart LR` (left-right), then describe nodes and arrows. `A --> B` draws an arrow; `B{Valid?}` is a decision diamond and `C[Done]` a box. The preview renders the flowchart as you type — the fastest way to make a flowchart online.

Make a sequence diagram: sequenceDiagram User->>Server: POST /login Server-->>User: token

Start with `sequenceDiagram` and write one message per line: `User->>Server: POST /login` is a solid call and `Server-->>User: token` a dashed reply. Add `alt` / `else` blocks for branches. Great for documenting an auth or API flow as a sequence diagram online.

Build a gantt chart or class diagram: gantt … / classDiagram …

Pick the "gantt chart" template to lay out a project timeline with `section` and dated tasks, or the "class diagram" template to model classes with fields, methods and relationships. Switch the diagram type just by changing the first keyword — ER diagrams (`erDiagram`), state machines (`stateDiagram-v2`), pie charts and mindmaps work the same way.

FAQ

How do I render a Mermaid diagram online?

Paste your Mermaid code into the left "mermaid" pane and the diagram renders live in the "preview" pane on the right — no button to press. Begin the code with a diagram keyword such as `flowchart TD` or `sequenceDiagram`; the preview re-renders shortly after you stop typing.

What diagram types does this mermaid editor support?

All the common Mermaid types: flowchart, sequence diagram, class diagram, state machine, ER diagram, gantt chart, pie chart and mindmap. The "templates…" dropdown has a starter for each — load one, then edit it or replace it with your own code.

Can I export the diagram as SVG or PNG?

Yes. Click "export svg" for a scalable vector file or "export png" for a high-resolution raster image; you can also "download .mmd" to keep the raw Mermaid source. Exporting and rendering both happen in your browser.

Is my diagram uploaded anywhere?

No. The Mermaid runtime renders the diagram entirely client-side in your browser and the resulting SVG is sanitized before it is displayed — nothing you type is sent to a server, so it is safe for private architecture and internal flows. 0 bytes leave your browser.