Claude Code JSON Canvas Skill for Obsidian Nodes and Edges
Create a `.canvas` graph with explicit coordinates, valid node IDs and edges that match the intended reading order.
中文Install in Claude Code
Use an Obsidian test vault or another JSON Canvas viewer. Start with text nodes so the example has no attachment dependencies.
- Get the complete `cli-tool/components/skills/document-processing/json-canvas` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/json-canvas/SKILL.md`, open Claude Code at the project root, and call `/json-canvas`.
Example task
Create `book-flow.canvas` with Choose a book on the left and Register the loan on the right. Connect them with a rightward arrow.What to check
The file parses and opens with two text nodes and one edge. The arrow terminates at Register the loan.
Original SKILL.md on GitHub · Updated
Frequently asked question
Why can a canvas show nodes but omit an edge?
Check that both edge endpoints match IDs in the nodes array and that the IDs are unique.