Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

JSON Canvas Skill This skill enables skills compatible agents to create and edit valid JSON Canvas files ( .canvas ) used in Obsidian and other applications. Overview JSON Canvas is an open file format for infinite canvas data. Canvas files use the .canvas extension and contain valid JSON following the [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/). File Structure A canvas file contains two top level arrays: nodes (optional): Array of node objects edges (optional): Array of edge objects connecting nodes Nodes Nodes are objects placed on the canvas. There are four node types: text Text content with Markdown file Reference to files/attachments link External URL group Visual container for other nodes Z Index Ordering Nodes are ordered by z index in the array: First node = bottom layer (displayed below others) Last node = top layer (displayed above others) Generic Node Attributes All nodes share these attributes: Attribute Required Type Description id Yes string Unique identifier for the node type Yes string Node type: text , file , link , or group x Yes integer X position in pixels y Yes integer Y position in pixels width Yes integer Width in pixels height Yes integer Height in pixels color No canvasColor Node color (see Color section) Text Nodes Text nodes contain Markdown content. Attribute Required Type Description text Yes string Plain text with Markdown syntax File Nodes File nodes reference files or attachments (images, videos, PDFs, notes, etc.). Attribute Required Type Description file Yes string Path to file within the system subpath No string Link to heading or block (starts with ) Link Nodes Link nodes display external URLs. Attribute Required Type Description url Yes string External URL Group Nodes Group nodes are visual containers for organizing other nodes. Attribute Required Type Description label No string Text label for the group background No string Path to background image backgroundStyle No string Background rendering style Background Styles Value Description cover Fills entire width and height of node ratio Maintains aspect ratio of background image repeat Repeats image as pattern in both directions Edges Edges are lines connecting nodes. Attribute Required Type Default Description id Yes string Unique identifier for the edge fromNode Yes string Node ID where connection starts fromSide No string Side where edge starts fromEnd No string none Shape at edge start toNode Yes string Node ID where connection ends toSide No string Side where edge ends toEnd No string arrow Shape at edge end color No canvasColor Line color label No string Text label for the edge Side Values Value Description top Top edge of node right Right edge of node bottom Bottom edge of node left Left edge of node End Shapes Value Description none No endpoint shape arrow Arrow endpoint Colors The canvasColor type can be specified in two ways: Hex Colors Preset Colors Preset Color "1" Red "2" Orange "3" Yellow "4" Green "5" Cyan "6" Purple Note: Specific color values for presets are intentionally undefined, allowing applications to use their own brand colors. Complete Examples Simple Canvas with Text and Connections Project Board with Groups Research Canvas with Files and Links Flowchart ID Generation Node and edge IDs must be unique strings. Obsidian generates 16 character hexadecimal IDs: This format is a 16 character lowercase hex string (64 bit random value). Layout Guidelines Positioning Coordinates can be negative (canvas extends infinitely) x increases to the right y increases downward Position refers to top left corner of node Recommended Sizes Node Type Suggested Width Suggested Height Small text 200 300 80 150 Medium text 300 450 150 300 Large text 400 600 300 500 File preview 300 500 200 400 Link preview 250 400 100 200 Group Varies Varies Spacing Leave 20 50px padding inside groups Space nodes 50 100px apart for readability Align nodes to grid (multiples of 10 or 20) for cleaner layouts Validation Rules 1. All id values must be unique across nodes and edges 2. fromNode and toNode must reference existing node IDs 3. Required fields must be present for each node type 4. type must be one of: text , file , link , group 5. backgroundStyle must be one of: cover , ratio , repeat 6. fromSide , toSide must be one of: top , right , bottom , left 7. fromEnd , toEnd must be one of: none , arrow 8. Color presets must be "1" through "6" or valid hex color References [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/) [JSON Canvas GitHub](https://github.com/obsidianmd/jsoncanvas)

json-canvas