json-canvas

1# JSON Canvas Skill
2 
3## File Structure
4 
5A canvas file (`.canvas`) contains two top-level arrays following the [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/):
6 
7```json
8{
9  "nodes": [],
10  "edges": []
11}
12```
13 
14- `nodes` (optional): Array of node objects
15- `edges` (optional): Array of edge objects connecting nodes
16 
17## Common Workflows
18 
19### 1. Create a New Canvas
20 
211. Create a `.canvas` file with the base structure `{"nodes": [], "edges": []}`
222. Generate unique 16-character hex IDs for each node (e.g., `"6f0ad84f44ce9c17"`)
233. Add nodes with required fields: `id`, `type`, `x`, `y`, `width`, `height`
244. Add edges referencing valid node IDs via `fromNode` and `toNode`
255. **Validate**: Parse the JSON to confirm it is valid. Verify all `fromNode`/`toNode` values exist in the nodes array
26 
27### 2. Add a Node to an Existing Canvas
28 
291. Read and parse the existing `.canvas` file
302. Generate a unique ID that does not collide with existing node or edge IDs
313. Choose position (`x`, `y`) that avoids overlapping existing nodes (leave 50-100px spacing)
324. Append the new node object to the `nodes` array
335. Optionally add edges connecting the new node to existing nodes
346. **Validate**: Confirm all IDs are unique and all edge references resolve to existing nodes
35 
36### 3. Connect Two Nodes
37 
381. Identify the source and target node IDs
392. Generate a unique edge ID
403. Set `fromNode` and `toNode` to the source and target IDs
41…