AI 流程图生成器如何把英文描述转换为可编辑的 Mermaid 代码？

使用 AI 流程图生成器把英文描述转换为 Mermaid 代码时，应在输入中明确步骤、判断条件、分支结果和结束状态。Forewrite 会让 AI 根据描述编写 Mermaid 流程图，并在浏览器中渲染；结果可以复制为可编辑代码，也可以下载为 PNG 或 SVG。

这个工具的转换流程是什么

根据当前工具页面，完整流程分为四步：

1. 在输入框中用英文描述流程或决策树。
2. 选择输出语言并点击生成。
3. 检查浏览器中渲染的流程图。
4. 复制 Mermaid 代码，或下载 PNG、SVG。

AI 负责从自然语言推断节点和连接，Mermaid 负责用文本语法表达结构，浏览器则把代码渲染为图形。这三层需要分别验收。

英文描述应该包含哪些信息

最有效的描述不是长篇背景，而是结构明确的流程合同：

• 流程从什么事件开始。
• 每一步由谁执行什么动作。
• 在哪些节点需要判断。
• 每个判断有哪些互斥结果。
• 失败、取消、超时如何处理。
• 哪些状态代表流程结束。

工具页面也建议用“if approved, otherwise”这类明确条件描述分支。模糊的“处理异常”无法告诉 AI 异常发生在哪一步、之后走向哪里。

一个可直接使用的英文示例

Create a top-down flowchart for an expense approval process.

Start when an employee submits an expense report.
First, validate that receipts and required fields are present.
If information is missing, return the report to the employee.
If the report is complete, send it to the manager.
If the manager rejects it, notify the employee and end as rejected.
If the manager approves it and the amount is over 5,000,
send it to Finance for a second review.
If Finance rejects it, end as rejected.
Otherwise, schedule payment and end as paid.

Label every decision branch and keep all end states explicit.

这段描述提供了方向、触发事件、步骤、金额条件和终态，生成器无需自行猜测主要结构。

为什么要用动作句而不是名词

“Employee, report, manager, finance, payment”只是一组实体。改成“Employee submits report”“Manager approves report”后，AI 才能判断谁连接谁以及箭头方向。

不清楚的写法	更清楚的写法
Check	Validate that all required fields are present
Approval	Manager approves or rejects the report
Error	If validation fails, return the report to the employee
Payment	Finance schedules payment after final approval

生成后会得到怎样的 Mermaid 代码

flowchart TD
    A([Employee submits report]) --> B{Information complete?}
    B -- No --> C[Return report to employee]
    C --> A
    B -- Yes --> D{Manager approves?}
    D -- No --> E([Rejected])
    D -- Yes --> F{Amount over 5,000?}
    F -- No --> G[Schedule payment]
    F -- Yes --> H{Finance approves?}
    H -- No --> E
    H -- Yes --> G
    G --> I([Paid])

实际输出可能在节点 ID、文案和布局上不同。重要的是每个节点与连接都由文本表示，可以复制到 Mermaid 编辑器中继续调整。

如何检查生成代码是否正确

1. 确认第一行声明的是需要的图表类型和方向。
2. 确认所有节点 ID 唯一。
3. 检查每条箭头的起点和终点。
4. 检查判断出口是否有清晰标签。
5. 检查所有路径是否能到达合理终态。
6. 确认 AI 没有发明输入中不存在的规则。

渲染成功只说明语法基本可解析，不说明业务流程正确。尤其要检查循环是否有退出条件，以及失败路径是否错误地回到成功节点。

如何在 Mermaid 编辑器中修改

工具页面明确建议把复制的代码粘贴到任意 Mermaid 编辑器中微调节点、标签和布局。常见修改包括：

• 将 TD 改为 LR，切换阅读方向。
• 缩短节点标签，避免图表过宽。
• 补充分支标签，消除歧义。
• 增加或删除节点与连线。
• 用子图表达角色或系统边界。
• 添加统一样式突出成功和失败状态。

如何把节点按角色分组

flowchart LR
    subgraph Employee[Employee]
        A[Submit expense report]
        C[Correct missing information]
    end

    subgraph Company[Company]
        B{Information complete?}
        D{Manager approves?}
        F{Finance review required?}
        G[Schedule payment]
    end

    A --> B
    B -- No --> C
    C --> A
    B -- Yes --> D
    D -- Yes --> F
    F -- No --> G

