Agent skill

JSON Canvas

by heyitsnoah in heyitsnoah/claudesidian

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.

MITAuto-check passedDevelopment

Install JSON Canvas

skills CLI

$ npx skills add heyitsnoah/claudesidian --skill json-canvas -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install heyitsnoah/claudesidian json-canvas --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/heyitsnoah/claudesidian.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/json-canvas .claude/skills/json-canvas && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "json-canvas" agent skill from https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas into .claude/skills/json-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "json-canvas", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add heyitsnoah/claudesidian --skill json-canvas -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install heyitsnoah/claudesidian json-canvas --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heyitsnoah/claudesidian.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/json-canvas .agents/skills/json-canvas && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "json-canvas" agent skill from https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas into .agents/skills/json-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "json-canvas", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add heyitsnoah/claudesidian --skill json-canvas -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install heyitsnoah/claudesidian json-canvas --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heyitsnoah/claudesidian.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/json-canvas .cursor/skills/json-canvas && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "json-canvas" agent skill from https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas into .cursor/skills/json-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "json-canvas", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/heyitsnoah/claudesidian.git --path .agents/skills/json-canvas

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add heyitsnoah/claudesidian --skill json-canvas -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install heyitsnoah/claudesidian json-canvas --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heyitsnoah/claudesidian.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/json-canvas .gemini/skills/json-canvas && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "json-canvas" agent skill from https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas into .gemini/skills/json-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "json-canvas", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install heyitsnoah/claudesidian json-canvas

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add heyitsnoah/claudesidian --skill json-canvas -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/heyitsnoah/claudesidian.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/json-canvas .github/skills/json-canvas && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "json-canvas" agent skill from https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas into .github/skills/json-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "json-canvas", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add heyitsnoah/claudesidian --skill json-canvas -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install heyitsnoah/claudesidian json-canvas --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heyitsnoah/claudesidian.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/json-canvas .opencode/skills/json-canvas && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "json-canvas" agent skill from https://github.com/heyitsnoah/claudesidian/tree/main/.agents/skills/json-canvas into .opencode/skills/json-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "json-canvas", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: json-canvas
GitHub stars: 2.6k
Used in: 18 other repos
Token cost: ~3.5k tokens
SKILL.md length: 701 words
Files: 1
Skills in repo: 17
Repo updated: Apr 11, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.

Works in 8 steps: All id values must be unique across… → fromNode and toNode must reference… → Required fields must be present for each… → …
Working with .canvas files
SKILL.md covers Overview, File Structure, Nodes and Edges, plus 6 more sections
Reaches obsidian.md

What it does

JSON Canvas is an agent skill from heyitsnoah/claudesidian. Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

Its SKILL.md is about 3.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Obsidian. The licence is MIT.

When your agent uses it

Working with .canvas files
Creating visual canvases
The user mentions Canvas files in Obsidian

Example prompts

“/json-canvas”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 6c56f35. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are json).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- obsidian.md
Also links to:
- jsoncanvas.org
- github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

JSON Canvas loads about 3.5k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 701 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~59
When it runs · the whole SKILL.md, loaded when a task matches: ~3.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from heyitsnoah/claudesidian at commit 6c56f35, republished under its MIT licence (© heyitsnoah). 701 words, ~3,504 tokens.

Download SKILL.mdSave it as .claude/skills/json-canvas/SKILL.md (or your agent's skills folder).

name: json-canvas
description: Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

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.

File Structure

A canvas file contains two top-level arrays:

json

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

json

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

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.).

json

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

json

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

json

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

json

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

json

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

json

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

json

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

Show full SKILL.md (272 more words)Show less

End Shapes

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

Colors

The canvasColor type can be specified in two ways:

Hex Colors

json

{
  "color": "#FF0000"
}

Preset Colors

json

{
  "color": "1"
}

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

Note: Specific color values for presets are intentionally undefined, allowing applications to use their own brand colors.

