Draw in your graph using Roam-Excalidraw

This plugin is currently in beta. Make sure you backup your graph in EDN format before installing it.

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 plugin.

Step 1—Enable custom components.

This step is crucial for this plugin, otherwise it won’t work.

From the menu (…), go to User settings:

User settings option in menu

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

Custom components enabled
Click the image to enlarge

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;

It should look like this on the page:

Excalidraw JS code example

Step 4—Enable the plugin.

To activate the plugin, click the Roam JavaScript activation button button.

The block turns yellow, indicating the plugin is active:

Roam plugin active message

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:

Roam-Excalidraw empty canvas

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:

Roam-Excalidraw open canvas

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: Excalidraw help button

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

Roam-Excalidraw nested text

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:

Tags: , ,

Was this helpful?