# json-canvas

> Claude/Codex skill by [@kepano](https://omgskills.com/library/kepano/index.md) · 44k stars · 68k installs · Updated 2026-06-08

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: claude, clawdbot, cli, codex, defuddle, obsidian, openclaw, opencode, skills

## Install

```sh
git clone https://github.com/kepano/obsidian-skills /tmp/obsidian-skills && ln -s /tmp/obsidian-skills/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/skills/kepano/obsidian-skills/json-canvas/
- GitHub: https://github.com/kepano/obsidian-skills
- Author: [@kepano](https://omgskills.com/library/kepano/index.md)

## More from this repo

- [obsidian-markdown](https://omgskills.com/skills/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) · 48k stars
- [defuddle](https://omgskills.com/skills/kepano/obsidian-skills/defuddle/index.md) — Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens.
   - [@kepano](https://omgskills.com/library/kepano/index.md) · 45k stars
- [obsidian-bases](https://omgskills.com/skills/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) · 44k stars