typora怎么展示流程图 图表预览设置

在Typora中展示流程图，核心是利用内置的Mermaid引擎将文本代码实时渲染为图形。这种做法的好处是图表即源码，修改文字即可同步更新图形结构，无需切换外部绘图软件或导出图片。下面以Windows版本为例，通过一个“材料整理”的简单流程，演示从设置到预览的全过程。

在【偏好设置】-【Markdown】中勾选【图表】选项

1. 在偏好设置中开启图表支持

启动Typora，按下快捷键 Ctrl+, 打开【偏好设置】窗口。在左侧菜单选择【Markdown】，在右侧面板中找到【图表】（英文界面为 Diagrams）选项，勾选该复选框。

如果界面提示需要重启软件才能生效，请先保存当前文档，关闭并重新打开Typora。这一步是基础开关，它告诉Typora去解析特定的图表语法，而不是把普通段落自动变成图。注意不要将其与代码高亮混淆，也不必为此修改主题文件。

1. 在偏好设置中开启图表支持

2. 插入Mermaid代码块

新建或打开一个Markdown文档，将光标定位在空白处。输入三个英文反引号 ``` ，紧接着输入 mermaid ，然后按回车键。Typora会自动生成一个指定语言为Mermaid的代码块框架。

输入```mermaid创建代码块并填写流程图代码

在代码块中间输入以下标准Mermaid语法：

graph TD
    A[整理材料] --> B{材料是否完整}
    B -->|是| C[完成]
    B -->|否| D[补充材料]
    D --> B

如果手动输入反引号未能触发代码块，可以使用快捷键 Ctrl+Shift+K 插入代码块，并在弹出的语言选择框中输入或选择 mermaid 。确保外层只有这一组反引号包裹，内部不要重复添加标记。

这段代码中， graph TD 表示图形从上到下排列；方括号 [] 内是矩形节点内容，花括号 {} 内是菱形判断节点；箭头 --> 定义流向，竖线 |文字| 用于标注连线条件。

3. 退出源代码模式查看预览

Typora默认处于实时预览模式。如果你当前处于源代码模式（界面显示纯文本代码），请点击菜单栏【视图】>【源代码模式】退出，或直接再次点击工具栏对应的图标。

光标移出代码块后显示的流程图预览

将光标移出代码块区域，点击文档空白处。此时，原本的文字代码应瞬间渲染为带有节点和连线的流程图。图中应清晰显示“整理材料”指向“材料是否完整”的判断，并根据“是”或“否”分别流向“完成”或“补充材料”，最后形成闭环。

如果仍然显示为灰色背景的代码文本，请检查代码块左上角或右上角的语言标识是否为 mermaid ，并确认第一步中的图表支持已正确开启。切勿在同一个代码块中混用 flowchart.js 等其他语法，这会导致渲染失败。

4. 修改节点验证可编辑性

为了确认图表与源码的联动关系，双击代码块进入编辑状态。将节点D中的文字“补充材料”修改为“补充缺失材料”，保持其他语法结构不变。

修改节点文字后预览画面即时刷新

再次将光标移出代码块，观察预览画面。节点D上的文字应立即更新为“补充缺失材料”，且指向节点B的箭头连接保持完好。这种即时反馈证明了图表是由代码动态生成的，而非静态图片。

若修改后出现红字报错或图形消失，说明语法有误（如漏掉括号或箭头方向错误）。此时建议先恢复为上述简短示例，再逐行添加内容。注意保留英文半角的符号，中文仅用于节点显示文本。

完成编辑后，按 Ctrl+S 保存为 .md 文件。需要注意的是，虽然Typora能完美渲染此图表，但其他不支持Mermaid的Markdown阅读器可能只能看到源代码。因此在分享文件时，需确认接收方的阅读环境，或导出为PDF/HTML以保留视觉效果。