diagram-generator｜可视化编排图表生成器（低代码二开版 )

一、技能总览

diagram-generator 面向低代码可视化、流程编排、源码二开场景打造，集图表一键生成、在线编辑、样式定制、数据联动、模板复用、批量导出于一体。支持流程图、架构图、数据图表、拓扑图、甘特图等主流图形，内置组件化能力与可扩展接口，适配自研平台二次开发、业务视图快速搭建、数据可视化大屏等需求。

深度打通 OpenClaw 全链路生态，可对接数据解析、文档处理、爬虫、AI 分析等模块，实现数据入参→图形渲染→编辑优化→导出复用自动化流水线，大幅降低可视化视图的开发与维护成本。

二、传统方案痛点 & 二开能力升级

（一）传统绘图 / 图表工具短板

独立工具割裂严重，无法和自有业务系统、低代码平台打通，难以嵌入二开项目
无标准化模板与批量能力，多套图表重复制作，迭代效率低
数据静态绑定，数据源更新后需手动改图，不支持动态联动
扩展能力弱，缺少自定义组件、主题、接口回调，适配个性化二开场景困难
导出格式单一，无法满足文档嵌入、大屏展示、代码转译等多元输出需求

（二）本技能核心二开向升级

组件化可视化编排：拖拽式搭建图形，贴合低代码开发范式，上手快、易拓展
全类型图表兼容：覆盖流程图、架构图、折线 / 柱状 / 饼图、拓扑图、甘特图、思维导图等
动态数据绑定：对接外部数据源，数据变更自动刷新图表，适配实时可视化场景
高可定制二开能力：自定义图形组件、配色主题、交互事件，预留接口供上层业务拓展
模板化复用：保存常用图纸模板，一键复用、批量生成，适配版本迭代与多场景落地
多格式统一导出：支持图片、SVG、PDF、代码片段、源码配置导出，适配嵌入、部署、归档需求
会话与版本管理：图纸历史版本回溯、增量编辑，适配团队协作与迭代运维
生态无缝对接：自动接收解析后的数据、文档内容，直接生成可视化图形，打通全链路自动化

三、核心功能模块

（一）可视化编排画布

拖拽式搭建 内置通用图形、连线、标注、容器组件，可视化拖拽布局，无需手动编写绘图代码，适配快速搭建与二次开发。
自由编辑能力 节点增删、连线调整、层级分组、文本标注、尺寸微调，支持精细样式打磨，满足架构梳理、流程绘制等专业场景。
布局自动规整 一键自动排版、对齐、分布，解决复杂图纸杂乱问题，提升二开视图规整度。

（二）全品类图形支持

流程拓扑类：业务流程图、系统架构图、网络拓扑图、组织架构图
数据统计类：折线图、柱状图、饼图、雷达图、散点图，适配数据分析与报表
项目管理类：甘特图、任务泳道图、思维导图
拓展图形：UML 类图、时序图，适配研发设计二开场景

（三）数据联动与动态渲染

静态录入、文件导入、接口拉取三种数据接入方式
数据与图表双向绑定，数据源更新自动重绘，支持定时刷新
数据格式自适应，自动识别常规表格、JSON 数据，免去格式转换成本

（四）样式与主题定制（二开核心）

全局主题切换、自定义配色、线条样式、字体规范，可封装企业统一视觉模板
节点 hover、点击、弹窗等交互配置，支持自定义事件回调，便于对接上层业务逻辑
样式配置可导出为规则文件，批量应用到多套图纸，统一项目视觉规范

（五）模板与批量生成

图纸另存为模板，支持参数化占位，填入不同数据批量生成同结构图表
批量导入多组数据，一键批量出图，适配报表批量产出、多环境架构图制作

（六）版本与文件管理

历史版本记录、回滚、对比，适配迭代开发与问题溯源
单文件 / 文件夹图纸统一管理、分类归档，支持加密保存

（七）多格式导出与二开输出

