写 Mermaid 总是查语法？我做了个用一句话生成图的小工具 - text2mermaid

一、每次写 Mermaid，我都在浪费 5 分钟

如果你是那种把技术文档也当代码写的人，大概率跟我一样——画图默认走 Mermaid。

Mermaid 有几个几乎不可替代的好处：

• 代码即图，可以存进 markdown、进 git、跟着 PR 走版本
• 原地渲染，GitHub / GitLab / Notion / Obsidian / Hexo 主题几乎都原生支持
• 改起来快，加节点直接敲一行，不用去挪拖线

但每次真要动手，我又都会卡在同一个地方：语法要背。

flowchart 是 A -->|Yes| B，sequence 是 Alice ->> Bob:，ERD 是 USER ||--o{ POST : writes，状态图是 [*] --> Idle——七种图七套语法。写业务代码写到一半、脑子里都是接口设计，然后为了在设计文档里补一张时序图，得停下来去搜 "mermaid sequence activate syntax"。5 分钟没了，节奏也断了。

这不是 Mermaid 的问题，是上下文切换成本的问题。

我试过几种绕开的办法，各有毛病：

方案	好处	毛病
draw.io / excalidraw	好看、拖拽方便	出图不可 diff，改一处要重新导出
手写 Mermaid	与文档节奏对齐	语法上下文切换烦人
ChatGPT / Claude 帮忙	能生成	步骤多；生成的代码经常语法看着对但渲染不出来
从其他工具复制	—	通常没有其他工具能给你 Mermaid

于是想着，干脆自己做一个专门解决这一件事的入口——打开就用，光标已经在输入框里，回车就出预览。

网站地址： text2everything.vip/

这篇文章讲清楚：为什么做、怎么用、以及三个真实用得上的场景。

二、text2mermaid 是什么

一句话：你用自然语言描述一个流程、一段接口时序、一组表关系，它调用大模型生成对应的 Mermaid 代码，实时预览，一键导出 SVG / PNG。

打开 text2everything.vip，你会看到三栏布局：

• 顶部输入区：中英文都行。可以简短到"用户登录流程，带 2FA"，也可以详细到"一个博客系统的 ER 图，users 和 posts 一对多，posts 和 comments 一对多，加上 tags 多对多"
• 左边代码 / 右边预览：⌘/Ctrl + Enter 触发生成，代码与预览同步刷新。可切成纯 Text / 纯 Preview / Split 三种视图
• 图类型菜单：顶部 "Diagram types" 下拉，可切换 flowchart / sequence / ERD / state / class / mindmap / gantt，切换后 AI 按目标图类型生成
• 导出：Copy code（贴回 markdown）/ Export SVG（矢量清晰）/ Export PNG（贴 Slack、微信）

四个示例入口（Login flow with 2FA / OAuth sequence / Blog schema ERD / CI/CD pipeline），懒得想 prompt 就点一下，从改示例开始。

免注册、免费用。

三、来看一个真实例子

场景：我要写一份"用户下单接口设计"的文档，得配一张时序图。

手写 Mermaid 的话我要这样敲（还得先想清楚 sequence 的 participant 顺序和箭头方向）：

 复制代码sequenceDiagram
    participant C as Client
    participant G as API Gateway
    participant O as Order Service
    participant D as DB
    participant K as Kafka    C->>G: POST /orders
    G->>G: 校验鉴权
    G->>O: 转发创建订单
    O->>D: 扣库存 + 写订单
    D-->>O: OK
    O->>K: 发送履约事件
    O-->>G: 200
    G-->>C: 200

问题不是这段代码多难，问题是每次要写它，我都得先在脑子里回忆 ->> 是同步、-->> 是响应，然后回忆 activate/deactivate 该不该加。

在 text2mermaid 里，我只需要输入：

 复制代码用户下单接口时序：
Client 请求 API Gateway，
Gateway 校验鉴权后调 Order Service，
Order Service 扣库存并写 DB，
异步发 Kafka 通知履约

⌘+Enter，右边就出来了。生成的代码不满意（比如缺个环节、命名不合意），直接改左边的代码即可——预览会跟着刷新。

核心节省的不是敲字时间，是那种"停下写代码去查文档"的上下文切换成本。 这一点跟用 Copilot 补全常规代码的收益是一致的：单次省几十秒到几分钟，但心流没断。

四、七种图 · 各自适合什么

类型	用途	直达页
flowchart	业务流程、分支决策	/flowchart-from-text
sequence diagram	接口时序、多服务交互	/sequence-diagram-from-text
erd	数据库表关系、领域模型	/erd-from-text
state diagram	状态机、生命周期	/state-diagram-from-text
class diagram	UML 类图、继承	/class-diagram-from-text
mindmap	主题脑图、大纲	/mindmap-from-text
gantt	项目排期、里程碑	/gantt-from-text

每种图类型都有独立 landing page，如果你已经明确了要画什么图，直接进对应页面输入描述即可，能规避掉"AI 猜错图类型"的情况。

五、三个用得上的实战场景

场景 1：写系统设计文档时补时序图

痛点：文档写到一半发现少张时序图，翻 mermaid 文档 → 敲一版 → 渲染发现不对 → 改 → 循环。

做法：把描述直接甩给 text2mermaid，出图后 Copy code 贴回文档。改也简单，改左边代码即可。

场景 2：评审前快速产出 ER 图

痛点：给别人讲一个新表结构最快的方式是画一张 ERD。表多、关系复杂后，很容易偷懒改用文字。

做法：把 CREATE TABLE 或者领域描述扔进去，选 ERD，出图、Export SVG，贴到评审文档。同事一眼看懂关系。

场景 3：画 CI/CD 或数据流的 flowchart

痛点：分支多的时候 flowchart 会变复杂，subgraph 缩进得盯着来。

做法：用自然语言把节点和分支描述清楚，AI 会自动整理布局。如果嫌它布局不好，切成 Text 视图手动调 direction（TD / LR）。

六、几个想强调的产品原则

• 无需注册、无付费墙。目前主要还是自己在用，也希望更多人试试。
• 代码在你手上。Copy code 出来是纯文本 Mermaid，Export SVG 出来是纯 SVG——都能直接进你的 git 仓库，不锁定在这个网站。
• 对国内友好。域名直连，不需要梯子。
• AI 可能生成语法错的代码——这时候直接在左边编辑器改就好，右侧预览会实时反馈。这也是我为什么不做"生成后自动隐藏代码"的原因：Mermaid 的 debug 本身就发生在代码层，代码要一直可见。

七、后续

近期在做的事情：

• 补齐剩下几种 Mermaid 图（timeline、C4、requirement diagram、user journey）
• 优化每种图类型的 system prompt，减少语法错误
• 支持一键分享（把你的 prompt + 生成的图 保存成可分享的链接）

如果你也是那种画图 = 写 Mermaid 的开发者，把这个网站收藏起来，下次要画图时先来试一句话——顺手就顺手了，不合适再回去手写也不亏。

有想加的图类型、遇到生成不对的 case、或者觉得哪里体验不好，欢迎评论区留言。