json-canvas

SKILL.md

Create and edit JSON Canvas files with nodes, edges, groups, and visual connections.

Supports four node types: text (with Markdown), file references, external links, and visual groups for organizing layouts

Edges connect nodes with optional labels, directional arrows, anchor points (top/right/bottom/left), and color coding

Includes comprehensive validation workflows: ID uniqueness checks, edge reference integrity, and JSON parsing to prevent broken canvases

Provides layout guidelines with suggested dimensions for different node types and spacing rules to avoid overlaps

JSON Canvas Skill

File Structure

A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:

{
  "nodes": [],
  "edges": []
}

nodes (optional): Array of node objects

edges (optional): Array of edge objects connecting nodes

Common Workflows

1. Create a New Canvas