Complete Examples

Simple Canvas with Text and Connections

json

{
  "nodes": [
    {
      "id": "8a9b0c1d2e3f4a5b",
      "type": "text",
      "x": 0,
      "y": 0,
      "width": 300,
      "height": 150,
      "text": "# Main Idea\n\nThis is the central concept."
    },
    {
      "id": "1a2b3c4d5e6f7a8b",
      "type": "text",
      "x": 400,
      "y": -100,
      "width": 250,
      "height": 100,
      "text": "## Supporting Point A\n\nDetails here."
    },
    {
      "id": "2b3c4d5e6f7a8b9c",
      "type": "text",
      "x": 400,
      "y": 100,
      "width": 250,
      "height": 100,
      "text": "## Supporting Point B\n\nMore details."
    }
  ],
  "edges": [
    {
      "id": "3c4d5e6f7a8b9c0d",
      "fromNode": "8a9b0c1d2e3f4a5b",
      "fromSide": "right",
      "toNode": "1a2b3c4d5e6f7a8b",
      "toSide": "left"
    },
    {
      "id": "4d5e6f7a8b9c0d1e",
      "fromNode": "8a9b0c1d2e3f4a5b",
      "fromSide": "right",
      "toNode": "2b3c4d5e6f7a8b9c",
      "toSide": "left"
    }
  ]
}

Project Board with Groups

json

{
  "nodes": [
    {
      "id": "5e6f7a8b9c0d1e2f",
      "type": "group",
      "x": 0,
      "y": 0,
      "width": 300,
      "height": 500,
      "label": "To Do",
      "color": "1"
    },
    {
      "id": "6f7a8b9c0d1e2f3a",
      "type": "group",
      "x": 350,
      "y": 0,
      "width": 300,
      "height": 500,
      "label": "In Progress",
      "color": "3"
    },
    {
      "id": "7a8b9c0d1e2f3a4b",
      "type": "group",
      "x": 700,
      "y": 0,
      "width": 300,
      "height": 500,
      "label": "Done",
      "color": "4"
    },
    {
      "id": "8b9c0d1e2f3a4b5c",
      "type": "text",
      "x": 20,
      "y": 50,
      "width": 260,
      "height": 80,
      "text": "## Task 1\n\nImplement feature X"
    },
    {
      "id": "9c0d1e2f3a4b5c6d",
      "type": "text",
      "x": 370,
      "y": 50,
      "width": 260,
      "height": 80,
      "text": "## Task 2\n\nReview PR #123",
      "color": "2"
    },
    {
      "id": "0d1e2f3a4b5c6d7e",
      "type": "text",
      "x": 720,
      "y": 50,
      "width": 260,
      "height": 80,
      "text": "## Task 3\n\n~~Setup CI/CD~~"
    }
  ],
  "edges": []
}

Research Canvas with Files and Links

json

