json-canvas

Create and edit JSON Canvas files with unique IDs and validated edges.

4|1|Updated Feb 19, 2026
One-click install
npx skills add https://github.com/billlzzz26/visual-story-extension --skill json-canvas-billlzzz26
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/billlzzz26/visual-story-extension/tree/main/.qwen/skills/json-canvas
Command: npx skills add https://github.com/billlzzz26/visual-story-extension --skill json-canvas-billlzzz26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually crafting and maintaining JSON Canvas (.canvas) files is error‑prone and time‑consuming, especially when ensuring unique IDs, correct node‑edge relationships, and proper layout for mind maps, flowcharts, or project boards.

Core Features & Use Cases

  • Node & Edge Management: Guides creation of nodes and edges with required fields, unique IDs, and positioning guidelines.
  • Validation Checklist: Provides step‑by‑step checks for ID uniqueness, edge references, and JSON integrity.
  • Layout & Styling: Offers recommendations for node sizes, spacing, colors, and group containers. Use this skill when you need to programmatically generate or edit .canvas files for visual organization in Obsidian or similar tools.

Quick Start

Create a new .canvas file with two text nodes and an edge linking them using the json-canvas skill.

Frequently Asked Questions about json-canvas

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

FAQPage Schema
How do I create Obsidian .canvas files programmatically?

Generating Obsidian .canvas files programmatically requires structuring JSON with node and edge arrays, using unique 16-character hex IDs. This automates creating visual mind maps, flowcharts, and project boards while validating JSON integrity and edge references.

What is the JSON Canvas format used for?

The JSON Canvas format is used to organize ideas, tasks, and research assets into visual mind maps, flowcharts, and project boards. It structures spatial relationships using node and edge arrays for tools like Obsidian.

How do I ensure valid edge references when editing JSON Canvas files?

To ensure valid edge references in JSON Canvas files, validate that every edge connects existing nodes using their unique 16-character hex IDs. A validation checklist verifies JSON integrity and confirms correct node-edge relationships.

Can I use JSON Canvas for project boards outside of Obsidian?

Yes, you can use JSON Canvas for project boards outside of Obsidian. The format defines nodes and edges for visual organization, making it compatible with any tool that parses and renders .canvas file structures.

What are the limitations of manually maintaining JSON Canvas files?

Manually maintaining JSON Canvas files is error-prone and time-consuming, particularly when ensuring unique 16-character hex IDs and correct node-edge relationships. Complex layouts for mind maps and flowcharts become difficult to validate without programmatic generation.