json-canvas Skill for Claude: Create and Edit Canvas Files

Makes Claude create and edit .canvas files (nodes, edges and groups) that follow the JSON Canvas 1.0 spec.

Installs: 75.7K; on skills.sh
Stars: 50.6K; on GitHub
Files: 1; besides SKILL.md
Updated: Sep 2026; last repo commit

json-canvas makes Claude write valid JSON Canvas files. It walks through four workflows: create a canvas, add a node, connect two nodes and edit an existing canvas, and it checks IDs and edge links after every change.

It triggers when you work with .canvas files or ask for mind maps, flowcharts or visual canvases. The skill bundles one reference file of full examples and no scripts.

Good for

Obsidian users who want Claude to build mind maps, flowcharts or project boards as canvas files
Developers who generate or edit .canvas files in scripts or repos
Claude Code, Codex and OpenCode users who already run skills

Install json-canvas

Claude Code

Copy this prompt.

Install the json-canvas skill in Claude Code. Run this command:

npx skills add https://github.com/kepano/obsidian-skills --skill json-canvas

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

File Structure
Common Workflows
1. Create a New Canvas
2. Add a Node to an Existing Canvas
3. Connect Two Nodes
4. Edit an Existing Canvas
Nodes
Generic Node Attributes
Text Nodes
File Nodes
Link Nodes
Group Nodes
Edges
Colors
ID Generation
Layout Guidelines

Key facts

Author: kepano
Repo: kepano/obsidian-skills
License: MIT
Installs on skills.sh: 75,658 (Nov 2, 2026)
GitHub stars (whole repo): 50,577 (Nov 2, 2026)
Last commit to the repo: Sep 15, 2026
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass
Skill folder: 2 files: SKILL.md and references/EXAMPLES.md (counted from the GitHub folder)
Follows: JSON Canvas Spec 1.0
Works in: Claude Code, Codex and OpenCode per the repo README; the Claude app is not documented

What it includes

Starts a .canvas file with empty nodes and edges lists
Writes {"nodes": [], "edges": []}, adds nodes with a unique 16-character hex ID, then checks every edge points to a real node.
Write · Create a new canvas
Reads the canvas, adds a node with a new ID at a free position
It keeps 50 to 100 pixels of space from other nodes and re-checks that all IDs stay unique.
Write · Add a node to an existing canvas
Adds an edge from one node ID to another
Edges can set which side they leave from (top, right, bottom, left) and carry a label.
Write · Connect two nodes
Finds a node or edge by ID and changes it
Changes text, position or color, writes the file back, then re-checks IDs and edge links.
Write · Edit an existing canvas
Text, file, link and group nodes
Each type has its own required field: text for text nodes, file for file nodes, url for link nodes.
Node types
Preset colors 1 to 6, or any hex color
Presets 1 to 6 stand for red, orange, yellow, green, cyan and purple. The app decides the exact shade.
Colors
Eight checks run after every create or edit
Unique IDs, valid edge references, required fields per node type, allowed side and end values, valid colors, and parseable JSON.
Validation checklist
Full canvas examples
Mind maps, project boards, research canvases and flowcharts.
references/EXAMPLES.md

From the official docs

Permissions

Low risk

The skill makes Claude read and rewrite .canvas files in your project. Back up your vault or commit first.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It rewrites existing .canvas files
Editing a canvas means parsing it and writing it back. Back up the vault or commit first so you can undo.

Technical details

Talks to	None named in the SKILL.md

Questions

How do I install json-canvas?

Use the install box above. The repo README also documents a Claude Code plugin that bundles this skill, the skills CLI and manual copying for Claude Code, Codex and OpenCode.

Do I need Obsidian to use json-canvas?

No Obsidian setup is described in the SKILL.md. It only covers writing .canvas files to the JSON Canvas 1.0 spec, and mentions Obsidian as one case where it applies.

Does json-canvas work in the Claude app or Codex?

The README documents Claude Code, Codex and OpenCode. It does not document the Claude app, and the skill works by reading and writing .canvas files on disk.

Does it need an API key or scripts?

The SKILL.md names no API keys, and the folder bundles no scripts. It only gives Claude the file format and a checklist.

Is json-canvas safe?

It makes Claude read and rewrite .canvas files in your project. Keep your vault in version control or back it up first so you can undo a bad edit.

How is it different from obsidian-markdown and obsidian-bases?

Each skill covers one file type. The README lists json-canvas for .canvas files, obsidian-markdown for .md notes and obsidian-bases for .base files.

Information

updated Nov 2, 2026

Repository: kepano/obsidian-skills
Folder: skills/json-canvas

kepano/obsidian-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

json-canvas SKILL.md · github.com
kepano/obsidian-skills README · github.com
JSON Canvas Spec 1.0 · jsoncanvas.org
json-canvas on skills.sh · skills.sh
kepano/obsidian-skills · github.com