{
  "nodes": [
    {
      "id": "1e2f3a4b5c6d7e8f",
      "type": "text",
      "x": 300,
      "y": 200,
      "width": 400,
      "height": 200,
      "text": "# Research Topic\n\n## Key Questions\n\n- How does X affect Y?\n- What are the implications?",
      "color": "5"
    },
    {
      "id": "2f3a4b5c6d7e8f9a",
      "type": "file",
      "x": 0,
      "y": 0,
      "width": 250,
      "height": 150,
      "file": "Literature/Paper A.pdf"
    },
    {
      "id": "3a4b5c6d7e8f9a0b",
      "type": "file",
      "x": 0,
      "y": 200,
      "width": 250,
      "height": 150,
      "file": "Notes/Meeting Notes.md",
      "subpath": "#Key Insights"
    },
    {
      "id": "4b5c6d7e8f9a0b1c",
      "type": "link",
      "x": 0,
      "y": 400,
      "width": 250,
      "height": 100,
      "url": "https://example.com/research"
    },
    {
      "id": "5c6d7e8f9a0b1c2d",
      "type": "file",
      "x": 750,
      "y": 150,
      "width": 300,
      "height": 250,
      "file": "Attachments/diagram.png"
    }
  ],
  "edges": [
    {
      "id": "6d7e8f9a0b1c2d3e",
      "fromNode": "2f3a4b5c6d7e8f9a",
      "fromSide": "right",
      "toNode": "1e2f3a4b5c6d7e8f",
      "toSide": "left",
      "label": "supports"
    },
    {
      "id": "7e8f9a0b1c2d3e4f",
      "fromNode": "3a4b5c6d7e8f9a0b",
      "fromSide": "right",
      "toNode": "1e2f3a4b5c6d7e8f",
      "toSide": "left",
      "label": "informs"
    },
    {
      "id": "8f9a0b1c2d3e4f5a",
      "fromNode": "4b5c6d7e8f9a0b1c",
      "fromSide": "right",
      "toNode": "1e2f3a4b5c6d7e8f",
      "toSide": "left",
      "toEnd": "arrow",
      "color": "6"
    },
    {
      "id": "9a0b1c2d3e4f5a6b",
      "fromNode": "1e2f3a4b5c6d7e8f",
      "fromSide": "right",
      "toNode": "5c6d7e8f9a0b1c2d",
      "toSide": "left",
      "label": "visualized by"
    }
  ]
}

Flowchart

json

{
  "nodes": [
    {
      "id": "a0b1c2d3e4f5a6b7",
      "type": "text",
      "x": 200,
      "y": 0,
      "width": 150,
      "height": 60,
      "text": "**Start**",
      "color": "4"
    },
    {
      "id": "b1c2d3e4f5a6b7c8",
      "type": "text",
      "x": 200,
      "y": 100,
      "width": 150,
      "height": 60,
      "text": "Step 1:\nGather data"
    },
    {
      "id": "c2d3e4f5a6b7c8d9",
      "type": "text",
      "x": 200,
      "y": 200,
      "width": 150,
      "height": 80,
      "text": "**Decision**\n\nIs data valid?",
      "color": "3"
    },
    {
      "id": "d3e4f5a6b7c8d9e0",
      "type": "text",
      "x": 400,
      "y": 200,
      "width": 150,
      "height": 60,
      "text": "Process data"
    },
    {
      "id": "e4f5a6b7c8d9e0f1",
      "type": "text",
      "x": 0,
      "y": 200,
      "width": 150,
      "height": 60,
      "text": "Request new data",
      "color": "1"
    },
    {
      "id": "f5a6b7c8d9e0f1a2",
      "type": "text",
      "x": 400,
      "y": 320,
      "width": 150,
      "height": 60,
      "text": "**End**",
      "color": "4"
    }
  ],
  "edges": [
    {
      "id": "a6b7c8d9e0f1a2b3",
      "fromNode": "a0b1c2d3e4f5a6b7",
      "fromSide": "bottom",
      "toNode": "b1c2d3e4f5a6b7c8",
      "toSide": "top"
    },
    {
      "id": "b7c8d9e0f1a2b3c4",
      "fromNode": "b1c2d3e4f5a6b7c8",
      "fromSide": "bottom",
      "toNode": "c2d3e4f5a6b7c8d9",
      "toSide": "top"
    },
    {
      "id": "c8d9e0f1a2b3c4d5",
      "fromNode": "c2d3e4f5a6b7c8d9",
      "fromSide": "right",
      "toNode": "d3e4f5a6b7c8d9e0",
      "toSide": "left",
      "label": "Yes",
      "color": "4"
    },
    {
      "id": "d9e0f1a2b3c4d5e6",
      "fromNode": "c2d3e4f5a6b7c8d9",
      "fromSide": "left",
      "toNode": "e4f5a6b7c8d9e0f1",
      "toSide": "right",
      "label": "No",
      "color": "1"
    },
    {
      "id": "e0f1a2b3c4d5e6f7",
      "fromNode": "e4f5a6b7c8d9e0f1",
      "fromSide": "top",
      "fromEnd": "none",
      "toNode": "b1c2d3e4f5a6b7c8",
      "toSide": "left",
      "toEnd": "arrow"
    },
    {
      "id": "f1a2b3c4d5e6f7a8",
      "fromNode": "d3e4f5a6b7c8d9e0",
      "fromSide": "bottom",
      "toNode": "f5a6b7c8d9e0f1a2",
      "toSide": "top"
    }
  ]
}

