Why ExcaliDraw?

Excalidraw is a PWA that stands out for its simplicity and hand-drawn style, offering a more organic and personal feel compared to traditional diagramming tools, which is appealing for brainstorming and informal presentations.

Interesting, tell me more 😎

  • It’s a lightweight, open-source tool that prioritizes ease of use, making it accessible for quick sketches and diagrams without the need for extensive features or complex interfaces.

  • Excalidraw’s focus on basic elements and user-friendly interface makes it ideal for users who prefer a straightforward, no-frills approach to creating diagrams and visual representations.

The ExcaliDraw Project

For me, Excalidraw is the perfect solution to make diagrams in a tablet and avoid vendor lock-in.

SelfHosting ExcaliDraw

First Things First - Get Docker! 🐋

Important step and quite recommended for any SelfHosting Project - Get Docker Installed

It will be one command, this one, if you are in Linux:

apt-get update && sudo apt-get upgrade && curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh && docker version

ExcaliDraw with Docker

  • Use this Docker CLI:
docker run -d -p 8020:80 --name my-excalidraw-instance excalidraw/excalidraw:latest
  • Or this Docker-Compose to SelfHost Excalidraw:
version: '3.3'

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    restart: always
    ports:
      - 8020:80
    container_name: excalidraw
#     volumes:
#       - excalidraw_data:/data

# volumes:
#   excalidraw_data:

Simple right? Now just go to localhost:8020 and enjoy using Excalidraw.

Thanks to Noted.lol which made me get to know about this App - Productivity Boost

FAQ

Icons for Dashboards

Where to get Cool (and free) icons for the dashboards you create?

Other F/OSS for Diagramming

Excalidraw and Mermaid

And yes, Excalidraw plays well with Mermaid JS:

For now it supports: flowchart and SequenceDiagram

ExcaliDraw and VSCode

VScode? I meant and VSCodium ❤️

Install the excalidraw editor and enjoy making diagrams directly within your VS App Locally.

CTRL+P -> ext install pomdtr.excalidraw-editor

Then just create a file with any of these formats and start to be creative: .excalidraw, .excalidraw.json, .excalidraw.svg or .excalidraw.png

Other F/OSS for Productivity

What is a PWA?

A Progressive Web App (PWA) are designed to offer a more dynamic and interactive experience, similar to native applications on mobile devices or desktops.

They use modern web capabilities to deliver app-like experiences, with functionalities such as offline access, push notifications, and background syncing.

One of the key features of Progressive Web Apps (PWAs) is their ability to work offline or with limited connectivity, once they have been loaded.