Roam-Excalidraw Plugin MVP Release

 

I am releasing the MVP version of the Roam-Excalidraw Plugin. Over the past two weeks, I have been super focused on getting to this point. As a consequence, this post is going to be shorter and more utilitarian than usual. I had to make a choice whether to release the plugin this weekend or to write a detailed blog post. I opted for the first. I have a detailed article showcasing Excalidraw features here. Be sure to check that out, there are a number of features I do not cover in today's video.

Please note this is a Minimum Viable Product version of the plugin. It is bound to have bugs. I hope none of them will cause you a major headache. I did my best to debug and stabilize the solution. BUT AS WITH ALL BETA SOFTWARE, PLEASE FIRST MAKE A BACKUP OF YOUR ROAM GRAPH IN EDN FORMAT BEFORE LOADING THIS PLUGIN - and while you are there, set up the automatic backup that is now available in Roam. I don't expect anything bad to happen, but the devil has a tendency of not sleeping. 

This past month was one big rollercoaster ride! A month ago, almost exactly to this day, I started my journey learning roam/render and Clojure. You can find a not-so-exciting Video Blog of my first nine days learning roam/render here, and a detailed article I posted two weeks ago about using roam/render here. I wouldn't have believed that I will be integrating Excalidraw into Roam using Clojure when I started this journey. 

I want to take the opportunity to thank @Conaw,  @aakansha1216,  @Vjeux,  @dwelle,  @Roamhacker,  @kvistgaard, @houshuang, and many others for assisting me along the ride by answering my silly questions, providing ideas, helping debug the application, and testing. I wouldn't have been able to deliver this plugin without your help!

Here's a short video that introduces the plug-in.

To install the plugin, simply copy the following code into Roam, nesting it under a {{[[roam/js]]}} block. You can create a code block using the / menu by tying "/Javascript Code Block". Then you can copy the code below into that. If in doubt, open the video to see how the code block should look like (note I made a little edit compared to the video by removing the "(()=>" and ")();" parts replacing it with {}. If you are facing difficulties visit the closed issues on GitHub to see solutions that worked for others.

{

  let s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = 'https://www.roam-excalidraw.com/dist/loader.js';
  s.async = false;
  document.getElementsByTagName('head')[0].appendChild(s);  
}

Remember, for the Excalidraw plugin to work, you need to allow custom components in the user settings menu, and you need to click Yes on the roam/js code.

You can start sketching by either using the standard roam/template I create during install, by typing ";;Excalidraw", or by typing {{roam/render: ((sketching))}} into a block and hitting enter.

Should you find bugs, or have suggestions for future features/improvements, please use this link to submit: Roam-Excalidraw-Plugin-Issues on Github. You can also find me on Twitter: @zsviczian

Enjoy sketching in Roam.

Like this post? Show your support.