1# JSON Canvas Complete Examples
2 
3## Simple Canvas with Text and Connections
4 
5```json
6{
7  "nodes": [
8    {
9      "id": "8a9b0c1d2e3f4a5b",
10      "type": "text",
11      "x": 0,
12      "y": 0,
13      "width": 300,
14      "height": 150,
15      "text": "# Main Idea\n\nThis is the central concept."
16    },
17    {
18      "id": "1a2b3c4d5e6f7a8b",
19      "type": "text",
20      "x": 400,
21      "y": -100,
22      "width": 250,
23      "height": 100,
24      "text": "## Supporting Point A\n\nDetails here."
25    },
26    {
27      "id": "2b3c4d5e6f7a8b9c",
28      "type": "text",
29      "x": 400,
30      "y": 100,
31      "width": 250,
32      "height": 100,
33      "text": "## Supporting Point B\n\nMore details."
34    }
35  ],
36  "edges": [
37    {
38      "id": "3c4d5e6f7a8b9c0d",
39      "fromNode": "8a9b0c1d2e3f4a5b",
40      "fromSide": "right",
41      "toNode": "1a2b3c4d5e6f7a8b",
42      "toSide": "left"
43    },
44    {
45      "id": "4d5e6f7a8b9c0d1e",
46      "fromNode": "8a9b0c1d2e3f4a5b",
47      "fromSide": "right",
48      "toNode": "2b3c4d5e6f7a8b9c",
49      "toSide": "left"
50    }
51  ]
52}
53```
54 
55## Project Board with Groups
56 
57```json
58{
59  "nodes": [
60    {
61      "id": "5e6f7a8b9c0d1e2f",
62      "type": "group",
63      "x": 0,
64      "y": 0,
65      "width": 300,
66      "height": 500,
67      "label": "To Do",
68      "color": "1"
69    },
70    {
71      "id": "6f7a8b9c0d1e2f3a",
72      "type": "group",
73      "x": 350,
74      "y": 0,
75      "width": 300,
76      "height": 500,
77      "label": "In Progress",
78      "color": "3"
79    },
80    {
81      "id": "7a8b9c0d1e2f3a4b",
82      "type": "group",
83      "x": 700,
84      "y": 0,
85      "width": 300,
86      "height": 500,
87      "label": "Done",
88      "color": "4"
89    },
90    {
91      "id": "8b9c0d1e2f3a4b5c",
92      "type": "text",
93      "x": 20,
94      "y": 50,
95      "width": 260,
96      "height": 80,
97      "text": "## Task 1\n\nImplement feature X"
98    },
99    {
100      "id": "9c0d1e2f3a4b5c6d",
101      "type": "text",
102      "x": 370,
103      "y": 50,
104      "width": 260,
105      "height": 80,
106      "text": "## Task 2\n\nReview PR #123",
107      "color": "2"
108    },
109    {
110      "id": "0d1e2f3a4b5c6d7e",
111      "type": "text",
112      "x": 720,
113      "y": 50,
114      "width": 260,
115      "height": 80,
116      "text": "## Task 3\n\n~~Setup CI/CD~~"
117    }
118  ],
119  "edges": []
120}
121```
122 
123## Research Canvas with Files and Links
124 
125```json
126{
127  "nodes": [
128    {
129      "id": "1e2f3a4b5c6d7e8f",
130      "type": "text",
131      "x": 300,
132      "y": 200,
133      "width": 400,
134      "height": 200,
135      "text": "# Research Topic\n\n## Key Questions\n\n- How does X affect Y?\n- What are the implications?",
136      "color": "5"
137    },
138    {
139      "id": "2f3a4b5c6d7e8f9a",
140      "type": "file",
141      "x": 0,
142      "y": 0,
143      "width": 250,
144      "height": 150,
145      "file": "Literature/Paper A.pdf"
146    },
147    {
148      "id": "3a4b5c6d7e8f9a0b",
149      "type": "file",
150      "x": 0,
151      "y": 200,
152      "width": 250,
153      "height": 150,
154      "file": "Notes/Meeting Notes.md",
155      "subpath": "#Key Insights"
156    },
157    {
158      "id": "4b5c6d7e8f9a0b1c",
159      "type": "link",
160      "x": 0,
161      "y": 400,
162      "width": 250,
163      "height": 100,
164      "url": "https://example.com/research"
165    },
166    {
167      "id": "5c6d7e8f9a0b1c2d",
168      "type": "file",
169      "x": 750,
170      "y": 150,
171      "width": 300,
172      "height": 250,
173      "file": "Attachments/diagram.png"
174    }
175  ],
176  "edges": [
177    {
178      "id": "6d7e8f9a0b1c2d3e",
179      "fromNode": "2f3a4b5c6d7e8f9a",
180      "fromSide": "right",
181      "toNode": "1e2f3a4b5c6d7e8f",
182      "toSide": "left",
183      "label": "supports"
184    },
185    {
186      "id": "7e8f9a0b1c2d3e4f",
187      "fromNode": "3a4b5c6d7e8f9a0b",
188      "fromSide": "right",
189      "toNode": "1e2f3a4b5c6d7e8f",
190      "toSide": "left",
191      "label": "informs"
192    },
193    {
194      "id": "8f9a0b1c2d3e4f5a",
195      "fromNode": "4b5c6d7e8f9a0b1c",
196      "fromSide": "right",
197      "toNode": "1e2f3a4b5c6d7e8f",
198      "toSide": "left",
199      "toEnd": "arrow",
200      "color": "6"
201    },
202    {
203      "id": "9a0b1c2d3e4f5a6b",
204      "fromNode": "1e2f3a4b5c6d7e8f",
205      "fromSide": "right",
206      "toNode": "5c6d7e8f9a0b1c2d",
207      "toSide": "left",
208      "label": "visualized by"
209    }
210  ]
211}
212```
213 
214## Flowchart
215 
216```json
217{
218  "nodes": [
219    {
220      "id": "a0b1c2d3e4f5a6b7",
221      "type": "text",
222      "x": 200,
223      "y": 0,
224      "width": 150,
225      "height": 60,
226      "text": "**Start**",
227      "color": "4"
228    },
229    {
230      "id": "b1c2d3e4f5a6b7c8",
231      "type": "text",
232      "x": 200,
233      "y": 100,
234      "width": 150,
235      "height": 60,
236      "text": "Step 1:\nGather data"
237    },
238    {
239      "id": "c2d3e4f5a6b7c8d9",
240      "type": "text",
241      "x": 200,
242      "y": 200,
243      "width": 150,
244      "height": 80,
245      "text": "**Decision**\n\nIs data valid?",
246      "color": "3"
247    },
248    {
249      "id": "d3e4f5a6b7c8d9e0",
250      "type": "text",
251      "x": 400,
252      "y": 200,
253      "width": 150,
254      "height": 60,
255      "text": "Process data"
256    },
257    {
258      "id": "e4f5a6b7c8d9e0f1",
259      "type": "text",
260      "x": 0,
261      "y": 200,
262      "width": 150,
263      "height": 60,
264      "text": "Request new data",
265      "color": "1"
266    },
267    {
268      "id": "f5a6b7c8d9e0f1a2",
269      "type": "text",
270      "x": 400,
271      "y": 320,
272      "width": 150,
273      "height": 60,
274      "text": "**End**",
275      "color": "4"
276    }
277  ],
278  "edges": [
279    {
280      "id": "a6b7c8d9e0f1a2b3",
281      "fromNode": "a0b1c2d3e4f5a6b7",
282      "fromSide": "bottom",
283      "toNode": "b1c2d3e4f5a6b7c8",
284      "toSide": "top"
285    },
286    {
287      "id": "b7c8d9e0f1a2b3c4",
288      "fromNode": "b1c2d3e4f5a6b7c8",
289      "fromSide": "bottom",
290      "toNode": "c2d3e4f5a6b7c8d9",
291      "toSide": "top"
292    },
293    {
294      "id": "c8d9e0f1a2b3c4d5",
295      "fromNode": "c2d3e4f5a6b7c8d9",
296      "fromSide": "right",
297      "toNode": "d3e4f5a6b7c8d9e0",
298      "toSide": "left",
299      "label": "Yes",
300      "color": "4"
301    },
302    {
303      "id": "d9e0f1a2b3c4d5e6",
304      "fromNode": "c2d3e4f5a6b7c8d9",
305      "fromSide": "left",
306      "toNode": "e4f5a6b7c8d9e0f1",
307      "toSide": "right",
308      "label": "No",
309      "color": "1"
310    },
311    {
312      "id": "e0f1a2b3c4d5e6f7",
313      "fromNode": "e4f5a6b7c8d9e0f1",
314      "fromSide": "top",
315      "fromEnd": "none",
316      "toNode": "b1c2d3e4f5a6b7c8",
317      "toSide": "left",
318      "toEnd": "arrow"
319    },
320    {
321      "id": "f1a2b3c4d5e6f7a8",
322      "fromNode": "d3e4f5a6b7c8d9e0",
323      "fromSide": "bottom",
324      "toNode": "f5a6b7c8d9e0f1a2",
325      "toSide": "top"
326    }
327  ]
328}
329```
330