$ show hediet/vscode-drawio
This repository is a VS Code extension that integrates Draw.io (diagrams.net) into the Visual Studio Code editor. It enables users to create, edit, and view Draw.io diagrams directly within VS Code, supporting standalone files (.drawio, .dio) and inline diagrams embedded in Markdown via fenced code blocks or HTML comments. The extension provides offline functionality by bundling a version of Draw.io, with optional online fallback, and includes features like Live Share collaboration, code linking from diagram symbols to source code, diagram export/conversion, and theme synchronization. The architecture follows standard VS Code extension patterns with a main entry point (src/index.ts), extension core (src/Extension.ts), editor service (src/DrawioEditorService.ts), Draw.io client for iframe communication (src/DrawioClient/), and specialized features for Live Share, code linking, and inline Markdown editing. Communication between the extension and the embedded Draw.io iframe occurs via postMessage API, with state management using Mobx and resource cleanup via disposable patterns. The extension handles diagram persistence through file system operations and metadata embedding in SVG/PNG files. Key reusable components include a configuration abstraction utility (VsCodeSetting.ts), a Mobx autorun disposable tracker (autorunTrackDisposables.ts), an event-driven Draw.io client for iframe communication (DrawioClient.ts), a Markdown diagram parser (diagramParser.ts), and a Live Share session manager (LiveshareSession.ts). These components demonstrate loose coupling, clear separation of concerns, and patterns applicable beyond this specific extension. The project is actively maintained with automated workflows for updating the bundled Draw.io submodule, indicating low technical drift and strong ongoing maintenance.
The LLM identified 5 files worth highlighting for reuse:
Wraps VS Code's configuration API with serialization/deserialization support for complex objects. Provides typed access to workspace/global settings with automatic change notifications. Self-contained, depends only on vscode, and extractable to any VS Code extension needing robust settings management.
Combines Mobx's autorun with automatic disposable tracking to prevent memory leaks. Ensures reactions and their disposables are cleaned up when the owner is disposed. Demonstrates advanced Mobx usage patterns for safe reactive programming in long-lived applications.
Abstracts communication with embedded Draw.io iframe using postMessage and EventEmitter. Provides promise-based API for loading/saving diagrams, exporting images, and invoking Draw.io actions. Loosely coupled, reusable for embedding any postMessage-capable web application in a VS Code webview.
Parses and manipulates Markdown diagram blocks (```drawio or HTML comments). Extracts diagram content, replaces blocks, and handles nested code blocks. Pure function with no side effects, easily testable, and reusable in any Markdown processing pipeline requiring custom block handling.
Manages Live Share session state for cursor/selection sharing in diagrams. Synchronizes state via Live Share APIs with efficient batching and proper disposal. Encapsulates collaboration logic, making it adaptable to other real-time collaboration frameworks beyond Live Share.