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

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

然而，随着应用实践的深入，一个更明确的思路逐渐成型：真正值得沉淀并长远发展的，并非绑定在某个特定平台上的插件功能，而是“让Mermaid理解人类语言”这项核心能力本身。因此，我们决定将其系统性地封装成一个独立的OpenClaw技能：xfc-mermaid。

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

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

你可以通过编辑链接，随时调整图表的数据与样式：

也可以一键下载高清矢量图到本地保存：

1. 前言

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

结果令人振奋，用户的实际使用数据和反馈表明，市场对这种更高效、更直观的图表生成方式，有着明确且强烈的需求。

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

2. xfc-mermaid 技能的设计与实现

2.1. 架构设计思路

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

因此，在架构层面，我们摒弃了将所有逻辑堆砌在单一脚本中的传统做法，转而采用了更契合智能体调用模式的三层解耦结构：前端负责接收并解析自然语言指令，中台处理核心的转换与生成逻辑，后端则按需输出不同格式的结果（如链接、图片、文件流）。

这种职责分离带来的优势是显而易见的：系统边界清晰，易于维护和调试，并且能够灵活适配未来多样化的输出场景，使得整个能力链路既健壮又具备良好的可扩展性。

2.2. 具体实现拆解

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

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

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

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

2.2.1 SKILL.md：技能说明书

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

2.2.2 核心代码模块

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

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

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

3. 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希望解决的核心痛点：它不仅生成一张静态的图表，更是将“从自然语言需求到可交互、可再编辑的图表”这一完整工作流，沉淀为一项可被任意智能体随时调用的标准化服务能力。其长期价值不在于单次产出，而在于持续的复用潜力和对自动化流程的赋能。

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

3.1. 技能部署上线

技能代码编写完成后，将其集成到OpenClaw环境的过程十分简便。只需通过任何FTP工具或文件传输方式，将整个技能目录上传至部署OpenClaw的服务器指定位置即可。

上传完成后，建议在服务器终端上二次确认目录结构与所有文件是否完整无误。

3.2. 与绘图Agent深度整合

关注我们之前内容的读者可能了解，我们在单OpenClaw平台的基础上，细化出了多个专注于不同领域的智能体（Agent）。其中，绘图Agent专门负责处理各类图形、图表生成任务。本次，我们将xfc-mermaid技能无缝集成到了该Agent的能力体系中。

整合的关键在于修改其核心的SOUL.md配置文件，明确任务意图的分发与路由逻辑：

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

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

很快，绘图Agent便输出了处理结果。你可以通过其提供的编辑链接，在线实时调整这份流程图的布局和内容：

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

实践再次证明，OpenClaw平台结合多智能体（Multi-Agent）的架构方案极具实用价值。目前，我们的写作Agent已基本成型，本文正是在其辅助下完成的；而绘图Agent仍在持续迭代完善中，未来有望成长为一个高效的“专属图形化内容生产车间”。