Agent skill

Obsidian Canvas Export

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

MITAuto-check passedDocuments & Office

Install Obsidian Canvas Export

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

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

GitHub CLI
$ gh skill install AgriciDaniel/claude-canvas canvas-export --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-export .claude/skills/canvas-export && 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-export
GitHub stars
299
Token cost
~1.2k tokens
SKILL.md length
430 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 3 steps: Instruct the user: "In Obsidian,… → Or use Obsidian's command palette:… → The exported file appears in the canvas…
  • Saving an Obsidian canvas as a PNG or SVG image
  • SKILL.md covers Export Methods, Operations, Output Directory Convention and Limitations
  • Calls python3, pip and playwright

What it does

The skill exports a canvas to an image or PDF through three methods, tried in order. Method 1 is the Advanced Canvas plugin's own PNG and SVG export, which supports transparency and uses Obsidian's rendering, so the agent points you to the right-click menu or the command palette entry and the file lands in the canvas directory. Method 2 is a Playwright screenshot of a generated standalone HTML view of the canvas JSON, used when Obsidian is not running or the plugin is missing. Method 3 asks you to take a screenshot yourself.

The operations are PNG, SVG and PDF exports, written by default to an exports folder inside the canvas directory under the canvas name, and the agent reports the output path and pixel size. Playwright cannot export SVG natively, so that fallback produces a PNG instead. The description also mentions slide-per-page PDF export for presentations and batch export.

When your agent uses it

  • Saving an Obsidian canvas as a PNG or SVG image
  • Exporting a presentation canvas as a slide-per-page PDF
  • Batch exporting several canvases at once
  • Capturing a canvas when Obsidian is not running

Example prompts

  • “Export main.canvas to PNG.”
  • “Turn my product-roadmap canvas into a PDF with one slide per page.”
  • “Export every canvas in the vault's Projects folder as SVG.”

Requirements

  • Obsidian with the Advanced Canvas plugin, for the preferred method
  • Python with Playwright and Chromium, for the fallback

Workflow steps

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

  1. Instruct the user: "In Obsidian, right-click the canvas background → Advanced Canvas → Export as PNG/SVG"
  2. Or use Obsidian's command palette: Advanced Canvas: Export as PNG
  3. The exported file appears in the canvas directory.

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
    • pip
    • playwright

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

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    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 Export loads about 1.2k tokens when it runs. Until then it costs about 112 tokens; SKILL.md has 430 words of instructions outside code blocks.

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

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). 430 words, ~1,152 tokens.

Download SKILL.mdSave it as .claude/skills/canvas-export/SKILL.md (or your agent's skills folder).
name
canvas-export
description
Export Obsidian Canvas files to PNG, SVG, or PDF formats. Uses the Advanced Canvas plugin's built-in export when Obsidian is running, or falls back to Playwright browser-based screenshot capture. Supports single canvas export, presentation slide-per-page PDF export, and batch export. Triggers on: canvas export, export canvas, canvas to png, canvas to pdf, canvas to svg, save canvas as image, screenshot canvas, export presentation.
user-invocable
false

canvas-export: Export Canvas to Image/PDF


Export Methods

Method 1: Advanced Canvas Plugin Export (Preferred)

The Advanced Canvas plugin provides built-in PNG and SVG export with transparency support.

Requirements: Obsidian running with Advanced Canvas installed.

Workflow:

  1. Instruct the user: "In Obsidian, right-click the canvas background → Advanced Canvas → Export as PNG/SVG"
  2. Or use Obsidian's command palette: Advanced Canvas: Export as PNG
  3. The exported file appears in the canvas directory.

This is the highest-quality export method — it uses Obsidian's own rendering engine.

Method 2: Playwright Screenshot (Fallback)

When Obsidian is not running or Advanced Canvas is not installed, use Playwright to capture the canvas.

Requirements: Playwright installed (pip install playwright && playwright install chromium)

Workflow:

  1. Check if Playwright is available:
    bash
    python3 -c "from playwright.sync_api import sync_playwright; print('ok')" 2>/dev/null && echo "available" || echo "not available"
  2. If available, generate a standalone HTML viewer of the canvas and screenshot it:
    bash
    # Generate HTML from canvas JSON
    python3 -c "
    import json, sys
    canvas = json.load(open(sys.argv[1]))
    # ... render to HTML with absolute positioning ...
    " [canvas_path] > /tmp/canvas-preview.html
    
    # Screenshot with Playwright
    python3 -c "
    from playwright.sync_api import sync_playwright
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={'width': 1920, 'height': 1080})
        page.goto('file:///tmp/canvas-preview.html')
        page.screenshot(path='[output_path]', full_page=True)
        browser.close()
    "
  3. Report the output path and dimensions.
