slidev-mermaid（slidev Mermaid 命令行）

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:

graph TD A[Start] --> B[Process] B --> C[End]

Flowcharts

Top-Down Flow

graph TD A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] C --> E[End] D --> E

Left-Right Flow

graph LR A[Input] --> B[Process] --> C[Output]

Node Shapes

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

graph LR A --> B C --- D E -.-> F G ==> H I --text--> J K ---|text| L

Sequence Diagrams

Basic Sequence

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

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

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

classDiagram class Animal { +String name +int age +makeSound() }

class Dog { +String breed +bark() }

class Cat { +meow() }

Animal <|-- Dog Animal <|-- Cat

Relationships

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

stateDiagram-v2 [*] --> Idle Idle --> Processing: Start Processing --> Success: Complete Processing --> Error: Fail Success --> [*] Error --> Idle: Retry

Nested States

stateDiagram-v2 [*] --> Active

state Active { [*] --> Idle Idle --> Running: Start Running --> Paused: Pause Paused --> Running: Resume Running --> Idle: Stop }

Active --> [*]: Shutdown

Entity Relationship Diagrams

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

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

pie title Language Usage "JavaScript" : 45 "Python" : 25 "TypeScript" : 20 "Other" : 10

Git Graphs

gitGraph commit commit branch feature checkout feature commit commit checkout main merge feature commit

Mind Maps

mindmap root((Slidev)) Features Markdown Vue Components Animations Tech Stack Vite Vue 3 UnoCSS Export PDF PPTX SPA

Timeline

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

graph TD A --> B --> C

Available themes: default, neutral, dark, forest, base

Scale Option

graph TD A --> B --> C

Combined Options

graph LR A --> B --> C --> D

Custom Styling

Node Classes

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

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

4. Consider Animation

Use v-click to reveal diagram parts:

<v-click>

graph TD A --> B

</v-click>

<v-click>

graph TD A --> B --> C

</v-click>

Common Patterns

System Architecture

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

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.]

[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]