skills.rest
dr-code
dr-codeCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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
One-click install
npx skills add https://github.com/dr-code/beacon --skill json-canvas-dr-code
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rongarederongarede
4

json-canvas

Create and edit JSON Canvas files with nodes and edges per Spec 1.0.

Community
Basic
cybersadercybersader
5

json-canvas

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

Community
Advanced
TreasoniTreasoni

json-canvas

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

Community
Intermediate
maedmattmaedmatt
3

json-canvas

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

Community
Basic