Diagflow 如何从自然语言生成 Mermaid 图表并导出 PNG 或 SVG？

Diagflow 是一个在线 AI 制图工具，可以把自然语言转换为标准 Mermaid 源码和可视化预览。用户可以让系统自动判断图表类型，也可以指定流程图、时序图、类图、状态图、实体关系图、甘特图或饼图；生成后能直接修改 Mermaid 代码，并导出带白色或预设背景的 2× PNG，或者裁切后的可缩放 SVG。正确用法不是生成后立即下载，而是先检查结构、修复语法、核对业务，再选择适合文档的格式。

Diagflow 适合哪些场景

• 把操作流程放进 Word、Google Docs 或 Notion。
• 为汇报和演示文稿快速制作清晰流程图。
• 用时序图说明客户端、接口和数据库交互。
• 用类图或 ER 图记录小型数据模型。
• 用状态图说明订单、工单或审批生命周期。
• 用甘特图制作短期项目计划。
• 用饼图表达少量分类占比。

输出保持为标准 Mermaid，因此不仅能导出图片，还可以复制源码到支持 Mermaid 的文档系统。对于需要频繁更新的技术文档，保留源码比只保存图片更便于维护。

从自然语言生成图表的完整步骤

1. 打开 Diagflow 的 Diagram generator。
2. 从示例提示开始，或在输入框描述自己的流程。
3. 把 Diagram kind 保持为自动，或明确选择图表类型。
4. 选择合适的配色预设。
5. 点击 Generate。
6. 在 Preview 中检查图形，在 Mermaid 标签中检查源码。
7. 结构不对时修改提示并 Regenerate。
8. 出现解析错误时手工修复，或在允许的情况下使用 Repair。
9. 确认无误后复制 Mermaid、下载 PNG 或下载 SVG。

网站的示例包括结账判断流程、REST API 时序、小型类模型、订单状态机、课程 ER 关系、两周冲刺计划和预算饼图。这些卡片适合了解输入格式，正式使用时应替换成真实但已经脱敏的规则。

怎样写出更准确的流程图提示词

流程图需要明确动作与条件。推荐按“开始事件、步骤、判断、每个分支去向、结束状态”组织：

生成从上到下的 Mermaid 流程图。
用户提交采购申请后，系统校验预算。
预算不足时退回申请并通知申请人。
预算充足时，根据金额判断审批人：不超过 5000 元由部门经理审批，超过 5000 元由财务总监审批。
审批拒绝则结束；审批通过则创建采购订单并通知供应商。
所有判断边标注清楚条件。

如果只写“采购审批流程”，模型必须自行猜测金额、角色和异常路径。把关键规则写出来，生成图才有验证基础。

复杂流程如何拆分

1. 先生成只有正常路径的主流程。
2. 补充拒绝、取消、超时和重试分支。
3. 把跨部门细节拆成独立子流程。
4. 统一角色与状态名称。
5. 最后调整布局和颜色。

一张图包含过多节点时，即使语法正确也难以阅读。主图应表现决策框架，细节图再说明具体执行。

如何指定时序图

时序图提示词应先列参与者，再按时间顺序写消息。需要明确同步调用、异步事件、返回值、循环和条件分支：

生成 Mermaid 时序图。
参与者：浏览器、API、订单服务、支付网关。
浏览器向 API 提交订单，API 调用订单服务创建待支付订单。
订单服务请求支付网关创建支付会话，支付网关返回支付地址。
使用 alt 表示支付成功与失败。
成功时订单服务更新状态并返回确认页；失败时返回重试提示。

生成后检查箭头方向、参与者顺序以及响应是否返回正确调用方。AI 常见错误是把回调画成同步返回，或漏掉失败后的状态更新。

如何生成类图与 ER 图

类图要说明类、属性、方法、继承和组合；ER 图要说明实体、字段、主键、外键和基数。提示词中的“拥有多个”应写成明确的一对多关系，避免模型根据名称猜测。

生成 Mermaid ER 图。
实体包括 User、Course 和 Enrollment。
User 的主键是 id，Course 的主键是 id。
Enrollment 包含 user_id、course_id、status 和 enrolled_at。
一个 User 可以有多个 Enrollment，一个 Course 可以有多个 Enrollment。
User 与 Course 通过 Enrollment 构成多对多关系。

