visualize-with-libraries

Visualizer with Local Libraries

This skill renders BPMN diagrams using local folder icons found in the user's project.

Features

Automatic detection of local icon folders
Support for extensions: .svg, .png, .jpg, .jpeg
Search priority: icons/ > librerias/ > libraries/
Fallback to technical emojis if no icons are found
60-30-10 visual style for colors

STRICT EXCALIDRAW GENERATION RULES (CRITICAL)

JSON Minimalism

FORBIDDEN to use the type freedraw
Use only primitive types: rectangle, diamond, text, arrow
Omit redundant metadata so that the file weighs less than 500 lines

Connection Engine

Every line (type: "arrow") MUST be logically connected
Obligatorily use startBinding and endBinding pointing to the source and target IDs
Mandatory arrow example:

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

Text Anchoring

All text inside a rectangle or diamond must be linked using the property boundElements on the container shape

Output JSON Structure

{
  "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}}
  ]
}

Usage

When the user wants to render a BPMN diagram and wants to use local icons:

The skill scans the project looking for folders icons/, librerias/ or libraries/
Looks for icons that match the BPMN task types
Generates the diagram using the icons found

Icon folder structure

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

Icon file names

Task type	Expected file
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`

Installation

npx skills add JefferCB1/skill-visualizer-direct