写流程图这事看起来简单真正动手就烦。早期我用 Visio 和 draw.io 画业务流程图最怕需求变更。产品经理一句话“这里加个分支”整张图的连线、对齐、节点编号几乎全要重排。后来用 AI 写代码、写文档已经够顺手了但让它画图它经常输出一堆零散文本根本没法直接变成流程图。直到我接触了 Claude Code、Codex 这类 AI 编程助手中的skill技能机制才真正找到解决办法。Skill 不是花哨的插件配置而是一套可以沉淀下来的“行为模板”。你可以让 AI 在画流程图前先按统一标准思考先确认类型、再拆节点、再标分支、最后输出固定格式。只要把标准写进 skill 里AI 每次输出都是结构完整的流程图方案连异常分支都不会漏。本文会从 skill 的核心概念讲起区分 skill 与 MCP 的定位再手把手带你写一个“流程图设计”skill。最终目标是你只需要用一句话描述需求AI 就能自动生成包含节点清单、步骤顺序、分支条件的完整流程图方案。如果你是后端开发、项目经理、技术文档写作者或者正在研究 AI 编程技巧这篇文章可以让你少踩很多坑。1. 背景与核心概念1.1 什么是 SkillSkill 在 AI 编程助手中通常指的是“技能包”。你可以把它理解为一份预先写好的“工作手册”里面包含触发条件什么情况下使用这个 skill。处理流程AI 拿到需求后按什么顺序思考。输出规范最终结果用什么格式呈现包含哪些字段。质量约束哪些情况必须处理哪些情况不能省略。举一个容易理解的例子如果你让一个实习生负责画流程图你会告诉他“先问清楚业务场景再用矩形、菱形、箭头来画最后给一份节点说明”。这个“口头指导”其实就是一份隐性的 skill。AI 编程助手里的 skill就是把这个指导过程显式地写进 Markdown 文件让 AI 在特定任务中自动遵循。Skill 文件和普通提示词的区别在于提示词是一次性的每次都写在对话里越长越难维护。Skill 是独立文件可复用、可维护、可多人共享。Skill 可以在后台自动加载相关上下文不需要用户每次重复描述规则。1.2 Skill 如何解决流程图痛点手动绘制流程图的痛点其实不在“画”本身而在“思考”需求边界不清晰画到一半才发现漏了异常分支。图形符号不统一同一张图里开始节点有的用圆角矩形有的用椭圆。条件判断只写了“是 / 否”没有写具体条件值别人根本看不懂。流程图和文档脱节图是图、文是文修改时两边都要改。如果让 AI 只凭一句“生成一个用户登录流程图”它往往只会输出一个非常浅层的结构可能只有“输入账号、点击登录、登录成功”三个步骤。这样的图拿去做开发评审完全不够用。而一个设计良好的流程图 skill会强制 AI 完成以下动作明确流程图类型是业务流程图、算法流程图还是系统流程图。确认使用场景是给开发看还是给产品汇报看。补齐必要节点包括异常分支、回退逻辑、循环边界。输出结构化内容节点编号、类型、说明、步骤列表方便进一步转为绘图代码。换句话说skill 解决的不仅仅是“让 AI 画一张图”而是“让 AI 用专业画图人员的思维把流程想清楚再把信息结构化地抛出来”。2. Skill 与 MCP 的区别关于“agent skill 和 MCP 有什么区别”这个问题我在社区里见过不少人混淆。两者确实容易混因为它们都在增强 AI 的能力但定位完全不同。对比项SkillMCP核心定位定义 AI 的“做事方式”接入外部“工具与数据源”本质指令、流程、行为规范协议、服务接口、工具调用运行方式被识别后作为上下文加载通过客户端调用外部服务典型用途代码审查、文档生成、流程图绘制查数据库、读文件、调用 GitHub API维护方式Markdown 文件为主容易修改需要服务端进程或 SDK对 AI 的影响影响模型如何思考和组织输出影响模型能访问哪些外部资源用一个画流程图的场景来说明如果你希望 AI 在画图前先问清楚场景、统一符号规范、按表格输出节点这是skill的职责。如果你希望 AI 直接操作 draw.io 文件、创建画布、把节点写入 XML这是MCP的职责。如果你希望 AI 先想清楚流程结构再调用 MCP 真正画出来那就是skill MCP的组合。很多团队一上来就想接各种 MCP 服务但实际项目里最先应该沉淀的是 skill。因为流程图的“质量问题”绝大多数不是工具问题而是思考过程不规范的问题。先让 AI 在 skill 的约束下把结构想清楚再去用工具绘制效率会高得多。3. 环境准备与版本说明3.1 工具选型目前支持 skill 机制的 AI 编程助手并不唯一Claude Code、Codex、OpenCode 等工具都推出了类似能力社区里甚至出现了大量“skill 脚本”和“skill 插件”分享。不同工具的加载方式、目录规则会有差异但核心设计思想是相通的。本文以 Claude Code 为例进行演示原因在于它的 skill 机制相对清晰社区讨论也比较多。需要说明的是AI 编程工具版本迭代速度很快你在实际操作时如果遇到目录名、命令名不同以你使用的工具官方文档为准。3.2 技能目录结构在 Claude Code 中自定义 skill 通常放在~/.claude/skills/目录下每个 skill 是一个独立文件夹内部必须包含一个SKILL.md文件。为了保持规范还可以放置参考文档、模板文件等辅助内容。~/.claude/skills/ └── flowchart-designer/ ├── SKILL.md └── reference/ └── chart-standards.md其中SKILL.md技能的核心文件包含技能描述、执行流程、输出规范。reference/辅助参考目录可以放更详细的规范文档。chart-standards.md自定义的流程图标准参考文件。3.3 编辑器配合Skill 本身是 Markdown 文件因此只需要一个支持 Markdown 的编辑器即可VS Code、Typora 都可以。如果你想直接预览 AI 最终生成的绘图代码还可以安装以下插件VS Code支持 Mermaid 预览的插件。draw.io支持导入多种绘图格式的桌面端工具。在线文档工具部分支持 Mermaid 渲染。这里要强调真正核心的不是编辑器而是 skill 文件中的内容设计。编辑器只是辅助预览最重要的还是“AI 是否理解你的绘图标准”。4. 从零手写一个“流程图设计”Skill4.1 设计思路写 skill 之前先想清楚这个技能要解决什么问题。对于流程图场景我认为至少要解决四个问题需求模糊问题AI 不能拿到一句话就直接画图应该先判断需求是否清晰。符号混乱问题开始、结束、处理、判断、数据操作要使用统一的图形符号描述。分支缺失问题异常分支、循环分支经常被省略必须强制 AI 考虑。输出不结构化问题不能只给一段话要输出节点表格和步骤列表方便后续绘制。基于这四个问题我设计了下面这个SKILL.md示例。4.2 编写 SKILL.md在~/.claude/skills/flowchart-designer/SKILL.md中写入以下内容--- name: flowchart-designer description: 根据业务需求自动生成业务流程图、算法流程图或系统流程图可输出流程步骤、节点说明以及 Mermaid 绘图代码。当用户提到“流程图”“流程设计”“用户流程图”“系统流程”时优先使用本技能。 --- # Flowchart Designer 你是一名经验丰富的流程图设计专家负责把用户描述的需求整理成清晰、规范、可直接绘图的流程图方案。 ## 第一步明确需求 在生成流程图之前必须确认以下信息 1. 流程图类型业务流程图、算法流程图、系统架构流程图、时序流程图。 2. 使用场景汇报展示、开发评审、教学说明、系统设计。 3. 核心节点用户是否已经明确关键步骤。 4. 分支条件是否有条件判断、异常分支、循环逻辑。 如果用户提供的信息不足以生成完整流程图先追问 1 到 3 个问题。如果用户说“尽快出图”或者“你看着办”允许你从常识中补齐合理场景但必须在输出中标记假设条件。 ## 第二步设计流程 设计流程时遵循以下规则 - 使用统一流程符号矩形表示处理过程菱形表示判断圆角矩形表示开始或结束箭头表示流转方向。 - 每个节点只表达一个动作或判断不要在一个节点里写多个行为。 - 条件分支必须标明“是 / 否”或具体条件值。 - 循环结构必须标注循环边界。 - 异常分支使用不同颜色或标签区分便于阅读。 ## 第三步输出格式 严格按以下结构输出 1. 流程概述用 2 到 3 句话概括这个流程解决的问题。 2. 节点清单用表格列出节点编号、名称、类型、说明。 3. 流程步骤用有序列表写出完整步骤。 4. 绘图代码如果用户要求 Mermaid则使用标准 flowchart 语法如果用户要求 draw.io则转换为可导入的格式。 ## 禁止行为 - 不要在没有明确说明的情况下省略异常分支。 - 不要直接输出杂乱无章的步骤列表。 - 不要在流程中包含违反安全规范的操作。 - 不要编造用户未提及的系统外部依赖。这个文件的重点在于强制 AI 先做信息确认再输出结构化内容。不要把SKILL.md写得过于简单否则 AI 还是会按照自己的习惯随意输出。4.3 创建参考标准文件为了让 AI 输出的符号、颜色、线型保持一致可以在reference/chart-standards.md中定义更具体的标准# 流程图标准参考 ## 节点符号 - 开始 / 结束圆角矩形 - 处理步骤矩形 - 条件判断菱形 - 数据输入 / 输出平行四边形 - 延时 / 等待半圆矩形 ## 线型规则 - 普通流转实线箭头 - 异常分支虚线箭头 - 回退逻辑返回线段并标注回退原因 ## 颜色建议 - 主流程蓝色 - 判断分支橙色 - 异常处理红色 - 数据操作绿色有了这个参考文件AI 在输出绘图代码时会尽量遵循统一的视觉规范。虽然 AI 不能保证百分之百按颜色绘制但当它转化为绘图代码时至少会在注释中体现这些约定。4.4 加载与验证Skill 写好后加载方式通常分为两步将文件夹放入工具对应目录。重新启动 AI 编程助手或者在对话中直接提到技能名称。验证是否生效可以这样测试在对话中输入一个需求例如“用 flowchart-designer 设计一个订单取消流程”。观察 AI 是否按照SKILL.md中的输出结构进行回答。重点看第一轮输出是否有节点清单、是否有异常分支、是否标注条件。如果 AI 没有按预期执行排查顺序通常是文件名是否叫SKILL.md。目录结构是否放到了正确路径。描述description是否写清楚了触发条件。工具版本是否支持自定义 skill。5. 实战演示设计“用户登录”流程图5.1 需求描述这次我们输入的需求是使用 flowchart-designer 设计一个用户登录流程 包含输入账号密码、校验验证码、调用登录接口、登录失败重试、连续失败锁定账号。这个需求本身已经比较清晰AI 不需要追问太多会直接给出结构化方案。5.2 AI 输出的流程图方案流程概述该流程描述用户从输入账号密码到成功登录或账号被锁定的完整过程。前端负责校验输入和验证码后端负责验证账号密码并针对连续失败次数执行安全策略。节点清单编号节点名称类型说明N1用户发起登录圆角矩形流程开始N2输入账号密码处理接受用户输入N3校验输入是否为空判断为空则提示重新输入N4校验验证码判断验证码错误则刷新验证码N5调用登录接口处理将账号密码发送到服务端N6判断登录结果判断成功则进入主页面N7记录失败次数处理登录失败后记录次数N8判断失败次数是否超过阈值判断连续失败超过 5 次则锁定N9锁定账号处理锁定 24 小时并提示用户N10流程结束圆角矩形登录成功或流程终止流程步骤用户打开登录页输入账号、密码、验证码。前端校验输入是否为空为空则提示并停止。前端校验验证码是否正确错误则刷新验证码并重新输入。前端调用登录接口提交账号密码。后端校验账号密码若正确则用户进入主页。若校验失败失败次数加 1。如果连续失败次数超过 5 次则锁定账号 24 小时。流程结束。从结果来看AI 已经补全了“输入为空”“验证码错误”“锁定账号”这些容易遗漏的异常分支。如果直接让 AI 随意画图这些细节大概率不会自动出现。5.3 换一种输出格式如果希望得到可直接预览的绘图代码可以在对话中追加一句再给我一份 Mermaid 格式的绘图代码流程要求与我上面的结果保持一致。此时 AI 会输出一段标准 flowchart 语法。你可以将这段代码粘贴到支持 Mermaid 的编辑器中预览也可以根据团队使用的工具让 AI 转换成 draw.io 可导入的格式。这里有一个经验不要在一开始就要求 AI 直接输出绘图代码而是先让它输出“节点清单”和“流程步骤”。因为绘图代码的行数较多一旦某个分支需要调整AI 修改代码时容易遗漏节点而表格和列表形式更容易校对逻辑。5.4 如何进一步微调实际项目中登录流程可能比上面这个例子复杂得多比如登录成功后是否要跳转回调地址是否支持第三方登录比如微信、GitHub是否需要验证码二次校验锁定策略是 IP 维度还是账号维度当需求变复杂时你可以直接在对话中补充例如补充一点除了手机号登录还要支持微信扫码登录。微信登录成功后也要走同一套失败次数限制策略。AI 会在现有流程基础上增加新节点并重新输出完整方案。这也是 skill 的优势你不需要每次都把登录流程所有规则重复一遍AI 已经通过SKILL.md预置了基本处理框架你只需要补充增量需求。6. Skill 进阶从“画图”到“自动出图”6.1 多个 Skill 组合使用一个 skill 解决的问题范围越小效果越好。除了“流程图设计”你还可以在同一套环境中放入其他 skill例如需求拆解 skill把产品需求拆成用户故事和验收标准。接口设计 skill自动生成接口文档和数据字典。数据库设计 skill根据流程定义表结构和关系。当项目启动时你可以先让“需求拆解 skill”梳理业务再让“流程图设计 skill”把核心场景画出来最后交给“数据库设计 skill”生成建表语句。每个 skill 各司其职这样整个项目链条会更顺滑。6.2 与 MCP 配合实现自动出图如果你希望 AI 不只是输出流程图方案而是真的操作绘图软件那么可以考虑把 skill 和 MCP 组合起来。一个合理的流程是Skill 负责“想清楚”明确需求、设计节点、确定分支条件。MCP 负责“画出来”通过协议写入画布文件、调整布局、导出图片。这种组合既能保证流程图逻辑正确又能减少人工复制粘贴成本。不过需要提醒的是MCP 服务的稳定性、权限范围都需要充分测试不要在未经授权的生产环境中随意接入。6.3 团队共享 Skill 仓库Skill 本质上是一堆 Markdown 文件天然适合用 Git 管理。团队内部可以建立一个skills仓库约定目录结构例如skills/ ├── flowchart-designer/ ├── code-reviewer/ └── release-notes/每位成员按需拉取到本地对应目录即可使用统一技能。这样做的最大好处是让“AI 的做事标准”也跟着团队规范走而不是每个开发者各自调 prompt。7. 常见问题与排查思路问题现象常见原因解决思路Skill 没有生效目录路径放错或者文件名不是SKILL.md检查是否放在技能目录下确认文件名和大小写AI 输出仍然很随意SKILL.md描述过于简单补充详细的输出格式要求并加“禁止行为”输出的流程图缺少异常分支需求中没有明确提及异常场景在 skill 中强制要求补充异常分支或通过追问提醒绘图代码无法预览输出格式不标准或编辑器不支持确认 Mermaid 语法版本安装预览插件无法找到技能目录工具版本不同目录规则有差异查阅工具官方文档确认当前版本支持的路径AI 一次输入太多节点导致遗漏流程过长AI 上下文容量有限拆分为多个子流程分别生成后再拼接遇到问题时建议先记录现象再复现最小案例。例如单独测试“一个仅包含 5 个节点的流程”看 AI 是否能完全按照 skill 输出。如果最小案例都失败问题大概率出在 skill 本身。8. 最佳实践与工程建议8.1 编写 Skill 的规范建议从实践来看编写高质量 skill 有几点值得注意一个 skill 只负责一类任务不要把“画流程图”和“写接口文档”混在一个文件里。description要写明触发条件让 AI 在合适的场景主动加载。输出格式尽量用表格、列表等结构化形式便于 AI 对齐。必须包含“禁止行为”一节防止 AI 自由发挥。动态规则尽量放入reference文件避免SKILL.md过长。8.2 安全与合规边界Skill 可以加载自定义指令也可能被用于分享。这里要特别提醒不要在企业公用的 skill 中写入内部密码、密钥、数据库连接串。包含敏感业务规则的 skill建议用私有仓库管理不要公开发布。涉及登录、支付、权限校验等流程时AI 生成的方案只能作为设计辅助最终必须由有权限的工程师评审确认。在生产环境引入 MCP 时先做最小权限授权避免 AI 拥有过大的接口操作范围。8.3 生产环境落地建议如果你打算把“流程图 skill”真正落地到团队流程中有两点建议先建立流程图规范文档再根据规范写 skill。很多团队现有流程图不统一直接让 AI 按混乱的规范输出结果自然不可控。让 skill 支持“先结构后渲染”的两段式输出。先输出节点清单和步骤人工确认后再生成绘图代码可以减少返工。9. 总结Skill 的流行本质上是把 AI 从“能对话”推向“能按标准干活”。在流程图这个场景里一个写好的 skill 能解决手工绘制中最烦人的结构混乱、分支缺失、输出随意等问题。你只需要描述需求AI 就会先帮你把流程拆成节点和步骤再按规范输出绘图方案。下一步你可以继续尝试给 skill 增加更多自定义规则比如对接团队内部的标准格式也可以试着把流程图输出直接接到文档管理工具中减少复制成本。不管怎么扩展核心思路是一样的先让 AI 把流程想清楚再让 AI 把图画出来。如果你手头正好有画流程图的痛点不妨照着上面的示例亲手写一个自己的流程图 skill 试试。