Get AI summaries of any video or article — Sign up free
Deconstructing Visual Ideas with Obsidian Excalidraw using Excalidraw Scripts thumbnail

Deconstructing Visual Ideas with Obsidian Excalidraw using Excalidraw Scripts

4 min read

Based on Zsolt's Visual Personal Knowledge Management's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.

TL;DR

Install the script via Excalidraw’s command palette using “install or update raw scripts.”

Briefing

A new Excalidraw script, “decompose selected elements into new drawing,” automates a core workflow in visual knowledge management: breaking a page built from drawings into reusable “units of idea,” then keeping those units linked so updates propagate upward. Instead of manually copying icons and text into separate note files—and then re-inserting them back into a larger page—the script turns selected elements into a new embedded Excalidraw drawing in one step, preserving the relationship between the atomic idea and the document that uses it.

The script is demonstrated through the idea-decomposition model used in a “book on a page” style layout. A single page functions as a container made of multiple idea units. Each unit can be an embedded Excalidraw drawing with its own internal components (icons, labels, and structure). Those embedded drawings can be reused across different places on the page, and backlinks make navigation practical: clicking an icon inside one embedded drawing can jump to other documents where the same idea appears. The result is a network of connected notes, where the same visual concept—like an icon representing “communication alignment networking collaboration”—serves as a shared building block across multiple higher-level pages.

To make the workflow concrete, the demonstration starts with a simple drawing containing icons such as a light bulb and a hand-washing symbol, representing the idea “hand washing helps stay healthy.” The key problem is reuse: if that thought is useful elsewhere, copying and pasting the elements into a new note file is possible but click-heavy and error-prone. The script replaces that manual process. After installing it via Excalidraw’s “install or update raw scripts” command palette, the user selects the elements and runs the “decompose selected elements into new drawing” action. Excalidraw prompts for a filename, creates a new drawing in the same folder, and embeds it back into the original canvas.

The practical payoff appears when the atomic idea changes. Editing the newly created embedded drawing—such as reshuffling the light bulb and hand icons—automatically updates the parent drawing after a brief moment. That means the “big document” stays consistent with its component ideas, even as those components evolve.

The demonstration also shows multi-level decomposition. A portion of an embedded drawing can be decomposed again into smaller ideas, and backlinks reflect the hierarchy: atomic elements belong to an idea drawing, which belongs to a larger page drawing. As a result, annotations or shapes drawn around a component can appear at the atomic level and then remain visible when returning to the higher-level document. The overall message is that decomposition plus embedding turns visual diagrams into a maintainable, reusable system—like Lego blocks for ideas—while preserving navigability through backlinks and automatic propagation of edits.

Cornell Notes

The workflow centers on decomposing a visual page into reusable “units of idea” using an Excalidraw script called “decompose selected elements into new drawing.” Instead of copying elements into separate notes and re-inserting them manually, the script creates a new embedded Excalidraw drawing from selected elements and links it back into the parent canvas. Updates to the atomic idea propagate upward, so a change in the smaller drawing automatically refreshes the larger “book on a page” layout. The approach supports deep decomposition: atomic ideas can be broken down further, with backlinks helping navigate the hierarchy of related visual notes.

How does idea decomposition work in a “book on a page” layout?

A page is treated as a container built from multiple visual idea units. Each unit can be an embedded Excalidraw drawing that holds its own icons and text. Those embedded units can be reused across the page, and backlinks allow navigation between where the same visual concept appears in different places (e.g., clicking an icon inside one embedded drawing jumps to other documents that contain the same idea).

Why is manual copy/paste reuse a problem, and what does the script change?

Manual reuse is possible—copy selected elements, paste into a new drawing, rename it, then insert it back into the original page—but it requires many clicks and invites mistakes. The script streamlines this by selecting elements and running “decompose selected elements into new drawing,” which prompts for a filename, creates the new drawing automatically, and embeds it back into the parent canvas in one flow.

What exactly happens when the script runs on selected elements?

After selecting elements (like the light bulb and hand-washing icons) and triggering the script, Excalidraw asks for a file name. It then opens a new pane with a newly created drawing saved in the same folder, and the parent drawing replaces the individual elements with an embedded version of that new drawing.

How does the system handle edits after decomposition?

Edits to the embedded “atomic” idea propagate upward. For example, reshuffling the icons inside the embedded drawing (moving the light bulb to the left) causes the parent canvas to update shortly afterward, keeping the larger document consistent with its component ideas.

How can decomposition go beyond one level, and how is it tracked?

The process can repeat: a portion of an embedded drawing can be decomposed again into smaller ideas (e.g., decomposing the light bulb and hand idea into an even more atomic drawing). Backlinks reflect the hierarchy—atomic drawings belong to idea drawings, which belong to larger page drawings—so changes and context remain navigable across levels.

Review Questions

  1. What steps does the script automate compared with a manual copy/paste workflow for reusing a visual idea?
  2. How does the parent drawing stay consistent when an embedded atomic idea is edited?
  3. What role do backlinks play in navigating between atomic ideas and higher-level “book on a page” documents?

Key Points

  1. 1

    Install the script via Excalidraw’s command palette using “install or update raw scripts.”

  2. 2

    Use “decompose selected elements into new drawing” to convert selected icons/text into a new embedded Excalidraw drawing with a chosen filename.

  3. 3

    Treat a page as a hierarchy: big documents contain visual idea units, which can contain even smaller atomic ideas.

  4. 4

    Reused visual concepts become navigable through backlinks, enabling quick jumps between related embedded drawings.

  5. 5

    Edits to an atomic embedded drawing propagate upward to update the parent canvas automatically.

  6. 6

    Decomposition can be repeated to multiple depths, supporting scalable visual knowledge structures.

Highlights

The script turns selected elements into a new embedded drawing in one step, eliminating the click-heavy copy/paste-and-reinsert workflow.
Changing an atomic embedded idea (like reshuffling icons) automatically refreshes the larger parent drawing after a short delay.
Backlinks connect the hierarchy—atomic drawings link to idea drawings, which link to larger “book on a page” canvases.
The approach treats visual notes like Lego blocks: components are reusable, updateable, and navigable as a system.

Topics

Mentioned