canvas

SKILL.md

JSON Canvas Visualizer

Quick Start: Define nodes with id, type, x, y, width, height → Plan layout on 100px grid → Connect edges with fromNode/toNode → Apply colors (1-6) → Wrap in ```canvas fence. Origin (0,0) at top-left, X right, Y down. Obsidian Canvas compatible.

Critical Syntax Rules

1. Structure Format

{
  "nodes": [
    {"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
  ],
  "edges": []
}

2. Node Types

Type
Required Fields
Purpose

text
text
Display custom text content

file
file
Reference external files

link
url
External URL references

group
label
Visual container for grouping

3. Required Node Attributes

All nodes require: id, type, x, y, width, height

4. Color Presets

Value
Color

"1"
Red

"2"
Orange

"3"
Yellow

"4"
Green

"5"
Cyan

"6"
Purple

5. Edge Connections

{
  "id": "e1",
  "fromNode": "n1",
  "fromSide": "right",
  "toNode": "n2", 
  "toSide": "left",
  "toEnd": "arrow"
}

6. Coordinate System

Origin (0,0) at top-left

X increases to the right

Y increases downward

7. Node Sizing

Consider text content when setting node dimensions

Multi-line text requires more height to display all lines

Long words require more width to avoid overflow

Common Pitfalls

Issue
Solution

Nodes overlapping
Increase spacing (100+ px)

Edges not visible
Verify fromNode/toNode match node IDs

Invalid JSON
Check quotes and commas

IDs invalid
Use only a-z, A-Z, 0-9, -, _

Output Format

```canvas
{
  "nodes": [...],
  "edges": [...]
}
```

Related Files

For detailed syntax and advanced features, refer to references below:

syntax.md — Complete attribute reference: node types, edge properties, group styling, and advanced examples

Resources

JSON Canvas Specification

1f