**Created**:: [[2021-07-10 Saturday]] **Link**:: https://youtu.be/VRZVujfVab0 **Duration**:: 7:50 ![Obsidian-Excalidraw Walkthrough Part 9/10: Excalidraw Automate](https://youtu.be/VRZVujfVab0) # Summary In this video titled "Obsidian-Excalidraw Walkthrough Part 9/10: Excalidraw Automate," the creator discusses the features of Excalidraw Automate, a JavaScript programming interface for generating drawings. The walkthrough includes simple examples and demonstrates how to create drawings and diagrams, such as mind maps and family trees, using this tool within Obsidian. The video highlights the flexibility and capabilities of Excalidraw Automate, as well as several potential use cases for automation in visual note-taking. # Key Takeaways - Excalidraw Automate is a JavaScript API for creating drawings in Obsidian. - Users can automate the creation of diagrams like mind maps and family trees based on text data or templates. - The tool offers extensive functionalities for customization, including adjusting shapes, colors, and connections, which enhances visual productivity. # Content Hey, welcome back! This is part nine of my walkthrough of Obsidian Excalidraw, and we are going to be talking about Excalidraw Automate. Excalidraw Automate is a full-featured programming interface to generate drawings. It's available through the `window.excalidrawAutomate` object in JavaScript. You can use this in Templater, in Dataview.js, and you can even use it in your own plugins. For example, Ozone's amazing image in editor plugin uses this feature to display Excalidraw drawings, and there is detailed help available here. You can see documentation of the API, as well as a number of examples showing you how this tool can be used. Before we go further, let me show you. If I come to my console log and I type in `excalidrawAutomate`, then you can see that this object is displayed and the actual elements you can find here for the specific drawing that you're looking at. You can do all the different settings, and there are a whole bunch of functions to help you with that. I'm not going to go into details in this intro; I just want to show you the capability at a high level. But using the help, you can dive deep into this. [* ](https://youtu.be/VRZVujfVab0?t=0) Looking at some of the simple examples, we're going to start with this two objects example. This is a very simple script. What it does is it starts with creating this Excalidraw Automate object or actually just creates a simple reference so I don't always need to write this long object name. You need to first reset the object so it's always cleared before you start to draw. In this case, I'm adding a text called "connect objects," and this is the location of the X, Y coordinates of where the text should be placed. I'm then adding a diamond shape and an ellipse at these two locations, and then I stored the A and B objects and called A Connect Object. I can specify where the arrow should be pointing and can change the color to red. Then I can connect the objects again, and you will see the result. So if I run my template or script, it's called the EA to Objects example, and what you can see is this drawing is created. From the left to the right, we have — I think it was the left to right, anyway, so to the right direction we have the arrows created, we see the text, and we see the diamond and the circle. So this was a very simple example. This sketch was created with this default name, so that's a very simple and maybe useless example. But then if we go further, let me show you this. In this case, this is going to be a template or another template or example. First of all, let's look at how the source code looks like. I'm not going to talk through the entire source code; this is a bit more complex because this builds a mind map. If you're interested, you can find this code and read it from the link provided. I'm really not going to go through this script here to explain, but the way this works is I open up the file that is in an outline format file. If I now choose my Mind Map Builder example on this file, then you can see that using the text that you can see right there, a mind map was created with random colors. So that is, I think, a more useful and interesting example of converting your outlines into text. [* ](https://youtu.be/VRZVujfVab0?t=45) You can also use Excalidraw Automate with Dataview. In this case, I have a source file, so let me show you the source file. I'm using the task object, so these are simple tasks in Obsidian. This is my outline of what I want to draw, and I can create a family tree from that data. If I open this in a new drawing, if I switch to edit mode, then you can see that this is indeed the underlying short script that takes in the data from you can see here the name of the file is this Family Tree, and it reads that data and displays the family tree. I have exactly the same type of example with the mind map, where this is my source data, and I can use Dataview to display that. The fun thing about Dataview is here at the end of the script. I'm actually not creating a new Excalidraw drawing, but I'm using Excalidraw Automate to create an SVG. You could also create a PNG drawing. In this case, for this mind map, there isn't a version of this saved as an Excalidraw file in my vault; this only exists as a drawing. For example, you could use this to display drawings; for instance, you could draw a small script to display today's weather based on some input data, and then you could have a dynamically created small SVG with that. Of course, there are many possibilities here; these are just silly demo use cases that I'm showing. Some ideas I have in mind include creating or further enhancing the charting capabilities to automatically create charts and graphs or creating a conversion of Mermaid diagrams into Excalidraw, so you can use the Mermaid file format and then customize the drawing in Excalidraw. Those are some ideas and that was part nine introducing Excalidraw Automate. [* ](https://youtu.be/VRZVujfVab0?t=90) # YouTube Details ## YouTube Description If you find this helpful please say thanks by buying me a coffee: https://ko-fi.com/zsolt You can reach me (@zsviczian) in the Obsidian Members Group (OMG) on Discord or on Twitter. Link to the GitHub page: https://github.com/zsviczian/obsidian-excalidraw-plugin Link to the Excalidraw Automate documentation: https://zsviczian.github.io/obsidian-excalidraw-plugin/ ## YouTube Transcript [hey welcome back this is part nine of my](https://youtu.be/VRZVujfVab0?t=0) [walkthrough of obsidian excalidra](https://youtu.be/VRZVujfVab0?t=3) [and we are going to be talking about x](https://youtu.be/VRZVujfVab0?t=6) [choledro](https://youtu.be/VRZVujfVab0?t=9) [automate and to get us started](https://youtu.be/VRZVujfVab0?t=9) [um excalidra ultimate is a full-featured](https://youtu.be/VRZVujfVab0?t=13) [programming](https://youtu.be/VRZVujfVab0?t=16) [interface to generate drawings it's](https://youtu.be/VRZVujfVab0?t=17) [available through the window.excluder](https://youtu.be/VRZVujfVab0?t=19) [automate](https://youtu.be/VRZVujfVab0?t=22) [object in javascript you can use this](https://youtu.be/VRZVujfVab0?t=22) [in templater in dataview.js](https://youtu.be/VRZVujfVab0?t=25) [you can even use it in your own plugins](https://youtu.be/VRZVujfVab0?t=29) [for example](https://youtu.be/VRZVujfVab0?t=31) [ozone's amazing image in](https://youtu.be/VRZVujfVab0?t=32) [editor plugin uses this feature to](https://youtu.be/VRZVujfVab0?t=36) [display](https://youtu.be/VRZVujfVab0?t=39) [x-coli draw drawings and there is a](https://youtu.be/VRZVujfVab0?t=40) [detailed help available here](https://youtu.be/VRZVujfVab0?t=42) [so you can see a documentation of the](https://youtu.be/VRZVujfVab0?t=45) [api](https://youtu.be/VRZVujfVab0?t=49) [as well as you can see a](https://youtu.be/VRZVujfVab0?t=50) [number of examples uh showing you how](https://youtu.be/VRZVujfVab0?t=53) [this tool](https://youtu.be/VRZVujfVab0?t=56) [can be used and before we go further](https://youtu.be/VRZVujfVab0?t=57) [let's just](https://youtu.be/VRZVujfVab0?t=60) [show you so if i come to my console log](https://youtu.be/VRZVujfVab0?t=60) [and i](https://youtu.be/VRZVujfVab0?t=63) [type in xcalitro automate then you can](https://youtu.be/VRZVujfVab0?t=64) [see that](https://youtu.be/VRZVujfVab0?t=67) [this object is uh](https://youtu.be/VRZVujfVab0?t=68) [displayed and the actual elements you](https://youtu.be/VRZVujfVab0?t=74) [can find here for](https://youtu.be/VRZVujfVab0?t=77) [the specific drawing that you're looking](https://youtu.be/VRZVujfVab0?t=79) [at and](https://youtu.be/VRZVujfVab0?t=81) [you can do all the different settings](https://youtu.be/VRZVujfVab0?t=82) [and there are](https://youtu.be/VRZVujfVab0?t=84) [there's a whole bunch of functions to](https://youtu.be/VRZVujfVab0?t=85) [help you with that i'm not going to go](https://youtu.be/VRZVujfVab0?t=88) [into details in this](https://youtu.be/VRZVujfVab0?t=90) [intro i just want to show you the](https://youtu.be/VRZVujfVab0?t=92) [capability](https://youtu.be/VRZVujfVab0?t=94) [at a high level but using the help](https://youtu.be/VRZVujfVab0?t=95) [you can dive deep into this](https://youtu.be/VRZVujfVab0?t=100) [so looking at](https://youtu.be/VRZVujfVab0?t=103) [[Music]](https://youtu.be/VRZVujfVab0?t=106) [some of the simple examples we're going](https://youtu.be/VRZVujfVab0?t=107) [to start with this](https://youtu.be/VRZVujfVab0?t=109) [two objects example and so this is](https://youtu.be/VRZVujfVab0?t=111) [a very simple script what it does is](https://youtu.be/VRZVujfVab0?t=114) [it adds a it starts with creating this](https://youtu.be/VRZVujfVab0?t=117) [xcody draw automate object or actually](https://youtu.be/VRZVujfVab0?t=122) [just creates](https://youtu.be/VRZVujfVab0?t=124) [a simple reference so i don't always](https://youtu.be/VRZVujfVab0?t=125) [need to write](https://youtu.be/VRZVujfVab0?t=129) [this long object name you need to first](https://youtu.be/VRZVujfVab0?t=130) [reset the object so it's always cleared](https://youtu.be/VRZVujfVab0?t=134) [before you start to draw](https://youtu.be/VRZVujfVab0?t=138) [and then in this case i'm adding a text](https://youtu.be/VRZVujfVab0?t=140) [called connect objects and this is the](https://youtu.be/VRZVujfVab0?t=143) [location](https://youtu.be/VRZVujfVab0?t=145) [of the x y coordinates of where the text](https://youtu.be/VRZVujfVab0?t=147) [should be placed i'm then adding](https://youtu.be/VRZVujfVab0?t=150) [a diamond shape and an ellipse](https://youtu.be/VRZVujfVab0?t=153) [at these two locations and then](https://youtu.be/VRZVujfVab0?t=156) [i stored the a and b objects and i](https://youtu.be/VRZVujfVab0?t=159) [called a](https://youtu.be/VRZVujfVab0?t=162) [connect object and i can specify](https://youtu.be/VRZVujfVab0?t=163) [uh where the arrow should be pointing](https://youtu.be/VRZVujfVab0?t=167) [and then i can change the color to red](https://youtu.be/VRZVujfVab0?t=171) [and i can connect the objects again and](https://youtu.be/VRZVujfVab0?t=175) [you will see](https://youtu.be/VRZVujfVab0?t=177) [the result so if i run my](https://youtu.be/VRZVujfVab0?t=179) [template or script it's called the](https://youtu.be/VRZVujfVab0?t=183) [ea to objects example and what you can](https://youtu.be/VRZVujfVab0?t=186) [see](https://youtu.be/VRZVujfVab0?t=190) [is this drawing is created and](https://youtu.be/VRZVujfVab0?t=190) [from the left to the right](https://youtu.be/VRZVujfVab0?t=194) [we have i think it was the left to right](https://youtu.be/VRZVujfVab0?t=198) [anyway so to the right direction](https://youtu.be/VRZVujfVab0?t=201) [we have the arrows created we see the](https://youtu.be/VRZVujfVab0?t=203) [text and we see the diamond](https://youtu.be/VRZVujfVab0?t=207) [and the circle so this was a very simple](https://youtu.be/VRZVujfVab0?t=209) [example this sketch was created](https://youtu.be/VRZVujfVab0?t=212) [with this default name so that's](https://youtu.be/VRZVujfVab0?t=215) [a very very simple uh and maybe](https://youtu.be/VRZVujfVab0?t=219) [useless example but then if we go](https://youtu.be/VRZVujfVab0?t=222) [further](https://youtu.be/VRZVujfVab0?t=225) [let me show you uh this so in this case](https://youtu.be/VRZVujfVab0?t=226) [this is going to be a template or](https://youtu.be/VRZVujfVab0?t=230) [another template or example](https://youtu.be/VRZVujfVab0?t=232) [and first of all let's look at](https://youtu.be/VRZVujfVab0?t=234) [how the source code looks like i'm not](https://youtu.be/VRZVujfVab0?t=237) [going to talk through the entire source](https://youtu.be/VRZVujfVab0?t=240) [code this is a bit more](https://youtu.be/VRZVujfVab0?t=242) [complex because this builds a mind map](https://youtu.be/VRZVujfVab0?t=243) [um if you're interested you find this](https://youtu.be/VRZVujfVab0?t=247) [code you can read it](https://youtu.be/VRZVujfVab0?t=250) [from the link provided i'm really not](https://youtu.be/VRZVujfVab0?t=252) [going to go through](https://youtu.be/VRZVujfVab0?t=254) [this script here to explain but](https://youtu.be/VRZVujfVab0?t=256) [the way this works is i open up the file](https://youtu.be/VRZVujfVab0?t=259) [that](https://youtu.be/VRZVujfVab0?t=262) [is an outline format file](https://youtu.be/VRZVujfVab0?t=263) [and if i now choose my](https://youtu.be/VRZVujfVab0?t=266) [mind map builder example on this file](https://youtu.be/VRZVujfVab0?t=271) [then you can see](https://youtu.be/VRZVujfVab0?t=274) [that using this text that you can](https://youtu.be/VRZVujfVab0?t=276) [see right there a mind map was created](https://youtu.be/VRZVujfVab0?t=279) [with random colors so that is i think](https://youtu.be/VRZVujfVab0?t=284) [a more useful and interesting example of](https://youtu.be/VRZVujfVab0?t=287) [converting your outlines uh into text](https://youtu.be/VRZVujfVab0?t=292) [you can also use um x color draw](https://youtu.be/VRZVujfVab0?t=296) [automate](https://youtu.be/VRZVujfVab0?t=299) [with data view and in this case i have a](https://youtu.be/VRZVujfVab0?t=300) [source file so let me show you the](https://youtu.be/VRZVujfVab0?t=303) [source file](https://youtu.be/VRZVujfVab0?t=305) [is going to be uh i'm using](https://youtu.be/VRZVujfVab0?t=306) [the task object](https://youtu.be/VRZVujfVab0?t=310) [so these are simple uh tasks](https://youtu.be/VRZVujfVab0?t=313) [uh in obsidian and so this is my](https://youtu.be/VRZVujfVab0?t=317) [outline of what i want to draw and i can](https://youtu.be/VRZVujfVab0?t=322) [create](https://youtu.be/VRZVujfVab0?t=326) [a family theory from that data so if i](https://youtu.be/VRZVujfVab0?t=326) [open this](https://youtu.be/VRZVujfVab0?t=329) [in a new drawing if i switch to edit](https://youtu.be/VRZVujfVab0?t=330) [mode then you can see that this](https://youtu.be/VRZVujfVab0?t=333) [is indeed the underlying](https://youtu.be/VRZVujfVab0?t=334) [short script that takes in the](https://youtu.be/VRZVujfVab0?t=338) [data from you can see here the name of](https://youtu.be/VRZVujfVab0?t=342) [the file](https://youtu.be/VRZVujfVab0?t=346) [is this family tree and](https://youtu.be/VRZVujfVab0?t=346) [it reads that data and displays](https://youtu.be/VRZVujfVab0?t=350) [the family tree and i have exactly the](https://youtu.be/VRZVujfVab0?t=354) [same type of example with](https://youtu.be/VRZVujfVab0?t=357) [the mind map where this is my](https://youtu.be/VRZVujfVab0?t=360) [source data and i can use data view](https://youtu.be/VRZVujfVab0?t=363) [to display that the fun thing about data](https://youtu.be/VRZVujfVab0?t=367) [view](https://youtu.be/VRZVujfVab0?t=370) [is here at the end of the script i'm](https://youtu.be/VRZVujfVab0?t=370) [actually](https://youtu.be/VRZVujfVab0?t=373) [not creating a](https://youtu.be/VRZVujfVab0?t=374) [a new x collider drawing but i'm using](https://youtu.be/VRZVujfVab0?t=379) [xcali draw automate to create](https://youtu.be/VRZVujfVab0?t=383) [an svg you could also create a png](https://youtu.be/VRZVujfVab0?t=385) [drawing so in this case for this mind](https://youtu.be/VRZVujfVab0?t=388) [map](https://youtu.be/VRZVujfVab0?t=391) [there isn't a version of this saved as](https://youtu.be/VRZVujfVab0?t=392) [an exclutral file](https://youtu.be/VRZVujfVab0?t=396) [in my vault this only exists as a](https://youtu.be/VRZVujfVab0?t=398) [drawing and for example you can use this](https://youtu.be/VRZVujfVab0?t=400) [to display drawings for example you](https://youtu.be/VRZVujfVab0?t=404) [could](https://youtu.be/VRZVujfVab0?t=407) [drew a do a small script](https://youtu.be/VRZVujfVab0?t=408) [to display today's weather](https://youtu.be/VRZVujfVab0?t=412) [based on some input data and then you](https://youtu.be/VRZVujfVab0?t=415) [could have a dynamically created](https://youtu.be/VRZVujfVab0?t=418) [small svg with that but of course there](https://youtu.be/VRZVujfVab0?t=421) [are many](https://youtu.be/VRZVujfVab0?t=423) [possibilities here these are just silly](https://youtu.be/VRZVujfVab0?t=425) [demo use cases that i'm](https://youtu.be/VRZVujfVab0?t=429) [showing you could or some ideas i have](https://youtu.be/VRZVujfVab0?t=433) [on my mind](https://youtu.be/VRZVujfVab0?t=436) [is creating or further enhancing](https://youtu.be/VRZVujfVab0?t=437) [the charting capabilities so to](https://youtu.be/VRZVujfVab0?t=441) [automatically create charts and graphs](https://youtu.be/VRZVujfVab0?t=444) [or um creating a](https://youtu.be/VRZVujfVab0?t=446) [conversion of mermaid diagrams into](https://youtu.be/VRZVujfVab0?t=450) [exco drawing so you can use the mermaid](https://youtu.be/VRZVujfVab0?t=453) [file format and then customize the](https://youtu.be/VRZVujfVab0?t=457) [drawing in x cubicles so those are some](https://youtu.be/VRZVujfVab0?t=460) [ideas and that was part nine introducing](https://youtu.be/VRZVujfVab0?t=463) [excalitra ultimate](https://youtu.be/VRZVujfVab0?t=467)