ChatGPT 负责写 Mermaid,这里负责画出来 —— 粘贴、修语法、改图、导出。
回答末尾给你的是一段 Mermaid 代码,你既看不出它长什么样,也看不到图。粘贴到这里就能直接变成图,不用安装任何东西,也不用注册。
常见的原因有三种:标签里的括号没有加引号,箭头的写法是从别的图类型借来的,或者代码块外面多留了一句话。报错会写明是第几行出的问题,而不是给你一块白板。
回去让 ChatGPT 改一个小地方,它常常会把整张图重写一遍。在这里你可以只改那一个节点,也可以用对话模式说一句要求,其余部分原样保留。
导出成 SVG,放进 Notion、Confluence 或者飞书,怎么放大都是清楚的;导出成 PNG,可以直接发到群里或者贴进工单。这两样聊天窗口都给不了你。
把整理好的 Mermaid 源码复制回去,提交进 README 或者 ADR。它是纯文本,在 code review 里能看出这次改了哪一行,而截图做不到这一点。
让 ChatGPT 画图,它给你的是一段文字,不是一张图。多数时候那段文字是 Mermaid —— 一种纯文本的画图语法,长得像「flowchart TD / A[开始] --> B[结束]」。有时候是 ASCII 拼的图,有时候是「第一个框写什么、箭头指向哪」的编号说明。唯独不会是一张你能直接贴进文档的图。
这不是你提示词写得不好。ChatGPT 的对话框里就没有 Mermaid 渲染器。它能用图像模型生成一张图片,但那是一张位图 —— 框里的文字经常是糊的,节点动不了,写错一个字也改不了。只要这张图最后要进设计文档、进 README、进 PPT,走 Mermaid 这条路就是对的,你缺的只是把语法变成图的那一步。这页就是干这个的:把 ChatGPT 给你的那段粘进来,看到图,然后直接改。
想让它输出一段能直接用的 Mermaid,提示词要写得很具体。比如:「只输出 Mermaid 代码,放在一个代码块里,用 flowchart TD,前后不要任何解释。节点文字不超过 8 个字,里面不要出现括号、冒号和引号。」最后那句比看上去重要 —— 标签里没转义的标点,是模型生成的 Mermaid 解析失败的头号原因。
模型写 Mermaid 常犯的错就那四类,认得出来就好办。一是标签里带标点:写成 A[检查用户(管理员?)] 直接把解析器卡住,得给文字加引号。二是自己发明箭头:每种图的箭头写法是固定的,模型偶尔会把别的图的箭头拿过来用。三是一段里混了两种图,比如流程图里出现时序图的箭头。四是代码块外面多留了一句解释的话。这些错误粘贴进来之后,报错会写明是第几行出的问题,并用一个尖号指到出错的位置,而不是给你一块白板。你改掉那一行就可以了,也可以切换到对话模式,用一句话说清楚你要改什么。
图画出来之后就是正常的编辑工作了。分屏的左边是源码,右边是图,你改动其中一边,另一边会立刻跟着变。需要放进文档和 PPT 就导出 SVG,需要发到群里或者贴进工单就导出 PNG,也可以把 Mermaid 源码复制回去,和代码一起提交。如果你根本不想经过 ChatGPT 这一道,这个页面也能直接从一段中文描述生成图,上面那四张示例卡里的写法可以照着用。
关于名称:text2diagram 是独立产品,与 OpenAI 无隶属、无背书、无赞助关系。ChatGPT 和 GPT 是 OpenAI 的商标。这一页讲的是怎么把 ChatGPT 等语言模型写出来的画图语法渲染成图,没有使用 OpenAI 的品牌标识,也不主张与其存在任何关联。
| 环节 | 在 ChatGPT 的聊天窗口里 | 在这个页面上 |
|---|---|---|
| 把一段描述变成 Mermaid | 这一步是它擅长的。你用大白话把流程讲清楚,它就能写出一段 Mermaid 代码,多数时候和你想要的差不了多少。 | 同样的事情这个页面也能做。不过如果 ChatGPT 已经把代码写好了,你就不必再生成一遍,直接粘贴过来就可以。 |
| 看到图本身 | 看不到。聊天窗口把 Mermaid 当成一段代码显示出来,因为它渲染的是 Markdown,不是图。你读到的始终是语法,而不是画出来的形状。 | 代码一进到画布上,图就画出来了。中间不需要复制到别的地方,也不需要再打开第三个工具。 |
| 发现代码是坏的 | 很难发现。少了一个括号的代码和完全正确的代码,在聊天窗口里看起来是一样的。要等到你把它放进某个真正会渲染它的地方,才知道它是坏的。 | 粘贴进来的那一刻就知道了。要么图正常画了出来,要么预览区下方直接给出报错。 |
| 修语法错误 | 你需要把报错贴回去再问一遍。有时候它只补上出错的那一行,有时候它会把整张图重写一遍,连节点的名字都换掉了。 | 报错会写明是第几行出的问题,并用一个尖号指到出错的位置。源码就在画布旁边的编辑器里,你改掉那一行,图会立刻重新画一遍,其余部分保持不动。 |
| 只改一个节点 | 你把要改的地方描述一遍,它还给你的是一张全新的图,其中也包括你本来就已经满意的那些部分。 | 你可以直接改源码里的那一行,也可以切换到对话模式,针对画布上现在这张图说一句你要改什么。 |
| 拿到一个文件 | 聊天窗口里没有这一步。你需要把代码复制出去,再自己找一个能把它渲染出来的地方。 | 预览区的状态栏可以直接导出 SVG 和 PNG,也可以把整理好的 Mermaid 源码复制走。 |
本站与 OpenAI 没有任何隶属关系,也未获得它的背书或赞助。ChatGPT 是 OpenAI 的商标。这张表比较的是同一件事情的前后两个环节,而不是两个互相替代的产品:ChatGPT 写出来的 Mermaid 总需要有个地方渲染成图,这个页面补的就是后面这一段。左边一栏描述的是本文撰写时 ChatGPT 网页版的表现。
对话模式里 AI 会先问你两三个问题 —— 谁参与、发生什么、异常分支怎么走 —— 弄清楚了再动笔。
教程里讲了常用符号、几种基本结构、九条画法规范,还有可以直接拿去用的 prompt 模板和真实业务例子。