Improve knowledge discovery by reusing icons. Create an image library with Excalidraw Script Engine
Short Summary:
This video demonstrates how to create a reusable icon library within Excalidraw using Obsidian and a custom script. The core concept revolves around establishing a consistent naming convention for icons (e.g., "icon-joy-happiness-source:nickmilo") to facilitate easy retrieval and reuse. The video details creating an Excalidraw script that automatically populates an icon library from images in the Obsidian vault based on this naming convention. This improves knowledge discovery by visually linking related concepts across different notes. The process involves Obsidian's API, Excalidraw's Automate API, and a custom script written in JavaScript. The final result is a dynamic icon library that updates automatically whenever new icons are added, enhancing visual note-taking and knowledge management.
Detailed Summary:
The video is structured into several sections:
1. Introduction and Problem Statement: The speaker introduces their love for using icons to connect ideas within their Obsidian vault. They highlight the challenge of reusing icons effectively without a systematic naming and storage method. The current Excalidraw library's limitation of not supporting image uploads is also mentioned. The goal is to create an automated icon library within Excalidraw.
2. Naming Convention and Basic Principles: The speaker emphasizes the importance of a consistent naming convention for icons. Their convention uses "icon-" as a prefix, followed by keywords describing the icon, and finally a "-source:" tag indicating the image's origin. This allows for easy searching and identification. An example is given: "icon-fridge-kitchen-source:nickmilo".
3. Manual Icon Addition and the Desired Solution: The speaker demonstrates the tedious process of manually adding icons to Excalidraw documents. They then introduce the desired solution: an automated system that dynamically updates the icon library whenever new icons are added to the Obsidian vault.
4. Scripting and Excalidraw Automate API: This section dives into the creation of an Excalidraw script using the Excalidraw Automate API. The script retrieves all files from the Obsidian vault, filters for files matching the icon naming convention, and then uses the Excalidraw Automate API to add these images to the canvas in a grid format. The script includes functions for resizing images to fit within a defined grid cell and for managing the layout of the icons. The speaker walks through the code, explaining each part, including the use of loops, conditional statements, and coordinate calculations. The speaker also shows how to debug the script using the browser's developer console.
5. Automatic Loading with Excalidraw's "onLoad" Script: The speaker explains how to make the icon library automatically load when the Excalidraw file is opened. This involves adding an "excalidraw-onload-script" tag in the frontmatter of the Excalidraw file, containing the JavaScript code. A secondary script is shown that cleans up the main script, removing unnecessary newlines and extra spaces to make it suitable for embedding in the frontmatter.
6. Conclusion and Resources: The speaker summarizes the process, reiterating the importance of the naming convention and the use of the Excalidraw Automate API. They offer to provide the template script and the cleanup script via a link in the video description, allowing viewers to skip the programming aspects. They encourage viewers to experiment with the Excalidraw Automate API using the developer console. The speaker concludes by emphasizing the benefits of visual thinking and knowledge management. A key takeaway is the statement: "This improves knowledge discovery by visually linking related concepts across different notes."