MermaidKit 如何从文字、图片或 Mermaid 代码生成可编辑图表？

MermaidKit 是面向开发者的在线 Mermaid 编辑器，可以在同一页面编写代码、实时预览、使用 AI 把文字描述转换为 Mermaid 草稿，并按账户方案导出 PNG 或 SVG。官网还宣传从白板图片生成图表，但当前价格页明确标注免费版和基础版不支持图片转图，高级版也显示该功能“即将推出”。因此现阶段应把文字生成和 Mermaid 代码编辑作为稳定入口，图片导入则以登录后的实际界面为准。

三种输入方式当前分别是什么状态

• 文字描述：由 AI 生成可编辑 Mermaid 代码，适合快速制作初稿。
• Mermaid 代码：直接粘贴、编辑并实时预览，适合已有图表维护。
• 图片或白板照片：主页和法律文本有相关描述，但价格页仍标为不支持或即将推出，不能假设已经开放。

产品页面之间出现差异时，应以账户实际可用按钮和最新价格说明为准。不要为了尝试尚未开放的功能上传含有敏感架构的白板照片。

开始前需要准备什么

• 现代浏览器和可用的 MermaidKit 账户。
• 清晰的流程、系统或数据关系描述。
• 已有 Mermaid 源码，或准备交给 AI 的脱敏文本。
• 适合需求的账户方案和剩余 AI 积分。
• 对输入第三方 AI 服务的数据拥有处理权限。

免费版当前最多保存 5 个图表，提供 5 个 AI 积分和主题切换，只能导出带水印 PNG，不支持高分辨率导出、版本历史或 AI 图片转图。

如何从文字生成 Mermaid 图表

1. 登录 MermaidKit 并新建图表。
2. 选择 AI 文字生成入口。
3. 写明图表类型，例如流程图、时序图或 ER 图。
4. 列出参与者、节点、连接和判断条件。
5. 提交生成请求。
6. 在代码与预览并排界面检查结果。
7. 直接修改 Mermaid 语法，直到结构与业务一致。
8. 保存源码并按方案导出。

AI 的价值是减少第一次手写语法的成本，不是自动完成架构设计。提示越具体，模型越少依赖猜测。

流程图提示词怎样写

流程图至少要说明开始、步骤、判断、分支去向和终态：

生成一个从左到右的 Mermaid 流程图。
用户提交注册表单后，系统校验邮箱格式。
格式错误则显示提示并回到表单。
格式正确则检查邮箱是否已注册。
已注册则引导登录；未注册则创建账户并发送验证邮件。
验证成功进入首页，24 小时未验证则使链接失效。
所有判断边标注条件。

“检查邮箱”本身不是完整流程，必须写清检查结果和每个结果的下一步。循环还要有退出条件。

时序图提示词怎样写

时序图要按时间顺序列出参与者和消息：

生成 Mermaid 时序图。
参与者包括 Web 客户端、API 网关、认证服务和用户数据库。
客户端提交登录请求，网关调用认证服务。
认证服务查询用户数据库并校验密码。
使用 alt 分支表示校验成功和失败。
成功时签发令牌并返回客户端；失败时记录次数并返回错误。
连续失败五次后锁定账户。

生成后检查请求和响应方向、同步与异步关系、异常分支以及敏感信息是否被画进节点。

如何从已有 Mermaid 代码继续编辑

如果已经在仓库或文档中维护 Mermaid，可以把代码粘贴到编辑器。MermaidKit 会在同一窗口实时预览，修改文本即可看到图形变化。

flowchart LR
    A[提交注册表单] --> B{邮箱格式正确}
    B -- 否 --> A
    B -- 是 --> C{邮箱已注册}
    C -- 是 --> D[引导登录]
    C -- 否 --> E[创建账户]
    E --> F[发送验证邮件]

LR 表示从左到右，改为 TD 可切换为从上到下。编辑时保持节点标识唯一，确认括号和连接符完整。

旧代码导入后的检查

