Mermaid
Two-Way
Editor
+ Participant
+ Message
+ Note
autonumber
Dir
TD
LR
BT
RL
Auto layout
Fit
↩ Undo
↪ Redo
Copy code
Download .mmd
Samples ▾
Clear
🌙
⌘ Sample Diagrams
(✏️ = visually editable)
Ready
Visual editor
Mermaid preview
Rectangle
Rounded
Stadium
Diamond
Circle
Hexagon
Cylinder
Subroutine
Parallelogram
Flag
Arrow →
Line —
Dotted ⇢
Thick ⇒
Solid ⟶
Dashed ⇢
Solid, no head
Dashed, no head
Solid ✕
Dashed ✕
Async ⟩
Dashed async ⟩
Rename
Delete
🔎
This diagram type is preview-only.
Visual editing supports flowcharts and sequence diagrams.
Use the
Mermaid preview
tab to see it rendered — the code pane stays fully editable.
+
−
1:1
Fit