子图应表达真实职责边界。不要仅为了视觉对称，把属于不同责任人的节点放在同一组。

第一次结果不正确怎么办

工具把输出描述为尽力生成，因此偶尔需要修正。可以选择两条路径：

1. 回到输入框，使用更清楚的英文描述重新生成。
2. 复制当前 Mermaid 代码，在编辑器中直接修改。

结构整体错误时重新生成更快；只有少量标签或箭头错误时，直接改代码更可控。

如何改写提示以减少重生成

如果第一版漏掉拒绝分支，不要只补一句“include errors”。应明确写出位置和去向：

If the manager rejects the report, notify the employee
and end the workflow with the status Rejected.
Do not send a rejected report to Finance.

如果流程过于复杂，可限制节点数量并要求合并细节：

Keep the chart under 12 nodes.
Combine internal validation checks into one node.
Do not remove decision outcomes or end states.

输出语言如何选择

页面提供多种输出语言，包括简体中文。英文描述与中文节点并不冲突，可以在提示中明确要求中文标签，或使用页面语言选项。

Create a flowchart for user registration.
Use Simplified Chinese for every visible node label.
Keep Mermaid node IDs in simple Latin letters.

节点 ID 使用简短稳定的拉丁字母，显示标签使用中文，通常更容易维护和排错。

PNG、SVG 和 Mermaid 代码如何选择

格式	适合用途	主要限制
PNG	聊天、工单和固定尺寸文档	放大后可能模糊
SVG	网页、印刷和无损缩放	部分平台会限制矢量内容
Mermaid 代码	继续编辑、评审和版本控制	需要渲染器才能看到图形

正式项目最好保留 Mermaid 代码作为权威源文件，需要展示时再从源文件生成 PNG 或 SVG。

隐私边界应该如何理解

根据工具页面的说明，用户输入的简短描述会发送给 AI 模型，用来生成图表代码；流程图的渲染与导出在浏览器中完成。因此“在浏览器中导出”不等于输入从未离开设备。

不要输入密码、访问令牌、个人身份信息、客户数据或未公开系统地址。处理内部流程前，应遵循组织对第三方 AI 工具和数据传输的规定。

如何验证下载结果

• PNG 以 100% 比例检查文字、箭头和边界。
• SVG 在浏览器与目标工具中分别打开。
• 确认字体替换没有造成标签溢出。
• 确认浅色节点在白色背景上仍可见。
• 检查生成文件中不含敏感节点或内部信息。
• 把导出图与最终 Mermaid 源码版本对应保存。

适合生成哪些流程图

该工具适合流程、工作流、算法、决策树、入职步骤、审批路径和分步操作。它的核心输出是流程图，不应假设所有 Mermaid 图表类型都能通过同一入口稳定生成。

若要制作复杂时序图、实体关系图或甘特图，应选择明确支持对应类型的工具，并继续验证生成语法。

常见问题

为什么英文描述生成了没有分支的直线流程？

输入可能只列出了步骤，没有使用明确条件。加入“if”“otherwise”“when rejected”等表达，并写清每个结果的去向。

复制的 Mermaid 代码无法渲染怎么办？

先检查图表声明、箭头、括号、引号和特殊字符。可以回到生成器重试，也可以在 Mermaid 编辑器中逐段缩小错误范围。

能否只下载图片而不保留代码？

可以，但后续修改会更困难。只要图表可能迭代，就应同时保存 Mermaid 代码。

免费工具生成的结果可以直接用于正式流程吗？

不应未经核对直接使用。AI 输出是尽力生成，必须由了解业务的人确认条件、权限、异常路径和终态。

总结

把英文描述转换为可编辑 Mermaid 代码，关键是用动作句明确步骤，用条件句明确分支，并写出每条路径的结束状态。Forewrite 负责生成与浏览器预览，用户仍需检查节点、连线和业务语义。结构错误时改写英文重新生成，局部错误时复制 Mermaid 代码精确修改，最终同时保留源代码和经过验收的导出文件。