Json Canvas

Create visual canvases, mind maps, and flowcharts with JSON Canvas format

✨ The solution you've been looking for

Verified

Tested and verified by our team

16036 Stars

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 obsidian mind-mapping flowcharts visual-design document-processing canvas visualization

Repository

See It In Action

Interactive preview & real-world examples

Live Demo

AI Conversation Simulator

See how users interact with this skill

User Prompt

Create a JSON Canvas file for a project board with three columns: To Do, In Progress, and Done. Add some sample tasks in each column.

Skill Processing

Analyzing request...

Agent Response

A complete .canvas file with group nodes for columns, text nodes for tasks, and proper color coding

Quick Start (3 Steps)

Get up and running in minutes

Install

claude-code skill install json-canvas

claude-code skill install json-canvas

Config

First Trigger

@json-canvas help

Commands

Command	Description	Required Args
@json-canvas project-planning-board	Create a visual project board with To Do, In Progress, and Done columns using grouped nodes and task cards	None
@json-canvas research-mind-map	Build a comprehensive research canvas linking papers, notes, and external resources with visual connections	None
@json-canvas process-flowchart	Design decision trees and workflow diagrams with conditional paths and clear visual flow	None

Typical Use Cases

Project Planning Board

Create a visual project board with To Do, In Progress, and Done columns using grouped nodes and task cards

Research Mind Map

Build a comprehensive research canvas linking papers, notes, and external resources with visual connections

Process Flowchart

Design decision trees and workflow diagrams with conditional paths and clear visual flow

Overview

JSON Canvas Skill

This skill enables skills-compatible agents 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:

1{
2  "nodes": [],
3  "edges": []
4}

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.

1{
2  "id": "6f0ad84f44ce9c17",
3  "type": "text",
4  "x": 0,
5  "y": 0,
6  "width": 400,
7  "height": 200,
8  "text": "# Hello World\n\nThis is **Markdown** content."
9}

Newline Escaping (Common Pitfall)

In JSON, newline characters inside strings must be represented as \n. Do not use the literal sequence \\n in a .canvas file—Obsidian will render it as the characters \ and n instead of a line break.

Examples:

1{ "type": "text", "text": "Line 1\nLine 2" }

1{ "type": "text", "text": "Line 1\\nLine 2" }

Attribute	Required	Type	Description
`text`	Yes	string	Plain text with Markdown syntax

File Nodes

File nodes reference files or attachments (images, videos, PDFs, notes, etc.).

1{
2  "id": "a1b2c3d4e5f67890",
3  "type": "file",
4  "x": 500,
5  "y": 0,
6  "width": 400,
7  "height": 300,
8  "file": "Attachments/diagram.png"
9}

 1{
 2  "id": "b2c3d4e5f6789012",
 3  "type": "file",
 4  "x": 500,
 5  "y": 400,
 6  "width": 400,
 7  "height": 300,
 8  "file": "Notes/Project Overview.md",
 9  "subpath": "#Implementation"
10}

Attribute	Required	Type	Description
`file`	Yes	string	Path to file within the system
`subpath`	No	string	Link to heading or block (starts with `#`)

Link Nodes

Link nodes display external URLs.

1{
2  "id": "c3d4e5f678901234",
3  "type": "link",
4  "x": 1000,
5  "y": 0,
6  "width": 400,
7  "height": 200,
8  "url": "https://obsidian.md"
9}

Attribute	Required	Type	Description
`url`	Yes	string	External URL

Group Nodes

Group nodes are visual containers for organizing other nodes.

 1{
 2  "id": "d4e5f6789012345a",
 3  "type": "group",
 4  "x": -50,
 5  "y": -50,
 6  "width": 1000,
 7  "height": 600,
 8  "label": "Project Overview",
 9  "color": "4"
10}

 1{
 2  "id": "e5f67890123456ab",
 3  "type": "group",
 4  "x": 0,
 5  "y": 700,
 6  "width": 800,
 7  "height": 500,
 8  "label": "Resources",
 9  "background": "Attachments/background.png",
10  "backgroundStyle": "cover"
11}

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

Background Styles

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

Edges

Edges are lines connecting nodes.

