Excalidraw-Obsidian Feature Walkthrough - Customizing Embeddable Elements  ## Metadata - Author: [[Zsolt's Visual Personal Knowledge Management]] - Full Title: Excalidraw-Obsidian Feature Walkthrough - Customizing Embeddable Elements - Category: #articles - Document Note: --- tags: - #Excalidraw - #Obsidian - #NoteTaking Author: Jolt (YouTube Creator) Source: YouTube Reference: [Excalidraw-Obsidian Feature Walkthrough - Customizing Embeddable Elements](https://www.youtube.com/watch?v=502swdqvZ2A) date created: 2025-08-22 19:45 --- # Title: Excalidraw-Obsidian Feature Walkthrough – Customizing Embeddable Elements ## Table of Contents: - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) --- ## 📝 Summary: The walkthrough introduces enhancements in **Excalidraw-Obsidian integration**, focusing on scaling and customizing embeddable elements like videos and markdown notes. Users can now scale elements relative to zoom, change appearance (background, opacity, borders), and even apply CSS formatting for immersive and highly customizable experiences. Features also extend to **Obsidian Canvas**, supporting immersive embedding and transparent backgrounds for seamless integration into visual workflows. --- ## 📖 Main Content: The video explores how **Excalidraw’s infinite canvas** and Obsidian integration empower users to **visually organize multimedia and notes**. Jolt highlights the limitations of scaling embedded videos and markdown notes, then demonstrates new scaling and customization functions. Key improvements include command-palette scaling, property-based scaling, immersive backgrounds, CSS class support, and default configurations for consistency. ### 🗒️ Notes - [00:03](https://www.youtube.com/watch?v=502swdqvZ2A&t=3) Problem: Scaling embedded videos/markdown reduces usability. - [02:03](https://www.youtube.com/watch?v=502swdqvZ2A&t=123) Excalidraw supports deep zoom and fractal-like detailing. - [04:05](https://www.youtube.com/watch?v=502swdqvZ2A&t=245) Scaling options: - Command palette: scale selected items to 100%. - Properties panel: adjust zoom ratio or set start times for videos. - [06:00](https://www.youtube.com/watch?v=502swdqvZ2A&t=360) Customization options: - Background color, opacity, and border color flexibility. - [09:38](https://www.youtube.com/watch?v=502swdqvZ2A&t=578) Full immersion options: - Transparency, CSS formatting (labels, rotation, dashed borders, circular notes). - [11:42](https://www.youtube.com/watch?v=502swdqvZ2A&t=702) Support for CSS classes via front matter; defaults for markdown embeds. - [13:34](https://www.youtube.com/watch?v=502swdqvZ2A&t=814) Obsidian Canvas: immersive embedding with transparent backgrounds. --- ## 📖 References: - Excalidraw official documentation - Obsidian Canvas plugin notes - Jolt’s YouTube channel on visual thinking and workflows --- ## 🗣️ Paraphrase: 1. Original: *“Scaling markdown embeds often results in only the title fitting, which isn’t useful.”* - Paraphrase: Shrinking markdown embeds frequently cuts off essential content, leaving just the title visible, which diminishes usability. 2. Original: *“Immersive embedding removes borders and background for seamless Canvas integration.”* - Paraphrase: By removing visual barriers like borders and backgrounds, immersive embedding enables notes and drawings to blend naturally within the Canvas environment. --- ## 📰 Newsletter: 🖌️ **Visual Workflows Get a Boost with Excalidraw-Obsidian Updates** This week, Excalidraw rolled out major improvements for **customizing embedded elements** inside Obsidian. You can now: - 🎥 Scale videos and markdown embeds to match canvas zoom. - 🎨 Customize backgrounds, borders, and opacity. - ✨ Use CSS tricks like dashed borders, rotated text, and circular notes. - 🪄 Export drawings with transparent backgrounds for seamless Obsidian Canvas integration. If you’re into **visual knowledge management** or **Zettelkasten-style workflows**, this is a game-changer. Check out the [walkthrough on YouTube](https://www.youtube.com/watch?v=502swdqvZ2A) and share your creations in the Visual Thinking Discord. --- ## ✅ Action Items: - Connect **visual workflows** to WordPress contributor onboarding (visual notes = contributor documentation clarity). - Highlight parallels between **scaling embeds** and **scaling OSS governance**—control and customization matter. - Use this update to model **inclusive visual learning tools** for the OSS community. - Explore adoption of **visual-first documentation** in GoDaddy’s OSPO framework. --- ## 🧪 Hypotheses: - H1: Visual customization tools increase **knowledge retention** in note-taking systems. - H2: Seamless embedding fosters **greater adoption** of Canvas workflows. - H3: CSS-powered immersion reduces **cognitive friction** for neurodiverse learners. ### 📊 Methodology: - Conduct **usability testing** with diverse learners. - Compare **time-to-task completion** with/without immersive embeds. - Survey Obsidian/Excalidraw users for adoption and satisfaction metrics. ### ❓ Questions: - Does visual immersion improve **long-term memory recall**? - How can WordPress docs adopt **scalable embeds** for contributor training? - Could immersive CSS formatting reduce **burnout in documentation-heavy roles**? ### 🔮 Future Research: - Integration of **live collaborative embeds**. - Exploring **AR/VR applications** for immersive Excalidraw canvases. - Cross-analysis: Excalidraw vs. Figma vs. Miro for OSS learning. ### 💡 Implications: - Visual-first approaches may **redefine documentation** in open source. - CSS flexibility could model **inclusive learning tools** for education. - WordPress could adopt **Canvas-style visual workflows** to lower onboarding barriers. --- ## 🧠 Learning Styles Assessment: - **Visual**: Strong—canvas zoom, scaling, CSS formatting. - **Aural**: Limited—add narrated guides or podcast summaries. - **Verbal**: Moderate—language clear but light on analogies. - **Kinesthetic**: Strong—interactive scaling and embedding. - **Logical**: Strong—step-by-step feature demos. - **Social**: Encouraged via Discord server. - **Solitary**: Moderate—could add reflection prompts. - **Naturalistic**: Absent—no nature analogies. **Readability**: Intermediate tech level (~college). --- ## 📊 Accessibility Assessment: - **Strengths**: Command palette makes scaling accessible. - **Weaknesses**: Video lacks structured captions beyond auto. - **Improvements**: - Add manual captions + transcripts. - Ensure embeds have alt-text. - Provide high-contrast themes for accessibility. --- ## 🌍 DEIB Assessment: - **Cultural Relevance**: Focused on tech-savvy audiences; limited global context. - **Inclusive Language**: Neutral and accessible. - **Neurodiversity**: Strong visual supports, but pacing could overwhelm ADHD users. - **Representation**: No explicit demographic inclusivity. - **Psychological Safety**: Invites community sharing in Discord—positive. --- ## ✅ Logical Validity: - **Strengths**: - Causal reasoning: *Scaling → usability issues solved by commands/properties.* - Deductive: *If embeds resize with zoom, usability improves → confirmed with demo.* - **Weaknesses**: - **Hasty generalization**: Implies scaling solves all embed usability problems. - **Appeal to novelty**: Frames new features as inherently better without long-term testing. Tone: **Enthusiastic, tutorial-style, optimistic**. --- ## 🔍 DARVO Analysis: - **Deny**: None—acknowledges past limitations openly. - **Attack**: None—no hostile framing of alternatives. - **Reverse Victim/Offender**: None—developers positioned as problem-solvers, not victims - Summary: Excalidraw-Obsidian is a tool that allows users to customize embeddable elements in their drawings. The tool enables users to scale embedded elements, such as videos or markdown documents, to fit their desired size and layout. Users can also customize the appearance of the embedded elements, including background color, opacity, border color, and more. Additionally, Excalidraw-Obsidian supports CSS formatting options and allows for immersive embedding of drawings in Obsidian Canvas. These new features provide users with greater control and flexibility in creating visually appealing and personalized drawings. - URL: https://youtube.com/watch?v=502swdqvZ2A&si=KA2tahHqX0_8CViX hey everyone jolt here escalador comes with an infinite canvas and with an infinite canvas come infinite opportunities today I want to give you a feature walk through of some of the enhancements I made that allow you to customize embeddable elements namely you will be able to scale embedded elements as well as I'm adding significantly more control over markdown embeds including Almost 100% canvas candy support as well as other settings and opportunities but before we dive into the new features I want to demonstrate to you the issue that we're facing so imagine you have this video embedded but you actually want this video to be smaller because you're maybe inserting it next to something that is already an image that has a size and the video should fit that image or for whatever other reason now you can start to decrease the size of the video but you can see that at a certain point the video becomes pretty much unusable unw watchable because of the relative scale of the video and when I press press play then yeah this is not a very pleasant watching experience now this way it is but overall the the whole experience is not very good now the same applies to the markdown EDS as well so here's my embedded document and I can scroll here I can navigate here this is great I'm happy with this document however if I now want to make this smaller I come up to a similar problem that yeah I can make it smaller but in the end only the title fits which is really not that that great what I'm after is more like this fractal type of experience where I can add additional detail to my drawing I can make use of the full 10% to 3,000% zoom range of exol draw and if I want to add some tiny detail next to a point I want to be able to add that detail so let me show you how this works on a a concrete example so I've created this overview here about my various videos and thoughts on visual Z Casten and you can see that here in the center I have a video about the two sides of the card and flipping the card the card being exol draw and the exol draw markdown View and around it in different categories I have references to other videos but then and if I zoom in here then these videos also look proper so the YouTube button size is okay and the relative size of these videos are okay and even I can go to a Next Level and you can see here my next video and of course if I play these then they will look proper you have the proper sized YouTube controls here everything works as expected and you might also notice that here on the side I have these markdown documents which are my literature notes for these topics and these documents are editable and they look uh proper and again they're scaled down to this side so if I zoom out then you can see that those are actually teeny tiny especially compared to the one we wanted to do previously so just compare these two and compare the look and feel between the two so how do I do this there are a couple of new features so let's first of all pick up this video and let me show you one new feature so if I zoom into this video and let's say this is the scale where I want to watch the video now there's a new command pallet action I just type in scale selected embeddable elements to 100% relative to the current canvas Zoom so you can see the canvas Zoom currently is 487 per. so when I select this action then my video is resized such that it looks good at this Zoom ratio I can do the same with my markdown document so here again I can just type in scale selected element and then I choose this then you can see that now the markdown ined was scaled down and you can edit it right here so how do you scale one way to scale is to use the common pallet action I've just shown you the other way to scale is here you can find the properties button if I press properties then here I can simply use this toggle to change the zoom ratio so I can zoom in and zoom out or scale scale in and scale out and if I want to find the relative size to be 100% so that's the same as the scaling function in the common pallet then I can press this button and it will automatically identify the the scale also you can simply add a start time to your video so if there's a particular point where you want to start the video then you can add that start time here and it will be saved to your your video I'm not not going to press okay I'm just going to leave it like this so that's one set of functions in terms of scaling the other set of functions is you might have noticed that this document here looks different compared to these two documents so these documents had a sketchy background and they had a different color and they had some border colors so I want to show you some of the settings now available first of all I have a setting and that has been there already for a time that the embeddable will follow the theme of your excolo drawing so if here I switch to dark mode then the embed bable will switch to dark mode as well so this is I think a nice feature if you like your theme and you like the light and dark versions of your theme then your drawing is always going to follow that you have other options as well that this always follows the obsidian theme but what I want to show you is the properties window right here because this document has significantly more properties now you don't see the properties because I have this turned on to use obsidian defaults that's why it looks like this but if I turn this off then you will see that I have lots of options so for example I can hide the file name as well as I can choose that the element follows either the background of the canvas so this brown or the background color of the element itself I can set the opacity of that background color maybe I'm going to set this to 80% so it is a strong background color but I can still see the sketch in the background and also I can select whether I want the element border color to match the stroke color of the element or I can choose a different color here by the way that's through here as well so if I don't want to match the element background color and I don't want to match the canvas background color then I can also choose a color that I want my embeddable to have so for example I'm just setting this embeddable to this pinkish color like this and I've hidden the file name and I'm going to add now this way a strong red border color and then I press okay then you can see well I'm not sure that this is an ideal combination of colors but you can see that for example I was able to configure this like this but also if I now choose to follow the element background color I remove this opacity to 80% or reduce it I follow the stroke color and press okay okay then it now is black because I have a transparent background but if I now change the background color here so if I choose a background color uh then that background color is going to be applied to my drawing and you can also see that if I change the field pattern then the field pattern changes here as well and also I can play with the element border Etc so this gives you lots of freedom in terms of how you want to manage the background color and the background look and feel of your markdown ined document you can even make this whole thing transparent the way to make it transparent is simply to reduce the opacity to 0% and if I do this then now I can also hide the background color and with this I'm able to add a markdown document that is fully immersive in my excal drawing and then finally let me show you some of the CSS formatting options and in this case I'm going to demonstrate to you some of the canvas candy formatting options so let me just walk you through some of these options I'm just going to copy these from here and apply it to my document so you can see the effect of the different options so this is making the note transparent or I can pick up the next one and I can add this and this is going to add a label to the right TF hacker has done some real magic here with these uh CSS classes and in this case I can rotate the text in the Box by 45° or in this case I can create create a dashed border around this now of course you can argue that you have the dash border anyway so here I can create a dashboard or align my drawing like that so you can see my exol dra dashes but if you want this more canvas looking Dash then you can choose this as well and finally you can even add shapes to these elements so in this case this is going to to make the note circle shape which is also a pretty cool feature so the bottom line is now exol draw supports the CSS classes in the front matter so if you're not using canvas scandy you can create your own CSS classes as well and you can format the notes in exol draw and then finally let's look at some of the settings so in settings you can set the default for the markdown ined so you can see here that this is under exol draw and you need to go to ined files into exol draw and you'll find the interactive markdown files settings here you see exactly the same settings that I've shown you with the properties but here you can set the default and then every time you insert a new markdown document that is going to follow this default and finally if you use exol draw together with obsidian canvas I implemented a new setting for you as well so in this case I have this drawing of this end and I'm going to drop this drawing onto the canvas like this and you can see that this is now dropped in without a border around the note and it's transparent so let me show you some of the settings that I've done so that I can insert this drawing like this onto the canvas first of all you need to go to exol draw settings and here under embedding exol draw into your notes and exporting you need to scroll down to obsidian canvas support and under obsidian canvas support you can turn on immersive embedding which will remove the border around the embedded object now that might not be enough so in this case in this drawing um I switched over to markdown View mode I added this front matter switch to export my drawing with a transparent background you can configure this in plug-in settings as well but I typically don't do this so I applied this front matter switch here if I remove this and I come back to the drawing and I save it then if if I come back here then you see that the drawing would be embedded like this it still doesn't have the border on canvas but it's not so immersive so if you want a fully immersive experience then you need to switch to markdown View mode and you need to add the excal export transparent through and with that you will be able to export a note that doesn't have the background color and it will look fully immersive on your canvas so that's all I wanted to share with you today in terms of these new features I am super excited about these new features I think they open up so many new opportunities for thinking visually and I'm Keen to know how you're using these features I invite you to join the visual thinking Discord server you can just simply click the link here on the splash screen and there in the Showcase section I would love to see examples of how you're using exol draw to think visually how you're using this new feature as well as on their feature requests and the other sections we can talk about enhancements and how you would want to take this plugin further thank you, Excalidraw-Obsidian Feature Walkthrough - Customizing Embeddable Elements, Zsolt's Visual Personal Knowledge Management, 01hfmbcrhnjby4rfam4ftfx4fr.