Maintainer of this skill?
by bassnova42
RokoAI arch-diagram: a Claude Code & Codex skill that turns any repo or article into an animated architecture diagram (HTML / PNG / MP4 / GIF / Mermaid) with a live trace log
# Add to your Claude Code skills
git clone https://github.com/bassnova42/arch-diagram-skillGuides for using ai agents skills like arch-diagram-skill.
See how arch-diagram-skill compares with popular alternatives.
arch-diagram-skill is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by bassnova42. RokoAI arch-diagram: a Claude Code & Codex skill that turns any repo or article into an animated architecture diagram (HTML / PNG / MP4 / GIF / Mermaid) with a live trace log. It has 50 GitHub stars.
arch-diagram-skill's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/bassnova42/arch-diagram-skill" and add it to your Claude Code skills directory (see the Installation section above).
arch-diagram-skill is primarily written in JavaScript. It is open-source under bassnova42 on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh arch-diagram-skill against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
适用于 Claude Code 和 Codex。
给它一个 GitHub 仓库、一篇技术文章、一份 PDF 或本地项目，Claude Code 或 Codex 会读懂结构，画出一张深色"终端蓝图"风格的架构图。连线上有流动的光点，底部的 log 会在模块之间交换数据时实时加一行。
下面是开源项目 morluto/rea 的架构图，由这个 Skill 读取它的 GitHub 仓库自动生成：
更多例子（文章、GitHub 仓库、需求文档）见文末的 示例。
时间 · 类型 · A → B · 说明。用什么语言提要求，图就是什么语言：
即使原文或源码是另一种语言也一样。代码里的标识符、路径、命令保持原样。图例、状态标签等界面文字内置了中文、英语、日语、韩语、西班牙语、泰语；其他语言由 Claude 按你的语言写出来。
需要 Node ≥ 18 和 Chrome、Chromium 或 Edge。输出视频和 GIF 还需要 ffmpeg（brew install ffmpeg）。
方式一：npm（最简单）
npx @rokoai/arch-diagram install
会装到 ~/.claude/skills/arch-diagram。加 --project 则装到当前项目的 .claude/skills/。更新时再跑一次；卸载用 npx @rokoai/arch-diagram uninstall。
装了 Codex 的话（存在 ~/.codex），会同时装到 ~/.codex/skills/arch-diagram。只装其中一个，可以加 --claude 或 --codex。
在本仓库的 clone 目录里运行
npx @rokoai/arch-diagram …会报arch-diagram: command not found：npm 会把当前目录当成这个包本身，不会把它的命令加进 PATH。请到仓库外的目录运行，或在仓库里直接用node bin/cli.mjs install（参数相同，如--codex）。
方式二：插件。Claude Code 里依次执行：
/plugin marketplace add bassnova42/arch-diagram-skill
/plugin install arch-diagram@arch-diagram
Codex CLI 里：
codex plugin marketplace add bassnova42/arch-diagram-skill
codex plugin add arch-diagram@arch-diagram
方式三：手动拷贝
git clone https://github.com/bassnova42/arch-diagram-skill
cp -R arch-diagram-skill/skills/arch-diagram ~/.claude/skills/
cp -R arch-diagram-skill/skills/arch-diagram ~/.codex/skills/ # Codex
装好后重启 Claude Code 或 Codex。
在 Claude Code 或 Codex 里直接说，比如：
把 https://github.com/plausible/analytics 画成架构图这篇文章画成流程图：<URL>，输出成视频，30 秒把刚才的图输出成图片 / 输出成 mermaid/arch-diagram <仓库或文章地址>，Codex 里输入 $arch-diagram <仓库或文章地址>图的源文件是 <slug>.spec.json，要修改就让 Claude Code 或 Codex 改 spec，再重新生成。也可以用命令行直接操作：
npx @rokoai/arch-diagram build my.spec.json my.html
npx @rokoai/arch-diagram check my.html
npx @rokoai/arch-diagram export my.html my.png my.mp4 --seconds 30
skills/arch-diagram/
SKILL.md 工作流程：读源 → 选结构 → 布局 → 自检 → 导出
assets/ 渲染引擎、样式、模板
scripts/ build / check / export
references/ spec 字段说明、视觉风格
examples/ rea（仓库）、plausible（仓库）、elephant-goldfish（文章）
bin/cli.mjs npm 命令：install / uninstall / build / check / export
来源：Dave Rensin 的文章《Elephants, Goldfish, and the New Golden Age of Software Engineering》
https://drensin.medium.com/elephants-goldfish-and-the-new-golden-age-of-software-engineering-c33641a48874
来源：https://github.com/morluto/rea
来源：Ballet 芭蕾动作评分小程序的需求文档（PRD）和代码。这是私有项目，没有公开链接。
MIT