ID Generation

Node and edge IDs must be unique strings. Obsidian generates 16-character hexadecimal IDs:

json

"id": "6f0ad84f44ce9c17"
"id": "a3b2c1d0e9f8g7h6"
"id": "1234567890abcdef"

This format is a 16-character lowercase hex string (64-bit random value).

Layout Guidelines

Positioning

Coordinates can be negative (canvas extends infinitely)
x increases to the right
y increases downward
Position refers to top-left corner of node

Recommended Sizes

Node Type	Suggested Width	Suggested Height
Small text	200-300	80-150
Medium text	300-450	150-300
Large text	400-600	300-500
File preview	300-500	200-400
Link preview	250-400	100-200
Group	Varies	Varies

Spacing

Leave 20-50px padding inside groups
Space nodes 50-100px apart for readability
Align nodes to grid (multiples of 10 or 20) for cleaner layouts

Validation Rules

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

References

Files

Just SKILL.md in .agents/skills/json-canvas of heyitsnoah/claudesidian.

Open the folder on GitHubat commit 6c56f35

Used in 18 other repositories

We found 34 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 18 other GitHub owners. This page covers the copy in heyitsnoah/claudesidian, which our catalogue first saw on October 7, 2026.

Compare with similar skills

JSON Canvas next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

JSON Canvas compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
JSON Canvas this skillheyitsnoah/claudesidian	2.6k	18 repos	~3.5k	Automated safety check: Pass	MIT	5 mo ago
Excalidraw Diagrambreferrari/obsidian-mind	4.9k	—	~3.9k	Automated safety check: Pass	MIT	2 days ago
Excalidraw Diagram Studiotech-leads-club/agent-skills	7k	—	~3.6k	Automated safety check: Pass	CC-BY-4.0	18 days ago
Excalidraw DiagramGerstep/cybos	104	2 repos	~2.3k	Automated safety check: Pass	None	1 mo ago
Space Mermaid DiagramSpaceZephyr/design-buddy	174	—	~920	Automated safety check: Pass	None	3 mo ago
Markdown Report WritingNeuroAIHub/BrainPilot	1.1k	—	~2.6k	Automated safety check: Warn	AGPL-3.0	6 days ago

Similar skills

Excalidraw Diagram
breferrari/obsidian-mind
Generate Excalidraw diagrams from text content. An agent skill from breferrari/obsidian-mind.
4.9k GitHub stars~3.9k tokensUpdated 2 days ago
DevelopmentAuto-check passed
Excalidraw Diagram Studio
tech-leads-club/agent-skills
Generates Excalidraw diagram files from plain descriptions, choosing among flowcharts, mind maps, architecture, swimlane, class, sequence and ER diagrams.
7k GitHub stars~3.6k tokensUpdated 18 days ago
DevelopmentAuto-check passed
Excalidraw Diagram
Gerstep/cybos
Generate Excalidraw diagrams from text content. An agent skill from Gerstep/cybos.
104 GitHub starsUsed in 2 repos~2.3k tokens
DevelopmentAuto-check passed
Space Mermaid Diagram
SpaceZephyr/design-buddy
将任意文本、工作流、逻辑转换为清晰简约的 Mermaid 流程图。支持 flowchart、sequence、class 等多种图表类型。使用场景：(1) 需要可视化工作流程，(2) 将文档/对话转为流程图，(3) 创建系统架构图，(4) 生成时序图/类图。自动保存到 Obsidian 画板目录，按日期和主题分类。
174 GitHub stars~920 tokensUpdated 3 mo ago
DevelopmentAuto-check passed
Markdown Report Writing
NeuroAIHub/BrainPilot
Guide AI agents to write beautifully formatted, well-illustrated Markdown reports with proper structure, diagrams, and compatibility across GitHub and Obsidian.
1.1k GitHub stars~2.6k tokensUpdated 6 days ago
Documents & OfficeAuto-check: warnings
Wiki Diagram
IssacW228/student-llm-wiki
Add Mermaid diagrams to wiki pages to aid understanding. An agent skill from IssacW228/student-llm-wiki.
176 GitHub stars~394 tokensUpdated 3 mo ago
Knowledge ManagementAuto-check passed

