dashmotion
将自然语言或Mermaid代码转换为动态技术架构图的Claude技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：dashmotion。 它的用途是：将自然语言或Mermaid代码转换为动态技术架构图的Claude技能。 完整的 Skill 内容见：https://321skill.com/skills/dashmotion/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“用dashmotion绘制我们的微服务订单处理流程：用户请求进入API网关，路由到订单服务，然后同步调用库存服务扣减库存，并异步发送消息到支付服务队列。最后，订单服务将结果写入数据库。” 它会生成一个动态架构图，其中虚线箭头会沿着处理路径流动，清晰展示服务的调用顺序与同步/异步关系。
介绍
Dashmotion 解决了技术文档和演示中静态图表不够直观、难以展示动态流程的问题。它允许你直接用自然语言描述或Mermaid代码，一键生成包含动画效果的HTML/SVG矢量图，生动展示数据流向、请求路径或工作流程。
使用方式极其简单，在支持该技能的AI平台（如Claude）中，直接描述你想绘制的流程图或系统架构即可。例如，输入“用dashmotion画一个简单的三步登录流程”，AI便会调用该技能生成一个包含动画的独立HTML文件。
该技能非常适合需要向团队、客户或社区展示复杂系统交互、工作流或架构演进的技术人员。无论是绘制微服务间的调用链路，还是展示CI/CD流水线的并行与合并步骤，Dashmotion都能让抽象概念变得一目了然。
建议初次使用时，从简单的流程描述开始，逐步增加细节。生成后，你可以继续用自然语言指令（如“让认证路径更突出”、“把Redis放在Postgres旁边”）来精修图表，实现所见即所得的交互式设计。
核心特点
核心区别在于其输出是**自带平滑动画、无任何外部依赖的单一HTML文件**，而非静态图片或需要复杂环境渲染的代码。其“虚线流动”和“光点移动”的动画效果，能直观模拟执行流和请求在系统中的实时移动，这是普通图表生成工具所不具备的。
注意事项
目前主要专注于技术流程图和架构图，不适合生成非技术性的创意图表或复杂的数据可视化（如饼图、柱状图）。
常见问题
生成的动画图能离线使用吗？
可以，输出是单个HTML文件，包含所有SVG和CSS动画代码，无需网络或任何库支持，在任何浏览器打开即可播放循环动画。
支持哪些类型的图表输入？
目前支持自然语言描述，以及Mermaid的流程图（flowchart）、图形（graph）和状态图（stateDiagram-v2）语法。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/dashmotion/raw/index.md 读取 dashmotion 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/dashmotion/raw/index.md（查看排版版本）