Obsidian Canvas Architect
Status: Active
Author: Richard Fremmerlid
Domain: Obsidian Integration
Depends On: obsidian-vault-crud (WP06)
Purpose
Obsidian Canvas files (.canvas) use the JSON Canvas Spec 1.0 to define visual
boards with nodes (text, file references, URLs) connected by directional edges.
This skill lets agents programmatically generate visual planning boards, architecture
diagrams, and execution flowcharts.
JSON Canvas Spec 1.0 Overview
A .canvas file is JSON with two top-level arrays:
{
"nodes": [
{"id": "1", "type": "text", "text": "Hello", "x": 0, "y": 0, "width": 250, "height": 60},
{"id": "2", "type": "file", "file": "path/to/note.md", "x": 300, "y": 0, "width": 250, "height": 60}
],
"edges": [
{"id": "e1", "fromNode": "1", "toNode": "2", "fromSide": "right", "toSide": "left"}
]
}
Node Types
| Type |
Required Fields |
Purpose |
text |
text, x, y, width, height |
Inline text content |
file |
file, x, y, width, height |
Reference to a vault note |
link |
url, x, y, width, height |
External URL |
group |
label, x, y, width, height |
Visual grouping container |
Edge Properties
| Field |
Required |
Description |
fromNode |
Yes |
Source node ID |
toNode |
Yes |
Target node ID |
fromSide |
No |
top, right, bottom, left |
toSide |
No |
top, right, bottom, left |
label |
No |
Edge label text |
Available Commands
Create a Canvas
python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py create --file <path.canvas>
Add a Node
python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py add-node \
--file <path.canvas> --type text --text "My Node" --x 100 --y 200
Add an Edge
python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py add-edge \
--file <path.canvas> --from-node id1 --to-node id2
Read a Canvas
python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py read --file <path.canvas>
Safety Guarantees
- All writes go through
obsidian-vault-crud atomic write protocol
- Malformed JSON triggers a clean error report, never a crash
- Node IDs are auto-generated (UUID) to prevent collisions
- Schema validation ensures all required fields are present before write
1---2name: obsidian-canvas-architect-43description: Programmatically create and manipulate Obsidian Canvas (.canvas) files using JSON Canvas Spec 1.0. Enables agents to generate visual flowcharts, architecture diagrams, and planning boards.4---56# Obsidian Canvas Architect78**Status:** Active9**Author:** Richard Fremmerlid10**Domain:** Obsidian Integration11**Depends On:** `obsidian-vault-crud` (WP06)1213## Purpose1415Obsidian Canvas files (`.canvas`) use the JSON Canvas Spec 1.0 to define visual16boards with nodes (text, file references, URLs) connected by directional edges.17This skill lets agents programmatically generate visual planning boards, architecture18diagrams, and execution flowcharts.1920## JSON Canvas Spec 1.0 Overview2122A `.canvas` file is JSON with two top-level arrays:2324```json25{26 "nodes": [27 {"id": "1", "type": "text", "text": "Hello", "x": 0, "y": 0, "width": 250, "height": 60},28 {"id": "2", "type": "file", "file": "path/to/note.md", "x": 300, "y": 0, "width": 250, "height": 60}29 ],30 "edges": [31 {"id": "e1", "fromNode": "1", "toNode": "2", "fromSide": "right", "toSide": "left"}32 ]33}34```3536### Node Types37| Type | Required Fields | Purpose |38|:-----|:---------------|:--------|39| `text` | `text`, `x`, `y`, `width`, `height` | Inline text content |40| `file` | `file`, `x`, `y`, `width`, `height` | Reference to a vault note |41| `link` | `url`, `x`, `y`, `width`, `height` | External URL |42| `group` | `label`, `x`, `y`, `width`, `height` | Visual grouping container |4344### Edge Properties45| Field | Required | Description |46|:------|:---------|:------------|47| `fromNode` | Yes | Source node ID |48| `toNode` | Yes | Target node ID |49| `fromSide` | No | `top`, `right`, `bottom`, `left` |50| `toSide` | No | `top`, `right`, `bottom`, `left` |51| `label` | No | Edge label text |5253## Available Commands5455### Create a Canvas56```bash57python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py create --file <path.canvas>58```5960### Add a Node61```bash62python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py add-node \63 --file <path.canvas> --type text --text "My Node" --x 100 --y 20064```6566### Add an Edge67```bash68python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py add-edge \69 --file <path.canvas> --from-node id1 --to-node id270```7172### Read a Canvas73```bash74python plugins/obsidian-integration/skills/obsidian-canvas-architect/scripts/canvas_ops.py read --file <path.canvas>75```7677## Safety Guarantees78- All writes go through `obsidian-vault-crud` atomic write protocol79- Malformed JSON triggers a clean error report, never a crash80- Node IDs are auto-generated (UUID) to prevent collisions81- Schema validation ensures all required fields are present before write
richfrem