skills.rest
xfs96192
xfs96192COMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated Jan 25, 2026
Search Tags:#nodes#flowchart#visualization#edges#mind-map#json-canvas
One-click install
npx skills add https://github.com/xfs96192/claude-config --skill json-canvas-xfs96192
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/xfs96192/claude-config/tree/main/skills/json-canvas
Command: npx skills add https://github.com/xfs96192/claude-config --skill json-canvas-xfs96192

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas files enable visual representation of data flows, mind maps, and process graphs; this skill makes creating and editing canvases easy and repeatable.

Core Features & Use Cases

  • Create a new .canvas file with the base {"nodes": [], "edges": []} structure to start a diagram.
  • Add, edit, and organize nodes (text, file, link, group) and connect them with edges using unique IDs.
  • Use cases include planning concepts, mapping workflows, and documenting relationships in Obsidian or other editors.

Quick Start

Create a new .canvas file and start adding nodes and edges to visualize your data flow.

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 in Obsidian?▼

To create a JSON Canvas file, you start with the base structure {"nodes": [], "edges": []}. You then add and organize nodes—such as text, file, link, and group types—and connect them using edges to visualize data flows, mind maps, and process graphs.

What are the structural requirements for nodes and edges in a JSON Canvas file?▼

Nodes in a JSON Canvas file require unique 16-character IDs for identification. Edges must reference existing nodes, ensuring that all connections point to valid elements within the canvas structure.

Can I use JSON Canvas files to map workflows and document relationships outside of Obsidian?▼

Yes, JSON Canvas files are supported in Obsidian and other editors. You can use them to plan concepts, map workflows, and document relationships by structuring nodes, edges, and groups for visual data representation.

What is the best way to edit an existing JSON Canvas structure without breaking node connections?▼

When editing a JSON Canvas structure, the system validates the JSON structure and enforces unique 16-character IDs for nodes. It ensures that any edge references you modify or add always point to existing nodes.

How do I organize different types of nodes when planning a flowchart in a JSON Canvas?▼

You can add, edit, and organize different node types—including text, file, link, and group nodes—within your JSON Canvas. These nodes are connected with edges to structure process graphs and flowcharts.

Why does my JSON Canvas edge validation fail when connecting nodes?▼

Edge validation fails in a JSON Canvas if the edge references do not point to existing nodes. The skill enforces unique 16-character IDs for nodes and validates the JSON structure to ensure all edge connections are valid.

Related Skills

Explore More Design & Creative Skills→
kimgeakimgea

json-canvas

Generate and edit JSON Canvas files with nodes and edges.

Community
Intermediate
Imad-OuteImad-Oute
2

mh-board-builder

Build kanban, status, priority matrix, and roadmap boards as .canvas files.

Community
Intermediate
zephyrwang6zephyrwang6
333

json-canvas

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

Community
Basic
PiaoxuemoliPiaoxuemoli

pretext

Measure, layout, and render text using canvas without the DOM.

Community
Advanced