• 目标平台与 MermaidKit 使用的 Mermaid 版本是否兼容。
• 主题和自定义样式是否仍然生效。
• 实验性图表类型是否能渲染。
• 节点标签中的特殊字符是否需要转义。
• 复制过程中是否丢失缩进或换行。

图片或白板照片应该怎样处理

产品首页把“白板照片一键数字化”列为能力，隐私政策也说明可能收集上传的文件和图片，用于 AI 转换。但当前价格表显示免费版和基础版不支持图片转图，高级版标注“即将推出”。这意味着功能宣传、数据政策与实际售卖状态并不同步。

在账户界面没有明确上传入口时，不应把图片功能写入团队标准流程。如果入口已经对特定账户开放，应先进行以下处理：

1. 裁切掉无关区域。
2. 遮盖姓名、邮箱、项目代号和网络地址。
3. 提高对比度，确保箭头和文字可辨。
4. 上传后逐个核对节点、边和方向。
5. 删除远端草稿和原始上传内容。

图像识别容易混淆手写字、交叉箭头和低对比线条。即使转换成功，也必须对照原图人工校验。

怎样把 AI 初稿改成可维护图表

1. 统一节点命名，使用动宾短语或明确组件名。
2. 删除模型补出的不存在组件。
3. 补齐错误、超时、重试和回滚路径。
4. 让每个判断都有完整且互斥的出口。
5. 拆分超过一个阅读目标的大图。
6. 选择适合页面的左右或上下布局。
7. 在目标文档环境再次渲染。

可编辑 Mermaid 代码的优势在于修改可追踪。建议将源码纳入 Git，而不是只保留在线账户中的图或导出的位图。

实时预览能验证什么

实时预览能发现语法错误、节点拥挤和布局问题，但不能验证业务规则。正式使用前分三层检查：

• 语法层：代码可渲染，括号、箭头和声明正确。
• 结构层：不存在悬空节点、断路或没有退出条件的循环。
• 业务层：权限、状态、调用顺序和数据关系符合真实系统。

图表在编辑器中看起来合理，并不意味着 AI 没有遗漏关键分支。重要图应交由系统或流程负责人审核。

如何导出 PNG 与 SVG

主页说明支持图片或 SVG 导出。当前方案差异如下：

• 免费版：导出带水印 PNG，不支持高分辨率。
• 基础版：支持 SVG 和高分辨率 PNG。
• 高级版：包含基础版导出能力。

PNG 适合直接插入 Word、演示文稿和不支持矢量图的系统；SVG 适合网页、设计工具和需要任意缩放的文档。无论导出哪种格式，都应同时复制并保存 Mermaid 源码。

导出前检查

1. 选择浅色或深色主题并检查对比度。
2. 确认所有节点在画布内。
3. 缩短过长标签，避免字号过小。
4. 在最终文档尺寸下检查清晰度。
5. 确认水印和分辨率符合交付要求。

如何复制到 Markdown 和代码仓库

MermaidKit 支持复制 Markdown 源码。可将代码放入文档的 Mermaid 代码块，并与代码一起进行版本审查。不同平台的 Mermaid 版本可能不同，所以还要在 GitHub、知识库或静态站点的实际渲染器中验证。

推荐保存结构：

docs/
  diagrams/
    auth-flow.mmd
    payment-sequence.mmd
  images/
    auth-flow.svg

.mmd 文件作为真源，SVG 或 PNG 作为发布产物。业务变化时先更新源码，再重新导出。

公开分享链接当前能否使用

主页将只读分享链接列为导出与分享能力，但价格页的高级版又将公开分享链接标为“即将推出”。在实际账户中没有分享按钮时，不要依赖该能力交付评审。

即使分享已开放，也要确认链接是否真正只读、是否可被搜索引擎发现、能否撤销、是否有到期时间，以及访问者是否需要登录。涉及内部架构时优先使用组织现有的受控文档平台。

版本历史和图表数量限制

• 免费版最多 5 个图表，没有版本历史。
• 基础版提供无限图表、文件夹和 5 天版本历史。
• 高级版提供每月更多 AI 积分和 30 天版本历史。

