workflow-diagram
根据描述自动生成Mermaid流程图，可视化流程步骤与状态转换
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：workflow-diagram。 它的用途是：根据描述自动生成Mermaid流程图，可视化流程步骤与状态转换 完整的 Skill 内容见：https://321skill.com/skills/workflow-diagram-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请帮我画一个用户登录的流程图，包括输入凭证、验证、成功则跳转主页、失败则提示错误并允许重试。’ 它会生成对应的Mermaid代码并展示流程图。或者
对AI说：‘描述一个订单状态机：从待支付，可以转到已支付或已取消；已支付后可以转到已发货，最后是已完成。’ 它会生成展示状态转换的Mermaid状态图。
介绍
这个Skill解决了开发者和项目管理者在文档或沟通中快速绘制清晰流程图的痛点。它能够将用户对流程、决策点和状态转换的文字描述，自动转换为标准的Mermaid语法代码，并直接渲染成可读的图表。
使用时，用户只需向AI清晰描述工作流程、业务逻辑或系统状态的变化过程。AI会理解这些描述，生成对应的Mermaid代码，并可以即时预览图表效果，方便用户检查和调整。
它非常适合需要频繁绘制架构图、业务流程图、状态机图的前后端开发、全栈开发、产品经理和文档工程师。这些角色在编写技术文档、设计评审或梳理复杂逻辑时，可以借助此工具快速将想法可视化。
建议在描述流程时，尽量使用‘开始’、‘结束’、‘判断’、‘是/否’、‘状态A转到状态B’等明确词汇，有助于AI更准确地理解结构。生成的图表可以复制代码到支持Mermaid的Markdown编辑器或文档工具中使用。
核心特点
与需要手动编写Mermaid代码的工具不同，此Skill通过自然语言交互生成图表，大幅降低了绘制流程图的技术门槛和耗时。它专注于理解流程步骤、决策分支和状态转换这一特定领域，生成的结构化代码准确度较高。
注意事项
不适合生成需要复杂样式定制、非流程类图表（如类图、时序图）或高度依赖图形化布局调整的场景。
常见问题
支持哪些类型的Mermaid图表？
主要专注于流程图（graph TD 或 graph LR），擅长处理步骤、判断和状态转换。
生成的图表代码可以直接用吗？
可以，生成的Mermaid代码可直接粘贴到GitHub、GitLab、Notion等支持Mermaid的平台渲染。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/workflow-diagram-x-2/raw/index.md 读取 workflow-diagram 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/workflow-diagram-x-2/raw/index.md（查看排版版本）