动态架构图lanshu-animated-architecture-diagram用最简单的方式生成最好看的技术架构动图。黑色画布、手绘字体、模块脉冲高亮、流程线条动态发光……你以为这需要 Figma 设计师不你只需要写一段 JSON然后跑一行命令。这就是 GitHub 上悄悄冒头的开源项目lanshu-animated-architecture-diagram在做的事。01到底是什么项目PART 系统框架图 GIF简单说一个把 JSON 规格文件渲染成动态架构图的工具。输入一个 JSON 配置文件它会同时输出三种格式.excalidraw —— 可二次编辑的矢量源文件.png —— 高质量静态预览图.gif —— 真实动态的动图20fps2 秒循环画风走的是手绘黑板风深色画布、高亮流动的数据流、节点脉冲效果加上右上角的手写签名。这种风格在 Twitter/X 的技术圈里极为流行就是 DailyDoseOfDS 那种调调——一眼就能抓住人。核心卖点真正的纯本地渲染很多同类工具要么要连网调 API要么需要 Chrome 无头浏览器要么依赖 ImageMagick 这些重型工具。这个项目的设计哲学是不依赖任何外部服务不需要 Excalidraw虽然能导出 .excalidraw 格式不需要浏览器自动化不需要 ImageMagick不需要任何远程 API整个渲染引擎基于 Python 3.9 和 Pillow 图像库依赖极轻在本地跑得飞快。使用方式极其简单三步走{ # 1. 克隆项目 git clone https://github.com/cclank/lanshu-animated-architecture-diagram.git cd lanshu-animated-architecture-diagram # 2. 安装依赖就 Pillow 一个 python3 -m pip install -r requirements.txt # 3. 渲染示例图 python3 scripts/render_animated_diagram.py \ --spec assets/default-spec.json \ --outdir outputs \ --basename sample \ --verify }跑完之后outputs/ 目录里就会出现 sample.gif、sample.png 和 sample.excalidraw。02JSON 文件PART 文件长什么样JSON 规格文件长什么样核心结构很清晰主要编辑这几个字段...json { signature: Powers, title: { prefix: 系统, highlight: 架构, subtitle: 数据处理流程 }, inputs: [数据源A, 数据源B, 数据源C], core: { cards: [清洗, 转换, 存储] }, output: 最终结果, left_panel: 源层, center_panel: 处理层, right_panel: 输出层 }支持的图标类型包括folder、file、scan、shield、db、hash、package覆盖了常见技术架构场景。03Codex skillsPART 一键安装codex 自动配置它还是一个 Codex Skill这个项目的另一重身份是OpenAI Codex 技能插件。安装到 Codex 技能目录后你可以直接用自然语言驱动它用 $lanshu-animated-architecture-diagram 把这篇文章整理成岚叔动态架构图输出 GIF、PNG 和 Excalidraw。AI 理解需求自动生成 JSON 规格然后调用渲染器出图——写文章配架构图这个组合工作流真的很丝滑。输出规格默认每张图的参数是分辨率1210 × 1138帧率20 fps帧数41 帧时长约 2.05 秒还内置了 --verify 和 --check 两个质量验证标志前者打印帧差数据确认 GIF 真实有动画后者校验输出文件的尺寸、帧数、动画属性、Excalidraw 格式规范等保证每次输出质量稳定。04场景使用PART 适合的场景适合哪些场景技术博主—— 写架构解析文章时不再需要截图拼图或者找设计师自己就能生成精美动态配图媒体运营—— 手绘黑板风的动图天生适合传播视觉冲击力强系统设计分享—— 开会汇报或者社区分享一张动态架构图胜过千言万语AI Workflow 展示—— Claude Loops、Memory Pack 这类 AI 系统流程正是它 Gallery 里的示例主题写在最后这个项目现在 GitHub 上开源还处于早期阶段但设计思路非常清晰用极简的依赖做出高质量的视觉输出把整个工作流压缩成一行命令。对于经常需要给文章、演讲、分享配架构图的技术人来说值得收藏。更多transformerVITswin tranformer 参考头条号人工智能研究所 v号人工智能研究Suo, 启示AI科技动画详解transformer 在线视频教程
