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.
How to install Roam-Excalidraw
Step 1—Enable custom components.
This step is crucial for this plugin, otherwise it won’t work.
From the menu (…), go to
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.
Navigate to your
roam/js page and start by adding the following shortcode:
Tab to create a nested block underneath the shortcode. In the new block, type
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!
Want to see the plugin in action? See this video by Zsolt Viczián, the creator of this awesome plugin: