json-canvas

Name: json-canvas
Author: KevRojo

374stars25forks

How to install json-canvas?

kevrojo/dulus/json-canvas

$npx -y skills add KevRojo/Dulus --skill json-canvas

Installs into the current project.

Summary

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

Files · 1

View on GitHub

SKILL.md

1	# JSON Canvas Skill
2
3	## File Structure
4
5	A canvas file (`.canvas`) contains two top-level arrays following the [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/):
6
7	```json
8	{
9	"nodes": [],
10	"edges": []
11	}
12	```
13
14	- `nodes` (optional): Array of node objects
15	- `edges` (optional): Array of edge objects connecting nodes
16
17	## Common Workflows
18
19	### 1. Create a New Canvas
20
21	1. Create a `.canvas` file with the base structure `{"nodes": [], "edges": []}`
22	2. Generate unique 16-character hex IDs for each node (e.g., `"6f0ad84f44ce9c17"`)
23	3. Add nodes with required fields: `id`, `type`, `x`, `y`, `width`, `height`
24	4. Add edges referencing valid node IDs via `fromNode` and `toNode`
25	5. Validate: Parse the JSON to confirm it is valid. Verify all `fromNode`/`toNode` values exist in the nodes array
26
27	### 2. Add a Node to an Existing Canvas
28
29	1. Read and parse the existing `.canvas` file
30	2. Generate a unique ID that does not collide with existing node or edge IDs
31	3. Choose position (`x`, `y`) that avoids overlapping existing nodes (leave 50-100px spacing)
32	4. Append the new node object to the `nodes` array
33	5. Optionally add edges connecting the new node to existing nodes
34	6. Validate: Confirm all IDs are unique and all edge references resolve to existing nodes
35
36	### 3. Connect Two Nodes
37
38	1. Identify the source and target node IDs
39	2. Generate a unique edge ID
40	3. Set `fromNode` and `toNode` to the source and target IDs
41	4. Optionally set `fromSide`/`toSide` (top, right, bottom, left) for anchor points
42	5. Optionally set `label` for descriptive text on the edge
43	6. Append the edge to the `edges` array
44	7. Validate: Confirm both `fromNode` and `toNode` reference existing node IDs
45
46	### 4. Edit an Existing Canvas
47
48	1. Read and parse the `.canvas` file as JSON
49	2. Locate the target node or edge by `id`
50	3. Modify the desired attributes (text, position, color, etc.)
51	4. Write the updated JSON back to the file
52	5. Validate: Re-check all ID uniqueness and edge reference integrity after editing
53
54	## Nodes
55
56	Nodes are objects placed on the canvas. Array order determines z-index: first node = bottom layer, last node = top layer.
57
58	### Generic Node Attributes
59
60	\| Attribute \| Required \| Type \| Description \|
61	\|-----------\|----------\|------\|-------------\|
62	\| `id` \| Yes \| string \| Unique 16-char hex identifier \|
63	\| `type` \| Yes \| string \| `text`, `file`, `link`, or `group` \|
64	\| `x` \| Yes \| integer \| X position in pixels \|
65	\| `y` \| Yes \| integer \| Y position in pixels \|
66	\| `width` \| Yes \| integer \| Width in pixels \|
67	\| `height` \| Yes \| integer \| Height in pixels \|
68	\| `color` \| No \| canvasColor \| Preset `"1"`-`"6"` or hex (e.g., `"#FF0000"`) \|
69
70	### Text Nodes
71
72	\| Attribute \| Required \| Type \| Description \|
73	\|-----------\|----------\|------\|-------------\|
74	\| `text` \| Yes \| string \| Plain text with Markdown syntax \|
75
76	```json
77	{
78	"id": "6f0ad84f44ce9c17",
79	"type": "text",
80	"x": 0,
81	"y": 0,
82	"width": 400,
83	"height": 200,
84	"text": "# Hello World\n\nThis is Markdown content."
85	}
86	```
87
88	Newline pitfall: Use `\n` for line breaks in JSON strings. Do not use the literal `\\n` -- Obsidian renders that as the characters `\` and `n`.
89
90	### File Nodes
91
92	\| Attribute \| Required \| Type \| Description \|
93	\|-----------\|----------\|------\|-------------\|
94	\| `file` \| Yes \| string \| Path to file within the system \|
95	\| `subpath` \| No \| string \| Link to heading or block (starts with `#`) \|
96
97	```json
98	{
99	"id": "a1b2c3d4e5f67890",
100	"type": "file",
101	"x": 500,
102	"y": 0,
103	"width": 400,
104	"height": 300,
105	"file": "Attachments/diagram.png"
106	}
107	```
108
109	### Link Nodes
110
111	\| Attribute \| Required \| Type \| Description \|
112	\|-----------\|----------\|------\|-------------\|
113	\| `url` \| Yes \| string \| External URL \|
114
115	```json
116	{
117	"id": "c3d4e5f678901234",
118	"type": "link",
119	"x": 1000,
120	"y": 0,
121	"width": 400,
122	"height": 200,
123	"url": "https://obsidian.md"
124	}
125	```
126
127	### Group Nodes
128
129	Groups are visual containers for organizing other nodes. Position child nodes inside the group's bounds.
130
131	\| Attribute \| Required \| Type \| Description \|
132	\|-----------\|----------\|------\|-------------\|
133	\| `label` \| No \| string \| Text label for the group \|
134	\| `background` \| No \| string \| Path to background image \|
135	\| `backgroundStyle` \| No \| string \| `cover`, `ratio`, or `repeat` \|
136
137	```json
138	{
139	"id": "d4e5f6789012345a",
140	"type": "group",
141	"x": -50,
142	"y": -50,
143	"width": 1000,
144	"height": 600,
145	"label": "Project Overview",
146	"color": "4"
147	}
148	```
149
150	## Edges
151
152	Edges connect nodes via `fromNode` and `toNode` IDs.
153
154	\| Attribute \| Required \| Type \| Default \| Description \|
155	\|-----------\|----------\|------\|---------\|-------------\|
156	\| `id` \| Yes \| string \| - \| Unique identifier \|
157	\| `fromNode` \| Yes \| string \| - \| Source node ID \|
158	\| `fromSide` \| No \| string \| - \| `top`, `right`, `bottom`, o

