Skip to content

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.

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).