skills.rest
XWIlluDelu
XWIlluDeluCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Create and edit JSON Canvas diagrams with validated nodes and edges.

Updated May 26, 2026
Search Tags:#validation#obsidian#flowchart#mind map#json canvas#diagram editing#graph connections
One-click install
npx skills add https://github.com/XWIlluDelu/agent-share --skill json-canvas-xwilludelu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/XWIlluDelu/agent-share/tree/main/lib/json-canvas
Command: npx skills add https://github.com/XWIlluDelu/agent-share --skill json-canvas-xwilludelu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes guesswork and manual errors when creating or updating JSON Canvas files, helping you reliably structure nodes and edges for diagrams and visual maps.

Core Features & Use Cases

  • Generate valid .canvas files: Produces the required top-level JSON shape and supports nodes and edges for visual layouts.
  • Add, connect, and edit diagram elements: Adds new nodes with correct IDs and positions, connects nodes with edges, and updates existing node/edge attributes.
  • Validate integrity automatically: Ensures JSON is parseable, IDs are unique, and edge references correctly point to existing node IDs.
  • Use Case: Turn a brainstorming mind map or a project flowchart into a structured JSON Canvas that Obsidian (or compatible tooling) can render.

Quick Start

Use the json-canvas skill to create a new .canvas mind map named "Project Roadmap" with nodes and labeled edges based on the topics I provide.

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 valid JSON Canvas file for an Obsidian mind map?▼

You can generate a valid JSON Canvas file by structuring top-level nodes and edges into valid JSON. The process enforces unique node IDs and validates fromNode and toNode references to ensure Obsidian renders the mind map correctly.

What is the best way to add and connect nodes in a .canvas flowchart without breaking references?▼

The best way to add and connect nodes in a .canvas flowchart is to use automated validation that enforces unique IDs and validates fromNode and toNode references. This ensures edge connections correctly point to existing node IDs without breaking diagram integrity.

Does JSON Canvas support labeled edges for complex graph connections?▼

Yes, JSON Canvas supports labeled edges for graph connections. You can connect nodes with edges and update existing edge attributes, allowing you to build complex visual layouts like project flowcharts with descriptive relationships.

Why does my Obsidian .canvas diagram show broken graph connections when I edit the JSON?▼

Broken graph connections in a .canvas diagram occur when edge references point to non-existent node IDs. You must validate fromNode and toNode references against existing nodes and enforce unique IDs to keep layout and references consistent.

Can I update existing node attributes in a JSON Canvas visual board?▼

Yes, you can update existing node and edge attributes in a JSON Canvas visual board. You can add new nodes with correct positions, connect them with edges, and modify attributes while keeping the JSON parseable and valid.

Related Skills

Explore More Design & Creative Skills→
guanyangguanyang
947

json-canvas

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

Community
Intermediate
tc9011tc9011

json-canvas

Create and edit 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
DavidROliverBADavidROliverBA
49

c4-diagram

Generate C4 context and container diagrams in Mermaid, flowchart, or PlantUML from YAML frontmatter.

Community
Intermediate