People who liked this also viewed

6 picks

Type

json-canvas

374stars25forks

View on GitHub

How to install json-canvas?

kevrojo/dulus/json-canvas

$npx -y skills add KevRojo/Dulus --skill json-canvas

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# JSON Canvas Skill
2
3	## File Structure
4
5	A canvas file (`.canvas`) contains two top-level arrays following the [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/):
6
7	```json
8	{
9	"nodes": [],
10	"edges": []
11	}
12	```
13
14	- `nodes` (optional): Array of node objects
15	- `edges` (optional): Array of edge objects connecting nodes
16
17	## Common Workflows
18
19	### 1. Create a New Canvas
20
21	1. Create a `.canvas` file with the base structure `{"nodes": [], "edges": []}`
22	2. Generate unique 16-character hex IDs for each node (e.g., `"6f0ad84f44ce9c17"`)
23	3. Add nodes with required fields: `id`, `type`, `x`, `y`, `width`, `height`
24	4. Add edges referencing valid node IDs via `fromNode` and `toNode`
25	5. Validate: Parse the JSON to confirm it is valid. Verify all `fromNode`/`toNode` values exist in the nodes array
26
27	### 2. Add a Node to an Existing Canvas
28
29	1. Read and parse the existing `.canvas` file
30	2. Generate a unique ID that does not collide with existing node or edge IDs
31	3. Choose position (`x`, `y`) that avoids overlapping existing nodes (leave 50-100px spacing)
32	4. Append the new node object to the `nodes` array
33	5. Optionally add edges connecting the new node to existing nodes
34	6. Validate: Confirm all IDs are unique and all edge references resolve to existing nodes
35
36	### 3. Connect Two Nodes
37
38	1. Identify the source and target node IDs
39	2. Generate a unique edge ID
40	3. Set `fromNode` and `toNode` to the source and target IDs
41	4. Optionally set `fromSide`/`toSide` (top, right, bottom, left) for anchor points
42	5. Optionally set `label` for descriptive text on the edge
43	6. Append the edge to the `edges` array
44	7. Validate: Confirm both `fromNode` and `toNode` reference existing node IDs
45
46	### 4. Edit an Existing Canvas
47
48	1. Read and parse the `.canvas` file as JSON
49	2. Locate the target node or edge by `id`
50	3. Modify the desired attributes (text, position, color, etc.)
51	4. Write the updated JSON back to the file
52	5. Validate: Re-check all ID uniqueness and edge reference integrity after editing
53
54	## Nodes
55
56	Nodes are objects placed on the canvas. Array order determines z-index: first node = bottom layer, last node = top layer.
57
58	### Generic Node Attributes
59
60	\| Attribute \| Required \| Type \| Description \|
61	\|-----------\|----------\|------\|-------------\|
62	\| `id` \| Yes \| string \| Unique 16-char hex identifier \|
63	\| `type` \| Yes \| string \| `text`, `file`, `link`, or `group` \|
64	\| `x` \| Yes \| integer \| X position in pixels \|
65	\| `y` \| Yes \| integer \| Y position in pixels \|
66	\| `width` \| Yes \| integer \| Width in pixels \|
67	\| `height` \| Yes \| integer \| Height in pixels \|
68	\| `color` \| No \| canvasColor \| Preset `"1"`-`"6"` or hex (e.g., `"#FF0000"`) \|
69
70	### Text Nodes
71
72	\| Attribute \| Required \| Type \| Description \|
73	\|-----------\|----------\|------\|-------------\|
74	\| `text` \| Yes \| string \| Plain text with Markdown syntax \|
75
76	```json
77	{
78	"id": "6f0ad84f44ce9c17",
79	"type": "text",
80	"x": 0,
81	"y": 0,
82	"width": 400,
83	"height": 200,
84	"text": "# Hello World\n\nThis is Markdown content."
85	}
86	```
87
88	Newline pitfall: Use `\n` for line breaks in JSON strings. Do not use the literal `\\n` -- Obsidian renders that as the characters `\` and `n`.
89
90	### File Nodes
91
92	\| Attribute \| Required \| Type \| Description \|
93	\|-----------\|----------\|------\|-------------\|
94	\| `file` \| Yes \| string \| Path to file within the system \|
95	\| `subpath` \| No \| string \| Link to heading or block (starts with `#`) \|
96
97	```json
98	{
99	"id": "a1b2c3d4e5f67890",
100	"type": "file",
101	"x": 500,
102	"y": 0,
103	"width": 400,
104	"height": 300,
105	"file": "Attachments/diagram.png"
106	}
107	```
108
109	### Link Nodes
110
111	\| Attribute \| Required \| Type \| Description \|
112	\|-----------\|----------\|------\|-------------\|
113	\| `url` \| Yes \| string \| External URL \|
114
115	```json
116	{
117	"id": "c3d4e5f678901234",
118	"type": "link",
119	"x": 1000,
120	"y": 0,
121	"width": 400,
122	"height": 200,
123	"url": "https://obsidian.md"
124	}
125	```
126
127	### Group Nodes
128
129	Groups are visual containers for organizing other nodes. Position child nodes inside the group's bounds.
130
131	\| Attribute \| Required \| Type \| Description \|
132	\|-----------\|----------\|------\|-------------\|
133	\| `label` \| No \| string \| Text label for the group \|
134	\| `background` \| No \| string \| Path to background image \|
135	\| `backgroundStyle` \| No \| string \| `cover`, `ratio`, or `repeat` \|
136
137	```json
138	{
139	"id": "d4e5f6789012345a",
140	"type": "group",
141	"x": -50,
142	"y": -50,
143	"width": 1000,
144	"height": 600,
145	"label": "Project Overview",
146	"color": "4"
147	}
148	```
149
150	## Edges
151
152	Edges connect nodes via `fromNode` and `toNode` IDs.
153
154	\| Attribute \| Required \| Type \| Default \| Description \|
155	\|-----------\|----------\|------\|---------\|-------------\|
156	\| `id` \| Yes \| string \| - \| Unique identifier \|
157	\| `fromNode` \| Yes \| string \| - \| Source node ID \|
158	\| `fromSide` \| No \| string \| - \| `top`, `right`, `bottom`, o

People who liked this also viewed

6 picks

Type