skills.rest
psauxwwf
psauxwwfCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated Aug 23, 2026
Search Tags:#visualization#canvas#diagram#mind-map#json-canvas#nodes-edges
One-click install
npx skills add https://github.com/psauxwwf/.dotfiles --skill json-canvas-psauxwwf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/psauxwwf/.dotfiles/tree/main/.agents/skills/json-canvas
Command: npx skills add https://github.com/psauxwwf/.dotfiles --skill json-canvas-psauxwwf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This unit provides a structured approach to creating, validating, and editing JSON Canvas files (.canvas) that define nodes and edges for diagrams, mind maps, and visual workflows.

Core Features & Use Cases

  • Create new canvases with base structure {"nodes": [], "edges": []}, add text, file, link, and group nodes, and connect them with edges.
  • Validate ID uniqueness and edge references, ensuring fromNode/toNode IDs exist, and maintain layout guidelines for spacing and sizing.
  • Apply in use cases such as project planning canvases, research maps, or documentation diagrams within Obsidian or similar tools.

Quick Start

Create a new .canvas file with the base structure and begin adding nodes and edges to represent your idea.

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 diagram?▼

You create a .canvas file by initializing the base structure {"nodes": [], "edges": []} and then adding text, file, link, or group nodes connected via edges to form your diagram.

What is the JSON Canvas spec used for in visualization workflows?▼

The JSON Canvas spec defines nodes and edges for .canvas files, enabling users to structure, connect, and position graphical elements for project planning canvases, research maps, and documentation diagrams.

Can I use JSON Canvas files with Obsidian for documentation diagrams?▼

Yes, you can use JSON Canvas files for documentation diagrams and visual workflows within Obsidian or similar tools that support the .canvas file format for mind maps and diagrams.

How do I validate node IDs and edge references in a .canvas file?▼

You validate a .canvas file by enforcing unique node IDs and verifying that edge references for fromNode and toNode correctly point to existing nodes within the JSON Canvas structure.

What node types are supported when building a JSON Canvas diagram?▼

When building a JSON Canvas diagram, the supported node types include text, file, link, and group nodes, which you can position and connect with edges to structure your visual workflow.

Are there layout guidelines for spacing and sizing nodes in a JSON Canvas?▼

Yes, building a JSON Canvas involves maintaining layout guidelines for spacing and sizing to ensure text, file, link, and group nodes are positioned correctly within the visual map structure.

Related Skills

Explore More Design & Creative Skills→
joonlabjoonlab
8

json-canvas

Generate and modify JSON Canvas files with nodes, edges, and groups.

Community
Intermediate
zhengfranzhengfran

obsidian-canvas-creator

Convert text content into Obsidian Canvas JSON with structured nodes and edges.

Community
Intermediate
viniruggeriviniruggeri

markdown-mermaid-writing

Create Markdown documents with embedded Mermaid diagrams and enforced accessibility annotations.

Community
Advanced
MarsWang42MarsWang42
964

json-canvas

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

Community
Intermediate