之前我写过一个 Coze 插件，专门用来把自然语言转换成 Mermaid 业务图。没想到这个插件后面热度还挺高，用的人不少，也让我更确定了一件事：大家对“一句话生成流程图、时序图、甘特图这类业务图”这件事，确实有真实需求。

不过做着做着我也慢慢发现，真正值得往前再做一步的，不是继续在原来的插件上补功能，而是把这项能力单独沉淀出来。所以这次我把它整理成了一个 OpenClaw skill：xfc-mermaid。

我把 xfc-mermaid 接进了绘图 Agent，实际跑了一遍，效果如下

我先给 Agent 下了一条很直接的指令：

帮我画一个公司年度预算分配饼图，需要展示以下数据比例，并且并在图上显示具体的百分比：研发投入 (R&D)：45%市场营销 (Marketing)：25%运营成本 (Operations)：15%人力资源 (HR)：10%其他储备 (Reserve)：5% 。

等几秒，结果就出来了：既有可编辑链接，也有预览和下载结果。

可以直接进入编辑链接编辑数据：

也可以直接下载图片到本地：

1. 前言

这段时间做 OpenClaw、做 Agent、做自动化流程越来越多之后，我慢慢发现，真正值得沉淀的，不是某个平台里的某个插件节点，而是“让 Mermaid 听懂人话”这项能力本身。所以这次我干脆把它整理成了一个可以被 Agent 直接调用的 OpenClaw skill。

2. xfc-mermaid 设计与实现

★ 2.1. xfc-mermaid 架构设计

这次做 xfc-mermaid，我其实就想解决一件事：怎么把“让 Mermaid 听懂人话”这件事，整理成一个能稳定复用的能力，而不是一次性的插件效果。

所以在结构上，我没有把逻辑都塞进一个大脚本里，而是继续按更适合 Agent 调用的方式去拆。整体上还是三层：前面接收自然语言，中间处理核心能力，最后输出结果。

这样拆的好处很直接：前面负责把人话变成 Mermaid，中间负责把关键动作拆开，后面再按不同场景返回链接、图片或者文件，整个链路会清楚很多。

★ 2.2. xfc-mermaid 实现

在实现上，xfc-mermaid 没有做得很重，而是按 OpenClaw 更好调用的方式拆成了 3 个脚本，分别负责校验、生成编辑链接和导出 SVG。看起来不复杂，但真正顺手的地方就在这里：它不是一次性工具，而是一组可以被 Agent 反复调用的标准动作。

话不多说，正式开始Skill搭建，目录结构设计如下：

xfc-mermaid/├── SKILL.md          # 必填：使用说明 + 元数据├── scripts/          # 必填：可执行代码└── package.json      # 必填：代码版本配置

选择本地任意目录新建skill项目。

2.2.1 SKILL.md设计编写

SKILL.md 可以理解为整个Skill的大脑和说明书。具体怎么写也不复杂，本质上就是先把这个 Skill 的用途、触发条件、工具调用方式和输入输出规则提前写清楚。

2.2.2 代码部分编写

**1.**validate.mjs负责语法校验

先看语法校验这部分，核心思路就是先把 Mermaid 代码过一遍，避免模型生成的内容看起来像对的，实际却跑不起来。最关键的逻辑其实就这几行：

await validateMermaid(code, config);printJson({  ok: true,  valid: true,  config});

**2.**generate-link.mjs负责生成 Mermaid Live 可编辑链接

生成编辑链接这部分，本质上是先把代码和配置整理成 state，再序列化成 token，最后拼成 Mermaid Live 可继续编辑的链接。核心代码如下：

const state = buildState({ code, config });const token = serializeState(state, 'pako');const links = buildLinks({ token, baseUrl: 'https://mermaid.live', mode: 'both' });printJson({ ok: true, token, state, ...links });

**3.**export-svg.mjs 负责导出 SVG

至于导出 SVG，核心就是把 Mermaid 渲染结果输出出来，必要时再写到本地文件里。真正关键的逻辑也就是下面这几行：

const result = await renderMermaidSvg(code, config);if (outputPath) {  await writeOutputFile(outputPath, result.svg);}printJson({ ok: true, svg: result.svg, outputPath });

这也是我这次做 xfc-mermaid 最想解决的点：不是只把图画出来，而是把这件事沉淀成一个能反复复用的标准能力。说白了，真正值钱的不是某一张图，而是这套能力以后还能被继续调用很多次。

3. xfc-mermaid 集成到 OpenClaw 实现绘图工坊

★ 3.1. skill上传到服务器

skill 编写完成后，集成到 OpenClaw 的方式也很简单，只需要找到任意 FTP 工具上传到 OpenClaw 所在服务器即可。

上传成功后二次确认是否存在：

★ 3.2. 整合到绘画Agent

看过我文章的读者都知道，我之前在单Openclaw的基础上细化出了6个Agent，其中有个绘图Agent就是专门绘图的，我将这个Skill集成到了绘图Agent中，修改了其SOUL.md，SOUL.md编写思路：

判断用户输入意图如果用户想生成美食手账图则调用xiaohongshu-card-maker如果用户想让我解读图片则调用xfc-img-understand如果用户想生成业务图则先生成对应mermaid语法再调用xfc-mermaid

集成后，开始绘制流程图测试，输入指令：

请帮我画一个用户登录流程图，包含以下步骤 1. 用户输入账号密码 2. 前端校验格式 3. 发送请求到后端 4. 后端验证用户信息 5. 如果验证成功，生成 token 返回 6. 如果失败，返回错误信息 7. 前端根据结果跳转页面或显示错误

点击编辑链接即可在线编辑流程图：

也可以点击下载链接直接下载svg图片：

不得不说Openclaw+多Agent方案真好用，我的写作Agent已经基本成型了，这篇文章就是它辅助我写的，绘画Agent还在搭建中，未来会变成我的专属绘画工厂。

学AI大模型的正确顺序，千万不要搞错了

🤔2026年AI风口已来！各行各业的AI渗透肉眼可见，超多公司要么转型做AI相关产品，要么高薪挖AI技术人才，机遇直接摆在眼前！

有往AI方向发展，或者本身有后端编程基础的朋友，直接冲AI大模型应用开发转岗超合适！

就算暂时不打算转岗，了解大模型、RAG、Prompt、Agent这些热门概念，能上手做简单项目，也绝对是求职加分王🔋

📝给大家整理了超全最新的AI大模型应用开发学习清单和资料，手把手帮你快速入门！👇👇

学习路线:

✅大模型基础认知—大模型核心原理、发展历程、主流模型（GPT、文心一言等）特点解析
✅核心技术模块—RAG检索增强生成、Prompt工程实战、Agent智能体开发逻辑
✅开发基础能力—Python进阶、API接口调用、大模型开发框架（LangChain等）实操
✅应用场景开发—智能问答系统、企业知识库、AIGC内容生成工具、行业定制化大模型应用
✅项目落地流程—需求拆解、技术选型、模型调优、测试上线、运维迭代
✅面试求职冲刺—岗位JD解析、简历AI项目包装、高频面试题汇总、模拟面经

以上6大模块，看似清晰好上手，实则每个部分都有扎实的核心内容需要吃透！

我把大模型的学习全流程已经整理📚好了！抓住AI时代风口，轻松解锁职业新可能，希望大家都能把握机遇，实现薪资/职业跃迁～

这份完整版的大模型 AI 学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】