DiagramPreview
AI BetaAIDeepSeekLocal fallbackMermaid

AI 图表生成器

描述系统、流程或故障场景,让 AI 生成 Mermaid 源码,并在浏览器中完成预览、修正、导出和文档化。

示例
Mermaid 预览
描述你想要的图表,选择 Mermaid 图表类型,让 AI 生成可编辑源码并实时预览。

下一步可以继续

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

使用方法

  1. 1描述图表受众、范围、必需节点,以及模型不能添加的系统。
  2. 2生成前选择 Mermaid 图类型,让输出匹配任务。
  3. 3生成可编辑 Mermaid 源码后,立即在页面里预览。
  4. 4删除凭空编造的组件,修正标签,并把过大的结果拆成多张图。
  5. 5只有当源码足够可读、便于未来维护时,再导出 SVG 或 PNG。

常见场景

AI 图表草稿文本转 Mermaid架构图 prompt产品流程图事故可视化Mermaid 语法修复

常见问题

会使用哪个 AI 供应商?

服务端会调用 DeepSeek;当 DeepSeek 不可用或未配置时,会使用本地模板兜底。

API Key 会暴露到浏览器吗?

不会。API Key 只在服务端通过环境变量读取。

如何避免 AI 凭空添加架构组件?

列出必需系统,明确说明哪些系统不能出现,并要求只基于给定上下文输出紧凑 Mermaid 图。

AI 返回图表后还要做什么?

先预览,对照原始材料检查,删除不准确节点,缩短标签,并把 Mermaid 源码保留在最终文档里。

用自然语言提示词生成 Mermaid 图表。

描述你想要的图表,选择 Mermaid 图表类型,让 AI 生成可编辑源码并实时预览。

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

Demo:让 AI 生成可 review 的图表

AI 图表生成最好从受众、范围、节点和决策目标开始。模糊 prompt 往往会得到看起来漂亮但无法 review 的图。

  • 说明系统边界和读者是谁。
  • 列出必需服务和数据存储,减少模型脑补。
  • 要求输出可预览、可编辑的 Mermaid。
Create a Mermaid architecture diagram for a B2B billing service. Audience: backend review. Include web app, API gateway, billing service, Stripe, invoice database, queue, worker, email provider, and admin dashboard. Show sync calls and async events.

Review 循环:AI 输出只是草稿

有效流程是生成、预览、纠正,然后才发布。预览阶段会暴露缺失服务、虚构依赖和难读标签。

  • 导出前删除凭空编造的组件。
  • 缩短在预览里换行严重的标签。
  • 用于决策前,对照源码、文档或架构说明验证。
Prompt -> Mermaid source -> Browser preview -> Edit labels -> Export SVG/PNG -> Attach to PR

Prompt 配方:生成前先限制范围

强 prompt 会减少模型发挥空间。先定义受众、图类型、必需节点、禁止假设和输出格式,再要求 Mermaid 源码。

  • 从读者开始:后端评审、产品规格、onboarding 或事故时间线。
  • 明确列出内部系统和外部服务。
  • 要求短标签,不要添加 prompt 之外的组件。
Audience: backend onboarding. Diagram type: flowchart LR. Required nodes: Browser, API Gateway, Auth Service, Orders Service, PostgreSQL, Redis. Do not add payments or analytics. Output Mermaid only.

AI 图表生成器 检查清单

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时,可以使用 AI 图表生成器。用自然语言生成可编辑 Mermaid 图表,并在导出前完成预览和 review。

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

限制与排查

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

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

可测试的示例输入

  • System flow: Create a system architecture flow for a web app with browser, API gateway, auth service, billing service, queue, worker, database, and object storage.
  • API flow: Create a sequence diagram for a client calling an API, API validating auth, reading database records, and returning JSON.
  • Product journey: Create a product onboarding flow with signup, email verification, workspace creation, first diagram preview, export, and feedback.

工具完成度

AI Beta

AI 辅助 Beta

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

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