Canvas Diagrams

March 16, 2026 · View on GitHub

Canvas is a JSON-based format for creating spatial node-based diagrams with free positioning. It's ideal for mind maps, knowledge graphs, concept maps, and planning boards where precise spatial layout matters.

Canvas is compatible with Obsidian Canvas format.

Use Cases

Mind Maps — Brainstorming and idea organization
Knowledge Graphs — Connecting related concepts
Concept Maps — Visual learning and understanding
Planning Boards — Project planning and task organization
Spatial Notes — Free-form note arrangement

Basic Syntax

Wrap your Canvas JSON in a code block with the canvas language identifier:

```canvas
{
  "nodes": [
    {"id": "n1", "type": "text", "text": "Central Idea", "x": 0, "y": 0, "width": 150, "height": 60}
  ],
  "edges": []
}
```

Node Types

Canvas supports four 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 nodes

Required Attributes

All nodes require these attributes:

id — Unique identifier
type — One of: text, file, link, group
x, y — Position coordinates
width, height — Node dimensions

Example: Mind Map

```canvas
{
  "nodes": [
    {"id": "center", "type": "text", "text": "Project Ideas", "x": 200, "y": 150, "width": 150, "height": 60, "color": "4"},
    {"id": "idea1", "type": "text", "text": "Mobile App", "x": 0, "y": 0, "width": 120, "height": 50, "color": "1"},
    {"id": "idea2", "type": "text", "text": "Web Platform", "x": 400, "y": 0, "width": 120, "height": 50, "color": "2"},
    {"id": "idea3", "type": "text", "text": "API Service", "x": 0, "y": 300, "width": 120, "height": 50, "color": "5"},
    {"id": "idea4", "type": "text", "text": "Documentation", "x": 400, "y": 300, "width": 120, "height": 50, "color": "6"}
  ],
  "edges": [
    {"id": "e1", "fromNode": "center", "toNode": "idea1", "toEnd": "arrow"},
    {"id": "e2", "fromNode": "center", "toNode": "idea2", "toEnd": "arrow"},
    {"id": "e3", "fromNode": "center", "toNode": "idea3", "toEnd": "arrow"},
    {"id": "e4", "fromNode": "center", "toNode": "idea4", "toEnd": "arrow"}
  ]
}
```

Color Presets

Nodes can be colored using preset values:

Value	Color
`"1"`	Red
`"2"`	Orange
`"3"`	Yellow
`"4"`	Green
`"5"`	Cyan
`"6"`	Purple

Example: {"id": "n1", "type": "text", "text": "Important", "color": "1", ...}

Edges

Connect nodes with edges:

{
  "id": "e1",
  "fromNode": "n1",
  "fromSide": "right",
  "toNode": "n2",
  "toSide": "left",
  "toEnd": "arrow"
}

Edge Properties

Property	Values	Description
`fromNode`	node id	Source node
`toNode`	node id	Target node
`fromSide`	`top`, `right`, `bottom`, `left`	Connection point on source
`toSide`	`top`, `right`, `bottom`, `left`	Connection point on target
`toEnd`	`arrow`, `none`	Arrow head at target

Coordinate System

Origin (0,0) is at the top-left
X increases to the right
Y increases downward

Tip: Use a 100px grid for consistent spacing between nodes.

Groups

Create visual containers to group related nodes:

{
  "id": "group1",
  "type": "group",
  "label": "Backend Services",
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 300,
  "color": "5"
}

Place nodes inside a group by positioning them within the group's bounds.

Best Practices

Plan layout first — Sketch node positions before coding
Use consistent spacing — 100px grid works well
Size nodes for content — Allow enough space for text
Use colors meaningfully — Group related concepts by color
Keep IDs simple — Use descriptive, lowercase IDs

Common Issues

Issue	Solution
Nodes overlapping	Increase spacing between nodes
Edges not visible	Verify `fromNode`/`toNode` match node IDs exactly
Invalid JSON	Check for missing quotes, commas, or brackets
Node too small	Increase `width`/`height` for longer text