正式数据库图还要对照迁移文件或 Schema 检查字段类型、可空性和唯一约束。生成器只能根据输入制作表达，不能替代数据库设计。

如何生成状态图

状态图要提供初始状态、事件、迁移条件和终止状态。例如订单状态不能只列“待支付、已支付、已完成”，还要说明超时取消、退款和人工关闭：

生成订单状态图。
初始状态为 PendingPayment。
支付成功进入 Paid，支付超时进入 Cancelled。
Paid 在仓库发货后进入 Shipped，签收后进入 Completed。
Paid 或 Shipped 可以申请退款，审核通过进入 Refunded，拒绝后回到原状态。
Cancelled、Completed 和 Refunded 为终止状态。

检查是否存在无法进入或无法离开的状态，以及退款、撤销等逆向迁移是否符合真实规则。

如何生成甘特图与饼图

甘特图需要日期、工期和依赖。应给出统一日期格式，说明哪些任务可以并行。模型不会自动掌握节假日、团队负载或资源冲突。

饼图适合少量互斥类别，提示词应提供总量一致的数值。类别过多、数值可能重叠或需要展示时间趋势时，应改用其他图表。

自动选择还是手工指定类型

Auto 适合快速尝试，但容易在含糊描述下选择错误类型。出现以下情况时应手工指定：

• 提示中同时包含时间顺序和系统组件。
• 需要严格使用 ER 或类图语法。
• 计划中包含日期与依赖。
• 需要与现有文档中的图表类型保持一致。
• 自动结果连续两次不符合目标。

图表类型首先服务于阅读任务，而不是取决于哪个效果更漂亮。

如何编辑 Mermaid 源码

切换到 Mermaid 标签后可以查看和修改生成代码，预览会重新渲染。一个基础流程图可能如下：

flowchart TD
    A[提交申请] --> B{预算是否充足}
    B -- 否 --> C[退回并通知]
    B -- 是 --> D{金额是否超过 5000}
    D -- 否 --> E[部门经理审批]
    D -- 是 --> F[财务总监审批]

TD 表示自上而下，LR 表示从左到右。普通步骤通常使用方括号，判断使用花括号。手工编辑时保持节点标识唯一，确保括号闭合，边标签与业务条件一致。

哪些问题适合手工修复

• 节点文字过长或术语不统一。
• 一条边连错目标。
• 布局方向不适合页面。
• 特殊字符造成简单解析错误。
• 模型遗漏少量明确节点。

如果整体结构错误，继续修改提示词并重新生成通常比逐行修补更高效。

Repair 与 Regenerate 有什么区别

Regenerate 使用同一或修改后的提示再次生成整份图表，适合结构和语义问题。Repair 面向预览报告的 Mermaid 解析错误，尝试修复语法；官方说明修复功能可能要求登录。

修复成功不代表业务逻辑正确。Repair 可能为了通过解析而改变标签、节点或连接，应用后必须对比源码和预览。

如何导出 2× PNG

PNG 使用 2 倍分辨率，背景会跟随颜色预设，适合 Word、幻灯片、LMS 和不支持 SVG 的内部系统。下载前应：

1. 选择与目标文档协调的颜色预设。
2. 确认所有文字清晰且没有裁切。
3. 检查白色背景在深色页面中的效果。
4. 下载后以实际插入尺寸查看，不只看原图。

位图放大后仍会变模糊。需要大幅缩放或后续编辑时，应同时保存 SVG 和 Mermaid 源码。

如何导出 SVG

SVG 是矢量格式，缩放时保持清晰，适合网页、设计工具和高分辨率打印。Diagflow 会将导出内容裁切到图表边界并保留少量边距。

某些内容系统会过滤 SVG，邮件客户端也可能限制内嵌矢量。交付前在最终环境测试；若不兼容，用 PNG 作为展示文件，同时保留 SVG 作为源资产。

积分和账户规则

