skills.rest
wsxwj123
wsxwj123COMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

7|Updated Jan 27, 2026
Search Tags:#validation#nodes#canvas#edges#mind-map#json-canvas
One-click install
npx skills add https://github.com/wsxwj123/opencode-skills-backup --skill json-canvas-wsxwj123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/wsxwj123/opencode-skills-backup/tree/main/json-canvas
Command: npx skills add https://github.com/wsxwj123/opencode-skills-backup --skill json-canvas-wsxwj123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual planning and diagramming often require manual structuring; this Skill provides a structured, reusable workflow to create and edit JSON Canvas canvases, reducing errors and repetitive effort.

Core Features & Use Cases

  • Build and modify canvases with nodes, edges, and groups following the JSON Canvas Spec.
  • Validate IDs and references to ensure graph integrity for mind maps, flowcharts, and project diagrams.
  • Reuse canvases across notes and documents to visualize ideas and workflows.

Quick Start

Create a new .canvas file with the base structure, then add a few interconnected nodes.

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

This Skill builds JSON Canvas canvases by enforcing required node fields (id, type, x, y, width, height) and validating edge references, allowing you to quickly generate spec-compliant mind maps for Obsidian.

What is the JSON Canvas spec structure for nodes and edges?▼

The JSON Canvas spec requires nodes to have id, type, x, y, width, and height fields, while edges connect nodes through validated reference IDs to ensure overall graph integrity.

How do I validate reference integrity in a JSON Canvas flowchart?▼

You validate reference integrity in a JSON Canvas flowchart by checking that all edge connections point to existing node IDs, a process this Skill automates to prevent broken graph links.

Can I use color presets when building JSON Canvas project diagrams?▼

Yes, you can use color presets when building JSON Canvas project diagrams, as this Skill supports spec-compliant JSON structures that include color configurations for visual differentiation.

Does this JSON Canvas generator work for notes embedded flowcharts?▼

Yes, this JSON Canvas generator works for notes embedded flowcharts by producing reusable .canvas files that visualize workflows and ideas directly within your documents.

Related Skills

Explore More Design & Creative Skills→
zhengfranzhengfran

obsidian-canvas-creator

Convert text content into Obsidian Canvas JSON with structured 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
mindmorassmindmorass
2

obsidian-publisher

Write Markdown notes and Mermaid diagrams into Obsidian vault folders.

Community
Basic
Arnutt-NArnutt-N

drag-drop

Implement drag-and-drop hooks and UI components for sortable lists, Kanban boards, and file drop zones.

Community
Advanced