Wiki Diagram
IssacW228/student-llm-wiki
Add Mermaid diagrams to wiki pages to aid understanding. An agent skill from IssacW228/student-llm-wiki.
Adds images, text cards, PDFs, notes, links, diagrams, zones and edges to an existing Obsidian Canvas file without overlapping what is already there.
$ npx skills add AgriciDaniel/claude-canvas --skill canvas-populate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas-populate --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-populate .claude/skills/canvas-populate && 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-populate" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas-populate into .claude/skills/canvas-populate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-populate", 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/canvas-populateType 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-populate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas-populate --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-populate .agents/skills/canvas-populate && 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-populate" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas-populate into .agents/skills/canvas-populate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-populate", 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-populate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas-populate --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-populate .cursor/skills/canvas-populate && 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-populate" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas-populate into .cursor/skills/canvas-populate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-populate", 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-populate--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-populate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AgriciDaniel/claude-canvas canvas-populate --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-populate .gemini/skills/canvas-populate && 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-populate" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas-populate into .gemini/skills/canvas-populate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-populate", 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 canvas-populateInstalls 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-populate -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-populate .github/skills/canvas-populate && 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-populate" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas-populate into .github/skills/canvas-populate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-populate", 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-populate -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-populate --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-populate .opencode/skills/canvas-populate && 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-populate" agent skill from https://github.com/AgriciDaniel/claude-canvas/tree/main/skills/canvas-populate into .opencode/skills/canvas-populate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-populate", 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.
canvas-populateAdds 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. 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.
9 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:
python3curlFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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). 688 words, ~1,622 tokens.
.claude/skills/canvas-populate/SKILL.md (or your agent's skills folder).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.
For every add operation:
nodes and edges arrays.[type]-[slug]-[unix-timestamp].nodes array (after any groups — z-index ordering).python3 scripts/canvas_validate.py <path> — check for overlaps and node count./canvas add image [path or url])Resolve the image:
http): download with curl -sL [url] -o [media_dir]/[filename].
Derive filename from URL path, or use img-[timestamp].jpg if unclear.cp [path] [media_dir]/Detect aspect ratio:
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.
/canvas add text [content]){
"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.
/canvas add pdf [path])Copy to [media_dir]/ if outside canvas dir. Fixed size: width=400, height=520.
/canvas add note [wiki-page])"type": "file" with vault-relative path. Not "type": "link" — that's for URLs only./canvas add link [url]){
"id": "link-[slug]-[timestamp]",
"type": "link",
"url": "[url]",
"x": 0, "y": 0,
"width": 400, "height": 120
}Obsidian fetches Open Graph preview automatically.
/canvas add mermaid [code])Mermaid renders natively in Obsidian text nodes. Wrap in a fenced code block:
{
"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).
/canvas add svg [description or path])/svg skill to generate, then add the output file.<img> — no interactivity. Must have viewBox attribute./canvas add gif [description or path])/claude-gif-generate skill, then add the output./canvas add banana [prompt]).recent-images.txt in the canvas directory./canvas zone [name] [color])-80 if canvas is empty (consistent with starter canvas layout where title is at y=-300 and default zone at y=-140):if not canvas_nodes:
max_y = -80
else:
max_y = max(n["y"] + n.get("height", 0) for n in canvas_nodes) + 60{
"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
/canvas connect [from] [to] [label])from and to nodes by ID, label text, or partial match.{
"id": "e-[from-slug]-[to-slug]-[timestamp]",
"fromNode": "[from-id]",
"toNode": "[to-id]",
"toEnd": "arrow"
}fromSide/toSide for auto-routing (better results).label if provided./canvas from banana)[canvas_dir]/.recent-images.txt for recently logged image paths.find [media_dir] -name "*.png" -o -name "*.jpg" -newer /tmp/ten-min-ago_attachments/images/canvas/.canvases/assets/© AgriciDaniel, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/canvas-populate of AgriciDaniel/claude-canvas.
Open the folder on GitHubat commit 05b808c
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Obsidian Canvas Populator this skillAgriciDaniel/claude-canvas | 300 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Wiki DiagramIssacW228/student-llm-wiki | 177 | — | ~394 | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.4k | — | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| Design Doc MermaidSpillwaveSolutions/design-doc-mermaid | 176 | 1 repos | ~5.6k | Automated safety check: Pass | None | |
| Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent | 126 | 5 repos | ~3.8k | Automated safety check: Notes | Apache-2.0 | |
| Code To Diagramzebbern/claude-code-guide | 4.7k | — | ~972 | Automated safety check: Pass | MIT |
IssacW228/student-llm-wiki
Add Mermaid diagrams to wiki pages to aid understanding. An agent skill from IssacW228/student-llm-wiki.
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
SpillwaveSolutions/design-doc-mermaid
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
neflibata-feng/MyArxiv-Agent
Comprehensive markdown and Mermaid diagram writing skill that establishes text-based diagrams as the DEFAULT documentation standard.
zebbern/claude-code-guide
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
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.
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.
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
Builds an Obsidian Advanced Canvas slide deck with title, content and closing slides wired together by arrow-key navigation edges.
Categories
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.
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.
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.
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.
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.
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.
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.
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 Populator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
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.
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.
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.