Excalidraw - A Self Hosted Diagram and Drawing Portal

Excalidraw is a self-hosted, freehand drawing and diagramming tool that allows users to create and collaborate on simple, visual representations of ideas.

Excalidraw - A Self Hosted Diagram and Drawing Portal

It is a web-based application that can be accessed through any modern web browser, and its user interface is simple and intuitive.

One of the most noteworthy features of Excalidraw is its ease of use. Its minimalistic design means that users can start creating and editing drawings with very little learning curve. The tool offers basic drawing features such as shapes, lines, and arrows, and allows for simple color customization. Users can also add text to their drawings and create layers for organizing content.

Excalidraw's collaborative features are also impressive. The tool allows users to invite collaborators to work on the same drawing in real-time, making it ideal for teams working on a project or for remote collaboration. Users can also export their drawings in various formats, including PNG, SVG, and JSON.

In terms of its versatility, Excalidraw is a great tool for a wide range of use cases. For example, it can be used for sketching out UI designs, creating flowcharts or mind maps, or simply jotting down quick ideas. Its simple, flexible design makes it easy to adapt to different use cases and workflows.

To use Excalidraw for self-hosting using Docker, you will need to follow these steps:

  1. Open a terminal on your local machine.
  2. Pull the Excalidraw Docker image from Docker Hub by running the following command:
docker pull docker.io/excalidraw/excalidraw:latest
  1. Once the image has been pulled, run the following command to start Excalidraw:
docker run -p 8080:80 -d docker.io/excalidraw/excalidraw:latest
  1. Excalidraw should now be accessible at http://localhost:8080 in your web browser.

Note: The -p flag maps the container's port 80 to port 8080 on your local machine. If port 8080 is already in use, you can choose a different port number.

By default, Excalidraw will run in a development environment with hot-reloading enabled. To run the app in a production environment, you will need to follow additional steps, such as configuring a web server and setting up a production build. You can find more information on the Excalidraw GitHub repository and documentation.

Once you have Excalidraw up and running, you can use it to create and collaborate on drawings and diagrams without relying on any external service or platform. Self-hosting Excalidraw gives you more control over your data and privacy, and allows you to customize the app to suit your specific needs.

Trying to freehand with a cheap wireless mouse 😂

One downside to Excalidraw is that it is still a relatively new tool, and as such, it does not offer some of the advanced features of more established drawing and diagramming tools. For example, it does not offer complex shapes or advanced image editing capabilities. However, this is not necessarily a major drawback for most users, as Excalidraw's simplicity and ease of use are its main selling points.

More features worth mentioning

Infinite, canvas-based whiteboard: Excalidraw provides an infinite canvas, making it easy for you to create any size visual you need. You can zoom in and out of the canvas as well as pan it to move around.

Dark mode: Excalidraw supports dark mode, enabling you to work in low-light environments or for those who prefer a darker interface.

Customizable: Excalidraw is highly customizable, offering a wide range of tools and options to create visually stunning and unique designs.

Image support: Excalidraw allows you to add images to your designs. You can upload images from your computer or copy and paste them directly into the canvas.

Shape libraries support: Excalidraw supports a wide range of shapes, including rectangles, circles, diamonds, arrows, lines and more. This feature makes it easy for users to create visual representations that accurately reflect their ideas and concepts.

Localization (i18n) support: Excalidraw provides localization support (i18n), making it accessible to users from different countries and languages.

Export to PNG, SVG & clipboard: Excalidraw allows you to export your designs in various formats such as PNG, SVG, or to copy it onto your clipboard.

Open format - export drawings as an .excalidraw json file: You can export your designs as an .excalidraw JSON file, which is an open format that allows you to edit your work later.

Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser: Excalidraw offers a wide range of tools, including basic shapes and free-draw tools. In addition, it provides an eraser tool for correcting mistakes or for removing parts of your design.

Arrow-binding & labeled arrows: Excalidraw provides arrow-binding and labeled arrows tools, making it easy for you to create diagrams that need directional arrows or labels.

Undo/Redo: Excalidraw provides an undo/redo feature. This feature enables you to correct mistakes or step back to a previous point in your design process.

Zoom and panning support: Excalidraw allows users to zoom in and out of their designs and to pan across the canvas, making it easy to focus on specific parts of the design.

👋
Like what you see? Consider subscribing to the Noted newsletter! You can always unsubscribe at any time. We also have Discord!

Final Notes and Thoughts

Excalidraw is an excellent tool for anyone looking for a simple, intuitive drawing and diagramming tool. Its ease of use, flexibility, and collaborative features make it a great choice for a wide range of use cases, and its open-source nature means that it is likely to continue to improve and evolve in the coming years.