Skills canvas

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.

install

source · Clone the upstream repo

git clone https://github.com/markdown-viewer/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/markdown-viewer/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/canvas" ~/.claude/skills/markdown-viewer-skills-canvas && rm -rf "$T"

manifest: canvas/SKILL.md

source content

JSON Canvas Visualizer

Quick Start: Define nodes with

id

type

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

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