一、每次写 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 顺序和箭头方向）：
rust
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 里，我只需要输入：
css
用户下单接口时序：
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、或者觉得哪里体验不好，欢迎评论区留言。