Obsidian Canvas Creator
Generate valid Obsidian Canvas JSON with grouped nodes, text cards, colors, and edges for visual knowledge maps.
Overview
obsidian-canvas-creator is an agent skill most often used in Build (also Idea research, Validate scope) that generates Obsidian Canvas JSON with groups, nodes, and layout metadata.
Install
npx skills add https://github.com/axtonliu/axton-obsidian-visual-skills --skill obsidian-canvas-creatorWhat is this skill?
- Emits Obsidian canvas JSON with typed nodes: group, text, and link-ready layouts
- Predefined spatial layout with labeled groups (e.g. Core Concepts vs Applications) and color indices
- Coordinates width, height, x/y placement for readable visual maps agents can extend
- Supports multi-group canvases for splitting concepts and application branches
- Output is paste-ready for Obsidian vault .canvas files without manual drag-alignment
- Example scaffold includes 2 labeled groups and 7+ positioned nodes in the sample JSON
Adoption & trust: 1.3k installs on skills.sh; 3k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want an Obsidian visual map but manually placing dozens of nodes and group frames is slow and error-prone for agents.
Who is it for?
Knowledge workers documenting system design, course outlines, or feature clusters in Obsidian.
Skip if: Teams that do not use Obsidian, runtime app UI mockups, or Miro/FigJam-native workflows.
When should I use this skill?
Creating or extending Obsidian Canvas files with groups, text nodes, colors, and spatial layout from a topic or spec.
What do I get? / Deliverables
You receive valid canvas JSON with grouped sections and positioned text nodes ready to save as a .canvas file in your vault.
- Obsidian-compatible .canvas JSON
- Grouped layout with labeled sections
- Positioned text nodes ready for edge linking
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canvas files are produced while documenting architecture, research, or product thinking alongside the codebase. Structured .canvas JSON is a documentation and thinking artifact, shelved under docs rather than runtime backend code.
Where it fits
Lay out competitor themes and audience insights as grouped canvas nodes before choosing a product angle.
Map MVP features versus later applications in two colored groups for stakeholder review.
Document service boundaries and data flows as a canvas companion to README architecture.
Turn a content series outline into a canvas with application branches for each distribution channel.
How it compares
Use for Obsidian-native .canvas JSON instead of generic Mermaid-only diagrams when you need freeform spatial boards.
Common Questions / FAQ
Who is obsidian-canvas-creator for?
Solo builders and creators who use Obsidian vaults and want agents to draft canvas layouts from topics or specs.
When should I use obsidian-canvas-creator?
During Build docs for architecture maps; in Idea research to cluster competitors and concepts; in Validate scope to visualize feature groups before build.
Is obsidian-canvas-creator safe to install?
It mainly generates local JSON—still review Security Audits on this page and avoid embedding secrets in node text.
SKILL.md
READMESKILL.md - Obsidian Canvas Creator
{ "nodes": [ { "id": "group01", "type": "group", "x": -50, "y": -50, "width": 600, "height": 400, "label": "Group 1 - Core Concepts", "color": "4" }, { "id": "group02", "type": "group", "x": 650, "y": -50, "width": 600, "height": 400, "label": "Group 2 - Applications", "color": "5" }, { "id": "node01", "type": "text", "x": 0, "y": 0, "width": 240, "height": 100, "text": "Concept A", "color": "4" }, { "id": "node02", "type": "text", "x": 290, "y": 0, "width": 240, "height": 100, "text": "Concept B", "color": "4" }, { "id": "node03", "type": "text", "x": 0, "y": 150, "width": 240, "height": 100, "text": "Concept C", "color": "4" }, { "id": "node04", "type": "text", "x": 290, "y": 150, "width": 240, "height": 100, "text": "Concept D", "color": "4" }, { "id": "node05", "type": "text", "x": 700, "y": 0, "width": 240, "height": 100, "text": "Application 1", "color": "5" }, { "id": "node06", "type": "text", "x": 990, "y": 0, "width": 240, "height": 100, "text": "Application 2", "color": "5" }, { "id": "node07", "type": "text", "x": 700, "y": 150, "width": 240, "height": 100, "text": "Application 3", "color": "5" } ], "edges": [ { "id": "e1", "fromNode": "node01", "fromSide": "bottom", "toNode": "node03", "toSide": "top", "toEnd": "arrow" }, { "id": "e2", "fromNode": "node02", "fromSide": "bottom", "toNode": "node04", "toSide": "top", "toEnd": "arrow" }, { "id": "e3", "fromNode": "node01", "fromSide": "right", "toNode": "node05", "toSide": "left", "toEnd": "arrow", "label": "leads to", "color": "3" }, { "id": "e4", "fromNode": "node02", "fromSide": "right", "toNode": "node06", "toSide": "left", "toEnd": "arrow", "label": "enables", "color": "3" } ] } { "nodes": [ { "id": "root001", "type": "text", "x": -150, "y": -60, "width": 300, "height": 120, "text": "# Central Topic\n\nMain concept goes here", "color": "4" }, { "id": "branch01", "type": "text", "x": 250, "y": -200, "width": 220, "height": 100, "text": "Branch 1\n\nFirst main idea", "color": "5" }, { "id": "branch02", "type": "text", "x": 250, "y": -50, "width": 220, "height": 100, "text": "Branch 2\n\nSecond main idea", "color": "5" }, { "id": "branch03", "type": "text", "x": 250, "y": 100, "width": 220, "height": 100, "text": "Branch 3\n\nThird main idea", "color": "5" }, { "id": "detail01", "type": "text", "x": 550, "y": -200, "width": 200, "height": 80, "text": "Detail A", "color": "6" }, { "id": "detail02", "type": "text", "x": 550, "y": -100, "width": 200, "height": 80, "text": "Detail B", "color": "6" } ], "edges": [ { "id": "e1", "fromNode": "root001", "fromSide": "right", "toNode": "branch01", "toSide": "left", "toEnd": "arrow" }, { "id": "e2", "fromNode": "root001", "fromSide": "right", "toNode": "branch02", "toSide": "left", "toEnd": "arrow" }, { "id": "e3", "fromNode": "root001", "fromSide": "right", "toNode": "branch03