Mermaid 画图

Mermaid 本身是文本语法 ，需要"渲染器"才能看到图片效果 。下面按最常用 / 最方便 / 本地开发给你一个清单，直接照用即可 👇

---

✅ 一、最方便（在线，无需安装）

1️⃣ Mermaid Live（官方，最推荐）

👉 https://mermaid.live

特点

• 即时预览
• 支持导出 PNG / SVG / PDF
• 版本最新、语法最全

用法

graph TD
  A[开始] --> B{判断}
  B -->|是| C[执行]
  B -->|否| D[结束]

粘贴进去立刻看到图。

---

✅ 二、开发者最常用（本地 / 编辑器）

2️⃣ VS Code（强烈推荐）

如果你本来就写代码，这是最佳体验。

安装插件

• Markdown Preview Mermaid Support
• 或 Mermaid Markdown Syntax Highlighting

使用方式

```mermaid
sequenceDiagram
  A->>B: 请求
  B-->>A: 响应
```

➡️ Cmd + Shift + V（Mac） / Ctrl + Shift + V 预览

---

3️⃣ Obsidian / Typora

如果你写文档或知识库（你之前在做本地知识库，这个很适合你）

• Obsidian：原生支持 Mermaid
• Typora：设置中开启 Mermaid

---

✅ 三、本地生成图片（CI / 文档发布）

4️⃣ Mermaid CLI（mmdc）

适合 Node.js 项目 / 自动化 / 文档构建

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

生成图片：

mmdc -i flow.mmd -o flow.png

支持：

• PNG
• SVG
• PDF

👉 很适合你这种 Node.js + Docker / SaaS 文档 场景

---

✅ 四、浏览器 & 文档平台

5️⃣ GitHub / GitLab

• README.md 里直接支持 Mermaid

  graph LR A --> B

6️⃣ Notion

• 新版已支持 Mermaid（需要代码块）

---

🧠 怎么选？（给你的直接建议）

结合你目前的背景（Node.js / 本地知识库 / 技术文档）：

场景	推荐
快速看效果	Mermaid Live
日常写技术文档	VS Code + Markdown
本地知识库	Obsidian
SaaS / 技术文档自动生成	Mermaid CLI

---