用 Mermaid 在博客里画图表：从零到上手

Mermaid图表博客

写技术文章时，经常需要画流程图、时序图。截图贴图又麻烦又难改， Mermaid 解决了这个问题：用类似伪代码的文本描述图表，渲染引擎自动生成矢量图。

好消息：本站已经原生支持 Mermaid，写文章时直接写在 Markdown 里即可。

基本用法

只需要一个普通的三反引号代码块，语言标注为 mermaid：

```mermaid
graph LR
    A[写作] --> B{要不要配图?}
    B -- 要 --> C[写 Mermaid]
    B -- 不要 --> D[直接发布]
    C --> E[发布 🎉]
    D --> E
```

渲染效果如下：

图表（mermaid-diagrams.md）

流程图：决策与循环

流程图是最常用的类型。节点形状有讲究： 方框 [] 是处理、菱形 {} 是判断、圆角 () 是起止。

图表（mermaid-diagrams.md）

时序图：谁给谁发了什么消息

画接口调用、协议交互特别直观：

图表（mermaid-diagrams.md）

甘特图：排期一览

图表（mermaid-diagrams.md）

饼图与状态图

占比一眼看清：

图表（mermaid-diagrams.md）

状态流转也很清晰：

图表（mermaid-diagrams.md）

主题自适应

本站有 7 套配色主题。Mermaid 图表会跟随当前主题自动重绘—— 浅色主题下是浅色配色，切到深海蓝、暮色紫等深色主题时图表立即切换为 dark 配色， 不用重新加载页面。

注意事项

请使用 .md 后缀写包含 Mermaid 的文章。.mdx 会把代码里的花括号 {} 当作 JSX 表达式解析，导致构建报错。

图表渲染失败时，页面会原地显示红色错误信息而不是空白， 方便定位语法问题；官方语法文档见 mermaid.js.org。

不要在图表文本里粘贴敏感信息(密钥、内网地址)。虽然渲染开启了 securityLevel: strict,但文章本身是公开的。

小结

场景推荐图型
操作步骤、审批流flowchart
接口/消息交互sequenceDiagram
项目排期gantt
占比分布pie
对象生命周期stateDiagram-v2

下次写文章需要配图时，试试直接敲几行 Mermaid——改文字就能改图， 比截图省心多了。

← 返回文章列表