1{
2  "id": "f67890123456789a",
3  "fromNode": "6f0ad84f44ce9c17",
4  "toNode": "a1b2c3d4e5f67890"
5}

 1{
 2  "id": "0123456789abcdef",
 3  "fromNode": "6f0ad84f44ce9c17",
 4  "fromSide": "right",
 5  "fromEnd": "none",
 6  "toNode": "b2c3d4e5f6789012",
 7  "toSide": "left",
 8  "toEnd": "arrow",
 9  "color": "1",
10  "label": "leads to"
11}

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

Side Values

Value	Description
`top`	Top edge of node
`right`	Right edge of node
`bottom`	Bottom edge of node
`left`	Left edge of node

End Shapes

Value	Description
`none`	No endpoint shape
`arrow`	Arrow endpoint

Colors

The canvasColor type can be specified in two ways:

Hex Colors

1{
2  "color": "#FF0000"
3}

Preset Colors

1{
2  "color": "1"
3}

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

 1{
 2  "nodes": [
 3    {
 4      "id": "8a9b0c1d2e3f4a5b",
 5      "type": "text",
 6      "x": 0,
 7      "y": 0,
 8      "width": 300,
 9      "height": 150,
10      "text": "# Main Idea\n\nThis is the central concept."
11    },
12    {
13      "id": "1a2b3c4d5e6f7a8b",
14      "type": "text",
15      "x": 400,
16      "y": -100,
17      "width": 250,
18      "height": 100,
19      "text": "## Supporting Point A\n\nDetails here."
20    },
21    {
22      "id": "2b3c4d5e6f7a8b9c",
23      "type": "text",
24      "x": 400,
25      "y": 100,
26      "width": 250,
27      "height": 100,
28      "text": "## Supporting Point B\n\nMore details."
29    }
30  ],
31  "edges": [
32    {
33      "id": "3c4d5e6f7a8b9c0d",
34      "fromNode": "8a9b0c1d2e3f4a5b",
35      "fromSide": "right",
36      "toNode": "1a2b3c4d5e6f7a8b",
37      "toSide": "left"
38    },
39    {
40      "id": "4d5e6f7a8b9c0d1e",
41      "fromNode": "8a9b0c1d2e3f4a5b",
42      "fromSide": "right",
43      "toNode": "2b3c4d5e6f7a8b9c",
44      "toSide": "left"
45    }
46  ]
47}

Project Board with Groups

 1{
 2  "nodes": [
 3    {
 4      "id": "5e6f7a8b9c0d1e2f",
 5      "type": "group",
 6      "x": 0,
 7      "y": 0,
 8      "width": 300,
 9      "height": 500,
10      "label": "To Do",
11      "color": "1"
12    },
13    {
14      "id": "6f7a8b9c0d1e2f3a",
15      "type": "group",
16      "x": 350,
17      "y": 0,
18      "width": 300,
19      "height": 500,
20      "label": "In Progress",
21      "color": "3"
22    },
23    {
24      "id": "7a8b9c0d1e2f3a4b",
25      "type": "group",
26      "x": 700,
27      "y": 0,
28      "width": 300,
29      "height": 500,
30      "label": "Done",
31      "color": "4"
32    },
33    {
34      "id": "8b9c0d1e2f3a4b5c",
35      "type": "text",
36      "x": 20,
37      "y": 50,
38      "width": 260,
39      "height": 80,
40      "text": "## Task 1\n\nImplement feature X"
41    },
42    {
43      "id": "9c0d1e2f3a4b5c6d",
44      "type": "text",
45      "x": 370,
46      "y": 50,
47      "width": 260,
48      "height": 80,
49      "text": "## Task 2\n\nReview PR #123",
50      "color": "2"
51    },
52    {
53      "id": "0d1e2f3a4b5c6d7e",
54      "type": "text",
55      "x": 720,
56      "y": 50,
57      "width": 260,
58      "height": 80,
59      "text": "## Task 3\n\n~~Setup CI/CD~~"
60    }
61  ],
62  "edges": []
63}

