Skip to content
Login Changemaker Archive. Learn more

# Excalidraw: Collaborative Virtual Whiteboard

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel. It's excellent for brainstorming, creating flowcharts, planning project workflows, or mapping out campaign strategies.

## Key Features

- Hand-drawn Feel: Creates diagrams that look informal and approachable.
- Real-time Collaboration: Multiple users can work on the same drawing simultaneously.
- Simple Interface: Easy to learn and use, with essential drawing tools.
- Export Options: Save your drawings as PNG, SVG, or `.excalidraw` files (for later editing).
- Library Support: Create and use libraries of reusable components.
- Self-Hosted: As part of Changemaker, your Excalidraw instance is self-hosted, keeping your data private.

## Documentation

For more detailed information about Excalidraw, visit the official repository.

## Getting Started with Excalidraw

### Accessing Excalidraw

1. URL: Access Excalidraw locally via `http://localhost:3333/` (or your configured external URL).
2. No Login Required (Typically): Excalidraw itself usually doesn't require a login to start drawing or collaborating if someone shares a link with you.

### Basic Usage

1. Start Drawing:

   - The interface presents a canvas and a toolbar with drawing tools (select, rectangle, diamond, ellipse, arrow, line, free-draw, text).
   - Select a tool and click/drag on the canvas to create shapes or text.

2. Styling Elements:

   - Select an element on the canvas.
   - Use the context menu that appears to change properties like color, fill style, stroke width, font size, alignment, etc.

3. Connecting Shapes: Use arrows or lines to connect shapes to create flowcharts or diagrams.

4. Collaboration (If needed):

   - Click on the "Live collaboration" button (often a users icon).
   - Start a session. You'll get a unique link to share with others.
   - Anyone with the link can join the session and draw in real-time.

5. Saving Your Work:

   - Export: Click the menu icon (usually top-left) and choose "Export image". You can select format (PNG, SVG), background options, etc.
   - Save to .excalidraw file: To save your drawing with all its properties for future editing in Excalidraw, choose "Save to file". This will download an `.excalidraw` JSON file.

6. Loading a Drawing:

   - Click the menu icon and choose "Open" to load a previously saved `.excalidraw` file.

## Use Cases within Changemaker

- Brainstorming ideas for campaigns or projects.
- Creating sitemaps or user flow diagrams for your website.
- Designing simple graphics or illustrations for your documentation or blog posts.
- Collaboratively planning workflows with team members.

## Editing the Site

Editing of the main Changemaker documentation site (the one you are reading now) is done via Code Server, not Excalidraw. Excalidraw is a tool for creating visual content that you might then include in your documentation (e.g., by exporting an image and adding it to a Markdown file).

## Further Information

- Excalidraw Official Site: Excalidraw.com (for general info and the public version)
- Excalidraw GitHub Repository: Excalidraw on GitHub (for documentation, source code, and community discussions).