Mermaid Diagram Editor
Write Mermaid diagrams with live preview, starter templates, and one-click SVG export. Free, no sign-up required.
Templates:
Live Preview
Ready
Loading Mermaid...
Flowchart
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[Other]
Directions: TD, LR, BT, RL. Shapes: [] square, () rounded, {} diamond, [/parallelogram/].
Sequence Diagram
sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: Hi back
Arrows: ->> solid, -->> dashed. Use activate/deactivate for lifelines.
Gantt Chart
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Phase 1
Task A :a1, 2024-01-01, 30d
Status: done, active, crit. Use "after taskId" for dependencies.
Class Diagram
classDiagram
class Animal {
+String name
+makeSound() void
}
Animal <|-- Dog
<|-- inheritance, *-- composition, o-- aggregation, --> association.
ER Diagram
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
|| exactly one, o| zero or one, }| one or more, }o zero or more.
State Diagram
stateDiagram-v2
[*] --> Idle
Idle --> Processing : submit
Processing --> Done : complete
[*] start/end. Use "state Name { }" for composite states.
Like this tool? renlyAI does this and more for enterprise teams.
Generate Mermaid diagrams from your Azure DevOps work items, requirements, and architecture docs automatically with AI.
Get started free