Excalidraw: A Hand-Drawn Style Virtual Whiteboard

Table of Contents

Introduction
#

In today’s world of remote work and online collaboration, whiteboard tools have become essential for team communication. Excalidraw stands out among numerous whiteboard tools with its unique hand-drawn style and minimalist design. It’s not just an excellent drawing tool, but also a technical exemplar as an open-source project.

Open Source Repository: https://github.com/excalidraw/excalidraw

What is Excalidraw?
#

Excalidraw is an open-source virtual whiteboard tool focused on creating hand-drawn style diagrams, sketches, and illustrations. Its core features include:

Feature	Description
Hand-drawn Style	Unique “jitter” effect making graphics look hand-drawn
Minimalist Interface	Distraction-free drawing experience with almost zero learning curve
Real-time Collaboration	Multi-user editing support, perfect for remote teams
Offline Support	PWA application, works offline
Open Source & Free	MIT license, free to use and modify

Core Features
#

1. Drawing Tools
#

Excalidraw provides a rich set of drawing tools covering most drawing needs:

Rectangle, Diamond, Ellipse: Basic shapes with adjustable corner radius
Arrows & Lines: Supports curves, straight lines, with optional arrows
Text Tool: Rich text support with adjustable font size
Freehand Drawing: Sketch mode for free creation
Image Import: Drag and drop image support

2. Hand-drawn Style Algorithm
#

Excalidraw’s most distinctive feature is its hand-drawn style algorithm. The core concept involves adding “jitter” effects to lines:

// Simplified hand-drawn effect implementation
function generateRoughLine(points, options) {
  const { roughness, bowing } = options;

  return points.map((point, i) => {
    // Add random offset
    const offsetX = (Math.random() - 0.5) * roughness;
    const offsetY = (Math.random() - 0.5) * roughness;

    // Add bowing effect
    const bowOffset = Math.sin(i * 0.5) * bowing;

    return {
      x: point.x + offsetX + bowOffset,
      y: point.y + offsetY
    };
  });
}

In practice, Excalidraw uses the Rough.js library to implement hand-drawn effects, which provides rich hand-drawn style options:

import rough from 'roughjs';

const rc = rough.canvas(canvasElement);

// Draw a hand-drawn style rectangle
rc.rectangle(10, 10, 100, 50, {
  stroke: '#000000',
  strokeWidth: 2,
  roughness: 1.5,    // Roughness level
  bowing: 1,         // Bowing amount
  fill: '#ffffff',
  fillStyle: 'solid'
});

3. Real-time Collaboration
#

Excalidraw supports real-time multi-user collaboration, implemented using:

WebSocket: Real-time synchronization of drawing operations
CRDT (Conflict-free Replicated Data Types): Resolving concurrent editing conflicts
Broadcast Mechanism: Each operation is broadcast to all collaborators

// Simplified collaboration sync logic
class CollaborationManager {
  constructor(socket) {
    this.socket = socket;
    this.localVersion = 0;
  }

  // Send local operation
  broadcastAction(action) {
    this.socket.emit('draw', {
      action,
      version: ++this.localVersion,
      timestamp: Date.now()
    });
  }

  // Receive remote operation
  onRemoteAction(data) {
    if (data.version > this.localVersion) {
      this.applyAction(data.action);
      this.localVersion = data.version;
    }
  }
}

4. Infinite Canvas
#

Excalidraw uses an infinite canvas design supporting:

Zoom: Mouse wheel or gesture zooming
Pan: Drag to move the canvas
Coordinate System: Scene-based coordinates, unlimited canvas size

// Viewport transformation
class Viewport {
  constructor() {
    this.zoom = 1;
    this.scrollX = 0;
    this.scrollY = 0;
  }

  // Scene coordinates to screen coordinates
  sceneToScreen(x, y) {
    return {
      x: (x - this.scrollX) * this.zoom,
      y: (y - this.scrollY) * this.zoom
    };
  }

  // Screen coordinates to scene coordinates
  screenToScene(x, y) {
    return {
      x: x / this.zoom + this.scrollX,
      y: y / this.zoom + this.scrollY
    };
  }
}

Technical Architecture
#

Tech Stack
#

Technology	Purpose
React	UI Framework
TypeScript	Type Safety
Rough.js	Hand-drawn rendering
Socket.io	Real-time communication
Yjs	CRDT implementation
Vite	Build tool

Project Structure
#

excalidraw/
├── src/
│   ├── components/       # React components
│   │   ├── App.tsx
│   │   ├── Canvas.tsx
│   │   └── ...
│   ├── element/          # Shape element definitions
│   │   ├── newElement.ts
│   │   ├── mutateElement.ts
│   │   └── ...
│   ├── scene/            # Scene management
│   ├── renderer/         # Rendering logic
│   ├── data/             # Data persistence
│   └── collab/           # Collaboration features
├── public/
│   └── index.html
└── package.json

Core Data Structure
#

Excalidraw’s core is the Element data structure:

type ExcalidrawElement = {
  id: string;
  type: "rectangle" | "ellipse" | "diamond" | "arrow" | "line" | "text" | "freedraw";
  x: number;
  y: number;
  width: number;
  height: number;
  angle: number;
  strokeColor: string;
  backgroundColor: string;
  fillStyle: "solid" | "hachure" | "cross-hatch";
  strokeWidth: number;
  roughness: number;
  opacity: number;
  // ... more properties
};

type AppState = {
  viewBackgroundColor: string;
  currentItemStrokeColor: string;
  zoom: { value: number };
  scrollX: number;
  scrollY: number;
  // ... more state
};

Practical Use Cases
#

1. Architecture Diagrams
#

Excalidraw is perfect for drawing system architecture diagrams:

┌─────────────┐      ┌─────────────┐
│   Client    │─────▶│   Server    │
└─────────────┘      └──────┬──────┘
                            │
                            ▼
                     ┌─────────────┐
                     │  Database   │
                     └─────────────┘

2. Flowcharts & Mind Maps
#

The hand-drawn style makes flowcharts more engaging, suitable for:

Product requirement discussions
Technical solution design
Meeting notes

3. Quick Prototyping
#

Designers can use Excalidraw for quick UI prototypes:

Wireframes
Interaction flows
Page layouts

4. Teaching & Presentations
#

Educators can use it for:

Drawing diagrams
Explaining complex concepts
Creating teaching materials

Integration & Extension
#

Embedding in Your Project
#

Excalidraw provides an npm package that can be embedded in any React project:

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw
        initialData={{
          elements: [],
          appState: {}
        }}
        onChange={(elements, appState) => {
          console.log("Elements:", elements);
        }}
      />
    </div>
  );
}

Export Functionality
#

Excalidraw supports multiple export formats:

import { exportToSvg, exportToBlob, exportToCanvas } from "@excalidraw/excalidraw";

// Export to SVG
const svg = await exportToSvg({
  elements,
  appState,
  files
});

// Export to PNG Blob
const blob = await exportToBlob({
  elements,
  appState,
  files,
  mimeType: "image/png"
});

// Download file
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "diagram.png";
a.click();

Custom Tools
#

You can extend custom tools through the API:

// Custom element type
const customElement = {
  type: "custom",
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  // Custom rendering logic
  customData: {
    // Your custom data
  }
};

Comparison with Other Tools
#

Tool	Style	Collaboration	Open Source	Price
Excalidraw	Hand-drawn	Yes	Yes	Free
Miro	Polished	Yes	No	Paid
Draw.io	Standard	Limited	Yes	Free
Figma	Polished	Yes	No	Free/Paid
Whimsical	Hand-drawn	Yes	No	Paid

Best Practices
#

1. Keyboard Shortcuts
#

Mastering shortcuts can significantly boost efficiency:

Shortcut	Function
`R`	Rectangle tool
`O`	Ellipse tool
`D`	Diamond tool
`A`	Arrow tool
`T`	Text tool
`H`	Hand-drawn tool
`V`	Selection tool
`Space + Drag`	Pan canvas
`Ctrl/Cmd + Scroll`	Zoom

2. Using Libraries
#

Excalidraw supports custom shape libraries to save frequently used shapes:

// Create custom library
const libraryItems = [
  {
    status: "published",
    elements: [
      // Your custom shape elements
    ]
  }
];

// Load library
await Library.loadLibrary(libraryItems);

3. File Format
#

Excalidraw uses JSON format for data storage:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "version": 1,
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 100
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

Conclusion
#

Excalidraw has become a refreshing presence in the whiteboard tool space with its unique hand-drawn style and minimalist design. Its success lies not only in the product itself but also in the active open-source community and technical openness.

Key Advantages
#

Unique Style: Hand-drawn effects add warmth to diagrams
Ready to Use: No learning required, start immediately
Open Source & Free: MIT license, free to use
Extensible: npm package available, easy to integrate

Ideal Use Cases
#

Technical architecture diagrams
Product prototype design
Team collaboration discussions
Teaching presentations

Resources
#

If you’re looking for a clean, elegant whiteboard tool, give Excalidraw a try!

Introduction#

What is Excalidraw?#

Core Features#

1. Drawing Tools#

2. Hand-drawn Style Algorithm#

3. Real-time Collaboration#

4. Infinite Canvas#

Technical Architecture#

Tech Stack#

Project Structure#

Core Data Structure#

Practical Use Cases#

1. Architecture Diagrams#

2. Flowcharts & Mind Maps#

3. Quick Prototyping#

4. Teaching & Presentations#

Integration & Extension#

Embedding in Your Project#

Export Functionality#

Custom Tools#

Comparison with Other Tools#

Best Practices#

1. Keyboard Shortcuts#

2. Using Libraries#

3. File Format#

Conclusion#

Key Advantages#

Ideal Use Cases#

Resources#

Related articles