63 lines
3.4 KiB
Markdown
63 lines
3.4 KiB
Markdown
# 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).
|