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.