This repository provides @mermaid-js/mermaid-cli, a command-line interface (CLI) and Node.js library for rendering Mermaid diagram definitions into SVG, PNG, or PDF files. It processes individual .mmd files or Markdown documents containing Mermaid code blocks, replacing them with embedded images. The tool is a critical part of the Mermaid ecosystem, enabling automated diagram generation in CI/CD pipelines, documentation builds, and static site generators. The architecture is centered around Puppeteer, which launches a headless Chromium browser to render the diagrams. The src/index.js module orchestrates the entire workflow: parsing CLI arguments via commander, loading Mermaid configurations, setting up the browser page with custom CSS and icon packs, invoking the Mermaid rendering engine, and post-processing the output (e.g., font embedding, SVG serialization). A standout component is the custom Puppeteer request interceptor (src/puppeteerIntercept.js), which cleverly serves local ESM modules to the browser without requiring a local HTTP server, solving a common pain point in browser-based tooling. The codebase exhibits high craftsmanship with clean abstractions, comprehensive JSDoc documentation, and a strong test suite. Key modules like the font embedder (src/browser/fontEmbedder.js) and CSS tokenizer (src/browser/tokenizeCSS.js) are self-contained, well-tested, and demonstrate non-obvious skill in handling complex web standards. The renderMermaid function in src/index.js provides a clean, reusable API for programmatic use. Overall, this is a mature, actively maintained, and exceptionally well-engineered tool.
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.
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.
This repository is a production-grade Agent Skill and CLI tool for generating geometry-safe technical diagrams from structured JSON or natural language descriptions. It produces SVG, PNG, animated GIF, and offline interactive HTML outputs across 12 visual styles (11 generator-driven, 1 AI-authored) and supports 14 UML diagram types with domain-specific semantic contracts for C4, cloud, event, and ops profiles. The system features a deterministic orthogonal routing engine, composition quality gates, a validated SVG-to-GIF motion pipeline with per-style animation contracts, and a strict validation framework. It is distributed as an npm package and a Claude Code skill, with a nested mirror for `npx skills add` installation. The codebase is well-tested with extensive regression and pixel-level gates, though it suffers from some duplication between the root and skill mirror directories and hardcoded contract constants.
Madopic is a client-side web application that converts Markdown content into images (PNG, PDF, HTML) with support for mathematical formulas, diagrams, charts, and custom styling. It operates as a single-page application with a split-screen interface: users write Markdown in the left editor and see a live preview on the right. The application processes Markdown through a pipeline that includes syntax highlighting, formula rendering (via KaTeX/mhchem), diagram rendering (via Mermaid), chart rendering (via ECharts), and custom card syntax, all before updating the preview. The application emphasizes a seamless user experience with real-time previews, customizable themes (background, font size, layout), and multiple export options. It implements sophisticated features like offline image persistence using IndexedDB with an in-memory cache, a protected token system to prevent interference between different Markdown extensions (such as preventing math formula replacements inside code blocks), and exact export cloning to ensure that the exported image matches the preview precisely, including handling of specific aspect ratios for platforms like Xiaohongshu and WeChat Moments. Built with vanilla HTML, CSS, and JavaScript, Madopic relies on several CDN-hosted libraries for its core functionality but maintains a lightweight, dependency-conscious architecture. The application is designed as a progressive web app (PWA) and includes features like local draft autosave, keyboard shortcuts, and responsive design to cater to a wide range of use cases from academic to social media content creation.
drawio-skill is a comprehensive toolkit for generating, manipulating, validating, and publishing draw.io architecture diagrams from natural language, codebases, infrastructure-as-code, API specifications, and other structured sources. It provides a unified CLI (`diagramctl.py`) and an optional MCP server (`diagramctl_mcp.py`) that expose workflows for building, syncing, viewing, testing, reviewing, querying, what-if analysis, story generation, and publishing diagrams. The system uses a formal Diagram Intermediate Representation (IR) to separate semantic meaning from geometry, enabling incremental reconciliation, multi-view projection, architecture contract enforcement, and accessible HTML story output. It includes 15+ importers for languages (Python, JS, Go, Rust), IaC (Terraform, Kubernetes, Docker Compose), schemas (SQL, OpenAPI, AsyncAPI, Protobuf, GraphQL), and live infrastructure (Docker, Terraform state). The project is packaged as an AI agent skill compatible with Claude Code, Cursor, Copilot, and other Agent Skills hosts, and ships with GitHub Actions for CI integration. While primarily an application, it also bundles curated icon indices and style presets that could be considered data assets.