Mermaid 图表测试
Mermaid 图表渲染测试
使用自定义短代码 {{< mermaid >}} ... {{< /mermaid >}} 渲染流程图、时序图等。
流程图
flowchart TD
A[开始] --> B{登录?}
B -- 是 --> C[进入主页]
B -- 否 --> D[跳转登录页]
C --> E[浏览内容]
D --> B
时序图
sequenceDiagram
autonumber
participant U as User
participant B as Blog
U->>B: 打开文章
B-->>U: 返回内容
U->>B: 请求渲染Mermaid
B-->>U: Mermaid SVG
甘特图
gantt
title 开发任务
dateFormat YYYY-MM-DD
section 功能
创建短代码 :done, des1, 2025-08-25, 1d
接入Mermaid :active, des2, 2025-08-25, 1d
写测试文章 : des3, 2025-08-25, 1d
以上应显示为 SVG 图。
类图（Class Diagram）
classDiagram
class Blog {
+string title
+string url
+render()
}
class Post {
+string title
+Date date
+string content
+render()
}
Blog "1" o-- "*" Post : contains
状态图（State Diagram）
stateDiagram-v2
[*] --> Idle
Idle --> Loading : open page
Loading --> Rendered : mermaid.init
Rendered --> [*]
Loading --> Error : network/cdn issue
Error --> Loading : retry
实体关系图（ER Diagram）
erDiagram
USER ||--o{ POST : writes
POST }o--o{ TAG : has
USER {
int id
string name
}
POST {
int id
string title
datetime publishedAt
}
TAG {
int id
string name
}
饼图（Pie Chart）
pie title 文章类型占比
"前端" : 35
"后端" : 30
"算法" : 20
"随笔" : 15
Git 分支图（Git Graph）
gitGraph
commit id: "init"
branch feature/mermaid
checkout feature/mermaid
commit id: "shortcode"
checkout main
commit id: "layout"
merge feature/mermaid