Explaining Links, Transclusions and Embedding in Obsidian Excalidraw

Hey everyone Zsolt here I wanted to spend a few minutes talking about linking transclusion and embedding. This topic came up at the office hours in cohort 9 last week and we ended up talking about these topics for almost an hour... and my

takeaway from all of this was that obviously this is confusing to people and I could do a better job at explaining what Excalidraw can and cannot do.

So in this video I'll try to walk you through some of the basic concepts and hopefully by the end you will have a much better understanding of the difference between these terms and what Excalidraw can and cannot do in obsidian. So

let's dive in! We are going to explore these three topics I also have a table with a number of examples that we are going to go through so hopefully this is going to be all clear. On this opening page what you can see here is I have a web page here so of course I can embed web pages I have this

image of a dog here I have this markdown document from my Vault so I can edit and move it this document I also have a YouTube video embedded here as well as I have this animated GIF and of course I could have many other things

but let's just start to dive in here and first talk about the easy stuff so what are the different type of objects you can embed into exetra so you can embed images and images can be either Excalidraw images or other image formats like PNG

SVG Etc they can be markdown documents and there are actually two different ways of embedding markdown which we look at you can embed video from within the Vault and from outside the Vault you you can embed web pages and of course you can embed links to other files but those links will just be links so when you

click on it then either the Obsidian built-in feature will function or you will be prompted to go outside obsidian and use the default tool on your device and also the easy part of the discussion from where can you embed well

you can embed from the obsidian Vault and frankly this is my primary approach my mindset with PKM is I'm building a system for the next decades not couple of years but really 20-30 years and I still use notes from 30

years ago and for me linking to images on the web or linking to stuff on my drive outside of Obsidian is sort of it beats the purpose it's sort of meaningless of course YouTube videos I do link to but otherwise I try to keep

everything in my Vault so it's in one place easy to handle easy to manage but you can also link to files on your local drive as well as you can link to resources on the web and now let's come to the harder part so what does what type of references can you create what does linking

mean what does transclusion mean and what does embedding mean so let's go through these one by one I think the easiest is linking a link is simply a reference to a resource you know about hyperlinks you know about Wiki links and you know about markdown links so those are

the type of links you can create in Obsidian and in ex it specifically and in this case there are two different type of links and I'm going to show you examples in just a moment so now we're just talking about getting the big

picture you can create links by typing the text the link text in a text element and then it's a text element link or you can add links to any object in Excalidraw and then it becomes an element link and then in the top corner you have this icon that is the link indicator and then you know you have a

link there you can click it and you can navigated so that's easy now I think transclusion is where people start to feel uncertain what the heck does transclusion mean and where why am I using the word transclusion instead of

embedding does it mean the same thing or something different so transclusion is when you embed when you include part of an image or part of a document part of something you reference a part of something in

another document you don't embedd it you only have a reference it will appear as if it's there but the file the content is actually not there it's only a reference to that file or to the part of the file that you want to show and this

is what actually Excalidraw and Obsidian does for most of the parts or practically all the time I don't embed the objects you create or the images you add to Excalidraw they are not in the Excalidraw file they're always

transcluded from somewhere within your Vault now there are some differences here that might make this a bit more confusing so you can have two types of transclusions you can have interactive transclusions and these are called

embeddables and then example would be a YouTube video or the web page so the examples I showed in the beginning are interactive transclusions that are called embeddables sometimes they are also called I frames though I'm trying to get rid of that terminology and use the word embeddable

consistently so those are the interactive transclusions and you have static transclusions for example these images like this TV set here with the infinite cycle of TV images

nested into one another that's a set of static transcluded images of icons or this is a transclusion here as well a static image that you can see the keyhole with an image behind the keyhole so that's the static transclusion when you embed and

again I'm using this word and you'll see why I'm mixing up transclusion and embed so so easily but so static transclusion is when you place an image and you display it in Excalidraw and and it doesn't move

