**Created**:: [[2021-09-26 Sunday]] **Link**:: https://youtu.be/ML0WQlQgu3w **Duration**:: 7:13 ![Building Visual Maps of Content with Excalidraw in Obsidian](https://youtu.be/ML0WQlQgu3w) # Summary In this video, the creator shares their process for developing visual index pages, or maps of content, within Obsidian using the Excalidraw plugin. They discuss their transition from using The Brain software to Obsidian and how they integrate their archived notes into a visual structure. The video emphasizes the benefits of visual organization, illustrating how it enhances navigation and understanding in a digital workspace. # Key Takeaways - The creator transitioned from The Brain to Obsidian, integrating an existing archive into a new visual structure. - Excalidraw allows users to create well-structured and visually engaging maps of content within Obsidian, enhancing navigation and user experience. - Building digital environments is a process that benefits from regular updates and visual sketchnoting, adding depth and creativity to the organization of notes. # Content Hey [* ](https://youtu.be/ML0WQlQgu3w) Today, I'd like to walk you through my process for creating visual index pages in Obsidian, or as it is sometimes referred to in the community, maps of contents. So, what you can see right now is the final product of today's work, but to understand how I got here, let me start at the beginning. [* ](https://youtu.be/ML0WQlQgu3w) I've used The Brain for almost two decades, and frankly, I still get enchanted by its powerful graph-based user interface. After over a year of first trying Roam and then landing on Obsidian, just this week I finally got around to converting my Brain and importing it into Obsidian. I now want to integrate my archive into my Obsidian world. [* ](https://youtu.be/ML0WQlQgu3w) In The Brain, I developed an organizational approach that was centered around contexts and indexes. Plus, I used my daily journal as sort of a chronological backbone, and many of my notes, or thoughts using The Brain lingo, were hanging off my journal entries. See, as I scroll from day to date, the thoughts I was working with on that date appear around the central thought representing my journal entry for the day. [* ](https://youtu.be/ML0WQlQgu3w) At any time, I can leave my journal and follow the trail of my thoughts. I am now navigating to the center of my Brain, so I can show you my indexes. Indexes are structures such as chronological, geographical, relational, and so on. They are entry points into my Brain. My other organizational structure consists of the contexts, which play a similar role to what Nick Milo refers to as a map of content. [* ](https://youtu.be/ML0WQlQgu3w) As you can see, over the years, I have developed a tremendous number of context thoughts. For today's video, I'm going to select learning and development. Moving to Obsidian, I really miss this clean graph-based navigation. Unfortunately, Obsidian's graph view, however powerful, falls short of the structure and clarity offered by The Brain. [* ](https://youtu.be/ML0WQlQgu3w) On the upside, however, using Excalidraw, I'm able to create maps of content that are well-structured, visual, and can provide a similar navigational experience. So this is my map of content, the ultimate entry point into my Obsidian Brain. To get started with the new map of content to integrate notes from my archive, let's create a dedicated page for learning and development because the learning and development map of content page does not exist yet in my world. [* ](https://youtu.be/ML0WQlQgu3w) As a first step, I need to hold the Alt and Ctrl keys and click the link so Excalidraw can create the file to help with the process. I've opened Obsidian and The Brain side by side so I can better copy the structure from The Brain over to Obsidian. Since I have all the notes imported from The Brain in my vault already, I'm going to use the insert link action from the command palette to insert wiki links to the imported thoughts. [* ](https://youtu.be/ML0WQlQgu3w) You can set up a hotkey for this command; my shortcut is Ctrl + Shift + K. Because I've been diligent in building my visual vocabulary over the past couple of months and collecting them in the stencil library, I'm going to use one of the existing icons from here. Let me speed up the process. [* ](https://youtu.be/ML0WQlQgu3w) What I'm doing now is adding each of the thoughts I see on the right to the drawing on the left using Ctrl + Shift + K to insert links to the imported files. As I drive the links in, I only do some very rudimentary organization; I first want to get all the links on the page before playing with the aesthetics. [* ](https://youtu.be/ML0WQlQgu3w) In some cases, for example, project management, I even go deeper and add a couple of thoughts that are more distant relatives of the learning and development context in The Brain. Now that I'm ready, I started to create groups and to move them around to add a bit more structure to my page. As a final touch, I want to add some icons to my new map of content. [* ](https://youtu.be/ML0WQlQgu3w) I'm using two primary tools to create my icons. First, I'm browsing the noun projects library for inspiration and then I'm recombining, slightly altering existing sketches in my stencil library. Considering my skills at freehand sketching, I find that this process works for me efficiently, and the resulting icons fit my visual vocabulary well. [* ](https://youtu.be/ML0WQlQgu3w) In some cases, I also integrate a couple of emojis into my drawings, like in this case for online learning. The power of Excalidraw in Obsidian is that it integrates fully with the environment. You can see how craft view backlinks, hover previews, and link navigation all work as expected. [* ](https://youtu.be/ML0WQlQgu3w) Your Excalidraw-based map of content becomes an active, integrated part of your world, much more than just a static image to include as an illustration in a document or presentation. To finish off my new map of content, I will also add a link back to the home map of content. You could also skip this step since the link to the map of content is available under backlinks. [* ](https://youtu.be/ML0WQlQgu3w) In closing, I find that with Excalidraw, my Obsidian vault is becoming much more visual. Navigating handcrafted maps of content pages and mind maps is not only efficient and creative but also a lot of fun. A large part of building your digital brain is about regular gardening; sketchnoting just adds an additional level of depth and creativity to that gardening process. [* ](https://youtu.be/ML0WQlQgu3w) Comparing my context page in The Brain with my new map of content in Obsidian, I'm happy with the end result. I encourage you to try Excalidraw for building maps of content. Thank you. [* ](https://youtu.be/ML0WQlQgu3w) # YouTube Details ## YouTube Description If you find the plugin and/or my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt In this video, I share how I am converting context-views from TheBrain to Visual Maps of Content using Excalidraw in Obsidian. Contact: --------- If you'd like to request a feature or report a bug, please raise it on GitHub: https://github.com/zsviczian/obsidian-excalidraw-plugin If you want to connect, you can reach me (@zsviczian) in the Obsidian Members Group (OMG) on Discord or on Twitter. Links --------- My Blog: https://zsolt.blog TheBrain: https://thebrain.com/ The Noun Project: https://thenounproject.com/ Obsidian: https://obsidian.md More on Maps of Content: https://publish.obsidian.md/lyt-kit/Umami/MOCs+Overview ## YouTube Transcript [hey](https://youtu.be/ML0WQlQgu3w?t=0) [today i'd like to walk you through my](https://youtu.be/ML0WQlQgu3w?t=1) [process for creating visual index pages](https://youtu.be/ML0WQlQgu3w?t=3) [in obsidian](https://youtu.be/ML0WQlQgu3w?t=6) [or as it is sometimes referred to in the](https://youtu.be/ML0WQlQgu3w?t=8) [community maps of contents](https://youtu.be/ML0WQlQgu3w?t=10) [so what you can see right now is the](https://youtu.be/ML0WQlQgu3w?t=14) [final product of today's work](https://youtu.be/ML0WQlQgu3w?t=16) [but to understand how i got here let me](https://youtu.be/ML0WQlQgu3w?t=19) [start at the beginning](https://youtu.be/ML0WQlQgu3w?t=22) [i've used the brain for almost two](https://youtu.be/ML0WQlQgu3w?t=25) [decades](https://youtu.be/ML0WQlQgu3w?t=27) [and frankly i still get enchanted by its](https://youtu.be/ML0WQlQgu3w?t=29) [powerful graph-based user interface](https://youtu.be/ML0WQlQgu3w?t=32) [after over a year of first trying rome](https://youtu.be/ML0WQlQgu3w?t=34) [then landing on obsidian](https://youtu.be/ML0WQlQgu3w?t=38) [just this week i finally got around to](https://youtu.be/ML0WQlQgu3w?t=40) [converting my brain and importing it](https://youtu.be/ML0WQlQgu3w?t=42) [into obsidian](https://youtu.be/ML0WQlQgu3w?t=45) [i now want to integrate my archive into](https://youtu.be/ML0WQlQgu3w?t=46) [my obsidian world](https://youtu.be/ML0WQlQgu3w?t=50) [in the brain i developed an](https://youtu.be/ML0WQlQgu3w?t=53) [organizational approach that was](https://youtu.be/ML0WQlQgu3w?t=54) [centered around contexts and indexes](https://youtu.be/ML0WQlQgu3w?t=57) [plus i used my daily journal as sort of](https://youtu.be/ML0WQlQgu3w?t=60) [a chronological backbone](https://youtu.be/ML0WQlQgu3w?t=64) [and many of my notes or thoughts using](https://youtu.be/ML0WQlQgu3w?t=67) [the brain lingo were hanging off of my](https://youtu.be/ML0WQlQgu3w?t=70) [journal entries](https://youtu.be/ML0WQlQgu3w?t=74) [see as i scroll from day to date the](https://youtu.be/ML0WQlQgu3w?t=76) [thoughts i was working with on that date](https://youtu.be/ML0WQlQgu3w?t=78) [appear around the central thought](https://youtu.be/ML0WQlQgu3w?t=82) [representing my journal entry for the](https://youtu.be/ML0WQlQgu3w?t=84) [day](https://youtu.be/ML0WQlQgu3w?t=86) [at any time i can leave my journal and](https://youtu.be/ML0WQlQgu3w?t=88) [follow the trail of my thoughts i am now](https://youtu.be/ML0WQlQgu3w?t=91) [navigating to the center of my brain](https://youtu.be/ML0WQlQgu3w?t=94) [so i can show you my indexes](https://youtu.be/ML0WQlQgu3w?t=97) [indexes are three structures such as](https://youtu.be/ML0WQlQgu3w?t=101) [chronological geographical relational](https://youtu.be/ML0WQlQgu3w?t=104) [and so on](https://youtu.be/ML0WQlQgu3w?t=108) [they are entry points into my](https://youtu.be/ML0WQlQgu3w?t=110) [brain](https://youtu.be/ML0WQlQgu3w?t=112) [my other organizational structure](https://youtu.be/ML0WQlQgu3w?t=114) [are the contexts](https://youtu.be/ML0WQlQgu3w?t=117) [these play a similar role to what nick](https://youtu.be/ML0WQlQgu3w?t=119) [milo refers to as map of content](https://youtu.be/ML0WQlQgu3w?t=122) [as you can see over the years i have](https://youtu.be/ML0WQlQgu3w?t=126) [developed a tremendous number of context](https://youtu.be/ML0WQlQgu3w?t=128) [thoughts](https://youtu.be/ML0WQlQgu3w?t=131) [for today's video i'm going to select](https://youtu.be/ML0WQlQgu3w?t=132) [learning and development](https://youtu.be/ML0WQlQgu3w?t=135) [moving to obsidian i really miss this](https://youtu.be/ML0WQlQgu3w?t=138) [clean graph based navigation](https://youtu.be/ML0WQlQgu3w?t=142) [unfortunately obsidian's graph view](https://youtu.be/ML0WQlQgu3w?t=145) [however powerful falls short of the](https://youtu.be/ML0WQlQgu3w?t=147) [structure and clarity offered by the](https://youtu.be/ML0WQlQgu3w?t=150) [brain](https://youtu.be/ML0WQlQgu3w?t=153) [on the upside however using xcolitra i'm](https://youtu.be/ML0WQlQgu3w?t=154) [able to create maps of content that are](https://youtu.be/ML0WQlQgu3w?t=157) [well structured visual and can provide](https://youtu.be/ML0WQlQgu3w?t=160) [similar navigational experience](https://youtu.be/ML0WQlQgu3w?t=163) [so](https://youtu.be/ML0WQlQgu3w?t=166) [this is my](https://youtu.be/ML0WQlQgu3w?t=167) [map of content the ultimate entry point](https://youtu.be/ML0WQlQgu3w?t=169) [into my obsidian brain](https://youtu.be/ML0WQlQgu3w?t=172) [to get started with the new map of](https://youtu.be/ML0WQlQgu3w?t=175) [content to integrate notes from my](https://youtu.be/ML0WQlQgu3w?t=178) [archive brain](https://youtu.be/ML0WQlQgu3w?t=180) [let's create a dedicated page for](https://youtu.be/ML0WQlQgu3w?t=182) [learning and development](https://youtu.be/ML0WQlQgu3w?t=185) [because the learning and development](https://youtu.be/ML0WQlQgu3w?t=187) [map of content page does not exist yet](https://youtu.be/ML0WQlQgu3w?t=190) [in my world as a first step i need to](https://youtu.be/ML0WQlQgu3w?t=192) [hold the alt and ctrl keys and click the](https://youtu.be/ML0WQlQgu3w?t=195) [link so xcolidraw can create the file](https://youtu.be/ML0WQlQgu3w?t=198) [to help with the process](https://youtu.be/ML0WQlQgu3w?t=203) [i've opened obsidian and the brain side](https://youtu.be/ML0WQlQgu3w?t=205) [by side so i can better copy the](https://youtu.be/ML0WQlQgu3w?t=209) [structure from the brain over to](https://youtu.be/ML0WQlQgu3w?t=211) [obsidian](https://youtu.be/ML0WQlQgu3w?t=213) [since](https://youtu.be/ML0WQlQgu3w?t=215) [i have all the notes imported from the](https://youtu.be/ML0WQlQgu3w?t=216) [brain in my wall already](https://youtu.be/ML0WQlQgu3w?t=218) [i'm going to use the insert link action](https://youtu.be/ML0WQlQgu3w?t=221) [from the command palette to insert wiki](https://youtu.be/ML0WQlQgu3w?t=224) [links to the imported thoughts](https://youtu.be/ML0WQlQgu3w?t=227) [you can set up a hotkey for this command](https://youtu.be/ML0WQlQgu3w?t=230) [my shortcut is ctrl shift k](https://youtu.be/ML0WQlQgu3w?t=233) [because i've been diligent](https://youtu.be/ML0WQlQgu3w?t=237) [building my visual vocabulary over the](https://youtu.be/ML0WQlQgu3w?t=239) [past couple of months](https://youtu.be/ML0WQlQgu3w?t=241) [and collecting them in the stencil](https://youtu.be/ML0WQlQgu3w?t=243) [library i'm going to use one of the](https://youtu.be/ML0WQlQgu3w?t=246) [existing icons from here let me speed up](https://youtu.be/ML0WQlQgu3w?t=248) [the process](https://youtu.be/ML0WQlQgu3w?t=251) [what i'm doing now is adding each of the](https://youtu.be/ML0WQlQgu3w?t=253) [thoughts i see on the right to the](https://youtu.be/ML0WQlQgu3w?t=256) [drawing on the left using ctrl shift k](https://youtu.be/ML0WQlQgu3w?t=259) [to insert links to the imported files](https://youtu.be/ML0WQlQgu3w?t=263) [as i drove the links in i only do some](https://youtu.be/ML0WQlQgu3w?t=267) [very rudimentary organization i first](https://youtu.be/ML0WQlQgu3w?t=270) [want to get all the links on the page](https://youtu.be/ML0WQlQgu3w?t=273) [before playing with the aesthetics](https://youtu.be/ML0WQlQgu3w?t=276) [in some cases for example project](https://youtu.be/ML0WQlQgu3w?t=280) [management i even go deeper and add](https://youtu.be/ML0WQlQgu3w?t=283) [couple of thoughts that are more distant](https://youtu.be/ML0WQlQgu3w?t=285) [relatives of the learning and](https://youtu.be/ML0WQlQgu3w?t=288) [development context in the brain now](https://youtu.be/ML0WQlQgu3w?t=289) [that i'm ready i started to create](https://youtu.be/ML0WQlQgu3w?t=292) [groups and to move them around to add a](https://youtu.be/ML0WQlQgu3w?t=295) [bit more structure to my page](https://youtu.be/ML0WQlQgu3w?t=298) [and as a final touch i want to add some](https://youtu.be/ML0WQlQgu3w?t=301) [icons to my new map of content](https://youtu.be/ML0WQlQgu3w?t=304) [i'm using two primary tools to create my](https://youtu.be/ML0WQlQgu3w?t=308) [icons first i'm browsing the noun](https://youtu.be/ML0WQlQgu3w?t=311) [projects library for inspiration and](https://youtu.be/ML0WQlQgu3w?t=314) [then i'm recombining slightly altering](https://youtu.be/ML0WQlQgu3w?t=317) [existing sketches in my stencil library](https://youtu.be/ML0WQlQgu3w?t=320) [considering my skills at freehand](https://youtu.be/ML0WQlQgu3w?t=324) [sketching](https://youtu.be/ML0WQlQgu3w?t=326) [i find that this process works for me](https://youtu.be/ML0WQlQgu3w?t=328) [efficiently and the resulting icons fit](https://youtu.be/ML0WQlQgu3w?t=330) [my visual vocabulary well](https://youtu.be/ML0WQlQgu3w?t=333) [in some cases i also integrate couple of](https://youtu.be/ML0WQlQgu3w?t=336) [emojis](https://youtu.be/ML0WQlQgu3w?t=339) [into my drawings like in this case for](https://youtu.be/ML0WQlQgu3w?t=340) [online learning](https://youtu.be/ML0WQlQgu3w?t=342) [the power of x coli drawing obsidian is](https://youtu.be/ML0WQlQgu3w?t=344) [that it integrates fully with the](https://youtu.be/ML0WQlQgu3w?t=347) [environment you can see how craft view](https://youtu.be/ML0WQlQgu3w?t=349) [backlinks hover previews link navigation](https://youtu.be/ML0WQlQgu3w?t=352) [all work as expected](https://youtu.be/ML0WQlQgu3w?t=355) [your ex-colley draw-based map of content](https://youtu.be/ML0WQlQgu3w?t=358) [becomes an active](https://youtu.be/ML0WQlQgu3w?t=360) [integrated part of your world much more](https://youtu.be/ML0WQlQgu3w?t=362) [than just a static image to include](https://youtu.be/ML0WQlQgu3w?t=365) [as an illustration in a document or](https://youtu.be/ML0WQlQgu3w?t=368) [presentation](https://youtu.be/ML0WQlQgu3w?t=370) [to finish off my new moc i will also add](https://youtu.be/ML0WQlQgu3w?t=372) [a link back to the home moc you could](https://youtu.be/ML0WQlQgu3w?t=375) [also skip this step since the link](https://youtu.be/ML0WQlQgu3w?t=378) [to the moc is available under backlinks](https://youtu.be/ML0WQlQgu3w?t=382) [in closing](https://youtu.be/ML0WQlQgu3w?t=387) [i find that with x color draw my](https://youtu.be/ML0WQlQgu3w?t=388) [obsidian vault is becoming much more](https://youtu.be/ML0WQlQgu3w?t=391) [visual](https://youtu.be/ML0WQlQgu3w?t=393) [navigating handcrafted maps of content](https://youtu.be/ML0WQlQgu3w?t=394) [pages and mind maps](https://youtu.be/ML0WQlQgu3w?t=397) [is not only efficient and creative but](https://youtu.be/ML0WQlQgu3w?t=399) [also a lot of fun](https://youtu.be/ML0WQlQgu3w?t=402) [a large part of building your digital](https://youtu.be/ML0WQlQgu3w?t=404) [brain is about regular gardening](https://youtu.be/ML0WQlQgu3w?t=406) [sketchnoting just adds an additional](https://youtu.be/ML0WQlQgu3w?t=409) [level of depth and creativity to that](https://youtu.be/ML0WQlQgu3w?t=412) [gardening process comparing my context](https://youtu.be/ML0WQlQgu3w?t=415) [page in the brain with my new map of](https://youtu.be/ML0WQlQgu3w?t=418) [content in obsidian](https://youtu.be/ML0WQlQgu3w?t=421) [i'm happy with the end result](https://youtu.be/ML0WQlQgu3w?t=423) [i encourage you to try xcolidraw for](https://youtu.be/ML0WQlQgu3w?t=425) [building maps of content thank you](https://youtu.be/ML0WQlQgu3w?t=429)