岚叔动态架构图：一份 JSON，同时吐出 PNG、GIF 和 Excalidraw

老鬼看这种画图项目，第一眼一般不看动图多炫，先看一个很现实的问题：图画完以后还能不能改。

技术文章里的架构图，最烦的往往不是第一版。是文章快发了，突然要改个模块名、补一条数据流，或者把“大模型”换成“推理服务”。PNG 已经导出了，源文件不知道扔哪了，重新画吧，半小时又没了。

「岚叔动态架构图」这点做得挺直接：给它一份 JSON 描述，一次渲染同时产出.excalidraw、静态.png和动态.gif。GIF 负责放在文章里抓眼球，PNG 用来兼容不支持动画的平台，Excalidraw 源文件则留着继续编辑。不是画完就成死图。

动画也不是在静态图外面套个闪烁滤镜。

连接线上的光点会移动，模块会产生脉冲高亮，整个 GIF 是逐帧生成的。项目里还专门做了 frame-diff 校验，通过比较不同帧的像素变化，确认导出的 GIF 确实在动，不是拿同一张图重复塞四十多帧。默认输出是 1210×1138、20 FPS、41 帧，时长约 2.05 秒。

啧，这种校验挺“开发者”的。

渲染链路也比较干净，Python 3.9 加 Pillow 就能本地跑，不要求安装 Excalidraw，不需要浏览器自动化、ImageMagick 或远程 API。以前做 Demo 最怕的就是画图工具本身又挂一串服务，换台机器证书、字体、环境变量轮流闹脾气。它至少把这层麻烦砍掉了。

不过先别急着吹成万能架构图生成器。

它的布局是刻意收窄的：黑底手绘风，上面放输入，中间放三段核心流程和判断节点，下面再塞上下文、内部处理和最终产物。流程超过三段，需要自己合并；文案太长，也得主动压缩。换句话说，它适合讲清一条主链路，不适合把几十个微服务、端口和依赖全堆进去。

装进 Codex 的 Skill 目录后，直接在对话里点名$lanshu-animated-architecture-diagram就能调用，中文提示词也支持。

经常写 AI 项目拆解、Agent 工作流或者系统设计文章的朋友，可以留着。老鬼会把它用在那种“结构不复杂，但手动画又很费劲”的图上——尤其是文章今天写、明天就要发的场景。

GitHub地址：cclank/lanshu-animated-architecture-diagram