Now Available
Whiteboard Mode is fully implemented with all FigJam-style tools: sticky notes, connectors, tables, code blocks, mind maps, stamps, washi tape, link previews, quick create, and tidy up.
What is Whiteboard Mode?
Whiteboard Mode is Azyrom's answer to FigJam—a collaborative digital whiteboard designed for brainstorming, wireframing, and visual thinking. It provides an infinite canvas with specialized tools for ideation, diagramming, and team collaboration.
Key Use Cases
- Brainstorming Sessions - Capture ideas quickly with sticky notes and freehand drawing
- User Flows & Diagrams - Create flowcharts with auto-routing connectors
- Wireframing - Sketch low-fidelity layouts before high-fidelity design
- Mind Mapping - Organize thoughts visually with connected nodes
- Workshop Facilitation - Run design sprints and collaborative exercises
- AI-Assisted Design - Get design-to-code help from integrated Claude AI
Inspired by FigJam
Whiteboard Mode matches FigJam's core experience while adding unique Azyrom capabilities:
| Feature | FigJam | Azyrom Whiteboard |
|---|---|---|
| Sticky Notes | ✅ | ✅ Color-coded |
| Connectors/Arrows | ✅ | ✅ Auto-routing |
| Freehand Drawing | ✅ | ✅ Marker & Highlighter |
| Shapes & Tables | ✅ | ✅ Quick shapes & sections |
| Stamps/Stickers | ✅ | ✅ Icon library |
| Infinite Canvas | ✅ | ✅ Unlimited space |
| AI Integration | Limited | ✅ Claude Code integration |
| Design-to-Code | ❌ | ✅ AI-powered workflow |
Whiteboard Tools
1. Select Tool
Cursor for selecting and moving elements
Shortcut: V
2. Hand Tool
Pan around the infinite canvas
Shortcut: H
3. Marker/Pen
Freehand drawing with pen tool
Shortcut: P
4. Highlighter
Semi-transparent marker for emphasis
Shortcut: M
5. Sticky Note
Color-coded notes for brainstorming
Shortcut: S
6. Shapes
Rectangles and circles for diagrams
Shortcut: R
7. Connector/Arrow
Link ideas with arrows and lines
Shortcut: L
8. Text Tool
Add labels and notes
Shortcut: T
9. Table/Section
Organize content into grids
10. Stamp
Insert icons and avatars
11. More Options
Additional tools dropdown
12. Add
Insert images and assets
AI-Powered Collaboration
Whiteboard Mode includes unique integration with Claude Code for AI-assisted design-to-code workflow:
AI Chat Panel
Connect to Claude Code during whiteboard sessions to:
- Get design feedback and suggestions
- Generate code from wireframes and diagrams
- Ask questions about best practices
- Receive implementation guidance
Design-to-Code Workflow
1. Sketch: Draw wireframes and user flows in Whiteboard Mode
2. Connect: Open AI Chat Panel and connect to Claude Code
3. Collaborate: Ask Claude to analyze your whiteboard and suggest implementations
4. Generate: Get production-ready code based on your visual designs
Implementation Status
| Feature | Status | Notes |
|---|---|---|
| Whiteboard Mode UI | Complete | Toolbar with all FigJam-style tools |
| Sticky Notes | Complete | Color-coded, editable notes |
| Connector Tool | Complete | Line and arrow connections |
| Drawing Tools | Complete | Marker, highlighter, pen |
| AI Chat Panel | Complete | Claude Code integration ready |
| Infinite Canvas | Complete | Pan and zoom navigation |
| Tables & Code Blocks | Complete | Inline cell editing, CSV, 15-language syntax highlighting |
| Mind Maps | Complete | Hierarchy, auto-layout, child/sibling creation |
| Stamps & Washi Tape | Complete | 24 emojis, 5 tape patterns |
| Quick Create & Tidy Up | Complete | Blue dots, Cmd+Return, auto-arrange grid |
| Link Previews | Complete | Paste URL to create bookmark cards |
| Collaboration Features | Coming Soon | Real-time sync when backend is ready |
| Whiteboard Enhancements | Complete | Sticky auto-shrink, section collapse, text in shapes, connector improvements |
| Whiteboard Templates | Complete | 6 pre-built templates: Retro, Brainstorm, Kanban, SWOT, etc. |
| Minimap Navigation | Complete | Bottom-right minimap with click/drag navigation |
| Documentation | Complete | Manual, test cases, help center, feature audit |
When to Use Whiteboard Mode
Whiteboard Mode: For brainstorming, wireframing, user flows, and early-stage ideation. Fast and informal.
Design Mode: For high-fidelity UI design with precise layouts, constraints, and production assets.
Draw Mode: For illustrations, custom graphics, and artistic work with brushes and effects.
The Flow: Start in Whiteboard to sketch ideas → Move to Design for pixel-perfect UI → Use Draw for custom illustrations!