data-flow
生成Mermaid时序图，可视化组件间数据流转
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：data-flow。 它的用途是：生成Mermaid时序图，可视化组件间数据流转 完整的 Skill 内容见：https://321skill.com/skills/data-flow-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请为用户登录流程生成一个Mermaid时序图，涉及用户浏览器、前端应用、认证API网关、用户数据库和会话存储服务。’，它会生成对应的Mermaid代码，清晰地展示从用户输入凭证到返回登录结果的完整数据交互序列。你可以将此代码复制到Markdown文件中，渲染出专业的流程图。
介绍
在开发复杂系统时，理解组件间的数据交互流程往往需要耗费大量时间梳理文档或阅读代码。data-flow skill 旨在解决这一痛点，它能自动分析并生成清晰的 Mermaid 时序图，将抽象的数据流动过程可视化，帮助开发者快速把握系统架构和数据链路。
使用时，你只需向AI描述或提供相关的系统组件、API接口或数据流信息，该skill便会调用其能力，生成标准的Mermaid时序图代码。你可以将此代码直接复制到支持Mermaid的Markdown编辑器或文档中，即可渲染出可交互的图表。
该skill非常适合前端、后端及全栈开发工程师，尤其是在进行系统设计评审、编写技术文档、排查数据流问题或向团队讲解架构时。项目经理和产品经理也可借助生成的图表，更直观地理解技术实现细节。
建议在使用时，尽量清晰地定义参与数据交换的各个实体（如用户、前端服务、API网关、数据库等）以及它们之间传递的消息或事件。对于极其复杂的微服务架构，可能需要分模块、分层级进行多次生成，以确保图表的可读性。生成的Mermaid代码可以方便地进行二次调整和美化。
核心特点
专注于生成描述“数据流动”的时序图，而非一般的系统架构图或类图，能清晰展示请求/响应、事件触发等动态交互过程，直接输出可嵌入文档的Mermaid代码，便于集成到开发工作流中。
注意事项
不适合生成静态的系统架构图、类图或ER图，也无法自动从源代码中逆向解析出完整的数据流（需要用户提供清晰的流程描述）。
常见问题
这个skill能直接从我的代码生成图表吗？
不能，它需要你描述数据流过程，然后生成对应的Mermaid代码，无法直接解析源代码。
生成的图表支持哪些Mermaid语法？
主要支持Mermaid的时序图（Sequence Diagram）语法，用于展示组件间消息序列。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/data-flow-x-5/raw/index.md 读取 data-flow 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/data-flow-x-5/raw/index.md（查看排版版本）