Guida di Riferimento Rapido di Excalidraw¶

Panoramica¶

Excalidraw è uno strumento di lavagna virtuale collaborativa che ti permette di disegnare facilmente diagrammi con un aspetto fatto a mano. È perfetto per wireframing, brainstorming, progettazione di sistemi e creazione di diagrammi tecnici con un aspetto naturale e abbozzato che rende le idee complesse più accessibili.

⚠️ Nota: Gratuito da utilizzare su excalidraw.com. Opzioni self-hosted e integrazioni disponibili.

Primi Passi¶

Metodi di Accesso¶

# 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

Panoramica dell'Interfaccia¶

# 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

Primo Disegno¶

# 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

Strumenti di Disegno¶

Strumento di Selezione¶

# 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

Strumenti per Forme¶

# 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

Strumenti di Disegno¶

# 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

Strumento Testo¶

# 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

Scorciatoie da Tastiera¶

Selezione Strumenti¶

# 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%

Scorciatoie di Modifica¶

# 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

Navigazione Canvas¶

# 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

Stile e Proprietà¶

Proprietà del Tratto¶

# 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

Proprietà di Riempimento¶

# 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

Stile del Testo¶

# 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

Funzionalità Avanzate¶

Librerie e Template¶

# 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

Funzionalità di Collaborazione¶

# 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

Opzioni di Esportazione¶

# 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

Casi d'Uso e Pattern¶

Diagrammi di Architettura di Sistema¶

# 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

Diagrammi di Flusso e Processi¶

# 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

Wireframe e Mockup¶

Would you like me to continue with the remaining sections?```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¶

- Show content hierarchy¶

- Indicate interactive elements¶

### Mappe Mentali e Brainstormingbash

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¶

- Use colors and shapes for organization¶

## Integrazione e Incorporamentobash

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¶

### Integrazione di VS Codebash

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¶

### Integrazione di Obsidianbash

Notion embedding:¶

1. Create drawing in Excalidraw¶

2. Export as PNG or SVG¶

3. Upload to Notion¶

4. Embed in page¶

Live embedding:¶

- Embed as web content¶

- Updates reflect automatically¶

### Integrazione di Notionjavascript // 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] }); ## API e Automazionejavascript // 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] }); ### API delle Librerie di Excalidrawjavascript // 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; } ### Disegno Programmaticobash

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¶

### Operazioni in Batchbash

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¶

## Prestazioni e Ottimizzazionebash

Mobile features:¶

- Touch drawing support¶

- Pinch to zoom¶

- Two-finger pan¶

- Touch selection¶

Mobile limitations:¶

- Smaller screen real estate¶

- Limited precision¶

- No keyboard shortcuts¶

### Diagrammi di Grandi Dimensionibash

Mobile workflow:¶

- Start with rough sketches¶

- Focus on major elements first¶

- Use larger shapes and text¶

- Simplify complex diagrams¶

- Refine on desktop later¶

### Prestazioni di Collaborazionebash

Performance problems:¶

- Refresh browser tab¶

- Clear browser cache¶

- Reduce diagram complexity¶

- Close other browser tabs¶

- Check internet connection¶

Collaboration issues:¶

- Check network connectivity¶

- Refresh page for all users¶

- Use incognito mode to test¶

- Clear browser data¶

## Utilizzo Mobilebash

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¶

### Web App Mobilebash

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¶

### Migliori Pratiche Mobilebash

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¶

- Provide clear labels¶

## Risoluzione dei Problemibash

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¶

- Clear action items¶

- Document decisions¶

### Problemi Comunibash

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¶

### Recupero Datibash

Creating reusable components:¶

1. Design component elements¶

3. Add to personal library¶

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¶

### Compatibilità Browserbash

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¶

```## Migliori Pratiche Repository GitHub [Documentazione API](https://docs.excalidraw.com/docs/api

Comunità¶

Risorse¶

Guida di Riferimento Rapido di Excalidraw¶

Panoramica¶

Primi Passi¶

Metodi di Accesso¶

Panoramica dell'Interfaccia¶

Primo Disegno¶

Strumenti di Disegno¶

Strumento di Selezione¶

Strumenti per Forme¶

Strumenti di Disegno¶

Strumento Testo¶

Scorciatoie da Tastiera¶

Selezione Strumenti¶

Scorciatoie di Modifica¶

Navigazione Canvas¶

Stile e Proprietà¶

Proprietà del Tratto¶

Proprietà di Riempimento¶

Stile del Testo¶

Funzionalità Avanzate¶

Librerie e Template¶

Funzionalità di Collaborazione¶

Opzioni di Esportazione¶

Casi d'Uso e Pattern¶

Diagrammi di Architettura di Sistema¶

Diagrammi di Flusso e Processi¶

Wireframe e Mockup¶

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 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¶

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 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 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¶