就写一篇文章, 经由AI提取架构, 生成源文件, 生成PNG静态图, 生成动态GIF, 带有流动光效, 带有呼吸边框, 带有手写签名, 全程于本地运行, 不仰仗任何外部API。如果你写过技术文章你一定遇到过这个场景花费了3个小时绘制出了一张架构图, 将其放置在了文章当中。视觉效果确实美观, 却是处于“静态的”情形之内。读者看完文字看一眼图滑走了。但如果你的架构图是动的呢一条数据自左边往系统里面 “流入”, 历经三个核心模块, 每个模块逐个呼吸闪烁, 数据流路径之上光点慢慢移动着, 最终从右边 “输出”一项结果, 整个流程于2秒循环的GIF当中完整展现出来了。这不是AE特效不是Figma动画不是Canva模板。这是你自己电脑上一条命令生成的。一、岚叔的4天项目——「动态架构图」重构了技术写作时间来到2026年6月26日, 有位显示署名是 / 岚叔 的、作为独立身份存在的开发者, 在之上构建起了一个能够给人带来新颖之感、令人眼中放光的小型项目:。岚叔动态架构图项目描述很简单为文章、系统和流程生成高级手绘风格动画架构图。但它做的事情一点都不简单。这是一个, 具备特定功能, 关于某个事物的组合, 其包含Codex AI代理技能包以及本地渲染器, 你只需撰写一个JSON规格文档对其进行说明, 而它可一次性输出三样东西:一份JSON Spec → ① Excalidraw 可编辑源文件 ② PNG 静态预览图 ③ 动效GIF —— 带流动光点 模块呼吸闪烁不要, 不要在之后, 不要Figma不要任何外部的应用程序编程接口。二、渲染管线从JSON到高级动画只用了看看这个35KB的渲染脚本干了什么一分钟看懂输出规格画布1210 × 1138 像素 帧率20 FPS 总帧数41 帧 时长2.05 秒固定布局不走样这极有可能是最为聪慧的设计决策, 此渲染器仅仅从事一种布局, 然而却将其做到了极致。┌─────────────────────────────────────────────┐ │ The Internals of [Memory Pack] 岚叔 │ │ 标题前缀 高亮标题 签名 │ ├─────────────────────────────────────────────┤ │ Source / Input │ │ [Codex] [Claude] [Project] [Notes] │ ├──────┬──────┬──────┬──────┬──────┬──────────┤ │ │ │ │ │ │ │ │ Scan │→→→│ Import│→→→│ Index │→→ Ready?→ Report │ │ │ │ │ │ ↑↓ │ │ │ │ │ ←←←循环←←← │ │ │ ├──────┴──────┴──────┴──────┴──────┴──────────┤ │ 左面板 │ 中间面板 │ 右面板 │ │ Memory │ Archive Layers │ Memory │ │ Sources │ Sources/Records/ │ Pack │ │ │ Versions/Manifest │ │ └─────────────────────────────────────────────┘此“固定布局”致使每回输出皆为稳定且可预期的, 你无需忧虑AI随机创造出形形色色、千奇百怪的布局, 每次生成皆维持在同等高的视觉水准之上。真正的动画不是静态图转GIF好多那般被称作“动态图”的, 实则是静态图添加上旋转而已。此项目制作出了真切的动画:更有意思的是项目自带 -- 验证changed_pixels: 84231 ← 帧对比确认真的有变化不是你觉得它在动连像素层面的差异都给你验证了。三、它和你见过的所有画图工具都不一样vs.从本质上来说它属于一款白板工具, 其操作方式是要凭借手动去进行拖拽、还要实施排版以及达成对齐。而此项目所具备的特性是能够实现自动去生成源文件, 也就是当你撰写JSON内容时, 它会协助你将其绘制完成, 并且对于手绘风格字体其中所涉及的“: 5”能够做到完整保留。vs. Draw.io /Draw.io能够制作专业的架构图, 然而, 它不存在动画效果, 不具备编程功能, 也无法由AI驱动。此项目能够被Codex及其他AI代理直接进行调用。vs. /那些工具呈现的是代码生成的示意图形, 然而输出的却是纯粹的静态图形, 其风格较为单一。而这个项目所输出的则已然是高级的暗色之手绘风格, 并且还带有动画GIF。vs. Figma / After这些是专业级工具但学习曲线陡峭。这个项目门槛如此之低git clone https://github.com/cclank/lanshu-animated-architecture-diagram.git cd lanshu-animated-architecture-diagram pip install -r requirements.txt python scripts/render_animated_diagram.py \ --spec assets/default-spec.json \ --outdir outputs \ --basename my-diagram \ --verify三分钟从0到动画GIF。四、它真正的价值给技术写作装了一个引擎我一直在想技术文章配图的下一个形态是什么可偏偏就正好卡在了这样的一个点之上, 此点将“制作动画架构图”转变成为经由一键就能完成的生成情形。适用场景是技术博客的作者, 要去撰写一篇关于微服务架构的分析文章, 接着借助AI提取其中的核心概念, 随后依据这些核心概念来生成动态架构图, 最终达成使得读者能够一眼就看懂数据流向的目的。放在系统架构文档里的内部技术文档中插入一张动态GIF, 新同事看过这张图后就能明白数据怎样流转, 这比阅读500字的描述要快10倍。那个技术课程或者教程, 课程当中教的构架, 是用动态的图去展示在Pod中创建流程的构架, 而这个意味着学员们不用再对着那静态的图去进行“脑补”了。拿产品发布会来说, 针对开源项目, 要在其中配备这么一个动态架构图, 使得访客在看到该动画之际, 就会为其吸引住, 进而 Star 数量乘以二。五、视觉细节高手在看不见的地方使我深受触动, 对于这个项目而言, 存在着一些细节, 倘若将其去除, 便会造成整体水平下降一个档次, 然而平时你大概率未曾留意到这些细节。1. 存在一种颗粒噪点, 也就是 Grain, 画面之上覆盖着两千六百个随机的半透明噪点, 以此来模拟纸张的质感, 使得静态图从此不再具有那种“塑料感”。2. 从画面中心朝着边缘, 四角渐晕致使亮度逐步缓缓变暗, 进而使得视觉自然而然地集中于中心区域。3. 辉光Glow的签名, 在右上角处, 岚叔的签名并非只是简单地将白字放置那里就算了事, 而是有着三重渲染这一情况存在 , 标点符号。4. 辉光外发光, 也就是Glow, 在主要区域外框带有一层呈现高斯模糊效果、模糊值为4px的外发光, 使得面板看上去仿佛是那种“从黑暗之中浮现出来”的样子。诸多细节累加在一起, 致使输出结果并非如同代码所生成的那般样子, 却是有如经设计师亲力亲为所造就的这般情形。六、和AI代理的集成方式这才是未来这个项目不仅是一个脚本还是一个Codex AI代理技能~/codex/skills/lanshu-animated-architecture-diagram/在Codex里你只需要说Use $lanshu-animated-architecture-diagram to turn this article about the RAG pipeline into a premium hand-drawn animated architecture GIF.或者用中文它支持中英文用 $lanshu-animated-architecture-diagram 把这篇文章整理成岚叔动态架构图 输出GIF、PNG和Excalidraw。AI会自动进行阅读你的文章这一行为, 从中提取核心概念, 并且将流程映射到固定布局之下的各个区域以此生成JSON Spec, 进而调用渲染器, 最终输出三份文件。你只需要写文章AI帮你配图。而且是会动的配图。七、4天的项目意味着什么加入往前数几期所做调研的video, 此video的所涉时段同样是4天, 我察觉到了一种饶有趣味的趋势:上出现了一批国产开源项目, 这些项目非常年轻, 并且专注于“AI代理技能”。它们并非追求那种规模庞大且涵盖全面的状态, 并非去蹭取那些热门的话题点, 并非急切地去进行融资。它们所解决的, 是创作者们真实存在的、具体的问题。这说明什么指出这一情况, 即「给AI写指令来进行创作」这般事宜, 已然是从硅谷传递到了中文社区, 另外一点是, 于其首批所制作而成的那些, 质量并非是一丁点都不低哦。八、快速上手# 1. 克隆 git clone https://github.com/cclank/lanshu-animated-architecture-diagram.git cd lanshu-animated-architecture-diagram # 2. 安装依赖只有Pillow pip install -r requirements.txt # 3. 从模板开始按你的需求修改 cp assets/default-spec.json work/my-spec.json # 4. 渲染 python scripts/render_animated_diagram.py \ --spec work/my-spec.json \ --outdir outputs \ --basename my-diagram \ --verify \ --check你就会在 / 里看到:要是你对这篇文章怀有喜爱之情, 那就进行点赞操作、开展收藏行为、作出转发举动给那些正处于写技术文章进程当中的友人。有关技术写作的“配图革命”, 兴许方才甫始。