skills.rest
Shana-AE
Shana-AECOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Create and edit JSON Canvas node-edge diagrams with text, file, link, and group nodes.

2|Updated Jan 28, 2026
Search Tags:#nodes#visualization#canvas#diagram#edges#json-canvas
One-click install
npx skills add https://github.com/Shana-AE/.shanaae-configs --skill json-canvas-shana-ae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/Shana-AE/.shanaae-configs/tree/main/ai/skills/vendor/json-canvas
Command: npx skills add https://github.com/Shana-AE/.shanaae-configs --skill json-canvas-shana-ae

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

JSON Canvas enables users to create and edit canvas-based diagrams stored as .canvas files, providing a structured, portable format for visualizing ideas and workflows within Obsidian and similar tools.

Core Features & Use Cases

  • Create and edit nodes of types text, file, link, and group with positional and dimensional attributes
  • Define edges to connect nodes and build interactive flowcharts, mind maps, or project boards
  • Use cases include planning a feature, visualizing research results, or designing a knowledge map within notes

Quick Start

Create a new canvas file with one text node and one edge to visualize a simple idea

Frequently Asked Questions about json-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I programmatically create Obsidian canvas files for node-edge diagrams?▼

You can programmatically generate Obsidian canvas files by structuring JSON data with nodes and edges arrays, adhering to the JSON Canvas spec to define text, file, link, and group node types with coordinates and dimensions.

What is the JSON Canvas format used for in visualization workflows?▼

The JSON Canvas format is used to store structured, portable node-edge diagrams as .canvas files, enabling visualization of mind maps, flowcharts, and project boards within Obsidian-like environments.

How do I connect nodes with edges when building a flowchart in a canvas file?▼

To connect nodes with edges in a canvas file, define an edges array in your JSON structure referencing the source and target node IDs, allowing you to build interactive flowcharts and knowledge maps.

Can I use JSON Canvas to group related nodes and set their colors on a diagram?▼

Yes, JSON Canvas supports the group node type to cluster related items, and you can apply optional color attributes to nodes to visually distinguish elements within your diagram.

Does the JSON Canvas spec support linking to external files from a diagram node?▼

Yes, the JSON Canvas spec supports a link node type that allows you to embed external URLs, alongside text, file, and group node types, directly within your interactive diagrams.

What are the limitations of editing canvas files as raw JSON compared to visual editors?▼

Editing canvas files as raw JSON requires manual calculation of node coordinates and dimensions, lacking the drag-and-drop visual feedback of standard editors, which can slow down complex diagram layouts.

Related Skills

Explore More Design & Creative Skills→
AIAsysAIAsys
21

AIASys Canvas 编辑

Edit JSON Canvas files with scripted node and edge modifications.

Official
Intermediate
stericisherestericishere

json-canvas

Create and edit JSON Canvas files (.canvas) with nodes and edges per Spec 1.0.

Community
Basic
ThuHuynh1438ThuHuynh1438

json-canvas

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

Community
Intermediate
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic