diagrams-js

Extend diagrams-js with custom import/export formats, metadata providers, and hooks. Create plugins for Docker Compose, Terraform, cloud provider metadata, and more.

Import and export Kubernetes YAML manifests with diagrams-js. Convert Kubernetes manifests to architecture diagrams and vice versa.

Command-line interface for diagrams-js. Install @diagrams-js/cli and use diagrams <command> to render, export, diff, init, watch, and manage plugins. Cross-platform CLI with programmatic API. Supports file and stdin input.

Visual diff for diagrams. Compare two versions of a diagram to see added, removed, and modified elements with color-coded side-by-side rendering. Perfect for code reviews, documentation, and architecture evolution tracking.

Create custom plugins for diagrams-js to extend import/export capabilities. Package structure, plugin API, best practices, and real-world examples. Use context.lib for runtime exports, context.loadResourcesList for resource discovery, and context.loadYaml for YAML parsing without bundling dependencies.

Using diagrams-js in browsers with CDN (esm.sh), bundlers, and import maps. DOM insertion of SVG, data URLs for embedding in img tags, file downloads with diagram.save(). ESM-only - requires type="module".

Grouping nodes with diagram.cluster() and nested clusters via cluster.cluster(). Adding nodes to clusters with cluster.add(). Visual organization with themed backgrounds. Connecting nodes across clusters.

Connecting nodes with .to() (forward), .from() (reverse), .with() (undirected). Using Edge() for styling with color, style, label, forward, reverse options. Chaining connections and connecting to multiple targets with arrays.

Rendering diagrams to multiple formats. SVG output as string, PNG/JPG as Uint8Array (requires sharp in Node.js), DOT format as Graphviz source, JSON for serialization. Data URLs for embedding. Saving files with diagram.save().

SVG export and import for diagrams. Render diagrams to SVG with embedded metadata for round-trip serialization. Import previously exported SVG images back into editable diagrams. Alternative to JSON serialization with self-contained visual + data format.

Creating nodes with external icons using Custom() function. Support for remote URLs (browsers), local files (Node.js), and data URLs. Customize appearance with shape, width, height, margin options. Async icon loading with automatic injection into SVG output.

Configuring diagram appearance and layout. Set direction (TB/BT/LR/RL), theme (pastel/neutral/blues/greens/orange), curve style (ortho/curved/spline/polyline). Apply custom Graphviz attributes via graphAttr, nodeAttr, edgeAttr. Enable autolabel for automatic node type prefixes.

Installation and first steps with diagrams-js. Install via npm/yarn/pnpm/bun or CDN. Create diagrams with Diagram(), add nodes with diagram.add(), render with await diagram.render(). Covers ES modules, import maps, and basic diagram lifecycle.

JSON export and import for diagrams. Serialize diagrams to JSON for cloud architecture provisioning, infrastructure-as-code integration, and tool interoperability. Import JSON with automatic icon resolution.

Using diagrams-js in Node.js with npm installation. File system saving, PNG/JPG rendering with sharp package. Local icon files for Custom nodes. Buffer handling for binary output formats.

Using 2000+ pre-built node classes from 17+ cloud providers. Import from diagrams-js/{provider}/{category} with auto-generated icons. Providers: AWS, Azure, GCP, Kubernetes, On-premises, AlibabaCloud, DigitalOcean, Elastic, Firebase, Generic, GIS, IBM, OCI, OpenStack, Outscale, Programming, SaaS, C4.

Migrating from Python diagrams library to TypeScript. Converting context managers to function calls, >> operator to .to(), << operator to .from(), - operator to .with(), Cluster syntax, import paths. Key differences: explicit diagram.add(), async render(), no destroy().

Import and export Docker Compose files with diagrams-js. Convert docker-compose.yml to architecture diagrams and vice versa.