# 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](https://github.com/excalidraw/excalidraw). ## 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](https://excalidraw.com/) (for general info and the public version) * **Excalidraw GitHub Repository**: [Excalidraw on GitHub](https://github.com/excalidraw/excalidraw) (for documentation, source code, and community discussions).