如何用AI生成可编辑的时序图门

📅 2026/8/1 7:47:15
如何用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 Supportnpm i -g mermaid-js/mermaid-cli命令行▎系统框图渲染工具Draw.iodiagrams.net用法先用 AI 生成 draw.io 代码然后导入 Draw.io 渲染为可编辑矢量图渠道app.diagrams.net在线VS Code 插件 Draw.io IntegrationGitHub jgraph/drawio-desktop/releases桌面版 Win/Mac/Linux图表 Skill当然本文介绍的用 AI 画图表的方式是非常程序化、重复化的行为。你完全可以将其skill 化。这样以后你想要画任何图表AI Agent 会自己判断用哪个渲染工具自己编代码自己去渲染图表。最后直接给到你一个稳定、可编辑的图表文件。设计 skill 的方法也很简单你就把上述图表方案汇总发给任意一个 agent让他帮你设计一个 skill后面你需要图表的时候都按照这个方案来实现即可。同时如果你有其他约束要求或者有自己喜爱的渲染工具等等都可以让 Agent 在设计 skill 的时候帮你定制。你也可以使用我这个比较粗糙的版本后台私信图表skill即可。后记当下不管是绘制时序图、流程图还是系统框图完全可以通过自然语言让 AI 完全帮我们完成。轻量级、追求有动画交互、想要极致美感的场景下你就直接使用最新前沿 AI 模型例如当前的 Kimi K3让他生成某某时序图以 HTML 文件输出即可。你最后截个图完事。更专业、更细节化、寻求可编辑的场景就建议本文介绍的古今结合法。稍微麻烦但是稳定输出的是老登喜欢的科研风图表。· · ·本篇文章内容由粉丝留言、私信交流、AI 群里讨论后探究而成。在此对相关粉丝表示感谢肖无敌 源 追风筝的人 阳粒橙。欢迎大家私信同名的公众号一起进群交流。