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.
/plugin marketplace add davepoon/buildwithclaude/plugin install all-skills@buildwithclaudeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill enables Claude Code to create and edit valid JSON Canvas files (.canvas) used in Obsidian and other applications.
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.
A canvas file contains two top-level arrays:
{
"nodes": [],
"edges": []
}
nodes (optional): Array of node objectsedges (optional): Array of edge objects connecting nodesNodes are objects placed on the canvas. There are four node types:
text - Text content with Markdownfile - Reference to files/attachmentslink - External URLgroup - Visual container for other nodesFirst node = bottom layer (displayed below others) Last node = top layer (displayed above others)
| 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 contain Markdown content.
{
"id": "text1",
"type": "text",
"x": 0,
"y": 0,
"width": 300,
"height": 150,
"text": "# Heading\n\nThis is **markdown** content."
}
File nodes reference files or attachments (images, videos, PDFs, notes, etc.)
| Attribute | Required | Type | Description |
|---|---|---|---|
file | Yes | string | Path to file within the system |
subpath | No | string | Link to heading or block (starts with #) |
{
"id": "file1",
"type": "file",
"x": 350,
"y": 0,
"width": 400,
"height": 300,
"file": "Notes/My Note.md",
"subpath": "#Heading"
}
Link nodes display external URLs.
{
"id": "link1",
"type": "link",
"x": 0,
"y": 200,
"width": 300,
"height": 150,
"url": "https://example.com"
}
Group nodes are visual containers for organizing other nodes.
| Attribute | Required | Type | Description |
|---|---|---|---|
label | No | string | Text label for the group |
background | No | string | Path to background image |
backgroundStyle | No | string | Background rendering style |
| Value | Description |
|---|---|
cover | Fills entire width and height of node |
ratio | Maintains aspect ratio of background image |
repeat | Repeats image as pattern in both directions |
{
"id": "group1",
"type": "group",
"x": -50,
"y": -50,
"width": 800,
"height": 500,
"label": "Project Ideas",
"color": "4"
}
Edges are lines connecting nodes.
| Attribute | Required | Type | Default | Description |
|---|---|---|---|---|
id | Yes | string | - | Unique identifier for the edge |
fromNode | Yes | string | - | Node ID where connection starts |
fromSide | No | string | - | Side where edge starts |
fromEnd | No | string | none | Shape at edge start |
toNode | Yes | string | - | Node ID where connection ends |
toSide | No | string | - | Side where edge ends |
toEnd | No | string | arrow | Shape at edge end |
color | No | canvasColor | - | Line color |
label | No | string | - | Text label for the edge |
| Value | Description |
|---|---|
top | Top edge of node |
right | Right edge of node |
bottom | Bottom edge of node |
left | Left edge of node |
| Value | Description |
|---|---|
none | No endpoint shape |
arrow | Arrow endpoint |
{
"id": "edge1",
"fromNode": "text1",
"fromSide": "right",
"toNode": "file1",
"toSide": "left",
"toEnd": "arrow",
"label": "references"
}
The canvasColor type supports both hex colors and preset options.
{
"color": "#FF0000"
}
| Preset | Color |
|---|---|
"1" | Red |
"2" | Orange |
"3" | Yellow |
"4" | Green |
"5" | Cyan |
"6" | Purple |
Specific color values for presets are intentionally undefined, allowing applications to use their own brand colors.
{
"nodes": [
{
"id": "idea1",
"type": "text",
"x": 0,
"y": 0,
"width": 250,
"height": 100,
"text": "# Main Idea\n\nCore concept goes here"
},
{
"id": "idea2",
"type": "text",
"x": 350,
"y": -50,
"width": 200,
"height": 80,
"text": "## Supporting Point 1\n\nDetails..."
},
{
"id": "idea3",
"type": "text",
"x": 350,
"y": 100,
"width": 200,
"height": 80,
"text": "## Supporting Point 2\n\nMore details..."
}
],
"edges": [
{
"id": "e1",
"fromNode": "idea1",
"fromSide": "right",
"toNode": "idea2",
"toSide": "left",
"toEnd": "arrow"
},
{
"id": "e2",
"fromNode": "idea1",
"fromSide": "right",
"toNode": "idea3",
"toSide": "left",
"toEnd": "arrow"
}
]
}
{
"nodes": [
{
"id": "todo-group",
"type": "group",
"x": 0,
"y": 0,
"width": 300,
"height": 400,
"label": "To Do",
"color": "1"
},
{
"id": "progress-group",
"type": "group",
"x": 350,
"y": 0,
"width": 300,
"height": 400,
"label": "In Progress",
"color": "3"
},
{
"id": "done-group",
"type": "group",
"x": 700,
"y": 0,
"width": 300,
"height": 400,
"label": "Done",
"color": "4"
},
{
"id": "task1",
"type": "text",
"x": 20,
"y": 50,
"width": 260,
"height": 80,
"text": "## Task 1\n\nDescription of first task"
},
{
"id": "task2",
"type": "text",
"x": 370,
"y": 50,
"width": 260,
"height": 80,
"text": "## Task 2\n\nCurrently working on this"
},
{
"id": "task3",
"type": "text",
"x": 720,
"y": 50,
"width": 260,
"height": 80,
"text": "## Task 3\n\n~~Completed task~~"
}
],
"edges": []
}
{
"nodes": [
{
"id": "central",
"type": "text",
"x": 200,
"y": 200,
"width": 200,
"height": 100,
"text": "# Research Topic\n\nMain research question",
"color": "6"
},
{
"id": "notes1",
"type": "file",
"x": 0,
"y": 0,
"width": 180,
"height": 150,
"file": "Research/Literature Review.md"
},
{
"id": "notes2",
"type": "file",
"x": 450,
"y": 0,
"width": 180,
"height": 150,
"file": "Research/Methodology.md"
},
{
"id": "source1",
"type": "link",
"x": 0,
"y": 350,
"width": 180,
"height": 100,
"url": "https://scholar.google.com"
},
{
"id": "source2",
"type": "link",
"x": 450,
"y": 350,
"width": 180,
"height": 100,
"url": "https://arxiv.org"
}
],
"edges": [
{
"id": "e1",
"fromNode": "central",
"toNode": "notes1",
"toEnd": "arrow",
"label": "literature"
},
{
"id": "e2",
"fromNode": "central",
"toNode": "notes2",
"toEnd": "arrow",
"label": "methods"
},
{
"id": "e3",
"fromNode": "central",
"toNode": "source1",
"toEnd": "arrow"
},
{
"id": "e4",
"fromNode": "central",
"toNode": "source2",
"toEnd": "arrow"
}
]
}
{
"nodes": [
{
"id": "start",
"type": "text",
"x": 100,
"y": 0,
"width": 150,
"height": 60,
"text": "**Start**",
"color": "4"
},
{
"id": "decision",
"type": "text",
"x": 75,
"y": 120,
"width": 200,
"height": 80,
"text": "## Decision\n\nIs condition true?",
"color": "3"
},
{
"id": "yes-path",
"type": "text",
"x": -100,
"y": 280,
"width": 150,
"height": 60,
"text": "**Yes Path**\n\nDo action A"
},
{
"id": "no-path",
"type": "text",
"x": 300,
"y": 280,
"width": 150,
"height": 60,
"text": "**No Path**\n\nDo action B"
},
{
"id": "end",
"type": "text",
"x": 100,
"y": 420,
"width": 150,
"height": 60,
"text": "**End**",
"color": "1"
}
],
"edges": [
{
"id": "e1",
"fromNode": "start",
"fromSide": "bottom",
"toNode": "decision",
"toSide": "top",
"toEnd": "arrow"
},
{
"id": "e2",
"fromNode": "decision",
"fromSide": "left",
"toNode": "yes-path",
"toSide": "top",
"toEnd": "arrow",
"label": "Yes"
},
{
"id": "e3",
"fromNode": "decision",
"fromSide": "right",
"toNode": "no-path",
"toSide": "top",
"toEnd": "arrow",
"label": "No"
},
{
"id": "e4",
"fromNode": "yes-path",
"fromSide": "bottom",
"toNode": "end",
"toSide": "left",
"toEnd": "arrow"
},
{
"id": "e5",
"fromNode": "no-path",
"fromSide": "bottom",
"toNode": "end",
"toSide": "right",
"toEnd": "arrow"
}
]
}
Node and edge IDs must be unique strings. Obsidian generates 16-character hexadecimal IDs.
Example format: a1b2c3d4e5f67890
x increases to the righty increases downward| 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 |
| Group | Varies | Varies |
id values must be unique across nodes and edgesfromNode and toNode must reference existing node IDstype must be one of: text, file, link, groupbackgroundStyle must be one of: cover, ratio, repeatfromSide, toSide must be one of: top, right, bottom, leftfromEnd, toEnd must be one of: none, arrow"1" through "6" or valid hex colorThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.