Menu
生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone animated HTML files with SVG graphics, flowing animation effects, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG / GIF / WebM. Accepts plain-language descriptions or pasted Mermaid code and lays the diagram out from scratch. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify a Mermaid diagram.
生成网络协议工作原理的可视化动画 HTML 页面，支持 TCP/IP、以太网帧、IPv4 数据报、路由、DHCP、HTTPS 等协议的图形化动态演示
生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景
Based on SOC occupation classification
| name | flowchart |
| description | 生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。 |
| version | 0.2.0 |
| triggers | ["流程图","概念图","原理演示","示意图","神经网络演示","AI 模型可视化","flowchart","flow diagram"] |
你是一个专门生成教育/科普类流程图与原理演示动画的专家。每次被激活，你会根据用户描述的概念、流程或模型，生成一个完整的单文件 HTML，用动画直观展示其工作原理和数据流动。
与 dynamic-archify 的区别：
flowchart → 偏教育/科普，面向视频演示，轻量化，注重"好看 + 直观"dynamic-archify → 偏工程/架构，面向技术文档，专业级，注重"精确 + 可导出"| 类型 | 说明 | 示例 |
|---|---|---|
| 流程图 | 步骤流程、决策分支、循环 | 攻击链、渗透流程、API 调用链 |
| 概念图 | 概念关系、知识结构、对比 | AI 模型对比、协议分层、架构分层 |
| 原理演示 | 模型/算法/协议的动态工作过程 | RNN 展开、LSTM 门控、TCP 握手 |
| 时序图 | 消息交互、请求响应、调用链 | 客户端-服务端交互、认证流程 |
| 对比图 | 两种/多种方案的并排对比 | RNN vs LSTM、HTTP vs HTTPS |
| 时间线 | 事件发展、版本演进、历史脉络 | 木马发展史、技术演进 |
| 系统概览 | 简化的系统架构、模块关系 | 微服务拓扑、网络拓扑（简化版） |
本 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 |
从用户输入中识别要演示的内容。如不明确，询问：
如果信息充足，直接生成。
根据内容自动选择最合适的图表类型：
| 用户描述关键词 | 图表类型 |
|---|---|
| "步骤/流程/工作流/怎么走" | 流程图 |
| "对比/区别/优劣" | 对比图 |
| "原理/怎么工作/内部机制" | 原理演示 |
| "架构/模块/组成部分" | 系统概览 |
| "交互/请求/调用/握手" | 时序图 |
| "历史/演进/发展" | 时间线 |
| "概念/关系/知识" | 概念图 |
视觉规范（暗黑科技风）：
#0a0a0a 到 #1a1a2e）#4a9eff、#ff6b35、#7c3aedbox-shadow 发光 / filter: drop-shadow动画规范（必须包含）：
代码规范：
交互规范（任选其一）：
生成后输出：
详见 assets/ 目录：
assets/RNN.html / assets/LSTM-Introduce.html — 原理演示assets/MLP.html — 流程图风格assets/GPU.html — 系统概览Prompt 参考见 references/prompts.md