Mermaid Chart runs entirely in your browser and needs JavaScript enabled.
Code
Draw
Mermaid Chart
All tools
Light mode
Flowchart
Sequence
Class
State
Entity-Relationship
Gantt
Pie
Mind map
User journey
Git graph
Sample
Templates
Open file
Theme: Default
Theme: Neutral
Theme: Forest
Theme: Dark
Theme: Base
Copy code
Save .mmd
Export
PNG
SVG
PDF
0 lines
Ready
Clear
Preview
−
—
+
Fit
Shape: Rectangle
Shape: Rounded
Shape: Stadium
Shape: Subroutine
Shape: Cylinder
Shape: Circle
Shape: Diamond
Shape: Hexagon
Shape: Flag
Edge: Solid →
Edge: Dotted ⇢
Edge: Thick ⇒
+ Add step
Undo
Redo
Layout: Layered
Layout: Force-directed
Layout: Force · compact
Layout: Tree
Re-layout
Direction: Top-Down
Direction: Left-Right
Direction: Bottom-Top
Direction: Right-Left
Snap
Legend
Select a box for colours & actions · drag from a blue dot to connect (release on empty canvas to create) · double-click to rename
Drag a shape from the left, or double-click the canvas to add a box.
Hover a box and drag from one of its blue dots to connect it to another.
Start with a template
Pick a starter, edit the code, then switch to Draw to arrange it visually.