visualize-with-libraries

用途

本技能用于渲染 BPMN 流程图，并支持使用用户项目中的本地图标文件夹中的图标来绘制图形。

主要能力

自动检测项目中的本地图标文件夹
支持图标扩展名：.svg、.png、.jpg、.jpeg
图标文件夹搜索优先级：icons/ > librerias/ > libraries/
若找不到图标，则回退使用技术类 emoji
采用 60-30-10 配色风格

Excalidraw 生成严格规则（关键）

极简 JSON

禁止使用 freedraw 类型
仅使用基础图元类型：rectangle、diamond、text、arrow
省略冗余元数据，使文件保持在 500 行以内

连接引擎

所有线条（type: "arrow"）必须逻辑连接
必须使用 startBinding 和 endBinding 指向源与目标的 ID
强制箭头示例：

{
  "type": "arrow",
  "id": "arr_1",
  "startBinding": {"elementId": "origen_1", "focus": 0, "gap": 5},
  "endBinding": {"elementId": "destino_1", "focus": 0, "gap": 5},
  "roundness": {"type": 2}
}

文本锚定

矩形或菱形内的所有文本必须通过容器图元的 boundElements 属性进行绑定

输出 JSON 结构

{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {"type": "rectangle", "id": "task_1", "x": 100, "y": 100, "width": 120, "height": 60},
    {"type": "text", "id": "text_1", "x": 130, "y": 120, "content": "Recibir Email", "boundElements": [{"type": "rectangle", "id": "task_1"}]},
    {"type": "arrow", "id": "arr_1", "startBinding": {"elementId": "task_1", "focus": 0, "gap": 5}, "endBinding": {"elementId": "task_2", "focus": 0, "gap": 5}}
  ]
}

使用方式

当用户想要渲染 BPMN 图并希望使用本地图标时：

技能扫描项目，查找 icons/、librerias/ 或 libraries/ 文件夹
查找与 BPMN 任务类型匹配的图标
使用找到的图标生成图表

图标文件夹结构

tu-proyecto/
├── icons/           # 优先级 1
│   ├── db.svg
│   ├── user.png
│   └── api.jpg
├── librerias/        # 优先级 2
│   └── ...
└── libraries/        # 优先级 3
    └── ...

图标文件名

任务类型	预期文件
Service Task	`service.svg`, `service.png`
User Task	`user.svg`, `user.png`
Script Task	`script.svg`, `script.png`
Manual Task	`manual.svg`, `manual.png`
Send Task	`send.svg`, `send.png`
Receive Task	`receive.svg`, `receive.png`

安装

npx skills add JefferCB1/skill-visualizer-direct

适用场景

适用于需要在项目中使用本地图标来绘制 BPMN 流程图的场景，尤其是希望图表保持极简 Excalidraw 格式并可进一步编辑的情况。

限制

仅使用基础图元，禁止使用 freedraw
箭头必须通过 startBinding 和 endBinding 进行逻辑绑定
容器内文本必须通过 boundElements 绑定
若项目中不存在图标文件夹，则回退使用 emoji
关于价格、收费模式、支持的平台等未提供相关信息

技能介绍

用途

主要能力

Excalidraw 生成严格规则（关键）

使用方式

图标文件夹结构

图标文件名

安装

适用场景

限制