skills.rest
hongmaple0820
hongmaple0820COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Design & Creative Skills→
diegocamara89diegocamara89
3

json-canvas

Define and manipulate JSON Canvas files with nodes and edges per Spec 1.0.

Community
Advanced
MarsWang42MarsWang42
964

json-canvas

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

Community
Intermediate
TreasoniTreasoni

json-canvas

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

Community
Intermediate
davepoondavepoon
3.3k

json-canvas

Create and manage JSON Canvas diagrams in .canvas files.

Community
Intermediate