claude-canvas

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

Claude acts as Creative Director — describe what you want and get a fully populated, professionally laid-out canvas.

What It Does

• Create canvases from 12 built-in templates (presentation, flowchart, mind map, gallery, dashboard, storyboard, knowledge graph, mood board, timeline, comparison, kanban, project brief)
• Populate with images, text, PDFs, wiki notes, web links, Mermaid diagrams, SVGs, GIFs
• Layout with 6 algorithms (dagre, grid, radial, force-directed, linear, auto-detect)
• Present with Advanced Canvas plugin support (1200x675 slide groups with edge navigation)
• Generate entire canvases from a single description using AI-generated images and content
• Export to PNG, SVG, or PDF

Install

Claude Code CLI

claude plugin install AgriciDaniel/claude-canvas

Clone

git clone https://github.com/AgriciDaniel/claude-canvas.git ~/Desktop/claude-canvas

Add to existing project

claude plugin add ~/Desktop/claude-canvas

Commands

You say	Claude does
/canvas	List canvases with node counts and zones
/canvas create my-board	Create a new blank canvas
/canvas create launch from presentation	Create from template archetype
/canvas add image photo.png	Add image node with auto aspect ratio
/canvas add text "# Title"	Add markdown text card
/canvas add banana "hero shot"	Generate AI image via /banana, add to canvas
/canvas add mermaid "graph LR..."	Add Mermaid diagram (renders natively)
/canvas zone "Research" 5	Create a cyan-colored zone
/canvas connect node-a node-b	Add edge between nodes
/canvas from banana	Import recent AI-generated images
/canvas layout dagre	Re-layout with hierarchical algorithm
/canvas layout auto	Auto-detect best algorithm
/canvas present "Q3 Review"	Build presentation canvas
/canvas generate "mood board for cyberpunk game"	Full AI-orchestrated generation
/canvas template list	Browse 12 archetypes
/canvas export png	Export canvas to PNG

Templates

Archetype	Layout	Use Case
presentation	Linear vertical	Slide decks for Advanced Canvas
flowchart	Sugiyama/dagre	Process documentation
mind-map	Radial center-out	Idea exploration
gallery	Grid	Image showcases
dashboard	Grid variable	Project status boards
storyboard	Linear horizontal	Video/animation planning
knowledge-graph	Force-directed	Entity relationships
mood-board	Asymmetric grid	Creative direction
timeline	Linear horizontal	Event sequences
comparison	Two columns	Side-by-side analysis
kanban	Column zones	Task management
project-brief	Stacked zones	Project kickoff

Canvas Location

claude-canvas is vault-aware but not vault-dependent:

• If wiki/canvases/ exists (claude-obsidian vault): uses that directory
• Otherwise: creates .canvases/ in your current project

Integration

Works with these skills when installed (gracefully degrades if not available):

• /banana — AI image generation via Gemini
• /svg — Diagram, chart, icon, and pattern generation
• /claude-gif-* — GIF generation, editing, and optimization
• mcpvault MCP — Read wiki notes for presentation content

Requirements

• Obsidian with Canvas support (v1.1+)
• Advanced Canvas plugin (recommended for presentations and export)
• Python 3.10+ (for layout and validation scripts)

File Structure

.claude-plugin/plugin.json     Plugin metadata
commands/canvas.md             CLI entry point
hooks/hooks.json               PostToolUse auto-validation
skills/
  canvas/                      Main orchestrator — routes to sub-skills
    SKILL.md
    references/                7 reference files (spec, layout, performance, templates, presentation, mermaid, media)
  canvas-create/SKILL.md       Create canvases
  canvas-populate/SKILL.md     Add nodes, edges, zones
  canvas-layout/SKILL.md       Re-layout algorithms
  canvas-present/SKILL.md      Presentation builder
  canvas-generate/SKILL.md     AI-orchestrated generation (flagship)
  canvas-template/SKILL.md     Template browser
  canvas-export/SKILL.md       Export to image/PDF
agents/                        3 agents (layout, media, composer)
scripts/                       Python CLI tools (validate, layout, template)
templates/                     12 JSON Canvas archetypes
bin/setup.sh                   Install optional Python dependencies

Screenshots

Full Feature Showcase

AI images, SVG architecture diagram, Mermaid charts, callouts, and zones — all in one canvas

AI Image Gallery

8 diverse AI-generated images arranged in an auto-laid-out gallery zone

Presentation Mode

6-slide deck with real content, Mermaid diagrams, and edge navigation for Advanced Canvas

Mind Map (Radial Layout)

Auto-applied radial layout expanding from central topic

Comparison Template

Side-by-side option zones with criteria comparison section

Project Brief

Stacked zones: header, objectives with KPIs, and deliverables

Origin

claude-canvas originated from the /canvas skill in claude-obsidian — a knowledge companion for Obsidian vaults. The original skill handles wiki-scoped visual boards. claude-canvas extends this into a full visual production system for any project.

Attribution

Built by AgriciDaniel. Canvas format follows the JSON Canvas 1.0 open standard by the Obsidian team.

---

Author

Built by Agrici Daniel - AI Workflow Architect.

• Blog - Deep dives on AI marketing automation
• AI Marketing Hub - Free community, 2,800+ members
• YouTube - Tutorials and demos
• All open-source tools