关于 slidev-mermaid
slidev-mermaid 是面向 Slidev 演示文稿作者的 Mermaid 图表指南，涵盖多种图表语法、样式配置与实用绘制规范。
主要功能
- 01使用 Mermaid 文本语法绘制图表
- 02创建流程图和时序图
- 03绘制类图、状态图与实体关系图
- 04制作甘特图、时间线和思维导图
- 05配置主题、缩放和图表样式
适用场景
- 01在幻灯片中展示系统架构
- 02说明请求流程或交互顺序
- 03呈现数据模型和实体关系
- 04制作项目进度或时间线图
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/slidev-mermaid确认已加载。
详细介绍
Slidev 中的 Mermaid 图表
本技能介绍如何在 Slidev 演示文稿中使用 Mermaid 语法创建可视化图表。Mermaid 让你只需编写简单文本，即可创建流程图、时序图、类图以及许多其他类型的图表。
适用场景
- 创建流程图和过程图
- 展示系统架构
- 可视化时序和工作流
- 创建类图和实体图
- 构建组织结构图
- 展示时间线和甘特图
基本语法
使用语言标记为 mermaid 的代码块：
```mermaid
graph TD
A[Start] --> B[Process]
B --> C[End]
```
流程图
自上而下的流程
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
从左到右的流程
```mermaid
graph LR
A[Input] --> B[Process] --> C[Output]
```
节点形状
```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\]
```
箭头类型
```mermaid
graph LR
A --> B
C --- D
E -.-> F
G ==> H
I --text--> J
K ---|text| L
```
时序图
基本时序图
```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
```
带激活状态
```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
```
注释和循环
```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
```
类图
基本类
```mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
```
关系
```mermaid
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link
classK ..> classL : Dependency
classM ..|> classN : Realization
```
状态图
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Start
Processing --> Success: Complete
Processing --> Error: Fail
Success --> [*]
Error --> Idle: Retry
```
嵌套状态
```mermaid
stateDiagram-v2
[*] --> Active
state Active {
[*] --> Idle
Idle --> Running: Start
Running --> Paused: Pause
Paused --> Running: Resume
Running --> Idle: Stop
}
Active --> [*]: Shutdown
```
实体关系图
```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
}
```
甘特图
```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
```
饼图
```mermaid
pie title Language Usage
"JavaScript" : 45
"Python" : 25
"TypeScript" : 20
"Other" : 10
```
Git 图
```mermaid
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
```
思维导图
```mermaid
mindmap
root((Slidev))
Features
Markdown
Vue Components
Animations
Tech Stack
Vite
Vue 3
UnoCSS
Export
PDF
PPTX
SPA
```
时间线
```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
```
图表样式
主题选项
```mermaid {theme: 'neutral'}
graph TD
A --> B --> C
```
可用主题：default、neutral、dark、forest、base
缩放选项
```mermaid {scale: 0.8}
graph TD
A --> B --> C
```
组合选项
```mermaid {theme: 'neutral', scale: 0.7}
graph LR
A --> B --> C --> D
```
自定义样式
节点类
```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
```
链接样式
```mermaid
graph LR
A --> B
B --> C
linkStyle 0 stroke:#f00,stroke-width:2px
linkStyle 1 stroke:#0f0,stroke-width:2px
```
配置
全局 Mermaid 配置
创建 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',
},
}
})
最佳实践
1. 保持图表简洁
❌ 过于复杂
20+ nodes, crossing lines everywhere
✓ 清晰且重点突出
5-10 nodes, logical flow
2. 使用有意义的标签
❌ 含糊的标签
graph TD
A --> B --> C
✓ 描述性标签
graph TD
Request[HTTP Request] --> Auth[Authentication]
Auth --> Response[JSON Response]
3. 选择合适的图表类型
| 内容 | 图表类型 |
|---|---|
| 流程 | 流程图 |
| API 调用 | 时序图 |
| 数据模型 | 类图/实体关系图 |
| 项目时间线 | 甘特图 |
| 分布 | 饼图 |
| 层级结构 | 思维导图 |
4. 考虑动画
使用 v-click 逐步显示图表部分：
<v-click>
```mermaid
graph TD
A --> B
```
</v-click>
<v-click>
```mermaid
graph TD
A --> B --> C
```
</v-click>
常见模式
系统架构
```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
```
请求流程
```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
```
输出格式
创建图表时：
DIAGRAM PURPOSE: [What it illustrates]
DIAGRAM TYPE: [flowchart/sequence/class/etc.]
```mermaid {[options]}
[diagram code]
关键元素：
- 节点 A：[表示……]
- 节点 B：[表示……]
- 箭头 X->Y：[含义是……]
样式说明：
- 主题：[所选主题]
- 缩放：[如有调整]
- 自定义类：[如有]
评论
支持 Markdown