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.
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.
JSON Canvas Skill
This skill enables Claude Code to create and edit valid JSON Canvas files (.canvas) used in Obsidian and other applications.
Overview
JSON Canvas is an open file format for infinite canvas data. Canvas files use the .canvas extension and contain valid JSON following the JSON Canvas Spec 1.0.
File Structure
A canvas file contains two top-level arrays:
{"nodes":[],"edges":[]}
nodes (optional): Array of node objects
edges (optional): Array of edge objects connecting nodes
Nodes
Nodes are objects placed on the canvas. There are four node types:
text - Text content with Markdown
file - Reference to files/attachments
link - External URL
group - Visual container for other nodes
Z-Index Ordering
Nodes are ordered by z-index in the array:
First node = bottom layer (displayed below others)
Last node = top layer (displayed above others)
Generic Node Attributes
All nodes share these attributes:
Attribute
Required
Type
Description
id
Yes
string
Unique identifier for the node
type
Yes
string
Node type: 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
Node color (see Color section)
Text Nodes
Text nodes contain Markdown content.
{"id":"6f0ad84f44ce9c17","type":"text","x":0,"y":0,"width":400,"height":200,"text":"# Hello World\n\nThis is **Markdown** content."}
The canvasColor type can be specified in two ways:
Hex Colors
{"color":"#FF0000"}
Preset Colors
{"color":"1"}
Preset
Color
"1"
Red
"2"
Orange
"3"
Yellow
"4"
Green
"5"
Cyan
"6"
Purple
Note: Specific color values for presets are intentionally undefined, allowing applications to use their own brand colors.
Complete Examples
Simple Canvas with Text and Connections
{"nodes":[{"id":"8a9b0c1d2e3f4a5b","type":"text","x":0,"y":0,"width":300,"height":150,"text":"# Main Idea\n\nThis is the central concept."},{"id":"1a2b3c4d5e6f7a8b","type":"text","x":400,"y":-100,"width":250,"height":100,"text":"## Supporting Point A\n\nDetails here."},{"id":"2b3c4d5e6f7a8b9c","type":"text","x":400,"y":100,"width":250,"height":100,"text":"## Supporting Point B\n\nMore details."}],"edges":[{"id":"3c4d5e6f7a8b9c0d","fromNode":"8a9b0c1d2e3f4a5b","fromSide":"right","toNode":"1a2b3c4d5e6f7a8b","toSide":"left"},{"id":"4d5e6f7a8b9c0d1e","fromNode":"8a9b0c1d2e3f4a5b","fromSide":"right","toNode":"2b3c4d5e6f7a8b9c","toSide":"left"}]}
{"nodes":[{"id":"1e2f3a4b5c6d7e8f","type":"text","x":300,"y":200,"width":400,"height":200,"text":"# Research Topic\n\n## Key Questions\n\n- How does X affect Y?\n- What are the implications?","color":"5"},{"id":"2f3a4b5c6d7e8f9a","type":"file","x":0,"y":0,"width":250,"height":150,"file":"Literature/Paper A.pdf"},{"id":"3a4b5c6d7e8f9a0b","type":"file","x":0,"y":200,"width":250,"height":150,"file":"Notes/Meeting Notes.md","subpath":"#Key Insights"},{"id":"4b5c6d7e8f9a0b1c","type":"link","x":0,"y":400,"width":250,"height":100,"url":"https://example.com/research"},{"id":"5c6d7e8f9a0b1c2d","type":"file","x":750,"y":150,"width":300,"height":250,"file":"Attachments/diagram.png"}],"edges":[{"id":"6d7e8f9a0b1c2d3e","fromNode":"2f3a4b5c6d7e8f9a","fromSide":"right","toNode":"1e2f3a4b5c6d7e8f","toSide":"left","label":"supports"},{"id":"7e8f9a0b1c2d3e4f","fromNode":"3a4b5c6d7e8f9a0b","fromSide":"right","toNode":"1e2f3a4b5c6d7e8f","toSide":"left","label":"informs"},{"id":"8f9a0b1c2d3e4f5a","fromNode":"4b5c6d7e8f9a0b1c","fromSide":"right","toNode":"1e2f3a4b5c6d7e8f","toSide":"left","toEnd":"arrow","color":"6"},{"id":"9a0b1c2d3e4f5a6b","fromNode":"1e2f3a4b5c6d7e8f","fromSide":"right","toNode":"5c6d7e8f9a0b1c2d","toSide":"left","label":"visualized by"}]}
Flowchart
{"nodes":[{"id":"a0b1c2d3e4f5a6b7","type":"text","x":200,"y":0,"width":150,"height":60,"text":"**Start**","color":"4"},{"id":"b1c2d3e4f5a6b7c8","type":"text","x":200,"y":100,"width":150,"height":60,"text":"Step 1:\nGather data"},{"id":"c2d3e4f5a6b7c8d9","type":"text","x":200,"y":200,"width":150,"height":80,"text":"**Decision**\n\nIs data valid?","color":"3"},{"id":"d3e4f5a6b7c8d9e0","type":"text","x":400,"y":200,"width":150,"height":60,"text":"Process data"},{"id":"e4f5a6b7c8d9e0f1","type":"text","x":0,"y":200,"width":150,"height":60,"text":"Request new data","color":"1"},{"id":"f5a6b7c8d9e0f1a2","type":"text","x":400,"y":320,"width":150,"height":60,"text":"**End**","color":"4"}],"edges":[{"id":"a6b7c8d9e0f1a2b3","fromNode":"a0b1c2d3e4f5a6b7","fromSide":"bottom","toNode":"b1c2d3e4f5a6b7c8","toSide":"top"},{"id":"b7c8d9e0f1a2b3c4","fromNode":"b1c2d3e4f5a6b7c8","fromSide":"bottom","toNode":"c2d3e4f5a6b7c8d9","toSide":"top"},{"id":"c8d9e0f1a2b3c4d5","fromNode":"c2d3e4f5a6b7c8d9","fromSide":"right","toNode":"d3e4f5a6b7c8d9e0","toSide":"left","label":"Yes","color":"4"},{"id":"d9e0f1a2b3c4d5e6","fromNode":"c2d3e4f5a6b7c8d9","fromSide":"left","toNode":"e4f5a6b7c8d9e0f1","toSide":"right","label":"No","color":"1"},{"id":"e0f1a2b3c4d5e6f7","fromNode":"e4f5a6b7c8d9e0f1","fromSide":"top","fromEnd":"none","toNode":"b1c2d3e4f5a6b7c8","toSide":"left","toEnd":"arrow"},{"id":"f1a2b3c4d5e6f7a8","fromNode":"d3e4f5a6b7c8d9e0","fromSide":"bottom","toNode":"f5a6b7c8d9e0f1a2","toSide":"top"}]}
ID Generation
Node and edge IDs must be unique strings. Obsidian generates 16-character hexadecimal IDs:
