How to use Excalidraw with Replit

Excalidraw is an open-source tool, similar to a digital whiteboard, that allows you to sketch diagrams with a hand-drawn feel to them. You can check out https://excalidraw.com/ to learn more about it.

In this tutorial, we'll show you how to use Excalidraw with Replit to sketch creative designs for any idea.

Steps to follow

We'll use Excalidraw to demonstrate the following different kinds of diagrams:

• Code architecture
• Database infrastructure
• Website layout

Getting started with Excalidraw

To use Excalidraw, navigate to your Teams Pro dashboard. Click on the "Create Team Repl" button to create a new repl. Choose a template language for the repl (any language will do, since we'll create a .draw file separately).

This will direct you to the Replit workspace.

In the workspace, click on the "Add file" icon next to "Files". Choose a name for your file and add the .draw extension.

Replit will open the .draw file once you save it and you'll see the drawing environment on your editing pane.

Notice the navbar at the top that consists of various elements to choose from.

Draw: code architecture diagram

Excalidraw can be used in designing a new program before implementing the code for it, giving us clarity on what features we'd like to include. This can be helpful during interviews, to allow candidates to demonstrate how they want to implement specific solutions.

Let's design a palindrome checker as an example. Our program will take a user's name as input and check whether the name is the same spelled backward.

Create a new file and save it as palindrome.draw.

We'll start by writing the pseudocode for the program, listing the steps in order:

1. Take user's name
2. Save the name spelled backward
3. Check if the user's name is the same spelled backward
4. If yes, display that the name is a palindrome
5. If no, display that the name is not a palindrome.

Using Excalidraw, we can design a flowchart of this program. We'll use the following tools:

• ellipse tool – to create an oval to represent where our program starts or stops;
• the rectangle tool – for our input/output and processes;
• the diamond tool – for decisions; and
• the arrow tool – to represent the relationships between the different shapes.

By following our diagram, we now know what to include in our code when designing our program. This lets us create programs more efficiently because we can follow a clearly defined structure when implementing the code.

Draw: database architecture diagram

Teams can use Excalidraw to demonstrate the infrastructure of existing systems, such as a database management system.

We'll create a database architecture diagram to show how an application interacts with its databases to store and retrieve data.

Create a new file and save it as database.draw.

You can add a variety of design elements to your diagrams by importing libraries. We want to use the following three libraries from Excalidraw for our diagram: Software Logos, Databases, and Awesome Icons.

Go to the Excalidraw homepage and, next to the drawing tools navbar, click on the "book" icon. In the pop-up, click on "Browse libraries" to select from a range of different categories.

Once you find the category with the elements you would like to use, click "Add to Excalidraw" to import that library to the site's workspace.

You can add any elements you want from these contributed libraries and then copy them across to your repl file using Ctrl+C and Ctrl+V (or Command+C and Command+V on macOS).

Using the "Awesome Icons" library, we have elements to represent the users of the software application, and with the "Software Logos" and "Database" libraries we have database and developer icons.

These elements enhance the diagram and make it more interesting to define the composition of the database system. The resulting diagram would look as follows:

Things to try

There are so many different kinds of diagrams to try with Excalidraw. We can design the layout for portfolio websites or blog articles. The Excalidraw library has plenty of categories to choose from, with specific elements you can mix for more creativity.

Take a look at this portfolio layout design.

Using the "Web Kit" library, we added the layout template of a portfolio website. We added icons from other libraries, such as the user icon that represents an image from the "Awesome Icons" library.

There are wireframing libraries that would make Excalidraw ideal for UI/UX designers as well.