Create diagrams with Mermaid.js v11 syntax. Use for flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, architecture diagrams, timelines, user journeys.
Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.
Basic Diagram Structure:
{diagram-type}
{diagram-content}
Common Diagram Types:
flowchart - Process flows, decision treessequenceDiagram - Actor interactions, API flowsclassDiagram - OOP structures, data modelsstateDiagram - State machines, workflowserDiagram - Database relationshipsgantt - Project timelinesjourney - User experience flowsSee references/diagram-types.md for all 24+ types with syntax.
Inline Markdown Code Blocks:
```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
Configuration via Frontmatter:
```mermaid
---