DiagramPreview
AI BetaAIDeepSeekLocal fallbackMermaid

文本转 Mermaid

输入产品说明、故障记录或架构描述，让 AI 生成 Mermaid 源码，并在同一个页面里预览、检查、修改和导出。

示例
Mermaid 预览
粘贴需求、笔记或流程描述，将普通文本转换成可预览和导出的 Mermaid 代码。

下一步可以继续

把生成结果带到相关工具里继续预览、转换或排查。

网页转 Markdown

将网页 URL 或粘贴的 HTML 转换为干净的 Markdown，适合文档、笔记、AI 提示词和内容迁移。

打开
AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

打开
Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

打开

使用方法

  1. 1描述目标读者、图表范围、必须出现的参与方，以及这张图要支持的决策。
  2. 2生成前先选择 Mermaid 图类型：流程图、时序图、类图或 ER 图。
  3. 3生成 Mermaid 代码后立即预览，不要直接把 AI 输出复制进正式文档。
  4. 4删除凭空编造的组件，缩短标签，并把过大的结果拆成多张图。
  5. 5只有当源码仍然可读、方便后续修改时，再导出 SVG 或 PNG。

常见场景

AI 图表草稿文本转 Mermaid事故时间线图架构评审 prompt产品流程文档Mermaid 语法修复

相关工具

网页转 Markdown

将网页 URL 或粘贴的 HTML 转换为干净的 Markdown，适合文档、笔记、AI 提示词和内容迁移。

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

常见问题

会使用哪个 AI 供应商？

服务端直接调用 DeepSeek；DeepSeek 不可用或未配置时，会使用本地模板兜底。

API Key 会暴露到浏览器吗？

不会。API Key 只在服务端通过环境变量读取，不会发送到浏览器。

可以用文字生成 Mermaid 时序图吗？

可以。描述参与方和调用顺序，选择 sequenceDiagram，再检查生成的 Mermaid 源码后导出。

一个好的文本转 Mermaid prompt 应该包含什么？

建议包含目标读者、图表类型、必须出现的系统或参与方、关键数据存储、外部服务，以及明确说明哪些内容不能由 AI 自行补充。

AI 生成的 Mermaid 可以直接作为最终文档吗？

不建议。它应该被当作草稿。发布前需要预览、对照原始材料验证，并保留可编辑的 Mermaid 源码。

文本转 Mermaid 适合把需求说明、事故记录、用户路径和架构描述转换成可维护的 Mermaid 源码。

当你已经有文字流程，但需要放进 README、设计评审、故障复盘或产品文档时，可以先生成再预览。

生成后请保留 Mermaid 源码，确认标签、箭头和图表类型都匹配，再导出 SVG 或 PNG。

Demo：把事故记录转换为 Mermaid

事故记录通常用文字描述参与方、事件和时间线。转成 Mermaid 能暴露缺失步骤、职责不清和恢复动作。

  • 先用一个小而完整的示例确认结构，再粘贴完整生产内容。
  • 检查预览是否清楚展示 ownership、结构、标签和风险字段。
  • 保留源码和导出结果，方便后续 reviewer 复现。
At 10:05 API returned 503. Gateway retried twice. Checkout timed out waiting for inventory. Recovery: scale inventory pods.

编辑模式：先选 Mermaid 图类型，再生成

文本转图表的质量很大程度取决于图表类型是否匹配问题。架构说明、事故记录和产品流程不应该都被生成成同一种 flowchart。

  • 请求顺序和责任归属用 sequenceDiagram。
  • 决策树、用户路径和排障步骤用 flowchart。
  • 数据关系用 ER 图，不要强行塞进盒子和箭头。
问题：谁调用了谁？ -> sequenceDiagram
问题：用户可以走哪些路径？ -> flowchart
问题：数据如何关联？ -> erDiagram

Prompt 模板：生成 reviewer 更信任的图

更好的 prompt 会约束模型，而不是只要求“生成一张好看的图”。说明受众、范围、必须出现和不能出现的系统，并要求保持标签短小。

  • 第一句说明图表受众和范围。
  • 列出必需节点，以及禁止 AI 添加的节点。
  • 要求边标签足够短，适合 README 或架构决策记录。
为后端 reviewer 创建 Mermaid sequenceDiagram。范围：checkout 支付授权。必须包含：Browser、Checkout API、Auth service、Payment provider、Order database。不要添加 inventory 或 shipping。消息标签不超过 5 个词。

文本转 Mermaid 检查清单

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时，可以使用 文本转 Mermaid。把产品说明、事故记录、架构文本和需求草稿转换成可编辑 Mermaid 图表。

导出前建议检查标签是否可读、关系是否和源码一致、示例是否包含敏感信息，以及修改输入后预览是否仍然成立。

限制与排查

如果预览失败，先把输入缩小到最小完整示例，确认格式语法，再逐段加回内容。很多失败来自不完整文件、缩进错误、缺少图表头，或复制了依赖隐藏上下文的片段。

请把预览结果当作 review 界面，而不是生产事实来源。生成的图表、转换文件、看板和规则示例在进入正式文档或运维流程前仍需要人工确认。

可测试的示例输入

  • Requirements: Users paste diagram code, the app validates syntax, renders a preview, allows export, and suggests related tools.
  • Incident: A customer reports a broken export. Support checks logs, engineering reproduces, a fix is deployed, and support confirms resolution.
  • Architecture: Browser sends source text to a Next.js API route. The API calls DeepSeek, then returns Mermaid code for browser preview.

工具完成度

AI Beta

AI 辅助 Beta

这个工具会调用 AI 生成可编辑源码。建议先本地预览，再修改细节，最后再用于文档或工程流程。

分级不是质量打分，而是告诉用户当前工具更适合稳定导出、深度调试、快速解析，还是 AI 辅助生成。