Visual note templates with Obsidian Excalidraw  ## Metadata - Author: [[Nicole van der Hoeven]] - Full Title: Visual note templates with Obsidian Excalidraw - Category: #articles - Document Note: --- tags: [#Excalidraw, #ObsidianPlugin, #VisualNoteTaking, #PKMSummit, #NoteTemplates] - Excalidraw - ObsidianPlugin - VisualNoteTaking Author: [Jol Vitan] Source: [Visual note templates with Obsidian Excalidraw](https://www.youtube.com/watch?v=zmgqMZi6QL8) Reference: [YouTube Transcript](https://www.youtube.com/watch?v=zmgqMZi6QL8) date created: 2024-09-14 16:30 --- # Title: Visual Note Templates with Obsidian Excalidraw ## Table of Contents: 1. [📝 Summary](#-summary) 2. [📖 Main Content](#-main-content) - [Hybrid Notes Concept](#hybrid-notes-concept) - [Creating a Visual Note Template](#creating-a-visual-note-template) - [Converting Existing Notes to Hybrid Format](#converting-existing-notes-to-hybrid-format) 3. [🗒️ Notes](#-notes) 4. [📖 References](#-references) 5. [🗣️ Paraphrase](#-paraphrase) 6. [📰 Newsletter](#-newsletter) 7. [✅ Action Items](#-action-items) 8. [🧪 Hypotheses](#-hypotheses) 9. [📊 Methodology](#-methodology) 10. [❓ Questions](#-questions) 11. [🔮 Future Research](#-future-research) 12. [💡 Implications](#-implications) 13. [🧠 Learning Styles Assessment](#-learning-styles-assessment) 14. [📊 Accessibility Assessment](#-accessibility-assessment) 15. [🌍 DEIB Assessment](#-deib-assessment) 16. [✅ Logical validity](#-logical-validity) 17. [🔍 SEO Evaluation](#-seo-evaluation) 18. [🎯 Conclusion](#-conclusion) ## 📝 Summary: This tutorial showcases how to create and use hybrid visual and textual note templates in Obsidian using the Excalidraw plugin. The author explains the benefits of blending both forms in a single note, allowing users to switch between visual diagrams and text seamlessly. It also covers the process of converting existing textual notes into hybrid formats and customizing note templates. ## 📖 Main Content: ### Hybrid Notes Concept: - **Dual Mode Notes**: Combine textual and visual elements in a single note with the ability to flip between the two modes. - **Obsidian Excalidraw Plugin**: Enables creating drawings and diagrams directly within notes while retaining compatibility with Markdown text. ### Creating a Visual Note Template: - **Install Excalidraw Plugin**: First, install and activate the plugin, configure settings, and toggle necessary options (e.g., auto-export SVG for embedding visuals). - **Template Setup**: Set up a note template to include both text and visuals, with hotkeys for toggling between the modes. ### Converting Existing Notes to Hybrid Format: - **Manual Conversion**: Existing notes can be converted by adding Excalidraw’s visual elements without disturbing the existing textual content. - **Use Cases**: Ideal for various scenarios such as meeting notes, role-playing games, or book highlights where visual summaries can complement detailed text. ## 🗒️ Notes: - **Obsidian Excalidraw**: A powerful plugin for blending text and visuals in note-taking. - **Hybrid Templates**: Templates allow quick switching between visual diagrams and text. - **Customization**: Hotkeys and settings can be configured for a seamless experience. ## 📖 References: - [Visual note templates with Obsidian Excalidraw](https://www.youtube.com/watch?v=zmgqMZi6QL8) ## 🗣️ Paraphrase: 1. **Original**: "The idea is having one note that you can switch between two modes within, so you don’t need two different notes linked together." - **Paraphrase**: The concept is to maintain one note with two views—textual and visual—removing the need to link two separate notes for the same topic. 2. **Original**: "Switching between text and drawing modes is as simple as flipping over a sheet of paper." - **Paraphrase**: Transitioning between the text and visual sides of a hybrid note is as intuitive as flipping a piece of paper. ## 📰 Newsletter: 🚀 **Visual & Textual Note-Taking in Obsidian** Enhance your note-taking workflow with Obsidian’s Excalidraw plugin! Learn how to create hybrid notes that seamlessly combine text and visuals, perfect for personal projects or professional documentation. Whether you’re designing a concept map or annotating meeting notes, this integration brings flexibility to your knowledge management system. Check out our latest guide to see how it works! [Watch the tutorial](https://www.youtube.com/watch?v=zmgqMZi6QL8) 🎨 ## ✅ Action Items: - Create hybrid note templates for the WordPress documentation process. - Investigate opportunities for integrating this visual-textual method into open-source contribution documentation. ## 🧪 Hypotheses: - Hybrid notes can significantly enhance memory retention by providing both visual and textual representations. - Visual summaries within notes improve engagement and usability in collaborative projects. ### 📊 Methodology: - Conduct surveys comparing users’ memory retention with hybrid notes versus text-only notes. - Track productivity metrics among users who implement hybrid note-taking during meetings or knowledge capture sessions. ### ❓ Questions: - Can hybrid notes reduce the cognitive load when managing complex information? - How does the balance of visual versus textual content affect overall understanding? ### 🔮 Future Research: - Investigate hybrid note-taking in different industries, such as education and tech. - Explore the development of AI-assisted tools for automatic visualizations in hybrid note-taking. ### 💡 Implications: - Hybrid notes could transform how knowledge is structured and retained, influencing productivity, creativity, and team collaboration across various fields. ### 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)**: - **Present**: Excalidraw provides diagrams and sketches. - **Improve**: Add flowcharts or detailed illustrations for complex topics. 2. **Aural Learners (Auditory-Musical)**: - **Present**: Lacks audio components. - **Improve**: Offer podcast-style note summaries or audio guides. 3. **Verbal Learners (Linguistic)**: - **Present**: Detailed written content for deep understanding. - **Improve**: Enrich content with analogies or storytelling to engage readers. 4. **Physical Learners (Kinesthetic)**: - **Present**: Visual notes encourage hands-on interaction. - **Improve**: Include exercises or prompts for creating their own diagrams. 5. **Logical Learners (Mathematical)**: - **Present**: Clear logical progression of ideas between text and visuals. - **Improve**: Introduce structured problem-solving exercises. 6. **Social Learners (Interpersonal)**: - **Present**: Can share visual notes with the community. - **Improve**: Encourage collaboration on shared visual note-taking projects. 7. **Solitary Learners (Intrapersonal)**: - **Present**: Allows personal reflection via visual and textual integration. - **Improve**: Add journal prompts for deeper introspection. 8. **Naturalistic Learners**: - **Improve**: Connect diagrams to real-world examples or environmental contexts. ### 📊 Accessibility Assessment: - **Screen Reader Compatibility**: Ensure all visual elements in notes are supported by descriptive alt-text. - **Keyboard Navigation**: Allow users to navigate between text and visual modes with keyboard shortcuts. - **Contrast and Readability**: Use high contrast for better readability in both visual and textual modes. ### 🌍 DEIB Assessment: - **Cultural Relevance**: Incorporate diverse case studies and examples within visual and textual notes. - **Inclusive Language**: Maintain gender-neutral language throughout the notes. - **Neurodiversity Support**: Simplify complex diagrams and ensure notes are broken down into smaller, digestible sections. ### ✅ Logical validity: - **Sound Deductive Reasoning**: The argument for using hybrid notes as a more efficient form of documentation is clearly laid out. - **Appeal to Facts/Evidence**: The video references actual usage scenarios, supporting the claims with practical demonstrations. - **Avoiding Fallacies**: There are no clear logical fallacies, but improvements could be made by including more diverse case studies and user examples. ### 🔍 SEO Evaluation: 1. **Keywords**: Effective use of keywords like "Obsidian Excalidraw" and "visual note-taking." 2. **Meta Description**: Missing; could summ - Document Tags: [[excalidraw]] [[obisidian]] [[visual notes]] [[zettlekasten]] - Summary: The text explains how to create hybrid textual and visual notes using the Obsidian Excalidraw plugin in Obsidian. This allows for combining drawings with text in one note, offering a more engaging and comprehensive note-taking experience. The approach enhances note-taking by seamlessly integrating visual elements with text, encouraging better organization and understanding of concepts. - URL: https://www.youtube.com/watch?v=zmgqMZi6QL8 The concept of making my notes more visualhas always appealed to me, but one thing's held me back.In most cases, taking visual notesmeans not taking textual ones, and if I have to choose one,I'm gonna choose to take notes in text.Text is more easily searchable, displayable,not to mention shareable, so I default to text wherever I can.And the few times that I've done something more visual,I've still wanted to write text to go with it anyway. But a few weeks ago, my friend Zsolt Viczianput forward an interesting proposition.¿Por qué no los dos?What if I could have both?In this video, I'm talking about how to have one notethat's both visual and textual by defaultusing the Obsidian Excalidraw plugin,and how I love this so much that I've actually changedall of my note templates to support this. Excalidraw is actually a separate web app on its ownand it's really good for creating quick and dirty diagrams.But Obsidian Excalidraw is a community plugincreated by Zsolt Viczian, who has also createdthe plugin ExcaliBrain, and it brings in the functionality of Excalidrawinto your Obsidian vault.So this is a way to create drawings that are still compatible with Excalidraw,but able to be edited within Obsidian. I've talked a little bit about it here,where I go over how to create a visual map of contentin Obsidian Excalidraw, so check that outif you want more information on that plugin.But today, I'm talking about a very specific ideathat happens to work well with Obsidian Excalidraw,and the idea is this:What if you thought of your notesas a physical sheet of paper?On one side, you would have all your actual handwrittenor typed up notes, but what if you could also flip it aroundand on the back of it, or the front of it,depending on how you view it,you could also have a drawing or a sketchof whatever it is that you're taking a note on. It's the idea of having one notethat you can switch between the two modes within.And it's completely different from havingtwo different notes that you somehowhave to maybe link together,and having one that's entirely visualand one that's entirely textual,which is actually what I was doing. Here's an interview, a clip from an interviewthat I did with Zsoltwhere he talks about this very concept.He calls it the back of the sheet.So yeah, well, one of the things that I'm taking awayas a next development opportunity,we talked about this with Nicole on this concept. Of turning the sheet around.So you know you have an Excalidraw drawing,and if you click on the tab,you can switch to markdown view mode.So that for me is, my metaphor is like having a card,a sheet of paper,and on one side, you have the drawingand you turn it around.Then you have your notes about the topic.But when you turn it around,then you have the Excalidraw content,the text elements, the embedded files,and then the JSON there,which just doesn’t look as nicewhen you publish it, for example, to a website. So I’m going to look into how I can hide thatso when you publish them, it’s not there.- Yeah, if they’re marked down,then really it can just be the same note,one note with two different modes,kind of like how there’s a reading mode and a source modein Obsidian, which now is Live Preview.But there used to be these two modesthat you could flip between seamlessly.It’s kind of like that, except now,and you don’t really need to do that nowwith Live Preview anyway, so maybe the two modesare text and visual.- And visual, yeah. - Yeah.Which is amazing. Okay, I mean, so for me,there are two additional takeaways.I was chatting to some people at the conference,and the idea was that,on the visual, you can create a really small visual.You should really think about it as a Post-it Note.You have a small visual,and then behind it, you can have a large amount of textand links and ideas.If you summarize the note on the other side with a small visual,it gives you another level of how you can engage with your concepts.When you start to organize your concepts,you’re organizing these visual cardsand creating connections between those cards.Yes, on the other side you have the detail,but it’s sort of a visual summary of your card,which adds another dimension,but also helps you remember the content better. I recorded that with Zsolt at the PKM Summitrecently in Utrecht in the Netherlands,and it was like a 30-minute conversation.It’s too long to put up here,but if you are in my Patreon,I am going to put it up thereso you can watch the whole thing in its entirety.We talked about the PKM Summit and trends that we spottedthat were brought up within the conference itself.It’s a really good way to support meand also support Zsolt honestly. Because I'm going to leave a linkto his details down below as well.So before we get into how to do it,I'm going to show you what we're aiming for.Here's a note that I actually created for my joint talkwith Zsolt during the conference.This is supposed to be like a notefor a tabletop role-playing game character,but this could really have been like a personal noteor anything like that.So it looks just like a normal note.It has some things embedded in it,but it's really mainly text. Now, the interesting thing is this is just one side of it.And if you flip to the other side,I have a hotkey for this; I'll show you how to do that.This is actually the same note.So you'll see it's still the Mystic note.It's still mystic.md, but now it's almost entirely visualwith just some words here. The thing is that I don't have to choosewhich one I'm going to useor which one I'm going to do beforehand.I can just have them both.So, I can quickly jump over hereto get a more visual understandingof the theme of this character,or I can go back here to look at the front matteror actually look at the description of this character.So I'm going to show you how to use this. In three different ways.First, I'm going to show you how to createa new hybrid note from scratchby creating a new Excalidraw note template.Then, I'll show you how to convert an existing note templatethat you already havewhich doesn't have anything to do with Excalidraw,and then how to convert existing noteswithout using a template.To do this, I'm going to start over with a fresh vault.There's really nothing in it.I'm going to go and install Excalidraw.So I'm going to install it and enable it. Before we get into how to create the thing,there are going to be a few settingsthat I think you should change first.So exit out of that.Go over to Excalidraw here.First, go into Saving here, and then go down,and then expand this Filename section.We're going to toggle this setting off here.By default, Excalidraw is going to take new notesand save them in the format .excalidraw.md.Personally, I think that goes against the ethosof having one notethat can be visual and textual,and it doesn't really matter which.So I actually disable thisso that everything's just markdown.What I'm trying to do here is really try to break my mindOut of the habit that a note, a .md or markdown note,is always a textual one,because I want to be able to switch and do bothand maybe just do one or the otherand not really have a stark difference between the two. So, I've toggled that one off,and then I'm going to scroll back upto collapse the Saving part, and I'm going to expandEmbedding Excalidraw into your Notes and Exporting. I'm gonna scroll down and then expand Auto-export Settings,and then I'm going to toggle Auto-export SVG.I'll tell you why this is important in a second,but for now, just toggle it on. I am also going to go to the settingsfor the Templates folder here,and I'm going to put a Template folder location,and I'm just gonna call it Templates. And whatever I put there,I'm also going to put in the Excalidraw settings.So back to the Excalidraw settings,I'm gonna go to Basic this time,and then there's Excalidraw template file or folder. I mean, you can use this Excalidraw one,but I'm just going to put the Templates folder.Again, no difference now between markdown notesand Excalidraw drawings. So I'm gonna exit out of thatand exit out of this graph view.I'm going to hit the Command pane,Command + P or Control + P. And then I'm going to type "create new drawing."Now, there are a few options here.I pretty much always just use "create new drawing"in the current active window.So, this is the new Excalidraw drawing.And one last thing, this is a quality of life thing,strictly not even necessary,but I just really find it useful.I'm going to go into hotkeys, and then here,in "Toggle between Excalidraw and Markdown mode,"I'm going to choose a new command,a hotkey or shortcut for this. Now, it was funny because while I was talking to Zsolt,we just so happened to have chosen the same one,which is Command + Option + E. But, you know,you can make it whatever you'd like.All right, so, now we're hereand I'm going to hit the Command pane,that's Command + P or Control + P,and then I'm going to create new drawing. Now, there are four different ways to create one.I pretty much always just use "create new drawing"in the current active window, so I'm going to do that.Now if I hit Command + Option + E,that's actually toggling to the other side.Now, okay, let's do that without the hotkey.If you didn't do the hotkey,you can always go to the Command pane and then type "toggle"and it'll just be here,"Toggle between Excalidraw and Markdown mode."So right now, because we created an Excalidraw drawing,this is in the drawing mode. But if we flip it, that's like turning it around,and now we're looking at the text side of it.So let's go ahead and rename this New Note.Now, by default, any new Excalidraw drawingis going to default to the drawing view when you open it,so you would automatically go to this.So if we go to here,then you'll see that it went straight to the drawing.So let's draw something there.You could leave it at this if you'd like,but personally I like for it to default to text view,and then have the option to turn it around. So, if you are like me, then what you need to dois go here and add a property,and it's going to be excalidraw-open-md,and it's going to have to be true.So this is what that looks like in source mode,just so you see what I've typed out.Now, what I'd like to do is make this the new template,so I'm going to change out a few thingsthat I don't think I really need, like this warning.I know about Excalidraw view,so I'm going to exit out of that.Now, I'm probably going to have something liketitle here.If you're using Templater, the community plugin,then this would be a little bit different,but I haven't installed any community plugins here. Except for Excalidraw, I'm going vanilla only.So I would like the title of the note there,and then I'm going to do somethingwhere I am going to embed the title.svg.So remember when I said that in the Excalidraw settings,you should do an auto-export to SVG?This is so that we can do just this.We want to be able to embed what's on the Excalidrawdrawing portion of the note on the textual side. You can skip this if you don't want to do this,but I personally have found it useful to be able to see both sides of it.So now let's turn this into an actual template.Now, right now this is in the Excalidraw folder.We said that the Templates folder is going to be in here,template, so we're moving that over there.And we just want that to be applied whenever we create a new note.So now let's create a new note.I just hit Command + N.Now, this is still an untitled note,so I'm going to insert the template,and that's the new note.All right, so we have a new note here.We've inserted the template,and now this is automatically an Excalidraw drawing as well.What that means is, you can see here it says,"Untitled.svg could not be found."That's because we haven't done anything in the drawing yet. But from here on, all we have to do is toggleto that other side of the sheet,and I hit Command + Option + E, and here we are.Because we put this box here,I realized that the template,maybe we didn't really need that,but okay, well, now we have a nice box here.This is an untitled note.And then I'm going to hit Ctrl + S,just to force Excalidraw draw to save it.Not really necessary,but if you want to switch quickly back and forth,I would do it. And then I'm gonna switch back here.And now instead of saying, you know,"So-and-so SVG could not be found,"now it's actually embedding the SVG here,and it's going to be automatically updated too.So if I go here and I say,"I don't actually want this box."I want this diamond,"and I'll hit the save one again,Command, Ctrl + S,flip back, and this was automatically updatedbecause we turned on auto-export is true.So that's how to create a brand newhybrid textual/visual note.So because I didn't havethe community plugin Templater installed,I did have to insert the template manually. But with the Templater plugin, you can actually set it upso that certain templates are appliedwhen you put them in certain folders,or maybe you just want to have it automatically appliedto every note. All of those things are options that you can add onto this,but I just wanted to keep it to core pluginsand Excalidraw for now. So that’s how you would do it if you wantedto create a brand new hybrid note templatethat is textual and visual. But what if you already had some textual notesand you want to make them visual ones as well?Well, let's pretend that we've got something here,and I’ll say textual. And let’s say you had the title hereand texty text over there.And so when we create a new note,it’s Untitled 1,insert template.Let’s say, oops, if you insert textual,that’s normally what you would find.Now, how do we turn this textual one into a visual template? Well, it turns out it’s actually not that bad.You see this new note here?We just have to copy these.So I’m going to switch over to the source mode,and I am going to copy this. And put the properties in there,and then I'm also going to copy the rest of this,so the text elements and the drawing part.So move over there to the textual oneand copy that over.Now let's do that again, applying the textual template.And insert template,and I'll say textual, although now it looks very similar.And I'm going to hit Command + Option + E, and there you go.This is our Excalidraw drawing too.So Zsolt first pitched this ideaof a hybrid visual/textual note to me a couple of months ago,when we were preparing for our joint talkat the PKN Summit conference last month. And I loved the idea, and I immediately wantedto convert all my notes.While I didn't end up doing that, I did decide to go backand convert all my templates.Zsolt kind of convinced me that I shouldn'tjust mass convert all of my textual notes,and I'm mostly glad that he was able to succeed in that.So let's have a look at some of my personal templates,just to show you what I did manage to do.So here is my Daily note.It looks very much the same as the last time I showed it,but it does have the Excalidraw plugin stuff.So it has the open-md set to true,and it has this as well.I did put the text elements within the comment,just because I didn't want it to show up. And here's one for a Default Meeting.I used to just have it as text,but look, it's now also an Excalidraw drawing,and it also has the SVGthat's going to be embedded here as well.And the last part is, what if you want a hybrid note,but you already have a textual noteand you don't really want to change templates?You just want an existing noteto be turned into a hybrid note.Well, here's how you do that.These are my highlights for a bookthat's called "Nonviolent Communication."Now, it is not an Excalidraw note,because I've just now rememberedthat I should probably also updatemy Readwise template so that it does this.So this is a good opportunity to change that. So I'll go Command + P,and then you can search for Convert markdown noteto Excalidraw drawing,and you can see I've also hotkeyed thisbecause I do it quite a bit now.And now it's asking me to select which template I use.Now, I tend to have two different ones.This template is just for new notes,which is kind of like what I showed you,but this existing note is a little bit different.That's mainly because it no longer has the SVG here,and that's because it doesn't work too well. I've found with these Templater strings.So, anyway, if it's a new note, I apply one template,and if it's an existing note, I apply this one.But it effectively turns it into the same thing.Now, it doesn't do the SVG,but I can always add that in afterwards.So again, that would be nonviolent communication,and then I'll do SVG.And then when I flip to the Excalidraw notes here,I can put in a note here.And, "NVC is a way of communicating"with empathy."And then save that, and then flip back, and there you go. So I could have my highlightsalong with my handwritten or typed-out notes.There are so many other options to Excalidrawthat it's really impossible to go through all of them.For example, in my personal vault, you might've noticedthat my Excalidraw stuff here is faded out,and that's because it is an Excalidraw setting.So if you go to Excalidrawand you go to Miscellaneous features,you can toggle on this new featurecalled Fade Out Excalidraw markup.And you just have to be surethat you are putting the comments herebefore the text elements line.And this is actually something that came aboutas a result of me saying to Zsolt,"Hey, I want to be able to publish these notes,"And I don't want people to seeall of these text elements and drawings."So it looks a little bit like that. And it just doesn't make any sense,so I asked him for a way to make it looka little bit nicer when I publish it.Having a hybrid textual/visual noteis the best of both worlds. Now, every time I create a new note,it is both textual and visual,and flipping back and forthbetween them is really easy,and that's opened up opportunities for me.I've realized that I'm much more likelyto just draw a quick diagramor include some sort of spatial element on notes,or just paste in a screenshot,'cause that's all just a hotkey away. And it's really encouraged me to create linksand visualize my notes in a way that I couldn'twhen I felt that I had to choose between one or the other.If you'd like to learn more about Excalidraw,then check out this video,where I go over the basics of Excalidrawand how to use it to create a visual mapof content in Obsidian.Thanks for watching.Koszonom., Visual note templates with Obsidian Excalidraw, Nicole van der Hoeven, 01hw0kxt3hrxaytd1m502689jx.