markdown-viewer/canvas

¿Qué hace canvas?

Crea diagramas espaciales con nodos de posición libre usando formato JSON. Ideal para mapas conceptuales, grafos de conocimiento y tableros de planificación que requieren control preciso de coordenadas x/y.

Cómo usarlo

{
  "version": 1,
  "nodes": [
    {
      "id": "nodo1",
      "position": { "x": 100, "y": 50 },
      "label": "Concepto A",
      "color": "#4A90D9"
    },
    {
      "id": "nodo2",
      "position": { "x": 300, "y": 150 },
      "label": "Concepto B",
      "color": "#7B61FF"
    }
  ],
  "connections": [
    { "from": "nodo1", "to": "nodo2" }
  ]
}

Propiedades de nodo

Propiedad	Tipo	Descripción
id	string	Identificador único del nodo
position	object	Coordenadas { x, y } en píxeles
label	string	Texto visible del nodo
color	string	Color hexadecimal (opcional)

Conexiones

Las conexiones opcionales definen aristas entre nodos mediante los IDs de origen y destino.

Notas

• Las coordenadas x e y son relativas al lienzo.
• Los colores deben ser códigos hexadecimales válidos (ej: #FF5733).
• Se pueden agregar tantos nodos como sea necesario.

Licencia

Este skill está disponible bajo la licencia MIT.