slidev-mermaid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Diagrams in Slidev

在Slidev中使用Mermaid绘制图表

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.

本技能介绍如何在Slidev演示文稿中使用Mermaid语法创建可视化图表。Mermaid允许你通过简单的文本语法创建流程图、时序图、类图等多种类型的图表。

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:

markdown

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

使用标注为

mermaid

的代码块：

markdown

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

Flowcharts

流程图

Top-Down Flow

自上而下流程

markdown

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

markdown

```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

自左向右流程

markdown

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

markdown

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

Node Shapes

节点形状

markdown

```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\]
```

markdown

```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

箭头类型

markdown

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

markdown

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

Sequence Diagrams

时序图

Basic Sequence

基础时序

markdown

```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
```

markdown

```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

带激活状态

markdown

```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
```

markdown

```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

备注与循环

markdown

```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
```

markdown

```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

基础类

markdown

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

    class Dog {
        +String breed
        +bark()
    }

    class Cat {
        +meow()
    }

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

markdown

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

    class Dog {
        +String breed
        +bark()
    }

    class Cat {
        +meow()
    }

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

Relationships

关系类型

markdown

```mermaid
classDiagram
    classA --|> classB : Inheritance
    classC --* classD : Composition
    classE --o classF : Aggregation
    classG --> classH : Association
    classI -- classJ : Link
    classK ..> classL : Dependency
    classM ..|> classN : Realization
```

markdown

```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

状态图

markdown

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

markdown

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

Nested States

嵌套状态

markdown

```mermaid
stateDiagram-v2
    [*] --> Active

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

    Active --> [*]: Shutdown
```

markdown

```mermaid
stateDiagram-v2
    [*] --> Active

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

    Active --> [*]: Shutdown
```

Entity Relationship Diagrams

实体关系图

markdown

```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
    }
```

markdown

```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

甘特图

markdown

```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
```

markdown

```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

饼图

markdown

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

markdown

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

Git Graphs

Git提交图

markdown

```mermaid
gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
```

markdown

```mermaid
gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
```

Mind Maps

思维导图

markdown

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

markdown

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

Timeline

时间线

markdown

```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
```

markdown

```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

主题选项

markdown

```mermaid {theme: 'neutral'}
graph TD
    A --> B --> C
```

Available themes:

default

neutral

dark

forest

base

markdown

```mermaid {theme: 'neutral'}
graph TD
    A --> B --> C
```

可用主题：

default

neutral

dark

forest

base

Scale Option

缩放选项

markdown

```mermaid {scale: 0.8}
graph TD
    A --> B --> C
```

markdown

```mermaid {scale: 0.8}
graph TD
    A --> B --> C
```

Combined Options

组合选项

markdown

```mermaid {theme: 'neutral', scale: 0.7}
graph LR
    A --> B --> C --> D
```

markdown

```mermaid {theme: 'neutral', scale: 0.7}
graph LR
    A --> B --> C --> D
```

Custom Styling

自定义样式

Node Classes

节点类

markdown

```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
```

markdown

```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

连线样式

markdown

```mermaid
graph LR
    A --> B
    B --> C
    linkStyle 0 stroke:#f00,stroke-width:2px
    linkStyle 1 stroke:#0f0,stroke-width:2px
```

markdown

```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

全局Mermaid配置

Create

setup/mermaid.ts

typescript

import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => {
  return {
    theme: 'neutral',
    themeVariables: {
      primaryColor: '#3b82f6',
      primaryTextColor: '#fff',
      primaryBorderColor: '#2563eb',
      lineColor: '#64748b',
      secondaryColor: '#f1f5f9',
    },
  }
})

创建

setup/mermaid.ts

文件：

typescript

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

1. 保持图表简洁

❌ Too complex

20+ nodes, crossing lines everywhere

✓ Clear and focused

5-10 nodes, logical flow

❌ 过于复杂

20+个节点，连线交叉混乱

✓ 清晰聚焦

5-10个节点，逻辑清晰

2. Use Meaningful Labels

2. 使用有意义的标签

❌ Vague labels

mermaid

graph TD
    A --> B --> C

✓ Descriptive labels

mermaid

graph TD
    Request[HTTP Request] --> Auth[Authentication]
    Auth --> Response[JSON Response]

❌ 模糊标签

mermaid

graph TD
    A --> B --> C

✓ 描述性标签

mermaid

graph TD
    Request[HTTP Request] --> Auth[Authentication]
    Auth --> Response[JSON Response]

3. Choose Right Diagram Type

3. 选择合适的图表类型

Content	Diagram Type
Process flow	Flowchart
API calls	Sequence
Data models	Class/ER
Project timeline	Gantt
Distribution	Pie
Hierarchy	Mind map

内容类型	图表类型
流程步骤	流程图
API调用	时序图
数据模型	类图/实体关系图
项目时间线	甘特图
数据分布	饼图
层级结构	思维导图

4. Consider Animation

4. 考虑动画效果

Use v-click to reveal diagram parts:

markdown

<v-click>

```mermaid
graph TD
    A --> B
```

</v-click>

<v-click>

```mermaid
graph TD
    A --> B --> C
```

</v-click>

使用v-click逐步展示图表内容：

markdown

<v-click>

```mermaid
graph TD
    A --> B
```

</v-click>

<v-click>

```mermaid
graph TD
    A --> B --> C
```

</v-click>

Common Patterns

常见模式

System Architecture

系统架构

markdown

```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
```

markdown

```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

请求流程

markdown

```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
```

markdown

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

undefined

创建图表时建议遵循以下格式：

图表用途: [说明图表展示的内容]
图表类型: [flowchart/sequence/class等]

```mermaid {[配置选项]}
[图表代码]

关键元素说明:

节点A: [代表...]
节点B: [代表...]
箭头X->Y: [表示...]

样式说明:

主题: [所选主题]
缩放比例: [若有调整]
自定义类: [若有使用]

undefined