Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
npxskills add guanyang/antigravity-skills--skill json-canvasLoading…
A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:
{
"nodes": [],
"edges": []
}
nodes (optional): Array of node objectsedges (optional): Array of edge objects connecting nodes.canvas file with the base structure {"nodes": [], "edges": []}"6f0ad84f44ce9c17")id, , , , , typexywidthheightfromNode and toNodefromNode/toNode values exist in the nodes array.canvas filex, y) that avoids overlapping existing nodes (leave 50-100px spacing)nodes arrayfromNode and toNode to the source and target IDsfromSide/toSide (top, right, bottom, left) for anchor pointslabel for descriptive text on the edgeedges arrayfromNode and toNode reference existing node IDs.canvas file as JSONidNodes are objects placed on the canvas. Array order determines z-index: first node = bottom layer, last node = top layer.
| Attribute | Required | Type | Description |
|---|---|---|---|
id | Yes | string | Unique 16-char hex identifier |
type | Yes | string | text, file, link, or group |
x | Yes | integer | X position in pixels |
y | Yes | integer | Y position in pixels |
width | Yes | integer | Width in pixels |
height | Yes | integer | Height in pixels |
color | No | canvasColor | Preset "1"-"6" or hex (e.g., "#FF0000") |
| Attribute | Required | Type | Description |
|---|---|---|---|
text | Yes | string | Plain text with Markdown syntax |
{
"id": "6f0ad84f44ce9c17",
"type": "text",
"x": 0,
"y": 0,
"width": 400,
"height": 200,
"text": "# Hello World\n\nThis is **Markdown** content."
}
Newline pitfall: Use \n for line breaks in JSON strings. Do not use the literal \\n -- Obsidian renders that as the characters \ and n.
| Attribute | Required | Type | Description |
|---|---|---|---|
file | Yes | string | Path to file within the system |
subpath | No | string | Link to heading or block (starts with #) |
{
"id": "a1b2c3d4e5f67890",
"type": "file",
"x": 500,
"y": 0,
"width": 400,
"height": 300,
"file": "Attachments/diagram.png"
}
| Attribute | Required | Type | Description |
|---|---|---|---|
url | Yes | string | External URL |
{
"id": "c3d4e5f678901234",
"type": "link",
"x": 1000,
"y": 0,
"width": 400,
"height": 200,
"url": "https://obsidian.md"
}
Groups are visual containers for organizing other nodes. Position child nodes inside the group's bounds.
| Attribute | Required | Type | Description |
|---|---|---|---|
label | No | string | Text label for the group |
background | No | string | Path to background image |
backgroundStyle | No | string | cover, ratio, or repeat |
{
"id": "d4e5f6789012345a",
"type": "group",
"x": -50,
"y": -50,
"width": 1000,
"height": 600,
"label": "Project Overview",
"color": "4"
}
Edges connect nodes via fromNode and toNode IDs.
| Attribute | Required | Type | Default | Description |
|---|---|---|---|---|
id | Yes | string | - | Unique identifier |
fromNode | Yes | string | - | Source node ID |
fromSide | No | string | - | top, right, bottom, or left |
fromEnd | No | string | none | none or arrow |
toNode | Yes | string | - | Target node ID |
toSide | No | string | - | top, right, bottom, or left |
toEnd | No | string | arrow | none or arrow |
color | No | canvasColor | - | Line color |
label | No | string | - | Text label |
{
"id": "0123456789abcdef",
"fromNode": "6f0ad84f44ce9c17",
"fromSide": "right",
"toNode": "a1b2c3d4e5f67890",
"toSide": "left",
"toEnd": "arrow",
"label": "leads to"
}
The canvasColor type accepts either a hex string or a preset number:
| Preset | Color |
|---|---|
"1" | Red |
"2" | Orange |
"3" | Yellow |
"4" | Green |
"5" | Cyan |
"6" | Purple |
Preset color values are intentionally undefined -- applications use their own brand colors.
Generate 16-character lowercase hexadecimal strings (64-bit random value):
"6f0ad84f44ce9c17"
"a3b2c1d0e9f8a7b6"
x increases right, y increases down; position is the top-left corner| Node Type | Suggested Width | Suggested Height |
|---|---|---|
| Small text | 200-300 | 80-150 |
| Medium text | 300-450 | 150-300 |
| Large text | 400-600 | 300-500 |
| File preview | 300-500 | 200-400 |
| Link preview | 250-400 | 100-200 |
After creating or editing a canvas file, verify:
id values are unique across both nodes and edgesfromNode and toNode references an existing node IDtext for text nodes, file for file nodes, url for link nodes)type is one of: text, file, link, groupfromSide/toSide values are one of: top, right, bottom, leftfromEnd/toEnd values are one of: none, arrow"1" through "6" or valid hex (e.g., "#FF0000")If validation fails, check for duplicate IDs, dangling edge references, or malformed JSON strings (especially unescaped newlines in text content).
See references/EXAMPLES.md for full canvas examples including mind maps, project boards, research canvases, and flowcharts.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).