OpenClaw与Skill结合实现业务图自动生成

之前我们开发了一款Coze插件，能够将自然语言直接转换为Mermaid业务图。出乎意料的是，这款插件的使用热度超出了预期，这清晰地印证了一个市场趋势：用户对于“用一句话生成流程图、时序图、甘特图”的需求，是真实且迫切的。

然而，随着实践的深入，一个更清晰的思路浮现出来：真正值得沉淀和进一步发展的，并非绑定在某个特定平台上的插件功能，而是“让Mermaid听懂人话”这项核心能力本身。因此，我们决定将其系统性地整理并封装成一个独立的OpenClaw技能：xfc-mermaid。

将这个技能接入绘图Agent后，实际运行效果如何呢？我们来看一个直接的例子。向Agent下达指令：“帮我画一个公司年度预算分配饼图，需要展示以下数据比例，并在图上显示具体的百分比：研发投入 (R&D)：45%；市场营销 (Marketing)：25%；运营成本 (Operations)：15%；人力资源 (HR)：10%；其他储备 (Reserve)：5%。”

稍等片刻，结果便清晰呈现：不仅提供了可在线编辑的图表链接，还支持预览和直接下载结果。

你可以通过编辑链接，实时调整图表数据：

也可以一键下载高清图片到本地：

前言：从插件到标准化技能

在之前的探索中，我们主要解决了“自然语言生成业务图”从零到一的问题，核心是让Mermaid语法能够理解并执行人类的自然语言指令。那一次尝试，更像是一次技术路径的可行性验证。

结果令人鼓舞，用户的实际使用反馈表明，市场对这种更高效、更直观的图表生成方式，存在着明确的需求。

随着在OpenClaw、智能体（Agent）以及自动化流程构建方面投入的精力越来越多，一个更深层的认知逐渐清晰：最有价值的并非某个封闭环境中的特定插件节点，而是“让Mermaid听懂人话”这项可被标准化、模块化调用的底层能力。因此，本次工作的重点，就是将其封装成一个可供各类Agent直接调用的OpenClaw技能。

xfc-mermaid 技能的设计与实现

架构设计思路

在设计xfc-mermaid时，核心目标非常明确：如何将一项灵光一现的插件功能，转化为稳定、可复用的标准化能力。

因此，在架构上，我们摒弃了将所有逻辑堆砌在单一脚本中的做法，而是采用了更契合Agent调用模式的三层结构：前端接收自然语言指令，中台处理核心转换与生成逻辑，后端按需输出不同格式的结果。

这种解耦带来的好处是直观的：职责清晰，维护方便，并且能够灵活适配后续不同的输出场景（如链接、图片、文件流等），使得整个能力链路既健壮又易于扩展。

具体实现拆解

在具体实现上，xfc-mermaid遵循了“轻量、专注”的原则。它并未试图成为一个大而全的图形工具，而是按照OpenClaw技能的最佳实践，拆分为三个独立的脚本，分别负责语法校验、生成可编辑链接以及导出SVG文件。看似简单，但关键在于，它提供了一组可以被Agent反复、标准化调用的原子操作。

接下来，我们进入技能搭建的实战环节。一个标准的Skill目录结构设计如下：

xfc-mermaid/
├── SKILL.md          # 必填：技能使用说明与元数据
├── scripts/          # 必填：可执行代码目录
└── package.json      # 必填：项目依赖与配置

首先，在本地任意目录创建该项目。

SKILL.md：技能说明书

SKILL.md文件堪称整个技能的大脑与使用手册。它的编写并不复杂，核心在于清晰地定义该技能的用途、触发条件、工具调用方式以及输入输出的数据规范，为Agent的准确调用提供蓝图。

核心代码模块

validate.mjs：语法校验守卫
这个模块的核心任务是进行前置语法校验。其思路是先将转换得到的Mermaid代码进行一次“体检”，防止大模型生成的代码看似正确却无法实际执行。最关键的逻辑浓缩如下：

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

generate-link.mjs：生成可编辑链接
该模块负责生成Mermaid Live的可编辑链接。其本质是将代码和配置信息构建成特定状态（state），序列化为令牌（token），最终拼接成可直接在浏览器中打开并继续编辑的URL。核心代码如下：

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 });

export-svg.mjs：导出矢量图形
这个模块专注于将Mermaid代码渲染并导出为SVG格式的矢量图，必要时可直接写入本地文件。其核心执行逻辑如下：

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

这正是xfc-mermaid希望解决的核心问题：它不仅生成一张静态的图表，更是将“从需求到可交互、可再编辑的图表”这一完整流程，沉淀为一项可被任意Agent随时调用的标准化服务能力。其价值不在于单次产出，而在于持续的复用潜力。

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

技能部署上线

技能代码编写完成后，集成到OpenClaw环境的过程十分简便。只需通过任何FTP工具，将整个技能目录上传至OpenClaw所在的服务器即可。

上传完成后，建议在服务器上二次确认目录与文件是否完整存在。

与绘图Agent整合

关注我们之前内容的读者可能知道，我们在单OpenClaw的基础上，细化出了多个专注不同领域的Agent。其中，绘图Agent专门负责处理各类图形生成任务。本次，我们将xfc-mermaid技能集成到了该Agent中。

关键在于修改其SOUL.md文件，明确任务分发逻辑：

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

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

很快，Agent便输出了结果。你可以通过提供的编辑链接，在线调整这份流程图：

也可以直接通过下载链接，获取SVG格式的图片文件：

实践再次证明，OpenClaw结合多Agent的架构方案极具实用性。目前，写作Agent已基本成型，本文正是在其辅助下完成的；而绘图Agent仍在持续完善中，未来有望成为一个高效的“专属图形化生产车间”。