json-canvas

Create and edit JSON Canvas files with nodes and edges.

9|2|Updated Mar 12, 2026

Search Tags:#json #obsidian #visualization #canvas #generate #mind-map

Ready to run

npx skills add https://github.com/hongmaple0820/agent-academy --skill json-canvas-hongmaple0820

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/others/json-canvas
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill json-canvas-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and edit JSON Canvas files (.canvas) to visualize and organize ideas within Obsidian and other compatible apps, enabling structured canvases for notes, diagrams, and planning.

Core Features & Use Cases

Supports nodes of types: text, file, link, and group, each with coordinates, size, and optional color
Supports edges connecting nodes with optional labels, sides, and end shapes following the JSON Canvas spec
Provides clear data structure: top-level arrays nodes and edges with unique IDs
Use cases include mind maps, flowcharts, project roadmaps, and visual project notes to enhance understanding

Quick Start

Create a new canvas file named project.canvas and begin adding nodes and edges to visualize your idea.

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 visualizing mind maps in Obsidian?▼

To create a JSON Canvas file, define a top-level structure with nodes and edges arrays. You can add text, file, link, and group nodes with specific coordinates and sizes to visualize ideas within Obsidian.

What node types does the JSON Canvas spec support for generating diagrams?▼

The JSON Canvas spec supports four node types: text, file, link, and group. Each node requires coordinates and size, and can optionally include a color to help organize visual diagrams.

How do I connect nodes with edges in a .canvas file?▼

You connect nodes by defining edges with fromNode and toNode properties. Edges can also include optional labels, sides, and end shapes to accurately map workflows and relationships per the JSON Canvas spec.

Can I use JSON Canvas to plan projects and map workflows without extra dependencies?▼

Yes, you can plan projects and map workflows using JSON Canvas without any dependencies. It provides a clear data structure of interconnected nodes and edges to enhance visual understanding directly in compatible apps.

Does JSON Canvas validate node IDs and types when editing diagrams?▼

Yes, JSON Canvas validates IDs and types according to the JSON Canvas spec. This ensures that every node and edge in your diagram maintains a unique identifier and correct structural format.

What is the best way to structure a JSON Canvas file for project roadmaps?▼

The best way to structure a JSON Canvas file for project roadmaps is to use top-level nodes and edges arrays. Assign unique IDs to text and group nodes to map out phases, and use edges to define connections.