/canvas-generate

name: canvas-generate
description: >
  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.
user-invocable: false

canvas-generate: AI-Orchestrated Canvas Generation

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.

---

Pipeline

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

---

Workflow

Step 1: Analyze Description

Parse the user's description to extract:

• **Topic**: What is the canvas about?
• **Purpose**: What will it be used for? (presenting, planning, exploring, showcasing)
• **Content hints**: Any specific items, data, or requirements mentioned?
• **Visual requests**: Does the user want images, diagrams, or text-only?

Step 2: Detect Archetype

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.

Step 3: Plan Content

Based on the archetype and description, plan:

• **Node count**: How many nodes does this canvas need? (respect <120 target)
• **Text content**: What text goes in each node?
• **Media assets**: What images, SVGs, or GIFs are needed?
• **Mermaid diagrams**: What data visualizations should be embedded as Mermaid?
• **Edges**: What connections exist between nodes?

Step 4: Generate Content and Media

**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:

• Archetype name
• Topic description
• Number of text nodes needed
• Any source files for context

b. **Dispatch canvas-media agent** with (if media requested):

• List of images/SVGs/GIFs needed
• Prompt descriptions for each
• Target dimensions

c. Wait for both agents to complete. Collect their JSON output.

Step 5: Instantiate Template

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:

• Add each as a file node inside the appropriate zone/slide
• Use the auto-positioning algorithm or manual placement inside groups

Step 6: Apply Layout

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]

Step 7: Quality Gate (MANDATORY)

This is the most critical step. A canvas that passes validation but has placeholder text is a FAILURE.

1. **Content check**: Read every text node in the canvas. Search for these forbidden strings:

• "Describe this" — replace with real content
• "YYYY-MM-DD" — replace with real dates
• "Content goes here" — replace with real content
• "Value: 0" — replace with realistic values
• "Define this entity" — replace with real definition
• "What happened" — replace with real event

If ANY are found, edit the canvas to replace them before proceeding.

2. **Layout check**: Verify the correct layout was applied:

• Mind-map → radial layout (nodes should expand from center, not in a grid)
• Knowledge-graph → force layout (nodes should be organically spread, not in a grid)
• Flowchart → dagre layout (hierarchical top-down or left-right flow)

If the layout looks wrong, run `python3 scripts/canvas_layout.py <path> <algorithm>`.

3. **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.

4. **Visual scan**: Is this canvas something you'd be proud to show? Would a user open it and immediately understand it? If not, improve