tldraw is a monorepo providing an open-source infinite-canvas SDK for building collaborative whiteboard/drawing applications in React. The core library (`@tldraw/editor`, `@tldraw/tldraw`) exposes a highly extensible shape/tool/overlay system with signal-based reactivity, real-time synchronization (`@tldraw/sync-core`), and a full UI component library (menus, toolbars, dialogs, style panels, commenting). The repository also includes a production-grade web application (tldraw.com) with authentication (Clerk), file management, real-time sync via Cloudflare Durable Objects, MCP server integration, and a Zero-based relational data layer for multi-user features. Additional assets include a VS Code extension, an AI agent starter kit, a documentation site, an extensive example gallery (~100+ recipes), and deployment infrastructure for Cloudflare Workers, Vercel, and template demos. The architecture is modular—core packages have minimal dependencies—and the codebase demonstrates strong engineering practices: comprehensive unit and e2e testing, a custom validation library with path-aware errors, an efficient small-set implementation (`ArraySet`), and a debounce utility that returns cancelable promises.
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-skill is a comprehensive AI agent skill for generating, editing, synchronizing, inspecting, testing, and publishing editable draw.io diagrams from natural language, codebases, infrastructure-as-code, and data schemas. It provides a unified CLI (`diagramctl.py`) orchestrating a pipeline of 39+ specialized scripts covering importers (Python, JS/TS, Go, Rust, Terraform, K8s, Docker, SQL DDL, OpenAPI, CI pipelines), auto-layout (Graphviz, ELK, deterministic sequence/C4/tube-map), shape search (10k+ official icons), AI/LLM brand logos (321 brands), style presets, diagram diff, time-lapse, heat maps, and export (PNG, SVG, PPTX, Mermaid, HTML viewer). The architecture is centered on a versioned Diagram IR (JSON Schema) that separates meaning, provenance, and geometry, enabling incremental sync preserving manual layout, multi-view projection, architecture contract testing (Diagram-as-Test), what-if failure simulation, and accessible Story Mode. It integrates with agent platforms via a SKILL.md and an optional MCP server (`diagramctl_mcp.py`) exposing nine tools over stdio, and supports CI integration through GitHub Actions for PR diff and architecture test gates. The project is actively maintained with semantic versioning, 174 unit tests, and a changelog tracking releases through v3.2.0.
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.
nix-topology is a NixOS-based tool that automatically generates infrastructure and network diagrams as SVGs from NixOS configurations. It uses a global topology module to aggregate information from multiple NixOS hosts, extracting data about interfaces, services, containers, and virtual machines via specialized extractors. The gathered topology is then rendered using ELK for layout and converted to SVG via custom tools (elk-to-svg and html-to-svg), producing both a physical connection diagram (showing nodes as cards with hardware and service details) and a network-centric view (showing logical networks and their connections). The architecture is modular, with clear separation between information gathering, topology aggregation, and rendering.
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.
This repository provides 'Diagrams', a Python library that lets you define cloud system architecture diagrams as Python code. It renders diagrams using Graphviz, supporting a wide range of cloud providers (AWS, Azure, GCP, Kubernetes, etc.) through auto-generated node classes. The library includes a CLI tool to execute diagram scripts and a web-based playground (React/TypeScript) that runs the library in-browser via Pyodide, allowing interactive editing and export. The architecture is a library with a CLI entry point, plus a separate SPA playground. Key entry points are the `diagrams` CLI command and the `Diagram`/`Node` classes. External dependencies include Graphviz (system binary), Jinja2, and for the playground: Pyodide, @hpcc-js/wasm-graphviz, React, CodeMirror. The codebase is well-structured with a code generation pipeline for provider nodes, comprehensive testing, and a polished user experience.
This repository implements an MCP (Model Context Protocol) server that renders Excalidraw diagrams with hand-drawn style animations. It provides two primary tools: `read_me` (returns a cheat sheet with element format and color palettes) and `create_view` (renders diagrams from Excalidraw JSON elements with streaming draw-on animations). The architecture is a Node.js server supporting both Streamable HTTP and stdio transports, with a React-based widget that uses Excalidraw's `exportToSvg` for SVG rendering (not the full canvas component). Key features include: progressive element streaming with morphdom DOM diffing, smooth viewport camera animation, interactive fullscreen editing with checkpoint/restore persistence (file, memory, or Redis backends), pencil stroke audio feedback, and one-click export to excalidraw.com. The server is deployable on Vercel via serverless functions. The codebase demonstrates strong engineering practices with clean abstractions, well-documented design decisions, and a focus on performance (no blink on final render, efficient SVG diffing).
FlowGram is a comprehensive, production-grade visual workflow development framework from ByteDance. The codebase implements two distinct editing paradigms — fixed-layout (automatic positioning with composite nodes like loops, branches) and free-layout (node-position-free with lines) — both built on a shared plugin architecture using inversify for dependency injection. The framework includes a form engine with reactive fields, validation, and effects; a variable engine with AST-based type inference and scoped lifecycle; and a runtime engine capable of executing workflows with executors for LLM, HTTP, code (QuickJS sandbox), and conditions. The repository contains over 40 packages managed via Rush monorepo, encompassing core libraries, plugins (history, minimap, auto-layout, group, snap, clipboard, export), UI material libraries (Semi UI, Ant Design), a CLI tool for scaffolding, multiple demo applications, and comprehensive documentation. The system is actively maintained with regular commits, CI workflows, and E2E tests. Notable technical decisions include a local fork of the use-gesture library for canvas interaction, heavy decorator-based IoC, and support for both React 17 and 18. While the architecture is well-structured and extensible, the codebase shows signs of duplication between fixed and free layouts, numerous demo-specific components, and some deprecated APIs that indicate ongoing refactoring.
Heimer is a cross-platform desktop mind map editor built with Qt (C++17). It provides a graphical interface for creating, editing, and organizing mind maps with features like adjustable grid, automatic layout optimization, undo/redo, copy/paste, image embedding, and export to PNG/SVG. The architecture follows a layered design: domain layer (Graph, MindMapData, LayoutOptimizer), application layer (services, state machine, settings proxy), view layer (Qt widgets, QGraphicsScene/View, dialogs), and infrastructure layer (file I/O, XML serialization). Key entry points include main.cpp, Application class, MainWindow, EditorView, and EditorService. Data flows from user interactions through EditorView to EditorService, which manipulates the MindMapData (graph) and triggers serialization via AlzFileIO. External dependencies are limited to Qt (5 or 6) and two bundled small libraries (SimpleLogger for logging, Argengine for CLI argument parsing). The layout optimizer uses simulated annealing to arrange nodes, and undo/redo is implemented via snapshot-based state capture. The codebase demonstrates solid engineering practices with unit tests, CI/CD pipelines, and multi-language support.
flowchart.js is a JavaScript library for rendering SVG flowcharts from a text-based DSL. It parses user-defined flowchart syntax into a chart object, positions symbols with collision avoidance, and draws connectors using Raphael.js for cross-browser SVG abstraction. The library supports standard flowchart symbols (start, end, operation, input/output, subroutine, condition, parallel) with flowstate styling (past/current/future), custom link annotations, and click handlers. Architecture-wise, it follows a modular UMD pattern: index.js serves as the entry point exporting FlowChart.parse, while src/ contains separate modules for parsing (flowchart.parse.js), chart management (flowchart.chart.js), symbol base class (flowchart.symbol.js), symbol-type implementations, drawing utilities (flowchart.functions.js), helpers (flowchart.helpers.js), and defaults (flowchart.defaults.js). A jQuery plugin (jquery-plugin.js) enables DOM integration. The code demonstrates clean separation of concerns but relies on the outdated Raphael 2.3.0 dependency and uses a legacy Webpack 1.x build system, indicating moderate technical drift.
This repository is a Vue.js 3 component library for building interactive node-based diagrams, inspired by react-diagrams. It provides a `Diagram` component that renders an SVG canvas with draggable nodes, ports, and links, supporting pan/zoom, grid snapping, resizable nodes, custom node types, context menus, serialization, and edit modes. The architecture is a classic Vue component library: a main `Diagram.vue` orchestrates SVG rendering via `vue-svg-pan-zoom`, while `DiagramModel` and `DiagramNode` classes manage the data model. The codebase includes extensive Storybook stories and a documentation site built with Nuxt. While functional and well-documented, the main diagram component is monolithic and mixes concerns, and some features (like port deletion) are incomplete. The library is actively maintained and uses modern tooling (Vite, TypeScript, Vitest).