# json-canvas

> Claude/Codex skill by [@kepano](https://omgskills.com/library/kepano/index.md) · 52k stars · Updated 2026-11-11

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.

Tags: agents, agentskills, bases, claude, clawdbot, cli, codex, defuddle, hermes, jsoncanvas, knap, markdown, md, obsidian, openclaw, opencode, skills

## Install

```sh
git clone https://github.com/obsidianmd/obsidian-skills /tmp/obsidian-skills && ln -s /tmp/obsidian-skills/plugins/obsidian/skills/json-canvas ~/.claude/skills/json-canvas
```

## From README

JSON Canvas Skill File Structure A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0: nodes (optional): Array of node objects edges (optional): Array of edge objects connecting nodes Common Workflows Create a New Canvas Create a .canvas file with the base structure {"nodes": \[\], "edges": \[\]} Generate unique 16-character hex IDs for each node (e.g., "6f0ad84f44ce9c17") Add nodes with required fields: id, type, x, y, width, height Add edges referencing valid node IDs via fromNode and toNode Validate: Parse the JSON to confirm it is valid.

## Links

- HTML page: https://omgskills.com/library/kepano/obsidian-skills/json-canvas/
- GitHub: https://github.com/obsidianmd/obsidian-skills
- Author: [@kepano](https://omgskills.com/library/kepano/index.md)

## More from this repo

- [defuddle](https://omgskills.com/library/kepano/obsidian-skills/defuddle/index.md) — Extract clean Markdown from HTML pages with Defuddle CLI.
   - [@kepano](https://omgskills.com/library/kepano/index.md) · 52k stars
- [obsidian-bases](https://omgskills.com/library/kepano/obsidian-skills/obsidian-bases/index.md) — Used to create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries.
   - [@kepano](https://omgskills.com/library/kepano/index.md) · 52k stars
- [obsidian-markdown](https://omgskills.com/library/kepano/obsidian-skills/obsidian-markdown/index.md) — Used to create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other...
   - [@kepano](https://omgskills.com/library/kepano/index.md) · 52k stars