you cannot interact with it and finally you have nesting and nesting is really a static transclusion the reason I talk about nesting separately is because one special feature of Excalidraw in Obsidian is you can deconstruct or decompose

parts of an image and show you again in a moment and you can do that several layers deep you can sort of create Excalidraw pieces and as a set of Lego pieces that you build into components and then work with those components as a higher level

Lego piece you can build up images um several layers deep so we'll see that in a second but essentially I use nesting here as the static transclusion of Excalidraw images within Excalidraw and I call it nesting because it can be

several layers deep and then let's move to the final concept here which is embedding and by the dictionary embedding means saving a copy of an object within another file so in this case when when you embed then you can

actually delete the original object and everything will be contained in the place where you embedded it on Excalidraw.com when you place an image when you copy an image on Excalidraw file that image is going to be

embedded in Excalidraw the same here if I export this page as an Excalidraw file then the images are going to be embedded and in that case the file is fully self-contained with all the pieces however and that's also images are

embedded when you export to any image format then of course now this only really is Meaningful when you export SVG files because bngs are just bit Maps but so that's embedding now in Obsidian Excalidraw this is practically not supported

and it's not supported for a reason and the reason is that Excalidraw files are markdown files and when you embed images images are typically large files I can embed images there are ways of encoding image files that they can be placed in

markdown files but the markdown files become big and Obsidian the indexing engine in Obsidian then the whole environment is not designed to handle super large files and for this reason and also from a PKM perspective from a a

linking and thinking perspective it's actually counterproductive to embed images because that will limit the reusability in instead I have the image object or the video object and I keep it separate from the drawing it is only

transcluded reference in the image but as I mentioned embedding is the default behavior on exito.com and so now you can hopefully start to understand why I'm confused with these terms because essentially in Excalidraw Obsidian

transclusion is equal to embedding or I can use the terms interchangeably because there is no real difference you can see here that embedding is pretty much not supported only for image types and only when you export to the Excalidraw file format so that's what this commment

says here so essentially in Obsidian there is no such thing as as embedding but only transclusion however I find that people get confused with the transclusion word because it's unfamiliar and therefore I usually

resort to an easier term edding but that's actually a wrong way of using the word embedding so hopefully this doesn't confuse you completely but makes the topic slightly clearer but I think let's just take a look at the examples of how

this would work so the linking is super simple I can very easily link there are many ways to link I can just simply rightclick and I can insert link to file and I'm just going to insert really whatever so when choosing

colors use the RYB wheel this is a Zettelkasten note and when I do this you can see that here I have the the text itself if I double click on this then you can see that this is actually a Vicky link to the file and this is the name of

the file and here you can see the link indicator with the same link now the way um this works this works exactly the same with any type of file I'm not going going to show you all the different type of files because any type of file I can

very easily link with insert link to file now equally if I have an object and I'm going to have this rectangle here when the rectangle is selected I can again rightclick and select insert link to file and when I do this the same popup

comes up I could search for any file here but I'm just going to go with one from the list because here we are really just trying to demonstrate how the linking works when I do this then you can see that this markdown link was

added to this note and therefore I have my link there now the tricky bit is if I come to this text element and I would insert a link to a file just like with

the rectangle I could actually do that so I can choose a link and I'm going to choose a Tre map classifying and organizing ideas and things and so you can see here that the there was a message that no you cannot do that

because this already has a link so a new link was uh created here so the point is that if you have a text element always the text link so the link in the text takes precedence over the link in the element link

feature and if you have a text link and an element link then the text link will overwrite your element link on the text element this is not the same with rectangles because of course the rectangles only have element links now

links can also come from external to Excalidraw so for example this is my YouTube channel if I drag this in here then this is just simply going to insert the link now you can see that this link um automatically converted to a text

which in this case is not very helpful because yeah frankly I I I think this comes from I don't know where the why this is the text I will need to double check that there is a feature in Excalidraw that if the web page

has a title then there's an external service that I'm using to um convert the link let's just take a look at plugin in settings so if I come to Excalidraw

