Excalidraw-Obsidian 2.2.10: Image Fragments  ## Metadata - Author: [[Zsolt's Visual Personal Knowledge Management]] - Full Title: Excalidraw-Obsidian 2.2.10: Image Fragments - Category: #articles - Document Note: --- 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](#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 Comp - Document Tags: [[excalidraw]] [[visual notes]] - Summary: Excalidraw's new feature allows users to create image fragments by copying links to specific elements within a drawing. This enables easy referencing and pasting of parts of images into markdown documents, enhancing visual organization. Additionally, the feature includes options for both full frames and clipped frames, improving usability for visual projects. - URL: https://www.youtube.com/watch?v=sjZfdqpxqsg hey everyone it's jolt here I have a special feature for you one which many of you have asked for many many times and I finally decided to build it so this feature 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 is pasted here if I long click on this then my original image opens and it's zoomed on the element this is super useful now the new feature allows you to do exactly the same VI excal drawing so now if I head over here and just simply press contrl V or I can also just simply paste then this part of the image from the other image was inserted here so I think this is as you would expect how it works now I want to show you two more interesting things here so first of all if I take this house and I'm going to or this Frame so this is using the frame tool if I right click on the frame and copy the link for selected elements then now you can see that I have two new buttons I have frame and clipped frame so let's first copy the frame so if I copy the frame and head over here then you will see that everything in the frame was copied here so if I come back here you will see that actually this cart didn't fit the frame but it was these elements were contained in the frame so in case of a frame frame reference the entire all the elements from the frame are referenc without the clipping and this is why and this was available until now but only two markdown documents so imagine I can come over here and of course in the markdown document as well I can paste this frame reference what's new is now I also have the clipped frame reference if I click this and come over over here then you can see that now the cart is inserted with the clipping of the frame also it's maybe not so noticeable but I think you can see this that here you can see there's a padding so this is the default padding that was set up in your settings if it's a clipped frame then the padding is going to be zero so it's going to be right on the frame but so this is the clipped frame reference and of course the same works for a markdown document as well so I can insert a clipped frame here as well but in this case the entire frame is included so you can also notice that the empty space above the cart is included here because this is The Frame Window while in this case it's the elements within the frame with the frame reference and then the final piece I want to show you is notice how this Frame is called a cart and this Frame is called a house now first of all notice that my reference here includes a long ID so this is the ID of the element but if I now change this to house then of course this frame reference will now reference the house frame and S similarly here if I change this so this is my CLI frame change this to house then you will see that here it's the clipped house so that's the entire house with all the elements and this is just the clipped house and you can notice that in this case my reference says clipped frame the same Works in case of the inserted images here so here you cannot change the reference in EXC colal you need to change change over to markdown View mode you need to flip the page and here if you open exol dra data and you come down to embedded files then I can change this reference here to house if I want to see what I'm doing I can also put the exclamation mark here so I can see what I'm doing I'm going to change this one to house as well and now if I flip back then you will see that these images were now replaced with the frame references of the house this allows you maybe even from script to select which part of an image you want to insert here and then the final feature I want to show you which is just a small bonus feature is if I have no elements selected I just simply click on the back of the image then I now have this new function here copy embed link for this drawing this is super useful because if I click this I can for example come over here and press paste and with that I've inserted that drawing so this is just a very quick reference I can do the same here so if I now copy edling for this drawing and head over here then you can see that I was able to very quickly paste this image right here I think this just makes it so much more convenient and easy and also if you want this is available this command a copy link for copy link for selected elements but also copy link for this drawing is available on the command palette so you can use obsidian hot keys if you want to set something up now that we've looked at the feature let's quickly look at how the construction and image fragments are similar and different I'm going to be using the double bubble map one of my favorite visual Thinking Tools to do this I'll include a link in the video description to my video about the double bubble map but let's jump in and first look at the similarities so both the construction and image fragments helps you break down complex visuals into more manageable components they allow you to isolate parts of a larger drawing and thus enhance hands focus on specific elements within that larger context and they allow you to link and reuse visual elements in different drawings but then there are some differences and I made these into pairs so on one hand side deconstruction creates reusable icons for repeated use typically icons that you want to repeat many times on the other hand image fragments create a part or reference a specific part of a larger illustration this is for example perfect for an infographics type of setup where you have a big image and then you take parts and you break the image up and you provide some explanation around it now in case of the construction the carved out element becomes context neutral so once you've deconstructed it you can use it many places and it will be neutral to the context on the other hand image fragment retains the context of the fragment source so the original image of course the larger image is always reference then you're referencing that part of the image the construction is suitable for frequent reuse around across multiple contexts as I mentioned earlier on the other hand image fragments are ideal for infrequent and specific references and based on or along this line of logic the construction is efficient it only will render or EXC colal the plugin will only need to render those isolated elements while in case of image fragments the entire image is random and then the part is isolated now in my mind the construction is more robust because you have a dedicated file for your carved out element in case of an image fragment it's fragile because imagine you have a group of elements and you forget about the link and then you ungroup the elements and regroup them and with that the group ID is going to change which means that your link is going to break you're not even going to notice it until several months later you open the other document and you notice that oops I don't even know what that reference was meant to do now the the construction approach benefits from having an icon library and a naming convention and I'm going to include my link to the icon library video in the description on the other hand image fragments your library is actually the source image itself so you will need to open the source image and reference the elements there and finally the construction allows you to further the construct elements into smaller parts so imagine you have a picture you deconstructed the house and then in a Next Step you can deconstruct the window from the house and so on so as a comparison I think these thoughts hopefully help you decide when to use image fragments and when to use the construction and with that that is all I wanted to share with you today if you're interested to learn more about my visual thinking workflows about exol draw and become a real power user not only of exol draw but also of visual thinking in obsidian exol draw I recommend that you check out cohort 10 of the visual thinking Workshop which will commence at the end of August thank you, Excalidraw-Obsidian 2.2.10: Image Fragments, Zsolt's Visual Personal Knowledge Management, 01j3e7s4ste37xb1tptx8fyvqp.