Mermaid Diagrams
Generate diagrams directly from text using Mermaid syntax. 12 diagram types supported. Available on all plans.
Overview
Mermaid lets you create diagrams and visualizations using a text-based syntax inside fenced code blocks. Diagrams are rendered as SVG, so they scale perfectly at any size. Mermaid is available on both Free and Pro plans with no restrictions.
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[Other Action]
```Flowchart
Flowcharts visualize process flows and decision trees. Use graph TD for top-down or graph LR for left-to-right layout.
```mermaid
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[Other Action]
C --> E[End]
D --> E
```Sequence Diagram
Sequence diagrams show interactions between actors and systems over time.
```mermaid
sequenceDiagram
participant Client
participant API
Client->>API: POST /v1/convert
API-->>Client: 200 OK
```Class Diagram
Class diagrams model object-oriented relationships with properties and methods.
```mermaid
classDiagram
class Document {
+String id
+String title
+String content
+publish()
+unpublish()
}
```State Diagram
State diagrams represent state machines and transitions.
```mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Published: publish()
Published --> Draft: unpublish()
Published --> [*]: delete()
```Entity Relationship Diagram
ER diagrams model database schemas and relationships between entities.
```mermaid
erDiagram
USER ||--o{ DOCUMENT : creates
DOCUMENT ||--o| PUBLISHED_PAGE : has
USER ||--o{ API_KEY : owns
```Pie Chart
Pie charts display proportional data.
```mermaid
pie title Document Formats
"Google Docs" : 35
"Word" : 25
"Slack" : 20
"Email" : 15
"Other" : 5
```Gantt Chart
Gantt charts visualize project timelines and task dependencies.
```mermaid
gantt
title API Integration Timeline
dateFormat YYYY-MM-DD
section Setup
Create account :done, a1, 2026-01-01, 1d
Generate API key :done, a2, after a1, 1d
section Development
Build integration :active, b1, after a2, 5d
Testing :b2, after b1, 3d
```User Journey
User journey diagrams map out user experiences with satisfaction scores.
```mermaid
journey
title Publishing a Document
section Create
Write markdown: 5: Developer
Choose template: 3: Developer
section Publish
Call API: 5: Developer
Share URL: 5: Developer
```Mindmap
Mindmaps organize ideas hierarchically from a central topic.
```mermaid
mindmap
root((Unmarkdown))
Templates
Free (8)
Business (8)
Academic (7)
Publishing
Custom URLs
SEO
Visibility
API
REST endpoints
Authentication
```Timeline
Timeline diagrams display events in chronological order.
```mermaid
timeline
title Unmarkdown Releases
2025 Q1 : Core engine
: Template system
2025 Q2 : Publishing
: API v1
2025 Q3 : AI actions
: Developer docs
```Quadrant Chart
Quadrant charts plot items on a 2D matrix for prioritization or comparison.
```mermaid
quadrantChart
title Feature Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Do First
quadrant-2 Plan
quadrant-3 Delegate
quadrant-4 Eliminate
Templates: [0.2, 0.8]
API Docs: [0.6, 0.9]
Playground: [0.8, 0.7]
```Git Graph
Git graphs visualize branching and merging workflows.
```mermaid
gitGraph
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
```Theming
Mermaid diagrams automatically adapt to your chosen template. Dark templates render diagrams with light text on transparent backgrounds, while light templates use dark text. Colors are derived from the template accent color. No manual theme configuration is needed.
Troubleshooting
--> not ->), unclosed brackets, and invalid node identifiers containing special characters. The editor will show an error message if the syntax is invalid.