plugin settings here and I scroll down to links transclusions and todos I think this is this is the one then I need to scroll down and look for IFramely here you go so use IFramely to

resolve page title so when this is turned on then when you drop a link into Excalidraw then the if Fram service is opened and the value I get back from IFramely is the text that you can see here so this name here before

you continue comes from IFramely frankly I don't know why this but in case of other Pages this is use usually a meaningful title but you can also turn off if frame and in that case when I drag a link in here then it's just

simply going to be the normal web URL now I can also add links here from my my file system so if I come here I can just simply drag any file

here and I have all sorts of all sorts of options so here I need to press on Windows control to insert a link with a local URI and you can see

here that this URI to this element was inserted by the way where do you find what modifier keys to use you can come to again plug-in settings and in plugin settings you can come to EXC color appearance and behavior and here scroll down to

link click and drag and drop modifier keys and here you can come to OS local file drag action and here you can see this is the insert local URI that was the control button but that's why I have so I'm not sure you

not this but as I drag it here there's a hint there and as I press different buttons or combinations of modifier keys I get different options on screen and I know what's going to happen then I let the mouse button go and finally I

can also drag and drop items from the file explorer so this is the Obsidian File Explorer or from the recent file so if I drag this here then by default it's going going to be a link so now I added a link to the swap analysis file so I

think in an Nell that's all about linking to uh different type of objects so I'm going to just delete these now let's look at transclusion so this is the tricky part the easy one is to transclude an

image my favorite is to use the insert any file function and here I'm just going to type picture Midjourney so I get uh a one of the the pictures that I created on Midjourneyh so let's for example insert this

picture as an image and there you go so I inserted this I transcluded this image so so how do I know this is transcluded a because you cannot embed in Obsidian Excalidraw but if I control click on this then here you can see that I can open the

original file it's here in my practicing stoic book folder I can just simply click on this and then the file is opened and I have the uh reveal active file plugin installed so if I have the active file

here I click on this then it will reveal it to me in the file explorer so you can see that this image comes from my Obsidian file system and I just simply transcluded it here also you can notice when I control clicked on it then I also

have a second order link and sometimes there are many second order links here the idea is that you can navigate between ideas by way of using the same image and in this case I can immediately jump to the second order link I could also just open this file and then look for the

backlinks and open the next file but so this is what I mean if I control click on this let's do that first and I look at backlinks then you can see here that I have these two files so I have uh everything that is beautiful

here but I can also get to that drawing if I control click on this then you can see here that I have a second order link to everything is beautiful and then

here's my illustration for that uh uh idea so that was then I transclude an image I'm going to delete that that now I can also transclude an Excalidraw

document and the way I'm going to do this to demonstrate a couple of things is I'm going to first create a simple drawing here uh let me just uh so this is going to be a sun let's just make it maybe yellow like that and I'm going to

uh create create uh mountains here like this so this is going to be a super simple uh image and what I'm going to do is the way I'm going to make this into a file of its own that I can transclude is I'm going to use a script it's the it's

the pizza slicer by default the icon is not here it it's you need to install it from um Excalidraw dra scripts and it's called the the construct selected elements into new

drawing script and it will also appear here uh in the tools panel right here under downloaded but I I have pinned it here uh by just long pressing on the button but that's not the topic of our discuss question now so I'm going to deconstruct

this image and I'm going to call this uh Mountain just like that and the way I'm going to insert this is I'm going to uh use my base template and I'm just going to insert it and open the image on this side so then this image is transcluded

then of course if I come here and add some something to the image I'm going to add this snow cap uh to my image like that um we'll leave that color if I come back to this other image then you will see that that snow cap is right there but

equally what I can do is I'm going to uh create a vehicle here a small uh car so I'm going to uh just draw a very uh simple uh vehicle here um I'm just going to do it like this so this is not the most

beautiful car that I've ever drawn of course if I come back you will see that that vehicle is of course right there but I can deconstruct this vehicle into a next drawing so that's what I'm going to do I'm going to call this uh

