# Showcasing Excalidraw Conor ([@Conaw](https://twitter.com/Conaw?s=20)) 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](https://roamresearch.com)! 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. I have started alpha testing of the Roam integrated version with some friends yesterday. Depending on the issues we find, I hope to start beta testing in about a week. In the meantime, you can play with Excalidraw here: [https://excalidraw.com](https://excalidraw.com). You can save your drawings to your local drive and import them into Excalidraw-Roam when it becomes available. ![[Excalidraw-random-drawing.jpg|Random Drawing in Excalidraw]] # Key features ## All basic features you'd expect are there Excalidraw comes with all the basic features you would expect to see in a drawing tool. It offers a wonderful selection of basic shapes and features. You can set the properties of the stroke and the fill, group objects, manage layers by bringing objects to the front or pushing them to the back. You can also add text, play with the arrowheads, draw freehand, add breakpoints to lines ... it is really hard to name a basic feature that is missing. ![[Excalidraw+controls.jpg|Exalidraw basic features]] Arrows can anchor to objects, so when you move an object the connectors move with it. The one thing I miss is "elbow connectors". The arrow between the yellow ellipse and the box below is made of an arrow that I added an additional point to. I drew a vertical arrow from the ellipse, I double-clicked the arrow to edit its points and used alt+click to add the horizontal section leading to the box. When I move the ellipse or the box, depending on where I move them, the arrow may need further manual editing to maintain its elbow shape. I can live with this feature gap! ![[connecting+arrows.gif|anchoring arrows to objects]] ## Library of shapes Excalidraw supports libraries. There are several you can download by clicking “Browse libraries”. You can add these to Excalidraw locally and use them in all your drawings. At the time of writing, there were 29 different libraries available. If you are missing one, for example, there is currently no library of shapes for home design, you can create and add your own to the public domain. You’ll find instructions for doing this at the top of the Excalidraw Libraries page. ![[Libraries.jpg|Excalidraw libraries]] ## Create simple diagrams from data One very nice feature is how you can create simple charts by copy/pasting data from a spreadsheet. The solution seems to be limited to a single data series, for now, still, if you want to add a simple diagram to your sketch, there is a straightforward way to achieve that. When pasting charts you may choose between bar chart and line chart. ![[simple+chart.gif|Adding a simple chart]] ## Shortcuts To make life simpler, Excalidraw offers a rich set of shortcuts. You can access the list of keyboard shortcuts by clicking the question mark (?) in the bottom right corner of the canvas. ![[Excalidraw+help.jpg|Excalidraw help]] ## Light mode - dark mode The component comes ready with a dark mode and a light mode. The colors are inverted well. All of my drawings in which I used the default color palette, looked equally good in the dark and in the light mode. ![[light-mode_dark-mode.gif|light-mode dark-mode]] ## Handwriting experience It is possible to scribble some words using a stylus, but I would definitely not use Excalidraw to take longer hand-written notes. However, if you use it as a scratchpad or a shared whiteboard, it definitely does the job. ## Live collaboration Live collaboration is a really nice feature. When using Excalidraw in Roam, it requires a few clicks to set up, but practically in 20 seconds, you can take a drawing you are working on in Roam and share it for editing with others. Once you're done, you can save it back to Roam with just a few clicks. Here are the steps, which I also show in the quick video below: 1. Click the button to save your drawing, using the Excalidraw save function. This will save the drawing to your local drive. 2. Open a new browser window and navigate to https://excalidraw.com 3. Open your drawing from the local drive. 4. Click the "Live collaboration" button. 5. You'll be prompted to start the session, and Excalidraw will provide a link you can share with others to access the canvas. 6. Share this link with others. Using the link, people will access the canvas immediately. 7. Once you are ready with your collaboration, stop the live session. 8. Save your drawing by clicking save. Excalidraw will save the file to the same file that you opened. You can also choose the "save as" option. 9. Go back to Roam and load the drawing using the Excalidraw open function. 10. Save the drawing into your graph using the “Save” button on the top left. ## Exporting your drawings Excalidraw offers export to PNG and SVG formats with several utility settings such as transparent background, zooming level, and dark or light mode. ![[export.jpg|Excalidraw export]] ## Viewing modes There are three viewing modes. Zen-mode will clear all the controls from the canvas. The read-only mode will block accidental edits. Grid mode will turn on a grid and snap drawings to the grid. ## What is missing? The one feature some of you will probably miss from Excalidraw is the ability to import an image, such as a JPG or PNG, and to use Excalidraw to annotate it. To my best understanding, this is currently not possible. Considering, however, that the Roam integrated version of Excalidraw will save all its data into your graph, even if the feature were available, I would recommend against it for sake of graph size.  In the short time that I’ve been using Excalidraw, I have spotted nothing else that I miss considering everyday use. # Opportunities I am working on currently The following short video is a demonstration of the Excalidraw-Roam integration. The alpha version is already powerful, but there are a few further features I really think would make the experience perfect. I would really like to solve the integration of text from blocks nested under the drawing with text objects on the canvas. This will allow synchronization of annotations on your sketch with those in your document. Imagine, for example, that you name an object on your drawing (e.g. the title of a Form in an application design scenario), but you later decide to give it another name. Having the link between the text in your document and the label on your drawing will ensure consistency between your requirements specification (staying with the application design scenario) and illustrations. The other feature I really want to solve better is saving the drawings. Right now, I save drawings as plain text (JSON) into the {{roam/render:}} component’s block. I would prefer to save the drawing directly to the backend Roam database and to apply compression to ensure drawings do not take up too much space in the graph. # Closing thoughts Excalidraw is a very well-written sketching tool. It is really easy to work with, to create stunning sketches in a matter of minutes. Its integration into Roam is certainly an immense improvement over the existing drawing tool, which frankly I almost never used, given its very rudimentary nature. The availability of real-time collaboration via Excalidraw.com and the ability to load the resulting drawing back into Roam, such that next time you can continue to collaborate on the same sketch, has enormous potential. Once the last bit of integration is ready and you can link text on the drawing with nested text under the drawing, Excalidraw will become even more powerful.  The Excalidraw team is very active. I started development using version 0.4.0 and by the end of the week, I was using [version 0.4.2](https://www.npmjs.com/package/@excalidraw/excalidraw). The team is also extremely helpful. I would like to express my special thanks to [@vjeux](https://twitter.com/Vjeux?s=20), [@aakansha1216](https://twitter.com/aakansha1216?s=20), and [@dluzar](https://twitter.com/dluzar?s=20) for their prompt help with my novice questions. I am very excited!