json-canvas

JSON Canvas Skill

Third-party attribution: This content includes material derived from kepano/obsidian-skills. See THIRD_PARTY_NOTICES.md.

File Structure

A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:

{
  "nodes": [],
  "edges": []
}

Common Workflows

1. Create a .canvas file with the base structure {"nodes": [], "edges": []}
2. Generate unique 16-character hex IDs for each node (e.g., "6f0ad84f44ce9c17")
3. Add nodes with required fields: id, type, x, y, width, height
4. Add edges referencing valid node IDs via fromNode and toNode
5. Verify all fromNode/toNode values exist in the nodes array

Nodes

Generic Node Attributes

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")

Text Node

{
  "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.

File Node

{
  "id": "a1b2c3d4e5f67890",
  "type": "file",
  "x": 500, "y": 0, "width": 400, "height": 300,
  "file": "Attachments/diagram.png"
}

Link Node

{
  "id": "c3d4e5f678901234",
  "type": "link",
  "x": 1000, "y": 0, "width": 400, "height": 200,
  "url": "https://obsidian.md"
}

Group Node

{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50, "y": -50, "width": 1000, "height": 600,
  "label": "Project Overview",
  "color": "4"
}

Edges

{
  "id": "0123456789abcdef",
  "fromNode": "6f0ad84f44ce9c17",
  "fromSide": "right",
  "toNode": "a1b2c3d4e5f67890",
  "toSide": "left",
  "toEnd": "arrow",
  "label": "leads to"
}

Attribute	Required	Values
fromSide/toSide	No	top, right, bottom, left
fromEnd/toEnd	No	none, arrow (toEnd defaults to arrow)

Colors

Preset	Color
"1"	Red
"2"	Orange
"3"	Yellow
"4"	Green
"5"	Cyan
"6"	Purple

Layout Guidelines

• Coordinates can be negative (canvas extends infinitely)
• x increases right, y increases down; position is the top-left corner
• Space nodes 50-100px apart; leave 20-50px padding inside groups
• Align to grid (multiples of 10 or 20) for cleaner layouts

Validation Checklist

1. All id values are unique across nodes and edges
2. Every fromNode/toNode references an existing node ID
3. type is one of: text, file, link, group
4. Required type-specific fields are present
5. JSON is valid and parseable

References

• JSON Canvas Spec 1.0