diagramkitDiagram files to images, with dark mode

Render .mermaid, .excalidraw, and .drawio files to SVG/PNG/JPEG/WebP with automatic light and dark theme variants.

Three Diagram Engines

Supports Mermaid, Excalidraw, and Draw.io files out of the box. Extension aliases like .mmd, .mmdc, .dio, and .drawio.xml are recognized automatically.

Light & Dark Mode

Renders both theme variants in a single pass. Dark SVGs are post-processed with WCAG-based contrast optimization to ensure readability.

Four Output Formats

SVG (default), PNG, JPEG, and WebP. Raster formats support configurable scale and quality settings.

Incremental Builds

SHA-256 content hashing tracks what has changed. Only stale diagrams are re-rendered, with automatic orphan cleanup.

Watch Mode

File watcher re-renders diagrams on save. Integrates with any dev server workflow.

CLI & JS API

Use the diagramkit CLI for quick rendering, or import the JavaScript API for programmatic control in build scripts and tooling.

Quick Start

bash

# Install
npm add diagramkit

# Install the browser engine once per environment
npx diagramkit warmup

# Optional: required for PNG, JPEG, and WebP output
npm add sharp

# Render all diagrams in the current directory
npx diagramkit render .

Output goes to a .diagrams/ folder next to each source file:

docs/
  architecture.mermaid
  .diagrams/
    architecture-light.svg
    architecture-dark.svg
    diagrams.manifest.json

Use a <picture> element for automatic light/dark switching in HTML:

html

<picture>
  <source srcset=".diagrams/architecture-dark.svg" media="(prefers-color-scheme: dark)">
  <img src=".diagrams/architecture-light.svg" alt="Architecture diagram">
</picture>