让你的架构图动起来！这个开源 Skill 把 Excalidraw 升级成了动态 GIF

拾遗·Skill精选官 内容创作者 2026-09-09 2347 阅读

做技术内容的人都有一个共同的痛点：架构图画来画去总是很丑。

PlantUML 太工程师，Mermaid 缺少质感，Excalidraw 手绘风格很好但每次要手动排版——而且，以上所有工具做出来的图都是静态的，读者看到的就是一张死图。

今天挖到一个很有意思的 Skill，叫 lanshu-animated-architecture-diagram（岚叔动态架构图）。光看名字里的”动态”两个字就知道它想解决什么问题——让架构图动起来。

它能做什么

这个 Skill 的核心逻辑很简单：给一个 JSON 描述文件，自动渲染出三种输出：

  • Excalidraw 文件（.excalidraw）——可编辑，文字直接在 Excalidraw 里改
  • 静态 PNG ——适合直接插入文章和 PPT
  • 动态 GIF ——带流动高亮、脉冲模块，手绘质感，黑底白线风格

看它的默认渲染参数：1210×1138，20fps，41帧，2.05秒。不是一个花哨的动画，就是恰到好处的一段微动——模块呼吸发光、连接线流动，读者能一眼看出数据流向和系统边界。

技术细节

底层用 Python 渲染，依赖 Pillow，不需要 Excalidraw 环境、浏览器自动化或 ImageMagick。本地跑，不需要任何远程 API。

渲染之后带一个 --verify 参数，会抽样检测帧间像素差异，打印出来证明 GIF 是真实在动的，不是静态图重复播放。这点挺有意思——它不只给你一个 GIF，还顺带证明了动画的真实性。

使用方式

安装到 Codex：

git clone https://github.com/cclank/lanshu-animated-architecture-diagram.git
cd lanshu-animated-architecture-diagram
pip install -r requirements.txt
# 放到 Codex skills 目录
cp -r . ~/.codex/skills/lanshu-animated-architecture-diagram

然后在 Codex 里调用：

用 $lanshu-animated-architecture-diagram 把这篇文章整理成岚叔动态架构图，输出 GIF、PNG 和 Excalidraw。

或者从模板开始自己写 spec：

cp assets/default-spec.json work/my-diagram-spec.json
python3 scripts/render_animated_diagram.py 
  --spec work/my-diagram-spec.json 
  --outdir outputs 
  --basename my-diagram 
  --verify

spec 文件里可以改的字段很清晰：signature、title、inputs、core.cards、left/center/right_panel，支持 folder/file/scan/shield/db/hash/package 等图标 key。上手成本很低。

适合谁用

  • 写技术博客/公众号的同学：发出来的图比静态截图高一个档次
  • 做系统设计分享的工程师：GIF 在社媒上传播效果远好于静态图
  • AI 编码工具玩家：本身就兼容 Codex/Claude Code 生态，装上就能用

目前 960 stars，更新频率很健康（昨天刚更新），MIT 协议。

GitHub 链接收好：https://github.com/cclank/lanshu-animated-architecture-diagram

总结一下：这个 Skill 的价值不在于”让 AI 帮你画图”——那件事 Excalidraw + Claude 也能做。它的独特价值是把架构图的输出形态从静态升级到动态，而且整个过程本地跑、可验证、输出三种格式。如果你经常需要做技术演示或写需要配图的技术内容，这是目前这个细分方向上最完整的一个开源方案。

GitHub: https://github.com/cclank/lanshu-animated-architecture-diagram

评论区

0 条评论

登录后可评论。

拾遗·Skill精选官 2347 阅读