尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

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

如何用AI生成可编辑的时序图门
📅 发布时间:2026/8/1 7:58:44

上篇文章中,我直接用自然语言让 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 群里讨论后探究而成。在此对相关粉丝表示感谢:@肖无敌 @源 @追风筝的人 @阳粒橙。欢迎大家私信同名的公众号,一起进群交流。

相关新闻

  • 可灵文字特效生成私有化部署全流程(含NVIDIA Triton推理优化+国产显卡适配补丁),仅限首批200名开发者获取
  • 浙江热缩机哪家专业? - 中媒介
  • 2026年阁楼拆装货架厂家推荐榜单:二层平台/重型钢构/仓库扩容,源头工厂实力解析与选购指南 - 优企名品

最新新闻

  • AI意图识别技术优化:从模型轻量化到工程实践
  • AMD Ryzen调试工具终极指南:免费开源掌控你的硬件性能
  • G-Helper终极指南:5分钟让你的华硕笔记本告别臃肿,性能翻倍!
  • 如何快速掌握Detect-It-Easy:文件安全检测工具的完整指南
  • 2026年马耳他移民避坑指南:MPRP永居申请常见风险点与选择要点 - 资讯综合
  • 南充刑事案件与婚姻家事律师怎么选?2026年本地法律服务机构观察 - 优质品牌商家

日新闻

  • ClickHouse版本管理深度实战:4步构建零风险升级与回滚体系
  • Java 23 种设计模式:从踩坑到精通 | 番外:责任链模式 —— 物流审批流程实战
  • 华硕笔记本性能解放指南:G-Helper轻量级控制工具全面解析

周新闻

  • 大连理工大学与东京大学联手打造的“主动型AI助手“
  • 170.2026年国家级科研瓶颈:超精密单点金刚石切削(SPDT)光学表面生成
  • SongBloom:革命性歌曲生成框架深度解析——如何通过交织自回归与扩散模型创作完整音乐

月新闻

  • ClickHouse版本管理深度实战:4步构建零风险升级与回滚体系
  • Java 23 种设计模式:从踩坑到精通 | 番外:责任链模式 —— 物流审批流程实战
  • 华硕笔记本性能解放指南:G-Helper轻量级控制工具全面解析

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号