Mermaid Diagram Editor

Write Mermaid, then drag the shapes where you want them and recolour anything. Export a pixel-perfect PNG, JPG or SVG.

flowchart TD
    A([Start]) --> B{Is it working?}
    B -- Yes --> C[Ship it]
    B -- No --> D[Check the logs]
    D --> E{Found the bug?}
    E -- Yes --> F[Fix and test]
    E -- No --> G[Ask a teammate]
    F --> C
    G --> D
    C --> H([Done])

This diagram type lays itself out. Colour edits, zoom and export all still work.

Loading the Mermaid renderer…

100%

Layout you control

Mermaid's auto-layout is a starting point, not a verdict. Drag any shape and the links bend to keep up: arrowheads, labels and curvature included. Drag a subgraph and everything inside travels with it.

Colour without CSS

Click a shape or a link to set its fill, border, text colour, thickness and dash pattern. Pick a whole-diagram theme from the palette menu, or override single elements on top of it.

Export that matches

PNG and JPG render up to 4× for slide decks and print, with a transparent, themed, light or dark background. SVG stays vector. Every export includes your moves and colours.

Supported diagram types

Flowcharts, sequence diagrams, class diagrams, state machines, entity-relationship diagrams, Gantt charts, pie charts, mind maps, timelines, user journeys, Git graphs, quadrant charts, Sankey diagrams, XY charts and block diagrams. Dragging applies to the node-based types (flowchart, class, state, ER, mind map); colour editing, zoom and export work on all of them. Your diagram is rendered by Mermaid in this tab and never uploaded; the share link carries the whole diagram inside the URL itself.

Your data stays private. All processing happens locally in your browser. No data is collected, stored, or sent to any server.