json-canvas

Installation
Summary

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

  • Supports four node types: text (with Markdown), file references, external links, and visual groups for organizing layouts
  • Edges connect nodes with optional labels, directional arrows, anchor points (top/right/bottom/left), and color coding
  • Includes comprehensive validation workflows: ID uniqueness checks, edge reference integrity, and JSON parsing to prevent broken canvases
  • Provides layout guidelines with suggested dimensions for different node types and spacing rules to avoid overlaps
SKILL.md

JSON Canvas Skill

File Structure

A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:

{
  "nodes": [],
  "edges": []
}
  • nodes (optional): Array of node objects
  • edges (optional): Array of edge objects connecting nodes

Common Workflows

1. Create a New Canvas

Related skills
Installs
21.0K
GitHub Stars
30.5K
First Seen
Jan 20, 2026