🎯 目标

在 Typora 中，将一段文本代码瞬间变成一张清晰的逻辑流程图，并学会如何导出它。

🛠 准备工作

• 软件： 打开 Typora。

• 检查设置： 确保 文件 -> 偏好设置 -> Markdown -> 图表 (Diagrams) 已经勾选。

第一步：召唤“画板”

Mermaid 的绘图代码必须写在一个专门的区域里。

1. 输入开头： 在空白行输入三个反引号 ``` （键盘左上角 Esc 键的下方）。

2. 标记类型： 紧接着输入 mermaid。

3. 回车确认： 按下 Enter 键。

此时，屏幕上会出现一个灰色的代码输入框。

第二步：输入“指令”

请将下面这段你指定的代码，直接复制并粘贴到那个灰色的输入框里：

代码段

graph LR
    A[我输入代码] --> B(Typora识别)
    B --> C{光标移开?}
    C -- 是 --> D[变成图表]
    C -- 否 --> E[保持代码显示]

第三步：见证变化（渲染）

这是最关键的一步：

• 动作： 鼠标点击灰色方框外面的任意空白处（或者按键盘方向键移出方框）。

• 结果： 代码瞬间消失，变成了一张从左到右的流程图！

🔍 代码详解（教你看懂它）：

• graph LR：告诉 Typora 这张图是从左到右 (Left to Right) 排列。

• A[...] / D[...]：方括号代表矩形节点（如“我输入代码”）。

• B(...)：圆括号代表圆角矩形（如“Typora识别”）。

• C{...}：花括号代表菱形判断框（如“光标移开?”），用来做选择题。

• -->：代表连接线。

• -- 是 -->：代表连线上带有文字说明（路径条件）。

第四步：修改与微调

如果你想改字，或者发现逻辑不对：

• 动作： 鼠标左键单击那张生成好的图片。

• 结果： 图表会立刻变回代码框。

• 修改： 比如你可以把 A[我输入代码] 改成 A[复制粘贴代码]，改完后再次点击外部空白处即可。

第五步：保存图片

做好了图，怎么拿出来用？

1. 右键点击生成的流程图。

2. 选择 导出图片 (Export Image)。

3. 保存为 .png 文件。