skills.rest
sonhaicoder
sonhaicoderCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Create and edit JSON Canvas files with nodes and edges.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas files (.canvas) are a flexible way to model mind maps, flowcharts, and project canvases within Obsidian, but users often struggle to create, edit, and maintain consistent structures. This skill provides a clear, repeatable workflow to create and modify .canvas files with proper node and edge schemas.

Core Features & Use Cases

  • Create new canvases with the base structure {"nodes": [], "edges": []} and add nodes, edges, and groups following the JSON Canvas Spec 1.0.
  • Edit existing canvases by updating node/edge properties, repositioning elements, and validating references to ensure integrity.
  • Use cases include mind maps, flowcharts, project boards, and knowledge graphs inside Obsidian, with guidance to generate IDs and layout spacing.

Quick Start

Create or open a .canvas file and add nodes and edges following the JSON Canvas 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 JSON Canvas file for Obsidian?▼

To create a JSON Canvas file in Obsidian, initialize a .canvas file with the base structure {"nodes": [], "edges": []} and add elements following the JSON Canvas Spec 1.0. You can then populate it with nodes, edges, and groups to model your diagrams.

What is the JSON Canvas format used for in Obsidian?▼

The JSON Canvas format is used to model and visualize diagrams like mind maps, flowcharts, and project canvases inside Obsidian. It provides a flexible, text-based structure to maintain consistent layouts and data integrity for knowledge work.

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

To validate references in a .canvas file, ensure every edge points to existing node IDs and that all nodes and edges use 16-character hex IDs. This validation process guarantees data integrity and reliable diagram connections.

Can I edit existing Obsidian canvas files programmatically?▼

Yes, you can edit existing Obsidian canvas files by updating node and edge properties, repositioning elements, and validating references. This allows you to programmatically modify diagrams while ensuring consistent layout spacing and schema compliance.

Why do my Obsidian canvas edges not connect properly?▼

Obsidian canvas edges fail to connect properly when they do not reference existing nodes or lack the required 16-character hex IDs. Ensuring proper type fields and validating edge references against existing nodes resolves these connection issues.

Related Skills

Explore More Design & Creative Skills→
CarbeneAICarbeneAI
9

Obsidian

Create and edit Obsidian Markdown, Bases, and JSON Canvas files.

Community
Intermediate
7loro7loro
1

json-canvas

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

Community
Basic
zhengfranzhengfran

obsidian-canvas-creator

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

Community
Intermediate
thimsluggathimslugga

json-canvas

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

Community
Intermediate