Create and edit JSON Canvas (.canvas) files - text/file/link/group nodes and labeled edges - for mind maps and flowcharts following the JSON Canvas 1.0 spec.
---
name: JSON Canvas
description: Create and edit JSON Canvas (.canvas) files with nodes, edges, groups, and connections following the JSON Canvas 1.0 spec. Use when building visual canvases, mind maps, or flowcharts, or when the user mentions Canvas files in Obsidian.
---
Author `.canvas` files per the [JSON Canvas 1.0 spec](https://jsoncanvas.org/spec/1.0/). A canvas is JSON with two top-level arrays: `nodes` and `edges`.
## Workflow
1. Start from the base structure `{"nodes": [], "edges": []}`.
2. Add nodes - each needs a unique 16-char hex `id`, a `type` (`text`, `file`, `link`, or `group`), and `x`/`y`/`width`/`height`. Text nodes take `text` (Markdown, real `\n` for newlines), file nodes take `file`, link nodes take `url`. Optional `color` is preset `"1"`-`"6"` or a hex value.
3. Position nodes to avoid overlap (leave 50-100px spacing). Array order sets z-index: first = bottom layer.
4. Connect nodes with edges: unique `id`, plus `fromNode`/`toNode` referencing real node ids; optionally `fromSide`/`toSide` (top/right/bottom/left) and a `label`.
5. Validate: confirm the JSON parses, all ids are unique, and every `fromNode`/`toNode` resolves to an existing node.
Pitfall: in JSON strings use `\n`, not literal `\\n` - Obsidian renders the latter as the characters `\` and `n`.
Full skill & source: https://github.com/kepano/obsidian-skills/tree/main/skills/json-canvas