Cheat Sheet ausziehbar
Überblick
Excalidraw ist ein virtuelles kollaboratives Whiteboard-Tool, mit dem Sie Diagramme mit einem handgezeichneten Gefühl leicht skizzieren können. Es ist perfekt für Drahtframing, Brainstorming, Systemdesign und Erstellung von technischen Diagrammen mit einem natürlichen, skizzenartigen Aussehen, die komplexe Ideen näher kommen lässt.
ZEIT *Anmerkung: Kostenlos bei excalidraw.com zu verwenden. Selbstgehostete Optionen und Integrationen verfügbar.
Erste Schritte
Zugriffsmethoden
```bash
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
```_
Schnittstellenübersicht
```bash
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
```_
Erste Zeichnung
```bash
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
```_
Werkzeugmaschinen
Auswahlwerkzeug
```bash
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
```_
Formwerkzeuge
```bash
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
```_
Werkzeugmaschinen
```bash
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
```bash
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
Werkzeugauswahl
```bash
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% ```_
Verknüpfungen bearbeiten
```bash
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 ```_
Navigation im Internet
```bash
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 und Eigenschaften
Stroke Eigenschaften
```bash
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
```_
Fülle Eigenschaften
```bash
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
```bash
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
```_
Erweiterte Funktionen
Bibliotheken und Vorlagen
```bash
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
```_
Funktionen der Zusammenarbeit
```bash
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
```_
Exportoptionen
```bash
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
```_
Anwendungsfälle und Muster
Systemarchitektur Diagramme
```bash
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
```_
Flussdiagramme und Prozessdiagramme
```bash
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
```_
Drahtrahmen und Mockups
```bash
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 und Brainstorming
```bash
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 und Einbettung
VS Code Integration
```bash
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
```bash
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
```_
Integration von Nostainment
```bash
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 und Automatisierung
Excalidraw Bibliotheken API
```javascript // 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] }); ```_
Programmatische Zeichnung
```javascript // 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 Operationen
```javascript // 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; } ```_
Leistung und Optimierung
Große Diagramme
```bash
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
```_
Kooperationsleistung
```bash
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 Nutzung
Mobile Web App
```bash
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
```bash
Mobile workflow:
- Start with rough sketches
- Focus on major elements first
- Use larger shapes and text
- Simplify complex diagrams
- Refine on desktop later
```_
Fehlerbehebung
Gemeinsame Themen
```bash
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
```_
Datenrettung
```bash
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 Kompatibilität
```bash
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
Gestaltungsprinzipien
```bash
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
```_
Leitlinien für die Zusammenarbeit
```bash
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
```_
Organisation Tipps
```bash
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
```_
Erweiterte Techniken
Kundenspezifische Formen und Bibliotheken
```bash
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 und Präsentation
```bash
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
```_
Ressourcen
Dokumentation
- (__LINK_9___)
- GitHub Repository
- [API-Dokumentation](LINK_9
%20Gemeinschaft
-%20(LINK_9__) - GitHub Diskussionen - [Twitter Community](LINK_9
%20Ressourcen
-%20(LINK_9) - Zeitpläne Galerie - Video-Tutorials