Excalidraw Cheat Sheet
Overview
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel. It's perfect for wireframing, brainstorming, system design, and creating technical diagrams with a natural, sketch-like appearance that makes complex ideas more approachable.
⚠️ Note: Free to use at excalidraw.com. Self-hosted options and integrations available.
Getting Started
Access Methods
# Web application:
# Visit: https://excalidraw.com
# No account required for basic use
# Account optional for saving and collaboration
# VS Code extension:
# Install "Excalidraw" extension
# Create .excalidraw files
# Edit directly in VS Code
# Self-hosted:
# Clone from GitHub: https://github.com/excalidraw/excalidraw
# Docker deployment available
# Custom domain setup
Interface Overview
# Main interface elements:
# - Canvas: Drawing area
# - Toolbar: Drawing tools and shapes
# - Properties panel: Styling options
# - Layers panel: Element organization
# - Library: Saved shapes and templates
# - Share menu: Collaboration options
First Drawing
# Basic workflow:
# 1. Select a tool from toolbar
# 2. Click and drag on canvas
# 3. Adjust properties (color, stroke, fill)
# 4. Add text labels
# 5. Arrange and group elements
# 6. Save or share your drawing
Drawing Tools
Selection Tool
# Selection modes:
# - Single click: Select one element
# - Drag: Select multiple elements
# - Ctrl/Cmd + A: Select all
# - Ctrl/Cmd + click: Add/remove from selection
# Selection actions:
# - Drag to move
# - Drag corners to resize
# - Drag rotation handle to rotate
# - Double-click text to edit
Shape Tools
# Rectangle tool:
# - Click and drag to create
# - Hold Shift for perfect square
# - Rounded corners available in properties
# Ellipse tool:
# - Click and drag to create
# - Hold Shift for perfect circle
# - Adjust stroke and fill properties
# Diamond tool:
# - Creates diamond/rhombus shapes
# - Useful for flowchart decision points
# - Adjustable proportions
Drawing Tools
# Pen tool:
# - Freehand drawing
# - Pressure-sensitive (on supported devices)
# - Adjustable stroke width
# - Smooth or rough style
# Line tool:
# - Straight lines
# - Hold Shift for horizontal/vertical
# - Adjustable endpoints (arrow, dot, bar)
# - Multiple line styles available
# Arrow tool:
# - Directional arrows
# - Curved or straight
# - Adjustable arrowheads
# - Perfect for flowcharts and diagrams
Text Tool
# Text creation:
# - Click to place text
# - Type to add content
# - Enter for new line
# - Escape to finish editing
# Text formatting:
# - Font family selection
# - Font size adjustment
# - Text alignment (left, center, right)
# - Text color customization
Keyboard Shortcuts
Tool Selection
# Drawing tools:
V # Selection tool
R # Rectangle
O # Ellipse
D # Diamond
P # Pen/Draw
L # Line
A # Arrow
T # Text
# Quick actions:
Space + drag # Pan canvas
Ctrl/Cmd + scroll # Zoom in/out
Ctrl/Cmd + 0 # Zoom to fit
Ctrl/Cmd + 1 # Zoom to 100%
Editing Shortcuts
# Selection and manipulation:
Ctrl/Cmd + A # Select all
Ctrl/Cmd + D # Duplicate
Delete/Backspace # Delete selected
Ctrl/Cmd + Z # Undo
Ctrl/Cmd + Y # Redo
Ctrl/Cmd + Shift + Z # Redo (alternative)
# Grouping and layers:
Ctrl/Cmd + G # Group selection
Ctrl/Cmd + Shift + G # Ungroup
Ctrl/Cmd + ] # Send to back
Ctrl/Cmd + [ # Bring to front
Ctrl/Cmd + Shift + ] # Send backward
Ctrl/Cmd + Shift + [ # Bring forward
Canvas Navigation
# View controls:
Ctrl/Cmd + Plus # Zoom in
Ctrl/Cmd + Minus # Zoom out
Ctrl/Cmd + 0 # Fit to screen
Ctrl/Cmd + 1 # Actual size
Space + drag # Pan canvas
Mouse wheel # Zoom at cursor
# Grid and guides:
Ctrl/Cmd + ' # Toggle grid
Ctrl/Cmd + Shift + ' # Toggle snap to grid
Styling and Properties
Stroke Properties
# Stroke options:
# - Color: Full color picker
# - Width: 1-5 pixel options
# - Style: Solid, dashed, dotted
# - Roughness: 0 (smooth) to 2 (very rough)
# - Opacity: 0% to 100%
# Stroke styles:
# Architect: Clean, precise lines
# Artist: Hand-drawn, sketchy feel
# Cartoonist: Bold, expressive strokes
Fill Properties
# Fill options:
# - Transparent: No fill
# - Solid: Solid color fill
# - Hachure: Cross-hatched pattern
# - Cross-hatch: Denser cross-hatching
# - Dots: Dotted pattern
# Fill customization:
# - Color selection
# - Opacity adjustment
# - Pattern density
# - Background transparency
Text Styling
# Font options:
# - Virgil: Hand-drawn style (default)
# - Helvetica: Clean, modern
# - Cascadia: Monospace, code-friendly
# Text properties:
# - Size: 16px to 96px
# - Color: Full spectrum
# - Alignment: Left, center, right
# - Vertical alignment: Top, middle, bottom
Advanced Features
Libraries and Templates
# Using libraries:
# 1. Click library icon in toolbar
# 2. Browse available libraries
# 3. Click to add items to canvas
# 4. Customize as needed
# Creating custom libraries:
# 1. Select elements to save
# 2. Click "Add to library"
# 3. Name your library item
# 4. Reuse across drawings
# Popular libraries:
# - System design components
# - AWS architecture icons
# - Flowchart symbols
# - UI/UX wireframe elements
Collaboration Features
# Real-time collaboration:
# 1. Click "Share" button
# 2. Copy shareable link
# 3. Share with team members
# 4. Collaborate in real-time
# Collaboration features:
# - Live cursors showing other users
# - Real-time updates
# - Comment system
# - Version history
# - Conflict resolution
Export Options
# Export formats:
# - PNG: Raster image
# - SVG: Vector graphics
# - Excalidraw: Native format
# - JSON: Data format
# Export settings:
# - Background: Transparent or colored
# - Scale: 1x, 2x, 3x for high DPI
# - Selection only: Export selected elements
# - Include watermark: Optional branding
Use Cases and Patterns
System Architecture Diagrams
# Architecture components:
# - Rectangles: Services, databases
# - Ellipses: External systems
# - Arrows: Data flow, connections
# - Text: Labels and annotations
# Best practices:
# - Use consistent shapes for similar components
# - Group related elements
# - Use colors to indicate different layers
# - Add clear labels and descriptions
# - Show data flow direction with arrows
Flowcharts and Process Diagrams
# Flowchart symbols:
# - Rectangle: Process step
# - Diamond: Decision point
# - Ellipse: Start/end point
# - Parallelogram: Input/output
# - Circle: Connector
# Flowchart tips:
# - Start with high-level flow
# - Add detail progressively
# - Use consistent symbol meanings
# - Keep text concise
# - Test the logic flow
Wireframes and Mockups
# Wireframe elements:
# - Rectangles: Content areas, buttons
# - Lines: Dividers, borders
# - Text: Labels, content placeholders
# - Arrows: User flow, interactions
# Wireframe best practices:
# - Focus on layout, not visual design
# - Use grayscale colors
# - Include navigation elements
# - Show content hierarchy
# - Indicate interactive elements
Mind Maps and Brainstorming
# Mind map structure:
# - Central topic in center
# - Main branches radiating out
# - Sub-branches for details
# - Colors for categorization
# - Icons for visual interest
# Brainstorming techniques:
# - Start with central concept
# - Add ideas as they come
# - Group related concepts
# - Use colors and shapes for organization
# - Connect related ideas with lines
Integration and Embedding
VS Code Integration
# VS Code extension features:
# - Create .excalidraw files
# - Edit directly in editor
# - Version control integration
# - Preview mode
# - Export capabilities
# Workflow:
# 1. Install Excalidraw extension
# 2. Create new .excalidraw file
# 3. Edit with full Excalidraw features
# 4. Save and commit to version control
Obsidian Integration
# Obsidian plugin:
# - Embed drawings in notes
# - Link to other notes
# - Search within drawings
# - Template support
# Usage:
# 1. Install Excalidraw plugin
# 2. Create drawing in note
# 3. Link to other content
# 4. Export or embed as needed
Notion Integration
# Notion embedding:
# 1. Create drawing in Excalidraw
# 2. Export as PNG or SVG
# 3. Upload to Notion
# 4. Embed in page
# Live embedding:
# - Use Excalidraw share link
# - Embed as web content
# - Updates reflect automatically
API and Automation
Excalidraw Libraries API
// Load external library
const library = await fetch('https://libraries.excalidraw.com/libraries/your-library.excalidrawlib')
.then(response => response.json());
// Add library items to scene
const libraryItems = library.libraryItems;
excalidrawAPI.updateScene({
elements: [...currentElements, ...libraryItems]
});
Programmatic Drawing
// Create elements programmatically
const rectangle = {
id: 'rect1',
type: 'rectangle',
x: 100,
y: 100,
width: 200,
height: 100,
strokeColor: '#000000',
backgroundColor: '#ffffff',
fillStyle: 'hachure',
strokeWidth: 2,
roughness: 1
};
const text = {
id: 'text1',
type: 'text',
x: 150,
y: 140,
width: 100,
height: 25,
text: 'Hello World',
fontSize: 16,
fontFamily: 1,
textAlign: 'center'
};
excalidrawAPI.updateScene({
elements: [rectangle, text]
});
Batch Operations
// Batch create system diagram
function createSystemDiagram(services) {
const elements = [];
let x = 100;
const y = 100;
services.forEach((service, index) => {
// Create service box
elements.push({
id: `service-${index}`,
type: 'rectangle',
x: x,
y: y,
width: 120,
height: 80,
strokeColor: '#1971c2',
backgroundColor: '#e3f2fd'
});
// Create service label
elements.push({
id: `label-${index}`,
type: 'text',
x: x + 10,
y: y + 30,
text: service.name,
fontSize: 14
});
x += 200;
});
return elements;
}
Performance and Optimization
Large Diagrams
# Performance tips:
# - Use groups to organize complex diagrams
# - Limit the number of elements on screen
# - Use simple shapes when possible
# - Avoid excessive text elements
# - Regular cleanup of unused elements
# Memory management:
# - Clear undo history periodically
# - Export and reload for very large diagrams
# - Use multiple smaller diagrams instead of one huge one
Collaboration Performance
# Collaboration optimization:
# - Limit concurrent users (5-10 optimal)
# - Use voice/video for complex discussions
# - Assign areas to different team members
# - Periodic saves to prevent data loss
# - Good internet connection required
Mobile Usage
Mobile Web App
# Mobile features:
# - Touch drawing support
# - Pinch to zoom
# - Two-finger pan
# - Touch selection
# - Mobile-optimized toolbar
# Mobile limitations:
# - Smaller screen real estate
# - Limited precision
# - No keyboard shortcuts
# - Simplified toolbar
Mobile Best Practices
# Mobile workflow:
# - Start with rough sketches
# - Focus on major elements first
# - Use larger shapes and text
# - Simplify complex diagrams
# - Refine on desktop later
Troubleshooting
Common Issues
# Performance problems:
# - Refresh browser tab
# - Clear browser cache
# - Reduce diagram complexity
# - Close other browser tabs
# - Check internet connection
# Collaboration issues:
# - Verify share link permissions
# - Check network connectivity
# - Refresh page for all users
# - Use incognito mode to test
# - Clear browser data
Data Recovery
# Auto-save features:
# - Local storage backup
# - Browser session recovery
# - Collaboration history
# - Export regular backups
# Recovery methods:
# - Check browser local storage
# - Use collaboration history
# - Restore from exported files
# - Contact support for shared rooms
Browser Compatibility
# Supported browsers:
# - Chrome (recommended)
# - Firefox
# - Safari
# - Edge
# Feature limitations:
# - Some features require modern browsers
# - WebGL support needed for performance
# - Local storage required for saving
# - WebRTC needed for collaboration
Best Practices
Design Principles
# Visual hierarchy:
# - Use size to show importance
# - Color for categorization
# - Spacing for grouping
# - Consistency in styling
# Clarity guidelines:
# - Keep text readable
# - Use sufficient contrast
# - Avoid clutter
# - Group related elements
# - Provide clear labels
Collaboration Guidelines
# Team workflow:
# - Establish drawing conventions
# - Use consistent naming
# - Assign ownership areas
# - Regular sync meetings
# - Version control for important diagrams
# Communication:
# - Use comments for feedback
# - Voice chat for complex discussions
# - Screen sharing for presentations
# - Clear action items
# - Document decisions
Organization Tips
# File management:
# - Use descriptive names
# - Organize by project/topic
# - Regular cleanup of old files
# - Export important diagrams
# - Backup critical work
# Version control:
# - Save major iterations
# - Use descriptive commit messages
# - Tag important versions
# - Branch for experiments
# - Merge carefully
Advanced Techniques
Custom Shapes and Libraries
# Creating reusable components:
# 1. Design component elements
# 2. Group related parts
# 3. Add to personal library
# 4. Share with team
# 5. Maintain consistency
# Library management:
# - Organize by category
# - Use clear naming conventions
# - Regular updates and maintenance
# - Documentation for complex components
# - Version control for shared libraries
Animation and Presentation
# Presentation techniques:
# - Use layers to reveal information
# - Create step-by-step diagrams
# - Export frames for animation
# - Use colors to highlight changes
# - Progressive disclosure of complexity
# Storytelling with diagrams:
# - Start with overview
# - Zoom into details
# - Show before/after states
# - Use annotations for context
# - Guide viewer attention