Generate and Edit Obsidian JSON Canvas Files

JSON Canvas Skill creates and edits .canvas files for Obsidian - mind maps, flowcharts, visual note structures, and connected canvases - following the JSON Canvas Spec 1.0. A canvas file is a JSON object with two top-level arrays:

{
  "nodes": [],
  "edges": []
}

Use when creating or editing .canvas files for Obsidian, building mind maps, flowcharts, or connected visual note structures, or when the user explicitly mentions JSON Canvas or Obsidian Canvas files.

Four defined workflows, each ending in a validation step: (1) create a new canvas from the base structure, generating unique 16-character hex IDs (e.g. 6f0ad84f44ce9c17) for each node, adding required fields (id, type, x, y, width, height), and adding edges that reference valid node IDs via fromNode/toNode; (2) add a node to an existing canvas by parsing the file, generating a non-colliding ID, choosing a position that avoids overlap (50-100px spacing), and appending the node, optionally wiring new edges; (3) connect two nodes by generating a unique edge ID, setting fromNode/toNode, and optionally fromSide/toSide (top, right, bottom, left) and a label; (4) edit an existing canvas by parsing it, locating the target node or edge by id, modifying attributes, and writing the JSON back. Every workflow ends by re-checking ID uniqueness and that edge references resolve to real nodes.

Four node types share generic attributes (id, type, x, y, width, height, optional color), with array order controlling z-index, first being the bottom layer: text nodes hold Markdown in a text field, with the pitfall that JSON strings need a real newline character for line breaks, not the literal two-character backslash-n, which Obsidian renders as those literal characters; file nodes reference a file path and optional subpath heading/block link; link nodes hold a url; and group nodes are visual containers with an optional label, background image, and backgroundStyle (cover, ratio, or repeat). Edges connect nodes via required id, fromNode, and toNode, with optional fromSide/toSide anchor points, fromEnd/toEnd arrow styling (none or arrow, defaulting to no arrow at the start and an arrow at the end), color, and label.

Colors use either a hex string or a preset numbered "1" through "6", mapped to red, orange, yellow, green, cyan, and purple - the exact rendered hues are intentionally left to each application's own brand palette. Layout guidance covers a negative-capable, infinitely extending canvas (x increases right, y increases down, position is the top-left corner), 50-100px spacing between nodes, 20-50px padding inside groups, alignment to a 10-20px grid, and suggested width/height ranges per node type, such as small text at 200-300 by 80-150 or file previews at 300-500 by 200-400. Full worked examples - mind maps, project boards, research canvases, flowcharts - live in a separate references/EXAMPLES.md file, built against the public JSON Canvas Spec 1.0 and the obsidianmd/jsoncanvas GitHub repository.

Anyone building or editing Obsidian Canvas files programmatically who needs the exact node/edge schema, ID and layout conventions, and a concrete post-edit validation checklist: unique IDs across nodes and edges, resolvable fromNode/toNode references, required fields per node type, valid type/fromSide/toSide/fromEnd/toEnd enum values, valid color presets or hex, and parseable JSON.