Research Canvas with Files and Links

 1{
 2  "nodes": [
 3    {
 4      "id": "1e2f3a4b5c6d7e8f",
 5      "type": "text",
 6      "x": 300,
 7      "y": 200,
 8      "width": 400,
 9      "height": 200,
10      "text": "# Research Topic\n\n## Key Questions\n\n- How does X affect Y?\n- What are the implications?",
11      "color": "5"
12    },
13    {
14      "id": "2f3a4b5c6d7e8f9a",
15      "type": "file",
16      "x": 0,
17      "y": 0,
18      "width": 250,
19      "height": 150,
20      "file": "Literature/Paper A.pdf"
21    },
22    {
23      "id": "3a4b5c6d7e8f9a0b",
24      "type": "file",
25      "x": 0,
26      "y": 200,
27      "width": 250,
28      "height": 150,
29      "file": "Notes/Meeting Notes.md",
30      "subpath": "#Key Insights"
31    },
32    {
33      "id": "4b5c6d7e8f9a0b1c",
34      "type": "link",
35      "x": 0,
36      "y": 400,
37      "width": 250,
38      "height": 100,
39      "url": "https://example.com/research"
40    },
41    {
42      "id": "5c6d7e8f9a0b1c2d",
43      "type": "file",
44      "x": 750,
45      "y": 150,
46      "width": 300,
47      "height": 250,
48      "file": "Attachments/diagram.png"
49    }
50  ],
51  "edges": [
52    {
53      "id": "6d7e8f9a0b1c2d3e",
54      "fromNode": "2f3a4b5c6d7e8f9a",
55      "fromSide": "right",
56      "toNode": "1e2f3a4b5c6d7e8f",
57      "toSide": "left",
58      "label": "supports"
59    },
60    {
61      "id": "7e8f9a0b1c2d3e4f",
62      "fromNode": "3a4b5c6d7e8f9a0b",
63      "fromSide": "right",
64      "toNode": "1e2f3a4b5c6d7e8f",
65      "toSide": "left",
66      "label": "informs"
67    },
68    {
69      "id": "8f9a0b1c2d3e4f5a",
70      "fromNode": "4b5c6d7e8f9a0b1c",
71      "fromSide": "right",
72      "toNode": "1e2f3a4b5c6d7e8f",
73      "toSide": "left",
74      "toEnd": "arrow",
75      "color": "6"
76    },
77    {
78      "id": "9a0b1c2d3e4f5a6b",
79      "fromNode": "1e2f3a4b5c6d7e8f",
80      "fromSide": "right",
81      "toNode": "5c6d7e8f9a0b1c2d",
82      "toSide": "left",
83      "label": "visualized by"
84    }
85  ]
86}

