| name | slidev-mermaid |
| description | Create diagrams with Mermaid in Slidev. Use this skill for flowcharts, sequence diagrams, class diagrams, and more. |
Mermaid Diagrams in Slidev
This skill covers creating visual diagrams using Mermaid syntax in Slidev presentations. Mermaid allows you to create flowcharts, sequence diagrams, class diagrams, and many other diagram types using simple text.
When to Use This Skill
- Creating flowcharts and process diagrams
- Showing system architecture
- Visualizing sequences and workflows
- Creating class and entity diagrams
- Building organizational charts
- Displaying timelines and Gantt charts
Basic Syntax
Use a code block with mermaid language:
```mermaid
graph TD
A[Start] --> B[Process]
B --> C[End]
```
Flowcharts
Top-Down Flow
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
Left-Right Flow
```mermaid
graph LR
A[Input] --> B[Process] --> C[Output]
```
Node Shapes
```mermaid
graph TD
A[Rectangle]
B(Rounded)
C([Stadium])
D[[Subroutine]]
E[(Database)]
F((Circle))
G>Asymmetric]
H{Diamond}
I{{Hexagon}}
J[/Parallelogram/]
K[\Parallelogram Alt\]
```
Arrow Types
```mermaid
graph LR
A --> B
C --- D
E -.-> F
G ==> H
I --text--> J
K ---|text| L
```
Sequence Diagrams
Basic Sequence
```mermaid
sequenceDiagram
participant U as User
participant S as Server
participant D as Database
U->>S: Request
S->>D: Query
D-->>S: Result
S-->>U: Response
```
With Activation
```mermaid
sequenceDiagram
participant C as Client
participant S as Server
C->>+S: Login Request
S->>S: Validate
S-->>-C: Token
C->>+S: API Call
S-->>-C: Data
```
Notes and Loops
```mermaid
sequenceDiagram
participant A as Alice
participant B as Bob
Note over A: Alice thinks
A->>B: Hello Bob!
Note over A,B: Shared note
loop Every minute
A->>B: Are you there?
end
alt Success
B-->>A: Yes!
else Failure
B-->>A: No response
end
```
Class Diagrams
Basic Class
```mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
```
Relationships
```mermaid
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link
classK ..> classL : Dependency
classM ..|> classN : Realization
```
State Diagrams
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Start
Processing --> Success: Complete
Processing --> Error: Fail
Success --> [*]
Error --> Idle: Retry
```
Nested States
```mermaid
stateDiagram-v2
[*] --> Active
state Active {
[*] --> Idle
Idle --> Running: Start
Running --> Paused: Pause
Paused --> Running: Resume
Running --> Idle: Stop
}
Active --> [*]: Shutdown
```
Entity Relationship Diagrams
```mermaid
erDiagram
USER ||--o{ ORDER : places
USER {
int id PK
string name
string email
}
ORDER ||--|{ LINE_ITEM : contains
ORDER {
int id PK
date created
string status
}
PRODUCT ||--o{ LINE_ITEM : includes
PRODUCT {
int id PK
string name
float price
}
LINE_ITEM {
int quantity
}
```
Gantt Charts
```mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 5d
section Development
Backend :b1, after a2, 14d
Frontend :b2, after a2, 14d
section Testing
QA :c1, after b1, 7d
UAT :c2, after c1, 3d
```
Pie Charts
```mermaid
pie title Language Usage
"JavaScript" : 45
"Python" : 25
"TypeScript" : 20
"Other" : 10
```
Git Graphs
```mermaid
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
```
Mind Maps
```mermaid
mindmap
root((Slidev))
Features
Markdown
Vue Components
Animations
Tech Stack
Vite
Vue 3
UnoCSS
Export
PDF
PPTX
SPA
```
Timeline
```mermaid
timeline
title History of Slidev
2020 : Project Started
2021 : v0.1 Released
: Theme System Added
2022 : Monaco Editor
: Magic Move
2023 : v0.40
: Improved Animations
2024 : v0.50
: Browser Export
```
Styling Diagrams
Theme Option
```mermaid {theme: 'neutral'}
graph TD
A --> B --> C
```
Available themes: default, neutral, dark, forest, base
Scale Option
```mermaid {scale: 0.8}
graph TD
A --> B --> C
```
Combined Options
```mermaid {theme: 'neutral', scale: 0.7}
graph LR
A --> B --> C --> D
```
Custom Styling
Node Classes
```mermaid
graph TD
A[Important]:::important --> B[Normal]
B --> C[Warning]:::warning
classDef important fill:#f96,stroke:#333,stroke-width:2px
classDef warning fill:#ff0,stroke:#333
```
Link Styling
```mermaid
graph LR
A --> B
B --> C
linkStyle 0 stroke:#f00,stroke-width:2px
linkStyle 1 stroke:#0f0,stroke-width:2px
```
Configuration
Global Mermaid Config
Create setup/mermaid.ts:
import { defineMermaidSetup } from '@slidev/types'
export default defineMermaidSetup(() => {
return {
theme: 'neutral',
themeVariables: {
primaryColor: '#3b82f6',
primaryTextColor: '#fff',
primaryBorderColor: '#2563eb',
lineColor: '#64748b',
secondaryColor: '#f1f5f9',
},
}
})
Best Practices
1. Keep Diagrams Simple
❌ Too complex
20+ nodes, crossing lines everywhere
✓ Clear and focused
5-10 nodes, logical flow
2. Use Meaningful Labels
❌ Vague labels
graph TD
A --> B --> C
✓ Descriptive labels
graph TD
Request[HTTP Request] --> Auth[Authentication]
Auth --> Response[JSON Response]
3. Choose Right Diagram Type
| Content | Diagram Type |
|---|
| Process flow | Flowchart |
| API calls | Sequence |
| Data models | Class/ER |
| Project timeline | Gantt |
| Distribution | Pie |
| Hierarchy | Mind map |
4. Consider Animation
Use v-click to reveal diagram parts:
<v-click>
```mermaid
graph TD
A --> B
```
</v-click>
<v-click>
```mermaid
graph TD
A --> B --> C
```
</v-click>
Common Patterns
System Architecture
```mermaid
graph TB
subgraph Client
UI[Web App]
Mobile[Mobile App]
end
subgraph Backend
API[API Gateway]
Auth[Auth Service]
Core[Core Service]
end
subgraph Data
DB[(PostgreSQL)]
Cache[(Redis)]
end
UI --> API
Mobile --> API
API --> Auth
API --> Core
Core --> DB
Core --> Cache
```
Request Flow
```mermaid
sequenceDiagram
actor User
participant FE as Frontend
participant BE as Backend
participant DB as Database
User->>FE: Click Button
FE->>BE: POST /api/action
BE->>DB: INSERT
DB-->>BE: OK
BE-->>FE: 201 Created
FE-->>User: Success Toast
```
Output Format
When creating diagrams:
DIAGRAM PURPOSE: [What it illustrates]
DIAGRAM TYPE: [flowchart/sequence/class/etc.]
```mermaid {[options]}
[diagram code]
KEY ELEMENTS:
- Node A: [represents...]
- Node B: [represents...]
- Arrow X->Y: [means...]
STYLING NOTES:
- Theme: [chosen theme]
- Scale: [if adjusted]
- Custom classes: [if any]
