Excalidraw — Collaborative Whiteboard & Diagrams

What it is

Excalidraw is an open-source virtual whiteboard for creating hand-drawn-style diagrams. It supports real-time collaboration, end-to-end encryption, and works directly in the browser without an account. The React component can be embedded in any application. Diagrams export to PNG, SVG, or the native .excalidraw format.

It targets developers, designers, and teams who need a quick, frictionless way to sketch system architectures, flowcharts, wireframes, and technical diagrams.

How it saves time or tokens

Excalidraw removes friction from visual communication. Instead of firing up a heavy diagramming tool, you open excalidraw.com and start drawing. For AI workflows, you can use Excalidraw to sketch agent architectures, data flow diagrams, and system designs. The embeddable React component lets you add drawing capabilities to your own applications without building a canvas from scratch.

How to use

1. Use instantly at excalidraw.com -- no account needed.

1. Embed in your React app:

npm install @excalidraw/excalidraw

1. Add the component:

import { Excalidraw } from '@excalidraw/excalidraw';

export default function Whiteboard() {
    return (
        <div style={{ height: '600px' }}>
            <Excalidraw
                onChange={(elements, state) => {
                    console.log('Elements:', elements);
                }}
            />
        </div>
    );
}

Example

import { Excalidraw, exportToBlob } from '@excalidraw/excalidraw';
import { useState, useRef } from 'react';

export default function DiagramEditor() {
    const [excalidrawAPI, setExcalidrawAPI] = useState(null);
    
    const exportDiagram = async () => {
        const elements = excalidrawAPI.getSceneElements();
        const blob = await exportToBlob({
            elements,
            mimeType: 'image/png',
            appState: { exportWithDarkMode: false }
        });
        // Upload blob to your server or display it
        const url = URL.createObjectURL(blob);
        window.open(url);
    };
    
    return (
        <div>
            <button onClick={exportDiagram}>Export PNG</button>
            <div style={{ height: '500px' }}>
                <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
            </div>
        </div>
    );
}

Related on TokRepo

• AI tools for design -- Design and diagramming tools
• AI tools for documentation -- Documentation tools

Common pitfalls

• The React component requires careful container sizing. Set an explicit height on the parent div, or the canvas will collapse to zero height.
• Real-time collaboration uses Excalidraw's servers by default. For self-hosted collaboration, you need to set up your own WebSocket server.
• Complex diagrams with hundreds of elements can become slow on low-powered devices. Keep diagrams focused and split large architectures into multiple boards.