The Excalidraw-Obsidian Showcase: 57 key features in just 17 minutes

The Excalidraw-Obsidian Showcase: 57 key features in just 17 minutes

Excalidraw: A Visual Thinking Powerhouse

Introduction to Excalidraw

  • Excalidraw is presented as a simple vector illustration tool that transforms Obsidian.md into a powerful visual thinking tool.
  • The demonstration will cover 57 features in 17 minutes, indicating a fast-paced overview of the capabilities of Excalidraw.

Key Features Overview

  • Integration with Taskbone allows for Optical Character Recognition (OCR), which can be enabled in Plugin Settings under Miscellaneous Features. This feature supports freedraw scribble and images.
  • Basic shapes are available, and users can activate tools using keyboard shortcuts for efficiency.

Object Alignment and Sizing Tools

  • Multiple tools assist in aligning and sizing objects, including a customizable grid found under "Set Grid" in the script store.
  • The element properties panel allows users to change colors and attributes of objects easily. Snap to objects helps position elements relative to one another intelligently.

Stencil Library and Linking Capabilities

  • Users can store simple illustrations in the stencil library, adding new items via the context menu with "Add to library." Browsing libraries opens Excalidraw's web library. Note that adding directly from Obsidian requires downloading first.
  • Linking files from your Vault is facilitated through "Insert link to file," allowing previews by holding Control or Command while hovering over links. Transclusion of text from notes into drawings is also possible using the Text Transporter plugin.

Creating Process Flows and Diagrams

  • Excalidraw supports converting Mermaid markup into drawings, enhancing flowchart creation capabilities significantly. If an OpenAI API key is available, text-to-diagram automation simplifies creating diagrams further.
  • Users can add interactive elements like YouTube videos; various drop actions are available depending on modifier keys used during selection. Linking between elements or scenes enhances navigation within projects.

Importing Images and Exporting Drawings

  • Images can be inserted by selecting "Insert ANY file" from the context menu or dragging them directly from the web, maintaining links back to their original sources when clicked on in a browser context. Local files can also be linked similarly through drag-and-drop actions with appropriate modifiers for desired outcomes.
  • Export options include saving entire scenes as SVG files; however, exporting outside your Vault isn't supported on mobile devices due to limitations with certain browsers like Apple Safari regarding clickable links within exported images.

Embedding Elements into Notes

  • Users can embed drawings into Obsidian notes using standard markdown syntax; referencing specific parts of images is achievable by grouping elements before copying markdown links for those groups only.

This allows selective visibility when embedding content into notes without cluttering them unnecessarily with unrelated visuals.( t = 363 s )

Customization Options

  • The look and feel of cards created within Excalidraw can be customized through both card settings windows and element properties panels.

Excalidraw Features and Configuration

Configuring Excalidraw Templates

  • The speaker configures Excalidraw to utilize architect lines, standard fonts, and a grid layout. It's emphasized that users should save their template configurations using CTRL+S.
  • When creating new drawings with the configured template, the default settings are automatically applied.

Utilizing Scripts in Excalidraw

  • The "Slideshow" script allows for defining slides using arrows to indicate the presentation sequence.
  • The "Repeat Elements" script enables users to replicate transformations (color, size, rotation) across multiple elements efficiently.
  • "Palette Loader" helps maintain consistent color styles by loading custom palettes stored in markdown files.

Color Management and Modes

  • An "Invert Colors" script is introduced to enhance color accuracy while keeping the drawing in light mode with a darker palette.
  • Users can insert PDFs into Excalidraw either as images or embeddable objects, allowing for annotations similar to traditional paper methods.

Working with Images and Fonts

  • Users can crop images from PDFs while maintaining links to original sources; this feature also works within markdown notes.
  • Custom pens can be used in Obsidian but are not supported on Excalidraw.com. Limited support for LaTeX formulas is available through the command palette.

Advanced Features and Collaboration

  • ExcaliAI requires an OpenAI API key and offers predefined actions; however, image generation may be slow.
  • While direct collaboration on Obsidian Excalidraw files isn't possible, users can embed collaboration frames and later transfer work back into their own scenes.

Document Properties and Automation

  • Excalidraw allows overriding plugin settings at the file level through pre-defined document properties.
Video description

