如何用AI生成可编辑的时序图门
上篇文章中，我直接用自然语言让 Kimi K3 生成了极具美感又足够专业的时序图。
▲ Kimi K3 直接生成的时序图效果
但是，这种方式依然存在一个遗憾：AI 最终生成的，其实只是渲染之后的页面。如果后续想修改其中某个元素，或者想保存为一个原始文件进行归档，都会比较麻烦。
有没有一种方式，可以让 AI 不仅一句话生成时序图，同时还能支持后续修改、编辑和保存呢？
有！我总结了群友的方法加上自我实践，汇报如下。
古今结合法
方法就是，让 AI 先生成包含时序语义的代码，然后再通过专门的渲染工具，把代码转换成最终的时序图。文末我直接总结了 AI 画时序图、AI 画流程图、AI 画系统框架图、AI 画状态图的方法，不想看过程的可以直接拉到底下。
拿 WaveDrom 渲染工具举一个最典型的例子：如果你想画时序图，可以直接告诉 AI：
帮我生成某某协议的时序图，并以 WaveDrom 的 json 文件格式输出。
▲ 一句话让 AI 生成 WaveJSON 代码
那么 AI 最终生成的是一段：包含时序语义的代码。这些代码背后描述的是最纯粹的时序关系。
▲ AI 生成的 WaveJSON 代码
然后，你把这段代码复制到对应的渲染工具里面——我们这个例子里就是 WaveDrom 工具（官方有网页免费版）。工具就可以根据代码里面描述的时序关系，直接生成最终的时序图。
▲ WaveDrom 渲染出的最终时序图
其他方案都类似。例如，有人会先用 AI 生成 Mermaid DSL 代码，然后用 Mermaid 渲染出流程图、时序图；习惯于使用Draw.io的人则用 AI 先生成mxGraph XML代码；IC 设计圈就比较推崇用 AI 生成tikz-timing DSL代码，然后用LaTeX 编译器（pdfLaTeX / XeLaTeX）渲染出矢量时序图；甚至会折腾的大佬会先用 AI 生成Visio Open XML代码，再利用 python 脚本将其编译成 Visio 可支持的矢量流程图源文件。
这类方案总的流程其实都一样：
AI → 生成时序语义代码 → 渲染工具（WaveDrom 等） → 输出图表
▲ 通用流程：代码作为 AI 与渲染工具之间的桥梁
和让 AI 直接生成图表的方法比，中间增加了一层代码 + 专业渲染工具作为桥梁。视觉上不那么花哨，它的优势在于，依旧是让 AI 帮我们画图，但支持 AI 或者人工介入修改，省时间，省 token，稳定。
图表方案汇总
我把几个常见的图表、最适配的渲染工具以及使用方法总结如下：
▎时序图
渲染工具：WaveDrom
用法：先用 AI 生成 WaveJSON 代码，然后把代码给到 WaveDrom，让其渲染为 SVG/PNG
渠道：wavedrom.com/editor.html（在线），VS Code 插件搜 "WaveDrom"
备选：tikz-timing，先用 AI 生成 LaTeX DSL 代码，然后用 pdflatex/xelatex 编译为矢量 PDF，渠道随 TeX Live/MiKTeX 发行版自带或 CTAN 下载
▎流程图 / 状态机
渲染工具：Mermaid
用法：先用 AI 生成 Mermaid DSL 代码，然后把代码给到 Mermaid，让其渲染为 SVG/PNG/PDF
渠道：mermaid.live（在线），GitHub/Notion/Typora/飞书文档（Markdown 原生嵌入），VS Code 插件 "Markdown Preview Mermaid Support"，npm i -g @mermaid-js/mermaid-cli（命令行）
▎系统框图
渲染工具：Draw.io（diagrams.net）
用法：先用 AI 生成 draw.io 代码，然后导入 Draw.io 渲染为可编辑矢量图
渠道：app.diagrams.net（在线），VS Code 插件 "Draw.io Integration"，GitHub jgraph/drawio-desktop/releases（桌面版 Win/Mac/Linux）
图表 Skill
当然，本文介绍的用 AI 画图表的方式，是非常程序化、重复化的行为。你完全可以将其skill 化。这样，以后你想要画任何图表，AI Agent 会自己判断用哪个渲染工具，自己编代码，自己去渲染图表。最后直接给到你一个稳定、可编辑的图表文件。
设计 skill 的方法也很简单，你就把上述"图表方案汇总"发给任意一个 agent，让他帮你设计一个 skill，后面你需要图表的时候都按照这个方案来实现即可。同时如果你有其他约束要求或者有自己喜爱的渲染工具等等，都可以让 Agent 在设计 skill 的时候帮你定制。你也可以使用我这个比较粗糙的版本，后台私信"图表skill"即可。
后记
当下，不管是绘制时序图、流程图，还是系统框图，完全可以通过自然语言让 AI 完全帮我们完成。
轻量级、追求有动画交互、想要极致美感的场景下，你就直接使用最新前沿 AI 模型，例如当前的 Kimi K3，让他生成某某时序图，以 HTML 文件输出即可。你最后截个图完事。
更专业、更细节化、寻求可编辑的场景，就建议本文介绍的"古今结合"法。稍微麻烦，但是稳定，输出的是老登喜欢的科研风图表。
· · ·
本篇文章内容由粉丝留言、私信交流、AI 群里讨论后探究而成。在此对相关粉丝表示感谢：@肖无敌 @源 @追风筝的人 @阳粒橙。欢迎大家私信同名的公众号，一起进群交流。