skills.rest
dallay
dallayOFFICIAL
Explore all skills by this author →
WebsiteGitHub

json-canvas

Edit and generate Obsidian JSON Canvas files with unique 16-character hex IDs.

Updated Apr 14, 2026
Search Tags:#validation#obsidian#flowchart#canvas#mindmap#json-canvas
One-click install
npx skills add https://github.com/dallay/opencode-docker --skill json-canvas-dallay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/dallay/opencode-docker/tree/main/config/skills/obsidian/json-canvas
Command: npx skills add https://github.com/dallay/opencode-docker --skill json-canvas-dallay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides clear, repeatable instructions for creating, editing, and validating Obsidian JSON Canvas (.canvas) files so users can build and maintain mind maps, flowcharts, project boards, and visual research canvases without corrupting JSON or breaking connections.

Core Features & Use Cases

  • Structured Canvas Creation: Initialize .canvas files with the required nodes and edges arrays and generate unique 16-character hex IDs.
  • Edit and Connect Nodes: Add or modify text, file, link, and group nodes, append edges with fromNode/toNode references, and set anchor sides and labels.
  • Validation and Layout Guidance: Check JSON parseability, ensure ID uniqueness, verify edge references, and follow spacing and sizing recommendations for clean layouts.

Quick Start

Add a new text node with a unique 16-character lowercase hex id, set its type, position, width and height, optionally connect it to existing nodes with a new edge, and then validate IDs and edge references.

Frequently Asked Questions about json-canvas

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

FAQPage Schema
How do I create and edit Obsidian JSON Canvas files for mind maps and flowcharts?▼

Obsidian Canvas workflows involve adding text, file, link, and group nodes to .canvas files using unique 16-character hex IDs. You then append edges with fromNode and toNode references to build mind maps, flowcharts, and project boards.

How do I validate JSON Canvas edge references and node IDs?▼

JSON Canvas validation checks JSON parseability, ensures 16-character hex ID uniqueness across nodes and edges, and verifies edge reference integrity. This prevents broken connections and maintains valid node and edge relationships.

How do I connect nodes in a .canvas file using edges?▼

To connect nodes in a .canvas file, you append edges with fromNode and toNode references pointing to existing node IDs. You can also set anchor sides and labels to define directional flow within your canvas layout.

Does JSON Canvas support grouping nodes and layout guidance?▼

JSON Canvas supports group nodes to cluster related items, alongside coordinate and layout guidance for spacing and sizing. This ensures clean visual organization for research canvases and project boards.

Why does my Obsidian Canvas file break after adding new nodes?▼

Obsidian Canvas files break when JSON becomes unparseable or edge references target non-existent IDs. You must validate 16-character hex ID uniqueness and ensure all required type-specific fields are present before saving.

Related Skills

Explore More Design & Creative Skills→
kimgeakimgea

json-canvas

Generate and edit JSON Canvas files with nodes and edges.

Community
Intermediate
levi-qiaolevi-qiao
6

obsidian-canvas-creator

Convert textual information into Obsidian Canvas JSON files for visual diagrams.

Community
Intermediate
DavidROliverBADavidROliverBA
49

book

Create book notes and extract concepts, patterns, and themes into knowledge nodes.

Community
Advanced
guanyangguanyang
947

json-canvas

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

Community
Intermediate