Skip to main content

Roam-Excalidraw Plugin MVP Release

 

Roam-Excalidraw Roadma
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.

Comments

  1. Awesome! and thank you!

    Caveat - for me, copy/pasting the js above didn't work in Roam until I stripped out the bold formatting (the "**" characters in three places). Maybe there's a better way to embed code in the blog so it's more easily re-used?

    ReplyDelete
    Replies
    1. Thanks - I was having the same problem until I followed your advice and stripped the ** characters out. Never would have worked that out on my own.
      Works fine now

      Delete
  2. Szép munka. Nagyban emeli az Obsidian használati értékét.
    Már csak az is mutatja, milyen szépen megy fel a letöltöttség.
    Füles

    ReplyDelete
  3. Szép munka. Nagyban emeli az Obsidian használati értékét.
    Már csak az is mutatja, milyen szépen megy fel a letöltöttség.
    Füles

    ReplyDelete
  4. Hello I get this error message: Libraries have not yet loaded. Please refresh the block in a moment.

    How do I fix it

    Thanks

    ReplyDelete
    Replies
    1. Hi. Are you using Roam on a low bandwidth connection? Give it some time. The error sould fix itself once all the libraries have been downloaded. Then your browser will cache the files and it should load faster the next time around.

      Delete

Post a Comment

Popular posts from this blog

Showcasing Excalidraw

Conor ( @Conaw ) pointed me to Excalidraw last week, and I was blown away by the tool and especially about the opportunities it opens up for  Roam Research ! It is a full-featured, embeddable sketching component ready for web integration. This post will showcase key Excalidraw features and discusses some of the issues I still need to solve to complete its integration into Roam. I spent most of my free time during the week integrating Excalidraw into Roam. This article will introduce Excalidraw by showcasing its features.

Mind mapping with Excalidraw in Obsidian

Mind-mapping is a powerful tool. In this post I will show you how and when I mindmap with Excalidraw in Obsidian and why mindmapping is such a good tool for Personal Knowledge Management. Like this post? Show your support.

Evergreen Note on Note-taking Strategies and Their Practical Implementations

This is an evergreen note that I will be revisit regularly to develop a comprehensive list of note-taking approaches including their practical implementations in various software tools. This post will serve as an elaborate table of contents, including a brief introductory discussion on the importance of note-taking, followed by a high-level walkthrough of each method. Links to posts and videos with detailed examples and descriptions will follow over the coming weeks and months.

Deep Dive Into Roam's Data Structure - Why Roam is Much More Than a Note Taking App

Which are the longest paragraphs in your graph? Which pages did you edit or create last week? How many paragraphs of text do you have in your database in total? Which pages do you have under a given namesapece (e.g. meetings/)?

contact: info@zsolt.blog