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
+ Add step
Undo
Redo
Tidy up
Export
PNG image
SVG vector
PDF document
Save .mmd (resume later)
Present
More
Layout
Layout: Layered
Layout: Force-directed
Layout: Force · compact
Layout: Tree
Direction: Top-Down
Direction: Left-Right
Direction: Bottom-Top
Direction: Right-Left
Canvas
Snap
Legend
Fit view
Zoom to selection
Arrange selection
Drag on canvas to select · double-click to add or rename · drag a blue dot to connect
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.
Exit
+ Add message
+ Participant
Note
Undo
Redo
Export
PNG image
SVG vector
PDF document
Save .mmd (resume later)
Present
More
Wrap selection in a frame
alt
opt
loop
par
Canvas
Autonumber
Fit view
Drag a participant to reorder · drag a message to re-sequence · double-click to edit
Exit
Start with a template
Pick a starter, edit the code, then switch to Draw to arrange it visually.
Unsaved work found.
A temporary copy in this browser
— it can disappear anytime, so restore it, then export a copy to keep working on it.
Restore
Dismiss