# AI in Whiteboard Mode

Generate diagrams, modify existing content, and ask questions about your whiteboard, all through natural language prompts. AI updates are merged directly into your live scene.

## Opening the AI Assistant

Access the AI command panel in two ways:

### Toolbar Button

Click the animated sparkle icon at the right end of the whiteboard toolbar. It has a distinctive rainbow gradient border.

### Keyboard Shortcut

Press ⌘/Ctrl + K from anywhere in the editor to open the AI panel. Works in both flowchart and whiteboard modes.

## Three AI Modes

The AI panel offers three modes, each shown as a tab. Select the mode that matches what you want to do, then choose a suggestion template or type a custom prompt.

### Create

AI generates a complete whiteboard scene from a text prompt. Shapes, arrows, text, and layout are produced automatically. You refine the result afterward.

#### Quick-action templates

**Diagrams**

- Simple flowchart
- Decision tree
- Architecture diagram

**Wireframes**

- Login page wireframe
- Dashboard layout
- Mobile app screen

**Mind Maps**

- Project brainstorm
- Feature mapping
- Concept exploration

**Planning**

- Sprint board
- Product roadmap
- Timeline with milestones

### Edit

AI reads your current whiteboard scene and applies modifications based on your instruction. Changes are merged into the live canvas so you can review and refine.

#### Quick-action templates

**Style**

- Change all rectangles to blue
- Add labels to shapes
- Set roughness to 0 for clean lines

**Structure**

- Connect shapes with arrows
- Reorganize into a grid layout
- Add a new section below

**Cleanup**

- Remove all arrows
- Remove standalone text
- Simplify by removing duplicates

### Ask

AI answers questions about your whiteboard, describing content, listing elements, identifying gaps, and explaining the flow. No modifications are made to the scene.

#### Quick-action templates

**Overview**

- What's on this whiteboard?
- List all shapes and labels
- Describe the connections

**Analyze**

- Any missing pieces?
- What flow does this show?
- How are elements organized?

## Image Attachments

Attach images to your AI prompts for visual context. This is especially useful for Create mode when you want the AI to reference an existing design.

- **Max images per prompt:** 5
- **Max size per image:** 5 MB
- **Supported formats:** PNG/JPG/WebP

## How AI Results Are Applied

1. **AI generates elements**

The AI returns a structured JSON response with shapes, arrows, text, and layout positions.

2. **Elements merge into scene**

For Create, new elements are added to the canvas. For Edit, existing elements are modified or removed. The scene updates live.

3. **You refine manually**

After AI applies changes, use the drawing tools to adjust positions, colors, text, and connections. Undo (⌘/Ctrl+Z) if the result isn't what you expected.

## Tips for Effective Prompts

- **Be specific about layout**  "Draw a flowchart with 5 steps arranged top to bottom" works better than "make a flowchart."
- **Name the elements**  "Create boxes for Frontend, API Gateway, Backend, and Database" gives the AI concrete labels to use.
- **Describe connections**  "Connect Frontend to API Gateway with an arrow labeled 'REST'" tells the AI exactly what to draw.
- **Use Edit for refinement**  Generate first, then use Edit mode prompts like "make it cleaner" or "change colors to blue" for iterative polish.
- **Attach reference images**  When you have an existing design to replicate, attach it as an image so the AI can use it as context.