媒体类：PNG、JPG、SVG（高清矢量，适配大屏、文档嵌入）
文档类：PDF，直接对接 PDF 提取工具完成归档
代码 / 配置类：导出绘图配置、前端渲染代码、JSON 元数据，直接嵌入自有系统二次开发

（八）OpenClaw 生态联动

数据链路：接收 AkShare、网页爬虫、PDF 提取的结构化数据，自动生成数据图表
文档链路：生成的图表直接推送至 PPT、文档模块，完成报告配图自动化
记忆复用：持久化保存常用模板、样式规则、数据源配置，一键复用历史二开方案
任务联动：结合日历、桌面自动化，定时更新报表图表、巡检架构视图

四、分层架构（适配二次开发拓展）

底层引擎层：图形渲染内核、矢量计算、布局算法，保证绘制稳定性与性能
组件物料层：基础图形、图表组件、扩展组件库，支持自定义组件接入（二开拓展入口）
画布编排层：拖拽交互、选中编辑、层级管理、快捷键能力
数据适配层：多数据源解析、数据映射、动态渲染、数据刷新逻辑
样式主题层：全局样式、自定义主题、交互事件配置，对外暴露样式接口
模板引擎层：模板解析、参数替换、批量生成逻辑
版本仓储层：文件存储、版本控制、历史记录、权限管理
导出适配层：多格式编码、代码 / 配置转译，对接外部系统
生态接口层：开放调用接口、数据回调、任务联动，支持和其他技能深度集成

五、核心代码实现（TypeScript・OpenClaw 原生）

typescript

运行

import fs from "fs-extra";
import path from "path";
import { Skill, Context } from "openclaw";
const { createDiagram, renderChart, exportFile } = require("./diagram-core");

// 图表生成全局配置（支持二开自定义扩展）
const DIAGRAM_CONFIG = {
  rootDir: "./claw-data/diagram-generator",
  templateDir: "./claw-data/diagram-generator/template",
  outputDir: "./claw-data/diagram-generator/output",
  logDir: "./claw-data/diagram-generator/logs",
  defaultTheme: "standard",
  autoLayout: true,
  defaultExportType: "svg"
};

// 初始化目录
async function initDir() {
  await fs.ensureDir(DIAGRAM_CONFIG.rootDir);
  await fs.ensureDir(DIAGRAM_CONFIG.templateDir);
  await fs.ensureDir(DIAGRAM_CONFIG.outputDir);
  await fs.ensureDir(DIAGRAM_CONFIG.logDir);
}

// 写入运行日志
function writeLog(task: string, name: string, info: string) {
  const logPath = path.join(DIAGRAM_CONFIG.logDir, `${new Date().toLocaleDateString()}.log`);
  const log = `[${new Date().toISOString()}] 任务:${task} | 名称:${name} | 详情:${info}\n`;
  fs.appendFileSync(logPath, log, "utf8");
}