car and I'm going to insert it like that now let's move this here to the let's sorry for that let's open the original drawing as well and move it to the left so you can see everything so now what happened is this

car is no longer editable here because that's a transcluded image and if I change my car here here on the side and the way I'm going to change it is just make the tires red like this then when I come to the next image it's going to be

updated to reflect that and now in the background I saved I pressed controls on the mountain so otherwise this next image would not be alerted that it's updated if I would close and reopen it it would so now it was just for

demonstration purposes but if you want to try this then note that on the mountain I press control s so there's a refresh and this uh third image is notified that it needs to update but the point I'm trying to show you is this is

the nest thing that I'm talking about that the image here on this drawing is actually a reference to the image here and and this has a reference to this image and of course if we draw a person here uh driving the car uh maybe like

this so this is going to be our guy uh driving the vehicle um then of course that person is going to appear on my next image again I'm pressing controll s so it will transpire to my last image and so this is the idea about uh nesting multiple levels of

drawings so that's about nesting there's a feature about nesting at 100% I'm not going to go into that now um there's many reasons why you would want to do that I recommend you experiment with that but uh you can

also embed or trans clude different type of documents so I can simply transclude markdown documents so the way I would do that is I would open insert any file and

I would pter five forces that's a good document to embed now I have two options here I can when it's a markdown document I can either transclude the file as

an embeddable or as an image if I press as an embeddable then you can see here that an actually an interactive frame was inserted and I can go ahead and edit this document right here and so that's when I insert an embeddable but what I

want to show you is if I take this embeddable that's why this is red here because embeddables cannot be nested so let's take this and I'm going to uh place this on the clipboard so I'm going to cut this from here I'm going to open

this mountain image uh right here and on the mountain image I'm going to add this embeddable and I'm going to shrink it very slow small so it fits uh somewhere here that it doesn't uh become uh overly big so you can see here I have

my Porters F forces by the way the way I resized this was I held down shift and when I resize with shift then it will scale the image if I just resize like this then you can see that the area becomes smaller and and the text Remains

the Same Size so then the way I I resize it um I will be able to show less content if I shift resize it I I scale it then I I it will be smaller and still the same amount of text fits but anyway put that aside so I've added this uh

interactive frame here but now if I come back this is going to be updated but you can see here that the markdown document will appear as a gray box and that's currently um well it's actually you could say it's

a feature I have some ideas of how to address this but there's many reasons why uh it appears like this that I don't want to bore you with but there's another option uh that you can do and I'm going to delete Porter's five forces

from here okay so I'm going to transclude my summary of emergence and I'm going to uh transclude maybe the mid the the the introduction section as an

image so what you will see here is now this is a markdown document that's transcluded as an image and let me just uh make this okay so that was not uh let me just make this smaller like this so I have my

transcluded markdown document as an image of course now this is not scrollable this is just a view of the document you can modify some of the parameters of this on Windows it's control windows click and then here I

can add a width and a height to this document I'm not going to do that what I want to show you is now if I come back here then you will see that the gray box will be replaced with this image of the markdown document so if you want to

embed a markdown document such that it will be visible on the next layer and the next layer of the Excalidraw drawing then you can can embed it as an image instead of an embeddable and when you do that then it

will actually be displayed as an image again we could talk hours about this I just want to get the basic idea across now you can also uh embed a section that's actually what we did here and what we did previous so if I come

back and again I uh embed summary emergence I can also select the Myth of the Ant Queen and maybe this time I'm going to embed

this as an embeddable then you can see here that this becomes a a markdown document but only with a reference uh to this uh very section now uh what I could also do is I

could copy this link right here so I'm just going to place this link on the clipboard I'm going to delete this and delete this and come back to my main page I can also add this link so this is now a reference to

this section right there I'm going to um resize this like this so it starts to wrap when I resize the text element then it's going to wrap the text because what I want to do is I want to put an exclamation mark here and this is going to

