Create and modify JSON Canvas files with nodes and edges.
npx skills add https://github.com/Nero-kk/claude-agent-skills --skill json-canvas-nero-kk
Please help me install this Agent Skill. Skill: json-canvas Source: https://github.com/Nero-kk/claude-agent-skills/tree/main/claude-skills/json-canvas Command: npx skills add https://github.com/Nero-kk/claude-agent-skills --skill json-canvas-nero-kk
Editing and maintaining .canvas files is error-prone when done manually because IDs can collide, edge references can break, layouts can overlap, and JSON can become invalid, making visual canvases brittle and hard to maintain.
Add a new text node titled "Research Insight" at x 400 y 200 with width 400 and height 200, generate a unique 16-character hex id for it, and connect it to node 8a9b0c1d2e3f4a5b with an arrow.
High-intent search queries and answers about installing and using this skill.
To create a valid .canvas file, generate unique 16-character hex IDs for each node and ensure edge references use valid fromNode and toNode values. This prevents broken references and maintains structural integrity for your visual canvas.
Overlapping nodes and invalid JSON errors occur when manual editing lacks layout spacing guidelines and parse validation. Applying proper x, y, width, and height parameters alongside z-order management prevents these visual canvas issues.
You add a text node by specifying its title, x, y, width, and height with a unique 16-character hex ID, then create an edge connecting the new node to the target node using valid fromNode and toNode references.
Yes, you can use JSON Canvas to build project boards, mind maps, and flowcharts. It supports structured node and edge metadata required for knowledge-management workflows, ensuring valid layout spacing and z-order for visual diagrams.
The best way to validate edge reference integrity is to run JSON parse validation that checks ID uniqueness and confirms every fromNode and toNode reference points to an existing node, preventing broken canvas connections.
Manually editing .canvas files for complex flowcharts risks ID collisions, broken edge references, overlapping layouts, and invalid JSON, making visual canvases brittle and hard to maintain without automated validation.
CarbeneAICreate and edit Obsidian Markdown, Bases, and JSON Canvas files.
glfruitCreate and edit JSON Canvas files with nodes and edges.
zephyrwang6Create and edit JSON Canvas .canvas files with nodes, edges, and groups.
jackjin1997Generate and manipulate JSON Canvas files with nodes and edges.
