json-canvas_skill

Overview

This skill creates and edits JSON Canvas (.canvas) files used by Obsidian and other infinite-canvas apps. It generates valid JSON following the JSON Canvas Spec 1.0 and produces nodes, edges, groups, colors, and layout metadata suitable for direct use. The skill focuses on correctness, id generation, and layout recommendations.

How this skill works

The skill builds and validates canvas JSON structures with top-level nodes and edges arrays, ensuring required fields and types per node. It generates unique 16-character hexadecimal IDs, verifies edge references, enforces allowed enums (node types, sides, end shapes, backgroundStyle), and supports color presets or hex values. It can produce examples, update existing canvases, and apply layout and spacing rules for readable canvases.

When to use it

• When you need to create a new .canvas file for Obsidian or compatible apps
• When editing or repairing an existing canvas JSON (nodes, edges, ids, references)
• When converting notes, diagrams, or mind maps into a JSON Canvas layout
• When you want programmatic generation of flowcharts, boards, or research canvases
• When the user explicitly mentions Canvas files or Obsidian Canvas integration

Best practices

• Keep node ids unique across both nodes and edges; use lowercase 16-character hex strings
• Follow recommended sizes and spacing: align to a 10–20px grid and leave 20–50px padding inside groups
• Validate that every edge fromNode/toNode references an existing node id before saving
• Use color presets "1"–"6" for consistent app theming or hex values for precise colors
• Order nodes in the nodes array by z-index (first = bottom, last = top)

Example use cases

• Generate a mind map: central text node with supporting text nodes and connecting edges
• Create a project board: groups for To Do/In Progress/Done plus tasks as text nodes
• Build a research canvas: file nodes for papers, link nodes for external resources, and labeled edges
• Produce a flowchart: step nodes with directional edges and decision branching labels
• Repair a broken canvas: fix missing fields, invalid enums, or mismatched edge references