JSON Canvas Visualizer Quick Start: Define nodes with id , type , x , y , width , height → Plan layout on 100px grid → Connect edges with fromNode / toNode → Apply colors (1-6) → Wrap in
fence. Origin (0,0) at top-left, X right, Y down. Obsidian Canvas compatible.
Critical Syntax Rules
1. Structure Format
{
"nodes": [
{"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
],
"edges": []
}
2. Node Types
Type
Required Fields
Purpose
text
text
Display custom text content
file
file
Reference external files
link
url
External URL references
group
label
Visual container for grouping
3. Required Node Attributes
All nodes require:
id
,
type
,
x
,
y
,
width
,
height
4. Color Presets
Value
Color
"1"
Red
"2"
Orange
"3"
Yellow
"4"
Green
"5"
Cyan
"6"
Purple
5. Edge Connections
{
"id"
:
"e1"
,
"fromNode"
:
"n1"
,
"fromSide"
:
"right"
,
"toNode"
:
"n2"
,
"toSide"
:
"left"
,
"toEnd"
:
"arrow"
}
6. Coordinate System
Origin (0,0) at top-left
X increases to the right
Y increases downward
7. Node Sizing
Consider text content when setting node dimensions
Multi-line text requires more height to display all lines
Long words require more width to avoid overflow
Common Pitfalls
Issue
Solution
Nodes overlapping
Increase spacing (100+ px)
Edges not visible
Verify
fromNode
/
toNode
match node IDs
Invalid JSON
Check quotes and commas
IDs invalid
Use only a-z, A-Z, 0-9, -, _
Output Format
canvas { "nodes": [...], "edges": [...] } ``` Related Files For detailed syntax and advanced features, refer to references below: syntax.md — Complete attribute reference: node types, edge properties, group styling, and advanced examples Resources JSON Canvas Specification