transclude the document as a text element here so here now you can see that this is this it's not the most beautiful uh markdown uh text that you can see here but what you can see is how this uh text the text from this section

the Myth of the Ant Queen this section of my summary of emergence was transcluded here as plain text now in this case this might not look uh super valuable but here's an interesting use case that you can do I can add add a

text element here so I can and by the way so we are now down here so we looked at how we can transcluded as an embeddable as an image but also as a text but uh let me show you one interesting thing so an Excalidraw drawing is also by default a

markdown document so in a markdown document you can transclude um a text element so this is my text element and now we're going to first I'm going to show you a feature and then

we're going to look under the hood so you understand what this feature is so the feature I'm going to show you is I'm going to copy the markdown link for this element and I'm going to just simply click uh on the link now it's on the

clipboard board and I'm going to come here and simply um press the exclamation mark and press space and with that I've inserted this element right here so you can see that if I change this text here maybe I'm

going to add two exclamation marks at first it seems nothing happens but when I press contrl s that automatically refreshes the page and this text element was updated so this now has two features a if I click on this link it takes me to

the uh original place in the document but B if I change the text here it will change here as well why is this good for example you're doing uh some uh process modeling and you have an actor or an activity a system

something in your process model and you want to call it the same way every place then instead of typing in the name every time you can add the link what's the benefit the benefit is if you need to change it you need to change it in one place and it will automatically change everywhere else but let me show you

what's under the hood so this is our text right here I'm now going to open this document in markdown View mode mode so open as markdown going to close this and open this right here and under text elements you can see here I have lots of

text elements because on this page I have lots of um text but you can see here that here's my first of all this is my reference to that text element so this is the second element I embedded that was a link to the original element

and what you can see here is each of the text elements have a block reference and an ID that I can use to reference this piece of text of course in other markdown documents but within excital as well mind the

gap um and this is a special feature just want to show you that in case someone is actually um using this feature let me okay close this so this is my GPT discussion to clarify

the terminology um you can add markdown comments here to hide the Excalidraw data section but when you do this then Obsidian will stop indexing the

text elements that you have here so the effect is going to be that when I open this page then this no longer reads as the text element but only as the link and that is because I'm using the Obsidian metadata indexer to get the

content of the text element and because this is now a markdown comment then it's it's no longer visible if I come down here and remove the comment section and switch back to Excalidraw view mode then voila my text element is back because

now the element is indexed again so hopefully that was not too much detail so we talked about markdown Pages sections and blocks and then they can reference videos I have no videos in my Obsidian vault

but it works exactly well maybe I do have so let's see MP4 I do have some videos here so if I want to reference I have no idea what the Angry Bird video is I can reference

it as an embeddable like this and then this is now from my Obsidian VA so you can see I could also control click on this and then it would open open in a new tab and I'm going to just uh mute this and start it and so

then yeah this is me drawing an Angry Bird on my iPad so you can see here this is how I drew that Angry Bird anyway so you can embed videos as embeddables and again if you embed a video as an embeddable in an Excalidraw drawing and then you

Nest it into an another one then the video is going to be great out now going on you can also do similar things from the web so it is really extremely similar so from

the web I can take a YouTube video and embed it so now I'm going to um share this and copy a link like that if I come back here and just simply CTRL+V

paste the link then the video uh is embedded now I can also embed the video as a thumbnail image so here I'm going to drag this over here and if I just drop it like this then this is going to image the insert the YouTube thumbnail

with a link to YouTube so and it seems that there is something why doesn't this work this it works I I something was up with the location so if I drag this in

here and I drop it it's interesting that for some of the videos there is no thumbnail for the newer one there is I may have found a book here let's see yeah for the newer videos I do have a thumbnail image for the older ones not

I'm going to investigate why but the point is these are now not interactive if I want to embed this as interactive then I need to copy the link and I can paste it and then it's going to be an interactive video in this case this is

embedded as the YouTube thumbnail image and then you can click the video if you want to save the thumbnail image to your Vault for safekeeping then you can rightclick on this image from the web and save image from URL as a local file

