Excalidraw is a virtual whiteboard for sketching hand-drawn like diagrams, running in your browser. If you’re unfamiliar with this amazing tool, head over to Excalidraw.com to try it out.
The cool thing about this tool is that it requires no setup; you can start drawing immediately at the speed of thought.
This article shows you how to install and use the Roam-Excalidraw plugin, created by Zsolt Viczián. If you find the plugin useful, consider buying Zsolt a coffee.
How to install Roam-Excalidraw
Click here for detailed instructions on how to install a Roam extension.
Step 1—Enable custom components.
This step is crucial for this plugin, otherwise it won’t work.
From the menu (…), go to User settings
:

Next, under User Code, enable the option Allow custom components
(when the slider turns blue, it’s enabled):

To save the setting, simply click outside of the pop-up.
Step 2—Add a new JavaScript block on the roam/js page.
Navigate to your roam/js
page and start by adding the following shortcode: {{[[roam/js]]}}
Next, hit Enter
and Tab
to create a nested block underneath the shortcode. In the new block, type /javascript
and hit Enter
again.
Step 3—Add JavaScript code.
Paste the following code in the JavaScript block you’ve just created:
{
let s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://roam-excalidraw.com/dist/loader.js';
s.async = false;
document.getElementsByTagName('head')[0].appendChild(s);
}
It should look like this on the page:

Step 4—Enable the plugin.
To activate the plugin, click the red button that says Yes, I know what I'm doing.
The block turns yellow, indicating the plugin is active. Refresh Roam to make sure the plugin is properly loaded.

How to use Roam-Excalidraw
Enabling the plugin creates a Roam template. Simply type ;;excalidraw
and hit Enter
to insert a new canvas anywhere you like:

To start drawing, hover over the top-right of the canvas and click the pen icon. It will enlarge the canvas and give you the tools to draw:

As you see, the plugin gives you a complete Excalidraw instance. If you don’t know how to use the app, click the help button in the bottom-right corner:

Anything you draw is automatically saved. Not only that, but any text you add to the canvas is nested underneath:

In future versions, it’ll be possible to nest block references and have their contents show up on the canvas.
That’s all you need to know to get started. Have fun drawing!
Additional resources
Want to see the plugin in action? See this video by Zsolt Viczián, the creator of this awesome plugin:
Join the conversation.