“Anyone who uses this tool will be rightfully King of Flowcharts” These are the words engraved under the golden hilt of Excalidraw, the Open Source project I’ll talk about today.
Welcome to OpenDev Explorer, my column dedicated to exploring the Open Source world with a nod to developer experience. I am Riccardo (aka TheZal) and today I will talk about Excalidraw, an open-source tool for creating flowcharts as well as “freehand” drawings for anyone who needs to put their ideas on digital paper.
General Overview
Excalidraw is an online open-source drawing tool that allows you to create sketches and diagrams easily and intuitively.
Its minimal user interface makes it easy to draw as if it were on paper, ideal for brainstorming, flowcharts, and wireframing. Additionally, Excalidraw supports real-time collaboration, allowing multiple users to work together on the same project.
It is appreciated for its ability to create hand-drawn-looking drawings and offers export options in various formats, such as PNG and SVG, making it a valuable tool for everyone.
User Manual
Installation
Installing Excalidraw is very simple, as it is available through various package managers such as npm and yarn, and can be installed using one of the following commands:
Using npm:
npm install react react-dom @excalidraw/excalidraw
Code language: CSS (css)Using yarn:
yarn add react react-dom @excalidraw/excalidraw
Code language: CSS (css)Usage
Using Excalidraw is also very simple, as you just need to import the library into your component and create the object directly from the library. Here is an example:
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<>
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
</>
);
}
Code language: JavaScript (javascript)Developer Experience
Excalidraw is highly appreciated by developers for the ease with which it can be implemented in their projects.
Being open-source, it offers great flexibility and customization possibilities, allowing developers to adapt it to the specific needs of their software. Furthermore, its API is well-documented and allows easy integration with other applications and platforms.
The lightweight code and modular architecture contribute to easy maintenance and scalability, making it a reliable choice for projects of any size.
The Extra Mile
The extra mile of Excalidraw is given by the possibility of real-time collaboration between teams, allowing multiple users to work simultaneously on the same drawing, facilitating idea sharing and improving team productivity.
In fact, to create a collaborative session on Excalidraw, you just need to start a session from the “Share” button and send the generated link. All participants will be able to see and edit the drawing in real-time.
Comparison with the Status Quo
Excalidraw stands out among its competitors like Draw.io thanks to its simplicity and immediacy. This online drawing tool offers an intuitive interface that allows you to create diagrams and sketches with ease, without a steep learning curve.
Its open-source nature guarantees flexibility and continuous innovation from the community, which particularly appreciates it and makes it almost “community-driven”.
Moreover, Excalidraw excels in real-time collaboration, allowing multiple users to work simultaneously on a project with immediate updates, something not possible, for example, with Draw.io.
Unlike more complex tools, Excalidraw focuses on essentiality and speed, making it ideal for brainstorming and rapid prototyping.
Final Thoughts
So, Excalidraw is super easy to implement, super simple to use, and also has built-in real-time collaboration features, making it the perfect tool to use for project creation and prototyping.
Additionally, it is appreciated for its ability to create drawings that look hand-drawn and offers export options in various formats, such as PNG and SVG, while keeping the file editable, making it a valuable tool for everyone.
