# json-canvas

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.

- skill · `type=skill` · Claude Code · 155 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/document-processing/json-canvas
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/json-canvas

## What it 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.

## Requirements
- Works with: Obsidian

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill document-processing/json-canvas
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill json-canvas -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/json-canvas/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/json-canvas/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/json-canvas/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/json-canvas/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates json-canvas
```

2. **Manually: put the files in place**
- File: `.github/skills/json-canvas/SKILL.md`

### Gemini CLI

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/json-canvas/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/document-processing/json-canvas

## When to use it
- 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
- 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

## Similar
- [find-skills](https://affpapa.org/en/nevibecode/skills/find-skills.md) — skill · 4000000 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [grill-with-docs](https://affpapa.org/en/nevibecode/skills/grill-with-docs.md) — skill · 1219756 installs
- [handoff](https://affpapa.org/en/nevibecode/skills/handoff.md) — skill · 1038491 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [teach](https://affpapa.org/en/nevibecode/skills/teach.md) — skill · 862247 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md