Visual Explainer
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
Builds and lays out Obsidian Canvas files with sub-agents for images, diagrams and layout, from flowcharts and mood boards to presentation decks.
$ npx skills add AgriciDaniel/claude-canvas --skill canvas -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/canvas .claude/skills/canvas && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "canvas" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas into .claude/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvasType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add AgriciDaniel/claude-canvas --skill canvas -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/canvas .agents/skills/canvas && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "canvas" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas into .agents/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AgriciDaniel/claude-canvas --skill canvas -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/canvas .cursor/skills/canvas && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "canvas" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas into .cursor/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/AgriciDaniel/claude-canvas.git --path skills/canvas--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add AgriciDaniel/claude-canvas --skill canvas -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/canvas .gemini/skills/canvas && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "canvas" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas into .gemini/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install AgriciDaniel/claude-canvas canvasInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add AgriciDaniel/claude-canvas --skill canvas -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/canvas .github/skills/canvas && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "canvas" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas into .github/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AgriciDaniel/claude-canvas --skill canvas -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/canvas .opencode/skills/canvas && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "canvas" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas into .opencode/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
canvasBuilds and lays out Obsidian Canvas files with sub-agents for images, diagrams and layout, from flowcharts and mood boards to presentation decks.
This skill lets the agent act as a creative director for Obsidian Canvas, turning a description into a populated .canvas file. It first finds where canvases live: a wiki/canvases folder if one exists in the current or a parent directory, as in a claude-obsidian vault, and otherwise a .canvases folder in the working directory, with main.canvas as the default file.
Slash commands route to sub-skills for creating blank or templated canvases, adding nodes (image, text, PDF, note, link, Mermaid, SVG, GIF), drawing zones and connections, re-laying out with auto, grid, dagre, radial, force or linear algorithms, building presentation canvases of 1200x675 slides, generating a full canvas from a description, and exporting to PNG, SVG or PDF. Twelve template archetypes are available, and recent AI-generated images can be imported.
Sub-agents are dispatched for image generation, SVG diagrams, GIF creation and spatial layout, and Advanced Canvas presentation mode is supported. Reference files cover the canvas spec, layout algorithms, media, Mermaid patterns, performance, the presentation spec and a template catalog.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 05b808c. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
python3From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Obsidian Canvas Builder loads about 2.5k tokens when it runs, and up to ~13k if it reads all its reference files. Until then it costs about 188 tokens; SKILL.md has 910 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from AgriciDaniel/claude-canvas at commit 05b808c, republished under its MIT licence (© AgriciDaniel). 910 words, ~2,486 tokens.
.claude/skills/canvas/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.Claude acts as Creative Director for Obsidian Canvas. Describe what you want and get a fully populated, professionally laid-out .canvas file.
Before any operation, determine the canvas directory:
wiki/canvases/ exists in the current directory or a parent: use it (claude-obsidian vault mode)._attachments/images/canvas/.canvases/ in the current working directory (standalone mode)..canvases/assets/Default canvas: [canvas_dir]/main.canvas
| Command | Sub-skill | Description |
|---|---|---|
/canvas (no args) | (inline) | Status: list canvases, node counts, zones |
/canvas create [name] | canvas-create | Create blank or templated canvas |
/canvas create [name] from [template] | canvas-create | Create from archetype |
/canvas add [type] [content] | canvas-populate | Add node (image/text/pdf/note/link/mermaid/svg/gif/banana) |
/canvas zone [name] [color] | canvas-populate | Add group node |
/canvas connect [from] [to] [label] | canvas-populate | Add edge between nodes |
/canvas from banana | canvas-populate | Import recent AI-generated images |
/canvas layout [algorithm] | canvas-layout | Re-layout (auto/grid/dagre/radial/force/linear) |
/canvas present [topic] | canvas-present | Build presentation canvas (1200x675 slides) |
/canvas present from [notes] | canvas-present | Presentation from existing content |
/canvas generate [description] | canvas-generate | AI-orchestrated full canvas generation |
/canvas template list | canvas-template | Browse 12 archetypes |
/canvas template use [name] | canvas-template | Instantiate a template |
/canvas export [format] [path] | canvas-export | Export to PNG/SVG/PDF |
/canvas list | (inline) | List all canvases with stats |
/canvas (no args)main.canvas)./canvas create [name] to start."/canvas list[canvas_dir]/*.canvas.main.canvas 14 nodes (8 images, 3 text, 2 file, 1 group)
design-ideas.canvas 42 nodes (30 images, 4 text, 8 groups)Read these references before performing canvas operations:
references/canvas-spec.md — JSON Canvas 1.0 format, coordinate system, node types, edges, colors, sizingreferences/performance-guide.md — Node limits, GIF lag, SVG gotchas, 20px grid snappingAdditional references:
references/layout-algorithms.md — 6 layout algorithms (canvas-layout)
references/template-catalog.md — 12 archetypes (canvas-template)
references/presentation-spec.md — Advanced Canvas slides (canvas-present)
references/mermaid-patterns.md — Mermaid in text nodes (canvas-populate, canvas-generate)
references/media-guide.md — Image/GIF/SVG integration (canvas-generate, canvas-populate)
Used by canvas-populate to place new nodes. Read references/canvas-spec.md for the full coordinate system.
def next_position(canvas_nodes, target_zone_label, new_w, new_h):
# Find zone group node
zone = next((n for n in canvas_nodes
if n.get('type') == 'group'
and n.get('label') == target_zone_label), None)
if zone is None:
# No zone: place below all content
max_y = max((n['y'] + n.get('height', 0) for n in canvas_nodes), default=-140)
return snap_grid(-400, max_y + 60)
zx, zy = zone['x'], zone['y']
zw, zh = zone['width'], zone['height']
# Nodes inside this zone (exclude groups)
inside = [n for n in canvas_nodes
if n.get('type') != 'group'
and zx <= n['x'] < zx + zw
and zy <= n['y'] < zy + zh]
if not inside:
return snap_grid(zx + 20, zy + 20)
# Find the bottom-most row: nodes whose bottom edge is closest to the zone bottom
max_bottom = max(n['y'] + n.get('height', 0) for n in inside)
# Nodes on the last row: those whose top y is within one row-height of the bottom
last_row = [n for n in inside if n['y'] + n.get('height', 0) >= max_bottom - 20]
if not last_row:
last_row = inside # fallback
rightmost_x = max(n['x'] + n.get('width', 0) for n in last_row)
next_x = rightmost_x + 40
if next_x + new_w > zx + zw:
# Overflow: new row below the current last row
return snap_grid(zx + 20, max_bottom + 20)
# Same row: align to top of the LAST row (not all nodes)
current_row_y = min(n['y'] for n in last_row)
return snap_grid(next_x, current_row_y)
def snap_grid(x, y, grid=20):
return (round(x / grid) * grid, round(y / grid) * grid)Read the canvas JSON first. Collect all existing IDs. Never reuse one.
Pattern: [type]-[content-slug]-[full-unix-timestamp]
Use the full 10-digit Unix timestamp to avoid collisions in batch operations.
Examples: img-cover-1744032823, text-note-1744032845, zone-branding-1744032901
If a collision is detected (ID already exists), append -2, -3, etc.
The minimal valid canvas:
{
"nodes": [],
"edges": []
}Z-index rule: First node in the array renders at the bottom (background). Last node renders on top (foreground). Groups MUST come before their contained nodes so content renders in front of zone backgrounds.
Grid snapping: All x, y, width, height values should be multiples of 20.
Node limit: Warn the user if a canvas exceeds 100 nodes. Error if it exceeds 200.
Every canvas produced by any sub-skill MUST pass these checks before reporting success. These are not optional — they are the definition of "done."
canvas layout radial after instantiation)canvas layout force after instantiation)canvas layout dagre for proper hierarchy)canvas_validate.py to confirmpython3 scripts/canvas_validate.py <path> — must return valid: true with 0 errorsbanana (AI image generation):
/canvas add banana [prompt] delegates to the banana skill, then adds the result as a file node./canvas from banana reads .recent-images.txt or finds images modified in the last 10 minutes.svg (diagram/chart/icon generation):
/canvas add svg [description] delegates to the svg skill, then adds the SVG as a file node.<img> in Obsidian — no interactivity. Must include viewBox for proper scaling.claude-gif-* (GIF generation/editing):
/canvas add gif [description] delegates to the gif skill, then adds as a file node.Mermaid (native in text nodes):
© AgriciDaniel, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 7 other files (references) in skills/canvas of AgriciDaniel/claude-canvas.
Open the folder on GitHubat commit 05b808c
Obsidian Canvas Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Obsidian Canvas Builder this skillAgriciDaniel/claude-canvas | 300 | — | ~2.5k | Automated safety check: Pass | MIT | |
| Visual Explainernicobailon/visual-explainer | 10k | — | ~3.3k | Automated safety check: Pass | MIT | |
| Guizang Material Illustrationop7418/guizang-material-illustration | 1.2k | — | ~1.6k | Automated safety check: Pass | None | |
| Strategy Consulting Visualizationkgraph57/mckinsey-style-visualization-skill | 128 | — | ~3.2k | Automated safety check: Pass | MIT | |
| Article Illustration Batch GeneratorSpaceZephyr/design-buddy | 175 | — | ~1k | Automated safety check: Pass | None | |
| Tesseract Designmirage-hq/Tesseract | 128 | — | ~986 | Automated safety check: Pass | Custom licence |
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
op7418/guizang-material-illustration
Generate Guizang-style material illustrations, labeled explanatory visuals, material-styled chart illustrations, and data-first editorial images from articles, notes, product concepts, workplace…
kgraph57/mckinsey-style-visualization-skill
A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…
SpaceZephyr/design-buddy
Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.
mirage-hq/Tesseract
Create and revise static visual designs as editable Tesseract compositions and rendered PNGs, including posters, social graphics, slide layouts, diagrams, and web/UI mockups.
BingHanOfUESTC/open_agent_team
A skill your agent uses when PPT slides need external images, screenshots, logos, product photos, stock-like visuals, diagrams, or videos that must be downloaded, inserted, or linked with source and…
AgriciDaniel/claude-canvas
Creates new Obsidian Canvas files, either blank with a starter structure or from one of 12 templates such as flowchart, mind map, kanban or timeline.
AgriciDaniel/claude-canvas
Exports Obsidian Canvas files to PNG, SVG or PDF, using the Advanced Canvas plugin when Obsidian is open and falling back to a Playwright screenshot.
AgriciDaniel/claude-canvas
Builds a complete Obsidian canvas from a plain description by picking one of 12 template archetypes, planning nodes, and generating text and media for it.
AgriciDaniel/claude-canvas
Rearranges the nodes of an existing Obsidian Canvas with grid, dagre, radial, force-directed or linear layouts while keeping groups intact.
AgriciDaniel/claude-canvas
Adds images, text cards, PDFs, notes, links, diagrams, zones and edges to an existing Obsidian Canvas file without overlapping what is already there.
AgriciDaniel/claude-canvas
Builds an Obsidian Advanced Canvas slide deck with title, content and closing slides wired together by arrow-key navigation edges.
Works with
Categories
Builds and lays out Obsidian Canvas files with sub-agents for images, diagrams and layout, from flowcharts and mood boards to presentation decks. canvas file.canvas as the default file.
Obsidian Canvas Builder fits situations like: creating a mood board, flowchart or storyboard as an Obsidian canvas; building a presentation from notes inside Obsidian Canvas; re-laying out a cluttered canvas with a different algorithm; exporting a canvas to PNG, SVG or PDF.
Run `npx skills add AgriciDaniel/claude-canvas --skill canvas -a claude-code`. Or copy the skill folder (skills/canvas in AgriciDaniel/claude-canvas) into .claude/skills/canvas in your project. Claude Code loads it when a task matches its description.
Run `npx skills add AgriciDaniel/claude-canvas --skill canvas -a codex`. Or copy the skill folder (skills/canvas in AgriciDaniel/claude-canvas) into .agents/skills/canvas in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AgriciDaniel/claude-canvas --skill canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/canvas, .gemini/skills/canvas, .github/skills/canvas and .opencode/skills/canvas in your project.
Going by SKILL.md and its folder, Obsidian Canvas Builder needs the command-line tools its instructions call (python3). Our summary lists: Obsidian, or a project folder to hold the .canvas files.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Obsidian Canvas Builder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.5k tokens (SKILL.md is roughly 9.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Obsidian Canvas Builder: Visual Explainer (nicobailon/visual-explainer, 10k stars), Guizang Material Illustration (op7418/guizang-material-illustration, 1.2k stars), Strategy Consulting Visualization (kgraph57/mckinsey-style-visualization-skill, 128 stars) and Article Illustration Batch Generator (SpaceZephyr/design-buddy, 175 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
AgriciDaniel (a GitHub user) maintains it in AgriciDaniel/claude-canvas, which has 300 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on April 10, 2026.
Source: AgriciDaniel/claude-canvas on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.