Connecting Visual Notes With Obsidian Excalidraw  ## Metadata - Author: [[Nicole van der Hoeven]] - Full Title: Connecting Visual Notes With Obsidian Excalidraw - Category: #articles - Document Note: --- tags: [#NoteTaking, #ObsidianExcalidraw, #VisualNotes, #HybridNotes, #NoteLinking, #Productivity] Author: Unknown (YouTube Transcript) Source: Connecting visual notes with Obsidian Excalidraw (YouTube Video) Reference: [YouTube Video](https://www.youtube.com/watch?v=lGh53N_Lj2Q) date created: 2024-09-12 14:23 --- # Title: Connecting Visual Notes with Obsidian Excalidraw ## Table of Contents: 1. [📝 Summary](#📝-summary) 2. [📖 Main Content](#📖-main-content) 3. [🗒️ Notes](#🗒️-notes) 4. [📖 References](#📖-references) 5. [🗣️ Paraphrase](#🗣️-paraphrase) 6. [📰 Newsletter](#📰-newsletter) 7. [✅ Action Items](#✅-action-items) 8. [🧪 Hypotheses](#🧪-hypotheses) 9. [❓ Questions](#❓-questions) 10. [🔮 Future Research](#🔮-future-research) 11. [🧠 Learning Styles Assessment](#🧠-learning-styles-assessment) 12. [📊 Accessibility Assessment](#📊-accessibility-assessment) 13. [🌍 DEIB Assessment](#🌍-deib-assessment) 14. [✅ Logical Validity](#✅-logical-validity) 15. [🔍 SEO Evaluation](#🔍-seo-evaluation) 16. [🎯 Conclusion](#🎯-conclusion) ## 📝 Summary: This video tutorial explains how to connect visual notes using the Obsidian Excalidraw plugin. The presenter covers various methods to link and embed visual notes alongside textual content. It focuses on creating hybrid notes that combine text and visual elements and offers guidance on utilizing SVGs for embedding to ensure visual notes are future-proof. ## 📖 Main Content: The video begins by discussing the value of connected notes in note-taking systems and the unique challenge of connecting visual notes in Obsidian. The presenter demonstrates creating hybrid notes with both markdown and drawings using the Obsidian Excalidraw plugin, embedding visual components alongside textual content. - Obsidian allows for linking textual and visual notes similarly, offering the option to display either the visual or textual side. - SVG files are recommended for embedding visual notes, as they maintain plug-in independence and can include clickable links, which are beneficial for publishing. - The presenter introduces methods for embedding text within visual notes and linking specific sections or elements of drawings, similar to block references in textual notes. - The video ends with a demonstration of visualizing note connections using the Excalibur plugin. ### 🗒️ Notes: - **Hybrid Notes**: Combines markdown with visual notes in Excalidraw. - SVG is preferred for future-proof visual notes. - Embedding allows links to both text and visual elements. - **Embedding Visual Components**: Options include embedding the whole note, text, or visual sections. - Linking and referencing images/parts of drawings via areas or groups. - Auto-export of SVG is recommended for long-term flexibility. - **Note Visualization**: Excalibur plugin helps visualize connections between notes, showing how notes (textual, visual, and hybrid) are interconnected. ## 📖 References: - YouTube Video: [Connecting Visual Notes with Obsidian Excalidraw](https://www.youtube.com/watch?v=lGh53N_Lj2Q) ## 🗣️ Paraphrase: 1. The video explains how, just like textual notes, you can connect visual notes in Obsidian. You can link either the visual or textual side of hybrid notes, providing flexibility in how you reference different note types. 2. Visual note embedding is best done using SVG files because it maintains plugin independence, meaning that even if the Excalidraw plugin becomes unsupported, the SVG images will still function properly. ## 📰 Newsletter: In this issue, we explore how to enhance your note-taking workflow by connecting **visual notes** in Obsidian with the powerful Excalidraw plugin. Whether you're a developer mapping out systems or a visual thinker organizing your ideas, you'll love the flexibility of hybrid notes. Learn how to embed SVGs for future-proof notes, and discover tips on linking both text and visual elements seamlessly. Also, stay tuned for updates on the latest plugins and community happenings in the WordPress space. Full tutorial available [here](https://www.youtube.com/watch?v=lGh53N_Lj2Q). ## ✅ Action Items: - **Alignment with Professional Focus**: This tutorial directly aligns with my focus on empowering open-source and WordPress communities by showcasing an advanced note-taking system using Obsidian. The ability to seamlessly link visual and textual notes allows contributors to capture complex workflows, enhancing collaboration and understanding, crucial in open-source development. - **OSPO Alignment**: This example could support knowledge management practices within an OSPO, improving the way information is documented, referenced, and shared, fostering a transparent and collaborative environment. ## 🧪 Hypotheses: - Embedding visual notes alongside textual content increases retention and understanding of complex concepts in technical documentation. - SVG-based visual notes will maintain long-term viability in open-source projects, even if specific plugins are no longer supported. ### 📊 Methodology: - **Surveys**: Gauge user comprehension before and after using hybrid notes in a development environment. - **Comparative Study**: Test the durability of visual notes stored as SVGs across various platforms and without plugin support. ### ❓ Questions: 1. How can hybrid note-taking improve collaboration in open-source projects? 2. What are the long-term advantages of using SVG over other image formats in note-taking? ### 🔮 Future Research: - Further exploration of how linking visual notes enhances productivity in software development. - Investigate methods to optimize visual note sharing in collaborative, open-source environments. ### 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)**: - **Present**: Visual notes (drawings, diagrams) cater directly to spatial learners. - **Improve**: Adding labeled diagrams and flowcharts to guide users through complex systems. 2. **Aural Learners (Auditory-Musical)**: - **Improve**: Include audio guides or video walkthroughs to support auditory learners. 3. **Verbal Learners (Linguistic)**: - **Present**: Textual explanations and detailed walkthroughs accompany visual notes. - **Improve**: Offer supplementary readings or additional explanations for complex concepts. 4. **Physical Learners (Kinesthetic)**: - **Improve**: Suggest hands-on tasks such as building personal visual notes or customizing templates. 5. **Logical Learners (Mathematical)**: - **Present**: The structured, logical organization of hybrid notes appeals to analytical thinkers. 6. **Social Learners (Interpersonal)**: - **Improve**: Create discussion forums or collaborative note-sharing opportunities. 7. **Solitary Learners (Intrapersonal)**: - **Present**: Individual reflection and organization within a personal vault. 8. **Naturalistic Learners**: - **Improve**: Introduce more environmental analogies or sustainability-related examples. ### 📊 Accessibility Assessment: - **Screen Reader Compatibility**: Textual components of hybrid notes are accessible, but ensure all visual elements include proper alt-text. - **Keyboard Navigation**: Ensure navigation of Excalidraw drawings via keyboard is optimized. - **Contrast and Readability**: Ensure color contrast is sufficient for users with visual impairments. ### 🌍 DEIB Assessment: - **Cultural Relevance**: Ensure note examples reflect a diversity of perspectives. - **Inclusive Language**: Use clear, non-technical language to avoid alienating non-experts. - **Neurodiversity Support**: Break up long blocks of text with more headings and bullet points to improve clarity. ### ✅ Logical Validity: The video offers sound reasoning with practical examples and well-structured arguments. It provides a clear rationale for using SVGs and hybrid notes. **Logical Strengths**: 1. **Sound Deductive Reasoning**: Linking visual and textual notes logically increases flexibility in note-taking. 2. **Appeal to Facts/Evidence**: Provides concrete examples of how hybrid notes function. ### 🔍 SEO Evaluation: - **Keywords**: Effective use of relevant terms like "Obsidian," "Excalidraw," "hybrid notes," and "SVG." - **Meta Description**: Ne - Document Tags: [[excalidraw]] [[obisidian]] [[pkm]] [[second brain]] [[security]] [[sketchnotes]] [[visual notes]] [[zettlekasten]] - Summary: Nicole van der Hoeven explains how to connect visual notes using Obsidian Excalidraw. She demonstrates linking and embedding both visual and text components of notes for a hybrid approach. This method enhances note-taking by allowing users to visualize connections between related notes. - URL: https://www.youtube.com/watch?v=lGh53N_Lj2Q - Whether you call it Zettel-Kasten or Second Brain or Atomic Notes or whatever the latest weirdly named methodology for note taking is. There's one thing that every such system has in common, connected notes. But the problem is that they're all assuming that those notes that you're connecting are in text. What if they're visual instead? Well then it gets a little bit tricky. In this video, I'm gonna talk about different ways to connect visual notes linking, embedding whole notes sections or parts of those notes, and then also visualizing those links. And I'm gonna be doing all of that in my visual note taking tool of choice, which is the Obsidian Excalidraw drop plugin. There are a few other ways to create visual notes in Obsidian in the first place. You can import images, you can use Canvas, which is an Obsidian core plugin. You can use Mermaid, which is a JavaScript library, and also natively supported by Obsidian. But really the thing that I use the most often is the community plugin, Obsidian Excalidraw. And so that's what I'm gonna focus on. And I'm gonna be talking more specifically about using Excalidraw as hybrid notes, so notes that have both marked down and drawing sides to them. Here's a video on that where I go a little bit more into detail about why you might want to do this and how. Let's talk about linking and embedding hold notes. This is my Patreon vault that I'm going to be using to demonstrate this. You can get access to it by joining my Patreon over there. So I already have my hybrid template for Excalidraw set up here. So I'm just going to create a new note and I'm going to call it note A. And I'm holding down the shift key and then I'm hitting enter, and that automatically takes the hybrid note template. So there's no SVG yet. So I'm going to flip over to the other side. So I'm just going into Excalidraw draw here. I just want to put some element here just so we can see something a little bit more visual. I'm gonna force the save on that by hitting Ctrl S. And then I'm flipping back over to the markdown side and this is embedded. Now this is the point that I got to in my previous video. So really go ahead and watch that first because otherwise there's a lot that I'm skipping over here. So let's say that I want to create a different note and then link to this note from that. Well, the good news is that just because it's visual, doesn't mean that you have to link to it any differently. So if I have another one, I have note B, let's say. Now, let's pretend that this one, I just want it to be a textual one. I can just put note A here. And when I hover over it, I'm gonna see by default the visual component of it. But what if I wanted to be linking to something that was on the markdown side? So let me open this up here and put more here. So let's say this is another heading and some text here. All right, so now we've got two versions, two sides of this note, this one with a blue diamond and this one with text here. But what if we want in note B to be shown specifically the markdown side? Well then we could go in here and then we could add that section heading so that we are going directly to this heading. And if we wanna remove this like hashtag thing, then we can just put note A still. And then when we hover over it, what we're seeing now is not the visual side, it's the text side. So in this way you can decide, which side you want to link to, text or the visual. In the same way, you can add a exclamation point here and embed either to the text or the actual visual side. So I'm gonna remove this part, and by default without anything else, what is embedded is actually the visual. So you saw that when you use the syntax to link or embed a note, it's gonna show you the visual side first. So you might be wondering if that's so, then why have I previously talked about embedding the SVG? There are actually three different ways that you can link or embed a visual note that's marked down, which is a standard way that you would do that with any other textual markdown note or PNG and SVG. Now those two are image formats. Personally, I would recommend that you go for the SVG option. I think that SVG provides the best balance because it's an image format, so there's more plugin independence. You see when you use a markdown embed, this only is showing the visual side because of Obsidian Excalidraw draw. If Obsidian Excalidraw draw were to go away, well then you would just see the text side, which you might not want. So instead, if you put SVG and I do have the auto export SVG setting turned on. So you can go into here and then go down to embedding Excalidraw onto your notes and exporting, and export settings. I would recommend that you go into auto export settings and have both auto export SVG and keep the SVG file name in sync with a drawing file. Both of these settings are important if you're going the SVG route. But the other reason that the SVG option is best in my opinion, is because it's also the best format, if you ever want to publish visual notes. This is a separate video. You can check out the Obsidian Excalidraw developer's video up here for that. But using the SVG file, will let you preserve any links that you have so they can actually be clickable when you publish them. So if you'd like to make your visual notes a little bit more future proof, and you want to reserve the option to maybe publish in the future, well then you should use the SVG option. So I just showed you how to embed the visual side of the note onto the other side, which is the text. What if you wanted to do the reverse? What if you wanted to go visual first and you wanted to embed the text into your drawing? So I'm going to just open up note A here. I'm gonna flip over to the Excalidraw draw drawing side. What if I wanted the text side of note A also in the drawing? Well then I would hit the command palette and then I'd start typing back of note. You'll see that I have a hot key set up. I recommend that if you think that you're going to be doing this a lot or you can just go to the command palette each time so that I'm gonna hit that. And then I can decide whether I want the entire note or if I want just a heading. I'm gonna say the entire note for now, because I think that might look good. And I can zoom out a little bit here. Now because I've got in the markdown side, I have the drawing that's showing up here. So let me remove that flip back over. And now you can see this is just the markdown. So I can make that smaller and you know, I can put that over there. So let's just make sure that that works. I'm going to open this up, I'll split it right. And then so this is the same note, just opened up twice so that I can show you both sides. And I'm gonna head over here. This should be on the drawing too. And as I'm typing on this side, you can see that it's also turning up here. It's really important to point out here, that having a visual component to your note doesn't replace a textual side. It just means that there's an additional option. So now when you link to or embed a note, you can decide whether you want to link to the textual side or the visual side. And I think that's really cool, more options is always a good thing. But a lot of times in Obsidian though, you're linking not to the entire note, but just to a portion of it. I already showed you that you can do that with the textual side, right? You can use just the section header. You can also use block references. But there's no such thing as block references for an image, because it is one contiguous thing. Or is it? Let's go back to our Obsidian vault here. So I'm gonna show you a really cool thing in Excalidraw draw that effectively creates block references for images. Well, let's put in a few more things. I'm going to add some more images. I'm not sure what I've got here. So yes, let's try chalk blue. I'm gonna put that in as an image, just so I don't know, I've got something else to play around with. Let's remove this part of it and then let's add a few more images. So let's, I don't know, add a sponge over here. Then maybe a bit of red chalk. Now, we've got something there. Let's say I just want this red chalk, and I want to embed this into my note here. Now as I showed you, if I just do Note A SVG, that's actually going to embed the entire thing. So what if I just want that little bit? Well, then I can go to the command palette and then start typing copy. Now there are a whole bunch of options for Excalidraw draw. It's kind of like how when you're trying to embed or link to a textual note in Obsidian, you have the option of embedding the entire note, the section of the note or a block reference. You can also kind of have those different levels for a visual note in Excalidraw. Except that those levels are areas, groups, and frames. The ones that you really are going to need to use are area and group. So that's what I'm gonna talk about. As you can see, the one that I use the most often is area, and that's why it's the one that is hotkeyed. So I'm gonna select that now. I am going to type red chalk as the link alias, hit Enter, and then I am going to put that here under Area. And as you can see, it didn't just take the chalk, it took everywhere that the chalk is. So if I move the chalk so that it is here now and it is between this blue chalk and the diamond, I'm gonna hit save, and just then it refreshed. And now it is basically taking wherever that chalk is in the image. And that's so cool because it's tied to the red chalk and not like coordinates of the image or anything like that. So it is really more like a reference to that particular section where the chalk is, not the chalk itself. If I wanted to do just the chalk itself, what I would actually choose is the copy group one. Now this works with one element or a group of elements. Let's try this with just the one element right now. And I'm gonna say chalk group. And now I'm going to put it under the group section here. And as you can see, only the chalk is being shown, even though there is actually a background of this blue diamond. If I wanted to move this over here and then now I can select these two chalks and group them together. So now I can actually move them around as if they were one thing. They're two elements, but they're grouped together. I'm gonna hit control save. And you'll see that this change that too. So this changed the area because the red chalk, which is what it's still looking for in this area, is now next to the blue one. But this group one has also changed because it's the same reference. So now it's seeing it as the one group. So what if I ungroup that selection and save it? Well now, it's still only picking up the single element because Excalidraw is now recognizing it as a single group. But in the area it's still taking the surroundings of that chalk. And so, you are seeing still the blue chalk. Now maybe this is a little bit airy fairy, like why would you need to see this with blue chalks and red chalks? So let's look at a real life example. So this is a note from my personal vault. It is from a role playing game session that I just played last night actually. So this was in the Dagger Heart system and it is a hybrid note. So I've got the Excalidraw draw drawing here. Let me flip to that so you can see what it looks like. So it's got a bunch of stuff here. This is all made in Excalidraw draw, I imported some of these drawings. Now if we open this up in a separate pane, then I can show you the visual note on one side and then the textual note on the other. If we go and scroll down to this note, you'll see that it is, there's a lot of text in this note. And what was happening was while we were going into this dungeon, I was sort of drawing things out. So it was all in our imagination, there was no actual map. So while we were going into each room, I was kind of quickly diagramming it in Excalidraw. So we went into this first room, which was a corridor of smoke, and I was moving us along this path while we were going. And for this, I grouped this entire thing so that every element here is now one group. And I did the same thing that I showed you and then I embedded it here. This is a group, that's because I grouped all of these elements together. This is a nice way of packaging up this entire area. But if I wanted to not have this group, I could ungroup this selection and then I could just move around certain people. So let's say this was my character, character actually Lavana. So if I wanted to just copy the area one for that, I could do that, and then I could paste that in there. And now I'm showing the area where Lavana is. So if I move her over to the ladder, let's say, and then save that, well these will change as well. So now she's in the ladder, but she was actually here. So let's go back there and then group again, this entire selection because it is just one contiguous room. So let's remove this. The one thing with Dagger Heart is that there are some things that you need to keep track of. So I was keeping track of these two things. I had a nail gun and was tracking the number of nails that I had in that gun. And in this game, you also have to keep tracking the fear and actions. So I was moving this around as we were going. So I had moved it, you know, over from one room to another, but I still wanted to be able to refer to it. So what I did was I used a group link so that this is all just one contiguous group. So really it was separate elements, but I grouped them like this by selecting them right clicking and then hitting group selection. And then from there it was just a copy group one. So then I put that here, and that's how I made that little tally. Now the cool thing about it is now if I change that, so let's say there's one on the action tracker, hit Save, and this is going to update too. So now it took a second, but it still did update the actions here. So let's say we were in the gate of laps, which was the gate that we exited out of. Let's say I wanted to embed just this little thing. I'm not sure what that is. What I could do is, even though it's not an element on its own, like I can't move around that little cat thing, I could just draw something around it and then I could take the area of this. Because remember, it doesn't really matter if it's just the element. If I choose area, then I can still get that whole thing. So I use the hot key, and I'm just gonna type in cat thing. And then I'm gonna paste that and now I can see the area where that cat was, even if it's not actually an image, it's only part of an image. This really opens up the possibilities for referring to bits of images, bits of visual notes, as if they were sections in a textual note. It hasn't always been this way, but we're finally at the point where you can actually have a mixture of textual and visual notes and maybe even some hybrid notes and not be restricted about how those are linked. Linking notes together helps you find related notes more easily and also just create more meaningful notes, just in the process of wondering how they're connected. The next part though, is making sure that you have a way to visualize those links and connections. You can do that by using ExcaliBrain. ExcaliBrain is actually made by the same person, the same developer who made the Obsidian Excalidraw drop plugin. And I'm going to show you that quickly by opening up the command palette. It is a community plugin, so you can install it the same way as usual. And then I'm going to hit ExcaliBrain Normal. And that opened up in another window here, so let me put that on this side. And this is what that looks like. So let me put it side by side so you can see it. It is starting with this very note and it's also visualizing all the links that are going into and out of it. So you can see not just the text parts, you can see the different images that were on there. These SVGs and PNGs were there. The text that's in white are notes that actually weren't created, but I still link to. And the text and the nodes that are in blue are the ones that actually exist. So if I just hover over that, this is using the hover editor community plugin, I can see that this is linking to an entirely different note. So once you start to have visual textual and hybrid notes and then you have links going between them, I would really recommend thinking about how you're going to visualize those links. And I think pretty much the only solution for that right now is the ExcaliBrain plugin. If you'd like to hear more about that, then check out this video where I go a little bit more into the details of getting started with Excalidraw, 'cause there's a lot to take in. Thanks for watching. (speaker speaking in foreign language), Connecting Visual Notes With Obsidian Excalidraw, Nicole van der Hoeven, 01j6jmzf4fy7mxzw5m7f9jq7zq.