Questions about JSON Canvas

What does JSON Canvas do?

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. JSON Canvas is an agent skill from heyitsnoah/claudesidian.canvas) with nodes, edges, groups, and connections.

When should I use JSON Canvas?

JSON Canvas fits situations like: working with .canvas files; creating visual canvases; the user mentions Canvas files in Obsidian.

How do I install JSON Canvas in Claude Code?

Run `npx skills add heyitsnoah/claudesidian --skill json-canvas -a claude-code`. Or copy the skill folder (.agents/skills/json-canvas in heyitsnoah/claudesidian) into .claude/skills/json-canvas in your project. Claude Code loads it when a task matches its description.

How do I install JSON Canvas in Codex?

Run `npx skills add heyitsnoah/claudesidian --skill json-canvas -a codex`. Or copy the skill folder (.agents/skills/json-canvas in heyitsnoah/claudesidian) into .agents/skills/json-canvas in your project. Codex loads it when a task matches its description.

Can I use JSON Canvas in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heyitsnoah/claudesidian --skill json-canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/json-canvas, .gemini/skills/json-canvas, .github/skills/json-canvas and .opencode/skills/json-canvas in your project.

What does JSON Canvas need to run?

SKILL.md names no scripts, command-line tools or credentials: JSON Canvas is instructions for the agent only.

Does JSON Canvas access the network?

SKILL.md names 3 domains. In commands or code: obsidian.md; the agent is likely to contact it when it follows the instructions. As links in the text: jsoncanvas.org and github.com. This is read from the text; nothing was executed.

Is JSON Canvas safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does JSON Canvas use?

JSON Canvas is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does JSON Canvas use?

About 3.5k tokens (SKILL.md is roughly 14k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to JSON Canvas?

Skills that share tags, products or a category with JSON Canvas: Excalidraw Diagram (breferrari/obsidian-mind, 4.9k stars), Excalidraw Diagram Studio (tech-leads-club/agent-skills, 7k stars), Excalidraw Diagram (Gerstep/cybos, 104 stars) and Space Mermaid Diagram (SpaceZephyr/design-buddy, 174 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains JSON Canvas?

heyitsnoah (a GitHub user) maintains it in heyitsnoah/claudesidian, which has 2,597 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on April 11, 2026.

Source: heyitsnoah/claudesidian on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install JSON Canvas

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

JSON Canvas Skill

Overview

File Structure

Nodes

Z-Index Ordering

Generic Node Attributes

Text Nodes

File Nodes

Link Nodes

Group Nodes

Background Styles

Edges

Side Values

End Shapes

Colors

Hex Colors

Preset Colors

Complete Examples

Simple Canvas with Text and Connections

Project Board with Groups

Research Canvas with Files and Links

Flowchart

ID Generation

Layout Guidelines

Positioning

Recommended Sizes

Spacing

Validation Rules

References

Files

Used in 18 other repositories

Compare with similar skills

Similar skills

More from heyitsnoah/claudesidian

Related

Questions about JSON Canvas