skills.rest
pixb
pixbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

Create and edit JSON Canvas files with nodes and edges.

Updated Jun 4, 2025
Search Tags:#nodes#Obsidian#flowchart#canvas#mind map#edges#json canvas
One-click install
npx skills add https://github.com/pixb/pixai --skill json-canvas-pixb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/pixb/pixai/tree/main/skills/json-canvas
Command: npx skills add https://github.com/pixb/pixai --skill json-canvas-pixb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

JSON Canvas is a portable, human-readable data format for representing visual canvases used in planning and diagramming. This skill helps agents generate, validate, and modify .canvas files by composing nodes, edges, and groups that render as mind maps, flowcharts, or project boards, making visual planning reproducible and shareable.

Core Features & Use Cases

  • Create and edit canvases by defining top-level nodes and edges with standard attributes (id, type, x, y, width, height, etc.)
  • Support node types: text, file, link, and group to build rich diagrams; include groups for containment and z-index-like ordering.
  • Typical use cases include creating project boards, mind maps, flowcharts for workflows, and architecture diagrams in Obsidian or other tools.

Quick Start

Use the json-canvas skill to create a minimal canvas with one text node and no edges to illustrate the basic structure.

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 or flowchart?▼

JSON Canvas files require a specific structure including nodes and edges arrays, valid node types like text, file, link, and group, as well as unique IDs with proper connections to ensure valid canvas rendering.

How do I validate a JSON Canvas file to ensure it follows the 1.0 schema?▼

JSON Canvas files require a specific structure including nodes and edges arrays, valid node types like text, file, link, and group, as well as unique IDs with proper connections to ensure valid canvas rendering.

Can I use JSON Canvas to build project boards and architecture diagrams in Obsidian?▼

JSON Canvas files require a specific structure including nodes and edges arrays, valid node types like text, file, link, and group, as well as unique IDs with proper connections to ensure valid canvas rendering.

Does JSON Canvas support grouping nodes and managing z-index ordering for diagrams?▼

JSON Canvas files require a specific structure including nodes and edges arrays, valid node types like text, file, link, and group, as well as unique IDs with proper connections to ensure valid canvas rendering.

What is the best way to modify existing .canvas files for visual planning?▼

JSON Canvas files require a specific structure including nodes and edges arrays, valid node types like text, file, link, and group, as well as unique IDs with proper connections to ensure valid canvas rendering.

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
wyhlovecppwyhlovecpp

obsidian-canvas-creator

Convert structured text into interactive Obsidian Canvas mind maps.

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