skills.rest
liaocaoxuezhe
liaocaoxuezheCOMMUNITY
Explore all skills by this author →
Website𝕏@liaocaoxuezheGitHub

json-canvas

Create and edit JSON Canvas files with nodes and edges for Obsidian diagrams.

38|2|Updated Oct 14, 2025
Search Tags:#obsidian#flowchart#canvas#diagram#mind-map#json-canvas#nodes-edges
One-click install
npx skills add https://github.com/liaocaoxuezhe/Obsidian_ClaudeCode_Prompt --skill json-canvas-liaocaoxuezhe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/liaocaoxuezhe/Obsidian_ClaudeCode_Prompt/tree/main/claude/skills/json-canvas
Command: npx skills add https://github.com/liaocaoxuezhe/Obsidian_ClaudeCode_Prompt --skill json-canvas-liaocaoxuezhe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Facilitates the creation and editing of JSON Canvas files (.canvas) to model visual structures such as mind maps and flowcharts without manual JSON editing.

Core Features & Use Cases

  • Create nodes of types text, file, link, and group with configurable positions, sizes, and colors.
  • Define edges between nodes with directional anchors and optional labels to illustrate relationships.
  • Use with Obsidian canvas workflows to prototype diagrams, process flows, and project boards.

Quick Start

Create a simple canvas with two text nodes and a connecting 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 for an Obsidian mind map?▼

You create a JSON Canvas file by programmatically defining text, file, link, or group nodes with specific positions and sizes, then connecting them with directional edges to model diagrams. This ensures a valid .canvas file without manual JSON editing.

What is the JSON Canvas format used for in Obsidian?▼

The JSON Canvas format is used in Obsidian to model visual structures like mind maps, flowcharts, and project boards. It programmatically defines nodes and edges to represent elements and their relationships within a .canvas file.

Can I programmatically generate Obsidian flowcharts without manual JSON editing?▼

Yes, you can programmatically generate Obsidian flowcharts by defining nodes and edges that enforce required fields, unique IDs, valid node types, and proper connections. This process outputs a structured .canvas file without manual JSON editing.

Does this approach support grouping nodes and setting colors in a .canvas file?▼

Yes, this approach supports grouping nodes and setting colors in a .canvas file. It allows configuring optional properties like groups, colors, and subpaths alongside required fields for text, file, link, and group node types.

What are the limitations of building project boards with JSON Canvas?▼

Building project boards with JSON Canvas requires strictly enforcing unique IDs, valid node types, and proper edge connections. You must programmatically manage positions, sizes, and directional anchors to maintain valid diagram structures.

Related Skills

Explore More Design & Creative Skills→
kimgeakimgea

json-canvas

Generate and edit JSON Canvas files with nodes and edges.

Community
Intermediate
dr-codedr-code

json-canvas

Create and edit JSON Canvas files with validated node and edge structures.

Community
Intermediate
acefrost511acefrost511

obsidian-markdown

Create and edit Obsidian-style Markdown notes with bidirectional links, embeds, and Mermaid diagrams.

Community
Intermediate
enigmaicon-engenigmaicon-eng
1

json-canvas

Create and edit JSON Canvas files with valid nodes and edges.

Community
Intermediate