先给结论用“skill”来画流程图核心价值不是让 AI 多会“画图”而是把一套完整、固定的流程输入格式、图形规范、输出路径、校验规则封装成一个可复用的技能包。以后你只负责描述业务场景AI 自动生成结构清楚、能直接在文档里渲染的流程图代码省掉手搓的重复劳动。这篇文章适合三类人一是每天写文档、写方案、做汇报时需要大量流程图的职场人二是用 AI 写代码或做设计但觉得普通对话里让 AI 画图结果太随机的开发者三是正在研究 Claude Code、Codex 这类 Agent skill 机制想自己定义一套实用技能的人。我会从 skill 的目录结构、SKILL.md 的写法、与 Mermaid / drawio / Graphviz 这些工具的配合再到批量生成和常见坑完整拆一遍。先说一个我实测后的判断普通 prompt 画流程图最大的问题不是“画不出来”而是每次输出的风格不一致。同一个需求今天给你 mermaid明天给你 ASCII后天直接给你一段 PlantUML。能跑但不是稳定可复用。把这套逻辑封装成 skill 之后AI 会严格按照你定义的输入模板、节点命名方式、连线逻辑和输出格式来工作结果可预测维护成本也低。1. 先搞清楚“用 skill 画流程图”到底解决了什么问题1.1 为什么流程图还要单独做一个 skill很多人会觉得我直接跟 ChatGPT 说“帮我把用户登录流程画成流程图”它也能画啊。确实能画但注意普通对话是“一次性的”skill 是“可持续的”。普通对话的问题在于你每次都要重新描述一遍格式要求比如“用 mermaid 语法”“节点用矩形判断用菱形”。模型上下文一长容易忘记之前约定的格式中途就开始自由发挥。你换了工具或换了文档系统之前攒的流程模板就废了。如果团队里有三个人都在让 AI 画流程图三个人得到的输出格式很可能不一样。而 skill 本质上是一个“技能包”它把画流程图的规则固化下来。你可以把它理解成一个安装在 AI 大脑里的模板插件。每次触发时AI 会先读取 skill 文件里的指令再按照里面规定的步骤输出。这样不管是你自己用还是别人拿去用结果都相对统一。1.2 skill 和普通 prompt、MCP 的边界在哪里这里要先厘清几个概念因为最近搜“skill”这个词搜索结果特别乱有“skill 插件”“skill 脚本”“Codex skill”“Agent skill 和 MCP 有什么区别”等等。做一个简单的对比对比项普通 PromptSkillMCPModel Context Protocol解决什么问题告诉 AI 一次性的需求把一套可复用的流程固化让 AI 连接外部工具和数据是否可复用不可复用每次都要写可复用放到指定目录即可可复用通常是一个服务复杂程度最简单中等需要写结构化说明较复杂需要接口或服务典型场景临时画一张图长期稳定地按统一格式画图读取文件、调用 API、操作数据库你画流程图时其实不需要 MCP 那么重的设计。因为 AI 本身就能生成 mermaid 代码只是需要一套规则约束它。所以用 skill 是最合适的轻量、贴近文件系统、不需要额外起服务。1.3 这类 skill 最值得关注的三种能力结合最近网上经常看到的“手搓了一个 skill让 AI 画出我心目中的流程图”“好用的 skill”这些讨论实际落地时我觉得最值钱的是这三种能力格式固定不管输入多乱都能自动整理成统一的流程图语法比如 Mermaid 或 drawio XML。结构校验AI 会先解析你的文字描述提取出“开始、操作、判断、结束”这些节点再判断里面有没有循环、分支、并发最后再生成代码。多端输出输出不只是代码还能直接粘贴到飞书文档、Notion、Obsidian、Trilium 这些支持 Mermaid 渲染的工具里。如果某个 skill 只是把“请你画一个流程图”翻译成“请你用 mermaid 画一个流程图”那意义不大。真正好用的 skill要把你的业务描述拆成一张规范的数据结构图再输出对应代码。2. 手搓一个画流程图 skill 前先把环境和规则定好2.1 哪些模型和客户端支持自定义 skill先说结论目前自定义 skill 在 Claude Code 里支持得最好Codex 也开始支持类似机制其他一些开源 Agent 框架正在跟进。具体到你电脑上怎么用要看你装的是哪款工具。如果是在 Claude Code 里做目录结构很简单~/.claude/skills/ ├── draw-flowchart/ │ ├── SKILL.md │ └── assets/ │ └── example.mmd把技能包放在skills目录下然后启动 Claude Code当对话内容里出现“画流程图”相关的关键词时模型就会自动加载这个 skill。其他工具也类似一般都会要求你把 skill 放在某个约定目录中并且支持一个 Markdown 文件作为说明书。如果你用的是普通 ChatGPT 或者网页版 AI不能直接装 skill。这种情况下你可以把 SKILL.md 的内容复制到自己的“自定义指令”或“项目说明文件”里效果接近但每次切换会话时需要重新加载。我的观点是如果只是自己日常画图网页版自定义指令够用如果想要团队复用和自动化建议直接用支持 skill 的客户端。2.2 画流程图前先想清楚输出格式流程图的输出格式一般有三类Mermaid、drawio XML、PlantUML。如果你要发布到博客或者飞书文档Mermaid 是首选因为它渲染简单很多平台原生支持。但有一个常见坑一些旧版本的飞书文档、线上 Markdown 编辑器并不支持 Mermaid 渲染。热搜里就有“飞书安装什么插件才能解析 markdown 里的 mermaid 流程图”可见很多人卡在这里。遇到这种情况建议在 skill 里加一个规则默认输出 Mermaid 代码同时提供一个辅助渲染方案比如生成一个 SVG 文件或图片方便直接贴到不支持 Mermaid 的文档里。drawio XML 的优点是可以在 draw.io 桌面端和网页端直接编辑适合需要后续手工调整的复杂流程图。但 drawio XML 很长占 token而且不同版本的 drawio 对 XML 的兼容性差异较大。如果你是主要用 drawio 做图的用户可以在 skill 里配置一个输出 drawio 格式的开关。PlantUML 适合喜欢用文本描述流程图的开发者但它的语法比 Mermaid 更“重”学习成本高一些。一般不建议作为默认输出。2.3 按需选择本地渲染工具很多时候AI 只负责生成代码但你需要在本地看到效果。我建议至少装一个渲染工具Mermaid Live Editor浏览器在线渲染调试 mermaid 语法最方便。draw.io支持导入 XML也支持直接编辑。Graphviz如果你更熟悉 dot 语法可以装一个AI 也能生成 dot。VS Code 插件比如 Markdown Preview Mermaid Support写完 Markdown 直接预览。实际使用中我一般先用 Mermaid Live Editor 验证语法然后把代码粘贴到自己的 Markdown 文档里。如果图比较复杂比如有跨层连线、子图、泳道我会再考虑 draw.io 做精细调整。3. 从零写一个能用的“画流程图”skill3.1 Skill 文件的骨架设计一个标准的 SKILL.md 文件核心是“说明文件 示例”。它不一定要写很多代码关键是让 AI 理解这个 skill 是干什么的。什么时候被触发。输入需要哪些信息。输出遵循什么规范。有哪些边界规则。下面是一个通用模板可以在 Claude Code 或其他支持 skill 的框架里直接使用--- name: draw-flowchart description: 根据用户提供的业务流程描述自动生成结构清晰、规范统一的 Mermaid 流程图。 when_to_use: 用户提到“流程图”“流程分析”“业务流程图”“算法流程图”等关键词时。 --- # Draw Flowchart Skill ## 工作流程 1. 提取用户需求中的核心节点。 2. 判断节点类型开始/结束、处理、判断、输入输出、子流程。 3. 识别节点之间的连接关系顺序、分支、循环、并行。 4. 输出 Mermaid 流程图代码。 ## 输出规范 - 必须使用 flowchart TD 或 flowchart LR 作为开头默认使用 TD自上而下。 - 节点命名统一使用英文或拼音不要带空格。 - 节点文本使用中文时放在 [文本] 中。 - 判断节点使用 {文本}必须有两个明确分支。 - 如果存在循环要在连线上标注循环条件。 ## 示例 输入用户输入用户名和密码系统校验成功则进入首页失败则提示错误。 输出 mermaid flowchart TD A[开始] -- B[输入用户名和密码] B -- C{校验是否通过} C -- 是 -- D[进入首页] C -- 否 -- E[提示错误] E -- B注意这里不要把示例写死成唯一答案。AI 需要根据用户输入动态生成。示例只是为了示范格式和命名习惯。 ### 3.2 让 AI 按固定流程生成流程图的完整步骤 写 skill 文件时最重要的是“步骤感”。不能只写“输出 mermaid 代码”否则 AI 还是会偷懒。 我建议在 SKILL.md 里至少规定以下 5 个步骤 **第一步解析输入文本。** 让 AI 把用户描述中的“操作”“判断”“输入输出”“开始结束”标出来。如果输入太模糊先提问澄清不要直接画。 **第二步构建节点列表。** 每个节点都要有唯一 ID。ID 用什么规则我建议用 A、B、C 这种简单字母避免中文空格导致语法报错。 **第三步确认节点类型。** 开始和结束用圆角矩形操作用矩形判断用菱形输入输出用平行四边形。这是流程图的通用语义。 **第四步确认连线逻辑。** 顺序连直接用箭头判断分支要写分支条件循环要有回边。这一步最容易出错建议在 skill 里写明“如果存在循环必须从判断节点向后一个节点连线而不是凭空画一条线”。 **第五步输出代码并附带简短说明。** 说明可以告诉你这个图是怎么组织的方便你检查逻辑。 ### 3.3 建立输入模板别让 AI 瞎猜 想让流程图稳定最好给用户一个输入模板。不是要求用户必须填而是让 AI 在收到模糊描述时主动引导用户补充关键信息。 一个简单好用的输入模板是 text 【流程名称】 【主要步骤】按顺序写用箭头分隔。 【判断节点】单独列出格式为“判断条件是则做什么否则做什么”。 【异常分支】可选。比如用户说“帮我画个登录流程”AI 应该先输出好的我来帮你画登录流程图。在开始之前请确认下面这几个信息 1. 登录后是直接进入首页还是需要二次校验 2. 密码连续错误是否需要锁定账号 3. 是否需要画找回密码的流程这种“主动补全”的行为可以在 skill 文件里用一条规则强制实现如果输入信息不足以支撑画出完整的流程图至少要列出两个待补充问题然后再开始工作。3.4 定义一个本地渲染和粘贴到文档的操作路径很多人画流程图最终要放到文档或 PPT 里。这时光有代码不够还要有图片。在 skill 里可以让 AI 按以下路径操作生成 Mermaid 代码。如果当前环境支持执行命令自动调用 mermaid-cli 将代码渲染成 PNG 或 SVG。如果渲染失败退回输出纯代码并给你一个在线渲染链接。如果用户明确说“我要贴到 Word / PPT / 飞书”优先输出 SVG 格式因为 SVG 是矢量图放大不模糊。这里有一个实测注意点mermaid-cli 在部分 Linux 环境下需要安装 Chromium 才能渲染否则会报错。如果你是 Windows 用户要先确认 Node.js 版本和 puppeteer 的依赖。3.5 skill 文件里的负面约束这段也很重要。很多时候AI 画出来的流程图结构乱不是因为能力不够而是因为它做了不该做的事。你可以在 SKILL.md 里加这些“禁止项”禁止输出过长的 ASCII 艺术图除非用户明确要求。禁止把判断条件写成模糊的“判断”要写清楚具体条件。禁止同时输出多种格式默认只输出 Mermaid。禁止在没有理解业务逻辑前直接画图。禁止省略异常分支除非输入里明确没有异常分支。加了这些约束之后你会发现 AI 输出的质量会明显稳定。本质上是用规则去限制模型的随机性让它更像一个专业画图工具而不是一个闲聊机器人。4. 实际用例从文字描述到完整流程图4.1 示例一用户登录模块流程这个例子的素材来自“用户管理模块流程图”这个热搜词。假设我们要画一个带验证码和找回密码的登录流程理想输出应该是这样flowchart TD A[用户打开登录页] -- B[输入用户名和密码] B -- C[输入验证码] C -- D{验证码是否正确} D -- 否 -- C D -- 是 -- E{用户名密码是否匹配} E -- 否 -- F[提示错误] F -- B E -- 是 -- G[登录成功] G -- H[进入用户中心] G -- I{是否要绑定手机号} I -- 是 -- J[绑定手机号] I -- 否 -- K[完成]这个图看起来简单但里面有几个逻辑细节验证码失败时回到哪一步密码错误时是否要重新输入验证码这些都需要在 skill 的“补全信息”阶段明确。如果用户没提AI 就应该按保守逻辑画或者先问清。4.2 示例二用流程图说明反向传播算法的工作原理“用流程图说明反向传播算法的工作原理”也是热搜词。这种算法类流程图和业务流程图不同节点更偏向计算步骤和数学运算。skill 处理这类场景时要注意两点一是节点命名要体现“前向传播”和“反向传播”两个阶段二是要标出损失函数的计算位置。一个简化版本flowchart TD A[输入训练数据] -- B[前向传播] B -- C[计算输出] C -- D[计算损失函数] D -- E{损失是否小于阈值} E -- 是 -- F[训练结束] E -- 否 -- G[反向传播] G -- H[计算梯度] H -- I[更新权重] I -- B实际机器学习里可能还有 batch 循环、学习率调整、梯度裁剪等细节但流程骨架是对的。所以 skill 不能只是写死模板要让 AI 根据用户输入动态拆解。4.3 示例三Python for 循环结构流程编程教学场景下经常需要画“Python for 循环结构流程图”。这种图对新手理解代码逻辑很有帮助。skill 在这个场景下的表现应该类似flowchart TD A[初始化循环变量] -- B{是否到达序列末尾} B -- 否 -- C[执行循环体] C -- D[更新循环变量] D -- B B -- 是 -- E[退出循环]画这类图时AI 要特别注意“循环条件判断”和“迭代更新”的顺序。很多新手容易把更新变量的位置画错。skill 的规则里可以加一条循环结构必须显式画出“更新迭代变量”这一步并连接回判断节点。4.4 示例四用 Vue3 流程图组件产出前端页面如果你本身就是前端开发者想让 AI 把流程图嵌入到自己的管理系统里可以从“vue3 流程图组件”“react bpmn.js 实现自定义流程图”这些热搜词里找思路。skill 在输出给前端时不只是生成 Mermaid 代码还可以生成对应的前端代码。比如如果是 Vue3可以输出一份基于antv/x6或logicflow的组件代码。如果是 React可以输出基于react-flow的节点定义和连线配置。不过这属于“前端流程图开发”范畴和“画流程图”不完全是一回事。我建议把它做成两个独立 skill一个是文档画图一个是前端组件生成。混在一起容易让 AI 的输出变得不可控。5. 进阶让 skill 适配批量生成和多平台输出5.1 输出 Mermaid 还是 drawio XML建议做成可配置项同一个 skill可能有人需要 Mermaid有人需要 drawio XML。两个格式不能混着输出否则下游工具解析不了。我的做法是在 SKILL.md 里加一个配置项让用户通过命令切换/flow format mermaid /flow format drawio默认 mermaid。当用户执行了/flow format drawio后AI 改用 drawio XML 输出并把 XML 包在代码块里。你复制到 draw.io 后可以在线生成图形再导成 SVG 或 PNG。有一点要注意drawio XML 内容较长输出时容易截断。如果流程图节点超过 20 个AI 很可能会在输出到一半时撞上限制。这种情况下建议改成输出一个.drawio文件到本地然后你自己打开文件编辑。5.2 批量生成流程图时的命名和目录规划批量场景下最容易出问题的不是画图而是输出文件的命名和目录结构。比如你要给项目的用户管理、订单管理、商品管理三个模块分别画流程图。如果让 AI 一次性输出三段代码你会很难分辨哪段对应哪个模块。建议把 skill 扩展成支持“批量任务”模式用户提供一个待生成任务清单每行一个流程名称和描述。AI 先读取所有项确认数量。然后逐项生成每项输出在一个独立代码块里并添加注释标题。最后生成一个汇总的 Markdown 文件文件名为flowchart_summary.md。如果你使用 Claude Code 这类工具skill 还可以让 AI 直接把生成的文件写入指定目录。写入时要注意路径权限建议先检查目录是否存在不存在就创建。5.3 配合 Obsidian、飞书、Trilium 等文档工具的方法热搜里有很多相关词比如“trilium 流程图插件”“飞书安装什么插件才能解析 markdown 里的 mermaid 流程图”。这说明很多人卡在“生成代码后看不懂或渲染不出来”这一步。我总结几条实用经验Obsidian原生支持原生 Mermaid 渲染。在笔记中插入mermaid即可。飞书新版飞书文档部分支持 Mermaid但需要把代码块语言切换成mermaid。如果旧版不支持需要先安装一个“Markdown”或“Mermaid”第三方插件或者直接粘贴图片。Trilium需要安装图流程插件具体在插件市场里搜 mermaid 即可。注意版本匹配。Word/PPT不能直接渲染 mermaid。先用 mermaid-cli 渲染成 PNG/SVG再插入文档。如果你经常这么做建议在 skill 里加一个自动调用 mermaid-cli 的选项。5.4 和 drawio、bpmn.js 这类专业工具怎么取舍如果只是画常规业务流程图Mermaid 完全够用。但如果要做 BPMN 建模、多人协作、流程流转drawio 和 bpmn.js 是更专业的方案。skill 和这些工具不是对立关系。你完全可以让 skill 先生成基于 bpmn.js 所需的 JSON 结构再在 web 项目里渲染。常见思路是使用 skill 输出 BPMN XML 或自定义 JSON。前端使用 bpmn.js 加载并渲染。人工在界面上微调位置和样式。这种模式下AI 提升的是初始设计效率而不是替代专业工具。我的建议是先用 skill 生成结构再在专业工具里做“美观化”和“流程校验”。这样既快又不容易出错。6. 常见坑和排查链路6.1 图画出来结构乱先检查输入文本这是最最常见的现象AI 给你画出了一堆节点但逻辑上连不上或者少了分支。很多人第一反应是“AI 不行”但我排查下来的结论是输入描述太口语化缺少节点边界。比如用户说“登录失败要提示错误错误超过三次就锁定账号”。这里其实包含了两个判断登录失败是判断错误次数超限也是判断。如果输入中没有把“错误次数”这个变量说清楚AI 画出来的图就容易丢失循环或分支。排查顺序先自己读一遍输入把流程里的“动作”和“判断”单独列出来。如果判断条件缺失补充后再让 AI 重画。如果输入本身就含糊先让 skill 的澄清机制运转起来不要直接画。6.2 渲染失败先检查 mermaid 语法Mermaid 报错往往不是 AI 生成能力的问题而是细小的语法问题。比如节点文本中用了英文双引号导致冲突。节点 ID 里出现了空格。分支连线上条件名带有特殊符号。使用了不支持的 shape 类型。遇到渲染失败先把报错信息复制到 mermaid live editor 里它会告诉你具体哪一行有问题。然后按这个顺序排查先看节点 ID再看文本引号再看连线条件。6.3 中文乱码先检查字体和渲染环境如果你用 mermaid-cli 渲染中文图片很可能会遇到乱码。这不是 skill 的问题而是运行环境缺少中文字体。在 Linux 服务器上需要安装fonts-noto-cjk或wqy-microhei。在 Windows 上一般没这个问题因为系统有中文字体。macOS 上也基本正常。如果你在浏览器里看正常导出 PNG 后乱码那说明浏览器渲染时调用了系统字体而 mermaid-cli 运行在无头浏览器环境中没有正确配置字体。解决办法是在 puppeteer 配置里指定--font-render-hintingnone或安装中文字体并重启。6.4 skill 没生效先检查目录、命名和权限有时候你已经把 skill 文件放到了目录里但调用时 AI 没有任何反应。这种问题通常出在目录层级不对。比如 Claude Code 要求放在~/.claude/skills/skill-name/SKILL.md如果你少套了一层模型就找不到。SKILL.md 文件名大小写不对。Linux 下严格区分大小写。文件没权限读取。检查一下chmod权限至少要 644。skill 名称里有中文或空格。建议只用小写字母、数字、连字符。6.5 输出格式不对先看 skill 里的负面约束有没有生效如果你已经写了“默认输出 Mermaid”但 AI 还是输出了 PlantUML那可能是你的 skill 文件描述不够清晰或者模型没有读取到该文件。可以试一个笨办法直接问 AI“你现在有没有加载 draw-flowchart skill如果加载了请输出 SKILL.md 中的输出规范第一条”。它能复述出来就是加载了复述不出来就是没加载成功。如果没加载成功先检查文件名、目录位置以及当前对话是否支持自动加载技能。有些客户端需要手动触发比如输入/load draw-flowchart。7. 最后说几句实在的用 skill 画流程图这件事真正落地时最值得投入的不是刚开始的那次“画图能力”而是后面不断调整规则的过程。我第一次写完 skill 后画出来的普通流程挺顺但一遇到循环、并发和异常分支就露怯。后来我花了半天时间只改几个规则必须显式补全输入信息、必须标记判断分支条件、循环必须回边。改完之后输出质量立刻上了一个台阶。如果你只是偶尔画一张图不一定要专门做 skill。可以先把 SKILL.md 的内容复制到自己的常用提示词里让它变成一段固定的系统指令。等你觉得这个流程确实稳定可靠了再把它正式封装成独立 skill分享给团队或放进自己的工具库。我更建议的路径是先做一个小样本测试集里面放 5 类常见流程图业务流程、算法流程、登录流程、循环结构、异常处理流程。每次修改 skill 后用这 5 个样例跑一遍看输出是否稳定。这个做法可以避免“改一处规则坏另一个场景”的问题。至于画出来的图好不好看那就是另一个话题了。Mermaid 默认样式一般能看但谈不上精美。如果你对视觉效果要求高可以把 skill 的输出对接一个美化后处理脚本或者再导入 draw.io 人工排版。记住一个原则先用 skill 保证逻辑正确再用工具打磨视觉。逻辑错了图再好看也没用。希望这篇内容能帮你少走一点弯路。画流程图这件事省下来的时间先拿来喝杯水挺好的。 AI画流程图总跑偏？用Skill技能包固化规则，轻松稳定输出Mermaid
先给结论用“skill”来画流程图核心价值不是让 AI 多会“画图”而是把一套完整、固定的流程输入格式、图形规范、输出路径、校验规则封装成一个可复用的技能包。以后你只负责描述业务场景AI 自动生成结构清楚、能直接在文档里渲染的流程图代码省掉手搓的重复劳动。这篇文章适合三类人一是每天写文档、写方案、做汇报时需要大量流程图的职场人二是用 AI 写代码或做设计但觉得普通对话里让 AI 画图结果太随机的开发者三是正在研究 Claude Code、Codex 这类 Agent skill 机制想自己定义一套实用技能的人。我会从 skill 的目录结构、SKILL.md 的写法、与 Mermaid / drawio / Graphviz 这些工具的配合再到批量生成和常见坑完整拆一遍。先说一个我实测后的判断普通 prompt 画流程图最大的问题不是“画不出来”而是每次输出的风格不一致。同一个需求今天给你 mermaid明天给你 ASCII后天直接给你一段 PlantUML。能跑但不是稳定可复用。把这套逻辑封装成 skill 之后AI 会严格按照你定义的输入模板、节点命名方式、连线逻辑和输出格式来工作结果可预测维护成本也低。1. 先搞清楚“用 skill 画流程图”到底解决了什么问题1.1 为什么流程图还要单独做一个 skill很多人会觉得我直接跟 ChatGPT 说“帮我把用户登录流程画成流程图”它也能画啊。确实能画但注意普通对话是“一次性的”skill 是“可持续的”。普通对话的问题在于你每次都要重新描述一遍格式要求比如“用 mermaid 语法”“节点用矩形判断用菱形”。模型上下文一长容易忘记之前约定的格式中途就开始自由发挥。你换了工具或换了文档系统之前攒的流程模板就废了。如果团队里有三个人都在让 AI 画流程图三个人得到的输出格式很可能不一样。而 skill 本质上是一个“技能包”它把画流程图的规则固化下来。你可以把它理解成一个安装在 AI 大脑里的模板插件。每次触发时AI 会先读取 skill 文件里的指令再按照里面规定的步骤输出。这样不管是你自己用还是别人拿去用结果都相对统一。1.2 skill 和普通 prompt、MCP 的边界在哪里这里要先厘清几个概念因为最近搜“skill”这个词搜索结果特别乱有“skill 插件”“skill 脚本”“Codex skill”“Agent skill 和 MCP 有什么区别”等等。做一个简单的对比对比项普通 PromptSkillMCPModel Context Protocol解决什么问题告诉 AI 一次性的需求把一套可复用的流程固化让 AI 连接外部工具和数据是否可复用不可复用每次都要写可复用放到指定目录即可可复用通常是一个服务复杂程度最简单中等需要写结构化说明较复杂需要接口或服务典型场景临时画一张图长期稳定地按统一格式画图读取文件、调用 API、操作数据库你画流程图时其实不需要 MCP 那么重的设计。因为 AI 本身就能生成 mermaid 代码只是需要一套规则约束它。所以用 skill 是最合适的轻量、贴近文件系统、不需要额外起服务。1.3 这类 skill 最值得关注的三种能力结合最近网上经常看到的“手搓了一个 skill让 AI 画出我心目中的流程图”“好用的 skill”这些讨论实际落地时我觉得最值钱的是这三种能力格式固定不管输入多乱都能自动整理成统一的流程图语法比如 Mermaid 或 drawio XML。结构校验AI 会先解析你的文字描述提取出“开始、操作、判断、结束”这些节点再判断里面有没有循环、分支、并发最后再生成代码。多端输出输出不只是代码还能直接粘贴到飞书文档、Notion、Obsidian、Trilium 这些支持 Mermaid 渲染的工具里。如果某个 skill 只是把“请你画一个流程图”翻译成“请你用 mermaid 画一个流程图”那意义不大。真正好用的 skill要把你的业务描述拆成一张规范的数据结构图再输出对应代码。2. 手搓一个画流程图 skill 前先把环境和规则定好2.1 哪些模型和客户端支持自定义 skill先说结论目前自定义 skill 在 Claude Code 里支持得最好Codex 也开始支持类似机制其他一些开源 Agent 框架正在跟进。具体到你电脑上怎么用要看你装的是哪款工具。如果是在 Claude Code 里做目录结构很简单~/.claude/skills/ ├── draw-flowchart/ │ ├── SKILL.md │ └── assets/ │ └── example.mmd把技能包放在skills目录下然后启动 Claude Code当对话内容里出现“画流程图”相关的关键词时模型就会自动加载这个 skill。其他工具也类似一般都会要求你把 skill 放在某个约定目录中并且支持一个 Markdown 文件作为说明书。如果你用的是普通 ChatGPT 或者网页版 AI不能直接装 skill。这种情况下你可以把 SKILL.md 的内容复制到自己的“自定义指令”或“项目说明文件”里效果接近但每次切换会话时需要重新加载。我的观点是如果只是自己日常画图网页版自定义指令够用如果想要团队复用和自动化建议直接用支持 skill 的客户端。2.2 画流程图前先想清楚输出格式流程图的输出格式一般有三类Mermaid、drawio XML、PlantUML。如果你要发布到博客或者飞书文档Mermaid 是首选因为它渲染简单很多平台原生支持。但有一个常见坑一些旧版本的飞书文档、线上 Markdown 编辑器并不支持 Mermaid 渲染。热搜里就有“飞书安装什么插件才能解析 markdown 里的 mermaid 流程图”可见很多人卡在这里。遇到这种情况建议在 skill 里加一个规则默认输出 Mermaid 代码同时提供一个辅助渲染方案比如生成一个 SVG 文件或图片方便直接贴到不支持 Mermaid 的文档里。drawio XML 的优点是可以在 draw.io 桌面端和网页端直接编辑适合需要后续手工调整的复杂流程图。但 drawio XML 很长占 token而且不同版本的 drawio 对 XML 的兼容性差异较大。如果你是主要用 drawio 做图的用户可以在 skill 里配置一个输出 drawio 格式的开关。PlantUML 适合喜欢用文本描述流程图的开发者但它的语法比 Mermaid 更“重”学习成本高一些。一般不建议作为默认输出。2.3 按需选择本地渲染工具很多时候AI 只负责生成代码但你需要在本地看到效果。我建议至少装一个渲染工具Mermaid Live Editor浏览器在线渲染调试 mermaid 语法最方便。draw.io支持导入 XML也支持直接编辑。Graphviz如果你更熟悉 dot 语法可以装一个AI 也能生成 dot。VS Code 插件比如 Markdown Preview Mermaid Support写完 Markdown 直接预览。实际使用中我一般先用 Mermaid Live Editor 验证语法然后把代码粘贴到自己的 Markdown 文档里。如果图比较复杂比如有跨层连线、子图、泳道我会再考虑 draw.io 做精细调整。3. 从零写一个能用的“画流程图”skill3.1 Skill 文件的骨架设计一个标准的 SKILL.md 文件核心是“说明文件 示例”。它不一定要写很多代码关键是让 AI 理解这个 skill 是干什么的。什么时候被触发。输入需要哪些信息。输出遵循什么规范。有哪些边界规则。下面是一个通用模板可以在 Claude Code 或其他支持 skill 的框架里直接使用--- name: draw-flowchart description: 根据用户提供的业务流程描述自动生成结构清晰、规范统一的 Mermaid 流程图。 when_to_use: 用户提到“流程图”“流程分析”“业务流程图”“算法流程图”等关键词时。 --- # Draw Flowchart Skill ## 工作流程 1. 提取用户需求中的核心节点。 2. 判断节点类型开始/结束、处理、判断、输入输出、子流程。 3. 识别节点之间的连接关系顺序、分支、循环、并行。 4. 输出 Mermaid 流程图代码。 ## 输出规范 - 必须使用 flowchart TD 或 flowchart LR 作为开头默认使用 TD自上而下。 - 节点命名统一使用英文或拼音不要带空格。 - 节点文本使用中文时放在 [文本] 中。 - 判断节点使用 {文本}必须有两个明确分支。 - 如果存在循环要在连线上标注循环条件。 ## 示例 输入用户输入用户名和密码系统校验成功则进入首页失败则提示错误。 输出 mermaid flowchart TD A[开始] -- B[输入用户名和密码] B -- C{校验是否通过} C -- 是 -- D[进入首页] C -- 否 -- E[提示错误] E -- B注意这里不要把示例写死成唯一答案。AI 需要根据用户输入动态生成。示例只是为了示范格式和命名习惯。 ### 3.2 让 AI 按固定流程生成流程图的完整步骤 写 skill 文件时最重要的是“步骤感”。不能只写“输出 mermaid 代码”否则 AI 还是会偷懒。 我建议在 SKILL.md 里至少规定以下 5 个步骤 **第一步解析输入文本。** 让 AI 把用户描述中的“操作”“判断”“输入输出”“开始结束”标出来。如果输入太模糊先提问澄清不要直接画。 **第二步构建节点列表。** 每个节点都要有唯一 ID。ID 用什么规则我建议用 A、B、C 这种简单字母避免中文空格导致语法报错。 **第三步确认节点类型。** 开始和结束用圆角矩形操作用矩形判断用菱形输入输出用平行四边形。这是流程图的通用语义。 **第四步确认连线逻辑。** 顺序连直接用箭头判断分支要写分支条件循环要有回边。这一步最容易出错建议在 skill 里写明“如果存在循环必须从判断节点向后一个节点连线而不是凭空画一条线”。 **第五步输出代码并附带简短说明。** 说明可以告诉你这个图是怎么组织的方便你检查逻辑。 ### 3.3 建立输入模板别让 AI 瞎猜 想让流程图稳定最好给用户一个输入模板。不是要求用户必须填而是让 AI 在收到模糊描述时主动引导用户补充关键信息。 一个简单好用的输入模板是 text 【流程名称】 【主要步骤】按顺序写用箭头分隔。 【判断节点】单独列出格式为“判断条件是则做什么否则做什么”。 【异常分支】可选。比如用户说“帮我画个登录流程”AI 应该先输出好的我来帮你画登录流程图。在开始之前请确认下面这几个信息 1. 登录后是直接进入首页还是需要二次校验 2. 密码连续错误是否需要锁定账号 3. 是否需要画找回密码的流程这种“主动补全”的行为可以在 skill 文件里用一条规则强制实现如果输入信息不足以支撑画出完整的流程图至少要列出两个待补充问题然后再开始工作。3.4 定义一个本地渲染和粘贴到文档的操作路径很多人画流程图最终要放到文档或 PPT 里。这时光有代码不够还要有图片。在 skill 里可以让 AI 按以下路径操作生成 Mermaid 代码。如果当前环境支持执行命令自动调用 mermaid-cli 将代码渲染成 PNG 或 SVG。如果渲染失败退回输出纯代码并给你一个在线渲染链接。如果用户明确说“我要贴到 Word / PPT / 飞书”优先输出 SVG 格式因为 SVG 是矢量图放大不模糊。这里有一个实测注意点mermaid-cli 在部分 Linux 环境下需要安装 Chromium 才能渲染否则会报错。如果你是 Windows 用户要先确认 Node.js 版本和 puppeteer 的依赖。3.5 skill 文件里的负面约束这段也很重要。很多时候AI 画出来的流程图结构乱不是因为能力不够而是因为它做了不该做的事。你可以在 SKILL.md 里加这些“禁止项”禁止输出过长的 ASCII 艺术图除非用户明确要求。禁止把判断条件写成模糊的“判断”要写清楚具体条件。禁止同时输出多种格式默认只输出 Mermaid。禁止在没有理解业务逻辑前直接画图。禁止省略异常分支除非输入里明确没有异常分支。加了这些约束之后你会发现 AI 输出的质量会明显稳定。本质上是用规则去限制模型的随机性让它更像一个专业画图工具而不是一个闲聊机器人。4. 实际用例从文字描述到完整流程图4.1 示例一用户登录模块流程这个例子的素材来自“用户管理模块流程图”这个热搜词。假设我们要画一个带验证码和找回密码的登录流程理想输出应该是这样flowchart TD A[用户打开登录页] -- B[输入用户名和密码] B -- C[输入验证码] C -- D{验证码是否正确} D -- 否 -- C D -- 是 -- E{用户名密码是否匹配} E -- 否 -- F[提示错误] F -- B E -- 是 -- G[登录成功] G -- H[进入用户中心] G -- I{是否要绑定手机号} I -- 是 -- J[绑定手机号] I -- 否 -- K[完成]这个图看起来简单但里面有几个逻辑细节验证码失败时回到哪一步密码错误时是否要重新输入验证码这些都需要在 skill 的“补全信息”阶段明确。如果用户没提AI 就应该按保守逻辑画或者先问清。4.2 示例二用流程图说明反向传播算法的工作原理“用流程图说明反向传播算法的工作原理”也是热搜词。这种算法类流程图和业务流程图不同节点更偏向计算步骤和数学运算。skill 处理这类场景时要注意两点一是节点命名要体现“前向传播”和“反向传播”两个阶段二是要标出损失函数的计算位置。一个简化版本flowchart TD A[输入训练数据] -- B[前向传播] B -- C[计算输出] C -- D[计算损失函数] D -- E{损失是否小于阈值} E -- 是 -- F[训练结束] E -- 否 -- G[反向传播] G -- H[计算梯度] H -- I[更新权重] I -- B实际机器学习里可能还有 batch 循环、学习率调整、梯度裁剪等细节但流程骨架是对的。所以 skill 不能只是写死模板要让 AI 根据用户输入动态拆解。4.3 示例三Python for 循环结构流程编程教学场景下经常需要画“Python for 循环结构流程图”。这种图对新手理解代码逻辑很有帮助。skill 在这个场景下的表现应该类似flowchart TD A[初始化循环变量] -- B{是否到达序列末尾} B -- 否 -- C[执行循环体] C -- D[更新循环变量] D -- B B -- 是 -- E[退出循环]画这类图时AI 要特别注意“循环条件判断”和“迭代更新”的顺序。很多新手容易把更新变量的位置画错。skill 的规则里可以加一条循环结构必须显式画出“更新迭代变量”这一步并连接回判断节点。4.4 示例四用 Vue3 流程图组件产出前端页面如果你本身就是前端开发者想让 AI 把流程图嵌入到自己的管理系统里可以从“vue3 流程图组件”“react bpmn.js 实现自定义流程图”这些热搜词里找思路。skill 在输出给前端时不只是生成 Mermaid 代码还可以生成对应的前端代码。比如如果是 Vue3可以输出一份基于antv/x6或logicflow的组件代码。如果是 React可以输出基于react-flow的节点定义和连线配置。不过这属于“前端流程图开发”范畴和“画流程图”不完全是一回事。我建议把它做成两个独立 skill一个是文档画图一个是前端组件生成。混在一起容易让 AI 的输出变得不可控。5. 进阶让 skill 适配批量生成和多平台输出5.1 输出 Mermaid 还是 drawio XML建议做成可配置项同一个 skill可能有人需要 Mermaid有人需要 drawio XML。两个格式不能混着输出否则下游工具解析不了。我的做法是在 SKILL.md 里加一个配置项让用户通过命令切换/flow format mermaid /flow format drawio默认 mermaid。当用户执行了/flow format drawio后AI 改用 drawio XML 输出并把 XML 包在代码块里。你复制到 draw.io 后可以在线生成图形再导成 SVG 或 PNG。有一点要注意drawio XML 内容较长输出时容易截断。如果流程图节点超过 20 个AI 很可能会在输出到一半时撞上限制。这种情况下建议改成输出一个.drawio文件到本地然后你自己打开文件编辑。5.2 批量生成流程图时的命名和目录规划批量场景下最容易出问题的不是画图而是输出文件的命名和目录结构。比如你要给项目的用户管理、订单管理、商品管理三个模块分别画流程图。如果让 AI 一次性输出三段代码你会很难分辨哪段对应哪个模块。建议把 skill 扩展成支持“批量任务”模式用户提供一个待生成任务清单每行一个流程名称和描述。AI 先读取所有项确认数量。然后逐项生成每项输出在一个独立代码块里并添加注释标题。最后生成一个汇总的 Markdown 文件文件名为flowchart_summary.md。如果你使用 Claude Code 这类工具skill 还可以让 AI 直接把生成的文件写入指定目录。写入时要注意路径权限建议先检查目录是否存在不存在就创建。5.3 配合 Obsidian、飞书、Trilium 等文档工具的方法热搜里有很多相关词比如“trilium 流程图插件”“飞书安装什么插件才能解析 markdown 里的 mermaid 流程图”。这说明很多人卡在“生成代码后看不懂或渲染不出来”这一步。我总结几条实用经验Obsidian原生支持原生 Mermaid 渲染。在笔记中插入mermaid即可。飞书新版飞书文档部分支持 Mermaid但需要把代码块语言切换成mermaid。如果旧版不支持需要先安装一个“Markdown”或“Mermaid”第三方插件或者直接粘贴图片。Trilium需要安装图流程插件具体在插件市场里搜 mermaid 即可。注意版本匹配。Word/PPT不能直接渲染 mermaid。先用 mermaid-cli 渲染成 PNG/SVG再插入文档。如果你经常这么做建议在 skill 里加一个自动调用 mermaid-cli 的选项。5.4 和 drawio、bpmn.js 这类专业工具怎么取舍如果只是画常规业务流程图Mermaid 完全够用。但如果要做 BPMN 建模、多人协作、流程流转drawio 和 bpmn.js 是更专业的方案。skill 和这些工具不是对立关系。你完全可以让 skill 先生成基于 bpmn.js 所需的 JSON 结构再在 web 项目里渲染。常见思路是使用 skill 输出 BPMN XML 或自定义 JSON。前端使用 bpmn.js 加载并渲染。人工在界面上微调位置和样式。这种模式下AI 提升的是初始设计效率而不是替代专业工具。我的建议是先用 skill 生成结构再在专业工具里做“美观化”和“流程校验”。这样既快又不容易出错。6. 常见坑和排查链路6.1 图画出来结构乱先检查输入文本这是最最常见的现象AI 给你画出了一堆节点但逻辑上连不上或者少了分支。很多人第一反应是“AI 不行”但我排查下来的结论是输入描述太口语化缺少节点边界。比如用户说“登录失败要提示错误错误超过三次就锁定账号”。这里其实包含了两个判断登录失败是判断错误次数超限也是判断。如果输入中没有把“错误次数”这个变量说清楚AI 画出来的图就容易丢失循环或分支。排查顺序先自己读一遍输入把流程里的“动作”和“判断”单独列出来。如果判断条件缺失补充后再让 AI 重画。如果输入本身就含糊先让 skill 的澄清机制运转起来不要直接画。6.2 渲染失败先检查 mermaid 语法Mermaid 报错往往不是 AI 生成能力的问题而是细小的语法问题。比如节点文本中用了英文双引号导致冲突。节点 ID 里出现了空格。分支连线上条件名带有特殊符号。使用了不支持的 shape 类型。遇到渲染失败先把报错信息复制到 mermaid live editor 里它会告诉你具体哪一行有问题。然后按这个顺序排查先看节点 ID再看文本引号再看连线条件。6.3 中文乱码先检查字体和渲染环境如果你用 mermaid-cli 渲染中文图片很可能会遇到乱码。这不是 skill 的问题而是运行环境缺少中文字体。在 Linux 服务器上需要安装fonts-noto-cjk或wqy-microhei。在 Windows 上一般没这个问题因为系统有中文字体。macOS 上也基本正常。如果你在浏览器里看正常导出 PNG 后乱码那说明浏览器渲染时调用了系统字体而 mermaid-cli 运行在无头浏览器环境中没有正确配置字体。解决办法是在 puppeteer 配置里指定--font-render-hintingnone或安装中文字体并重启。6.4 skill 没生效先检查目录、命名和权限有时候你已经把 skill 文件放到了目录里但调用时 AI 没有任何反应。这种问题通常出在目录层级不对。比如 Claude Code 要求放在~/.claude/skills/skill-name/SKILL.md如果你少套了一层模型就找不到。SKILL.md 文件名大小写不对。Linux 下严格区分大小写。文件没权限读取。检查一下chmod权限至少要 644。skill 名称里有中文或空格。建议只用小写字母、数字、连字符。6.5 输出格式不对先看 skill 里的负面约束有没有生效如果你已经写了“默认输出 Mermaid”但 AI 还是输出了 PlantUML那可能是你的 skill 文件描述不够清晰或者模型没有读取到该文件。可以试一个笨办法直接问 AI“你现在有没有加载 draw-flowchart skill如果加载了请输出 SKILL.md 中的输出规范第一条”。它能复述出来就是加载了复述不出来就是没加载成功。如果没加载成功先检查文件名、目录位置以及当前对话是否支持自动加载技能。有些客户端需要手动触发比如输入/load draw-flowchart。7. 最后说几句实在的用 skill 画流程图这件事真正落地时最值得投入的不是刚开始的那次“画图能力”而是后面不断调整规则的过程。我第一次写完 skill 后画出来的普通流程挺顺但一遇到循环、并发和异常分支就露怯。后来我花了半天时间只改几个规则必须显式补全输入信息、必须标记判断分支条件、循环必须回边。改完之后输出质量立刻上了一个台阶。如果你只是偶尔画一张图不一定要专门做 skill。可以先把 SKILL.md 的内容复制到自己的常用提示词里让它变成一段固定的系统指令。等你觉得这个流程确实稳定可靠了再把它正式封装成独立 skill分享给团队或放进自己的工具库。我更建议的路径是先做一个小样本测试集里面放 5 类常见流程图业务流程、算法流程、登录流程、循环结构、异常处理流程。每次修改 skill 后用这 5 个样例跑一遍看输出是否稳定。这个做法可以避免“改一处规则坏另一个场景”的问题。至于画出来的图好不好看那就是另一个话题了。Mermaid 默认样式一般能看但谈不上精美。如果你对视觉效果要求高可以把 skill 的输出对接一个美化后处理脚本或者再导入 draw.io 人工排版。记住一个原则先用 skill 保证逻辑正确再用工具打磨视觉。逻辑错了图再好看也没用。希望这篇内容能帮你少走一点弯路。画流程图这件事省下来的时间先拿来喝杯水挺好的。