Method 3: User-Assisted Screenshot

When neither method is available:

  1. Tell the user: "Open the canvas in Obsidian, zoom to fit all content, then take a screenshot."
  2. On Linux (COSMIC): suggest Print key for screenshot tool.
  3. On macOS: suggest Cmd+Shift+4.

Operations

Export to PNG (/canvas export png [output_path])
  1. Identify the target canvas (default: active canvas or main.canvas).
  2. Determine output path:
    • If provided: use it.
    • If not: [canvas_dir]/exports/[canvas-name].png
  3. Try Method 1 (Advanced Canvas) first.
  4. If not available: try Method 2 (Playwright).
  5. If neither: use Method 3 (user-assisted).
  6. Report: "Exported [canvas] to [path] ([width]x[height] pixels)"
Show full SKILL.md (194 more words)Show less
Export to SVG (/canvas export svg [output_path])
  1. Same flow as PNG, but use SVG format.
  2. Advanced Canvas supports SVG export with transparency.
  3. Playwright fallback: render HTML, use page.screenshot(type='svg') — note: Playwright doesn't natively export SVG. Fall back to PNG.
  4. Report format and path.
Export to PDF (/canvas export pdf [output_path])

For standard canvases:

  1. Export to PNG first, then convert: convert [png] [pdf] (ImageMagick).

For presentation canvases:

  1. Detect if canvas has edge-connected slide groups (presentation pattern).
  2. Export each slide group as a separate PNG.
  3. Combine into a multi-page PDF:
    bash
    convert slide-1.png slide-2.png slide-3.png output.pdf
  4. Report: "Exported [N]-slide presentation to [path]"

Output Directory Convention

Exports go to [canvas_dir]/exports/ by default:

  • Vault mode: wiki/canvases/exports/
  • Standalone mode: .canvases/exports/

Create the directory if it doesn't exist.


Limitations

  • Playwright rendering is approximate — it doesn't replicate Obsidian's exact canvas renderer
  • SVG export via Playwright is not supported — falls back to PNG
  • PDF export requires ImageMagick (convert command)
  • Mermaid diagrams in text nodes may not render in Playwright screenshots (requires Mermaid JS library)
  • GIF animations are captured as static frames in screenshots
  • Export quality depends on the method used (Advanced Canvas > Playwright > Screenshot)

© 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-export of AgriciDaniel/claude-canvas.

Open the folder on GitHubat commit 05b808c

Compare with similar skills

Obsidian Canvas Export 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 Export compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Obsidian Canvas Export this skillAgriciDaniel/claude-canvas299—~1.2kAutomated safety check: PassMIT
Wowerpoint Slide Decksthedotmack/claude-mem98k—~2.2kAutomated safety check: PassApache-2.0
Huashu Markdown Publishing Pipelinealchaincyf/huashu-md-html908—~4.8kAutomated safety check: PassMIT
Paper Deckzsyggg/paper-craft-skills1.3k—~1.4kAutomated safety check: PassNone
Academic Poster Builderwanshuiyin/Auto-claude-code-research-in-sleep17k1 repos~4.5kAutomated safety check: NotesMIT
Lov Any2pdflovstudio/any2pdf211—~2.4kAutomated safety check: NotesMIT

