Typora使用Mermaid语法绘制流程图教程：Windows版实操步骤

在 Typora 中直接编写 Mermaid 代码即可生成流程图，无需借助外部绘图软件或插入静态图片。这种方式的最大优势在于“图文合一”：修改代码中的文字或连线，图表会立即自动更新，非常适合需要频繁迭代逻辑结构的文档。下面以 Windows 版本为例，演示如何从零开始绘制一个“资料检查与归档”的流程。

在偏好设置的Markdown选项卡中勾选Enable Diagrams

1. 开启图表支持并新建文档

启动 Typora，点击左上角【文件】菜单，选择【偏好设置】（或使用快捷键 Ctrl + ,）。在左侧导航栏找到【Markdown】选项卡，向下滚动找到【Diagrams (图表)】区域，勾选【Enable Diagrams】复选框。Typora 可能会提示需要重启或加载组件，按指引完成即可。

设置完成后，按 Ctrl + N 新建一个空白文档，建议立即保存为“资料检查流程.md”，以便后续测试。为了更清晰地查看代码结构，建议先按 Ctrl + / 切换到源代码模式。在此模式下，你可以直观地看到 Markdown 标记，避免在正常视图中因误触而破坏代码块格式。

注意：Typora 支持多种图表引擎，本教程仅使用 Mermaid。请勿将其他流程图语法（如 flowchart.js）混入 mermaid 代码块，否则会导致解析失败。

1. 开启图表支持并新建文档

2. 输入最小流程图结构

在源代码模式下，输入以下代码。请确保严格保留反引号的数量和语言标识 mermaid：

```mermaid
graph TD
  A[收集资料] --> B{资料完整吗}
  B -->|是| C[归档]
  B -->|否| D[补充资料]
  D --> B
```

这段代码构成了流程图的核心骨架：

• graph TD：声明这是一个从上到下（Top-Down）排列的流程图。
• A[收集资料]：定义节点 A，方括号 [] 表示矩形节点，内部文字为显示内容。
• B{资料完整吗}：定义节点 B，花括号 {} 表示菱形判断节点。
• -->：表示带箭头的连接线。
• |是|：在连线上添加标签文本。

输入时请务必使用英文半角符号，特别是箭头、括号和竖线。中文仅用于节点内部的显示文字，任何标点符号的错误都可能导致整个图表无法渲染。

在源码模式中准确输入mermaid代码块结构

3. 切回正常视图检查分支

保持光标在代码块外，再次按下 Ctrl + / 退出源代码模式，回到正常编辑视图。此时，刚才输入的文本块应已自动渲染为图形化的流程图。

观察渲染结果：流程应从“收集资料”开始，指向“资料完整吗”的判断节点。如果判断为“是”，则流向“归档”；如果为“否”，则流向“补充资料”，并从“补充资料”指回判断节点，形成闭环。

如果看到的仍然是代码文本而非图形，请检查以下几点：

1. 代码块第一行是否准确写着 mermaid。
2. 【偏好设置】中的 Diagrams 功能是否已启用。
3. 是否仍处于源代码模式。

若出现红色报错或乱码，通常是因为括号不匹配或使用了全角符号。请先删除所有样式修饰，只保留最基础的节点和连线，确保能成功渲染后再进行美化。

4. 修改节点并保持连接关系

流程图的价值在于可维护性。尝试修改节点内容：按 Ctrl + / 回到源码模式，找到节点 C 的定义，将 C[归档] 改为 C[保存归档]。切回正常视图，你会发现图中的对应节点文字已同步更新，且连线位置自动调整，无需手动拖拽。

如果需要改变整体布局方向，例如希望流程图从左向右展开，只需将第一行的 graph TD 改为 graph LR（Left-Right）。保存后查看，整个图表的流向将变为水平排列。

在修改节点标识（如将 A 改为 Start）时，必须同时更新所有引用该标识的连线。例如，若将 A[收集资料] 改为 Start[收集资料]，则下方的 A --> B 也必须改为 Start --> B。对于初学者，建议保持简单的单字母标识，或将标识与显示文字分开管理，避免因漏改一处而导致节点分裂或连线断裂。

修改源码中的节点文字后图表实时同步变化

5. 保存可编辑源码并检查分享结果

按 Ctrl + S 保存文档。关闭后重新打开该 .md 文件，确认图表依然能够正常渲染。这意味着你的流程图是以纯文本形式存储在文件中的，随时可以再次编辑。

需要注意的是，Mermaid 渲染依赖阅读器的支持。如果你将这份 Markdown 文件发送给使用不支持 Mermaid 的编辑器（如某些简易记事本或旧版阅读器）的人，他们只能看到原始代码。若需向此类用户展示，建议在 Typora 中右键点击图表，选择导出为图片，或打印为 PDF，但务必保留原始的 .md 文件以备后续修改。

5. 保存可编辑源码并检查分享结果