**Created**:: [[2021-10-23 Saturday]] **Link**:: https://youtu.be/_c_0zpBJ4Xc **Duration**:: 4:51 ![Launching Obsidian-Excalidraw image elements](https://youtu.be/_c_0zpBJ4Xc) # Summary In this video, Zsolt introduces the latest features of the Obsidian-Excalidraw integration, including the ability to add image elements to drawings. He demonstrates how to insert images using various methods and how to manage embedded drawings and file histories. The pre-release version aims to enhance user experience while ensuring better performance and stability in the future. # Key Takeaways - You can add images to Obsidian-Excalidraw by selecting them through a button, dragging from the file explorer, or copying from the clipboard. - Images and drawings can be managed within Obsidian, providing easy access and the ability to rename files as needed. - The integration allows for embedded drawings and includes features for improved performance and better handling of large files. # Content Hey, I'm excited to announce that image elements have arrived to Obsidian Excalidraw as well! I just released the pre-release; I'll put the link in the description below. You can install it from there. After another day of testing, I'm going to release this to community plugins as well. So I just quickly want to show you how this works. So first of all, how do you add images to your drawing? There's a button up here; if you click the button, you can select an image. You double-click, click where you want the image, and that's it! You can resize the image, and if you hold shift, then you can also distort the image if you want. [* ](https://youtu.be/_c_0zpBJ4Xc?t=0) Second, you can control drag and drop from the Obsidian file explorer. So let's take this file, I drag it here, I press the control button, and there you go—I’ve inserted this drawing into here. And then finally, I can copy-paste anything from the clipboard. So I come here, I copy this image, I come back, I press Ctrl + V, and the image appears in my drawing. The images are stored in Obsidian, so if I control-click on an image, then the image inside Obsidian will come up, and I can actually come here and rename this to "monkey" like this. And if I come back here, of course, the image is still here, but this is now called "monkey." I can also show you that here under attachments, I have my monkey PNG file that was pasted. [* ](https://youtu.be/_c_0zpBJ4Xc?t=61) Secondly, what I want to show you is that you can embed Excalidraw drawings as well. That is my logo as the next Excalidraw drawing, and you can edit these drawings. So again, if I control-click my drawing, it opens up the drawing. Let's just do two quick changes here. I'm going to set this to transparent, and I'm going to maybe color this note here to be red like that. And now, if I come back to my drawing, then you can see that the image is now transparent and this node is now red. [* ](https://youtu.be/_c_0zpBJ4Xc?t=114) Finally, I want to show you that in the markdown file. So if I click here to open this markdown note, there's a message here that if the image file is big, then the loading of this can take a while. But I want to show you the two changes. So change number one is embedded files appeared, and this is where all of the files that were embedded can be found. These are the links that I'm using in the plugin. Secondly, if I collapse the drawing, you can see I have an SVG snapshot, and I included this snapshot. These are the images; that's why it's quite big, because I have lots of images here. But then at the bottom you will see I also have the standard SVG text as well. [* ](https://youtu.be/_c_0zpBJ4Xc?t=160) I included this for two reasons: one for simply longevity, so even if Excalidraw doesn't work in the future, for sure SVG support will be there, and this way all of your files always contain the latest snapshot of the drawing in an SVG format. Also, what I've done is I've taken the hover preview and I've converted it to use these snapshots, and that is good because then the loading is much faster—so that was also a performance thing. [* ](https://youtu.be/_c_0zpBJ4Xc?t=212) And that's about it! Some of the features may have some rough edges still; I'm working on stabilizing everything in the solution. But I believe that this is now stable enough for broader consumption, so that's why I'm releasing it as a pre-release, and hopefully by the end of tomorrow, we'll come to a final stable version that I’m going to be publishing to community plugins. So hope you will find this useful, and hope you find it as exciting as I do. Thank you! [* ](https://youtu.be/_c_0zpBJ4Xc?t=264) # YouTube Details ## YouTube Description If you find the plugin and/or my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt If you'd like to request a feature or report a bug, please raise it on GitHub: https://github.com/zsviczian/obsidian-excalidraw-plugin If you want to connect, you can reach me (@zsviczian) in the Obsidian Members Group (OMG) on Discord or on Twitter. Links --------- My blog:https://zsolt.blog ## YouTube Transcript [hey i'm excited to announce that image](https://youtu.be/_c_0zpBJ4Xc?t=0) [elements have arrived to obsidian x-coli](https://youtu.be/_c_0zpBJ4Xc?t=2) [draw as well i just released the](https://youtu.be/_c_0zpBJ4Xc?t=5) [pre-release i'll put the link in the](https://youtu.be/_c_0zpBJ4Xc?t=8) [description below you can install it](https://youtu.be/_c_0zpBJ4Xc?t=11) [from there](https://youtu.be/_c_0zpBJ4Xc?t=13) [after another day of testing i'm going](https://youtu.be/_c_0zpBJ4Xc?t=14) [to release this to community plugins as](https://youtu.be/_c_0zpBJ4Xc?t=17) [well so i just quickly want to show you](https://youtu.be/_c_0zpBJ4Xc?t=20) [how this works so first of all how do](https://youtu.be/_c_0zpBJ4Xc?t=22) [you add images to your drawing there's a](https://youtu.be/_c_0zpBJ4Xc?t=24) [button up here if you click the button](https://youtu.be/_c_0zpBJ4Xc?t=27) [you can select an image](https://youtu.be/_c_0zpBJ4Xc?t=30) [you double click you click where you](https://youtu.be/_c_0zpBJ4Xc?t=32) [want the image](https://youtu.be/_c_0zpBJ4Xc?t=34) [and that's it you can resize the image](https://youtu.be/_c_0zpBJ4Xc?t=36) [and if you hold shift then you can also](https://youtu.be/_c_0zpBJ4Xc?t=39) [distort the image if you want](https://youtu.be/_c_0zpBJ4Xc?t=41) [second you can control drag and drop](https://youtu.be/_c_0zpBJ4Xc?t=45) [from the obsidian file explorer so let's](https://youtu.be/_c_0zpBJ4Xc?t=48) [take this file i drag it here i press](https://youtu.be/_c_0zpBJ4Xc?t=50) [the control button and there you go i've](https://youtu.be/_c_0zpBJ4Xc?t=53) [inserted this drawing](https://youtu.be/_c_0zpBJ4Xc?t=56) [into](https://youtu.be/_c_0zpBJ4Xc?t=59) [here](https://youtu.be/_c_0zpBJ4Xc?t=61) [and then finally i can copy paste](https://youtu.be/_c_0zpBJ4Xc?t=62) [anything from the clipboard so i come](https://youtu.be/_c_0zpBJ4Xc?t=65) [here](https://youtu.be/_c_0zpBJ4Xc?t=67) [i copy this image i come back i press](https://youtu.be/_c_0zpBJ4Xc?t=68) [ctrl v](https://youtu.be/_c_0zpBJ4Xc?t=71) [and the image appears in my drawing the](https://youtu.be/_c_0zpBJ4Xc?t=72) [images are stored in obsidian so if i](https://youtu.be/_c_0zpBJ4Xc?t=77) [control click on an image](https://youtu.be/_c_0zpBJ4Xc?t=80) [then the](https://youtu.be/_c_0zpBJ4Xc?t=82) [image inside obsidian will come up and i](https://youtu.be/_c_0zpBJ4Xc?t=84) [can actually come here and rename this](https://youtu.be/_c_0zpBJ4Xc?t=87) [to](https://youtu.be/_c_0zpBJ4Xc?t=90) [monkey](https://youtu.be/_c_0zpBJ4Xc?t=91) [like this](https://youtu.be/_c_0zpBJ4Xc?t=93) [and if i come back here of course the](https://youtu.be/_c_0zpBJ4Xc?t=94) [image](https://youtu.be/_c_0zpBJ4Xc?t=97) [is still here but this is now](https://youtu.be/_c_0zpBJ4Xc?t=98) [called monkey and i can also show you](https://youtu.be/_c_0zpBJ4Xc?t=100) [that](https://youtu.be/_c_0zpBJ4Xc?t=102) [here under attachments i have my monkey](https://youtu.be/_c_0zpBJ4Xc?t=103) [png file that was pasted](https://youtu.be/_c_0zpBJ4Xc?t=107) [secondly what i want to show you is](https://youtu.be/_c_0zpBJ4Xc?t=111) [uh that you can embed x coli draw](https://youtu.be/_c_0zpBJ4Xc?t=114) [drawings as well and that is my logo is](https://youtu.be/_c_0zpBJ4Xc?t=117) [the next cauli draw drawing and you can](https://youtu.be/_c_0zpBJ4Xc?t=120) [edit these drawings so again if i](https://youtu.be/_c_0zpBJ4Xc?t=122) [control click my drawing it opens up the](https://youtu.be/_c_0zpBJ4Xc?t=124) [drawing and let's just do two](https://youtu.be/_c_0zpBJ4Xc?t=127) [quick changes here i'm going to](https://youtu.be/_c_0zpBJ4Xc?t=130) [set this to transparent](https://youtu.be/_c_0zpBJ4Xc?t=133) [and i'm going to maybe color this](https://youtu.be/_c_0zpBJ4Xc?t=137) [note here to](https://youtu.be/_c_0zpBJ4Xc?t=141) [be read like that](https://youtu.be/_c_0zpBJ4Xc?t=143) [and now if i come back to my drawing](https://youtu.be/_c_0zpBJ4Xc?t=145) [then you can see that the image is](https://youtu.be/_c_0zpBJ4Xc?t=148) [now transparent and this node is now red](https://youtu.be/_c_0zpBJ4Xc?t=152) [and finally i want to show you that in](https://youtu.be/_c_0zpBJ4Xc?t=157) [the markdown file so if i click here to](https://youtu.be/_c_0zpBJ4Xc?t=160) [open this markdown](https://youtu.be/_c_0zpBJ4Xc?t=163) [note there's a message here that](https://youtu.be/_c_0zpBJ4Xc?t=165) [if the image file is big then the](https://youtu.be/_c_0zpBJ4Xc?t=168) [loading of this can take a while](https://youtu.be/_c_0zpBJ4Xc?t=170) [but i want to show you the two changes](https://youtu.be/_c_0zpBJ4Xc?t=173) [so](https://youtu.be/_c_0zpBJ4Xc?t=175) [uh](https://youtu.be/_c_0zpBJ4Xc?t=176) [change number one is embedded files uh](https://youtu.be/_c_0zpBJ4Xc?t=177) [appeared and this is where all of the](https://youtu.be/_c_0zpBJ4Xc?t=180) [files that were embedded can be found](https://youtu.be/_c_0zpBJ4Xc?t=183) [and these are the links that i'm using](https://youtu.be/_c_0zpBJ4Xc?t=186) [in the plugin and then secondly if i](https://youtu.be/_c_0zpBJ4Xc?t=189) [collapse the drawing you can see i have](https://youtu.be/_c_0zpBJ4Xc?t=193) [an svg snapshot and i included this](https://youtu.be/_c_0zpBJ4Xc?t=196) [snapshot so these are the images that's](https://youtu.be/_c_0zpBJ4Xc?t=200) [why it's quite big because i have lots](https://youtu.be/_c_0zpBJ4Xc?t=202) [of images here but then at the bottom](https://youtu.be/_c_0zpBJ4Xc?t=204) [you will see i also have the standard](https://youtu.be/_c_0zpBJ4Xc?t=206) [svg text as well](https://youtu.be/_c_0zpBJ4Xc?t=210) [i included this for two reasons one](https://youtu.be/_c_0zpBJ4Xc?t=212) [for simply longevity so even if xcalidro](https://youtu.be/_c_0zpBJ4Xc?t=216) [doesn't work in the future](https://youtu.be/_c_0zpBJ4Xc?t=221) [for sure svg support will be there and](https://youtu.be/_c_0zpBJ4Xc?t=223) [this way all of your files always](https://youtu.be/_c_0zpBJ4Xc?t=227) [contain the latest snapshot of the](https://youtu.be/_c_0zpBJ4Xc?t=229) [drawing in an svg format also what i've](https://youtu.be/_c_0zpBJ4Xc?t=232) [done is i've taken the hover preview](https://youtu.be/_c_0zpBJ4Xc?t=235) [and i converted it to use these](https://youtu.be/_c_0zpBJ4Xc?t=239) [snapshots and that is good because then](https://youtu.be/_c_0zpBJ4Xc?t=242) [the loading is much faster so that was](https://youtu.be/_c_0zpBJ4Xc?t=246) [also a performance thing](https://youtu.be/_c_0zpBJ4Xc?t=249) [and that's about it](https://youtu.be/_c_0zpBJ4Xc?t=252) [some of the](https://youtu.be/_c_0zpBJ4Xc?t=254) [features may have](https://youtu.be/_c_0zpBJ4Xc?t=255) [some rough edges still i'm](https://youtu.be/_c_0zpBJ4Xc?t=257) [working on](https://youtu.be/_c_0zpBJ4Xc?t=260) [stabilizing everything in the solution](https://youtu.be/_c_0zpBJ4Xc?t=262) [but i believe that this is now](https://youtu.be/_c_0zpBJ4Xc?t=264) [staple enough for a broader consumption](https://youtu.be/_c_0zpBJ4Xc?t=266) [so that's why i'm releasing it as a](https://youtu.be/_c_0zpBJ4Xc?t=269) [pre-release and hopefully by end of](https://youtu.be/_c_0zpBJ4Xc?t=271) [tomorrow we'll come to a](https://youtu.be/_c_0zpBJ4Xc?t=274) [final stable version](https://youtu.be/_c_0zpBJ4Xc?t=277) [that i'm going to be publishing to](https://youtu.be/_c_0zpBJ4Xc?t=279) [community plugins so hope you will find](https://youtu.be/_c_0zpBJ4Xc?t=281) [this](https://youtu.be/_c_0zpBJ4Xc?t=284) [useful and hope you find it as exciting](https://youtu.be/_c_0zpBJ4Xc?t=285) [as i do thank you](https://youtu.be/_c_0zpBJ4Xc?t=288)