skills.rest
joonlab
joonlabCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

Generate and modify JSON Canvas files with nodes, edges, and groups.

8|Updated Jul 26, 2026
Search Tags:#json#obsidian#diagramming#visualization#canvas#mind-map
One-click install
npx skills add https://github.com/joonlab/joonlab-claudecode-setting-for-share --skill json-canvas-joonlab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/joonlab/joonlab-claudecode-setting-for-share/tree/main/claude/skills/json-canvas
Command: npx skills add https://github.com/joonlab/joonlab-claudecode-setting-for-share --skill json-canvas-joonlab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the complexity of manually managing JSON Canvas files, allowing for programmatic creation and modification of visual nodes, edges, and groups.

Core Features & Use Cases

  • Visual Structure Management: Easily define nodes (text, file, link, group) and their spatial relationships.
  • Automated Flowcharts: Generate complex mind maps or flowcharts by programmatically defining node connections and edge labels.
  • Use Case: Use this skill to convert a list of project tasks into a visual Kanban board or a research map within Obsidian by generating the necessary JSON structure.

Quick Start

Use the json-canvas skill to create a new canvas file named project-map.canvas with a central text node and two connected supporting 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 visual mind map or flowchart for Obsidian using JSON?▼

You can create an Obsidian mind map by generating a JSON Canvas file that defines visual nodes and edges to map out spatial relationships. This skill programmatically structures valid JSON for canvas-based diagrams.

What is the JSON Canvas file format used for?▼

The JSON Canvas file format is used to define visual diagrams, mind maps, and flowcharts by managing arrays of nodes and edges. It ensures correct spatial positioning for canvas-based applications like Obsidian.

Can I programmatically convert a list of project tasks into a visual Kanban board?▼

You can programmatically convert project tasks into a visual Kanban board by mapping them to JSON Canvas text nodes and edge connections. This generates the necessary JSON structure for canvas visualization.

Does the JSON Canvas specification support automated node connections and edge labels?▼

The JSON Canvas 1.0 specification supports automated flowcharts by managing node connections and edge labels. This skill ensures valid JSON structure and unique ID generation for these visual elements.

What are the limitations of manually managing JSON Canvas files?▼

Manually managing JSON Canvas files introduces complexity in tracking unique IDs, validating JSON structure, and ensuring correct spatial positioning for text, file, link, and group nodes across large diagrams.

Related Skills

Explore More Design & Creative Skills→
pixbpixb

json-canvas

Create and edit JSON Canvas files with nodes and edges.

Community
Basic
diegocamara89diegocamara89
3

json-canvas

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

Community
Advanced
TreasoniTreasoni

json-canvas

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

Community
Intermediate
jackjin1997jackjin1997
11

json-canvas

Generate and manipulate JSON Canvas files with nodes and edges.

Community
Intermediate