json-canvas
Build and modify .canvas files following the JSON Canvas Spec 1.0, adding text, file, link, and group nodes with precise positioning and connections. Manage edges between nodes, apply colors, and validate your canvas structure to ensure all references resolve correctly.
JSON Canvas lets you create and edit .canvas files with nodes, edges, and groups for visual organization in Obsidian.
AI-generated summary based on this skill's SKILL.md
Install
kepano/obsidian-skills/json-canvas
git clone https://github.com/kepano/obsidian-skills
cp -r obsidian-skills/skills/json-canvas ~/.claude/skills/json-canvasFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create canvas files in Obsidian?
json-canvas helps you create .canvas files by building JSON structures that Obsidian recognizes. Start by defining nodes (text, file, link, or group types) with unique IDs and x/y coordinates for positioning. Add edges to connect nodes, then save as a .canvas file. json-canvas validates your node IDs and connections to ensure the file loads correctly in Obsidian.
What is the JSON Canvas file format and structure?
json-canvas follows the JSON Canvas Spec 1.0 standard. A .canvas file contains two main arrays: nodes (with id, type, x, y, width, height, and content properties) and edges (with id, fromNode, fromSide, toNode, toSide properties). Groups organize nodes visually. json-canvas validates that all node references in edges exist and match their IDs correctly.
How can I add nodes to a canvas file and connect them?
json-canvas lets you add multiple node types: text nodes for labels, file nodes linking to Obsidian documents, link nodes for URLs, and group nodes for organization. Each node needs a unique ID and x/y positioning. Connect nodes using edges by specifying fromNode, toNode, and which sides they connect from (top, bottom, left, right). json-canvas ensures all connections reference valid node IDs.
Can I build mind maps, flowcharts, and project boards?
json-canvas supports building mind maps, flowcharts, and project boards in Obsidian Canvas format. Use text nodes for ideas, file nodes to link related documents, and edges to show relationships. Group nodes help organize sections visually. Apply colors and positioning to create clear hierarchies. json-canvas validates your entire structure so your diagrams display correctly in Obsidian.
How do I validate my canvas file and check node references?
json-canvas validates canvas file integrity by checking that every edge references existing node IDs and that all connections are properly formed. It verifies node positioning coordinates, ensures unique IDs, and confirms that fromSide and toSide values are valid. Run validation before saving to catch reference errors and structural issues early.
What styling and organization options does json-canvas support?
json-canvas supports colors for nodes and edges to enhance visual organization. Group nodes let you cluster related items together. You control precise x/y positioning and dimensions for each node. The JSON Canvas Spec 1.0 allows customization of text content, file links, and connection styling. json-canvas helps you apply these options consistently across your canvas files.
SKILL.md
rendered from the published skill — quoted content, verbatim
JSON Canvas Skill
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 objectsedges(optional): Array of edge objects connecting nodes
Common Workflows
1. Create a New Canvas
- Create a
.canvasfile 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
fromNodeandtoNode - Validate: Parse the JSON to confirm it is valid. Verify all
fromNode/toNodevalues exist in the nodes array
2. Add a Node to an Existing Canvas
- Read and parse the existing
.canvasfile - Generate a unique ID that does not collide
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/json-canvas/SKILL.md
skills/json-canvas/references/EXAMPLES.md