从这篇文章开始,blog.biekanle.com 支持在文章里直接嵌入各种图表了 —— 流程图、时序图、状态图、类图、ER 图、甘特图、思维导图、Git 图、饼图等等。背后用的是 Mermaid.js,一种用文本写图表的标记语言,GitHub、Notion、Obsidian 用的都是它。
怎么在文章里用
在文章里写 [mermaid]...[/mermaid] 短代码,中间放 Mermaid 语法,前端会自动渲染成图。例如下面这段代码:
[mermaid]
graph LR
A[用户] --> B{有缓存?}
B --是--> C[返回缓存]
B --否--> D[查数据库]
D --> E[写缓存]
E --> C
[/mermaid]渲染出来就是:
1. 流程图(Flowchart)
最常见的图,适合表达"步骤 + 分支"。方向可以是 TD(上下)、LR(左右)、BT(下上)、RL(右左)。
节点形状:[] 矩形、() 圆角矩形、([]) 体育场形(常用于开始/结束)、{} 菱形(判断)、(()) 圆形、[/...\] 平行四边形等。
2. 时序图(Sequence Diagram)
展示对象之间消息传递的顺序,适合系统交互、API 调用、协议。
箭头种类:-> 实线、->> 实线箭头、--> 虚线、-->> 虚线箭头。+ / - 前缀可以激活生命线。
3. 状态图(State Diagram)
表达对象的状态转换,适合订单流程、TCP 状态、播放器状态等。
4. 类图(Class Diagram)
面向对象设计的类与关系,UML 经典图。适合架构文档、设计模式说明。
关系符号:<|-- 继承、*-- 组合、o-- 聚合、--> 单向关联、-- 双向关联、..> 依赖。
5. ER 图(实体关系图)
数据库设计,展示表与表的关系。
关系基数:||--|| 1对1、||--o{ 1对多(可选)、||--|{ 1对多(强制)、}o--o{ 多对多。
6. 甘特图(Gantt Chart)
项目计划与进度,适合工期规划、里程碑展示。
7. 饼图(Pie Chart)
8. 思维导图(Mindmap)
把一个主题展开成层级树,适合学习笔记、知识结构、头脑风暴。
9. Git 图(GitGraph)
展示分支与合并,Git 工作流文档必备。
10. 用户旅程图(User Journey)
展示用户在某个场景下的情绪变化,适合用户体验分析。
11. 象限图(Quadrant Chart)
四象限分析,适合优先级排序、技术选型对比。
注:象限图的 x-axis / y-axis / quadrant 标签目前对中文支持不稳定,建议用英文。中间的数据点(X: [x, y])前面的标签可以是中文,但用英文最稳。
12. 时间线(Timeline)
13. XY 折线/柱状图
注:xychart-beta 仍处于 beta,标签里的中文可能触发 lexer 错误。简单数据可视化推荐 ECharts/Chart.js。
实战:用 Mermaid 画系统架构
下面是一个真实的电商系统简化架构,Mermaid 一目了然:
语法速查
常用的图类型对应关键字:
graph/flowchart:流程图sequenceDiagram:时序图stateDiagram-v2:状态图classDiagram:类图erDiagram:ER 图gantt:甘特图pie:饼图mindmap:思维导图gitGraph:Git 图journey:用户旅程quadrantChart:象限图timeline:时间线xychart-beta:XY 图
注意事项
- 短代码必须严格写
[mermaid]和[/mermaid],大小写敏感。 - 图表代码尽量不要在每行行首加额外缩进 —— Mermaid 对缩进语义敏感,跟着官方语法即可。
- 渲染失败时浏览器控制台会有红字提示,大多是语法问题。可以先去 mermaid.live 调通再贴回博客。
- 图很大时会自动横向滚动,移动端阅读也不会破版。
- Mermaid.js 通过 jsdelivr CDN 加载,大小 ~500KB,只在文章包含图表时才会加载。
写在最后
有了 Mermaid 支持后,后续写"架构设计""状态机""API 交互""项目规划"这类文章会清晰得多 —— 一张图胜过一千行文字。Mermaid 用文本写图的好处:可以放进 git 管理、可以批量替换、AI 可以帮你生成、复制粘贴零损失。如果你写技术博客,强烈推荐尝试。
这只是第一篇试水,后续我会在合适的文章里(系统设计、设计模式、算法图解、数据库 ER)逐步用 Mermaid 重画图,让博客阅读体验再上一个台阶。
—— 别看了 · 2026