animated-flow-diagram

我做了一个 agent 技能(claude code、Pi 或其他)，可以把自然语言提示转换成单个自包含的动画 HTML 流程图，带有圆角折线箭头、沿边流动的粒子，以及流程到达时发亮的节点。无依赖，无需构建步骤。

https://github.com/vvilp/animated-flow-diagram

三种主题：

• dark(默认)：带图标的深色玻璃卡片、分组泳道、彗星式粒子。 见 examples/rag-pipeline-dark.html。
• light:在干净明亮的页面上呈现同样的现代风格。见 examples/rag-pipeline-light.html。
• whiteboard:主题面板中的手绘粉彩方框，每次循环交替出现不同的结果。见 examples/rag-pipeline.html。

在提示中加入 "dark"、"light" 或 "whiteboard" 即可选择主题。

安装

在 Claude Code 中：

/plugin marketplace add vvilp/animated-flow-diagram
/plugin install animated-flow-diagram@animated-flow-diagram

或者不通过插件系统：

git clone https://github.com/vvilp/animated-flow-diagram /tmp/afd
cp -R /tmp/afd/skills/animated-flow-diagram ~/.claude/skills/

使用

只需描述你想要的图表：

制作一个动画图表，展示 PR 如何经过 CI:lint 和测试并行运行，然后要么部署到 staging,要么退回给作者。

制作一个并排对比的动画图表，风格与 system1-vs-system2 相同，比较单 agent 与多 agent 的研究工作流。

也可以直接调用：/animated-flow-diagram <description>。

工作原理

skills/animated-flow-diagram/assets/template.html 中包含一个固定的绘制引擎，以及顶部的 SPEC 对象(面板、节点、边、时间线)，每种主题各有一份(template.html、template-dark.html、template-light.html)。Claude 复制模板后只重写 SPEC。样式、布局和时序规则见 SKILL.md,两种主题下的同一图表示例见 examples/。

许可证

MIT