Excalidraw Enhanced for VS Code

Author: tan-o

This repository now builds a VS Code custom editor around the customized @zsviczian/excalidraw fork.

Open or create a .excalidraw, .excalidraw.json, or .excalidraw.svg file to use the visual editor. JSON scenes can be opened as source in an adjacent VS Code editor, while .excalidraw.svg stores an editable scene inside the SVG.

Current features

• Customized Excalidraw canvas, drawing tools, custom pen scene state, images, libraries, links, and standard Excalidraw import/export UI
• Native VS Code document dirty state, save, revert, file watching, hot exit, and source view
• An Excalidraw Enhanced section in the canvas menu for VS Code-native save, export, source, and settings actions
• Mermaid source conversion into editable Excalidraw elements
• User-level libraries, optional workspace-shared .excalidrawlib storage, local workspace/file browsing, and public library imports through VS Code deep links
• Built-in Online libraries sidebar tab with search, previews, and direct installation from Excalidraw's official public library collection
• Built-in EA scripts sidebar tab for adding and running local Obsidian Excalidraw-style .md or .js scripts
• Optional, separately maintained Typst math formula plugin with a preset Typst keyboard, local SVG preview, and double-click re-editing
• Optional, separately maintained Object Markdown plugin for attaching live-rendered Markdown to any canvas element
• A separate contribution API for VS Code extension developers
• Bundled Excalifont/Xiaolai CJK handwriting fonts; Chinese glyphs load locally without a browser or font service and are selected through Excalidraw's standard font picker
• Editable .excalidraw.svg files with the scene embedded in the exported SVG
• New drawing, Export as PNG, Export as SVG, and Open drawing source commands
• Light, dark, or automatic VS Code theme integration
• VS Code display-language integration
• Relative workspace-file links and external HTTP/HTTPS links
• Workspace-safe webview isolation with a restrictive content security policy

Removed Obsidian integration

The VS Code runtime does not load Obsidian, access an Obsidian vault, register Obsidian views, process Markdown embeds, patch Obsidian internals, or use Obsidian settings and lifecycle APIs. The old Obsidian source remains in the repository temporarily as migration input, but it is excluded from the VS Code build.

See the migration status for the boundary between portable drawing features and host-specific functionality.

Development

Requirements:

• Node.js 22 or newer
• npm 10 or newer
• VS Code 1.85 or newer

Install and build:

npm install
npm run check
npm run build

Press F5 in VS Code after selecting the Run Excalidraw Enhanced extension launch configuration.

Commands

• Excalidraw Enhanced: New drawing
• Excalidraw Enhanced: Export as PNG
• Excalidraw Enhanced: Export as SVG
• Excalidraw Enhanced: Open drawing source
• Excalidraw Enhanced: Browse local libraries
• Excalidraw Enhanced: Undo (Ctrl/Cmd+Z)
• Excalidraw Enhanced: Redo (Ctrl+Y, Ctrl+Shift+Z, or Cmd+Shift+Z)

Plugins

Open the plug tab in the default Excalidraw sidebar and select Add EA script to register an Obsidian Excalidraw-style .md or .js script. Scripts use the familiar ea and utils objects. Portable drawing APIs are supported; APIs that require an Obsidian vault, Markdown view, or another Obsidian plugin are not available. See the EA script guide.

Select Add plugin to load a local plugin folder containing excalidraw-plugin.json and a CommonJS entry file. Loaded plugins are restored automatically, can be enabled or disabled at any time, show their state/source in the sidebar, and can register persistent buttons in the canvas plugin toolbar. Deleting a local plugin lets you keep its source folder or move the whole folder to the system recycle bin after a second confirmation.

The main extension contains no third-party plugin source and installs no plugins automatically. The Typst formula and Object Markdown plugins live in their own repositories. Download or clone the desired plugin, then use Add plugin and select its folder or excalidraw-plugin.json.

The canvas Tool dock is a shared surface rather than a plugin-only counter. Its compact launcher sits immediately left of Excalidraw's help button and expands the registered plugin actions, extension actions, status entries, and other contributed tools horizontally to the left. Plugin management remains in the plug tab of the default Excalidraw sidebar. The dock can hold multiple items and scrolls when the row grows.

Third-party VS Code extensions can also register actions and toolbar buttons programmatically. See the plugin API and package format. Formula plugins should also read the formula editor API guide.

Open the default Excalidraw sidebar and select the cloud tab to browse online libraries. Online library metadata and selected library files come from the official excalidraw/excalidraw-libraries repository; they are requested only when the online tab is opened.

License

GNU GPL v3.0 (GPL-3.0-only). See LICENSE.