VerifiedPlugin
Content
banana-claude
AI image generation skill for Claude Code where Claude acts as Creative Director using Google's Gemini Nano Banana models.
1 skill
@agricidanielContent
Plugin
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.
Plugin Signal60/100Solid
maintained45
capable55
documented100
adopted51
Install
$ npx -y skills add AgriciDaniel/claude-canvas --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
What's inside
Skills
8/canvas-createCreate new Obsidian Canvas files — blank with a starter structure, or from one of 12 template archetypes (presentation, flowchart, mind-map, gallery, dashboard, storyboard, knowledge-graph, mood-board, timeline, comparison, kanban, project-brief). Handles directory creation,/canvas-exportExport 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/canvas-generateAI-orchestrated full canvas generation. Given a description, detects the best archetype, generates content and visuals, instantiates a template, applies layout, and produces a complete canvas. The flagship command. Dispatches canvas-media and canvas-composer agents for parallel/canvas-layoutRe-layout existing Obsidian Canvas nodes using 6 spatial algorithms: grid (galleries, mood boards), dagre (flowcharts, org charts), radial (mind maps), force-directed (knowledge graphs), linear (timelines), and auto-detect. Preserves group membership, snaps to 20px grid, refits/canvas-populateAdd 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/canvas-presentBuild presentation-mode canvases for the Advanced Canvas plugin. Creates slide-deck canvases with 1200x675 group nodes connected by edges for arrow-key navigation. Supports title slides, content slides with images, full-text slides, and optional script annotation columns for
Show all 8 skillsShow fewer
/canvas-templateBrowse and instantiate 12 canvas template archetypes: presentation, flowchart, mind-map, gallery, dashboard, storyboard, knowledge-graph, mood-board, timeline, comparison, kanban, project-brief. Each template generates a ready-to-use canvas with proper layout, zones, and/canvasAI-orchestrated visual production for Obsidian Canvas. Create presentations, flowcharts, mood boards, knowledge graphs, galleries, storyboards, timelines, dashboards, and more with intelligent layout and AI-generated content. Claude acts as Creative Director — dispatching
Agents
3canvas-composerContent strategist for canvas text nodes. Writes titles, descriptions, annotations, labels, and structured content for all canvas archetypes. Follows the 15-30 visible nodes per viewport principle. Content is scannable: headers, bullets, bold. Max 200 words per text node.canvas-layoutSpatial positioning specialist for Obsidian Canvas. Computes optimal node positions using layout algorithms (dagre, grid, radial, force-directed, linear). Preserves zone containment, snaps to 20px grid, refits groups. Dispatched for complex canvases with 30+ nodes requiringcanvas-mediaMedia asset dispatcher for canvas generation. Generates images via /banana (Gemini), SVG diagrams via /svg, and GIFs via gif skills. Returns file paths for placement on canvas. Handles batch generation for multi-image canvases. <example>Context: /canvas generate needs 4 AI
README
1claude-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 optimizationmcpvaultMCP — 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
File tree
52AgriciDaniel/claude-canvasView on GitHub
.claude-plugin/
plugin.json
.gitignore
agents/
canvas-composer.md
canvas-layout.md
canvas-media.md
assets/
cover.png
screenshots/
comparison-canvas-demo.png
demo-canvas-showcase-all.png
demo-real-presentation.png
mind-map-demo.png
project-brief-demo.png
real-image-gallery-demo.png
bin/
setup.sh
CLAUDE.md
commands/
canvas.md
docs/
superpowers/
specs/
2026-04-10-claude-canvas-design.md
hooks/
hooks.json
LICENSE
PRIVACY.md
README.md
scripts/
canvas_layout.py
canvas_template.py
canvas_validate.py
test_all.py
SECURITY.md
skills/
canvas/
canvas-create/
SKILL.md
canvas-export/
SKILL.md
canvas-generate/
SKILL.md
canvas-layout/
SKILL.md
canvas-populate/
SKILL.md
canvas-present/
SKILL.md
canvas-template/
SKILL.md
references/
canvas-spec.md
layout-algorithms.md
media-guide.md
mermaid-patterns.md
performance-guide.md
presentation-spec.md
template-catalog.md
SKILL.md
templates/
comparison.json
dashboard.json
flowchart.json
gallery.json
kanban.json
knowledge-graph.json
mind-map.json
mood-board.json
presentation.json
project-brief.json
storyboard.json
timeline.jsonMore Flows by @agricidaniel.
@agricidanielFAQ
claude-canvas is a Claude Code plugin with 8 hand-picked skills for content work, indexed on Flowy. Install it with the command on its page. It includes canvas-create, canvas-export, canvas-generate. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is 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.
- How do I install claude-canvas?
- Run these in Claude Code: npx -y skills add AgriciDaniel/claude-canvas --agent claude-code. Then prompt normally.
- Does claude-canvas auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is claude-canvas free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.