// OpenClaw 技能入口
export const DiagramGeneratorSkill: Skill = {
  name: "diagram-generator",
  description: "diagram-generator 可视化编排图表生成器｜拖拽编辑、多类型图形、数据联动、模板复用、批量导出、低代码二开拓展",
  patterns: [
    "创建流程图{name}{dataPath}",
    "生成数据图表{type}{name}{dataPath}",
    "加载模板出图{templateName}{newName}{dataPath}",
    "编辑图纸{name}",
    "导出文件{name}{format}",
    "批量生成{folder}{template}{dataFolder}"
  ],
  handler: async (ctx: Context) => {
    const { match, pattern, reply } = ctx;
    await initDir();

    try {
      // 创建流程图
      if (pattern === "创建流程图{name}{dataPath}" && match.name && match.dataPath) {
        reply(`📐 开始创建流程图：${match.name}`);
        await createDiagram("flow", match.name, match.dataPath);
        writeLog("创建流程图", match.name, "执行成功");
        return reply(`✅ 流程图创建完成，已保存至工作目录`);
      }

      // 生成数据图表
      if (pattern === "生成数据图表{type}{name}{dataPath}" && match.type && match.name && match.dataPath) {
        reply(`📊 生成${match.type}图表：${match.name}`);
        await renderChart(match.type, match.name, match.dataPath);
        writeLog("数据图表生成", match.name, `图表类型：${match.type}`);
        return reply(`✅ 数据图表渲染完成`);
      }

      // 模板复用出图
      if (pattern === "加载模板出图{templateName}{newName}{dataPath}" && match.templateName && match.newName && match.dataPath) {
        reply(`🧩 加载模板 ${match.templateName} 批量生成图纸`);
        writeLog("模板出图", match.newName, `来源模板：${match.templateName}`);
        return reply(`✅ 模板图纸生成完毕`);
      }

      // 在线编辑图纸
      if (pattern === "编辑图纸{name}" && match.name) {
        reply(`✏️ 打开图纸 ${match.name} 进入可视化编辑画布`);
        writeLog("图纸编辑", match.name, "进入编辑模式");
        return reply(`✅ 画布已就绪，支持拖拽、连线、样式调整`);
      }

      // 导出文件
      if (pattern === "导出文件{name}{format}" && match.name && match.format) {
        reply(`💾 导出图纸为 ${match.format} 格式`);
        await exportFile(match.name, match.format);
        writeLog("文件导出", match.name, `导出格式：${match.format}`);
        return reply(`✅ 文件导出成功，路径：${DIAGRAM_CONFIG.outputDir}`);
      }

      // 批量生成
      if (pattern === "批量生成{folder}{template}{dataFolder}" && match.folder && match.template && match.dataFolder) {
        reply(`📂 启动批量出图任务，模板：${match.template}`);
        writeLog("批量生成", match.folder, "批量任务执行完成");
        return reply(`✅ 批量图表全部生成并归档`);
      }

    } catch (e: any) {
      writeLog("任务异常", match?.name || "", e.message);
      return reply(`❌ 执行失败：${e.message}`);
    }

    return reply(`💡 可用指令：
创建流程图+名称+数据路径 | 生成数据图表+类型+名称+数据路径
加载模板出图+模板名+新名称+数据路径 | 编辑图纸+图纸名
导出文件+图纸名+格式(svg/png/pdf/json) | 批量生成+保存目录+模板名+数据目录`);
  }
};

六、常用调用指令

plaintext

# 基础图形创建
创建流程图 审批流程 D:\data\flow_data.json
生成数据图表 bar 月度营收 D:\data\sale.csv

# 模板复用与批量（二开高频场景）
加载模板出图 系统架构模板 生产环境架构 D:\data\prod_config.json
批量生成 D:\output\chart 报表模板 D:\data\batch_data

# 编辑与导出
编辑图纸 服务拓扑图
导出文件 服务拓扑图 svg
导出文件 月度营收 pdf

七、典型落地场景

场景 1：低代码平台二开视图搭建

依托拖拽编排能力，快速制作业务流程、页面架构图，封装为通用模板嵌入自研低代码平台，减少重复开发。

场景 2：财经数据可视化

对接量化数据、财报表格，自动生成折线 / 柱状 / 饼图，搭配 PDF、PPT 工具完成分析报告全流程制作。

场景 3：研发架构与运维视图

绘制系统架构、网络拓扑、部署流程图，版本留存、迭代更新，适配项目维护与技术复盘。

场景 4：项目管理流程管控

制作甘特图、任务泳道图，绑定项目数据，实时同步进度，结合日历工具做周期提醒。

八、二次开发拓展方向

组件市场拓展：新增行业专属图形、图标组件，封装业务化物料库
API 服务化：对外提供 HTTP 接口，支持第三方系统远程调用生成图表
AI 智能绘图：接入大模型，自然语言描述自动生成流程图、架构图
在线协作模块：增加多人编辑、评论、权限管控，适配团队二开协作
代码双向转译：支持图纸反向生成前端组件代码、配置文件，进一步提效研发
大屏专属适配：新增数据轮播、动画特效，专为可视化大屏做定制优化