Agent skill

Obsidian Canvas Populator

by AgriciDaniel in 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.

MITAuto-check passedKnowledge Management

Install Obsidian Canvas Populator

skills CLI
$ npx skills add AgriciDaniel/claude-canvas --skill canvas-populate -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AgriciDaniel/claude-canvas canvas-populate --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AgriciDaniel/claude-canvas.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/canvas-populate .claude/skills/canvas-populate && rm -rf skills-src

Use ~/.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/

Facts

Skill name
canvas-populate
GitHub stars
300
Token cost
~1.6k tokens
SKILL.md length
688 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Adds images, text cards, PDFs, notes, links, diagrams, zones and edges to an existing Obsidian Canvas file without overlapping what is already there.

  • Works in 9 steps: Read the target canvas JSON. Parse nodes… → Collect existing IDs to prevent… → Generate a new ID:… → …
  • Adding an image or PDF to an Obsidian Canvas you already have
  • SKILL.md covers General Workflow, Node Operations, Zone Operations and Edge Operations, plus 2 more sections
  • Calls python3 and curl

What it does

This skill edits the JSON of an existing Obsidian Canvas. For every addition it reads the canvas, collects the existing node IDs to avoid collisions, generates a new ID and works out a position with an auto-positioning algorithm, then checks for at least 80px horizontal and 60px vertical clearance from existing content nodes. It appends the node, runs `python3 scripts/canvas_validate.py` to check overlaps and node count, writes the file and reports what was added and where.

Operations include images (downloaded or copied into the media folder, with the aspect ratio read through PIL or ImageMagick to choose a size), text cards whose height is estimated from the line count, PDFs at a fixed 400 by 520 size, wiki notes added as file nodes and web links. The description also lists zones, edges between nodes, Mermaid diagrams, SVGs, GIFs and banana-generated images. The agent reads the shared canvas-spec and performance-guide references before editing.

When your agent uses it

  • Adding an image or PDF to an Obsidian Canvas you already have
  • Dropping a text card or web link onto a canvas
  • Grouping existing nodes into a labeled zone
  • Connecting two canvas nodes with an edge

Example prompts

  • “Add ./media/architecture.png to my project canvas inside the Design zone.”
  • “Put a text card on the canvas that says Launch checklist due Friday.”
  • “Connect the Research note node to the Summary node on my planning canvas.”

Requirements

  • An existing Obsidian Canvas file
  • Python 3 with Pillow, or ImageMagick, for image sizing

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

  1. Read the target canvas JSON. Parse nodes and edges arrays.
  2. Collect existing IDs to prevent collisions.
  3. Generate a new ID: [type]-[slug]-[unix-timestamp].
  4. Calculate position using the auto-positioning algorithm (see canvas orchestrator).
  5. Spacing check: Verify the calculated position has at least 80px horizontal and 60px vertical gap from ALL existing content nodes. If not…
  6. Append the new node to the nodes array (after any groups — z-index ordering).
  7. Validate: Run python3 scripts/canvas_validate.py — check for overlaps and node count.
  8. Write the updated canvas JSON.
  9. Report: "Added [description] to [zone] zone at position ([x], [y])."

What it can do on your machine

Read from SKILL.md and the folder at commit 05b808c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Shell commands in SKILL.md call:

    • python3
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Obsidian Canvas Populator loads about 1.6k tokens when it runs. Until then it costs about 115 tokens; SKILL.md has 688 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~115
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from AgriciDaniel/claude-canvas at commit 05b808c, republished under its MIT licence (© AgriciDaniel). 688 words, ~1,622 tokens.

