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 drawio-mcp repository provides a comprehensive ecosystem for AI-assisted diagram creation using the Model Context Protocol (MCP). It consists of four integrated approaches: an MCP App Server for inline diagram rendering in AI chat interfaces (deployable as Node.js or Cloudflare Worker), an MCP Tool Server for opening diagrams in the draw.io browser editor, assistant-specific plugins for Claude Code, Codex, and GitHub Copilot, and project instructions for Python-based diagram generation. The system enables AI assistants to create diagrams from Mermaid or XML input, apply layouts (ELK/libavoid), and export to various formats while emphasizing data residency controls—self-hosted options keep all diagram data local, with cloud export requiring explicit user action via draw.io Desktop CLI.