Mermaid is a mature, browser-oriented TypeScript monorepo that renders Markdown-like text definitions into SVG diagrams. In production it supports over 20 diagram families (flowchart, sequence, class, state, gantt, mindmap, pie, git, ER, C4, sankey, block, agentflow, and more), with a pipeline that detects diagram type from text, lazily loads a parser, builds a diagram-specific data model, and renders through a shared rendering-util layer. Parsing is split across Langium, Chevrotain, and legacy JISON grammars; layout is provided by dagre, ELK, a custom swimlane/orthogonal router, and tidy-tree plugins. The public API (initialize/run/parse/registerExternalDiagrams) makes this a plugin-extensible library rather than a standalone application, though it also ships a local editor, dev-explorer, and extensive e2e tooling. The codebase shows high engineering craft: CI is extensive with Vitest, Playwright visual regression, code coverage, security scanning, dependency automation, and changesets for versioning. Accessibility, XSS sanitization, and config validation are treated as first-class concerns. The theme system is particularly well-structured, managing multiple looks and color palettes through a centralized color-theme gate. The primary weaknesses are scale-driven: mixed parser ecosystems, a very large config surface, many beta diagram types, and highly intricate layout code that is expensive to change. It is neither a data-research repository nor a service; its research-like components are the layout algorithms and geometry validation, which remain embedded in a library architecture.
Excalidraw is an open-source virtual whiteboard and diagramming application, published both as a hosted PWA (excalidraw-app) and as an npm library (@excalidraw/excalidraw). The system provides an infinite canvas with hand-drawn-style rendering, supporting a wide range of shapes (rectangles, ellipses, arrows, lines, freedraw, text, sticky notes, images, frames, embeddables) and tools (laser pointer, eraser, bucket fill, lasso selection, shape recognition). It features real-time collaboration via WebSocket (socket.io) and Firebase, with end-to-end encryption, cursor sharing, and follow/unfollow. The architecture is a React-based single-page application with a modular monorepo structure: the core editor logic resides in packages/excalidraw, element manipulation in packages/element, geometry utilities in packages/math, shared constants and data structures in packages/common, and export helpers in packages/utils. State management uses Jotai atoms and a custom action registration system (ActionManager). The editor renders to an HTML5 canvas with a separate SVG overlay for interactive elements. Key entry points include packages/excalidraw/index.tsx (library export) and excalidraw-app/index.tsx (hosted app bootstrap). Data flows from user interactions through actions to element mutations, scene updates, and canvas re-rendering. External dependencies include Firebase (Firestore, Storage), socket.io, Radix UI, Jotai, roughjs, and various build tools. The codebase also includes an AI-assisted text-to-diagram feature (TTD dialog) that converts Mermaid syntax into Excalidraw elements via streaming SSE and auto-fix logic.
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.
D2 is a declarative diagramming language and compiler implemented in Go. It parses a textual DSL, compiles to an intermediate representation, applies automatic layout via multiple engines (Dagre, ELK, and the custom TALA engine), and renders to SVG, PNG, PDF, PPTX, ASCII art, and animated GIF. The architecture is a pipeline: parser (d2parser) → compiler (d2compiler/d2ir) → graph (d2graph) → layout (d2layouts) → renderer (d2renderers). It also includes a language server (d2lsp) for IDE integration and JavaScript/WASM bindings for browser and Node.js usage. The codebase is production-grade with extensive testing, resource safety patterns (work guards, budgets, transactions), security hardening (SVG escaping, network policy), and a CI/CD release pipeline. External dependencies include Go modules for layout algorithms, bundled fonts, and Noto Color Emoji. The system is primarily a CLI tool and Go library, with a secondary JavaScript API.
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.
LiveCanvas is a collaborative whiteboard and diagramming web application built with Next.js 14, Convex as the real-time backend, and Kinde for authentication. It allows users to create teams, manage files, and edit documents using Editor.js alongside an Excalidraw-based canvas for freeform drawing. The architecture follows a standard Next.js App Router pattern with client-side rendering for authenticated routes and server components for the landing page. Data flows through Convex mutations and queries, with file content (document JSON and whiteboard elements) persisted as strings. The application is functional but exhibits several minor issues: the dark mode CSS is incorrectly defined (identical to light mode), there are typos in mutation argument names ('archieved' instead of 'archived'), and the codebase lacks tests or CI/CD configuration. While it demonstrates integration of multiple third-party libraries, the components are tightly coupled to the app's specific data model and are not easily reusable outside this project.