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

{
  "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