so you can download this image and save it in your Obsidian vault which is good again if you think about the long term then you actually want these imag images in Obsidian finally and of course you can also embed web pages so here I'm

going to just simply open Obsidian MD as my example and I can drag the web page in here and the basic drag and drop action is to insert it as a link and if I then uh press control shift on Windows then it's going to be inserted as an

interactive file which practically means this is going to be inserted as a web page so that's uh I think the way how you can get web pages in and finally from your local file system you can uh embed images so for example here I have

this image I can import external file or I can insert image with local call Uri this is what I want to do so the import external file will copy the external file into my Obsidian Vault the insert image with local URI

so on Windows I need to press shift uh you need to play with these modifiers ke see in your environment which is the right key and in settings as I showed you before you can configure this if I hold down shift and let let go of the mouse button then this image is now referenced from my local

drive I can see some use cases for this however if you use your Vault on multiple devices then this is not going to this image is of course not going to be there when you move to another device unless you synchronize your entire file

system to that other device and also the these uh local file references do not work on Obsidian mobile which means Android and iOS and tablets and

phones so on iPad or on your iPhone this local file reference so we are talking about this here this is not going to work and I think I'm not going to show you but so of course you could drag I

don't really have an example here uh a document or something like that and if I would do that then of course it cannot be embedded you will have a link and when you click it then you're prompted to open it uh in the native app and so

you can do that and finally embedding as I said for the most part Excalidraw Obsidian does not support embedding if you come here export image and you select export to uh excetra and I'm actually going to export image

outside your Vault I'm going to export the entire scene to excit so then I can uh save this file right here I want to show you two things first off I can show

you that now this image uh so this image now is almost 6 megabytes large and frankly I don't really have that I mean I have couple of images here but this is what I mean by these images becoming large and if I now

come over to exit.com I can actually open this downloaded image here and you will see that it sort of loads not everything loads so EXC colo.com does not support many of the web pages so for example my CH GPT web

page is not displayed here also the jumping monkey was a local GIF and that is not included because it's an embeddable and let me show you that so that maybe something we haven't yet talked about but other than that uh some

of the images were actually uh embedded and they appear uh in the file and in this case these are embedded whatever is not gray is embedded in this file whatever is gray is of course it's just a gray box but so let's just look at our

jumping monkey as our last uh topic so the jumping monkey JF is actually if I insert it as an image then I get a static image so the way Excalidraw handles images it will not move and if I now would export it and

load it in EXC colo.com then a static image of the monkey would be there but I can also embed this uh gif as a as an embeddable and then my monkey is embedded and I think if I change these colors to transparent

so the there's a bug that I observed that if this is transparent then transparent translates to a dark color so I need to set this a um a light background color and now you can see that I've imported my uh monkey here and it's nicely jumping up and down

because it's an inter it's an embeddable uh and this image is actually not an image here but a it operates just like an embedded markdown file or maybe a video from your Vault and as such this is going to

appear as a gray box when you Nest Excalidraw into something else so I think that is enough for today um you can I guess from this uh amount of conversation you can see how this is a pretty long and complex

topic but the key takeaway is linking of course is simple you can link from your Vault from the web and from your local file system and you can use

markdown links Wiki links and as well as URL so HTTP um links transclusion is what Excalidraw drawing Obsidian does for the most part when you uh Place images and other objects into Excalidraw these are always

stored somewhere else not in the Excalidraw draw file but if you you export it then you can actually package everything into a single file and finally embedding is when you have you store a copy of the file within the Excalidraw file this is not

really supported by Obsidian Excalidraw and that is because of a reason so it's very deliberate choice on my uh end and I have lots of reasons many of them I didn't mention here but I think it's just not good practice to uh

embed and so those are the options and I really hope you found this video helpful I recognized that I was rambling a bit and I didn't really prepare that much for this video I thought um this is going to be more of a long vended

explainer video I hope you found it helpful well you're if you're still here then I guess you did and I hope to see you in my next video thank you