skills.rest
ryan-ressmeyer
ryan-ressmeyerCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Create and edit JSON Canvas files with nodes and edges per Spec 1.0.

Updated Mar 6, 2026
Search Tags:#validation#json#canvas#diagram#node#edge#mind-map
One-click install
npx skills add https://github.com/ryan-ressmeyer/agent-config --skill json-canvas-ryan-ressmeyer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/ryan-ressmeyer/agent-config/tree/main/skills/json-canvas
Command: npx skills add https://github.com/ryan-ressmeyer/agent-config --skill json-canvas-ryan-ressmeyer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas enables users to design and edit canvases that organize information as interconnected nodes and edges, helping visualize ideas, workflows, and diagrams without friction.

Core Features & Use Cases

  • Create and modify canvas files (.canvas) that follow the JSON Canvas Spec 1.0 with nodes and edges.
  • Add and configure node types (text, file, link, group) and connect them with edges, including layout hints and styling options.
  • Validate the integrity of the canvas (unique IDs, valid references, JSON parseability) across common visualization tasks like mind maps, project boards, and diagrams.

Quick Start

Create a new .canvas file named example.canvas with one text node and a connecting edge to illustrate a basic canvas.

Frequently Asked Questions about json-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a JSON Canvas file for a mind map or flowchart?▼

To create a JSON Canvas file, you define interconnected nodes and edges that follow the JSON Canvas Spec 1.0. This structures diagrams like mind maps and flowcharts by establishing valid relationships between text, file, link, and group elements.

What is JSON Canvas validation and why is it needed?▼

JSON Canvas validation ensures structural integrity by enforcing unique 16-character IDs, verifying edge references, and checking JSON parseability. This prevents broken diagrams and maintains valid relationships between nodes across all edits.

Does JSON Canvas support different node types for project boards?▼

Yes, JSON Canvas supports configuring text, file, link, and group node types. You can connect these elements with edges and apply layout hints and styling options to build structured project boards.

Can I edit existing .canvas files without breaking node and edge references?▼

You can edit existing .canvas files while maintaining valid node and edge references. The canvas validation mechanism ensures JSON validity and unique ID generation across all modifications, preventing broken diagram structures.

What is the best way to structure JSON Canvas edges and nodes?▼

The best way to structure JSON Canvas is by generating unique 16-character IDs for nodes and connecting them with validated edges. Following the JSON Canvas Spec 1.0 ensures proper element relationships for diagrams and mind maps.

Related Skills

Explore More Design & Creative Skills→
dr-codedr-code

json-canvas

Create and edit JSON Canvas files with validated node and edge structures.

Community
Intermediate
mattbeard0mattbeard0

json-canvas

Create and edit JSON Canvas diagrams with nodes and edges.

Community
Basic
Tx1207Tx1207
5

json-canvas

Create and edit JSON Canvas files with nodes, edges, and groups.

Community
Intermediate
yoonhwanyoonhwan
3

termaid

Render Mermaid diagram code as styled visual output in the terminal.

Community
Intermediate