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 ```canvas 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