Productivity
json-canvas avatar

json-canvas

Create, edit, and manage JSON Canvas files (.canvas) in Obsidian. Ideal for building visual workflows, mind maps, flowcharts, and organizing complex node-based relationships.

Introduction

The json-canvas skill empowers agents to programmatically manipulate Obsidian Canvas files, which are essential for visual note-taking and knowledge management. By adhering to the official JSON Canvas Spec 1.0, this skill enables the creation and structural modification of .canvas files, allowing for the automation of complex diagrams, project boards, and brainstorming sessions directly within your Obsidian vault.

This tool is specifically designed for users who need to bridge the gap between unstructured text notes and structured visual interfaces. Whether you are generating a flowchart from a collection of Markdown files, organizing tasks into Kanban-style groups, or mapping out conceptual relationships between nodes, the skill handles the underlying JSON serialization, ID generation, and coordinate calculations required to maintain a valid, rendering-ready canvas.

  • Automated Node Creation: Precisely place nodes of various types (text, file, link, group) using X/Y coordinates to ensure clean, non-overlapping layouts.

  • Dynamic Edge Connectivity: Easily link nodes with directional or non-directional edges, including side-anchoring (top, right, bottom, left) and descriptive labels to define relationships.

  • Group Management: Create and organize groups to contain child nodes, enabling hierarchical visual structures perfect for project management or system architecture diagrams.

  • Schema Validation: Automatically generates unique 16-character hexadecimal IDs for all entities and verifies structural integrity, ensuring that edges always reference existing nodes to prevent visual breaking.

  • The skill requires a fundamental understanding of JSON Canvas structure: nodes (id, type, x, y, width, height) and edges (fromNode, toNode).

  • Ensure coordinate alignment is maintained by using multiples of 10 or 20 for cleaner grid-based aesthetics in your Obsidian workspace.

  • When inserting text nodes, ensure the text content uses proper \n newline characters for JSON compatibility to prevent rendering issues within Obsidian.

  • Always validate node IDs and edge references before saving changes to the .canvas file to ensure the graphical output remains consistent and interactive.

  • Utilize color presets (1-6) or custom hex values to categorize nodes or emphasize priority levels in your visual workspace.

Repository Stats

Stars
26,960
Forks
1,777
Open Issues
33
Language
Not provided
Default Branch
main
Sync Status
Idle
Last Synced
Apr 28, 2026, 12:38 PM
View on GitHub