skill

json-canvas — Claude Code skill: what it does, how to install

Q: How to install json-canvas in Claude Code?

Run `npx claude-code-templates@latest --skill document-processing/json-canvas` in your terminal. You can also place the skill file directly at `~/.claude/skills/json-canvas/SKILL.md`.

Q: What does json-canvas do?

It enables Claude Code to construct and edit `.canvas` files complying with the JSON Canvas 1.0 specification for Obsidian and other canvas tools.

Q: Which node types are supported in the canvas format?

The format supports four distinct node types: `text` with Markdown syntax, `file` for local attachments, `link` for web addresses, and `group` for container boxes.

Builds and modifies .canvas files following the JSON Canvas 1.0 spec for Obsidian. It helps Claude Code diagram workflows, link notes, and structure mind maps.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill document-processing/json-canvas

Open on GitHub

What json-canvas does

This skill teaches Claude Code how to output .canvas files compatible with Obsidian. Each file contains two main arrays: nodes for visual cards and edges for lines. The agent places four node kinds: Markdown text, local attachment links, URLs, and grouping rectangles. Node array sequence determines display depth.

Positions rely on exact pixel values for coordinates and dimensions. Lines connect designated card sides (top, right, bottom, left) with optional labels and arrowheads. Color presets from "1" through "6" omit fixed hex values, which means your visual viewer dictates the actual theme palette.

What it helps with

construct flowcharts and mind maps as .canvas files
connect notes and documents with labeled directional arrows
organize canvas cards inside labeled visual groups
update node dimensions and pixel coordinates in Obsidian canvases

Example prompts for the agent

Generate an architecture.canvas file mapping our backend services with connecting lines
Create a project roadmap canvas grouping frontend and backend tasks
Add a file node pointing to docs/spec.md and link it to the overview card

How to install json-canvas

1claude-code-templates

npx claude-code-templates@latest --skill document-processing/json-canvas

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill json-canvas -a claude-code

3Manually: put the files in place

~/.claude/skills/json-canvas/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/json-canvas/

Manually: put the files in place

.agents/skills/json-canvas/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/json-canvas/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates json-canvas

2Manually: put the files in place

.github/skills/json-canvas/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/document-processing/json-canvas

Manually: put the files in place

.devin/skills/json-canvas/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about json-canvas

How to install json-canvas in Claude Code?

Run npx claude-code-templates@latest --skill document-processing/json-canvas in your terminal. You can also place the skill file directly at ~/.claude/skills/json-canvas/SKILL.md.

What does json-canvas do?

It enables Claude Code to construct and edit .canvas files complying with the JSON Canvas 1.0 specification for Obsidian and other canvas tools.

Which node types are supported in the canvas format?

The format supports four distinct node types: text with Markdown syntax, file for local attachments, link for web addresses, and group for container boxes.

find-skills vercel-labs Discovers and installs agent skills from skills.sh directly inside your coding assistant. Handy when you need domain-specific workflows for a project. CX Codex +1 4,000,000installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs grill-with-docs Matt Pocock This skill interviews you about a plan or design and creates ADRs and a glossary along the way. Use it when decisions need sharper definition. 1,219,756installs handoff Matt Pocock Creates a handoff document from the current conversation so another agent can continue the work. Use it when a task moves to a new session or agent. 1,038,491installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs teach Matt Pocock Turns the current directory into a learning workspace and keeps progress across sessions. Use it when learning needs to support a concrete goal in your project. 862,247installs

From the same set740

The whole set →

cloud-architect A Claude skill for designing infrastructure across AWS, Azure and GCP, with Terraform, CDK, cost work and security controls. 157installs behavioral-modes Gives the agent a set of operating modes, from brainstorming to shipping. Useful when replies should match the kind of task at hand. 157installs github-issues Creates, updates, and tracks GitHub issues from Claude Code using the GitHub MCP server. Handles bug reports, feature requests, and label updates. 157installs changelog-demo-command Explore changelog generation and format checks using Git history. The command is useful for reviewing release-note workflows and their tests. 156installs peer-review Review scientific manuscripts and grant proposals with checks for methods, statistics, reproducibility, ethics, and reporting. Use it to structure a critical review across research fields. 154installs vercel-analytics Configures Vercel Analytics and Speed Insights for React and Vite projects. It installs packages, inserts tracking components, and writes SPA routing rules in vercel.json. 153installs data-engineer This skill helps plan data pipelines, warehouses, and streaming systems. Use it when a project needs ingestion, orchestration, or data quality checks. 152installs svelte-a11y Audit Svelte and SvelteKit interfaces for accessibility issues and get suggested fixes. Use it to review forms, keyboard navigation, focus, and ARIA. 150installs