当前价格页显示，新账户获得 3 个免费积分。每次 AI 成功返回一张图扣 1 个积分，失败请求不应计费；Fix with AI 不消耗积分，SVG 与 PNG 导出也包含在内。后续可按需购买积分包，而不是订阅。

价格以尼日利亚奈拉展示，金额、支付方式和规则可能变化。实际购买前应以当前价格页、账户余额和结算页面为准。登录 Google 账户后可以跨会话保存进度并使用修复功能。

隐私和数据保留边界

MonoEd 隐私政策说明，AI 工具会收集用户输入的文本，用于生成结果和防止滥用；输入可能临时发送给 Google Gemini API 或其他 AI 模型。政策还说明 AI 生成日志可能保留最长 180 天，并可能与 AI API 提供商、错误监控和分析服务共享必要数据。

因此，在线生成不能视为本地离线处理。不要提交 API 密钥、密码、生产地址、客户个人信息、未公开漏洞或受保密协议约束的架构细节。

• 用虚构名称替代真实客户和系统名称。
• 删除订单号、邮箱、电话和身份标识。
• 只描述生成图表所需的最少结构。
• 分享前检查节点是否泄露安全边界。
• 组织使用前核对保留、删除和模型提供商条款。

怎样验证 AI 生成的图表

1. 语法验证：预览可以稳定渲染。
2. 结构验证：没有悬空节点、断路或无出口循环。
3. 业务验证：判断规则、角色和状态与原始需求一致。
4. 数据验证：数值、日期、基数和依赖正确。
5. 可读性验证：标签简短、方向合理、颜色对比充分。
6. 兼容性验证：导出文件能在目标文档中正常显示。

对重要流程，应由流程负责人而不是只有制图者签字确认。图看起来整齐并不能证明内容正确。

如何把 Mermaid 源码用于文档

复制源码后，可放入支持 Mermaid 的 Markdown 代码块或版本控制仓库。不同平台使用的 Mermaid 版本可能不同，Diagflow 中能渲染的语法不一定在目标系统完全兼容。

建议把 .mmd 源码作为真源，把 PNG 和 SVG 当作构建或发布产物。业务规则变化时先修改源码或重新生成，再更新图片，避免文档与流程脱节。

常见故障如何排查

点击 Generate 后没有结果

检查提示是否为空、网络是否正常、是否还有积分，以及浏览器是否拦截请求。若服务返回失败，确认账户没有被错误扣除成功生成积分。

生成了错误的图表类型

不要使用 Auto，直接选择目标类型，并在提示第一句再次声明图表类型。

预览显示解析错误

切换 Mermaid 源码，检查图表声明、括号、引号、箭头和特殊字符。可以先手工缩减到可渲染版本，再使用 Repair。

Repair 要求登录

按官方说明，修复和跨会话保存可能需要 Google 登录。确认登录会话和 Cookie 可用。

PNG 文字仍然模糊

减少节点、缩短标签并提高文档中的显示尺寸。需要任意缩放时改用 SVG。

SVG 无法上传

目标平台可能出于安全原因过滤 SVG。改用 PNG，并在受控仓库中保留 SVG 与 Mermaid 源码。

图表太宽

把方向从左右改为上下，拆分子流程，删除冗长说明。不要仅靠缩小字体。

最终验收清单

1. 已明确选择正确图表类型。
2. 提示包含关键主体、步骤、条件和结果。
3. Mermaid 代码无解析错误。
4. 所有分支和状态均与业务一致。
5. 输入内容已经脱敏。
6. 导出背景和尺寸适合目标文档。
7. PNG 与 SVG 均在目标环境测试。
8. Mermaid 源码已单独保存。
9. 积分消耗和账户状态已经确认。

总结

Diagflow 可以把自然语言快速转换为七类常用 Mermaid 图表，支持源码编辑、预览修复、2× PNG 和裁切 SVG 导出。高质量结果依赖明确的图表类型、完整的分支与关系描述，以及生成后的人工验证。使用前还应理解积分、登录和数据处理规则：成功生成会扣积分，输入可能由 Gemini 或其他模型处理，日志可能保留一段时间。对敏感流程先脱敏，对正式文档同时保存 Mermaid 源码和可交付图片。