Obsidian Canvas

Obsidian Canvas Skill

Obsidian Canvas uses the JSON Canvas Spec 1.0 — an open JSON-based format for infinite canvas data. Canvas files use the .canvas extension.

File Structure

{
  "nodes": [],
  "edges": []
}

Nodes

Four node types: text, file, link, group. Nodes are z-ordered by array position (first = bottom, last = top).

Common Attributes (all nodes)

Text Nodes

{
  "id": "6f0ad84f44ce9c17",
  "type": "text",
  "x": 0, "y": 0, "width": 400, "height": 200,
  "text": "# Hello World\n\nThis is **Markdown** content."
}

Newline pitfall: Use \n in JSON strings, not \\n — Obsidian renders \\n as literal characters.

File Nodes

{
  "id": "a1b2c3d4e5f67890",
  "type": "file",
  "x": 500, "y": 0, "width": 400, "height": 300,
  "file": "Attachments/diagram.png",
  "subpath": "#Implementation"
}

Link Nodes

{
  "id": "c3d4e5f678901234",
  "type": "link",
  "x": 1000, "y": 0, "width": 400, "height": 200,
  "url": "https://obsidian.md"
}

Group Nodes

{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50, "y": -50, "width": 1000, "height": 600,
  "label": "Project Overview",
  "color": "4",
  "background": "Attachments/bg.png",
  "backgroundStyle": "cover"
}

Edges

{
  "id": "0123456789abcdef",
  "fromNode": "6f0ad84f44ce9c17",
  "fromSide": "right",
  "fromEnd": "none",
  "toNode": "b2c3d4e5f6789012",
  "toSide": "left",
  "toEnd": "arrow",
  "color": "1",
  "label": "leads to"
}

Colors

Or use hex: "#FF0000". Preset color values are intentionally undefined — apps use their own brand colors.

ID Generation

16-character lowercase hex string (64-bit random value): "6f0ad84f44ce9c17"

Layout Guidelines

• Coordinates can be negative (canvas extends infinitely)
• x increases right, y increases downward, position = top-left corner
• Suggested node widths: 200-300 (small), 300-450 (medium), 400-600 (large)
• Leave 20-50px padding inside groups, 50-100px between nodes
• Align to grid (multiples of 10 or 20) for cleaner layouts

Validation Rules

1. All id values must be unique across nodes and edges
2. fromNode and toNode must reference existing node IDs
3. Required fields must be present for each node type
4. type must be one of: text, file, link, group
5. backgroundStyle must be one of: cover, ratio, repeat
6. fromSide, toSide must be one of: top, right, bottom, left
7. fromEnd, toEnd must be one of: none, arrow
8. Color presets must be "1" through "6" or valid hex color

For complete worked examples (mind map, project board, research canvas, flowchart), see references/examples.md.

When To Use

• When creating or editing .canvas files for Obsidian or compatible apps
• When building visual canvases, mind maps, flowcharts, or project boards
• When the user mentions Canvas files, infinite canvas, or Obsidian canvas

Boundaries

• Not for general JSON editing unrelated to the JSON Canvas spec
• Not for Mermaid, PlantUML, or other diagram-as-code formats
• Not for Obsidian plugin development or vault configuration
• Skip when the user needs interactive canvas editing — this skill produces static .canvas files

Output

• Valid .canvas files conforming to JSON Canvas Spec 1.0
• Nodes with unique 16-character hex IDs positioned on a coordinate grid
• Edges referencing valid node IDs with optional labels, colors, and side/end attributes

References

• JSON Canvas Spec 1.0
• JSON Canvas GitHub

Sibling skills

Three Obsidian-format references, distinguished by file type.

• obsidian-markdown — .md notes. Use for note authoring; canvases reference notes as nodes.
• obsidian-bases — .base database views. Orthogonal.