skills.rest
oguzhanguvenkaya
oguzhanguvenkayaCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Create JSON Canvas files with nodes, edges, and validated references.

Updated May 1, 2026
Search Tags:#nodes#flowchart#graph#edges#mind-map#json-canvas
One-click install
npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill json-canvas-oguzhanguvenkaya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations/tree/main/skills/json-canvas
Command: npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill json-canvas-oguzhanguvenkaya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas files enable structured visual canvases (nodes, edges, groups) to be created and edited without manual JSON manipulation. They are useful for mapping ideas, workflows, or research visuals in Obsidian and similar note systems by providing a clear, repeatable structure and validation rules.

Core Features & Use Cases

  • Create and edit a .canvas file containing top-level nodes and edges to represent relationships.
  • Generate unique 16-character IDs for nodes and edges, and validate that edge references connect existing nodes.
  • Use cases include mind maps, flowcharts, project boards, and knowledge graphs, with examples provided in the references.

Quick Start

Create a new .canvas file with an empty structure and add a text node connected by an edge.

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 structure for Obsidian?▼

JSON Canvas files enable structured visual canvases by defining top-level nodes, edges, and groups to represent relationships. They provide a clear, repeatable structure for mapping ideas, workflows, or research visuals in note systems without manual JSON manipulation.

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

Generating a JSON Canvas graph involves creating top-level nodes and edges to represent diagrams. You define unique 16-character IDs for nodes and edges, validate edge references against existing nodes, and specify types and layout for flowcharts or mind maps.

Can I use JSON Canvas to build mind maps and project boards?▼

You need an environment like Obsidian that supports the .canvas file format. The Skill generates the JSON structure with nodes and edges, which requires no external dependencies or modules to validate IDs and edge references.

What's the best way to generate unique IDs for JSON Canvas nodes?▼

Using JSON Canvas for visual notes avoids manual JSON editing by providing a repeatable structure with validation rules. It differs from general graph tools by generating specific .canvas files with validated 16-character node IDs and edge references.

Why do my JSON Canvas edge references fail to connect nodes?▼

Limitations arise if edge references point to non-existent node IDs. The Skill validates these connections and requires correct 16-character ID generation, but complex layout rendering depends on the host application like Obsidian rather than the JSON structure itself.

Related Skills

Explore More Design & Creative Skills→
fantay0312fantay0312

json-canvas

Generate valid JSON Canvas structures with nodes and edges arrays.

Community
Intermediate
stericisherestericishere

json-canvas

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

Community
Basic
TreasoniTreasoni

json-canvas

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

Community
Intermediate
x-TheFoxx-TheFox

excalidraw

Create hand-drawn Excalidraw diagrams from JSON saved as .excalidraw files.

Community
Intermediate