在线版本历史不能替代仓库版本控制。窗口期结束、账户异常或服务变化都可能影响恢复能力，重要 Mermaid 源码应定期导出。

AI 积分和订阅如何选择

当前价格页显示免费版提供 5 个 AI 积分；基础版每月 60 个；高级版每月 200 个。年付页面列出的基础版和高级版价格分别为 69.99 美元和 119.99 美元。

价格、积分消耗方式和功能可能随时间变化。订阅前应在结算页确认币种、续费周期、退款规则和图片转图是否真的可用。不要仅根据首页功能文案购买。

数据会怎样处理

隐私政策列出的数据包括账户与联系方式、Mermaid 代码、文字提示、AI 架构反馈、图表元数据，以及用户上传的文件和图片。服务可能与云托管、存储、CDN、分析服务和 AI 模型提供商共享运营所需数据。

政策说明草稿或上传内容可由用户删除，或在注销账户时删除，但也保留法律要求下继续保存的可能。服务条款还要求不要上传密钥或受监管数据，并明确 AI 输出需要人工验证。

• 不要输入密码、令牌、私钥或连接字符串。
• 用抽象名称替换客户、供应商和内部系统代号。
• 对白板照片进行裁切和脱敏。
• 分享前检查 Mermaid 源码中的注释和元数据。
• 敏感项目先完成组织级数据处理审查。

与 Cursor 或 Claude Code 如何配合

官网建议把 Mermaid 源码作为 AI 编程上下文。可以将已经人工确认的图表代码交给编程工具，用于解释系统结构、生成文档或辅助实现。

图表应是经过审核的上下文，而不是未经验证的 AI 初稿。否则第二个模型会把错误结构当成事实继续推导。每次引用时同时提供相关源码和约束，避免仅凭图表生成生产代码。

常见问题如何排查

文字生成结果不是想要的图表类型

在提示第一句写明流程图、时序图、状态图或 ER 图，并补充该图表所需的信息结构。复杂需求拆成多张图。

粘贴 Mermaid 后无法预览

检查图表声明、括号、引号、箭头和特殊字符。确认代码来自支持的 Mermaid 版本，并先缩减到最小可渲染示例。

找不到图片上传入口

当前价格页仍把图片转图标为不支持或即将推出，这是预期的产品状态差异。以账户界面和最新方案说明为准。

免费账户不能导出 SVG

免费方案当前只列带水印 PNG；SVG 和高分辨率 PNG 属于基础版及以上权益。

图表数量达到上限

先导出 Mermaid 源码并确认备份，再删除不需要的免费账户图表，或根据实际需求升级方案。

目标平台不支持生成代码

检查平台 Mermaid 版本和图表类型。必要时导出 SVG 或 PNG，同时保留源代码供后续修改。

预览图过宽或文字太小

切换布局方向、缩短节点名称、拆分子图。不要仅靠缩放把所有内容塞进一张图。

最终验收清单

1. 已确认当前账户实际开放的输入方式。
2. 提示词明确图表类型、节点、关系和异常。
3. 生成的 Mermaid 代码可稳定渲染。
4. 图表经过语法、结构和业务核对。
5. 文字和图片已经脱敏。
6. 导出格式、分辨率和水印符合交付要求。
7. 源码已保存到本地或版本控制。
8. 目标文档平台已完成兼容性测试。
9. 没有把“即将推出”功能当作现有能力。

总结

MermaidKit 当前最可靠的工作流是用文字生成 Mermaid 初稿，或导入已有 Mermaid 代码进行实时编辑，再按账户方案导出 PNG 或 SVG。图片转图和公开分享虽然出现在主页与政策文本中，但价格页仍标为不支持或即将推出，实际使用前必须查看账户界面。无论输入来自文字、代码还是未来开放的图片，最终结果都应经过人工校验、脱敏处理并保存源码，避免把 AI 草稿或在线账户当作唯一事实来源。