This skill builds on diagrams-js/getting-started and diagrams-js/json-serialization. Read them first for foundational concepts.

diagrams-js — Diagram Diff

Compare two versions of a diagram visually. The diff feature highlights added, removed, and modified elements with color-coded overlays in a side-by-side view.

Use Cases

• Code reviews: See exactly what infrastructure changed in a PR
• Documentation: Show evolution of system architecture
• Auditing: Track what was added or removed between deployments

Core Patterns

Compute and Render a Diff

import { computeDiff, renderDiff } from "diagrams-js";
import { writeFileSync } from "fs";