Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections per the JSON Canvas 1.0 spec. USE WHEN working with .canvas files or building visual canvases, mind maps, knowledge maps, or flowcharts (e.g. in Obsidian).
Instrucciones de origen · Vista previa de solo lectura
name
json-canvas
description
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections per the JSON Canvas 1.0 spec. USE WHEN working with .canvas files or building visual canvases, mind maps, knowledge maps, or flowcharts (e.g. in Obsidian).
cluster
research-knowledge
version
1.0.0
origin
antigravity-awesome-skills (MIT)
risk
unknown
source
https://github.com/kepano/obsidian-skills
date_added
2026-03-21
JSON Canvas Skill
When to Use
Use when creating or editing .canvas files for Obsidian.
Use for mind maps, flowcharts, visual note structures, or connected canvases.
Use when the user explicitly mentions JSON Canvas or Obsidian Canvas files.
File Structure
A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:
{"nodes":[],"edges":[]}
nodes (optional): Array of node objects
edges (optional): Array of edge objects connecting nodes
Common Workflows
1. Create a New Canvas
Create a .canvas file with the base structure {"nodes": [], "edges": []}
Generate unique 16-character hex IDs for each node (e.g., "6f0ad84f44ce9c17")
Add nodes with required fields: id, type, x, y, width, height
Add edges referencing valid node IDs via fromNode and toNode
Validate: Parse the JSON to confirm it is valid. Verify all fromNode/toNode values exist in the nodes array
2. Add a Node to an Existing Canvas
Read and parse the existing .canvas file
Generate a unique ID that does not collide with existing node or edge IDs
Choose position (x, y) that avoids overlapping existing nodes (leave 50-100px spacing)
Append the new node object to the nodes array
Optionally add edges connecting the new node to existing nodes
Validate: Confirm all IDs are unique and all edge references resolve to existing nodes
3. Connect Two Nodes
Identify the source and target node IDs
Generate a unique edge ID
Set fromNode and toNode to the source and target IDs
Optionally set fromSide/toSide (top, right, bottom, left) for anchor points
Optionally set label for descriptive text on the edge
Append the edge to the edges array
Validate: Confirm both fromNode and toNode reference existing node IDs
4. Edit an Existing Canvas
Read and parse the .canvas file as JSON
Locate the target node or edge by id
Modify the desired attributes (text, position, color, etc.)
Write the updated JSON back to the file
Validate: Re-check all ID uniqueness and edge reference integrity after editing
Nodes
Nodes are objects placed on the canvas. Array order determines z-index: first node = bottom layer, last node = top layer.
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 Nodes
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.
