Architecture Diagram
smallnest/pigo
Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.
生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
Install Flowchart
$ npx skills add Unclecheng-li/AI_Animation --skill flowchart -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Unclecheng-li/AI_Animation flowchart --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/flowchart .claude/skills/flowchart && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "flowchart" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchart into .claude/skills/flowchart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flowchart", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchartType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Unclecheng-li/AI_Animation --skill flowchart -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Unclecheng-li/AI_Animation flowchart --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/flowchart .agents/skills/flowchart && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "flowchart" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchart into .agents/skills/flowchart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flowchart", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Unclecheng-li/AI_Animation --skill flowchart -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Unclecheng-li/AI_Animation flowchart --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/flowchart .cursor/skills/flowchart && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "flowchart" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchart into .cursor/skills/flowchart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flowchart", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Unclecheng-li/AI_Animation.git --path skills/flowchart--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Unclecheng-li/AI_Animation --skill flowchart -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Unclecheng-li/AI_Animation flowchart --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/flowchart .gemini/skills/flowchart && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "flowchart" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchart into .gemini/skills/flowchart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flowchart", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Unclecheng-li/AI_Animation flowchartInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Unclecheng-li/AI_Animation --skill flowchart -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/flowchart .github/skills/flowchart && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "flowchart" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchart into .github/skills/flowchart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flowchart", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Unclecheng-li/AI_Animation --skill flowchart -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Unclecheng-li/AI_Animation flowchart --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/flowchart .opencode/skills/flowchart && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "flowchart" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/flowchart into .opencode/skills/flowchart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flowchart", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
flowchart- GitHub stars
- 1.4k
- Token cost
- ~616 tokens
- SKILL.md length
- 183 words
- Files
- 11 (incl. references, assets)
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- MIT
At a glance
生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
- Works in 4 steps: 确定演示对象 → 选择图表类型 → 生成标准 → …
- Tasks that involve Diagrams
- SKILL.md covers 你是什么, 支持的图表类型, 核心工作流 and 参考示例
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Flowchart is an agent skill from Unclecheng-li/AI_Animation. 生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
Its SKILL.md is about 620 tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files, including reference files and assets (for example `README.md` and `references/prompts.md`).
It sits in Development, covering Diagrams. The repository describes itself as: 本项目整理了用于生成[炫酷 HTML 动画网页]的 AI Prompts，涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。 The licence is MIT.
When your agent uses it
- Tasks that involve Diagrams
Example prompts
- “/flowchart”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d9c521f. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Flowchart loads about 616 tokens when it runs, and up to ~1.6k if it reads all its reference files. Until then it costs about 27 tokens; SKILL.md has 183 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Unclecheng-li/AI_Animation at commit d9c521f, republished under its MIT licence (© Unclecheng-li). 183 words, ~616 tokens.
Download SKILL.mdSave it as
.claude/skills/flowchart/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.- name
- flowchart
- description
- 生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
- version
- 0.2.0
- triggers
- 流程图, 概念图, 原理演示, 示意图, 神经网络演示, AI 模型可视化, flowchart, flow diagram
Flowchart Skill
你是什么
你是一个专门生成教育/科普类流程图与原理演示动画的专家。每次被激活，你会根据用户描述的概念、流程或模型，生成一个完整的单文件 HTML，用动画直观展示其工作原理和数据流动。
与 dynamic-archify 的区别：
flowchart→ 偏教育/科普，面向视频演示，轻量化，注重"好看 + 直观"dynamic-archify→ 偏工程/架构，面向技术文档，专业级，注重"精确 + 可导出"
支持的图表类型
| 类型 | 说明 | 示例 |
|---|---|---|
| 流程图 | 步骤流程、决策分支、循环 | 攻击链、渗透流程、API 调用链 |
| 概念图 | 概念关系、知识结构、对比 | AI 模型对比、协议分层、架构分层 |
| 原理演示 | 模型/算法/协议的动态工作过程 | RNN 展开、LSTM 门控、TCP 握手 |
| 时序图 | 消息交互、请求响应、调用链 | 客户端-服务端交互、认证流程 |
| 对比图 | 两种/多种方案的并排对比 | RNN vs LSTM、HTTP vs HTTPS |
| 时间线 | 事件发展、版本演进、历史脉络 | 木马发展史、技术演进 |
| 系统概览 | 简化的系统架构、模块关系 | 微服务拓扑、网络拓扑（简化版） |
AI/ML 模型可视化（经典子集）
本 Skill 保留了 AI/ML 模型可视化的完整能力，已有以下示例：
| 模型 | 动画重点 | 示例文件 |
|---|---|---|
| MLP | 前向传播、层间权重流动 | assets/MLP.html |
| RNN | 时间步展开、隐藏状态传递 | assets/RNN.html |
| LSTM | 三门机制动画、cell state 流动 | assets/LSTM-Introduce.html |
| GRU | 简化门控机制、与 LSTM 对比 | assets/GRU-Introduce.html |
| Word2Vec | 词向量生成过程 | assets/word2vec.html |
| One-Hot | 编码缺陷演示 | assets/onehot.html |
| GPU | 并行架构可视化 | assets/GPU.html |
核心工作流
Step 1 — 确定演示对象
从用户输入中识别要演示的内容。如不明确，询问：
- "你想演示什么概念/流程/模型？"
- "演示深度是：概览 / 分步动画 / 详细机制？"
- "偏科普风格还是技术风格？"
如果信息充足，直接生成。
Step 2 — 选择图表类型
根据内容自动选择最合适的图表类型：
| 用户描述关键词 | 图表类型 |
|---|---|
| "步骤/流程/工作流/怎么走" | 流程图 |
| "对比/区别/优劣" | 对比图 |
| "原理/怎么工作/内部机制" | 原理演示 |
| "架构/模块/组成部分" | 系统概览 |
| "交互/请求/调用/握手" | 时序图 |
| "历史/演进/发展" | 时间线 |
| "概念/关系/知识" | 概念图 |
Step 3 — 生成标准
视觉规范（暗黑科技风）：
- 背景：深色（
#0a0a0a到#1a1a2e） - 节点：圆角矩形，蓝/紫/橙渐变，
#4a9eff、#ff6b35、#7c3aed - 连接线：渐变色或发光，箭头带动画
- 高亮：
box-shadow发光 /filter: drop-shadow - 文字：白色主标题，灰色说明文字
动画规范（必须包含）：
- 页面加载后，节点/模块依次出现（不能一次性全部弹出）
- 连接线在节点出现后流动绘制
- 数据流/信息流：沿路径流动的发光粒子或虚线
- 至少一种持续动画（脉冲、流动、呼吸发光）
代码规范：
- 单文件 HTML，内联 CSS/JS
- 代码量 500-1500 行
- 图形用 SVG 或纯 CSS 绘制
- 动画 60fps，避免阻塞
- 不依赖外部框架（可用 Google Fonts CDN）
交互规范（任选其一）：
- 自动播放（带暂停/重置按钮）
- 点击/键盘触发步进
- 鼠标 hover 触发高亮 + 说明弹出
Step 4 — 输出
生成后输出：
- 文件保存路径
- 图表类型 + 包含的节点/步骤数量
- 询问用户是否需要调整
参考示例
详见 assets/ 目录：
assets/RNN.html/assets/LSTM-Introduce.html— 原理演示assets/MLP.html— 流程图风格assets/GPU.html— 系统概览
Prompt 参考见 references/prompts.md
© Unclecheng-li, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 10 other files (references, assets) in skills/flowchart of Unclecheng-li/AI_Animation.
- SKILL.md
- README.md
- assets/GPU.html
- assets/GRU-Introduce.html
- assets/LSTM-1.html
- assets/LSTM-Introduce.html
- assets/MLP.html
- assets/RNN.html
- assets/onehot.html
- assets/word2vec.html
- references/prompts.md
Open the folder on GitHubat commit d9c521f
Compare with similar skills
Flowchart next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Flowchart this skillUnclecheng-li/AI_Animation | 1.4k | — | ~616 | Automated safety check: Pass | MIT | |
| Architecture Diagramsmallnest/pigo | 474 | 1 repos | ~1.6k | Automated safety check: Pass | MIT | |
| HTML Diagramplannotator/effective-html | 3.6k | — | ~678 | Automated safety check: Pass | MIT | |
| Process Flow DiagramCocoon-AI/process-flow-diagram-generator | 102 | — | ~4.3k | Automated safety check: Pass | MIT | |
| Architecture Diagrammateaix/mateclaw | 1.1k | 5 repos | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Whatissuyuan2022/suyuan-skill | 269 | — | ~606 | Automated safety check: Pass | MIT |
Similar skills
HTML Diagram
plannotator/effective-html
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.
Process Flow Diagram
Cocoon-AI/process-flow-diagram-generator
Create polished dark-themed process flow diagrams as self-contained HTML+SVG files.
Architecture Diagram
mateaix/mateclaw
Dark-themed SVG architecture/cloud/infra diagrams as HTML. An agent skill from mateaix/mateclaw.
Whatis
suyuan2022/suyuan-skill
What Is This — explain anything as a picture-first HTML page.
Mobius Architecture Draw
mobius-system/mobius
Analyze a Mobius project repository and generate a single-file HTML/SVG architecture diagram at .imac/generatedfigures/arch.html, with optional image fallbacks.
More from Unclecheng-li/AI_Animation
All 12 skills in this repoArchify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Video Shot Demo Pages
Unclecheng-li/AI_Animation
Produces one self-contained HTML animation page per video shot, sharing a cinematic player base but giving each page its own visual style, sound cues and characters.
Card Theater
Unclecheng-li/AI_Animation
Generates a single-file HTML presentation that pairs a narrated sidebar with a 3D card carousel, for walking through protocols, product features or step-by-step processes.
Phone UI Demo Animations
Unclecheng-li/AI_Animation
Turns a product, lesson or script into a cinematic web animation staged inside a realistic phone interface, with lock screens, chats, settings and a virtual-clock player.
Plotbeat Data Videos
Unclecheng-li/AI_Animation
Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.
Stacked Data Cards Animation
Unclecheng-li/AI_Animation
Generates a single-file HTML animation in which white argument cards pop up in turn, older ones stack to the left and data widgets animate in, timed to a voiceover.
Related
Categories
Questions about Flowchart
What does Flowchart do?
生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。. Flowchart is an agent skill from Unclecheng-li/AI_Animation.
When should I use Flowchart?
Flowchart fits situations like: tasks that involve Diagrams.
How do I install Flowchart in Claude Code?
Run `npx skills add Unclecheng-li/AI_Animation --skill flowchart -a claude-code`. Or copy the skill folder (skills/flowchart in Unclecheng-li/AI_Animation) into .claude/skills/flowchart in your project. Claude Code loads it when a task matches its description.
How do I install Flowchart in Codex?
Run `npx skills add Unclecheng-li/AI_Animation --skill flowchart -a codex`. Or copy the skill folder (skills/flowchart in Unclecheng-li/AI_Animation) into .agents/skills/flowchart in your project. Codex loads it when a task matches its description.
Can I use Flowchart in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Unclecheng-li/AI_Animation --skill flowchart -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flowchart, .gemini/skills/flowchart, .github/skills/flowchart and .opencode/skills/flowchart in your project.
What does Flowchart need to run?
SKILL.md names no scripts, command-line tools or credentials: Flowchart is instructions for the agent only.
Does Flowchart access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Flowchart safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Flowchart use?
Flowchart is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Flowchart use?
About 616 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1k tokens, read only when the agent opens those files.
What are the alternatives to Flowchart?
Skills that share tags, products or a category with Flowchart: Architecture Diagram (smallnest/pigo, 474 stars), HTML Diagram (plannotator/effective-html, 3.6k stars), Process Flow Diagram (Cocoon-AI/process-flow-diagram-generator, 102 stars) and Architecture Diagram (mateaix/mateclaw, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Flowchart?
Unclecheng-li (a GitHub user) maintains it in Unclecheng-li/AI_Animation, which has 1,450 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 5, 2026.
Source: Unclecheng-li/AI_Animation on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.