Mermaid代码转图表
超级流程图：博客部署全链路 (Flowchart)
演示亮点：
- 子图 (Subgraph)：把不同环境（本地、云端）框起来。
- 样式定制：给关键节点上色。
- 不同形状：数据库圆柱、判断菱形、圆角矩形。
代码段：
graph TD
%% 定义样式类
classDef plain fill:#fff,stroke:#333,stroke-width:1px;
classDef highlight fill:#e1f5fe,stroke:#01579b,stroke-width:2px;
classDef success fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;
classDef error fill:#ffebee,stroke:#c62828,stroke-width:2px;
%% 修复点：标题加了双引号 "..."
subgraph Local ["💻 本地开发环境 (Local)"]
direction TB
A([开始写作]) --> B[Typora 编辑 Markdown]
B --> C{是否包含图片?}
C -- YES --> D[存入 R2 图床]
C -- NO --> E[Git Commit]
D --> E
E --> F[Git Push to GitHub]
end
%% 修复点：标题加了双引号 "..."
subgraph Cloud ["☁️ 云端构建环境 (Cloud)"]
direction TB
F --> G(GitHub Webhook)
G --> H[Cloudflare Pages 触发]
H --> I{构建检查}
I -- 成功 --> J[拉取历史 git fetch]
I -- 失败 --> K[发送邮件报警]
J --> L[VitePress Build]
L --> M[(静态文件 Dist)]
end
%% 最终发布
M --> N{{发布上线 pandac-blog.com}}
%% 应用样式
class A,N highlight;
class M success;
class K error;
class B,D,F plain;演示效果：
复杂时序图：私密日记访问逻辑 (Sequence Diagram)
演示亮点：
- 生命线激活：
activate/deactivate显示处理时间。 - 逻辑分支：
alt/else处理成功和失败的情况。 - 注释：
Note right of添加额外说明。
代码段：
复杂时序图：私密日记访问逻辑 (Sequence Diagram)
演示亮点：
生命线激活：activate/deactivate 显示处理时间。
逻辑分支：alt/else 处理成功和失败的情况。
注释：Note right of 添加额外说明。
代码段
sequenceDiagram
autonumber
actor User as 访客(你)
participant CF as Cloudflare Zero Trust
participant Email as Gmail 邮箱
participant Blog as 博客服务器
Note over User, Blog: 访问私密页面流程
User->>CF: 访问 /docs/private/
activate CF
CF->>CF: 检查本地 Cookie
alt Cookie 有效
CF-->>User: 200 OK (直接放行)
else Cookie 过期/不存在
CF-->>User: 302 重定向到登录页
deactivate CF
User->>CF: 输入邮箱地址
activate CF
CF->>Email: 发送 6 位验证码
deactivate CF
Email-->>User: 收到验证码 (123456)
User->>CF: 输入验证码提交
activate CF
alt 验证码正确
CF->>CF: 生成 Session Token
CF-->>User: 验证成功，跳转回原链接
else 验证码错误
CF-->>User: 提示错误，禁止访问 🚫
end
deactivate CF
end
User->>Blog: 获取日记内容
activate Blog
Blog-->>User: 返回 Markdown 渲染页面
deactivate Blog演示效果：
项目管理甘特图：毕业设计进度 (Gantt)
演示亮点：
- 状态标记：
done(已完成),active(进行中),crit(关键路径)。 - 依赖关系：
after a1表示必须等上一项做完。 - 多板块：分为调研、开发、论文三个阶段。
代码段：
gantt
title 2026 毕业设计进度计划表
dateFormat YYYY-MM-DD
axisFormat %m-%d
excludes weekends
section前期调研
选题确定 :done, des1, 2025-11-01, 2025-11-10
文献综述 :done, des2, after des1, 5d
开题报告撰写 :active, des3, after des2, 5d
section 系统开发
数据库设计 :crit, active, dev1, 2025-12-01, 3d
后端 API 开发 : dev2, after dev1, 10d
前端 Vue3 搭建 : dev3, after dev1, 10d
联调与测试 : dev4, after dev2, 5d
section 论文撰写
初稿撰写 : doc1, after dev4, 7d
论文润色 : doc2, after doc1, 3d
最终答辩 :crit, 2026-03-01, 1d演示效果：
你的技能树思维导图 (Mindmap)
演示亮点：
- 图标支持：使用
::icon(fa fa-xxx)添加图标（需网页端支持 FontAwesome，如果没图标就是纯文字）。 - 层级展开：展示你的多维能力。
代码段：
mindmap
root((PandaC))
💻 CS 专业
Web 开发
Vue3 / VitePress
HTML / CSS
后端基础
Java
Python (Excel自动化)
📷 摄影师
器材
Action 5
ZVE10
后期
Lightroom
Photoshop
🇬🇧 语言能力
新概念英语
翻译训练
背诵
🚀 个人成长
博客搭建
时间管理演示效果：
面向对象类图：电商系统设计 (Class Diagram)
演示亮点：
- 关系表达：继承 (
<|--)、聚合 (o--)、关联 (-->)。 - 方法可见性：
+(public),-(private)。 - 泛型：
List<Item>。
代码段
classDiagram
%% 用户与订单的关系
User "1" --> "*" Order : 下单
Order "1" o-- "*" OrderItem : 包含
%% 类的定义
class User {
+String username
-String password
+login()
+logout()
}
class Order {
+int orderId
+Date createTime
+float totalAmount
+pay()
}
class Product {
<<Interface>>
+String name
+float price
}
class Book {
+String author
+String isbn
}
class Camera {
+String sensorType
+int megapixels
}
%% 继承关系
Product <|-- Book
Product <|-- Camera演示效果：
日常生活“轻量级”图表
不做项目的时候，我们也可以用 Mermaid 来做决策辅助、状态记录、简单计划。这些图不需要复杂的逻辑，主打一个“清晰直观”。
决策树：今天中午吃什么？(Flowchart)
这是最简单的逻辑图，治好选择困难症
代码段：
graph TD
Start((饿了...)) --> Check{兜里有钱吗?}
Check -- 有钱 --> Rich[吃顿好的!]
Rich --> Choice1{想吃辣吗?}
Choice1 -- 想 --> A[重庆火锅]
Choice1 -- 不想 --> B[日式烤肉]
Check -- 没钱 --> Poor[省吃俭用]
Poor --> Choice2{想出门吗?}
Choice2 -- 懒得动 --> C[泡面/外卖]
Choice2 -- 能动 --> D[去食堂]演示效果：
状态机：大学生的一天精神状态 (State Diagram)
用来描述一个不断循环的过程，或者不同状态之间的切换
代码段：
stateDiagram-v2
[*] --> 睡觉
睡觉 --> 起床困难: 闹钟响了
起床困难 --> 早八上课: 被舍友拖走
早八上课 --> 困迷糊: 听不懂
困迷糊 --> 精神焕发: 下课干饭!
精神焕发 --> 玩手机
玩手机 --> 只是玩一小会儿
只是玩一小会儿 --> 玩手机: 循环
玩手机 --> 睡觉: 凌晨2点演示效果：
购物纠结图：要不要买新镜头？(Mindmap)
用思维导图列出利弊，这在写“好物分享”或“购物决策”类文章时非常好用
代码段：
mindmap
root((要买索尼新镜头吗?))
😇 买! (Pros)
画质提升
大光圈虚化爽
可以拍私房(划掉)
督促自己出门
😈 不买! (Cons)
太贵了 (5000+)
下个月要吃土
现在的狗头也能用
背着太重演示效果：
旅行路线图：周末特种兵旅游 (Journey)
Mermaid 专门有一个 journey 类型，用来画用户体验旅程，拿来画旅游计划也意外地合适！ (注：评分 1-5 代表心情指数)
代码段：
journey
title 重庆特种兵一日游计划
section 上午
高铁抵达: 5: 兴奋
解放碑打卡: 4: 人有点多
吃火锅: 5: 爽!
section 下午
爬十八梯: 2: 腿断了
坐长江索道: 3: 排队2小时
section 晚上
洪崖洞夜景: 5: 出片!
回酒店修图: 4: 累并快乐着演示效果：
饼图 (Pie Chart) - 你的手机存储空间
语法极其简单，特别适合展示“占比”
代码段：
pie title 📱 手机 256G 存储空间分布
"照片 & 视频" : 120
"原神/王者荣耀" : 45
"微信聊天记录" : 30
"学习资料(PDF)" : 5
"系统占用" : 20
"剩余空间" : 36演示效果：
柱状图 (XY Chart) - 一周代码行数统计
注意： 这是 xychart-beta 语法，如果 Typora 没显示出来，说明本地 Mermaid 版本还不够新，但在你的博客网页上应该能显示
代码段：
xychart-beta
title "💻 本周代码编写量 (行)"
x-axis ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
y-axis "Lines of Code" 0 --> 1000
bar [150, 300, 800, 200, 600, 50, 0]演示效果：
折线图 (Line Chart) - 博客访问量趋势
同样属于 xychart-beta，只需把 bar 改成 line。
代码段
xychart-beta
title "📈 博客每日访问量 (PV)"
x-axis ["1月1日", "1月2日", "1月3日", "1月4日", "1月5日"]
y-axis "Views" 0 --> 500
line [50, 120, 260, 340, 480]演示效果：
Git 分支图 (GitGraph) - 项目开发历史
作为 CS 学生，这个图简直是神器！用来在文档里讲解 Git 操作流程（比如 Merge, Cherry-pick）非常直观，不用截图了。
代码段
gitGraph
commit id: "初始化"
commit id: "搭建框架"
branch dev
checkout dev
commit id: "开发首页"
commit id: "开发关于页"
checkout main
merge dev id: "v1.0 发布"
commit id: "修复 Bug"演示效果：