skills.rest
breferrari
breferrariCOMMUNITY
Explore all skills by this author →
Website𝕏@brennoferrariGitHub

json-canvas

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

4.3k|501|Updated Feb 28, 2026
Search Tags:#nodes#flowchart#edges#mind-map#json-canvas#visual-diagram
One-click install
npx skills add https://github.com/breferrari/obsidian-mind --skill json-canvas-breferrari
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/breferrari/obsidian-mind/tree/main/.claude/skills/json-canvas
Command: npx skills add https://github.com/breferrari/obsidian-mind --skill json-canvas-breferrari

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas lets you create and edit structured visual canvases that organize ideas as nodes, edges, and groups, enabling quick builds of mind maps, flowcharts, and project canvases within Obsidian.

Core Features & Use Cases

  • Create a new .canvas file with base structure {"nodes": [], "edges": []} and iteratively add text, file, link, or group nodes.
  • Connect nodes with edges, specifying fromNode/toNode, sides, and optional labels, directions, and styling.
  • Validate JSON structure and ensure IDs are unique to prevent broken canvases in complex diagrams.

Quick Start

Create a new .canvas file with the base structure and start adding nodes and edges according to the spec.

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 visual mind map or flowchart in Obsidian?▼

You can create a visual mind map or flowchart by generating a .canvas file with a base JSON structure of nodes and edges, then iteratively adding text, file, link, or group nodes to map out your ideas.

What is the JSON Canvas specification for organizing visual diagrams?▼

The JSON Canvas specification is a structured JSON format that organizes visual diagrams into nodes, edges, and groups, enabling you to build complex project canvases and flowcharts within supported tools like Obsidian.

How do I connect nodes and define edges in a JSON Canvas file?▼

To connect nodes in a JSON Canvas file, you define edges by specifying the fromNode and toNode IDs, and you can optionally include sides, labels, directions, and styling to customize the visual connections.

Do I need to validate JSON structure and unique IDs for Obsidian canvas files?▼

Validating the JSON structure and ensuring unique IDs for nodes and edges is required to prevent broken canvases and maintain visual integrity when building complex diagrams in Obsidian.

Can I use this approach to build project canvases for workflows outside of Obsidian?▼

JSON Canvas implements a 1.0 specification that defines nodes, edges, and layout constraints, making the generated visual diagram files compatible with related workflows and tools that support the format beyond just Obsidian.

What are the limitations when using JSON Canvas for visual planning?▼

JSON Canvas requires strict adherence to the 1.0 specification for node and edge definitions, meaning layout constraints and structural validation must be manually managed to avoid breaking complex visual diagrams.

Related Skills

Explore More Design & Creative Skills→
fantay0312fantay0312

json-canvas

Generate valid JSON Canvas structures with nodes and edges arrays.

Community
Intermediate
joonlabjoonlab
8

json-canvas

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

Community
Intermediate
TreasoniTreasoni

json-canvas

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

Community
Intermediate
levi-qiaolevi-qiao
6

json-canvas

Create and edit nodes and edges in JSON canvas files.

Community
Intermediate