- The concept of making
my notes more visual has always appealed to me,
but one thing's held me back. In most cases, taking visual notes means 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 Viczian put forward an interesting proposition. Porque no los dos? What if I could have both? In this video, I'm talking
about how to have one note that's both visual and textual by default using the Obsidian Excalidraw plugin, and how I love this so much
that I've actually changed all of my note templates to support this. Excalidraw is actually a
separate web app on its own and it's really good for creating
quick and dirty diagrams. But Obsidian Excalidraw
is a community plugin created by Zsolt Viczian, who has also created
the plugin ExcaliBrain, and it brings in the
functionality of Excalidraw into 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 content in Obsidian Excalidraw, so check that out if you want more
information on that plugin. But today I'm talking
about a very specific idea that happens to work well
with Obsidian Excalidraw, and the idea is this. What if you thought of your notes as a physical sheet of paper? On one side you would have
all your actual handwritten or typed up notes, but what if
you could also flip it around and on the back of it or the front of it, depending on how you view it, you could also have like
a drawing or a sketch of whatever it is that
you're taking a note on. It's the idea of having one note that you can switch between
the two modes within. And it's completely different from having two different notes that you somehow have to maybe link together, and having one that's entirely visual and one that's entirely textual, which is actually what I was doing. Here's an interview, a
clip from an interview that I did with Zsolt where 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 away as 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 hand side you have the drawing and 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 nice when you publish it, for
example, to a website. So I'm going to look
into how I can hide that so 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 mode in Obsidian, which now is Live Preview. But there used to be these two modes that you could flip between seamlessly. It's kind of like that, except now, and you don't really need to do that now with Live Preview anyway,
so maybe the two modes are text and visual. - And visual, yeah.
- Yeah. Which is amazing. - Okay, I mean, so for me, there are two additional takeaways. So I was chatting to some
people at the conference, and the idea was the, so on the visual, you can
create really a small visual. So you should really think
about it as a Post-it Note. So you have a small visual, and then behind it you can
have a large amount of text and links and ideas. But 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. Because when you start to
organize your concepts, you're organizing these visual cards and you're creating connections
between those cards. And 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 Summit recently 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 there so you can watch the whole
thing in its entirety. We talked about PKM Summit
and trends that we spotted that were brought up within
the conference itself. It's a really good way to support me and also support Zsolt honestly, because I'm going to leave a link to his details down below as well. So before we get into how to do it, I'm gonna show you what we're aiming for. Here's a note that I actually
created for my joint talk with Zsolt during the conference. This is supposed to be like a note for a tabletop role
playing game character, but this could really have
been like a person note or 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 on 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 visual with just some words here. The thing is that I don't have to choose which one I'm going to use or which one I'm gonna do beforehand. I can just have them both. So, I can quickly jump over here to get a more visual like understanding of the theme of this character, or I can go back here to
look at the frontmatter or like actually look at the
description of this character. So I'm gonna show you how to use this in three different ways. First, I'm gonna show you how to create a new hybrid note from scratch by creating a new
Excalidraw note template, how to convert an existing note template that you already have that doesn't have anything
to do with Excalidraw, and then how to convert existing notes without using a template. To do this, I'm going to start
over with a fresh new vault. There's really nothing in it. And I'm going to go
and install Excalidraw. So I'm going to install it, enable it. And then before we get into
how to create the thing, there are going to be a few settings that 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, and we're going to toggle
this setting off here. By default, Excalidraw is
going to take new notes and save them in the
format .excalidraw.md. Personally, I think that
goes against the ethos of having one note and it can be visual
and it can be textual, and it doesn't really matter which, so I actually disable this so that everything's just a markdown. What I'm trying to do here is
really try to break my mind out of the habit that a
note, a .md or markdown note, is always a textual one, because I wanna be able
to switch and do both and maybe just do one or the other and not really have a stark
difference between the two. So, I've toggled that one off, and then I'm going to scroll back up to collapse the Saving part,
and I'm going to expand Embedding 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 settings for 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 notes and Excalidraw drawings. So I'm gonna exit out of that and 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 gonna 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 here and 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 gonna 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 drawing is going to when you open it
up default to the drawing view, 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 like draw something there. You could leave it at this if you'd like, but personally I like for
it to default in text view, and then have the option
to turn it around. So, if you are like me,
then what you need to do is go here and add a property, and it's gonna be excalidraw-open-md, and it's gonna 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 things that 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 like title 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, so
I'm like going vanilla only. So I would like the
title of the note there, and then I'm going to do something where I am going to embed the title.svg. So remember when I said that
in the Excalidraw settings, that 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 Excalidraw drawing portion of the
note on the textual side. You can skip this if
you don't wanna 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 to 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 toggle to that other side of the sheet, and I hit Command + Option
+ E, and here we are. Because we put like 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 wanna 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 updated because we turned on auto-export is true. So that's how to create a brand new hybrid textual/visual note. So because I didn't have the community plugin Templater installed, I did have to insert
the template manually, but with the Templater plugin,
you can actually set it up so that certain templates are applied when you put it in certain folders, or maybe you just wanna have
it automatically applied to every note. All of those things are options
that you can add onto this, but I just wanted to
keep it to core plugins and Excalidraw for now. So that's how you would
do it if you wanted to create a brand new hybrid note template that is textual and visual. But what if you already
had some textual notes and 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 here and 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 gonna
copy the rest of this, so the text elements and the drawing part. So move over there to the textual one and 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 idea of a hybrid visual/textual
note to me a couple months ago, when we were preparing for our joint talk at the PKN Summit conference last month, and I loved the idea
and I immediately wanted to convert all my notes. While I didn't end up doing
that, I did decide to go back and convert all my templates. Zsolt kind of convinced
me that I shouldn't just 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 to 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 SVG that'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 note and you don't really
wanna change templates? You just want an existing note to be turned into a hybrid note. Well, here's how you do that. These are my highlights for a book that's called "Nonviolent Communication." Now, it is not an Excalidraw note, because I've just now remembered that I should probably also update my 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 note to Excalidraw drawing, and you can see I've also hotkeyed this because 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 the 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 highlights along with my handwritten
or typed out notes. There are so many other
options to Excalidraw that it's really impossible
to go through all of them. For example, in my personal
vault, you might've noticed that my Excalidraw
stuff here is faded out, and that's because it is
an Excalidraw setting. So if you go to Excalidraw and you go to Miscellaneous features, you can toggle on this new feature called Fade out Excalidraw markup. And you just have to be sure that you are putting the comments here before the text elements line. And this is actually
something that came about as a result of me saying to Zsolt, "Hey, I wanna be able
to publish these notes, "and I don't want people to see "all 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 look a little bit nicer when I publish it. Having a hybrid textual/visual note is the best of both worlds. Now, every time I create a new note, it is both textual and visual,
and flipping back and forth between them is really easy, and that's opened up opportunities for me. I've realized that I'm much more likely to just draw a quick diagram or 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 links and visualize my notes
in a way that I couldn't when 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 Excalidraw and how to use it to create a visual map of content in Obsidian. Thanks for watching. Koszonom.
