/json-canvas

name: json-canvas
description: 产品经理与内容创作者在构建Obsidian知识库或梳理复杂逻辑时，当需要创建思维导图、流程图等可视化画布，使用此技能可自动生成标准.canvas文件，精准配置节点、连线与层级，一键生成完美排版，彻底告别手写JSON的繁琐与报错。

JSON Canvas Skill

This skill enables skills-compatible agents to create and edit valid JSON Canvas files (`.canvas`) used in Obsidian and other applications.

Overview

JSON Canvas is an open file format for infinite canvas data. Canvas files use the `.canvas` extension and contain valid JSON following the [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/).

File Structure

A canvas file contains two top-level arrays:

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

• `nodes` (optional): Array of node objects
• `edges` (optional): Array of edge objects connecting nodes

Nodes

Nodes are objects placed on the canvas. There are four node types:

• `text` - Text content with Markdown
• `file` - Reference to files/attachments
• `link` - External URL
• `group` - Visual container for other nodes

Z-Index Ordering

Nodes are ordered by z-index in the array:

• First node = bottom layer (displayed below others)
• Last node = top layer (displayed above others)

Generic Node Attributes

All nodes share these attributes:

| Attribute | Required | Type | Description | |-----------|----------|------|-------------| | `id` | Yes | string | Unique identifier for the node | | `type` | Yes | string | Node type: `text`, `file`, `link`, or `group` | | `x` | Yes | integer | X position in pixels | | `y` | Yes | integer | Y position in pixels | | `width` | Yes | integer | Width in pixels | | `height` | Yes | integer | Height in pixels | | `color` | No | canvasColor | Node color (see Color section) |

Text Nodes

Text nodes contain Markdown content.

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

Newline Escaping (Common Pitfall)

In JSON, newline characters inside strings **must** be represented as `\n`. Do **not** use the literal sequence `\\n` in a `.canvas` file—Obsidian will render it as the characters `\` and `n` instead of a line break.

Examples:

{ "type": "text", "text": "Line 1\nLine 2" }

{ "type": "text", "text": "Line 1\\nLine 2" }

| Attribute | Required | Type | Description | |-----------|----------|------|-------------| | `text` | Yes | string | Plain text with Markdown syntax |

File Nodes

File nodes reference files or attachments (images, videos, PDFs, notes, etc.).

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

{
  "id": "b2c3d4e5f6789012",
  "type": "file",
  "x": 500,
  "y": 400,
  "width": 400,
  "height": 300,
  "file": "Notes/Project Overview.md",
  "subpath": "#Implementation"
}

| Attribute | Required | Type | Description | |-----------|----------|------|-------------| | `file` | Yes | string | Path to file within the system | | `subpath` | No | string | Link to heading or block (starts with `#`) |

Link Nodes

Link nodes display external URLs.

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

| Attribute | Required | Type | Description | |-----------|----------|------|-------------| | `url` | Yes | string | External URL |

Group Nodes

Group nodes are visual containers for organizing other nodes.

{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50,
  "y": -50,
  "width": 1000,
  "height": 600,
  "label": "Project Overview",
  "color": "4"
}

{
  "id": "e5f67890123456ab",
  "type": "group",
  "x": 0,
  "y": 700,
  "width": 800,
  "height": 500,
  "label": "Resources",
  "background": "Attachments/background.png",
  "backgroundStyle": "cover"
}

| Attribute | Required | Type | Description | |-----------|----------|------|-------------| | `label` | No | string | Text label for the group | | `background` | No | string | Path to background image | | `backgroundStyle` | No | string | Background rendering style |

Background Styles

| Value | Description | |-------|-------------| | `cover` | Fills entire width and height of node | | `ratio` | Maintains aspect ratio of background image | | `repeat` | Repeats image as pattern in both directions |

Edges

Edges are lines connecting nodes.

{
  "id": "f67890123456789a",
  "fromNode": "6f0ad84f44ce9c17",
  "toNode": "a1b2c3d4e5f67890"
}

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

| Attribute | Required | Type | Default | Description | |-----------|----------|------|---------|-------------| | `id` | Yes | string | - | Unique identifier for the edge | | `fromNode` | Yes | string | - | Node ID where connection starts | | `fromSide` | No | string | - | Side where edge starts | | `fromEnd` | No | string | `none` | Shape at edge start | | `toNode` | Yes | string | - | Node ID where connection ends | | `toSide` | No | string | - | Side where edge ends | | `toEnd` | No | string | `arrow` | Shape at edge end | | `color` | No | canvasColor | - | Line color | | `label` | No | string | - | Text label for the edge |

Side Values

| Value | Description | |-------|-------------| | `top` | Top edge of node | | `right` | Right edge of node | | `bottom` | Bottom edge of node | | `left` | Left edge of node |

End Shapes

| Value | Description | |-------|-------------| | `none` | No endpoint shape | | `arrow` | Arrow endpoint |

Colors

The `canvasColor` type can be specified in two ways:

Hex Colors

{
  "color": "#FF0000"
}

Preset Colors

{
  "color": "1"
}

| Preset | Color | |--------|-------| | `"1"` | Red | | `"2"` |