Json Canvas

Creates and manipulates JSON Canvas files (.canvas) for visual tools like Obsidian's Canvas feature. Handles the full workflow from generating unique 16-character hex IDs to positioning nodes with proper spacing to connecting them with labeled edges. Validates that all edge references point to existing nodes, checks for ID collisions, and ensures the JSON structure matches the official spec. Useful when building mind maps, flowcharts, or any visual documentation that needs programmatic generation. The validation checks are thorough but the positioning logic could be smarter about automatic layouts.

skills.sh installs: 76.9K
GitHub stars: 51.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add kepano/obsidian-skills --skill json-canvas --agent claude-code

Installs into .claude/skills of the current project.

Files

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