Mermaid 图表演示 #
Mermaid 是一个强大的图表和流程图生成工具，支持多种图表类型。本文档展示了在Hugo文档中使用Mermaid的各种方法。
流程图 (Flowchart) #
基础流程图 #
graph TD
A[开始] --> B{是否有数据?}
B -->|是| C[处理数据]
B -->|否| D[获取数据]
C --> E[保存结果]
D --> C
E --> F[结束]
复杂流程图 #
graph LR
subgraph "用户层"
U[用户] --> UI[用户界面]
end
subgraph "应用层"
UI --> API[API网关]
API --> AUTH[认证服务]
API --> BIZ[业务逻辑]
end
subgraph "数据层"
BIZ --> DB[(数据库)]
BIZ --> CACHE[(缓存)]
BIZ --> MQ[消息队列]
end
subgraph "外部服务"
API --> EXT[第三方API]
BIZ --> FILE[文件存储]
end
系统架构图 #
graph LR
User[用户] --> Query{查询}
Query -->|Prompt| Deepseek[(Deepseek<br/>大语言模型)]
Deepseek -->|Response| LLM_response[(LLM<br/>响应)]
Query --> Preprocess[预处理]
Preprocess --> Vector[向量化]
Vector --> Search[语义搜索]
Search --> Context[上下文增强]
Context --> Deepseek
序列图 (Sequence Diagram) #
用户登录流程 #
sequenceDiagram
participant U as 用户
participant C as 客户端
participant S as 服务器
participant D as 数据库
U->>C: 输入用户名密码
C->>S: 发送登录请求
S->>D: 验证用户信息
D-->>S: 返回用户数据
S-->>C: 返回JWT令牌
C-->>U: 登录成功
Note over U,D: 完整的用户认证流程
API调用流程 #
sequenceDiagram
participant Client as 客户端
participant Gateway as API网关
participant Auth as 认证服务
participant Service as 业务服务
participant DB as 数据库
Client->>Gateway: 发起API请求
Gateway->>Auth: 验证令牌
Auth-->>Gateway: 令牌有效
Gateway->>Service: 转发请求
Service->>DB: 查询数据
DB-->>Service: 返回数据
Service-->>Gateway: 处理结果
Gateway-->>Client: 返回响应
rect rgb(240, 248, 255)
Note over Client,DB: 标准API调用模式
end
甘特图 (Gantt Chart) #
项目进度计划 #
gantt
title 项目开发进度
dateFormat YYYY-MM-DD
section 需求分析
需求调研 :done, des1, 2024-01-01,2024-01-05
需求整理 :done, des2, after des1, 3d
需求评审 :done, des3, after des2, 2d
section 系统设计
架构设计 :active, des4, 2024-01-08, 5d
详细设计 : des5, after des4, 7d
section 开发阶段
前端开发 : dev1, 2024-01-20, 15d
后端开发 : dev2, 2024-01-20, 20d
数据库设计 : dev3, 2024-01-15, 10d
section 测试阶段
单元测试 : test1, after dev1, 5d
集成测试 : test2, after dev2, 7d
系统测试 : test3, after test2, 5d
section 部署上线
预发布环境 : deploy1, after test3, 3d
生产环境部署 : deploy2, after deploy1, 2d
状态图 (State Diagram) #
订单状态流转 #
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付 : 支付成功
待支付 --> 已取消 : 超时/主动取消
已支付 --> 待发货 : 商家确认
已支付 --> 已退款 : 申请退款
待发货 --> 已发货 : 商家发货
待发货 --> 已退款 : 申请退款
已发货 --> 已收货 : 用户确认收货
已发货 --> 运输中 : 物流更新
运输中 --> 已收货 : 用户确认收货
运输中 --> 已发货 : 物流异常
已收货 --> 已完成 : 确认完成
已收货 --> 售后中 : 申请售后
售后中 --> 已完成 : 售后完成
售后中 --> 已退款 : 退款成功
已取消 --> [*]
已退款 --> [*]
已完成 --> [*]
类图 (Class Diagram) #
用户管理系统 #
classDiagram
class User {
-id: String
-username: String
-email: String
-password: String
-createdAt: Date
+login(password: String): Boolean
+updateProfile(data: Object): Boolean
+resetPassword(): String
}
class Role {
-id: String
-name: String
-permissions: Array
+hasPermission(permission: String): Boolean
+addPermission(permission: String): void
}
class Permission {
-id: String
-name: String
-resource: String
-action: String
}
class UserRole {
-userId: String
-roleId: String
-assignedAt: Date
}
User ||--o{ UserRole : "has"
Role ||--o{ UserRole : "assigned to"
Role ||--o{ Permission : "contains"
User : +getId()
User : +getUsername()
Role : +getPermissions()
实体关系图 (ER Diagram) #
博客系统数据模型 #
erDiagram
USER {
int id PK
string username UK
string email UK
string password
datetime created_at
datetime updated_at
}
POST {
int id PK
string title
text content
string slug UK
int author_id FK
int category_id FK
enum status
datetime published_at
datetime created_at
datetime updated_at
}
CATEGORY {
int id PK
string name UK
string description
string slug UK
datetime created_at
}
TAG {
int id PK
string name UK
string color
datetime created_at
}
POST_TAG {
int post_id FK
int tag_id FK
datetime created_at
}
COMMENT {
int id PK
int post_id FK
int user_id FK
int parent_id FK
text content
enum status
datetime created_at
}
USER ||--o{ POST : "writes"
CATEGORY ||--o{ POST : "contains"
POST }|--|| POST_TAG : "tagged with"
TAG }|--|| POST_TAG : "tags"
POST ||--o{ COMMENT : "has"
USER ||--o{ COMMENT : "writes"
COMMENT ||--o{ COMMENT : "replies to"
饼图 (Pie Chart) #
技术栈占比 #
pie title 项目技术栈分布
"JavaScript" : 35
"Python" : 25
"Go" : 20
"Java" : 15
"其他" : 5
Git 流程图 #
开发工作流 #
gitgraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Dev Setup"
branch feature/login
checkout feature/login
commit id: "Add login page"
commit id: "Add validation"
checkout develop
merge feature/login
commit id: "Merge login feature"
branch feature/dashboard
checkout feature/dashboard
commit id: "Add dashboard"
commit id: "Add charts"
checkout develop
merge feature/dashboard
commit id: "Merge dashboard"
checkout main
merge develop
commit id: "Release v1.0"
时间线图 #
产品发展历程 #
timeline
title 产品发展历程
2024Q1 : 项目启动
: 需求调研
: 技术选型
2024Q2 : MVP开发
: 核心功能
: 内测版本
2024Q3 : 功能完善
: 性能优化
: 公测版本
2024Q4 : 正式发布
: 市场推广
: 用户反馈
使用说明 #
基本语法 #
在Markdown文档中使用Mermaid图表，只需要用以下格式：
```mermaid
graph TD
A[开始] --> B[结束]
```
支持的图表类型 #
- flowchart/graph: 流程图
- sequenceDiagram: 序列图
- gantt: 甘特图
- stateDiagram: 状态图
- classDiagram: 类图
- erDiagram: 实体关系图
- pie: 饼图
- gitgraph: Git流程图
- timeline: 时间线图
主题适配 #
Mermaid图表会自动适配网站的明暗主题切换，在深色模式下使用深色主题，在浅色模式下使用默认主题。
最佳实践 #
- 保持简洁: 图表应该简洁明了，避免过于复杂
- 合理命名: 使用有意义的节点名称和标签
- 统一风格: 在同一文档中保持图表风格一致
- 适当注释: 为复杂图表添加必要的说明
- 响应式设计: 图表会自动适应容器宽度
Mermaid 图表让技术文档更加生动直观，提升阅读体验！