怎么让 AI 给出能直接渲染的 Mermaid 代码

一句话的差别

对 AI 说「帮我画个流程图」，它可能给你一张图片、一段文字描述，或者一份 markdown 列表。说「请用 Mermaid 代码画一张流程图，第一行用 flowchart TD 开头，直接给出完整的 mermaid 代码块」，回复就是一段能直接渲染的代码。差别就在于把语法关键字写进了提示词。

图搭子编辑器状态行右侧的「还没有代码？」里，按七种图类型各写好了一句提示词（流程图、思维导图、时序图、甘特图、类图、状态图、饼图），选中复制即可。流程图那句是：

请用 Mermaid 代码帮我画一张流程图，主题是：____。要求：直接给出完整的 mermaid 代码块，第一行用 flowchart TD 开头，节点文字用中文。

提示词里值得写清的四件事

1. 图类型的关键字：flowchart TD、sequenceDiagram、mindmap、gantt、classDiagram、stateDiagram-v2、pie。思维导图尤其要点明「用 Mermaid 的 mindmap 语法」，否则常常只拿到一份列表。
2. 只输出代码块：「直接给出完整的 mermaid 代码块」。这不是必须的（图搭子会自动从整段回复里抽代码），但少一段废话就少一点出错的机会。
3. 文字语言：「节点文字用中文」。不写的话有些模型会中英混排。
4. 内容本身：把步骤、角色、时间都交代给它。AI 补出来的流程往往是通用模板，你写得越具体，改的地方越少。

要按现成结构生成，模板库里每套模板都附了一句提示词，把「按这个结构」的要求也一并交给了 AI。

各家网页端「复制」出来的是什么

图搭子接受整段回复，不用手动剥代码块。各家网页端「复制」按钮给的内容不太一样（2026-09-02 实测）：

• 豆包：带说明文字时，复制出来的代码块可能丢了 mermaid 语言标记，只剩三个反引号；App 里复制连反引号都没有。都能识别。
• DeepSeek、Kimi：网页端会把 Mermaid 直接渲染成图，「复制」给的是带 mermaid 标记的完整代码块，粘贴即可。
• 元宝：「复制」给的是没有代码块标记的裸代码，说明文字直接接在代码后面。图搭子会从代码开头截到第一行散文。
• ChatGPT：登录后「复制回复」给完整 markdown；未登录时只复制到图里的文字标签，拿不到代码，先登录。
• Claude：回复下方的「Copy」给完整 markdown。

更细的说明在帮助中心的各家 AI 网页端怎么复制整段回复。

粘进去以后

粘贴后状态行显示「已从回复中识别出××代码」就是成功了。三种形态都认：带 mermaid 标记的代码块、无语言标记的代码块、不带任何标记的裸代码。

如果显示「没识别出图表类型」，多半是 AI 把关键字写在了说明文字里而不是代码里，在代码第一行补上 flowchart TD 这类关键字即可。回复里有好几段代码时，取第一段；要一次导出多张，用导出菜单里的「批量 / 打包导出」把整段回复粘进去（轻会员）。

试一段

下面是一段按上面那句提示词让 AI 生成的典型回复里抽出来的代码，点「在编辑器里打开」看效果：

flowchart TD
    A([开始]) --> B[提交请假申请]
    B --> C{天数 ≤ 3?}
    C -- 是 --> D[直属主管审批]
    C -- 否 --> E[部门负责人审批]
    D --> F{通过?}
    E --> F
    F -- 通过 --> G[HR 备案]
    F -- 驳回 --> H[通知申请人]
    G --> I([结束])
    H --> I

接下来

• 上一篇：5 分钟上手
• 下一篇：改字、调布局、修报错