Skip to content
UXClaim
Design Ops

Claude Canvas

AI-orchestrated visual production for Obsidian Canvas. Create presentations, flowcharts, mood boards, and knowledge graphs with intelligent layout.

View source More in Design Ops

What It Does

Claude Canvas transforms text descriptions into fully-populated, professionally-laid-out visual canvases in Obsidian. Claude acts as your Creative Director—describe what you need and get a complete canvas with intelligent node placement, generated content, and styled layouts.

How It Works

Start with one of 12 built-in templates (presentation, flowchart, mind map, gallery, dashboard, storyboard, knowledge graph, mood board, timeline, comparison, kanban, project brief), then populate nodes with images, text, PDFs, diagrams, and links. Claude intelligently arranges everything using six layout algorithms (dagre, grid, radial, force-directed, linear, auto-detect). Export to PNG, SVG, or PDF when ready.

Use Cases

  • Product teams: Create project briefs, dashboards, and roadmap visualizations
  • Designers: Build mood boards, storyboards, and design system galleries
  • Researchers: Map knowledge graphs and comparison matrices
  • Content creators: Generate presentation decks and timeline visualizations
  • Anyone visual: Turn ideas into organized canvases without manual layout work

Who Benefits

Product managers, UX designers, content strategists, and researchers who want to create visual communications faster. Works seamlessly with Obsidian Canvas and the Advanced Canvas plugin for presentations.

Frequently asked questions

How do I install Claude Canvas?
Install via Claude Code CLI with `claude plugin install AgriciDaniel/claude-canvas`, or clone the repo and add it to your project. Requires Obsidian v1.1+ with Canvas support and Python 3.10+. Advanced Canvas plugin recommended for presentations.
What templates are available?
12 templates: presentation (slide decks), flowchart (processes), mind-map (radial exploration), gallery (grid images), dashboard (project status), storyboard (animation planning), knowledge-graph (entity relationships), mood-board (creative direction), timeline (events), comparison (side-by-side), kanban (task columns), project-brief (kickoff structure).
Can Claude Canvas generate images automatically?
Yes, if the `/banana` skill (Gemini image generation) is installed. Use `/canvas add [image-name] [description]` to generate and add AI images. The `/canvas generate` command creates entire canvases from a single description with AI-generated content.
How does the layout algorithm work?
Six algorithms available: dagre (hierarchical), grid (even distribution), radial (center-out), force-directed (relationship-based), linear (sequences), and auto-detect. Use `/canvas layout [algorithm]` to re-layout existing canvases. Auto-detect chooses the best fit based on your content.
Can I present canvases as slideshows?
Yes, with Advanced Canvas plugin installed. Use `/canvas present` to build 1200x675 presentation canvases with slide groups and edge navigation. Works with the presentation template for organized slide decks.
What file formats can I export to?
Export canvases to PNG (raster), SVG (vector), or PDF. Use `/canvas export [format]` to generate files. SVG and PDF preserve editability; PNG works best for sharing.
Does Claude Canvas work with my existing Obsidian vault?
Yes, it's vault-aware. If `wiki/canvases/` exists, it saves there. Otherwise creates `.canvases/` in your project folder. Integrates with mcpvault MCP to read wiki notes and with skills like `/svg` and `/claude-gif-*` when installed.
Can I add custom content like PDFs and diagrams?
Yes. Add PDFs, markdown text, Mermaid diagrams (render natively), SVG files, GIFs, web links, and wiki notes. Use commands like `/canvas add text`, `/canvas add mermaid`, `/canvas add image` to populate nodes with any content type.

Glossary

Canvas
A visual workspace in Obsidian where nodes (content blocks) are connected by edges (lines). Follows the JSON Canvas 1.0 open standard. Supports text, images, PDFs, links, and diagrams.
Node
An individual element on a canvas representing content: text cards, images, file embeds, links, or diagrams. Positioned in 2D space and optionally grouped into zones.
Zone
A colored container grouping related nodes on a canvas. Used for visual organization (e.g., 'Research', 'Development', 'Review'). Common in kanban, project brief, and dashboard templates.
Layout Algorithm
An automatic arrangement method for positioning nodes. Examples: dagre (hierarchical), radial (circular), force-directed (physics-based), grid (even spacing), linear (sequences).
Template Archetype
A pre-designed canvas structure optimized for specific use cases (presentation, flowchart, mood board, etc.). Includes layout rules, zone structure, and content guidance.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.