Canvas Layout
- 13 installs
- 246 repo stars
- Updated April 10, 2026
- agricidaniel/claude-canvas
canvas-layout is a Claude Code skill that re-lays-out Obsidian Canvas nodes using six spatial algorithms.
About
canvas-layout rearranges the nodes of an existing Obsidian Canvas using six spatial algorithms: grid, dagre, radial, force-directed, linear, and auto-detect. It preserves group membership, snaps nodes to a 20px grid, and refits zones around content. A developer uses it to clean up or reflow a messy canvas after editing.
- Re-lays-out canvas nodes with 6 spatial algorithms
- Grid, dagre, radial, force, linear, and auto-detect
- Preserves group membership and snaps to a 20px grid
Canvas Layout by the numbers
- 13 all-time installs (skills.sh)
- Ranked #1,418 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
canvas-layout capabilities & compatibility
- Capabilities
- canvas layout · auto layout · graph layout · grid arrange
- Works with
- obsidian
- Use cases
- documentation · ui design
- Pricing
- Free
What canvas-layout says it does
Re-layout existing Obsidian Canvas nodes using 6 spatial algorithms
Preserves group membership, snaps to 20px grid, refits zones around content.
npx skills add https://github.com/agricidaniel/claude-canvas --skill canvas-layoutAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 13 |
|---|---|
| repo stars | ★ 246 |
| Last updated | April 10, 2026 |
| Repository | agricidaniel/claude-canvas ↗ |
What it does
Re-arrange the nodes of an existing Obsidian Canvas using a chosen spatial layout algorithm.
Who is it for?
Reflowing or untangling the nodes of an existing Obsidian Canvas.
When should I use this skill?
You say canvas layout, re-layout canvas, arrange canvas, or fix canvas layout.
What you get
Nodes are re-arranged by the right algorithm, snapped to the grid, and zones are refitted.
- Re-laid-out canvas with a backup .bak file
By the numbers
- 6 spatial layout algorithms
- 20px grid snap
Files
canvas-layout: Re-Layout Canvas Nodes
Read ../canvas/references/layout-algorithms.md for algorithm details and selection guide. Read ../canvas/references/performance-guide.md for node limits.
---
Workflow
1. Identify target canvas: Use the active canvas or ask which one (/canvas list to show options). 2. Select algorithm: Use the user-specified algorithm, or run auto detection. 3. Confirm before applying: Show what will happen: "Will apply [algorithm] layout to [canvas] ([N] nodes, [M] groups). Create backup? [Y/n]" 4. Run the layout script:
python3 scripts/canvas_layout.py [canvas_path] [algorithm] [options]5. Report results: "Moved [N] of [M] nodes. [G] groups refitted. Backup at [path].bak" 6. Validate: Run python3 scripts/canvas_validate.py [canvas_path] to confirm valid output.
---
Algorithm Selection
When the user says /canvas layout auto or doesn't specify an algorithm, use the auto-detection in the script. It analyzes edge density, node types, and connection patterns.
For explicit requests, map user intent to algorithm:
| User says | Algorithm | Options |
|---|---|---|
| "organize these images" | grid | --sort-by type |
| "make a grid" | grid | |
| "flowchart layout" | dagre | --direction TB |
| "left to right flow" | dagre | --direction LR |
| "mind map layout" | radial | |
| "expand from [node]" | radial | --center [node-id] |
| "untangle this" | force | |
| "spread out the nodes" | force | |
| "make a timeline" | linear | --axis horizontal |
| "vertical sequence" | linear | --axis vertical |
| "auto-layout" | auto | |
| "fix the layout" | auto |
---
Options Forwarding
Pass algorithm-specific options to the script:
- grid:
--columns N(override auto-detection),--sort-by type|size - dagre:
--direction TB|LR|BT|RL - radial:
--center node-id(override auto-detection of hub node) - force:
--iterations N(default 100, reduce to 50 for 50+ nodes) - linear:
--axis horizontal|vertical
Add --dry-run to preview without writing.
---
For Complex Layouts (30+ Nodes)
When a canvas has more than 30 nodes, dispatch the canvas-layout agent instead of running the script directly. The agent can:
- Analyze the canvas content to choose sub-groups for different algorithms
- Split large canvases into zone-by-zone layouts
- Handle edge crossing minimization that the basic dagre doesn't cover
- Refine positions after the algorithm runs for better visual balance
---
Edge Cases
- Empty canvas: Report "No nodes to layout" and skip.
- Single node: Center it at (0, 0) and skip.
- No edges + dagre requested: Warn "dagre works best with edges. Using grid instead." Fall back to grid.
- 100+ nodes: Warn about performance. Suggest splitting into sub-canvases.
- Backup conflict: If
.bakalready exists, use.bak2,.bak3, etc.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
Which layout algorithms are supported?
Six: grid, dagre, radial, force-directed, linear, and an auto-detect mode that picks based on edge density and node types.
Does it preserve groups?
Yes. It preserves group membership, snaps to a 20px grid, and refits zones around their content.