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

3. Required Node Attributes

All nodes require: id, type, x, y, width, height

4. Color Presets

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

---

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