json-canvas

Name: json-canvas
Availability: InStock
Author: dr-code

Create and edit JSON Canvas files with validated node and edge structures.

Updated Mar 18, 2026

Search Tags:#json #obsidian #flowchart #visualization #canvas #diagram #mindmap

Ready to run

npx skills add https://github.com/dr-code/beacon --skill json-canvas-dr-code

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/dr-code/beacon/tree/main/plugins/all-skills/skills/json-canvas
Command: npx skills add https://github.com/dr-code/beacon --skill json-canvas-dr-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and maintain valid JSON Canvas (.canvas) files so users can build, edit, and share visual canvases, mind maps, flowcharts, and linked project boards without manually assembling or debugging JSON structures.

Core Features & Use Cases

Schema guidance and examples for nodes, edges, groups, and colors to speed up canvas authoring.
Validation rules to ensure unique IDs, correct node/edge references, and required attributes for each node type.
Use cases include generating Obsidian canvas files for note organization, mapping application architectures, and producing visual project boards with linked files and URLs.

Quick Start

Create a new .canvas file that maps the app architecture with text nodes for services, file nodes for docs, and edges connecting related components.

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 Obsidian .canvas JSON file for a mind map or flowchart?▼

This Skill generates and validates .canvas JSON files by enforcing the JSON Canvas Spec 1.0, ensuring unique IDs, correct node and edge references, and required attributes for text, file, link, and group node types.

What is the JSON Canvas spec structure for linking files and URLs?▼

The JSON Canvas spec structure uses specific node types for linking files and URLs, requiring fields like id, type, and source or file paths to correctly reference external content within visual canvases.

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

Validating node and edge references in a .canvas document involves checking that every edge connects existing node IDs, enforcing ID uniqueness, and verifying that required attributes are present for each defined node type.

Can I use preset or hex colors when building a visual project board in JSON?▼

Yes, you can apply preset or hex colors to nodes when building a visual project board in JSON, allowing you to visually distinguish services, groups, or linked components within the canvas structure.

Does this work with Obsidian canvas files for organizing notes visually?▼

Yes, it works directly with Obsidian canvas files by generating valid .canvas JSON documents, allowing you to organize notes visually, map application architectures, and create project boards with linked files and URLs.

What are the limitations of manually assembling a JSON Canvas flowchart?▼

Manually assembling a JSON Canvas flowchart risks invalid node and edge structures, duplicate IDs, and missing required attributes, which this Skill prevents by validating structures and enforcing the JSON Canvas Spec 1.0.