Mermaid 最大的优势是**“像写代码一样画图”**，所以二次编辑的核心是修改左侧的文本，右侧的图会自动更新。
以下是目前最好用的几个 Mermaid 编辑网站和工具，按推荐程度排序：
### 1. 官方实时编辑器 (Mermaid Live Editor) —— **强烈推荐**
这是最标准、最不容易出错的地方。不需要登录，打开即用。
* **网址：** [https://mermaid.live/](https://mermaid.live/)
* **优点：**
* **实时预览：** 左边改字，右边立刻变。
* **功能全：** 支持导出高清 PNG、SVG 图片。
* **易分享：** 它可以生成一个链接，发给别人打开就是你画好的图。
* **如何使用：** 点击左上角的 Sample 或直接把代码粘贴到左侧代码区即可。
### 2. Draw.io (现名 diagrams.net) —— **适合需要混合排版**
如果你想把 Mermaid 生成的图作为基础，然后再手动拖拽调整位置，或者加一些非 Mermaid 的贴图，用这个。
* **网址：** [https://app.diagrams.net/](https://app.diagrams.net/)
* **优点：** 强大的通用绘图工具，支持插入 Mermaid 代码并将其**转换**为可拖拽的图形。
* **如何使用：**
1. 菜单栏点击 `调整图形` (Arrange) -> `插入` (Insert) -> `高级` (Advanced) -> `Mermaid`。
2. 把代码粘贴进去，点击插入。
3. **注意：** 插入后它会变成普通的图形块，你可以随意拖拽，但如果想改回代码逻辑就比较麻烦了（适合定稿后的微调）。
### 3. Excalidraw —— **手绘风格**
如果你想要那种“手绘风格”的流程图，看起来不那么死板，用这个。
* **网址：** [https://excalidraw.com/](https://excalidraw.com/)
* **优点：** 颜值高，像在黑板上画的一样。
* **如何使用：**
1. 点击顶部工具栏的 `More tools` (图标是方块和圆) -> `Mermaid to Excalidraw`。
2. 粘贴代码，它会把你的代码变成手绘风格的图。
### 4. 笔记软件 (Notion / Obsidian) —— **适合做题/整理笔记**
如果你是在整理这道化学题的笔记，直接在笔记软件里用最好。
* **Notion：** 输入 `/mermaid`，然后把代码粘贴进去，直接渲染。
* **Obsidian：** 输入 ““mermaid` (回车) 粘贴代码 ““，预览模式下直接显示。
—
### 操作演示：
以**Mermaid Live Editor**为例，你只需要做两步：
1. 打开 [mermaid.live](https://mermaid.live/)。
2. 把下面这段代码（刚才生成的）**覆盖**掉左侧的内容，右侧就会出现化学流程图了：
“`mermaid
graph TD
classDef material fill:#f9f9f9,stroke:#333,stroke-width:1px;
classDef start fill:#e1f5fe,stroke:#01579b,stroke-width:2px;
classDef target fill:#fff3e0,stroke:#ff6f00,stroke-width:2px,rx:10,ry:10;
A(“<b>起始原料 A</b><br/>C₆H₆O”):::start
B(“<b>化合物 B</b><br/>C₇H₈O₂”):::material
C(“<b>化合物 C</b><br/>C₇H₇NO₄<br/>(邻位产物)”):::material
D(“<b>化合物 D</b><br/>C₇H₉NO₂”):::material
E(“<b>化合物 E</b><br/>C₉H₁₁NO₃”):::material
F(“<b>化合物 F</b><br/>C₁₀H₁₃NO₄”):::material
G(“<b>关键中间体 G</b><br/>C₁₀H₁₃NO₃S”):::target
A –>|”<b>(CH₃)₂SO₄</b><br/>OH⁻”| B
B –>|”<b>浓HNO₃, 浓H₂SO₄</b>”| C
C –>|”<b>Fe, HCl</b>”| D
D –>|”<b>CH₃COCl</b><br/>吡啶”| E
E –>|”<b>HCHO</b><br/>OH⁻”| F
F –>|”<b>NaHS</b>”| G
“`