Flowchart

  1{
  2  "nodes": [
  3    {
  4      "id": "a0b1c2d3e4f5a6b7",
  5      "type": "text",
  6      "x": 200,
  7      "y": 0,
  8      "width": 150,
  9      "height": 60,
 10      "text": "**Start**",
 11      "color": "4"
 12    },
 13    {
 14      "id": "b1c2d3e4f5a6b7c8",
 15      "type": "text",
 16      "x": 200,
 17      "y": 100,
 18      "width": 150,
 19      "height": 60,
 20      "text": "Step 1:\nGather data"
 21    },
 22    {
 23      "id": "c2d3e4f5a6b7c8d9",
 24      "type": "text",
 25      "x": 200,
 26      "y": 200,
 27      "width": 150,
 28      "height": 80,
 29      "text": "**Decision**\n\nIs data valid?",
 30      "color": "3"
 31    },
 32    {
 33      "id": "d3e4f5a6b7c8d9e0",
 34      "type": "text",
 35      "x": 400,
 36      "y": 200,
 37      "width": 150,
 38      "height": 60,
 39      "text": "Process data"
 40    },
 41    {
 42      "id": "e4f5a6b7c8d9e0f1",
 43      "type": "text",
 44      "x": 0,
 45      "y": 200,
 46      "width": 150,
 47      "height": 60,
 48      "text": "Request new data",
 49      "color": "1"
 50    },
 51    {
 52      "id": "f5a6b7c8d9e0f1a2",
 53      "type": "text",
 54      "x": 400,
 55      "y": 320,
 56      "width": 150,
 57      "height": 60,
 58      "text": "**End**",
 59      "color": "4"
 60    }
 61  ],
 62  "edges": [
 63    {
 64      "id": "a6b7c8d9e0f1a2b3",
 65      "fromNode": "a0b1c2d3e4f5a6b7",
 66      "fromSide": "bottom",
 67      "toNode": "b1c2d3e4f5a6b7c8",
 68      "toSide": "top"
 69    },
 70    {
 71      "id": "b7c8d9e0f1a2b3c4",
 72      "fromNode": "b1c2d3e4f5a6b7c8",
 73      "fromSide": "bottom",
 74      "toNode": "c2d3e4f5a6b7c8d9",
 75      "toSide": "top"
 76    },
 77    {
 78      "id": "c8d9e0f1a2b3c4d5",
 79      "fromNode": "c2d3e4f5a6b7c8d9",
 80      "fromSide": "right",
 81      "toNode": "d3e4f5a6b7c8d9e0",
 82      "toSide": "left",
 83      "label": "Yes",
 84      "color": "4"
 85    },
 86    {
 87      "id": "d9e0f1a2b3c4d5e6",
 88      "fromNode": "c2d3e4f5a6b7c8d9",
 89      "fromSide": "left",
 90      "toNode": "e4f5a6b7c8d9e0f1",
 91      "toSide": "right",
 92      "label": "No",
 93      "color": "1"
 94    },
 95    {
 96      "id": "e0f1a2b3c4d5e6f7",
 97      "fromNode": "e4f5a6b7c8d9e0f1",
 98      "fromSide": "top",
 99      "fromEnd": "none",
100      "toNode": "b1c2d3e4f5a6b7c8",
101      "toSide": "left",
102      "toEnd": "arrow"
103    },
104    {
105      "id": "f1a2b3c4d5e6f7a8",
106      "fromNode": "d3e4f5a6b7c8d9e0",
107      "fromSide": "bottom",
108      "toNode": "f5a6b7c8d9e0f1a2",
109      "toSide": "top"
110    }
111  ]
112}

ID Generation

Node and edge IDs must be unique strings. Obsidian generates 16-character hexadecimal IDs:

1"id": "6f0ad84f44ce9c17"
2"id": "a3b2c1d0e9f8g7h6"
3"id": "1234567890abcdef"

This format is a 16-character lowercase hex string (64-bit random value).

Layout Guidelines

Positioning

Coordinates can be negative (canvas extends infinitely)
x increases to the right
y increases downward
Position refers to top-left corner of node

Recommended Sizes

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

Spacing

Leave 20-50px padding inside groups
Space nodes 50-100px apart for readability
Align nodes to grid (multiples of 10 or 20) for cleaner layouts

Validation Rules

All id values must be unique across nodes and edges
fromNode and toNode must reference existing node IDs
Required fields must be present for each node type
type must be one of: text, file, link, group
backgroundStyle must be one of: cover, ratio, repeat
fromSide, toSide must be one of: top, right, bottom, left
fromEnd, toEnd must be one of: none, arrow
Color presets must be "1" through "6" or valid hex color

Json Canvas

See It In Action

AI Conversation Simulator

Quick Start (3 Steps)

Install

Config

First Trigger

Commands

Typical Use Cases

Project Planning Board

Research Mind Map

Process Flowchart

Overview

JSON Canvas Skill

Overview

File Structure

Nodes

Z-Index Ordering

Generic Node Attributes

Text Nodes

Newline Escaping (Common Pitfall)

File Nodes

Link Nodes

Group Nodes

Background Styles

Edges

Side Values

End Shapes

Colors

Hex Colors

Preset Colors

Complete Examples

Simple Canvas with Text and Connections

Project Board with Groups

Research Canvas with Files and Links

Flowchart

ID Generation

Layout Guidelines

Positioning

Recommended Sizes

Spacing

Validation Rules

References

What Users Are Saying

Environment Matrix

Dependencies

Framework Support

Context Window

Security & Privacy

Information

Related Skills

Json Canvas

Brand Guidelines

Brand Guidelines