恒美微站 Logo 恒美微站
  • 首页
  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心
  • 联系我们

一行 JSON,生成动态架构图 GIF:项目开源,Codex skills 可直接安装

  • 首页
  • 资讯中心
  • /
  • 一行 JSON,生成动态架构图 GIF:项目开源,Codex skills 可直接安装

相关资讯

学习大数据开发 2026/8/12 15:26:00
TVA-World驱动的具身智能鲁棒性研究 2026/8/12 15:26:00
如何快速掌握PoeCharm:流放之路Build规划的完整实战指南 2026/8/12 15:21:00

最新资讯

Vue项目axios二次封装实战:从基础拦截器到高级特性
codex插件“破甲”功能解析:高效提取技术文档与代码片段的利器
纯CSS实现抽屉式侧边导航栏:从设计哲学到代码实战
Latent Box:基于Next.js的AI知识图谱平台架构设计与技术实现方案
大模型应用落地实战:从数据清洗、LoRA微调到私有化部署
从照片到3D:透视重建的技术革命与fSpy-Blender实战解析

今日推荐

终极Navicat重置指南:3种专业方案实现Mac版无限试用
终极免费围棋AI训练指南:如何用KaTrain快速提升你的棋艺水平
3分钟掌握res-downloader:全网视频音频图片资源一键下载终极指南

本周热门

5分钟告别提取码焦虑:baidupankey如何智能破解百度网盘资源锁
如何快速生成中国车牌图片:Python开源工具完整指南
当 LLM 遇见大文档:主流开源项目如何处理上下文超限

本月精选

如何用DamaiHelper实现演唱会门票的智能自动化抢购:完整技术解决方案指南
第4篇:59 倍性能差距的索引瓶颈定位——一次教科书级的全表扫描调优
终极歌词批量下载神器:5分钟解决离线音乐库歌词同步难题

一行 JSON,生成动态架构图 GIF:项目开源,Codex skills 可直接安装

发布时间:2026/8/12 15:26:00
一行 JSON,生成动态架构图 GIF:项目开源,Codex skills 可直接安装 动态架构图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 在线视频教程

关于恒美微站

恒美微站专注于为个体商户、工作室提供极简自助建站服务,让每个人都能轻松拥有专业网站。

快速链接

  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心

服务项目

  • 可视化建站
  • 拖拽编辑
  • 主题定制
  • SEO 优化
  • 网站托管

联系方式

  • 📍 地址:北京市朝阳区建国路 88 号
  • 📞 电话:400-888-8888
  • ✉️ 邮箱:info@hmyw.cn
  • 🕐 时间:周一至周日 9:00-18:00

© 2024 恒美微站 hmyw.cn 版权所有 | 京 ICP 备 12345678 号