Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From claude-canvas
AI-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 asset generation. Triggers on: canvas generate, generate canvas, create a visual board, build me a canvas, make a canvas about, canvas from description, auto-generate canvas, full canvas generation.
npx claudepluginhub agricidaniel/claude-canvasHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude-canvas:canvas-generateThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The flagship command. Takes a high-level description and produces a complete, populated canvas.
AI-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 sub-agents for image generation, SVG diagrams, GIF creation, and spatial layout. Supports 12 template archetypes, 6 layout algorithms, and Advanced Canvas presentation mode. Triggers on: /canvas, create canvas, build canvas, make a presentation, visual board, mood board, flowchart canvas, storyboard, canvas from template, lay out canvas, export canvas, canvas layout, canvas generate, add to canvas, put this on the canvas, open canvas, canvas present, canvas template.
Manages Obsidian canvas JSON files: creates visual boards, adds images/text cards/PDFs/wiki pages with zone auto-positioning. Integrates /banana images. Use /canvas commands.
Creates and edits Obsidian JSON Canvas (.canvas) files with nodes, edges, groups, and connections for mind maps, flowcharts, and visual diagrams.
Share bugs, ideas, or general feedback.
The flagship command. Takes a high-level description and produces a complete, populated canvas.
Read ../canvas/references/template-catalog.md for archetype descriptions.
Read ../canvas/references/media-guide.md for image/SVG/GIF integration.
Read ../canvas/references/mermaid-patterns.md for native diagram options.
Read ../canvas/references/performance-guide.md for node limits.
User: "/canvas generate [description]"
│
▼
1. Analyze description
│
▼
2. Detect archetype
│
▼
3. Plan content (what nodes, what media)
│
▼
4. Generate in parallel:
┌─────────────┬────────────────┐
│ Composer │ Media agent │
│ (text nodes) │ (images/SVGs) │
└──────┬──────┴───────┬────────┘
│ │
▼ ▼
5. Instantiate template with content
│
▼
6. Apply layout algorithm
│
▼
7. Validate + write
Parse the user's description to extract:
Map the description to one of the 12 template archetypes:
| Keywords in description | Archetype |
|---|---|
| "presentation", "slides", "deck", "present" | presentation |
| "flowchart", "process", "workflow", "steps" | flowchart |
| "mind map", "brainstorm", "ideas", "explore" | mind-map |
| "gallery", "images", "photos", "showcase" | gallery |
| "dashboard", "metrics", "KPIs", "status" | dashboard |
| "storyboard", "scenes", "video", "script" | storyboard |
| "knowledge graph", "entities", "relationships" | knowledge-graph |
| "mood board", "inspiration", "aesthetic", "vibe" | mood-board |
| "timeline", "events", "history", "milestones" | timeline |
| "comparison", "vs", "compare", "options" | comparison |
| "kanban", "tasks", "board", "sprint" | kanban |
| "brief", "kickoff", "project plan", "objectives" | project-brief |
If the archetype is ambiguous, ask the user to clarify.
Based on the archetype and description, plan:
For simple canvases (text-only, <10 nodes): Generate content inline — no agents needed.
For complex canvases (media required or >10 nodes): Dispatch agents in parallel:
a. Dispatch canvas-composer agent with:
b. Dispatch canvas-media agent with (if media requested):
c. Wait for both agents to complete. Collect their JSON output.
Use the template engine to create the base canvas:
python3 scripts/canvas_template.py [archetype] [output_path] \
--param title="[topic]" --param [archetype_param]=[count]
Then update each node's content with the composer agent's output using the Edit tool.
If the media agent generated images:
If the template's built-in layout is insufficient (e.g., mind-map needs radial, knowledge-graph needs force), apply the appropriate algorithm:
python3 scripts/canvas_layout.py [output_path] [algorithm]
This is the most critical step. A canvas that passes validation but has placeholder text is a FAILURE.
Content check: Read every text node in the canvas. Search for these forbidden strings:
Layout check: Verify the correct layout was applied:
python3 scripts/canvas_layout.py <path> <algorithm>.Spacing check: Run validation to catch overlaps:
python3 scripts/canvas_validate.py [output_path]
Must return valid: true with 0 errors and 0 overlap warnings.
Visual scan: Is this canvas something you'd be proud to show? Would a user open it and immediately understand it? If not, improve it.
Only after ALL four checks pass, report success.
User: /canvas generate "project dashboard for mobile app launch"
python3 scripts/canvas_template.py dashboard output.canvas --param title="Mobile App Launch" --param metric_count=4User: /canvas generate "mood board for a cyberpunk game"
/banana:
User: /canvas generate "presentation about our Q3 results"
slide_count=6| Scenario | Action |
|---|---|
| User description too vague | Ask: "What type of canvas? (presentation, mood board, dashboard, etc.)" |
| Archetype detected but uncertain | Confirm: "I'll create a [archetype] canvas. Sound right?" |
| Media skills not available | Build text-only canvas, suggest manual image addition |
| Canvas would exceed 120 nodes | Warn and suggest splitting into sub-canvases |
| Template instantiation fails | Fall back to manual canvas construction with the orchestrator |