โœ๏ธ Sign up for the Visual Thinking Workshop: https://www.visual-thinking-workshop.com/ ๐Ÿš€ Cohort 9 starts on 2 June 2024. ๐Ÿ“” We will process The Creative Act by Rick Rubin into a Book on a Page ----- The Mindmap from the video: https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/Excalidraw+2+Million+Downloads+Mega+Showcase ----- If you find my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt ๐Ÿ“ฉ If you want to connect, you can reach me: (@zsviczian) on the Obsidian Members Group (OMG) on Discord, or on ๐Ÿฆ Twitter: https://twitter.com/zsviczian ----- This video is the celebration of passing the 2 million download milestone for the Excalidraw-Obsidian plugin. In the video, I demonstrate 57 basic and power features of the plugin showing you how Excalidraw is much more than just another vector illustration tool. It is a Visual Thinking Powerhouse. ----- Timestamps: 00:00 Intro 00:54 *** PART 1 *** 01:01 OCR 01:26 Basic shapes 01:36 Snap to grid 01:49 Element properties 01:56 Snap to objects 02:07 Stencil library 02:42 Link to file 02:53 Hover preview 03:04 Embedding block references 03:16 Element link 03:25 Outgoing and back-links 03:32 Mermaid text to diagram 03:51 Hand-drawn and professional styles 04:03 Embed videos 04:20 Link to visual elements 04:48 Insert image 04:58 Link to image on the web 05:14 Link to file on the local drive 05:31 Export image 05:56 Embed image in notes 06:11 Group and area embed 06:28 Set embed width and height 06:37 *** PART 2 *** 06:44 Deconstruct images 07:08 Back-of-the-note cards 07:32 Markdown view 07:44 Customizing cards 07:54 Embed any markdown note 08:02 Embed webpages 08:10 SHIFT resize to scale 08:21 *** PART 3 *** 08:28 Plugin settings 08:40 Templates 09:13 Installing scripts 09:30 Slideshow 09:46 Split ellipse 09:55 Boolean operations 10:04 Repeat elements 10:13 Select elements of type 10:25 Set dimensions 10:34 Crop and mask image 10:47 Palette loader 11:06 Light mode - dark mode 11:17 Invert colors 11:32 Tray mode 11:46 *** PART 4 *** 11:53 Import pdf as images 12:14 Import pdf as embeddable 12:34 Crop pdf page in Markdown notes 13:01 Fourth font 13:28 Custom pens 13:48 LaTeX support 14:02 ExcaliAI 14:30 Annotating images 14:54 Text aura 15:03 Convert SVG to Excalidraw strokes 15:33 Collaboration frames 15:58 Excalidraw publish 16:12 *** PART 5 *** 16:19 Document properties (default view mode) 16:41 Excalidraw Automate (EA) 17:09 *** PART 6 *** 17:16 Closing thoughts ------- ๐ŸฟWatch next: ๐Ÿ“ฝ๏ธ Getting Started with Excalidraw https://youtu.be/QKnQgSjJVuc ๐Ÿ“ฝ๏ธ Getting Started with ExcaliBrain https://youtu.be/8LE_QdYQZVk ๐Ÿ“ฝ๏ธ The Playful PKM Castle: A Whirlwind Tour of Zsolt's Visual Thinking World! https://youtu.be/X0AmZGQ_7z4 ๐Ÿ“ฝ๏ธ The Compass of Zettelkasten https://youtu.be/7rnsULzez-g ๐Ÿ“ฝ๏ธ Knowledge Discovery Using Icons https://youtu.be/_OEljzZ33H8 ๐Ÿ“ฝ๏ธ Idea Integration Board https://youtu.be/Lq2ZKDF9gOQ ๐Ÿ“ฝ๏ธ Idea Mixer https://youtu.be/ItV8PEaPorE ๐Ÿ“ฝ๏ธ 6 Strategies for Linking Visual Thoughts https://youtu.be/qiKuqMcNWgU ๐Ÿ“ฝ๏ธ Visual Zettelkasten https://youtu.be/uoNHkCLsp3g ๐Ÿ“ฝ๏ธ 4D PKM https://youtu.be/3S3oIsaK17U ๐Ÿ“ฝ๏ธ Visually Connect Ideas https://youtu.be/mvMQcz401yo ๐Ÿ“ฝ๏ธ Digest What You Read https://youtu.be/yy4b6geeQSY ๐Ÿ“ฝ๏ธ How are these related? https://youtu.be/N6EFydv0tug ๐Ÿ“ฝ๏ธ Colors playlist https://youtube.com/playlist?list=PL6mqgtMZ4NP20xaC4NBC0bTmSHUf7ilz1 ๐Ÿ“ฝ๏ธ The Periodic Table of Productivity https://youtu.be/Z-ksCSK-1mk ๐Ÿ“ฝ๏ธ The Extended Mind https://youtu.be/oXMKF8zqG6E ๐Ÿ“ฝ๏ธ How To Take Smart Notes https://youtu.be/o49C8jQIsvs ๐Ÿ“ฝ๏ธ Finite and Infinite Games Book on a Page https://youtu.be/uoNHkCLsp3g --------- The Mindmap from the video: https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/Excalidraw+2+Million+Downloads+Mega+Showcase Visual Thinking Workshop: https://www.visual-thinking-workshop.com/ My blog: https://zsolt.blog/ Obsidian: https://obsidian.md Excalidraw-Obsidian: https://github.com/zsviczian/obsidian-excalidraw-plugin/ ExcaliBrain Plugin: https://github.com/zsviczian/excalibrain Excalidraw Publish: https://excalidraw-obsidian.online/ ----- Attributions Video by Jesus Cambronero: https://www.pexels.com/video/close-up-of-a-caterpillar-eating-a-green-plant-15523256/ Video by Rahul Sharma: https://www.pexels.com/video/beautiful-butterfly-on-a-flower-1433307/ Video by Anastasia Shuraeva: https://www.pexels.com/video/person-using-angle-grinder-8470299/ Video by Kampus Production: https://www.pexels.com/video/hammering-a-nail-7853956/