程序员的图形神器：用 Mermaid 写图比写字还快！（附原理与实战）Mermaid 是一款用文本生成图形的可视化工具，

你还在用 Visio、draw.io 拖来拖去画图吗？
用 Mermaid 只需几行文字，就能画出漂亮的类图、流程图、时序图，还能导出 PNG/SVG！

💡 为什么程序员需要画图？

代码逻辑复杂？来一张流程图，一目了然
系统设计文档？类图 + 时序图，精确沟通
团队协作方案？图形表达远比 PPT 清晰
写技术博客？图文结合更具说服力

🧱 但传统画图方式的痛点也很明显：

拖图太慢，结构一改，重画一遍
很难版本控制（画图历史难追踪）
不适合和代码、文档一起维护

🔍 Mermaid 是什么？

Mermaid 是一个用纯文本语法描述图形结构，自动渲染出图形的工具。

它就像 Markdown 之于文档，是“给图形写代码”的方式。支持以下图形类型：

流程图（Flowchart）
类图（Class Diagram）
时序图（Sequence Diagram）
状态图、甘特图、实体关系图（ERD）……
甚至还支持 Git 图、饼图等更复杂图形

✅ 示例：5行代码画出流程图

graph TD
  A[开始] --> B{是否登录}
  B -->|是| C[进入系统]
  B -->|否| D[跳转登录页]

🧠 Mermaid 和 Puppeteer 的原理是什么？

✅ Mermaid 渲染原理

Mermaid 本质上是基于 JavaScript + SVG + D3.js 实现的图形渲染库：

你写的 Mermaid 代码 → 被 Mermaid parser 转为 AST（抽象语法树）
AST → 渲染为 SVG 图形结构
可嵌入网页或导出为静态图像

✅ 那为什么要用 Puppeteer？

因为 Mermaid 本身是运行在浏览器中的，它不能直接在 Node.js 里“渲染成图片”。这时我们就需要：

👉 Puppeteer：一个 Node.js 控制 Chromium 的自动化库
👉 Mermaid CLI（mmdc） ：内部就是用 Puppeteer 启动 Chromium 浏览器 → 加载 Mermaid → 渲染 SVG → 截屏导出 PNG/SVG

所以：

mmdc -i xxx.mmd -o xxx.png

实际干了这些事 👇：

启动一个 Chromium 浏览器实例
加载 Mermaid 渲染器（HTML + JS）
把你写的 .mmd 文件当作图形代码注入进去
等待 SVG 渲染完成
截屏并导出成你想要的 .png 或 .svg

⚙️ 本地一键生成 PNG 图

1. 安装工具

npm install -g @mermaid-js/mermaid-cli puppeteer

⚠️ 注意：puppeteer 会自动下载 Chromium，比较大。国内网络建议设置镜像源：

npm config set puppeteer_download_host=https://npmmirror.com/mirrors/chromium/

2. 创建图形文件（比如 `flow.mmd`）

graph TD
  A --> B

3. 命令行生成图片

mmdc -i flow.mmd -o flow.png

支持更多参数：

mmdc -i flow.mmd -o flow.png -t dark --scale 2

-t dark：深色主题
--scale 2：放大两倍，适合高清屏

💻 VSCode / Typora / Obsidian 使用 Mermaid

Mermaid 与文档工具天然集成：

工具	支持情况
VSCode	插件 `Markdown Preview Mermaid Support`
Typora	原生支持 Mermaid 语法块
Obsidian	开启“Mermaid 插件”即可预览

🧱 在真实项目中的应用场景

我在维护前端组件库和系统架构设计时，经常用 Mermaid 来：

画设计模式的类图
表达接口流程图
说明模块依赖关系
展示状态机流程或表单状态图

示例：类图（责任链模式）

classDiagram
    class Handler {
        <<abstract>>
        - nextHandler: Handler
        + setNext(handler: Handler): Handler
        + handle(request: string): void
    }

    class AuthHandler {
        + handle(request: string): void
    }

    class LoggingHandler {
        + handle(request: string): void
    }

    Handler <|-- AuthHandler
    Handler <|-- LoggingHandler

🧠 Mermaid 踩坑总结与建议

✅ 写图代码比画图更容易复用、修改、版本控制
❌ 不要使用 /开头的路径，那是系统根目录
✅ 推荐将 .mmd 图代码也纳入 Git 管理
✅ 如果想生成批量图片，可写 npm script 批处理
❌ 不支持复杂 UI 交互（比如 HTML 插槽、点击跳转等）

✅ 结语：写图，也要“代码风格”！

Mermaid 给我们带来了一种新的画图范式：

就像 Markdown 改变了写作，Mermaid 正在改变程序员的“画图方式”。

从画架构图、设计模式，到写博客插图、文档交付，Mermaid 能让你：

写得快（复制粘贴 + 修改）
改得快（代码方式追溯历史）
看得清（一致风格、自动排版）

📌 推荐使用场景：

技术博客作者
系统设计者
架构师、讲师
喜欢“结构化表达”的开发者

📂 附赠资源（自取）：

Mermaid 官方文档：mermaid.js.org/
Mermaid CLI（mmdc）说明：github.com/mermaid-js/…
VSCode 插件：marketplace.visualstudio.com/items?itemN…

如果你也觉得这个工具像 Markdown 一样高效，欢迎点赞收藏+评论，一起用代码画图，定义程序员的新“文艺复兴”！

程序员的图形神器：用 Mermaid 写图比写字还快！（附原理与实战）