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.
drawio-desktop is an Electron-based desktop application that wraps the core draw.io diagramming editor (included as a git submodule). It provides a fully offline diagramming experience with a security-first design: Content Security Policy prevents remote script execution, IPC is gated through contextBridge with sender validation, and file operations enforce path authorisation against symlink attacks. The application supports CLI-based batch export (PNG, PDF, SVG, HTML, XML) with a hand-rolled argument parser, per-window file watching, auto-update via electron-updater, and platform-specific builds for Windows (x64/arm64, MSI, NSIS, APPX), macOS (dmg, zip, Quick Look preview), and Linux (AppImage, deb, rpm, snap). The architecture is a monolithic Electron main process (src/main/electron.js) communicating with the renderer (drawio submodule) through a secure IPC bridge. The codebase demonstrates high craftsmanship in security-sensitive areas such as backup file writes using exclusive temp files and rename, CLI export symlink handling, and per-window file watch registry. It is actively maintained with recent commits and comprehensive CI/CD pipelines.
bpmn-js is a mature, extensible JavaScript library for rendering and editing BPMN 2.0 diagrams in the browser. It provides a full-featured modeler (Viewer, NavigatedViewer, Modeler) built on top of diagram-js, with support for import/export of BPMN XML and SVG, undo/redo, copy/paste, element replacement, grid snapping, auto-layout, and a rich set of modeling behaviors that enforce BPMN semantic rules. The architecture follows a modular dependency injection pattern (didi) with event-driven communication, command interceptors for undoable operations, and pluggable providers for context pads, palettes, popup menus, and renderers. The codebase is well-tested with hundreds of integration and unit tests, and includes benchmarks for large diagrams. It is actively maintained by the bpmn.io team and used widely in workflow and process automation tools.
GoJS is a commercial JavaScript/TypeScript diagramming library for building interactive graphs, flowcharts, org charts, and data-visualization editors in the browser. This repository is the distribution/SDK point: it ships prebuilt core bundles (release/go.js, release/go-module.js, release/go-debug.js, release/go.mjs), TypeScript declarations (release/go.d.ts), and an extensive extension kit in both classic script (extensions/) and ES-module/TypeScript (extensionsJSM/) forms. The actual core source tree is excluded (src/ is git-ignored); users consume GoJS as an npm package or script tag and build diagram templates with a fluent API backed by GraphLinksModel/TreeModel JSON data. In production the library is a model-driven rendering and editing engine: applications push node/link data into a go.Model, declarative templates and bindings map that data to Parts, and GoJS handles canvas/SVG rendering, layout, hit-testing, undo/redo, selection, and interactive tools. There are no server endpoints or standalone executables. The extension kit is intentionally sample-grade: every file warns that APIs can change in point releases and advises copying code into the consumer's project. Despite that, the extensions demonstrate sophisticated, well-structured algorithms—circle/rectangle packing, distance-transform heatmaps, quadtree spatial indexing, SCC-based swimlane routing, and table/flow layouts—and follow consistent patterns such as option-object constructors, transaction-safe mutations, and clone-protected subclasses. No test suite is present, and the same extension is duplicated across TS, ESM JS, and classic JS, creating drift risk. License is not open-source: evaluation, non-commercial, and commercial tiers are defined in the license HTML files.
diagram-js is a modular, extensible JavaScript library for building interactive web-based diagram editors. It provides the foundational infrastructure—an event-driven architecture via EventBus, a command pattern with full undo/redo support via CommandStack, and a DI container (didi) for composing features as independent modules. The codebase includes core services (Canvas, ElementRegistry, GraphicsFactory) for managing SVG rendering, hit testing, and element lifecycle, along with a rich set of interaction features: drag-and-drop creation/move/resize/connect, snapping, grid snapping, auto-resize, auto-place, bendpoint editing, lasso selection, space tool, popup menus, context pads, palettes, search, overlays, copy/paste, and keyboard bindings. It is designed for downstream domain-specific editors (e.g., bpmn-js, dmn-js) which extend it via provider interfaces and rule systems. The library is well-tested with an extensive suite using Mocha/Chai/Sinon and runs on modern browsers. Its architecture emphasizes decoupling, extensibility, and reusable patterns.
Foblex Flow is an Angular-native library for building visual node editors, workflow builders, diagram editors, and AI pipeline UIs. It provides a comprehensive set of components and directives (f-flow, f-canvas, f-node, f-connection, f-connector, f-draggable, f-minimap, f-selection-area, etc.) along with plugins for managed state (undo/redo), accessibility (keyboard navigation), layout engines (dagre, elk), reflow-on-resize, and control schemes. The repository is a monorepo (NX) containing the core library, layout packages, a markdown renderer, a documentation portal with SSR, and multiple example applications (call center, schema designer, tournament bracket, UML diagram, marketing automation). The library is production-ready, actively maintained, and demonstrates high craftsmanship with decoupled architecture (mediator pattern), signal-based state management, Web Worker offloading for connection rendering, and extensive E2E testing.
drawDB is a free, open-source, client-side web application for designing relational database schemas and generating SQL. It provides an interactive ER diagram editor with support for multiple database dialects (MySQL, PostgreSQL, SQLite, MariaDB, MSSQL, Oracle), import/export in SQL, DBML, JSON, Mermaid, and Markdown, and features like auto-arrange, auto-connect foreign keys, schema validation, migration generation, and versioning via GitHub Gists. The architecture is a React single-page application (Vite + Tailwind CSS + Semi UI) with state managed through custom React Contexts and hooks, persistence via IndexedDB (Dexie), and an optional cloud backend through an extension system. It is primarily an application, with no data research or ML components.
This repository implements an AI-powered diagram generation and editing application that integrates draw.io with large language models. Users describe diagrams in natural language, and the system generates, edits, and validates draw.io XML diagrams through a chat interface. The architecture is a Next.js 16 web application with App Router, supporting multiple AI providers (OpenAI, Anthropic, Google, AWS Bedrock, DeepSeek, Ollama, etc.) via the Vercel AI SDK. It includes a desktop Electron app with offline draw.io support, an MCP server for external AI agent integration (Claude, Cursor, VS Code), and an admin panel for runtime configuration of models, access controls, and observability (Langfuse). The application is self-hostable via Docker and deployable to Vercel or Cloudflare Workers. The core workflow involves a chat interface where users send prompts, optionally upload files (images, PDF, text) or URLs, and the AI responds with tool calls to display, edit, or append diagrams. The system handles streaming XML generation, debounced diagram updates, and automatic XML validation/fixing to correct common LLM output issues. It supports multi-page diagrams, shape libraries (AWS, Azure, GCP, etc.), and experimental VLM-based diagram validation. Session history, templates, and diagram versions are persisted in IndexedDB, with optional server-side quota management via DynamoDB. The codebase demonstrates strong engineering practices with comprehensive unit and E2E tests, CI/CD pipelines, multi-platform builds (web, desktop, MCP server), and i18n support for English, Chinese, and Japanese. It features reusable patterns such as a registry-driven admin settings system, DNS-based SSRF protection, and a standalone XML validation library. While the project is actively maintained and uses modern frameworks, its large dependency surface and complex configuration precedence (env vars, admin panel, file-based) introduce some maintenance overhead.