Excalidraw-Obsidian 2.2.10: Image Fragments  [[3. Resources/Readwise/Full Document Contents/Articles/Excalidraw-Obsidian 2.2.10 Image Fragments|Full Document Contents]] ## Document Notes --- tags: #Excalidraw #Obsidian #ImageFragments #VisualThinking - Excalidraw - Obsidian - ImageFragments Author: Jolt (Excalidraw Developer) Source: YouTube Reference: [https://www.youtube.com/watch?v=sjZfdqpxqsg] date created: 2024-09-14 14:10 --- # Title: Excalidraw-Obsidian 2.2.10: Image Fragments and Deconstruction ## Table of Contents: - [[#Introduction]] - [[#What’s New in Excalidraw 2.2.10]] - [[#Using Image Fragments]] - [[#Difference Between Deconstruction and Image Fragments]] - [[#Practical Use of the Image Fragment Feature]] ### References: - YouTube: [Excalidraw-Obsidian 2.2.10 Overview](https://www.youtube.com/watch?v=sjZfdqpxqsg) ## 📝 Summary: Excalidraw-Obsidian 2.2.10 introduces a powerful new feature called **Image Fragments**. This builds on block references and allows users to reference and reuse specific parts of larger images in their Obsidian markdown notes. This release also refines the existing **deconstruction** tool, comparing how image fragments can offer context-specific references, while deconstruction focuses on general reusable components. ## 📖 Main Content: ### What’s New in Excalidraw 2.2.10 In Excalidraw-Obsidian 2.2.10, **Image Fragments** enable you to copy a specific part of an Excalidraw image and reuse it in markdown files. Unlike previous features that allowed only copying whole images, you can now isolate and embed portions of drawings—particularly useful for infographics or detailed visual breakdowns. ### Using Image Fragments - You can select specific image elements, group them, and copy them as an image fragment. - Once pasted into an Obsidian markdown document, clicking on the fragment will zoom in on that portion of the original drawing. - You can also paste fragments directly into other Excalidraw drawings, keeping the focus on specific areas. ### Difference Between Deconstruction and Image Fragments - **Deconstruction** creates reusable icons that are context-neutral, meaning they can be reused across different settings without retaining any connection to their source. - **Image Fragments**, however, retain their connection to the larger image, making them ideal for specific references within a larger context (e.g., infographics). - Deconstruction focuses on efficiency by rendering isolated elements, while image fragments maintain the entire image in the background. ### Practical Use of the Image Fragment Feature - Image Fragments can be particularly useful for visually breaking down complex infographics or technical diagrams. - You can easily create linked references within markdown documents to parts of a drawing, which will zoom into the relevant part when clicked. ### 🗒️ Notes - **Image Fragments**: Isolate parts of an image and retain context for visual elements. - **Deconstruction**: Neutral components ideal for reusable elements. - **Zoom Feature**: Image fragments zoom into specific areas of a drawing when clicked. - **Contextual Integrity**: Image fragments keep their connection to the original image source. - **Markdown Integration**: Easily integrate image fragments into markdown documents. ## 📖 References: - [YouTube Video on Excalidraw Image Fragments](https://www.youtube.com/watch?v=sjZfdqpxqsg) - Obsidian Plugin Documentation ## 🗣️ Paraphrase: 1. The **Image Fragments** feature allows you to copy a specific portion of a drawing and paste it into a markdown file, retaining the connection to the original image. Clicking on the fragment in your note zooms in on the selected portion, making it easy to focus on important elements. 2. Unlike **Deconstruction**, where isolated components become neutral and reusable across different contexts, **Image Fragments** maintain their connection to the source image. This is perfect for scenarios where specific references are needed in visual storytelling. ## 📰 Newsletter: 🎨 **Excalidraw-Obsidian 2.2.10 Brings Image Fragments for Better Visual Breakdown!** In the latest update, Excalidraw-Obsidian adds **Image Fragments**, a feature that allows users to isolate and reuse parts of drawings in markdown documents. Perfect for infographics and technical diagrams, this update enhances your visual thinking workflows by letting you reference specific parts of a larger image, without losing context. Check out the new feature and elevate your visual documentation with ease! [Watch the demo here](https://www.youtube.com/watch?v=sjZfdqpxqsg). ## ✅ Action Items: As a Developer Advocate, this new Excalidraw feature aligns with my work in promoting open-source tools and helping users streamline their workflows. I plan to include this in upcoming training materials, as it offers valuable enhancements for visual thinking and markdown integration within open-source environments like Obsidian. By fostering better connections between Excalidraw and markdown, we can provide developers and contributors with the tools they need to visualize concepts effectively. This supports my goal of building an inclusive, accessible, and open-source-driven ecosystem. ## 🧪 Hypotheses: - Users who leverage **Image Fragments** will experience a more organized and focused visual workflow, especially for complex drawings. - The ability to zoom into specific parts of drawings will improve knowledge retention and user satisfaction in note-taking applications like Obsidian. ### 📊 Methodology: - Conduct user surveys post-update to evaluate the impact on productivity and ease of use. - Track the number of users adopting **Image Fragments** through plugin analytics in Excalidraw-Obsidian. ### ❓ Questions: - Will **Image Fragments** become the default approach for visual notes, or will **Deconstruction** continue to be more widely used? - How does the introduction of **Image Fragments** impact performance when handling large drawings? ### 🔮 Future Research: - Explore additional use cases for **Image Fragments**, such as presentations and data visualization. - Study the impact of this feature on collaborative workflows within teams using shared markdown notes. ### 💡 Implications: The ability to link and reuse specific parts of larger images can significantly enhance visual workflows. This feature could inform future enhancements in markdown integration, visual documentation, and collaborative workspaces. ### 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)**: - **Present**: Visual demonstrations in the video. - **Improve**: Add more detailed flowcharts and step-by-step guides in the documentation. 2. **Aural Learners (Auditory-Musical)**: - **Present**: The video explanation with clear narration. - **Improve**: Add an audio summary or podcast for users to consume on the go. 3. **Verbal Learners (Linguistic)**: - **Present**: Clear verbal explanations with examples. - **Improve**: Add more descriptive storytelling to enhance understanding of how the feature fits into different workflows. 4. **Physical Learners (Kinesthetic)**: - **Present**: Hands-on demo with real-time interaction. - **Improve**: Provide interactive exercises or real-world use cases for the feature. 5. **Logical Learners (Mathematical)**: - **Present**: Step-by-step explanations and comparisons. - **Improve**: Add detailed breakdowns of how **Image Fragments** work technically within the Obsidian ecosystem. 6. **Social Learners (Interpersonal)**: - **Present**: User discussions in forums and community groups. - **Improve**: Encourage peer-to-peer learning through collaborative examples or group challenges. 7. **Solitary Learners (Intrapersonal)**: - **Present**: Self-paced learning through video and documentation. - **Improve**: Include reflection questions about how this feature can impact individual projects. 8. **Naturalistic Learners**: - **Present**: No direct naturalistic references. - **Improve**: Could incorporate analogies to natural processes, such as how fragments fit together like pieces of a puzzle. ### 📊 Accessibility Assessment: - **Screen Reader Comp > [!note]+ Document Notes > tags: [#Excalidraw, #Obsidian, #ImageFragments, #VisualThinking] > - Excalidraw > - Obsidian > - ImageFragments > Author: Jolt (Excalidraw Developer) > Source: YouTube > Reference: [https://www.youtube.com/watch?v=sjZfdqpxqsg] > date created: 2024-09-14 14:10 > > # Title: Excalidraw-Obsidian 2.2.10: Image Fragments and Deconstruction > <!-- deep-read:sections start --> ## Table of Contents: - [Introduction](#Introduction) - [What’s New in Excalidraw 2.2.10](#What’s-New-in-Excalidraw-2.2.10) - [Using Image Fragments](#Using-Image-Fragments) - [Difference Between Deconstruction and Image Fragments](#Difference-Between-Deconstruction-and-Image-Fragments) - [Practical Use of the Image Fragment Feature](#Practical-Use-of-the-Image-Fragment-Feature) ### References: - YouTube: [Excalidraw-Obsidian 2.2.10 Overview](https://www.youtube.com/watch?v=sjZfdqpxqsg) ## 📝 Summary: Excalidraw-Obsidian 2.2.10 introduces a powerful new feature called **Image Fragments**. This builds on block references and allows users to reference and reuse specific parts of larger images in their Obsidian markdown notes. This release also refines the existing **deconstruction** tool, comparing how image fragments can offer context-specific references, while deconstruction focuses on general reusable components. ## 📖 Main Content: ### What’s New in Excalidraw 2.2.10 In Excalidraw-Obsidian 2.2.10, **Image Fragments** enable you to copy a specific part of an Excalidraw image and reuse it in markdown files. Unlike previous features that allowed only copying whole images, you can now isolate and embed portions of drawings—particularly useful for infographics or detailed visual breakdowns. ### Using Image Fragments - You can select specific image elements, group them, and copy them as an image fragment. - Once pasted into an Obsidian markdown document, clicking on the fragment will zoom in on that portion of the original drawing. - You can also paste fragments directly into other Excalidraw drawings, keeping the focus on specific areas. ### Difference Between Deconstruction and Image Fragments - **Deconstruction** creates reusable icons that are context-neutral, meaning they can be reused across different settings without retaining any connection to their source. - **Image Fragments**, however, retain their connection to the larger image, making them ideal for specific references within a larger context (e.g., infographics). - Deconstruction focuses on efficiency by rendering isolated elements, while image fragments maintain the entire image in the background. ### Practical Use of the Image Fragment Feature - Image Fragments can be particularly useful for visually breaking down complex infographics or technical diagrams. - You can easily create linked references within markdown documents to parts of a drawing, which will zoom into the relevant part when clicked. ### 🗒️ Notes - **Image Fragments**: Isolate parts of an image and retain context for visual elements. - **Deconstruction**: Neutral components ideal for reusable elements. - **Zoom Feature**: Image fragments zoom into specific areas of a drawing when clicked. - **Contextual Integrity**: Image fragments keep their connection to the original image source. - **Markdown Integration**: Easily integrate image fragments into markdown documents. ## 📖 References: - [YouTube Video on Excalidraw Image Fragments](https://www.youtube.com/watch?v=sjZfdqpxqsg) - Obsidian Plugin Documentation ## 🗣️ Paraphrase: 1. The **Image Fragments** feature allows you to copy a specific portion of a drawing and paste it into a markdown file, retaining the connection to the original image. Clicking on the fragment in your note zooms in on the selected portion, making it easy to focus on important elements. 2. Unlike **Deconstruction**, where isolated components become neutral and reusable across different contexts, **Image Fragments** maintain their connection to the source image. This is perfect for scenarios where specific references are needed in visual storytelling. ## 📰 Newsletter: 🎨 **Excalidraw-Obsidian 2.2.10 Brings Image Fragments for Better Visual Breakdown!** In the latest update, Excalidraw-Obsidian adds **Image Fragments**, a feature that allows users to isolate and reuse parts of drawings in markdown documents. Perfect for infographics and technical diagrams, this update enhances your visual thinking workflows by letting you reference specific parts of a larger image, without losing context. Check out the new feature and elevate your visual documentation with ease! [Watch the demo here](https://www.youtube.com/watch?v=sjZfdqpxqsg). ## ✅ Action Items: As a Developer Advocate, this new Excalidraw feature aligns with my work in promoting open-source tools and helping users streamline their workflows. I plan to include this in upcoming training materials, as it offers valuable enhancements for visual thinking and markdown integration within open-source environments like Obsidian. By fostering better connections between Excalidraw and markdown, we can provide developers and contributors with the tools they need to visualize concepts effectively. This supports my goal of building an inclusive, accessible, and open-source-driven ecosystem. ## 🧪 Hypotheses: - Users who leverage **Image Fragments** will experience a more organized and focused visual workflow, especially for complex drawings. - The ability to zoom into specific parts of drawings will improve knowledge retention and user satisfaction in note-taking applications like Obsidian. ### 📊 Methodology: - Conduct user surveys post-update to evaluate the impact on productivity and ease of use. - Track the number of users adopting **Image Fragments** through plugin analytics in Excalidraw-Obsidian. ### ❓ Questions: - Will **Image Fragments** become the default approach for visual notes, or will **Deconstruction** continue to be more widely used? - How does the introduction of **Image Fragments** impact performance when handling large drawings? ### 🔮 Future Research: - Explore additional use cases for **Image Fragments**, such as presentations and data visualization. - Study the impact of this feature on collaborative workflows within teams using shared markdown notes. ### 💡 Implications: The ability to link and reuse specific parts of larger images can significantly enhance visual workflows. This feature could inform future enhancements in markdown integration, visual documentation, and collaborative workspaces. ### 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)**: - **Present**: Visual demonstrations in the video. - **Improve**: Add more detailed flowcharts and step-by-step guides in the documentation. 2. **Aural Learners (Auditory-Musical)**: - **Present**: The video explanation with clear narration. - **Improve**: Add an audio summary or podcast for users to consume on the go. 3. **Verbal Learners (Linguistic)**: - **Present**: Clear verbal explanations with examples. - **Improve**: Add more descriptive storytelling to enhance understanding of how the feature fits into different workflows. 4. **Physical Learners (Kinesthetic)**: - **Present**: Hands-on demo with real-time interaction. - **Improve**: Provide interactive exercises or real-world use cases for the feature. 5. **Logical Learners (Mathematical)**: - **Present**: Step-by-step explanations and comparisons. - **Improve**: Add detailed breakdowns of how **Image Fragments** work technically within the Obsidian ecosystem. 6. **Social Learners (Interpersonal)**: - **Present**: User discussions in forums and community groups. - **Improve**: Encourage peer-to-peer learning through collaborative examples or group challenges. 7. **Solitary Learners (Intrapersonal)**: - **Present**: Self-paced learning through video and documentation. - **Improve**: Include reflection questions about how this feature can impact individual projects. 8. **Naturalistic Learners**: - **Present**: No direct naturalistic references. - **Improve**: Could incorporate analogies to natural processes, such as how fragments fit together like pieces of a puzzle. ### 📊 Accessibility Assessment: - **Screen Reader Compatibility**: Ensure that the video has proper captions and the Obsidian interface supports screen readers. - **Keyboard Navigation**: Validate that the feature can be fully navigated via keyboard shortcuts. - **Contrast and Readability**: Ensure the Obsidian interface meets WCAG contrast guidelines. - **Text Resizing**: Confirm that the Excalidraw plugin can resize text elements without layout disruption. ### 🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment: - **Cultural Relevance**: Ensure examples and case studies resonate with a global audience by showcasing use cases from different regions. - **Inclusive Language**: Ensure the video and documentation use gender-neutral and accessible language. - **Neurodiversity Support**: Offer simpler, concise instructions alongside detailed documentation to accommodate different cognitive processing styles. - **Representation**: Highlight diverse developers and use cases from various regions to make the content more inclusive. - **Psychological Safety**: Create a respectful and inclusive environment in forums where users can ask questions without fear of judgment. ### ✅ Logical validity: The arguments presented are logically sound and well-structured. The reasoning behind the use of **Image Fragments** is clearly explained, with practical examples to back up claims. The video avoids any fallacies and offers coherent, step-by-step explanations. ### 🔍 SEO Evaluation: 1. **Keywords**: - **Present**: "Excalidraw-Obsidian," "Image Fragments," "visual thinking," "markdown integration." - **Keyword Placement**: Used effectively in title and description. 2. **Meta Description**: A concise summary of the new feature should be added. 3. **Title Tag**: Optimized with clear keyword use. 4. **Headers (H1, H2, H3)**: Properly structured for SEO and readability. 5. **Content Length**: Detailed enough to provide value. 6. **Internal and External Links**: Add more internal links to Excalidraw documentation. 7. **URL Structure**: Ensure the URL is short and descriptive. 8. **Image Optimization**: Include alt text for any images or screenshots shown. 9. **Mobile Optimization**: Verify video and content are mobile-friendly. 10. **User Engagement**: Enable comments or discussion sections for user interaction. 11. **Schema Markup**: Implement FAQ schema for better search visibility. 12. **Social Sharing**: Make sure social sharing buttons are prominent. ## 🎯 Conclusion: Excalidraw-Obsidian 2.2.10’s **Image Fragments** feature enhances visual workflows by allowing users to isolate and reuse specific parts of larger images within markdown files. This update simplifies complex visual projects while maintaining context, making it a valuable tool for anyone using Excalidraw and Obsidian for visual thinking. Short Summary for [Excalidraw-Obsidian 2.2.10: Image Fragments](https://www.youtube.com/watch?v=sjZfdqpxqsg) by [Merlin](https://merlin.foyer.work/) Excalidraw-Obsidian 2.2.10: Image References and Clipping, Zsolt's Visual Personal Knowledge Management [00:02](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=2) New feature allows pasting part of larger image with Excalidraw-Obsidian [01:29](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=89) Excalidraw-Obsidian 2.2.10 introduces image fragments and frame referencing. [02:59](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=179) Illustration of clipped frames and padding in Excalidraw-Obsidian 2.2.10 [04:28](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=268) Changing references and frames in Excalidraw and Obsidian [05:55](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=355) New function to copy and embed links for drawings [07:15](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=435) Construction vs. Image Fragments in visuals breakdown [08:48](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=528) Image fragments are ideal for infrequent and specific references. [10:23](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=623) Excalidraw-Obsidian 2.2.10: Image Fragments vs Construction --------------------------------- Detailed Summary for [Excalidraw-Obsidian 2.2.10: Image Fragments](https://www.youtube.com/watch?v=sjZfdqpxqsg) by [Merlin](https://merlin.foyer.work/) Excalidraw-Obsidian 2.2.10: Image References and Clipping, Zsolt's Visual Personal Knowledge Management [00:02](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=2) New feature allows pasting part of larger image with Excalidraw-Obsidian - Block references for images now taken a step further - User can now paste part of a larger image with Excalidraw [01:29](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=89) Excalidraw-Obsidian 2.2.10 introduces image fragments and frame referencing. - Image fragments can be inserted within the image. - Frame referencing allows copying and pasting of elements contained in a frame. [02:59](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=179) Illustration of clipped frames and padding in Excalidraw-Obsidian 2.2.10 - Clipped frames have zero padding to align with the frame. - Frame references can be customized, affecting the display name. [04:28](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=268) Changing references and frames in Excalidraw and Obsidian - References can be changed in Excalidraw by updating the CLI frame or in Obsidian by flipping the page and modifying embedded files. - Changing references allows for specific parts of an image to be selected for insertion. [05:55](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=355) New function to copy and embed links for drawings - Allows for quick insertion of drawings into documents - Available through command palette or hot keys for added convenience [07:15](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=435) Construction vs. Image Fragments in visuals breakdown - Deconstruction creates reusable icons, while image fragments reference specific parts. - Image fragments retain context of the fragment for infographics setups. [08:48](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=528) Image fragments are ideal for infrequent and specific references. - Construction using image fragments is efficient as only isolated elements need rendering. - Image fragments can be fragile due to potential link breakage when elements are regrouped. [10:23](https://www.youtube.com/watch?v=sjZfdqpxqsg&t=623) Excalidraw-Obsidian 2.2.10: Image Fragments vs Construction - Image fragments refer to the source image itself, while construction allows deconstructing elements into smaller parts. - Consider when to use image fragments and when to use construction based on your needs. <!-- deep-read:sections end --> ## Highlights - Builds on block references for images but this now takes it a step further let's start this demonstration with something that should already be familiar so imagine I have this drawing and I have this group of elements here so this is grouped into an excal group if I rightclick on the group I can select copy link for selected elements and I get this dialogue where I can either copy a link an area or a group reference I'm not going to go deep into what area and group are there's the other video Linked In the description that you can watch for that I'm now going to click on group and if I head over to a markdown document and I pasted this then this part of that larger image ([View Highlight](https://read.readwise.io/read/01j7smnkz7vzhy15cpq1fz80m7))