Connecting Visual Notes With Obsidian Excalidraw  Full Document Contents/Articles/Connecting Visual Notes With Obsidian Excalidraw.md, Connecting Visual Notes With Obsidian Excalidraw, Nicole van der Hoeven. > [!note]+ Document Notes > 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 > <!-- deep-read:sections start --> ## 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**: Needs improvement; suggest: "Learn how to link visual notes in Obsidian with Excalidraw for powerful hybrid note-taking." - **Headers**: Clear, but more H2 and H3 headers could enhance SEO. ## 🎯 Conclusion: Hybrid notes using Obsidian Excalidraw offer a flexible and future-proof method for combining visual and textual content. By embedding SVGs, linking elements, and visualizing connections, users can organize their notes in meaningful ways, enhancing their productivity and collaboration. Short Summary for [Connecting visual notes with Obsidian Excalidraw](https://www.youtube.com/watch?v=lGh53N_Lj2Q) by [Merlin](https://merlin.foyer.work/) Title: "Visual Note Connections in Obsidian Excalidraw: Linking, Embedding, and Visualizing Hybrid Notes" [00:02](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=2) Connecting visual notes in Obsidian using Excalidraw [02:09](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=129) Visual and textual notes can be linked and embedded in a similar way [04:30](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=270) Embedding visual notes with Obsidian Excalidraw using SVG format [06:56](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=416) Visual notes in Obsidian can be linked alongside textual notes [09:22](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=562) Excalidraw allows embedding visual notes as areas and groups [11:50](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=710) Grouping and ungrouping visual elements in Excalidraw [14:18](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=858) Grouping visual elements for better organization [16:51](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=1011) Visual and textual notes can be seamlessly linked and visualized in Obsidian using Excalidraw. [18:53](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=1133) Check out the video for more details on getting started with Excalidraw --------------------------------- Detailed Summary for [Connecting visual notes with Obsidian Excalidraw](https://www.youtube.com/watch?v=lGh53N_Lj2Q) by [Merlin](https://merlin.foyer.work/) Title: "Visual Note Connections in Obsidian Excalidraw: Linking, Embedding, and Visualizing Hybrid Notes" [00:02](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=2) Connecting visual notes in Obsidian using Excalidraw - Discussing different ways to connect visual notes, including linking, embedding, and visualizing those links. - Using Excalidraw as a hybrid note-taking tool to combine markdown and drawing in Obsidian. [02:09](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=129) Visual and textual notes can be linked and embedded in a similar way - When linking textual note to a visual note, hovering over it shows the visual component by default - You can choose to embed either the text or the visual side using different syntax like # or ! [04:30](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=270) Embedding visual notes with Obsidian Excalidraw using SVG format - Utilize auto export SVG setting to ensure visual notes preservation - SVG format is recommended for future-proofing and clickable links when publishing visual notes [06:56](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=416) Visual notes in Obsidian can be linked alongside textual notes - Visual notes offer additional options for linking and embedding - Excalidraw in Obsidian allows effectively creating block references for images [09:22](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=562) Excalidraw allows embedding visual notes as areas and groups - Options for embedding visual notes in Excaldraw are similar to embedding textural notes in Obsidian - Excalidraw visual notes can be embedded as areas or groups for easy manipulation [11:50](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=710) Grouping and ungrouping visual elements in Excalidraw - Ungrouping elements in Excalidraw allows for individual selection and movement - Grouping elements in Excalidraw packages up the entire area for easy manipulation [14:18](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=858) Grouping visual elements for better organization - Utilizing group links to create a contiguous group from separate elements - Updating and tracking variables such as nail count and fear actions within the group [16:51](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=1011) Visual and textual notes can be seamlessly linked and visualized in Obsidian using Excalidraw. - Linking notes together helps in finding related notes easily and creating more meaningful notes. - Excalidraw allows for visualizing links and connections between different notes, both text and visual. [18:53](https://www.youtube.com/watch?v=lGh53N_Lj2Q&t=1133) Check out the video for more details on getting started with Excalidraw - The video provides in-depth details on getting started with Excalidraw - It covers various aspects to help you understand and use Excalidraw effectively <!-- deep-read:sections end --> ## Highlights - 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, ([View Highlight](https://read.readwise.io/read/01j7m7ffz1dak6zyx4bgqfzx35)) - 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. ([View Highlight](https://read.readwise.io/read/01j7m7ffzwwp1vbcjc3b561khk)) - 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. ([View Highlight](https://read.readwise.io/read/01j7m7fg0kqn0ckyrdp3zgr2cs)) - 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 ([View Highlight](https://read.readwise.io/read/01j7m7fg1rqvec13t3jp5r8k41))