Similar skills

  • Wowerpoint Slide Decks

    thedotmack/claude-mem

    Renders a single source document as a narrative slide-deck PDF through NotebookLM, saved beside the original file for sharing.

    98k GitHub stars~2.2k tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed
  • Huashu Markdown Publishing Pipeline

    alchaincyf/huashu-md-html

    Converts files and web pages into clean Markdown, then turns Markdown into polished HTML, Word, PDF and EPUB using four templates.

    908 GitHub stars~4.8k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check passed
  • Paper Deck

    zsyggg/paper-craft-skills

    将论文、技术文章或知识内容制作成高真实感的 AIGC 幻灯片。先做叙事结构和逐页视觉导演,再调用生图模型生成每一页 16:9 slide image,最后合成为 PPTX/PDF。适合论文汇报、组会、公开课、技术分享、商业化研究展示;当用户提到“论文PPT”“AI生成PPT”“不像AI的PPT”“高质感幻灯片”“逐页生图PPT”时使用。

    1.3k GitHub stars~1.4k tokensUpdated 4 mo ago
    Documents & OfficeAuto-check passed
  • Academic Poster Builder

    wanshuiyin/Auto-claude-code-research-in-sleep

    Builds an academic conference poster as a single HTML and CSS file with measurement-based gates, real paper figures and a print-ready PDF rendered through headless Chromium.

    17k GitHub starsUsed in 1 repo~4.5k tokens
    Documents & OfficeAuto-check: notes
  • Lov Any2pdf

    lovstudio/any2pdf

    Convert Markdown documents to professionally typeset PDF files with reportlab.

    211 GitHub stars~2.4k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes
  • Documents

    zhongkaifu/TensorSharp

    Read and write real documents on the device - PDF, XLSX, DOCX, PPTX and CSV.

    557 GitHub stars~4.2k tokensUpdated today
    Documents & OfficeAuto-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.

    299 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.

    299 GitHub stars~849 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.

    299 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.

    299 GitHub stars~866 tokensUpdated 6 mo ago
    Auto-check passed
  • Obsidian Canvas Populator

    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.

    299 GitHub stars~1.6k 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.

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

Questions about Obsidian Canvas Export

What does Obsidian Canvas Export do?

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. The skill exports a canvas to an image or PDF through three methods, tried in order. Method 1 is the Advanced Canvas plugin's own PNG and SVG export, which supports transparency and uses Obsidian's rendering, so the agent points you to the right-click menu or the command palette entry and the file lands in the canvas directory.

When should I use Obsidian Canvas Export?

Obsidian Canvas Export fits situations like: saving an Obsidian canvas as a PNG or SVG image; exporting a presentation canvas as a slide-per-page PDF; batch exporting several canvases at once; capturing a canvas when Obsidian is not running.

How do I install Obsidian Canvas Export in Claude Code?

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

How do I install Obsidian Canvas Export in Codex?

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

Can I use Obsidian Canvas Export 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-export -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-export, .gemini/skills/canvas-export, .github/skills/canvas-export and .opencode/skills/canvas-export in your project.

What does Obsidian Canvas Export need to run?

Going by SKILL.md and its folder, Obsidian Canvas Export needs the command-line tools its instructions call (python3, pip and playwright). Our summary lists: Obsidian with the Advanced Canvas plugin, for the preferred method; Python with Playwright and Chromium, for the fallback.

Does Obsidian Canvas Export access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Obsidian Canvas Export 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 Export use?

Obsidian Canvas Export 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 Export use?

About 1.2k tokens (SKILL.md is roughly 4.6k 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 Export?

Skills that share tags, products or a category with Obsidian Canvas Export: Wowerpoint Slide Decks (thedotmack/claude-mem, 98k stars), Huashu Markdown Publishing Pipeline (alchaincyf/huashu-md-html, 908 stars), Paper Deck (zsyggg/paper-craft-skills, 1.3k stars) and Academic Poster Builder (wanshuiyin/Auto-claude-code-research-in-sleep, 17k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Obsidian Canvas Export?

AgriciDaniel (a GitHub user) maintains it in AgriciDaniel/claude-canvas, which has 299 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.