Coming Soon (Beta)
Whiteboard Mode is currently in beta development. Core whiteboarding tools are implemented and being tested. This mode will be available in an upcoming release.
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 |
| Collaboration Features | Beta | Being tested with real-time sync |
| Documentation | Pending | Coming with official release |
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!