Create Diagrams and Drawings in Roam Using Exalidraw

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: