Visual note templates with Obsidian Excalidraw

[@nicolevdh]

The vault I set this up on, plus the full interview with Zsolt, is available on my Patreon: patreon.com/nicolevdh PLUGINS MENTIONED: Obsidian Excalidraw, Templater, Templates, ExcaliBrain THEME: Typewriter (dark), AnuPpuccin (light): kzbin.info/www/bejne/bV62gKqupb-EhKs

[@VisualPKM]

You explain the concept so well! Excalidraw grew into a beast of a plugin with too many features and settings... it is hard to explain in simple terms. You did such a good job at it!

[@nicolevdh]

Awww, thank you, Zsolt! I love the direction you're taking the plugin and I'm always amazed by the features you manage to pack into it! Thanks for making something so useful.

[@NoBoilerplate]

Nicole this is GENIUS! 😀 This method probably can be applied to any plugin that isn't too fussy about the layout of the markdown behind the scenes that it uses (however, not the Kanban plugin, that strips out anything that isn't headings and checkboxes). BTW I think you don't need the SVG trick: As you can see at 18:57, obsidian already knows how to render excalidraw notes - that black box is it rendering the empty drawing!

[@Danielo515]

Even if that is true, it is still interesting for web exports

[@NoBoilerplate]

@@Danielo515 oh totally, gotta export it for web!

[@Danielo515]

@@NoBoilerplate Love your videos by the way 😃

[@NoBoilerplate]

@@Danielo515 Thank you! My most popular video is on Obsidian, which I learned much of from Nicole! 😀

[@RameshIndhewat]

Thank you! You've done an amazing job of making Excalidraw functionality into simple and extremely useful visual note tool.

[@apolaine]

You have transformed the way I use Obsidian for my DMing with this. And the SVG embed on the markdown side is so smart. I would never have found all this by myself in all the settings.

[@nicolevdh]

I love this comment. Thank you. I'm happy I could do something for you. You can embed the SVG on the Markdown side, but recently, Zsolt released a feature where you can do the reverse-- embed the Markdown side into the drawing, too! I prefer Markdown-first, though. Also, technically you can embed the drawing itself (.md) or .png as well, but the .svg embed is better if you want the option to publish the note later and allow links to be clickable online.

[@basetwojesus]

Based on this video, I switched to this as my default template a short time ago and it's fundamentally changed how I engage with my notes. Previously, switching between text and drawing had enough friction that it was disruptive (too many decisions to make, like, "how should I organize these drawings") and I would get sidetracked easily. Setting up an easy hotkey makes it fluid to switch back and forth. I love the embedded SVG idea as well and do it in almost all my visual notes now. I sometimes still forget to save the note while in Excalidraw mode (so the SVG doesn't get regenerated), but it's so easy to hotkey back and forth that it's nothing. Thank you and Zsolt for this! Seriously.

[@ryanbartlett672]

You and Zsolt compliment each other's work very well. I'm glad you are both creating, and Excalidraw and Excalibrain exist! Thanks.

[@markcoren2842]

Thank you for another homerun tutorial. I've been working on designing ontologies lately and just linking basic canvas charts to them at first, and an Excalidraw note for the more important ones. This is going to make my workflows and upkeep MUCH easier. I can't wait to start test driving it in the morning!

[@TheLazyEnigma]

Wow that character example note really sold me on this idea! Great explanation.

[@nicolevdh]

Oh, happy you mentioned that specifically. Initially I had that part at the end, but then I thought it might be better to show the result up front for just the reason you said-- to sell people on the idea. Glad that worked for you and thanks for letting me know!

[@GJ7923]

Even lopen stoeien om het voor elkaar te krijgen, maar je hebt het duidelijk uitgelegd. Dank je.

[@Sandra-b5y]

Hi Nicole, many thanks for all your videos. I have been using Obsidian for a while and they are really useful, keep with the great work!

[@Flower-fx5zy]

Thank you, Nicole and Zsolt. It feels always like a great gift.

[@nicolevdh]

Glad you liked it! I always love working with Zsolt-- his stuff is so useful and so easy to talk about!

[@balazsnagy4701]

This was one of the best and informative tutorial I have seen. Köszönöm! ❤

[@daggerman-dcgk]

Hi Nicole. Thank you, this idea is indeed very intriguing. For now, I will try to keep the drawings separate from the markdown text files. I do not know if that will ever become relevant in the coming 30+ years that I hope to access my notes. I will see how I can already build in the basics into my templates that make reference to the separate excalidraw files simple. I certainly like the idea of embedding a picture of the excalidraw file in the related markdown note. A link and a clearly defined naming convention shared among both markdown and excalidraw files will hopefully be enough for me to smoothly integrate visual thinking while keeping makrdown files pure. Another excellent and inspiring video: kudos!

[@TiannaStarfall]

Thank you so much for this, so well explained and just what I was looking for! I love the combination of visual and textual notes, think this will be a game changer for me. I tried to use Obsidian in the past and struggled a bit, coming back to look at it again I think this will really make it work for me.

[@MaxwellBuba]

Such a good video, great content. I implemented it straight away. You are doing a great job and are a great asset to the Obsidian community.

[@neemiassilva580]

This is just perfect for dictate development refinements, thanks! Your have no idea how this helps!

[@FaiziCrofts]

So I went through the tutorial and it's pretty good and the features are great. One weakness of the hybrid note - unless I am missing something is - if change the name of the note, the associated svg name doesn't change. For example, if I create a 'test' note, toggle to drawing, create a diamond, switch back and then change the name of the note to 'test 2', the svg still is named 'test'. This means I need to manually change that note if I want it to remain linked to 'test 2'. Otherwise I'll end up with a variety of messy issues. So this would introduce some friction into my workflow potentially. One workaround is just don't create drawings until I am very settled on the name of the note in question, and just keep in mind that if I do change the name of a note- I need to adjust both any internal links (ie '![[test.svg]] ) as well as the SVG name itself for the sake of organization. I also notice that now when I transclude notes, only the SVG embed shows. I don't feel like it's supposed to do that but I'm not sure. I don't like the behavior, but did I follow something about the tutorial wrong or is this just how it's going to behave now so that I can't transclude text notes any more?

[@LiamAUDIBERT]

Excalidraw Setting to allow the rename of the note to apply to the SVG file is [Keep the .SVG and/or .PNG filenames in sync with the drawing file] in Auto-Export Settings, in Export Settings, in Embedding Excalidraw into your Notes and Exporting, in Excalidraw Community Plugin Settings.

[@cooljibbin]

Updated: I don't think it's necessary to export an svg and link to it. I linked to the file itself and the drawing is rendered without all the text. There is an infinite loop behavior if linking to a heading that contains the self referencing link but obsidian seems to stop rendering after like 6 times so no crashes involved. Old: This is cool. There are a couple artifacts with displaying the svg on the text side. 1. If the file is moved to a new folder, the old svg's will be left behind. 2. A name change to the note doesn't change the link to the visual note. This can be solved with the dataview plugin and using the following line in place of the explicit embed links: `$='![['+dv.current().file.name+'.svg]]'`

[@petrkrnavek2420]

Or in the settings right above you set "auto-export SVG" you can toggle ON: Keep the .SVG filenimes in sync, but it works only if it's in the same folder

[@cooljibbin]

@@petrkrnavek2420 nice, missed that one, solves number 1

[@jonr6680]

3:04 that's a FLASHCARD, right? Used for college revision notes etc. GENIUS! Going to have to try this, looks game changing.

[@nicolevdh]

Oh that's a cool reframing. I hadn't thought of it as a flashcard, but you could absolutely use it like that!

[@paulyadl2123]

Thanks for the wonderful tutorial, Nicole. Very helpful and thought-provoking. I think that the option of creating a 'visual note' is very nice but I wouldn't make it the default behavior. I'd probably use it about 5-10% of the time. One thing that I'm puzzled by is if you place some text on your drawing that text is also written to the textual component of your 'flip note'. Maybe that's a 'feature' but it assumes that any text added to your drawing is needed in the textual component too. Another thing I noticed that could add clutter to your vault is if you delete the .md file the .svg file isn't automatically deleted too. Maybe there's a config setting that changes this behavior though.

[@nicolevdh]

Text elements in Obsidian Excalidraw

[@Maulken]

I've changed over to using this method and it's amazing. Only curiosity that I haven't been able to figure out yet is how to see the drawings and switch between them on mobile and iPad.

[@Se9n.]

Now take it to even another level and to add CSS to the note example is in video 9T9VL8_i1Tg Just make sure your excalidraw has a transparent background and then add recolor-image and the notes look amazing.

[@dariocaricchio4991]

I really love your videos, Nicole! You're fantastic, keep up the good work! 👏💯

[@nicolevdh]

Awwww. Thanks for the words of encouragement. I appreciate you!

[@Silent1Majority]

Thank you for this wonderful implementation! I'm looking forward to using it. * Actually, went back over last sections regarding adding this implementation to existing notes and it worked for my note template. Will also test it out with my Readwise settings. The short suggestions at the end were just enough to make me dangerous within my current settings 😅🤣

[@space_audits]

Thanks. The svg tip is clutch!

[@robertstorlind2302]

I've been using this setup ever since I saw this video. I've found it especially useful for source notes and daily notes where it gives you the perfect place for mindmapping and ad hoc drawings. Do you know if there is a writeup/summary of all the detailed settings if you are bringing this into an existing vault?

[@suryakantbrewr]

How to set up custom stroke width for pencil in exalidraw😢😢 ???

[@linkingyourthinking]

This is brilliant. I'm wondering what a ballpark file size is svg files relative to the same md file? Is it like 2:1 or 10:1 svg:md ?

[@nicolevdh]

Hi Nick!

[@linkingyourthinking]

@@nicolevdh Ah very cool, thanks for explaining the nuances, and also that it's not auto-created until you do something in there 🙌

[@floriang]

I'm trying to do this in the mobile version. Everything works

[@GKahla]

I'm enjoying this concept! I need to experiment with it... I'll be creating a few templates to tinker, and I appreciate your guidance in setting this up. I need to give in and make more extensive use of YAML in my Obsidian system. I've been resistant (because I'm just like that). Thank you very much for sharing! Á votre santé - ☕

[@hepster3208]

It is indeed the best of both worlds, thanks for sharing! But I need help with something, how do I make so that the auto exported svg is saved in a different folder? Because I don't want it to be coming up in my search results everytime I search for the "parent" note, I want only the original note to show up.

[@Navic-Labs]

Hello @nicolevdh, great content. I was wondering how to achieve the same svg embed with templater instead of the core plugin - templates. I don't want any discrepancies in my notes, so i am using templater due to its flexibility instead of using both plugins.

[@venusfor1369]

Thank you for the new organizing way!

[@nicolevdh]

Happy you liked it! Hope it works for you too!

[@RobbStsrk]

How do you use variables? Any settings for them needed?

[@askara2177]

Great idea, looks promising!

[@safflatters8739]

Thank you Nicole! Is there a way to have this template show the text side rather than the excalidraw side when putting it on my canvas?

[@aivy-aigeneratedmusic6370]

Hi, thanks for the detailed video! Very helpful and interesting. There are a few things I don´t really get. At @13:40, you hit control+S to save, and only at this moment the svg file is created. In my vault, it´s the same behavior, I wonder: where is the drawing saved before that? It does exist when I flip the sides but it´s nowhere saved. I guess this is the purpose of the "Auto export SVG" setting? But it seems like this setting is not working properly, maybe it´s a bug (because this file only gets created after pressing control+S). Hope Zsolt is reading this :) Also, to save it by control+S is necessary to embed it via ![[...]]. However, the format of ![[{{title}}.svg]] also does not work (even when the md file and the svg file do have the same names). I have to manually insert the filename and then it works. No idea why. And one more thing that would be really cool, but I don´t know if it´s possible: Let´s say I create the file "markdown" in the folder "obsidian", but I would like the created other-side-SVG-file to be saved in the Excalidraw folder. If the SVG file is also created in the folder "Obsidian", it just looks cluttered because then there will be 2 files with the same name "markdown" (one of them .md, the other one svg). Ok that´s it thanks again and have a nice day :)

[@petrkrnavek2420]

Or in the settings right above you set "auto-export SVG" you can toggle ON: Keep the .SVG filenimes in sync, but it works only if it's in the same folder

[@tonyatlas5653]

Thank you! I so loved your explanation and the whole idea of flipping the card in general. The only thing that confuses me is that there is a lot of code at the end. Even when I make a very simple scheme of a couple of arrows and other shapes, the note gets 20-30 thousand characters more. Yes, you can hide them with "%%", but still you can see by side scrolling how big the note has become. Because of this, even small notes, which should be literally 300-500 characters, grow up to several thousand characters due to Excalidraw's schema markup. Doesn't it confuse you? I would very much like to incorporate this approach into my work, but I can't put up with so much code at the end of notes, even in small notes....

[@maurolimaok]

I'm in a little trouble here. When I save my "test" on Excalidraw view, automaticaly is created a new note names {{title}}.svg I was thinking I would be just ONE note, with 2 views and, instead, it seems I just use the short cut to see the visual note, instead the text one. Tried all tutorial twice. Same results. Any advice?

[@jonr6680]

Makes me wonder if there's a bit of a space penalty with .md files loaded with essentially code to drive the image. Even if the diagram is very simple? Would imagine this is made 'invisible' to the indexer for Obsidian search etc? So no time penalty?

[@nicolevdh]

There is some space penalty, but the textual component of the Excalidraw drawings would add very little overhead. The images would be a bigger concern. Regarding the search-- text elements would be indexed, but images and shapes and such wouldn't (beyond the filename).

[@jockerj3857]

Hello Nicole, is it necessary to keep the tag "excalidraw" (for functionality)? its not good for the structure of my order

[@connorlring]

What is the benefit of having two sided notes (text/visual), over simply having a note with imbedded visuals?

[@teaman7v]

There really isn't. It's just a way of selling what is really a technical limitation as a 'feature'

[@KingdomHearts1626]

Is there a way to (automatically) export the Excalidraw image to a different folder from the Excalidraw file itself? I prefer to keep images in an Attachments folder, separate from the notes themselves (which I usually create in the root folder). I searched online but couldn't find it.

[@GauravKhanna13]

Hey Nicole. That was a great explanation. I am quite interested in the converting existing note to excalidraw note only when required. Is there any place where I can see the exisitng note template.

[@odumo24]

Thanks a lot for this tutorial!! I found that using ![[{{title}}]] along would embed the drawing, without exporting another svg file.

[@Saintel]

Just a little too fast with the code for us just learning... how did you embed??

[@ranks6670]

Great video as always ❤. One question: is it possible to add multiple excalidraw drawing in the same note using a template? At the top and middle for example

[@nicolevdh]

Yes! You can embed multiple Excalidraw drawings within a note, or you can also embed just multiple parts of the same Excalidraw drawing too. When I show the "Mystic" character note with the textual side and there are images embedded, those are actually coming from the one same Excalidraw drawing.

[@ranks6670]

@@nicolevdh Thank you 😊

[@alexsannikov3398]

Hey! Thank you for the great video. Easily embedding drawings into my daily notes is something I've wanted to do since I started using Obsidian, thanks a bunch! One question I had - has anyone figured out how to have the Daily Notes plugin open up your note in Markdown mode rather than the Excalidraw mode? Or is there another way to get the daily note to launch in markdown mode on app launch?

[@alexsannikov3398]

I have found a way to reduce the friction of switching between modes on mobile by setting 'Excalidraw: Toggle between Excalidraw and Markdown mode' as my mobile Quick Action

[@MakerMontez]

This is awesome thanks nicole! btw, are you sure Zsolt isn't just merlin in disguise? This excalidraw plugin and your guidance are magic

[@FranciscoAguirre192]

Hola hola Nicole! Hace tiempo que no comento en tus videos. Me agrada esta forma de aprovechar el lado visual de una idea. Hasta ahora, todas mis notas son textuales, pero esta podría ser una forma de enriquecerlas. Saludos :)

[@nicolevdh]

Hola Francisco! :) Que bueno oír de ti otra vez. Sí, exacto! Yo también tenía casi todo textual, pero ahora... por qué no? Es mejor tener la oportunidad y no usarla, que no tenerla.

[@cossack4930]

Can you go over what you did differently with Templater?

[@thejonny0208]

Great job!! Thanks for this info

[@craiggordon2502]

At around 18 minutes in the video you mention a command to convert existing note that seems to be missing from the latest release. Is there another function room that does the same thing?

[@wilmerlau7520]

I have same question

[@wilmerlau7520]

Found the answer from Zsolt: this will only be visible when you have a markdown note open and the markdown note is not an excalidraw note

[@craiggordon2502]

@@wilmerlau7520 The thing is that it was just a regular note. I was creating a template with a standard MD file and I was looking for that function to convert it and it wasnt there. I had to create a new file that was an excalidraw note, flip to the markdow portion and copy the json at the bottom of the page, but that doesnt seem like the right way even though it seems to work. Thoughts?

[@wilmerlau7520]

@@craiggordon2502 OK steps for me: 1: Check your note(in source mode) doesn't have YAML that indicates its an excalidraw (ie. --- excalidraw-plugin: parsed tags: - excalidraw --- 2: if your note has those YAML, then you won't get that 'convert markdown not to excalidraw drawing' option. 3: If your note doens't have those YAML, then you'll get that option.

[@craiggordon2502]

@@wilmerlau7520 Thanks but I check that, and im not sure why when there is no refrence to excalidraw in the MD note I found the option but it pops up a template list that isnt complete. Its really odd, have you encountered that ?

[@0McLoL0]

How are the multiple image-embeds (e.g. HP or Power Level) like the ones the character page working? Are these embedding the SVG with coordinates?

[@nicolevdh]

No, better! The plugin lets you link to a specific element, group, or area of the drawing. Think of it like block references, but for drawings. From an Excalidraw drawing, click on what you want to link to, then open up the Command Palette and search for "Excalidraw: Copy" and you'll see the options there. That will copy a link to your clipboard that you can paste in the Markdown side.

[@0McLoL0]

O.O that sounds great! Thank's :)

[@wilmerlau7520]

@nicolevdh When I select 'Convert markdown note to Excalidraw drawing', I don't get a a 'select template' prompt like you do in this portion of your video at 21:01 -> kzbin.info/www/bejne/sJ7KooCQnpuEgposi=MiETtU0hpEoxlQEt&t=1101 I have templater installed too. I'm wondering what I'm doing differently than you? Amazing video by the way!

[@Lshdshjsh]

I think she has a script running for that but i'm not sure. I really wish she just quickly explained that because not being able to convert existing notes properly is the one thing stopping me from using Excalidraw. Did you figure it out?

[@Lshdshjsh]

To get it to say "select template" you need to change the setting in "Basic" and then "Excalidraw file or folder" and just have more than one template in there. As for what her existing template folder looks like, IDK

[@UnicornRoseDust]

Your spanish pronunciation is really good!!

[@nicolevdh]

Gracias. Hablo español. :) Hago estos vídeos en ingles porque mi ingles es mejor, pero he hecho algunos vídeos en español para mi trabajo también.

[@nononahnah912]

Didnt work still have text on my note text side template.

[@claire2326]

Thank you for such a helpful video! I just have one question. It seems the .svg is saved as a separate file in the same location as the .md file, but would like to have it saved in a separate folder with other Excalidraw related content. Is this possible?

[@nicolevdh]

Unfortunately not, for now. Zsolt can chime in here if he's around, but I believe he said that this was not (yet) possible due to the fact that the auto-exported SVG needs to be updated to keep it in sync with the file, and that was more difficult if the plugin has to crawl through other folder structures to make the connection.

[@Xav1ez]

@@nicolevdh I was searching the comments here for a solution to this as well, don't know if the devs read here or if you speak to them, but having the option to just point to a subfolder always found in the root of where the note itself is stored doesnt seem like it should be as tricky? Like how the "attachments" folder works for any images you paste into regular notes. It could even reuse the attachments folder. Loved the video and this approach to notes, thanks for sharing!

[@petrkrnavek2420]

Hello, how did you set up this background in excalidraw, please? I love it! Nice paper looks.

[@nicolevdh]

I'm not sure what you mean by background, sorry. I didn't do anything specific. Maybe you could give me a timestamp of the video so I can have a look?

[@petrkrnavek2420]

@@nicolevdh 0:56 I mean the paper look of backgraund in excalidraw view. I'm qute new to this plugin so I'm sorry if it's some of basics.

[@nicolevdh]

Oh I see! No, it's okay to ask. That was not obvious in the video, I realise. That part of it was from the Excalidraw website, which is different from the Obsidian Excalidraw plugin. One way you could recreate it, though, is to find an image of the paper-like background and put that into your Excalidraw drawing template.

[@petrkrnavek2420]

@@nicolevdh Would be possible to get this exact paper background picture somewhere, please? It's so unique! 🙂

[@joemoss5138]

Can we do this in Canvas??

[@nicolevdh]

Nope! This is unique to Excalidraw.

[@joemoss5138]

@@nicolevdh thanks for the reply.

[@joemoss5138]

How do we toggle between back and front?

[@zenzhu5690]

Very useful!

[@keennykadz]

so i tried out this method... and i am having a tone of latency issues... not while drawing but when i type my notes after after making some edits on the drawing side... any one with a fix or at least knows the cause

[@DanteMishima]

Please, for your showcases with new vaults make them dark mode.... The flash bang is jarring

[@nicolevdh]

Thank you! Valuable feedback. You're the second person to comment on this, so I will absolutely do that next time!

[@kuotie]

ingenious!

[@nicolevdh]

Yeah, I thought so too! It's a really cool idea that deserves some love.

[@igorstrauss7335]

just awesome

[@datha1605]

Nice hair color.

[@AleX-sb7sp]

Porque no los dos! Viva el español

[@theTrigant]

The light mode is killing me here

[@nicolevdh]

I usually use dark mode, but every time I do in videos, I get comments saying that it would be easier to see in light mode... 🤷‍♀️

[@theTrigant]

@@nicolevdh I see. I should stop watching your videos while procrastinating sleep 😅

[@Bozzigmupp]

I don't understand why you want to make a template :( Why can't you just make your note into a Excalidraw on the backside and that's it

[@NLPprompter]

how much does obsidian o him... i said big, it is the most useful plugin everybody used.

[@floriang]

Kinda cool

[@edmel144]

Be careful about mentioned one note

[@unotoli]

Looks rather complicated at first sight. Still getting away with built-in Mermaid (editable charts) or Mermaid>Excalidraw covert kzbin.info/www/bejne/h3OVo36Ird2Mosk

[@unotoli]

There is also Mermaid enricher plugin - obsidian://show-plugin?id=mehrmaid

[@nicolevdh]

There's some setup required to put it in your existing note templates, but if you're already used to using templates like I do, then it doesn't add any more steps to your workflow once it's in there. But whatever works! I used Mermaid for diagrams when I first started using Obsidian, and there's also Canvas. But I still prefer Excalidraw!

[@punnypuns5103]

This seems far to cumbersome and takes too much time even for basic demonstration. I like quick notes. However if it works for people amazing concept

[@thesunshinehome]

*Anytype is way better than obsidian*

[@sayfullah8658]

It's in beta and has sync issues. And a lot of other things of obsidian is missing (you'll only realize that when you go to try to use it seriously or test it for day to day use).