Download SKILL.mdSave it as .claude/skills/canvas-populate/SKILL.md (or your agent's skills folder).
name
canvas-populate
description
Add content to existing Obsidian Canvas files. Supports all node types: images (with auto aspect ratio detection), text cards, PDFs, wiki notes, web links, Mermaid diagrams, SVGs, GIFs, AI-generated images via banana. Also adds zones (groups), edges between nodes, and imports recent banana images. Triggers on: canvas add, add to canvas, put on canvas, canvas zone, canvas connect, canvas from banana, add image to canvas, add text to canvas.
user-invocable
false

canvas-populate: Add Content to Canvases

Read ../canvas/references/canvas-spec.md for the full JSON format before any edit. Read ../canvas/references/performance-guide.md for node limits and constraints.


General Workflow

For every add operation:

  1. Read the target canvas JSON. Parse nodes and edges arrays.
  2. Collect existing IDs to prevent collisions.
  3. Generate a new ID: [type]-[slug]-[unix-timestamp].
  4. Calculate position using the auto-positioning algorithm (see canvas orchestrator).
  5. Spacing check: Verify the calculated position has at least 80px horizontal and 60px vertical gap from ALL existing content nodes. If not, shift the position until spacing is clear.
  6. Append the new node to the nodes array (after any groups — z-index ordering).
  7. Validate: Run python3 scripts/canvas_validate.py <path> — check for overlaps and node count.
  8. Write the updated canvas JSON.
  9. Report: "Added [description] to [zone] zone at position ([x], [y])."

Node Operations

add image (/canvas add image [path or url])

Resolve the image:

  • If URL (starts with http): download with curl -sL [url] -o [media_dir]/[filename]. Derive filename from URL path, or use img-[timestamp].jpg if unclear.
  • If local path outside canvas dir: cp [path] [media_dir]/
  • If already canvas-relative: use as-is.

Detect aspect ratio:

bash
python3 -c "from PIL import Image; img=Image.open('[path]'); print(img.width, img.height)"
# or fallback
identify -format '%w %h' [path]

Map to the sizing table in ../canvas/references/canvas-spec.md (7 ratios + PDF + fallback).

Create file node with calculated dimensions. Position using auto-layout.

add text (/canvas add text [content])
json
{
  "id": "text-[slug]-[timestamp]",
  "type": "text",
  "text": "[content]",
  "x": 0, "y": 0,
  "width": 300, "height": 120
}

For multi-line content, estimate height: count newlines, multiply by 24, add 40px padding. Minimum 120px.

add pdf (/canvas add pdf [path])

Copy to [media_dir]/ if outside canvas dir. Fixed size: width=400, height=520.

add note (/canvas add note [wiki-page])
  1. Search for a file matching the page name (case-insensitive, partial match).
  2. Use "type": "file" with vault-relative path. Not "type": "link" — that's for URLs only.
  3. Default size: width=300, height=100.
json
{
  "id": "link-[slug]-[timestamp]",
  "type": "link",
  "url": "[url]",
  "x": 0, "y": 0,
  "width": 400, "height": 120
}

Obsidian fetches Open Graph preview automatically.

add mermaid (/canvas add mermaid [code])

Mermaid renders natively in Obsidian text nodes. Wrap in a fenced code block:

json
{
  "id": "text-mermaid-[timestamp]",
  "type": "text",
  "text": "```mermaid\n[code]\n```",
  "x": 0, "y": 0,
  "width": 500, "height": 400,
  "color": "5"
}

Wider text nodes work better for Mermaid (min 400px wide, 300px tall).

add svg (/canvas add svg [description or path])
  • If path: copy SVG to media dir, add as file node. Width=400, height based on viewBox aspect ratio.
  • If description: delegate to /svg skill to generate, then add the output file.
  • SVGs render as <img> — no interactivity. Must have viewBox attribute.
add gif (/canvas add gif [description or path])
  • If path: copy GIF to media dir, add as file node.
  • If description: delegate to /claude-gif-generate skill, then add the output.
  • Performance limit: max 3 GIFs per canvas, max 480px width. Warn if exceeded.
Show full SKILL.md (298 more words)Show less
add banana (/canvas add banana [prompt])
  1. Check if banana skill is available. If not: "Install the banana skill for AI image generation."
  2. Delegate to banana skill with the prompt.
  3. Wait for image generation.
  4. Add the generated image as a file node (detect aspect ratio, auto-size).
  5. Log the path to .recent-images.txt in the canvas directory.

Zone Operations

zone (/canvas zone [name] [color])
  1. Read canvas JSON.
  2. Find max_y of all existing nodes. Use -80 if canvas is empty (consistent with starter canvas layout where title is at y=-300 and default zone at y=-140):
    python
    if not canvas_nodes:
        max_y = -80
    else:
        max_y = max(n["y"] + n.get("height", 0) for n in canvas_nodes) + 60
  3. Create group node:
json
{
  "id": "zone-[slug]-[timestamp]",
  "type": "group",
  "label": "[name]",
  "x": -400,
  "y": "[max_y]",
  "width": 1000,
  "height": 400,
  "color": "[color or '4']"
}

Valid colors: "1"=red "2"=orange "3"=yellow "4"=green "5"=cyan "6"=purple

  1. Insert the group node BEFORE content nodes in the array (z-index: groups render behind).
  2. Write and report.

Edge Operations

connect (/canvas connect [from] [to] [label])
  1. Read canvas JSON.
  2. Find from and to nodes by ID, label text, or partial match.
  3. If ambiguous, list matches and ask the user to clarify.
  4. Create edge:
json
{
  "id": "e-[from-slug]-[to-slug]-[timestamp]",
  "fromNode": "[from-id]",
  "toNode": "[to-id]",
  "toEnd": "arrow"
}
  1. Omit fromSide/toSide for auto-routing (better results).
  2. Add optional label if provided.
  3. Write and report.

Banana Import

from banana (/canvas from banana)
  1. Check [canvas_dir]/.recent-images.txt for recently logged image paths.
  2. If not found or empty: search for images modified in the last 10 minutes:
    bash
    find [media_dir] -name "*.png" -o -name "*.jpg" -newer /tmp/ten-min-ago
  3. If still none: show the 5 most recently modified images.
  4. Present list: "Found N recent images. Add to canvas? Which zone?"
  5. On confirmation: add each using the add image logic.

Media Directory

  • Vault mode: _attachments/images/canvas/
  • Standalone mode: .canvases/assets/
  • Create if it doesn't exist.
  • All file node paths must be relative to the vault/project root.

© AgriciDaniel, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/canvas-populate of AgriciDaniel/claude-canvas.

Open the folder on GitHubat commit 05b808c

Compare with similar skills

Obsidian Canvas Populator 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.

Obsidian Canvas Populator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Obsidian Canvas Populator this skillAgriciDaniel/claude-canvas300—~1.6kAutomated safety check: PassMIT
Wiki DiagramIssacW228/student-llm-wiki177—~394Automated safety check: PassMIT
Code Graph Mermaid Diagramstrailofbits/skills7.4k—~1.7kAutomated safety check: PassCC-BY-SA-4.0
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid1761 repos~5.6kAutomated safety check: PassNone
Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent1265 repos~3.8kAutomated safety check: NotesApache-2.0
Code To Diagramzebbern/claude-code-guide4.7k—~972Automated safety check: PassMIT

Similar skills

  • Wiki Diagram

    IssacW228/student-llm-wiki

    Add Mermaid diagrams to wiki pages to aid understanding. An agent skill from IssacW228/student-llm-wiki.

    177 GitHub stars~394 tokensUpdated 3 mo ago
    Knowledge ManagementAuto-check passed
  • Code Graph Mermaid Diagrams

    trailofbits/skills

    Official

    Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.

    7.4k GitHub stars~1.7k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Design Doc Mermaid

    SpillwaveSolutions/design-doc-mermaid

    Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.

    176 GitHub starsUsed in 1 repo~5.6k tokens
    DevelopmentAuto-check passed
  • Markdown Mermaid Writing

    neflibata-feng/MyArxiv-Agent

    Comprehensive markdown and Mermaid diagram writing skill that establishes text-based diagrams as the DEFAULT documentation standard.

    126 GitHub starsUsed in 5 repos~3.8k tokens
    DevelopmentAuto-check: notes
  • Code To Diagram

    zebbern/claude-code-guide

    Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.

    4.7k GitHub stars~972 tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Generate Readme

    divar-ir/ai-doc-gen

    Generate or refresh a comprehensive, professional README.md for a repository, with architecture overview, mermaid and optional C4 diagrams, repository structure, dependencies, and API documentation.

    767 GitHub stars~996 tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

More from AgriciDaniel/claude-canvas

All 8 skills in this repo
  • Obsidian Canvas Builder

    AgriciDaniel/claude-canvas

    Builds and lays out Obsidian Canvas files with sub-agents for images, diagrams and layout, from flowcharts and mood boards to presentation decks.

    300 GitHub stars~2.5k tokensUpdated 6 mo ago
    Auto-check passed
  • Canvas Create

    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.

    300 GitHub stars~849 tokensUpdated 6 mo ago
    Auto-check passed
  • Obsidian Canvas Export

    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.

    300 GitHub stars~1.2k tokensUpdated 6 mo ago
    Auto-check passed
  • Canvas Generate

    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.

    300 GitHub stars~2k tokensUpdated 6 mo ago
    Auto-check passed
  • Obsidian Canvas Re-Layout

    AgriciDaniel/claude-canvas

    Rearranges the nodes of an existing Obsidian Canvas with grid, dagre, radial, force-directed or linear layouts while keeping groups intact.

    300 GitHub stars~866 tokensUpdated 6 mo ago
    Auto-check passed
  • Canvas Presentation Builder

    AgriciDaniel/claude-canvas

    Builds an Obsidian Advanced Canvas slide deck with title, content and closing slides wired together by arrow-key navigation edges.

    300 GitHub stars~1.3k tokensUpdated 6 mo ago
    Auto-check passed

Questions about Obsidian Canvas Populator

What does Obsidian Canvas Populator do?

Adds images, text cards, PDFs, notes, links, diagrams, zones and edges to an existing Obsidian Canvas file without overlapping what is already there. This skill edits the JSON of an existing Obsidian Canvas. For every addition it reads the canvas, collects the existing node IDs to avoid collisions, generates a new ID and works out a position with an auto-positioning algorithm, then checks for at least 80px horizontal and 60px vertical clearance from existing content nodes.

When should I use Obsidian Canvas Populator?

Obsidian Canvas Populator fits situations like: adding an image or PDF to an Obsidian Canvas you already have; dropping a text card or web link onto a canvas; grouping existing nodes into a labeled zone; connecting two canvas nodes with an edge.

How do I install Obsidian Canvas Populator in Claude Code?

Run `npx skills add AgriciDaniel/claude-canvas --skill canvas-populate -a claude-code`. Or copy the skill folder (skills/canvas-populate in AgriciDaniel/claude-canvas) into .claude/skills/canvas-populate in your project. Claude Code loads it when a task matches its description.

How do I install Obsidian Canvas Populator in Codex?

Run `npx skills add AgriciDaniel/claude-canvas --skill canvas-populate -a codex`. Or copy the skill folder (skills/canvas-populate in AgriciDaniel/claude-canvas) into .agents/skills/canvas-populate in your project. Codex loads it when a task matches its description.

Can I use Obsidian Canvas Populator in Cursor, Gemini CLI or GitHub Copilot?

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-populate -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-populate, .gemini/skills/canvas-populate, .github/skills/canvas-populate and .opencode/skills/canvas-populate in your project.

What does Obsidian Canvas Populator need to run?

Going by SKILL.md and its folder, Obsidian Canvas Populator needs the command-line tools its instructions call (python3 and curl). Our summary lists: An existing Obsidian Canvas file; Python 3 with Pillow, or ImageMagick, for image sizing.

Does Obsidian Canvas Populator access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Obsidian Canvas Populator safe to install?

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.

What licence does Obsidian Canvas Populator use?

Obsidian Canvas Populator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Obsidian Canvas Populator use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Obsidian Canvas Populator?

Skills that share tags, products or a category with Obsidian Canvas Populator: Wiki Diagram (IssacW228/student-llm-wiki, 177 stars), Code Graph Mermaid Diagrams (trailofbits/skills, 7.4k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 176 stars) and Markdown Mermaid Writing (neflibata-feng/MyArxiv-Agent, 126 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Obsidian Canvas Populator?

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.