From bd7a315c2c38ea805ddfee189f5a147cc3d08060 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Fri, 13 Mar 2026 15:01:47 +0300
Subject: [PATCH] Add visual graph editor for entity interconnections

SVG-based node graph with ELK.js autolayout showing all 13 entity types
and their relationships. Features include:

- Pan/zoom canvas with bounds clamping and dead-zone click detection
- Interactive minimap with viewport rectangle, click-to-pan, drag-to-move,
  and dual resize handles (bottom-left/bottom-right)
- Movable toolbar with drag handle and inline zoom percentage indicator
- Entity-type SVG icons from Lucide icon set with subtype-specific overrides
- Command palette search (/) with keyboard navigation and fly-to
- Node selection with upstream/downstream chain highlighting
- Double-click to zoom-to-card, edit/delete overlay on hover
- Legend panel, orphan node detection, running state indicators
- Full i18n support with languageChanged re-render
- Catmull-Rom-to-cubic bezier edge routing for smooth curves

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 contexts/frontend.md                          |  12 +
 .../static/css/graph-editor.css               | 606 ++++++++++++++++
 server/src/wled_controller/static/js/app.js   |  20 +-
 .../static/js/core/graph-canvas.js            | 233 +++++++
 .../static/js/core/graph-edges.js             | 169 +++++
 .../static/js/core/graph-layout.js            | 320 +++++++++
 .../static/js/core/graph-nodes.js             | 255 +++++++
 .../static/js/core/tab-indicator.js           |   1 +
 .../static/js/features/graph-editor.js        | 656 ++++++++++++++++++
 .../static/js/features/tabs.js                |   2 +
 .../wled_controller/static/locales/en.json    |  13 +-
 .../wled_controller/static/locales/ru.json    |  13 +-
 .../wled_controller/static/locales/zh.json    |  13 +-
 .../src/wled_controller/templates/index.html  |  11 +
 14 files changed, 2320 insertions(+), 4 deletions(-)
 create mode 100644 server/src/wled_controller/static/css/graph-editor.css
 create mode 100644 server/src/wled_controller/static/js/core/graph-canvas.js
 create mode 100644 server/src/wled_controller/static/js/core/graph-edges.js
 create mode 100644 server/src/wled_controller/static/js/core/graph-layout.js
 create mode 100644 server/src/wled_controller/static/js/core/graph-nodes.js
 create mode 100644 server/src/wled_controller/static/js/features/graph-editor.js

diff --git a/contexts/frontend.md b/contexts/frontend.md
index 11eadf1..e79b54e 100644
--- a/contexts/frontend.md
+++ b/contexts/frontend.md
@@ -144,3 +144,15 @@ When adding **new tabs, sections, or major UI elements**, update the correspondi
 - In inline `<script>` blocks (where `t()` may not be available yet): use `window.t ? t('key') : 'fallback'`
 - In HTML templates: use `data-i18n="key"` for text content, `data-i18n-title="key"` for title attributes, `data-i18n-aria-label="key"` for aria-labels
 - Keys follow dotted namespace convention: `feature.context.description` (e.g. `device.error.brightness`, `calibration.saved`)
+
+### Dynamic content and language changes
+
+When a feature module generates HTML with baked-in `t()` calls (e.g., toolbar button titles, legend text), that content won't update when the user switches language. To handle this, listen for the `languageChanged` event and re-render:
+
+```javascript
+document.addEventListener('languageChanged', () => {
+    if (_initialized) _reRender();
+});
+```
+
+Static HTML using `data-i18n` attributes is handled automatically by the i18n system. Only dynamically generated HTML needs this pattern.
diff --git a/server/src/wled_controller/static/css/graph-editor.css b/server/src/wled_controller/static/css/graph-editor.css
new file mode 100644
index 0000000..00a36f6
--- /dev/null
+++ b/server/src/wled_controller/static/css/graph-editor.css
@@ -0,0 +1,606 @@
+/* ── Graph Editor ─────────────────────────────────────── */
+
+/* Full viewport: hide footer & scroll-to-top when graph is active */
+#tab-graph #graph-editor-content {
+    padding: 0;
+    margin: 0;
+}
+
+.graph-container {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - var(--header-height, 60px) - 20px);
+    overflow: hidden;
+    background: transparent;
+    border-radius: 8px;
+}
+
+.graph-toolbar {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    display: flex;
+    gap: 4px;
+    z-index: 20;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 4px;
+    box-shadow: 0 2px 8px var(--shadow-color);
+}
+
+.graph-toolbar-drag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    cursor: grab;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    user-select: none;
+    border-right: 1px solid var(--border-color);
+    margin-right: 2px;
+    padding-right: 2px;
+    letter-spacing: -1px;
+}
+
+.graph-toolbar-drag:active {
+    cursor: grabbing;
+}
+
+.graph-toolbar .btn-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background 0.15s;
+}
+
+.graph-toolbar .btn-icon:hover {
+    background: var(--bg-secondary);
+}
+
+.graph-toolbar .btn-icon.active {
+    background: var(--primary-color);
+    color: var(--primary-contrast);
+}
+
+.graph-toolbar-sep {
+    width: 1px;
+    background: var(--border-color);
+    margin: 4px 2px;
+}
+
+/* ── Legend panel ── */
+
+.graph-legend {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 20;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 10px 14px;
+    box-shadow: 0 2px 8px var(--shadow-color);
+    font-size: 0.8rem;
+    display: none;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.graph-legend.visible {
+    display: block;
+}
+
+.graph-legend-title {
+    font-weight: 600;
+    margin-bottom: 6px;
+    color: var(--text-color);
+}
+
+.graph-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 0;
+    color: var(--text-secondary);
+}
+
+.graph-legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+
+/* ── Minimap ── */
+
+.graph-minimap {
+    position: absolute;
+    z-index: 20;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px var(--shadow-color);
+    overflow: hidden;
+    display: none;
+    min-width: 120px;
+    min-height: 80px;
+}
+
+.graph-minimap.visible {
+    display: block;
+}
+
+.graph-minimap svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: crosshair;
+}
+
+.graph-minimap-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px 6px;
+    cursor: grab;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    user-select: none;
+}
+
+.graph-minimap-header.dragging {
+    cursor: grabbing;
+}
+
+.graph-minimap-resize {
+    position: absolute;
+    bottom: 0;
+    width: 14px;
+    height: 14px;
+    z-index: 2;
+}
+
+.graph-minimap-resize::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    width: 8px;
+    height: 8px;
+    border-bottom: 2px solid var(--text-muted);
+    opacity: 0.5;
+}
+
+.graph-minimap-resize-br {
+    right: 0;
+    cursor: se-resize;
+}
+
+.graph-minimap-resize-br::after {
+    right: 2px;
+    border-right: 2px solid var(--text-muted);
+}
+
+.graph-minimap-resize-bl {
+    left: 0;
+    cursor: sw-resize;
+}
+
+.graph-minimap-resize-bl::after {
+    left: 2px;
+    border-left: 2px solid var(--text-muted);
+}
+
+.graph-minimap-viewport {
+    fill: var(--primary-color);
+    fill-opacity: 0.08;
+    stroke: var(--primary-color);
+    stroke-width: 2;
+    stroke-opacity: 0.7;
+    vector-effect: non-scaling-stroke;
+}
+
+.graph-minimap-node {
+    rx: 2;
+    ry: 2;
+}
+
+/* ── SVG canvas ── */
+
+.graph-svg {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+}
+
+.graph-svg.panning {
+    cursor: grabbing;
+}
+
+.graph-svg.connecting {
+    cursor: crosshair;
+}
+
+/* ── Grid background ── */
+
+.graph-grid-dot {
+    fill: var(--border-color);
+    opacity: 0.3;
+}
+
+/* ── Node styles ── */
+
+.graph-node {
+    cursor: pointer;
+}
+
+.graph-node-body {
+    fill: var(--card-bg);
+    stroke: var(--border-color);
+    stroke-width: 1;
+    rx: 8;
+    ry: 8;
+    transition: stroke 0.15s;
+}
+
+.graph-node:hover .graph-node-body {
+    stroke: var(--text-secondary);
+}
+
+.graph-node.selected .graph-node-body {
+    stroke: var(--primary-color);
+    stroke-width: 2;
+}
+
+.graph-node-color-bar {
+    rx: 8;
+    ry: 8;
+}
+
+/* Clip the right side of color bar to be square */
+.graph-node-color-bar-clip rect {
+    rx: 8;
+    ry: 8;
+}
+
+.graph-node-title {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+    font-family: 'DM Sans', sans-serif;
+}
+
+.graph-node-subtitle {
+    fill: var(--text-secondary);
+    font-size: 10px;
+    font-family: 'DM Sans', sans-serif;
+}
+
+.graph-node-icon {
+    stroke: var(--text-muted);
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    opacity: 0.5;
+}
+
+/* ── Running indicator (animated gradient border) ── */
+
+.graph-node.running .graph-node-body {
+    stroke: url(#running-gradient);
+    stroke-width: 2;
+}
+
+@keyframes graph-running-rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.graph-node.running .graph-node-running-ring {
+    animation: graph-running-rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+/* Running dot indicator */
+.graph-node-running-dot {
+    r: 4;
+    fill: var(--success-color);
+}
+
+/* ── Ports ── */
+
+.graph-port {
+    cursor: crosshair;
+}
+
+.graph-port circle {
+    fill: var(--bg-secondary);
+    stroke: var(--text-muted);
+    stroke-width: 1.5;
+    r: 5;
+    transition: fill 0.15s, stroke 0.15s, r 0.15s;
+}
+
+.graph-port:hover circle {
+    fill: var(--primary-color);
+    stroke: var(--primary-color);
+    r: 6;
+}
+
+.graph-port.connected circle {
+    fill: var(--text-secondary);
+    stroke: var(--text-secondary);
+}
+
+.graph-port-label {
+    fill: var(--text-muted);
+    font-size: 9px;
+    font-family: 'DM Sans', sans-serif;
+}
+
+/* ── Edges ── */
+
+.graph-edge {
+    fill: none;
+    stroke-width: 2;
+    opacity: 0.6;
+    transition: opacity 0.15s, stroke-width 0.15s;
+}
+
+.graph-edge:hover {
+    opacity: 1;
+    stroke-width: 3;
+}
+
+.graph-edge-arrow {
+    fill: currentColor;
+    opacity: 0.6;
+}
+
+.graph-edge.highlighted {
+    opacity: 1;
+    stroke-width: 2.5;
+}
+
+.graph-edge.dimmed {
+    opacity: 0.12;
+}
+
+/* Edge type colors */
+.graph-edge-picture    { stroke: #42A5F5; color: #42A5F5; }
+.graph-edge-colorstrip { stroke: #66BB6A; color: #66BB6A; }
+.graph-edge-value      { stroke: #FFA726; color: #FFA726; }
+.graph-edge-device     { stroke: #78909C; color: #78909C; }
+.graph-edge-clock      { stroke: #26C6DA; color: #26C6DA; stroke-dasharray: 6 3; }
+.graph-edge-audio      { stroke: #EF5350; color: #EF5350; }
+.graph-edge-template   { stroke: #AB47BC; color: #AB47BC; stroke-dasharray: 4 2; }
+.graph-edge-scene      { stroke: #CE93D8; color: #CE93D8; }
+.graph-edge-default    { stroke: var(--text-muted); color: var(--text-muted); }
+
+/* Animated flow dots on active edges */
+.graph-edge-flow {
+    fill: none;
+    stroke-width: 0;
+}
+
+.graph-edge-flow circle {
+    r: 3;
+    opacity: 0.8;
+}
+
+/* ── Drag connection preview ── */
+
+.graph-drag-edge {
+    fill: none;
+    stroke: var(--primary-color);
+    stroke-width: 2;
+    stroke-dasharray: 6 3;
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+/* ── Hover overlay (action buttons) ── */
+
+.graph-node-overlay {
+    display: none;
+    pointer-events: none;
+}
+
+.graph-node:hover .graph-node-overlay {
+    display: block;
+}
+
+.graph-node-overlay-bg {
+    fill: var(--card-bg);
+    stroke: var(--border-color);
+    stroke-width: 1;
+    rx: 6;
+    ry: 6;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.graph-node-overlay-btn {
+    cursor: pointer;
+    pointer-events: all;
+}
+
+.graph-node-overlay-btn rect {
+    fill: transparent;
+    rx: 4;
+    ry: 4;
+}
+
+.graph-node-overlay-btn:hover rect {
+    fill: var(--bg-secondary);
+}
+
+.graph-node-overlay-btn text {
+    fill: var(--text-color);
+    font-size: 14px;
+    text-anchor: middle;
+    dominant-baseline: central;
+    pointer-events: none;
+}
+
+.graph-node-overlay-btn.danger:hover rect {
+    fill: var(--danger-color);
+}
+
+.graph-node-overlay-btn.danger:hover text {
+    fill: var(--primary-contrast);
+}
+
+/* ── Selection rectangle ── */
+
+.graph-selection-rect {
+    fill: var(--primary-color);
+    fill-opacity: 0.08;
+    stroke: var(--primary-color);
+    stroke-width: 1;
+    stroke-dasharray: 4 2;
+}
+
+/* ── Orphan warning ── */
+
+.graph-node.orphan .graph-node-body {
+    stroke: var(--warning-color);
+    stroke-dasharray: 4 3;
+}
+
+/* ── Search highlight ── */
+
+.graph-node.search-match .graph-node-body {
+    stroke: var(--info-color);
+    stroke-width: 2.5;
+}
+
+/* ── Zoom label (inline in toolbar) ── */
+
+.graph-zoom-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    user-select: none;
+    padding: 0 2px;
+}
+
+/* ── Empty state ── */
+
+.graph-empty {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.graph-empty h3 {
+    font-size: 1.2rem;
+    margin-bottom: 8px;
+}
+
+.graph-empty p {
+    font-size: 0.9rem;
+}
+
+/* ── Graph command palette ── */
+
+.graph-search {
+    position: absolute;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 30;
+    width: 360px;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    box-shadow: 0 8px 24px var(--shadow-color);
+    display: none;
+}
+
+.graph-search.visible {
+    display: block;
+}
+
+.graph-search-input {
+    width: 100%;
+    padding: 10px 14px;
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    background: transparent;
+    color: var(--text-color);
+    font-size: 0.9rem;
+    font-family: inherit;
+    outline: none;
+    border-radius: 10px 10px 0 0;
+}
+
+.graph-search-results {
+    max-height: 280px;
+    overflow-y: auto;
+}
+
+.graph-search-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    cursor: pointer;
+    transition: background 0.1s;
+}
+
+.graph-search-item:hover,
+.graph-search-item.active {
+    background: var(--bg-secondary);
+}
+
+.graph-search-item-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    flex-shrink: 0;
+}
+
+.graph-search-item-name {
+    font-size: 0.85rem;
+    color: var(--text-color);
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.graph-search-item-type {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+/* ── Loading overlay for relayout ── */
+
+.graph-loading-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+    border-radius: 8px;
+}
diff --git a/server/src/wled_controller/static/js/app.js b/server/src/wled_controller/static/js/app.js
index ce8f9e4..a86a6b1 100644
--- a/server/src/wled_controller/static/js/app.js
+++ b/server/src/wled_controller/static/js/app.js
@@ -157,6 +157,13 @@ import {
     updateCalibrationLine, resetCalibrationView,
 } from './features/advanced-calibration.js';
 
+// Layer 5.5: graph editor
+import {
+    loadGraphEditor, openGraphSearch, closeGraphSearch,
+    toggleGraphLegend, toggleGraphMinimap,
+    graphFitAll, graphZoomIn, graphZoomOut, graphRelayout,
+} from './features/graph-editor.js';
+
 // Layer 6: tabs, navigation, command palette, settings
 import { switchTab, initTabs, startAutoRefresh, handlePopState } from './features/tabs.js';
 import { navigateToCard } from './core/navigation.js';
@@ -455,6 +462,17 @@ Object.assign(window, {
     updateCalibrationLine,
     resetCalibrationView,
 
+    // graph editor
+    loadGraphEditor,
+    openGraphSearch,
+    closeGraphSearch,
+    toggleGraphLegend,
+    toggleGraphMinimap,
+    graphFitAll,
+    graphZoomIn,
+    graphZoomOut,
+    graphRelayout,
+
     // tabs / navigation / command palette
     switchTab,
     startAutoRefresh,
@@ -488,7 +506,7 @@ document.addEventListener('keydown', (e) => {
 
     // Tab shortcuts: Ctrl+1..4 (skip when typing in inputs)
     if (!inInput && e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-        const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams' };
+        const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams', '5': 'graph' };
         const tab = tabMap[e.key];
         if (tab) {
             e.preventDefault();
diff --git a/server/src/wled_controller/static/js/core/graph-canvas.js b/server/src/wled_controller/static/js/core/graph-canvas.js
new file mode 100644
index 0000000..963868e
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/graph-canvas.js
@@ -0,0 +1,233 @@
+/**
+ * Graph SVG canvas — pan, zoom, viewBox management.
+ */
+
+const MIN_ZOOM = 0.15;
+const MAX_ZOOM = 3;
+const ZOOM_SENSITIVITY = 0.001;
+const PAN_DEAD_ZONE = 4; // px before drag starts
+const BOUNDS_MARGIN_FACTOR = 0.5; // allow panning half a viewport past data bounds
+
+export class GraphCanvas {
+    /**
+     * @param {SVGSVGElement} svg
+     */
+    constructor(svg) {
+        this.svg = svg;
+        /** @type {SVGGElement} */
+        this.root = svg.querySelector('.graph-root');
+        this._vx = 0;
+        this._vy = 0;
+        this._zoom = 1;
+        this._panning = false;
+        this._panPending = false; // left-click pending dead-zone check
+        this._panStart = null;
+        this._panViewStart = null;
+        this._listeners = [];
+        this._onZoomChange = null;
+        this._onViewChange = null; // called on every pan/zoom with getViewport()
+        this._justPanned = false; // true briefly after a pan ends, survives through click event
+        this._bounds = null; // data bounds for view clamping {x, y, width, height}
+        /** Set to true externally to suppress pan on left-click (e.g. during node drag). */
+        this.blockPan = false;
+        this._bind();
+    }
+
+    get zoom() { return this._zoom; }
+    get viewX() { return this._vx; }
+    get viewY() { return this._vy; }
+    /** True while the user is actively panning (drag started). */
+    get isPanning() { return this._panning; }
+    /** True briefly after a pan gesture ends — use to suppress click-after-pan. */
+    get wasPanning() { return this._justPanned; }
+
+    set onZoomChange(fn) { this._onZoomChange = fn; }
+    set onViewChange(fn) { this._onViewChange = fn; }
+
+    /** Set data bounds for view clamping. */
+    setBounds(bounds) { this._bounds = bounds; }
+
+    /** Get the visible viewport in graph coordinates. */
+    getViewport() {
+        const r = this.svg.getBoundingClientRect();
+        return {
+            x: this._vx,
+            y: this._vy,
+            width: r.width / this._zoom,
+            height: r.height / this._zoom,
+        };
+    }
+
+    /** Convert screen (client) coordinates to graph coordinates. */
+    screenToGraph(sx, sy) {
+        const r = this.svg.getBoundingClientRect();
+        return {
+            x: (sx - r.left) / this._zoom + this._vx,
+            y: (sy - r.top) / this._zoom + this._vy,
+        };
+    }
+
+    /** Set view to center on a point at current zoom. */
+    panTo(gx, gy, animate = true) {
+        const r = this.svg.getBoundingClientRect();
+        this._vx = gx - (r.width / this._zoom) / 2;
+        this._vy = gy - (r.height / this._zoom) / 2;
+        this._applyTransform(animate);
+    }
+
+    /** Fit all content within the viewport with padding. */
+    fitAll(bounds, animate = true) {
+        if (!bounds) return;
+        const r = this.svg.getBoundingClientRect();
+        const pad = 60;
+        const bw = bounds.width + pad * 2;
+        const bh = bounds.height + pad * 2;
+        const zx = r.width / bw;
+        const zy = r.height / bh;
+        this._zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, Math.min(zx, zy)));
+        this._vx = bounds.x - pad - (r.width / this._zoom - bw) / 2;
+        this._vy = bounds.y - pad - (r.height / this._zoom - bh) / 2;
+        this._applyTransform(animate);
+        if (this._onZoomChange) this._onZoomChange(this._zoom);
+    }
+
+    /** Set zoom level centered on screen point. */
+    zoomTo(level, cx, cy) {
+        const r = this.svg.getBoundingClientRect();
+        const mx = cx !== undefined ? cx : r.width / 2 + r.left;
+        const my = cy !== undefined ? cy : r.height / 2 + r.top;
+        const gx = (mx - r.left) / this._zoom + this._vx;
+        const gy = (my - r.top) / this._zoom + this._vy;
+        this._zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, level));
+        this._vx = gx - (mx - r.left) / this._zoom;
+        this._vy = gy - (my - r.top) / this._zoom;
+        this._applyTransform(false);
+        if (this._onZoomChange) this._onZoomChange(this._zoom);
+    }
+
+    /** Set zoom and center on a graph-space point in one animated step. */
+    zoomToPoint(level, gx, gy) {
+        const r = this.svg.getBoundingClientRect();
+        this._zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, level));
+        this._vx = gx - (r.width / this._zoom) / 2;
+        this._vy = gy - (r.height / this._zoom) / 2;
+        this._applyTransform(true);
+        if (this._onZoomChange) this._onZoomChange(this._zoom);
+    }
+
+    zoomIn() { this.zoomTo(this._zoom * 1.25); }
+    zoomOut() { this.zoomTo(this._zoom / 1.25); }
+
+    destroy() {
+        for (const [el, ev, fn, opts] of this._listeners) {
+            el.removeEventListener(ev, fn, opts);
+        }
+        this._listeners = [];
+    }
+
+    // ── Private ──
+
+    _on(el, ev, fn, opts) {
+        el.addEventListener(ev, fn, opts);
+        this._listeners.push([el, ev, fn, opts]);
+    }
+
+    _bind() {
+        this._on(this.svg, 'wheel', this._onWheel.bind(this), { passive: false });
+        this._on(this.svg, 'pointerdown', this._onPointerDown.bind(this));
+        this._on(window, 'pointermove', this._onPointerMove.bind(this));
+        this._on(window, 'pointerup', this._onPointerUp.bind(this));
+    }
+
+    _onWheel(e) {
+        e.preventDefault();
+        const delta = -e.deltaY * ZOOM_SENSITIVITY;
+        const newZoom = this._zoom * (1 + delta);
+        this.zoomTo(newZoom, e.clientX, e.clientY);
+    }
+
+    _onPointerDown(e) {
+        // Middle button or Ctrl/Meta+left → immediate pan
+        if (e.button === 1 || (e.button === 0 && (e.ctrlKey || e.metaKey))) {
+            e.preventDefault();
+            this._startPan(e);
+            return;
+        }
+
+        // Left-click on SVG background or edge (not on a node) → pending pan
+        if (e.button === 0 && !this.blockPan) {
+            const onNode = e.target.closest('.graph-node');
+            if (!onNode) {
+                this._panPending = true;
+                this._panStart = { x: e.clientX, y: e.clientY };
+                this._panViewStart = { x: this._vx, y: this._vy };
+            }
+        }
+    }
+
+    _onPointerMove(e) {
+        // Check dead-zone for pending left-click pan
+        if (this._panPending && !this._panning) {
+            const dx = e.clientX - this._panStart.x;
+            const dy = e.clientY - this._panStart.y;
+            if (Math.abs(dx) > PAN_DEAD_ZONE || Math.abs(dy) > PAN_DEAD_ZONE) {
+                this._panning = true;
+                this.svg.classList.add('panning');
+                this.svg.setPointerCapture(e.pointerId);
+            }
+        }
+
+        if (!this._panning) return;
+        const dx = (e.clientX - this._panStart.x) / this._zoom;
+        const dy = (e.clientY - this._panStart.y) / this._zoom;
+        this._vx = this._panViewStart.x - dx;
+        this._vy = this._panViewStart.y - dy;
+        this._applyTransform(false);
+    }
+
+    _onPointerUp() {
+        this._panPending = false;
+        if (this._panning) {
+            this._panning = false;
+            this._justPanned = true;
+            this.svg.classList.remove('panning');
+            // Clear justPanned after the click event fires (next microtask + rAF)
+            requestAnimationFrame(() => { this._justPanned = false; });
+        }
+    }
+
+    _startPan(e) {
+        this._panning = true;
+        this._panPending = false;
+        this._panStart = { x: e.clientX, y: e.clientY };
+        this._panViewStart = { x: this._vx, y: this._vy };
+        this.svg.classList.add('panning');
+        this.svg.setPointerCapture(e.pointerId);
+    }
+
+    _clampView() {
+        if (!this._bounds) return;
+        const r = this.svg.getBoundingClientRect();
+        const vw = r.width / this._zoom;
+        const vh = r.height / this._zoom;
+        const mx = vw * BOUNDS_MARGIN_FACTOR;
+        const my = vh * BOUNDS_MARGIN_FACTOR;
+        const b = this._bounds;
+        this._vx = Math.max(b.x - mx, Math.min(b.x + b.width - vw + mx, this._vx));
+        this._vy = Math.max(b.y - my, Math.min(b.y + b.height - vh + my, this._vy));
+    }
+
+    _applyTransform(animate = false) {
+        this._clampView();
+        const t = `scale(${this._zoom}) translate(${-this._vx}px, ${-this._vy}px)`;
+        if (animate) {
+            this.root.style.transition = 'transform 0.35s ease';
+            this.root.style.transform = t;
+            setTimeout(() => { this.root.style.transition = ''; }, 360);
+        } else {
+            this.root.style.transition = '';
+            this.root.style.transform = t;
+        }
+        if (this._onViewChange) this._onViewChange(this.getViewport());
+    }
+}
diff --git a/server/src/wled_controller/static/js/core/graph-edges.js b/server/src/wled_controller/static/js/core/graph-edges.js
new file mode 100644
index 0000000..e80d41f
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/graph-edges.js
@@ -0,0 +1,169 @@
+/**
+ * SVG edge rendering for the graph editor — bezier curves with arrowheads.
+ */
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function svgEl(tag, attrs = {}) {
+    const el = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+    return el;
+}
+
+/**
+ * Render all edges into the given SVG group.
+ * @param {SVGGElement} group
+ * @param {Array} edges - [{from, to, type, points, fromNode, toNode}]
+ */
+export function renderEdges(group, edges) {
+    while (group.firstChild) group.firstChild.remove();
+
+    // Defs for arrowheads
+    const defs = svgEl('defs');
+    const arrowTypes = new Set(edges.map(e => e.type));
+    for (const type of arrowTypes) {
+        defs.appendChild(_createArrowMarker(type));
+    }
+    group.appendChild(defs);
+
+    for (const edge of edges) {
+        const path = _renderEdge(edge);
+        group.appendChild(path);
+    }
+}
+
+function _createArrowMarker(type) {
+    const marker = svgEl('marker', {
+        id: `arrow-${type}`,
+        viewBox: '0 0 10 10',
+        refX: 9,
+        refY: 5,
+        markerWidth: 8,
+        markerHeight: 8,
+        orient: 'auto-start-reverse',
+    });
+    const path = svgEl('path', {
+        d: 'M 0 0 L 10 5 L 0 10 z',
+        class: `graph-edge-arrow graph-edge-${type}`,
+    });
+    marker.appendChild(path);
+    return marker;
+}
+
+function _renderEdge(edge) {
+    const { from, to, type, points, fromNode, toNode, field } = edge;
+    const cssClass = `graph-edge graph-edge-${type}`;
+    const d = points ? _pointsToPath(points) : _defaultBezier(fromNode, toNode);
+
+    const path = svgEl('path', {
+        class: cssClass,
+        d,
+        'marker-end': `url(#arrow-${type})`,
+        'data-from': from,
+        'data-to': to,
+        'data-field': field || '',
+    });
+
+    // Tooltip
+    const title = svgEl('title');
+    title.textContent = field ? field.replace(/_/g, ' ') : `${from} → ${to}`;
+    path.appendChild(title);
+
+    return path;
+}
+
+/**
+ * Convert ELK layout points to SVG path string.
+ * Uses Catmull-Rom-to-Cubic conversion for smooth curves through all points.
+ */
+function _pointsToPath(points) {
+    if (points.length < 2) return '';
+    if (points.length === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+
+    // For 3+ points, build a smooth cubic bezier through all of them
+    let d = `M ${points[0].x} ${points[0].y}`;
+
+    for (let i = 0; i < points.length - 1; i++) {
+        const p0 = points[Math.max(0, i - 1)];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[Math.min(points.length - 1, i + 2)];
+
+        // Catmull-Rom to cubic bezier control points
+        const cp1x = p1.x + (p2.x - p0.x) / 6;
+        const cp1y = p1.y + (p2.y - p0.y) / 6;
+        const cp2x = p2.x - (p3.x - p1.x) / 6;
+        const cp2y = p2.y - (p3.y - p1.y) / 6;
+
+        d += ` C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`;
+    }
+
+    return d;
+}
+
+/**
+ * Fallback bezier when no ELK routing is available.
+ */
+function _defaultBezier(fromNode, toNode) {
+    const x1 = fromNode.x + fromNode.width;
+    const y1 = fromNode.y + fromNode.height / 2;
+    const x2 = toNode.x;
+    const y2 = toNode.y + toNode.height / 2;
+    const dx = Math.abs(x2 - x1) * 0.4;
+    return `M ${x1} ${y1} C ${x1 + dx} ${y1} ${x2 - dx} ${y2} ${x2} ${y2}`;
+}
+
+/**
+ * Highlight edges that connect to a specific node (upstream chain).
+ */
+export function highlightChain(edgeGroup, nodeId, edges) {
+    // Find all ancestors recursively
+    const upstream = new Set();
+    const stack = [nodeId];
+    while (stack.length) {
+        const current = stack.pop();
+        for (const e of edges) {
+            if (e.to === current && !upstream.has(e.from)) {
+                upstream.add(e.from);
+                stack.push(e.from);
+            }
+        }
+    }
+    upstream.add(nodeId);
+
+    // Downstream too
+    const downstream = new Set();
+    const dStack = [nodeId];
+    while (dStack.length) {
+        const current = dStack.pop();
+        for (const e of edges) {
+            if (e.from === current && !downstream.has(e.to)) {
+                downstream.add(e.to);
+                dStack.push(e.to);
+            }
+        }
+    }
+
+    const chain = new Set([...upstream, ...downstream]);
+
+    edgeGroup.querySelectorAll('.graph-edge').forEach(path => {
+        const from = path.getAttribute('data-from');
+        const to = path.getAttribute('data-to');
+        const inChain = chain.has(from) && chain.has(to);
+        path.classList.toggle('highlighted', inChain);
+        path.classList.toggle('dimmed', !inChain);
+    });
+
+    return chain;
+}
+
+/**
+ * Clear all highlight/dim classes from edges.
+ */
+export function clearEdgeHighlights(edgeGroup) {
+    edgeGroup.querySelectorAll('.graph-edge').forEach(path => {
+        path.classList.remove('highlighted', 'dimmed');
+    });
+}
diff --git a/server/src/wled_controller/static/js/core/graph-layout.js b/server/src/wled_controller/static/js/core/graph-layout.js
new file mode 100644
index 0000000..67b2766
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/graph-layout.js
@@ -0,0 +1,320 @@
+/**
+ * Graph layout via ELK.js — converts entity data into positioned nodes/edges.
+ */
+
+/* global ELK */
+
+const NODE_WIDTH = 190;
+const NODE_HEIGHT = 56;
+
+const ELK_OPTIONS = {
+    'elk.algorithm': 'layered',
+    'elk.direction': 'RIGHT',
+    'elk.spacing.nodeNode': '40',
+    'elk.layered.spacing.nodeNodeBetweenLayers': '80',
+    'elk.layered.spacing.edgeNodeBetweenLayers': '30',
+    'elk.spacing.edgeEdge': '15',
+    'elk.spacing.edgeNode': '20',
+    'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+    'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
+    'elk.edgeRouting': 'SPLINES',
+    'elk.layered.mergeEdges': 'true',
+};
+
+/**
+ * Build ELK graph from entity model and run layout.
+ * @param {Object} entities - { devices, captureTemplates, pictureSources, ... }
+ * @returns {Promise<{nodes: Map, edges: Array, bounds: {x,y,width,height}}>}
+ */
+export async function computeLayout(entities) {
+    const elk = new ELK();
+    const { nodes: nodeList, edges: edgeList } = buildGraph(entities);
+
+    const elkGraph = {
+        id: 'root',
+        layoutOptions: ELK_OPTIONS,
+        children: nodeList.map(n => ({
+            id: n.id,
+            width: NODE_WIDTH,
+            height: NODE_HEIGHT,
+        })),
+        edges: edgeList.map((e, i) => ({
+            id: `e${i}`,
+            sources: [e.from],
+            targets: [e.to],
+        })),
+    };
+
+    const layout = await elk.layout(elkGraph);
+
+    const nodeMap = new Map();
+    for (const child of layout.children) {
+        const src = nodeList.find(n => n.id === child.id);
+        if (src) {
+            nodeMap.set(child.id, {
+                ...src,
+                x: child.x,
+                y: child.y,
+                width: child.width,
+                height: child.height,
+            });
+        }
+    }
+
+    // Build edge paths from layout
+    const edges = [];
+    for (let i = 0; i < edgeList.length; i++) {
+        const layoutEdge = layout.edges?.[i];
+        const srcEdge = edgeList[i];
+        const fromNode = nodeMap.get(srcEdge.from);
+        const toNode = nodeMap.get(srcEdge.to);
+        if (!fromNode || !toNode) continue;
+
+        let points = null;
+        if (layoutEdge?.sections?.[0]) {
+            const sec = layoutEdge.sections[0];
+            points = [sec.startPoint, ...(sec.bendPoints || []), sec.endPoint];
+        }
+
+        edges.push({
+            ...srcEdge,
+            points,
+            fromNode,
+            toNode,
+        });
+    }
+
+    // Compute bounding box
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of nodeMap.values()) {
+        minX = Math.min(minX, n.x);
+        minY = Math.min(minY, n.y);
+        maxX = Math.max(maxX, n.x + n.width);
+        maxY = Math.max(maxY, n.y + n.height);
+    }
+
+    const bounds = nodeMap.size > 0
+        ? { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+        : { x: 0, y: 0, width: 400, height: 300 };
+
+    return { nodes: nodeMap, edges, bounds };
+}
+
+/* ── Entity color mapping ── */
+
+export const ENTITY_COLORS = {
+    device:               '#78909C',
+    capture_template:     '#8D6E63',
+    picture_source:       '#42A5F5',
+    pp_template:          '#AB47BC',
+    audio_source:         '#EF5350',
+    audio_template:       '#E57373',
+    color_strip_source:   '#66BB6A',
+    value_source:         '#FFA726',
+    sync_clock:           '#26C6DA',
+    output_target:        '#FFCA28',
+    scene_preset:         '#CE93D8',
+    automation:           '#A5D6A7',
+    pattern_template:     '#BCAAA4',
+};
+
+export const ENTITY_LABELS = {
+    device:               'Device',
+    capture_template:     'Capture Template',
+    picture_source:       'Picture Source',
+    pp_template:          'PP Template',
+    audio_source:         'Audio Source',
+    audio_template:       'Audio Template',
+    color_strip_source:   'Color Strip Source',
+    value_source:         'Value Source',
+    sync_clock:           'Sync Clock',
+    output_target:        'Output Target',
+    scene_preset:         'Scene Preset',
+    automation:           'Automation',
+    pattern_template:     'Pattern Template',
+};
+
+/* ── Edge type (for CSS class) ── */
+
+function edgeType(fromKind, toKind, field) {
+    if (field === 'clock_id') return 'clock';
+    if (fromKind === 'device') return 'device';
+    if (fromKind === 'picture_source' || toKind === 'picture_source') return 'picture';
+    if (fromKind === 'color_strip_source') return 'colorstrip';
+    if (fromKind === 'value_source') return 'value';
+    if (fromKind === 'audio_source' || fromKind === 'audio_template') return 'audio';
+    if (fromKind === 'capture_template' || fromKind === 'pp_template' || fromKind === 'pattern_template') return 'template';
+    if (fromKind === 'scene_preset') return 'scene';
+    return 'default';
+}
+
+/* ── Graph builder ── */
+
+function buildGraph(e) {
+    const nodes = [];
+    const edges = [];
+    const nodeIds = new Set();
+
+    function addNode(id, kind, name, subtype, extra = {}) {
+        if (!id || nodeIds.has(id)) return;
+        nodeIds.add(id);
+        nodes.push({ id, kind, name: name || id, subtype: subtype || '', ...extra });
+    }
+
+    function addEdge(from, to, field, label = '') {
+        if (!from || !to || !nodeIds.has(from) || !nodeIds.has(to)) return;
+        const type = edgeType(
+            nodes.find(n => n.id === from)?.kind,
+            nodes.find(n => n.id === to)?.kind,
+            field
+        );
+        edges.push({ from, to, field, label, type });
+    }
+
+    // 1. Devices
+    for (const d of e.devices || []) {
+        addNode(d.id, 'device', d.name, d.device_type);
+    }
+
+    // 2. Capture templates
+    for (const t of e.captureTemplates || []) {
+        addNode(t.id, 'capture_template', t.name, t.engine_type);
+    }
+
+    // 3. PP templates
+    for (const t of e.ppTemplates || []) {
+        addNode(t.id, 'pp_template', t.name, '');
+    }
+
+    // 4. Audio templates
+    for (const t of e.audioTemplates || []) {
+        addNode(t.id, 'audio_template', t.name, t.engine_type);
+    }
+
+    // 5. Pattern templates
+    for (const t of e.patternTemplates || []) {
+        addNode(t.id, 'pattern_template', t.name, '');
+    }
+
+    // 6. Sync clocks
+    for (const c of e.syncClocks || []) {
+        addNode(c.id, 'sync_clock', c.name, '');
+    }
+
+    // 7. Picture sources
+    for (const s of e.pictureSources || []) {
+        addNode(s.id, 'picture_source', s.name, s.stream_type);
+    }
+
+    // 8. Audio sources
+    for (const s of e.audioSources || []) {
+        addNode(s.id, 'audio_source', s.name, s.source_type);
+    }
+
+    // 9. Value sources
+    for (const s of e.valueSources || []) {
+        addNode(s.id, 'value_source', s.name, s.source_type);
+    }
+
+    // 10. Color strip sources
+    for (const s of e.colorStripSources || []) {
+        addNode(s.id, 'color_strip_source', s.name, s.source_type);
+    }
+
+    // 11. Output targets
+    for (const t of e.outputTargets || []) {
+        addNode(t.id, 'output_target', t.name, t.target_type, { running: t.running || false });
+    }
+
+    // 12. Scene presets
+    for (const s of e.scenePresets || []) {
+        addNode(s.id, 'scene_preset', s.name, '');
+    }
+
+    // 13. Automations
+    for (const a of e.automations || []) {
+        addNode(a.id, 'automation', a.name, '', { running: a.enabled || false });
+    }
+
+    // ── Edges ──
+
+    // Picture source edges
+    for (const s of e.pictureSources || []) {
+        if (s.capture_template_id) addEdge(s.capture_template_id, s.id, 'capture_template_id');
+        if (s.source_stream_id) addEdge(s.source_stream_id, s.id, 'source_stream_id');
+        if (s.postprocessing_template_id) addEdge(s.postprocessing_template_id, s.id, 'postprocessing_template_id');
+    }
+
+    // Audio source edges
+    for (const s of e.audioSources || []) {
+        if (s.audio_template_id) addEdge(s.audio_template_id, s.id, 'audio_template_id');
+        if (s.audio_source_id) addEdge(s.audio_source_id, s.id, 'audio_source_id');
+    }
+
+    // Value source edges
+    for (const s of e.valueSources || []) {
+        if (s.audio_source_id) addEdge(s.audio_source_id, s.id, 'audio_source_id');
+        if (s.picture_source_id) addEdge(s.picture_source_id, s.id, 'picture_source_id');
+    }
+
+    // Color strip source edges
+    for (const s of e.colorStripSources || []) {
+        if (s.picture_source_id) addEdge(s.picture_source_id, s.id, 'picture_source_id');
+        if (s.audio_source_id) addEdge(s.audio_source_id, s.id, 'audio_source_id');
+        if (s.clock_id) addEdge(s.clock_id, s.id, 'clock_id');
+
+        // Composite layers
+        if (s.layers) {
+            for (const layer of s.layers) {
+                if (layer.source_id) addEdge(layer.source_id, s.id, 'layer.source_id');
+                if (layer.brightness_source_id) addEdge(layer.brightness_source_id, s.id, 'layer.brightness_source_id');
+            }
+        }
+
+        // Mapped zones
+        if (s.zones) {
+            for (const zone of s.zones) {
+                if (zone.source_id) addEdge(zone.source_id, s.id, 'zone.source_id');
+            }
+        }
+
+        // Advanced picture calibration lines
+        if (s.calibration?.lines) {
+            for (const line of s.calibration.lines) {
+                if (line.picture_source_id) addEdge(line.picture_source_id, s.id, 'calibration.picture_source_id');
+            }
+        }
+    }
+
+    // Output target edges
+    for (const t of e.outputTargets || []) {
+        if (t.device_id) addEdge(t.device_id, t.id, 'device_id');
+        if (t.color_strip_source_id) addEdge(t.color_strip_source_id, t.id, 'color_strip_source_id');
+        if (t.brightness_value_source_id) addEdge(t.brightness_value_source_id, t.id, 'brightness_value_source_id');
+        if (t.picture_source_id) addEdge(t.picture_source_id, t.id, 'picture_source_id');
+        // KC target settings
+        if (t.settings) {
+            if (t.settings.pattern_template_id) addEdge(t.settings.pattern_template_id, t.id, 'settings.pattern_template_id');
+            if (t.settings.brightness_value_source_id) addEdge(t.settings.brightness_value_source_id, t.id, 'settings.brightness_value_source_id');
+        }
+    }
+
+    // Scene preset edges
+    for (const s of e.scenePresets || []) {
+        if (s.targets) {
+            for (const snap of s.targets) {
+                if (snap.target_id) addEdge(snap.target_id, s.id, 'target_id');
+            }
+        }
+    }
+
+    // Automation edges
+    for (const a of e.automations || []) {
+        if (a.scene_preset_id) addEdge(a.scene_preset_id, a.id, 'scene_preset_id');
+        if (a.deactivation_scene_preset_id) addEdge(a.deactivation_scene_preset_id, a.id, 'deactivation_scene_preset_id');
+    }
+
+    return { nodes, edges };
+}
+
+export { NODE_WIDTH, NODE_HEIGHT };
diff --git a/server/src/wled_controller/static/js/core/graph-nodes.js b/server/src/wled_controller/static/js/core/graph-nodes.js
new file mode 100644
index 0000000..9373862
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/graph-nodes.js
@@ -0,0 +1,255 @@
+/**
+ * SVG node rendering for the graph editor.
+ */
+
+import { ENTITY_COLORS, NODE_WIDTH, NODE_HEIGHT } from './graph-layout.js';
+import * as P from './icon-paths.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+// ── Entity kind → default icon path data ──
+const KIND_ICONS = {
+    device:              P.monitor,
+    capture_template:    P.camera,
+    pp_template:         P.wrench,
+    audio_template:      P.music,
+    pattern_template:    P.fileText,
+    picture_source:      P.tv,
+    audio_source:        P.music,
+    value_source:        P.hash,
+    color_strip_source:  P.film,
+    sync_clock:          P.clock,
+    output_target:       P.zap,
+    scene_preset:        P.sparkles,
+    automation:          P.clipboardList,
+};
+
+// ── Subtype-specific icon overrides ──
+const SUBTYPE_ICONS = {
+    color_strip_source: {
+        picture_advanced: P.monitor, static: P.palette, color_cycle: P.refreshCw,
+        gradient: P.rainbow, effect: P.zap, composite: P.link,
+        mapped: P.mapPin, mapped_zones: P.mapPin,
+        audio: P.music, audio_visualization: P.music,
+        api_input: P.send, notification: P.bellRing, daylight: P.sun, candlelight: P.flame,
+    },
+    picture_source: { raw: P.monitor, processed: P.palette, static_image: P.image },
+    value_source: {
+        static: P.layoutDashboard, animated: P.refreshCw, audio: P.music,
+        adaptive_time: P.clock, adaptive_scene: P.cloudSun, daylight: P.sun,
+    },
+    audio_source: { mono: P.mic, multichannel: P.volume2 },
+    output_target: { led: P.lightbulb, wled: P.lightbulb, key_colors: P.palette },
+};
+
+function svgEl(tag, attrs = {}) {
+    const el = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+    return el;
+}
+
+/** Truncate text to fit within maxWidth (approximate). */
+function truncate(text, maxChars = 22) {
+    if (!text) return '';
+    return text.length > maxChars ? text.slice(0, maxChars - 1) + '\u2026' : text;
+}
+
+/**
+ * Render all nodes into the given SVG group.
+ * @param {SVGGElement} group
+ * @param {Map} nodeMap - id → {id, kind, name, subtype, x, y, width, height, running}
+ * @param {Object} callbacks - { onNodeClick, onNodeDblClick, onDeleteNode, onEditNode, onTestNode }
+ */
+export function renderNodes(group, nodeMap, callbacks = {}) {
+    // Clear existing
+    while (group.firstChild) group.firstChild.remove();
+
+    for (const node of nodeMap.values()) {
+        const g = renderNode(node, callbacks);
+        group.appendChild(g);
+    }
+}
+
+/**
+ * Render a single node.
+ */
+function renderNode(node, callbacks) {
+    const { id, kind, name, subtype, x, y, width, height, running } = node;
+    const color = ENTITY_COLORS[kind] || '#666';
+
+    const g = svgEl('g', {
+        class: `graph-node${running ? ' running' : ''}`,
+        'data-id': id,
+        'data-kind': kind,
+        transform: `translate(${x}, ${y})`,
+    });
+
+    // Body rect
+    const body = svgEl('rect', {
+        class: 'graph-node-body',
+        x: 0, y: 0,
+        width, height,
+        rx: 8, ry: 8,
+    });
+    g.appendChild(body);
+
+    // Color bar (left strip)
+    const bar = svgEl('rect', {
+        class: 'graph-node-color-bar',
+        x: 0, y: 0,
+        width: 6, height,
+        rx: 8, ry: 8,
+        fill: color,
+    });
+    g.appendChild(bar);
+    // Cover the right side rounded corners of the bar
+    const barCover = svgEl('rect', {
+        x: 3, y: 0,
+        width: 4, height,
+        fill: color,
+    });
+    g.appendChild(barCover);
+
+    // Entity icon (right side)
+    const iconPaths = (SUBTYPE_ICONS[kind]?.[subtype]) || KIND_ICONS[kind];
+    if (iconPaths) {
+        const iconG = svgEl('g', {
+            class: 'graph-node-icon',
+            transform: `translate(${width - 28}, ${height / 2 - 8}) scale(0.667)`,
+        });
+        iconG.innerHTML = iconPaths;
+        g.appendChild(iconG);
+    }
+
+    // Running dot
+    if (running) {
+        const dot = svgEl('circle', {
+            class: 'graph-node-running-dot',
+            cx: width - 14, cy: 14,
+            r: 4,
+        });
+        g.appendChild(dot);
+    }
+
+    // Title (shift left edge for icon to have room)
+    const title = svgEl('text', {
+        class: 'graph-node-title',
+        x: 16, y: 24,
+    });
+    title.textContent = truncate(name, 18);
+    g.appendChild(title);
+
+    // Subtitle (type)
+    if (subtype) {
+        const sub = svgEl('text', {
+            class: 'graph-node-subtitle',
+            x: 16, y: 42,
+        });
+        sub.textContent = subtype.replace(/_/g, ' ');
+        g.appendChild(sub);
+    }
+
+    // Tooltip
+    const tip = svgEl('title');
+    tip.textContent = `${name} (${kind.replace(/_/g, ' ')})`;
+    g.appendChild(tip);
+
+    // Hover overlay (action buttons)
+    const overlay = _createOverlay(node, width, callbacks);
+    g.appendChild(overlay);
+
+    // Click handler
+    g.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (callbacks.onNodeClick) callbacks.onNodeClick(node, e);
+    });
+
+    g.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        if (callbacks.onNodeDblClick) callbacks.onNodeDblClick(node, e);
+    });
+
+    return g;
+}
+
+function _createOverlay(node, nodeWidth, callbacks) {
+    const overlay = svgEl('g', { class: 'graph-node-overlay' });
+    const btnSize = 24;
+    const btnGap = 2;
+    const btns = [
+        { icon: '\u270E', action: 'edit', cls: '' },   // ✎
+        { icon: '\u2716', action: 'delete', cls: 'danger' },  // ✖
+    ];
+    const totalW = btns.length * (btnSize + btnGap) - btnGap + 8;
+    const ox = nodeWidth - totalW - 4;
+    const oy = -btnSize - 6;
+
+    // Invisible bridge rect so hover doesn't drop when moving to overlay
+    overlay.appendChild(svgEl('rect', {
+        x: ox, y: oy,
+        width: totalW, height: btnSize + 10,
+        fill: 'transparent',
+        'pointer-events': 'all',
+    }));
+
+    // Background
+    overlay.appendChild(svgEl('rect', {
+        class: 'graph-node-overlay-bg',
+        x: ox, y: oy,
+        width: totalW, height: btnSize + 4,
+    }));
+
+    btns.forEach((btn, i) => {
+        const bx = ox + 4 + i * (btnSize + btnGap);
+        const by = oy + 2;
+        const bg = svgEl('g', { class: `graph-node-overlay-btn ${btn.cls}` });
+        bg.appendChild(svgEl('rect', { x: bx, y: by, width: btnSize, height: btnSize }));
+        const txt = svgEl('text', { x: bx + btnSize / 2, y: by + btnSize / 2 });
+        txt.textContent = btn.icon;
+        bg.appendChild(txt);
+        bg.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (btn.action === 'edit' && callbacks.onEditNode) callbacks.onEditNode(node);
+            if (btn.action === 'delete' && callbacks.onDeleteNode) callbacks.onDeleteNode(node);
+        });
+        overlay.appendChild(bg);
+    });
+
+    return overlay;
+}
+
+/**
+ * Highlight a single node (add class, scroll to).
+ */
+export function highlightNode(group, nodeId, cls = 'search-match') {
+    // Remove existing highlights
+    group.querySelectorAll(`.graph-node.${cls}`).forEach(n => n.classList.remove(cls));
+    const node = group.querySelector(`.graph-node[data-id="${nodeId}"]`);
+    if (node) node.classList.add(cls);
+    return node;
+}
+
+/**
+ * Mark orphan nodes (no incoming or outgoing edges).
+ */
+export function markOrphans(group, nodeMap, edges) {
+    const connected = new Set();
+    for (const e of edges) {
+        connected.add(e.from);
+        connected.add(e.to);
+    }
+    for (const node of nodeMap.values()) {
+        const el = group.querySelector(`.graph-node[data-id="${node.id}"]`);
+        if (!el) continue;
+        el.classList.toggle('orphan', !connected.has(node.id));
+    }
+}
+
+/**
+ * Update selection state on nodes.
+ */
+export function updateSelection(group, selectedIds) {
+    group.querySelectorAll('.graph-node').forEach(n => {
+        n.classList.toggle('selected', selectedIds.has(n.getAttribute('data-id')));
+    });
+}
diff --git a/server/src/wled_controller/static/js/core/tab-indicator.js b/server/src/wled_controller/static/js/core/tab-indicator.js
index bd14100..ac9292b 100644
--- a/server/src/wled_controller/static/js/core/tab-indicator.js
+++ b/server/src/wled_controller/static/js/core/tab-indicator.js
@@ -8,6 +8,7 @@ const TAB_SVGS = {
     automations: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>`,
     targets: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
     streams: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2-5 5-5-5"/><rect width="20" height="15" x="2" y="7" rx="2"/></svg>`,
+    graph: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="6" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M7.5 7.5 10.5 16"/><path d="M16.5 7.5 13.5 16"/></svg>`,
 };
 
 let _el = null;
diff --git a/server/src/wled_controller/static/js/features/graph-editor.js b/server/src/wled_controller/static/js/features/graph-editor.js
new file mode 100644
index 0000000..ea57be3
--- /dev/null
+++ b/server/src/wled_controller/static/js/features/graph-editor.js
@@ -0,0 +1,656 @@
+/**
+ * Graph editor — visual entity graph with autolayout, pan/zoom, search.
+ */
+
+import { GraphCanvas } from '../core/graph-canvas.js';
+import { computeLayout, ENTITY_COLORS, ENTITY_LABELS } from '../core/graph-layout.js';
+import { renderNodes, highlightNode, markOrphans, updateSelection } from '../core/graph-nodes.js';
+import { renderEdges, highlightChain, clearEdgeHighlights } from '../core/graph-edges.js';
+import {
+    devicesCache, captureTemplatesCache, ppTemplatesCache,
+    streamsCache, audioSourcesCache, audioTemplatesCache,
+    valueSourcesCache, colorStripSourcesCache, syncClocksCache,
+    outputTargetsCache, patternTemplatesCache, scenePresetsCache,
+    automationsCacheObj,
+} from '../core/state.js';
+import { t } from '../core/i18n.js';
+
+let _canvas = null;
+let _nodeMap = null;
+let _edges = null;
+let _bounds = null;
+let _selectedIds = new Set();
+let _initialized = false;
+let _legendVisible = false;
+let _minimapVisible = true;
+let _searchVisible = false;
+let _searchIndex = -1;
+let _searchItems = [];
+let _loading = false;
+
+// Minimap position/size persisted in localStorage
+const _MM_KEY = 'graph_minimap';
+function _loadMinimapRect() {
+    try { return JSON.parse(localStorage.getItem(_MM_KEY)); } catch { return null; }
+}
+function _saveMinimapRect(r) {
+    localStorage.setItem(_MM_KEY, JSON.stringify(r));
+}
+
+// Toolbar position persisted in localStorage
+const _TB_KEY = 'graph_toolbar';
+function _loadToolbarPos() {
+    try { return JSON.parse(localStorage.getItem(_TB_KEY)); } catch { return null; }
+}
+function _saveToolbarPos(r) {
+    localStorage.setItem(_TB_KEY, JSON.stringify(r));
+}
+
+/* ── Public API ── */
+
+export async function loadGraphEditor() {
+    const container = document.getElementById('graph-editor-content');
+    if (!container) return;
+    if (_loading) return;
+    _loading = true;
+
+    // First load: replace with spinner. Re-layout: overlay spinner on top.
+    if (!_initialized) {
+        container.innerHTML = '<div class="loading-spinner"></div>';
+    } else {
+        const overlay = document.createElement('div');
+        overlay.className = 'graph-loading-overlay';
+        overlay.innerHTML = '<div class="loading-spinner"></div>';
+        const gc = container.querySelector('.graph-container');
+        if (gc) gc.appendChild(overlay);
+    }
+
+    try {
+        const entities = await _fetchAllEntities();
+        const { nodes, edges, bounds } = await computeLayout(entities);
+        _nodeMap = nodes;
+        _edges = edges;
+        _bounds = bounds;
+        _renderGraph(container);
+    } finally {
+        _loading = false;
+    }
+}
+
+export function openGraphSearch() {
+    if (!_nodeMap) return;
+    const panel = document.querySelector('.graph-search');
+    if (!panel) return;
+
+    _searchItems = [];
+    for (const node of _nodeMap.values()) _searchItems.push(node);
+
+    _searchIndex = -1;
+    _searchVisible = true;
+    panel.classList.add('visible');
+    const input = panel.querySelector('.graph-search-input');
+    input.value = '';
+    input.focus();
+    _renderSearchResults('');
+}
+
+export function closeGraphSearch() {
+    _searchVisible = false;
+    const panel = document.querySelector('.graph-search');
+    if (panel) panel.classList.remove('visible');
+}
+
+export function toggleGraphLegend() {
+    _legendVisible = !_legendVisible;
+    const legend = document.querySelector('.graph-legend');
+    if (legend) legend.classList.toggle('visible', _legendVisible);
+}
+
+export function toggleGraphMinimap() {
+    _minimapVisible = !_minimapVisible;
+    const mm = document.querySelector('.graph-minimap');
+    if (mm) mm.classList.toggle('visible', _minimapVisible);
+}
+
+export function graphFitAll() {
+    if (_canvas && _bounds) _canvas.fitAll(_bounds);
+}
+
+export function graphZoomIn() { if (_canvas) _canvas.zoomIn(); }
+export function graphZoomOut() { if (_canvas) _canvas.zoomOut(); }
+
+export async function graphRelayout() {
+    await loadGraphEditor();
+}
+
+/* ── Data fetching ── */
+
+async function _fetchAllEntities() {
+    const [
+        devices, captureTemplates, ppTemplates, pictureSources,
+        audioSources, audioTemplates, valueSources, colorStripSources,
+        syncClocks, outputTargets, patternTemplates, scenePresets, automations,
+    ] = await Promise.all([
+        devicesCache.fetch(), captureTemplatesCache.fetch(), ppTemplatesCache.fetch(),
+        streamsCache.fetch(), audioSourcesCache.fetch(), audioTemplatesCache.fetch(),
+        valueSourcesCache.fetch(), colorStripSourcesCache.fetch(), syncClocksCache.fetch(),
+        outputTargetsCache.fetch(), patternTemplatesCache.fetch(), scenePresetsCache.fetch(),
+        automationsCacheObj.fetch(),
+    ]);
+    return {
+        devices, captureTemplates, ppTemplates, pictureSources,
+        audioSources, audioTemplates, valueSources, colorStripSources,
+        syncClocks, outputTargets, patternTemplates, scenePresets, automations,
+    };
+}
+
+/* ── Rendering ── */
+
+function _renderGraph(container) {
+    container.innerHTML = _graphHTML();
+
+    const svgEl = container.querySelector('.graph-svg');
+    _canvas = new GraphCanvas(svgEl);
+
+    const nodeGroup = svgEl.querySelector('.graph-nodes');
+    const edgeGroup = svgEl.querySelector('.graph-edges');
+
+    renderEdges(edgeGroup, _edges);
+    renderNodes(nodeGroup, _nodeMap, {
+        onNodeClick: _onNodeClick,
+        onNodeDblClick: _onNodeDblClick,
+        onEditNode: _onEditNode,
+        onDeleteNode: _onDeleteNode,
+    });
+    markOrphans(nodeGroup, _nodeMap, _edges);
+
+    // Set bounds for view clamping, then fit
+    if (_bounds) _canvas.setBounds(_bounds);
+    requestAnimationFrame(() => {
+        if (_canvas && _bounds) _canvas.fitAll(_bounds, false);
+    });
+
+    _canvas.onZoomChange = (z) => {
+        const label = container.querySelector('.graph-zoom-label');
+        if (label) label.textContent = `${Math.round(z * 100)}%`;
+    };
+
+    _canvas.onViewChange = (vp) => {
+        _updateMinimapViewport(container.querySelector('.graph-minimap'), vp);
+    };
+
+    _renderLegend(container.querySelector('.graph-legend'));
+    _initMinimap(container.querySelector('.graph-minimap'));
+    _initToolbarDrag(container.querySelector('.graph-toolbar'));
+
+    const searchInput = container.querySelector('.graph-search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => _renderSearchResults(e.target.value));
+        searchInput.addEventListener('keydown', _onSearchKeydown);
+    }
+
+    // Deselect on click on empty space (not after a pan gesture)
+    svgEl.addEventListener('click', (e) => {
+        if (_canvas.wasPanning) return;
+        if (!e.target.closest('.graph-node')) {
+            _deselect(nodeGroup, edgeGroup);
+        }
+    });
+
+    // Double-click empty → fit all
+    svgEl.addEventListener('dblclick', (e) => {
+        if (!e.target.closest('.graph-node')) graphFitAll();
+    });
+
+    // Prevent text selection on SVG drag
+    svgEl.addEventListener('mousedown', (e) => {
+        // Prevent default only on the SVG background / edges, not on inputs
+        if (!e.target.closest('input, textarea, select')) {
+            e.preventDefault();
+        }
+    });
+
+    container.addEventListener('keydown', _onKeydown);
+    container.setAttribute('tabindex', '0');
+    _initialized = true;
+}
+
+function _deselect(nodeGroup, edgeGroup) {
+    _selectedIds.clear();
+    if (nodeGroup) {
+        updateSelection(nodeGroup, _selectedIds);
+        nodeGroup.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
+    }
+    if (edgeGroup) clearEdgeHighlights(edgeGroup);
+}
+
+function _graphHTML() {
+    const mmRect = _loadMinimapRect();
+    // Default: bottom-right corner with 12px margin (computed after render via _initMinimap)
+    const mmStyle = mmRect ? `left:${mmRect.left}px;top:${mmRect.top}px;width:${mmRect.width}px;height:${mmRect.height}px;` : '';
+    const tbPos = _loadToolbarPos();
+    const tbStyle = tbPos ? `left:${tbPos.left}px;top:${tbPos.top}px;` : '';
+
+    return `
+        <div class="graph-container">
+            <div class="graph-toolbar" style="${tbStyle}">
+                <span class="graph-toolbar-drag" title="Drag to move">⠿</span>
+                <button class="btn-icon" onclick="graphFitAll()" title="${t('graph.fit_all')}">
+                    <svg class="icon" viewBox="0 0 24 24"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/></svg>
+                </button>
+                <button class="btn-icon" onclick="graphZoomIn()" title="${t('graph.zoom_in')}">
+                    <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>
+                </button>
+                <span class="graph-zoom-label">100%</span>
+                <button class="btn-icon" onclick="graphZoomOut()" title="${t('graph.zoom_out')}">
+                    <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M8 11h6"/></svg>
+                </button>
+                <span class="graph-toolbar-sep"></span>
+                <button class="btn-icon" onclick="openGraphSearch()" title="${t('graph.search')} (/)">
+                    <svg class="icon" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
+                </button>
+                <button class="btn-icon" onclick="toggleGraphLegend()" title="${t('graph.legend')}">
+                    <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>
+                </button>
+                <button class="btn-icon" onclick="toggleGraphMinimap()" title="${t('graph.minimap')}">
+                    <svg class="icon" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><rect width="7" height="5" x="14" y="14" rx="1" fill="currentColor" opacity="0.3"/></svg>
+                </button>
+                <span class="graph-toolbar-sep"></span>
+                <button class="btn-icon" onclick="graphRelayout()" title="${t('graph.relayout')}">
+                    <svg class="icon" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
+                </button>
+            </div>
+
+            <div class="graph-legend">
+                <div class="graph-legend-title">${t('graph.legend')}</div>
+            </div>
+
+            <div class="graph-minimap${_minimapVisible ? ' visible' : ''}" style="${mmStyle}">
+                <div class="graph-minimap-header"><span>${t('graph.minimap')}</span></div>
+                <div class="graph-minimap-resize graph-minimap-resize-br"></div>
+                <div class="graph-minimap-resize graph-minimap-resize-bl"></div>
+                <svg></svg>
+            </div>
+
+            <div class="graph-search">
+                <input class="graph-search-input" placeholder="${t('graph.search_placeholder')}" autocomplete="off">
+                <div class="graph-search-results"></div>
+            </div>
+
+            <svg class="graph-svg" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="running-gradient" gradientUnits="userSpaceOnUse">
+                        <stop offset="0%" stop-color="var(--primary-color)"/>
+                        <stop offset="50%" stop-color="var(--success-color)"/>
+                        <stop offset="100%" stop-color="var(--primary-color)"/>
+                    </linearGradient>
+                </defs>
+                <rect class="graph-bg" width="100%" height="100%" fill="transparent"/>
+                <g class="graph-root">
+                    <g class="graph-edges"></g>
+                    <g class="graph-nodes"></g>
+                </g>
+            </svg>
+
+        </div>`;
+}
+
+/* ── Legend ── */
+
+function _renderLegend(legendEl) {
+    if (!legendEl) return;
+    let html = `<div class="graph-legend-title">${t('graph.legend')}</div>`;
+    for (const [kind, color] of Object.entries(ENTITY_COLORS)) {
+        const label = ENTITY_LABELS[kind] || kind;
+        html += `<div class="graph-legend-item">
+            <span class="graph-legend-dot" style="background:${color}"></span>
+            <span>${label}</span>
+        </div>`;
+    }
+    legendEl.innerHTML = html;
+}
+
+/* ── Minimap (draggable header & resize handle) ── */
+
+function _initMinimap(mmEl) {
+    if (!mmEl || !_nodeMap || !_bounds) return;
+    const svg = mmEl.querySelector('svg');
+    if (!svg) return;
+    const container = mmEl.closest('.graph-container');
+
+    const pad = 10;
+    const vb = `${_bounds.x - pad} ${_bounds.y - pad} ${_bounds.width + pad * 2} ${_bounds.height + pad * 2}`;
+    svg.setAttribute('viewBox', vb);
+
+    let html = '';
+    for (const node of _nodeMap.values()) {
+        const color = ENTITY_COLORS[node.kind] || '#666';
+        html += `<rect class="graph-minimap-node" x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" fill="${color}" opacity="0.7"/>`;
+    }
+    // Add viewport rect (updated live via _updateMinimapViewport)
+    html += `<rect class="graph-minimap-viewport" x="0" y="0" width="0" height="0"/>`;
+    svg.innerHTML = html;
+
+    // Set default position (bottom-right corner) if no saved position
+    if (!mmEl.style.left) {
+        const cr = container.getBoundingClientRect();
+        mmEl.style.left = (cr.width - mmEl.offsetWidth - 12) + 'px';
+        mmEl.style.top = (cr.height - mmEl.offsetHeight - 12) + 'px';
+        mmEl.style.width = '200px';
+        mmEl.style.height = '130px';
+    }
+
+    // Initial viewport update
+    if (_canvas) {
+        _updateMinimapViewport(mmEl, _canvas.getViewport());
+    }
+
+    // Helper to clamp minimap within container
+    function _clampMinimap() {
+        const cr = container.getBoundingClientRect();
+        const mw = mmEl.offsetWidth, mh = mmEl.offsetHeight;
+        let l = parseFloat(mmEl.style.left) || 0;
+        let t = parseFloat(mmEl.style.top) || 0;
+        l = Math.max(0, Math.min(cr.width - mw, l));
+        t = Math.max(0, Math.min(cr.height - mh, t));
+        mmEl.style.left = l + 'px';
+        mmEl.style.top = t + 'px';
+    }
+
+    // ── Click on minimap SVG → pan main canvas to that point ──
+    let mmDraggingViewport = false;
+    svg.addEventListener('pointerdown', (e) => {
+        if (!_canvas || !_bounds) return;
+        e.preventDefault();
+        e.stopPropagation();
+        mmDraggingViewport = true;
+        svg.setPointerCapture(e.pointerId);
+        _panToMinimapPoint(svg, e);
+    });
+    svg.addEventListener('pointermove', (e) => {
+        if (!mmDraggingViewport) return;
+        _panToMinimapPoint(svg, e);
+    });
+    svg.addEventListener('pointerup', () => { mmDraggingViewport = false; });
+
+    // ── Drag via header ──
+    const header = mmEl.querySelector('.graph-minimap-header');
+    let dragStart = null, dragStartPos = null;
+
+    header.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
+        dragStart = { x: e.clientX, y: e.clientY };
+        dragStartPos = { left: mmEl.offsetLeft, top: mmEl.offsetTop };
+        header.classList.add('dragging');
+        header.setPointerCapture(e.pointerId);
+    });
+    header.addEventListener('pointermove', (e) => {
+        if (!dragStart) return;
+        const cr = container.getBoundingClientRect();
+        const mw = mmEl.offsetWidth, mh = mmEl.offsetHeight;
+        let l = dragStartPos.left + (e.clientX - dragStart.x);
+        let t = dragStartPos.top + (e.clientY - dragStart.y);
+        l = Math.max(0, Math.min(cr.width - mw, l));
+        t = Math.max(0, Math.min(cr.height - mh, t));
+        mmEl.style.left = l + 'px';
+        mmEl.style.top = t + 'px';
+    });
+    header.addEventListener('pointerup', () => {
+        if (dragStart) { dragStart = null; header.classList.remove('dragging'); _saveMinimapRect(_mmRect(mmEl)); }
+    });
+
+    // ── Resize handles ──
+    _initResizeHandle(mmEl.querySelector('.graph-minimap-resize-br'), 'br');
+    _initResizeHandle(mmEl.querySelector('.graph-minimap-resize-bl'), 'bl');
+
+    function _initResizeHandle(rh, corner) {
+        if (!rh) return;
+        let rs = null, rss = null;
+        rh.addEventListener('pointerdown', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            rs = { x: e.clientX, y: e.clientY };
+            rss = { w: mmEl.offsetWidth, h: mmEl.offsetHeight, left: mmEl.offsetLeft };
+            rh.setPointerCapture(e.pointerId);
+        });
+        rh.addEventListener('pointermove', (e) => {
+            if (!rs) return;
+            const cr = container.getBoundingClientRect();
+            const dy = e.clientY - rs.y;
+            const newH = Math.max(80, Math.min(cr.height - 20, rss.h + dy));
+            mmEl.style.height = newH + 'px';
+
+            if (corner === 'br') {
+                // Bottom-right: grow width rightward, left stays fixed
+                const dx = e.clientX - rs.x;
+                const maxW = cr.width - mmEl.offsetLeft - 4;
+                mmEl.style.width = Math.max(120, Math.min(maxW, rss.w + dx)) + 'px';
+            } else {
+                // Bottom-left: grow width leftward, right edge stays fixed
+                const dx = rs.x - e.clientX;
+                const newW = Math.max(120, Math.min(cr.width - 20, rss.w + dx));
+                const newLeft = rss.left - (newW - rss.w);
+                mmEl.style.width = newW + 'px';
+                mmEl.style.left = Math.max(0, newLeft) + 'px';
+            }
+            _clampMinimap();
+        });
+        rh.addEventListener('pointerup', () => { if (rs) { rs = null; _saveMinimapRect(_mmRect(mmEl)); } });
+    }
+}
+
+function _panToMinimapPoint(svg, e) {
+    if (!_canvas || !_bounds) return;
+    const svgRect = svg.getBoundingClientRect();
+    const pad = 10;
+    const bx = _bounds.x - pad, by = _bounds.y - pad;
+    const bw = _bounds.width + pad * 2, bh = _bounds.height + pad * 2;
+    const gx = bx + ((e.clientX - svgRect.left) / svgRect.width) * bw;
+    const gy = by + ((e.clientY - svgRect.top) / svgRect.height) * bh;
+    _canvas.panTo(gx, gy, false);
+}
+
+function _updateMinimapViewport(mmEl, vp) {
+    if (!mmEl) return;
+    const rect = mmEl.querySelector('.graph-minimap-viewport');
+    if (!rect) return;
+    rect.setAttribute('x', vp.x);
+    rect.setAttribute('y', vp.y);
+    rect.setAttribute('width', vp.width);
+    rect.setAttribute('height', vp.height);
+}
+
+function _mmRect(mmEl) {
+    return { left: mmEl.offsetLeft, top: mmEl.offsetTop, width: mmEl.offsetWidth, height: mmEl.offsetHeight };
+}
+
+/* ── Toolbar drag ── */
+
+function _initToolbarDrag(tbEl) {
+    if (!tbEl) return;
+    const container = tbEl.closest('.graph-container');
+    const handle = tbEl.querySelector('.graph-toolbar-drag');
+    if (!handle) return;
+
+    let dragStart = null, dragStartPos = null;
+
+    handle.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
+        dragStart = { x: e.clientX, y: e.clientY };
+        dragStartPos = { left: tbEl.offsetLeft, top: tbEl.offsetTop };
+        handle.setPointerCapture(e.pointerId);
+    });
+    handle.addEventListener('pointermove', (e) => {
+        if (!dragStart) return;
+        const cr = container.getBoundingClientRect();
+        const tw = tbEl.offsetWidth, th = tbEl.offsetHeight;
+        let l = dragStartPos.left + (e.clientX - dragStart.x);
+        let t = dragStartPos.top + (e.clientY - dragStart.y);
+        l = Math.max(0, Math.min(cr.width - tw, l));
+        t = Math.max(0, Math.min(cr.height - th, t));
+        tbEl.style.left = l + 'px';
+        tbEl.style.top = t + 'px';
+    });
+    handle.addEventListener('pointerup', () => {
+        if (dragStart) {
+            dragStart = null;
+            _saveToolbarPos({ left: tbEl.offsetLeft, top: tbEl.offsetTop });
+        }
+    });
+}
+
+/* ── Search ── */
+
+function _renderSearchResults(query) {
+    const results = document.querySelector('.graph-search-results');
+    if (!results) return;
+
+    const q = query.toLowerCase().trim();
+    const filtered = q
+        ? _searchItems.filter(n => n.name.toLowerCase().includes(q) || n.kind.includes(q) || (n.subtype || '').includes(q))
+        : _searchItems.slice(0, 20);
+
+    _searchIndex = filtered.length > 0 ? 0 : -1;
+
+    results.innerHTML = filtered.map((n, i) => {
+        const color = ENTITY_COLORS[n.kind] || '#666';
+        return `<div class="graph-search-item${i === _searchIndex ? ' active' : ''}" data-id="${n.id}">
+            <span class="graph-search-item-dot" style="background:${color}"></span>
+            <span class="graph-search-item-name">${_escHtml(n.name)}</span>
+            <span class="graph-search-item-type">${n.kind.replace(/_/g, ' ')}</span>
+        </div>`;
+    }).join('');
+
+    results.querySelectorAll('.graph-search-item').forEach(item => {
+        item.addEventListener('click', () => {
+            _navigateToNode(item.getAttribute('data-id'));
+            closeGraphSearch();
+        });
+    });
+}
+
+function _onSearchKeydown(e) {
+    const results = document.querySelectorAll('.graph-search-item');
+    if (e.key === 'ArrowDown') { e.preventDefault(); _searchIndex = Math.min(_searchIndex + 1, results.length - 1); _updateSearchActive(results); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); _searchIndex = Math.max(_searchIndex - 1, 0); _updateSearchActive(results); }
+    else if (e.key === 'Enter') { e.preventDefault(); if (results[_searchIndex]) { _navigateToNode(results[_searchIndex].getAttribute('data-id')); closeGraphSearch(); } }
+    else if (e.key === 'Escape') { closeGraphSearch(); }
+}
+
+function _updateSearchActive(items) {
+    items.forEach((el, i) => el.classList.toggle('active', i === _searchIndex));
+    if (items[_searchIndex]) items[_searchIndex].scrollIntoView({ block: 'nearest' });
+}
+
+function _navigateToNode(nodeId) {
+    const node = _nodeMap?.get(nodeId);
+    if (!node || !_canvas) return;
+    _canvas.panTo(node.x + node.width / 2, node.y + node.height / 2, true);
+
+    const nodeGroup = document.querySelector('.graph-nodes');
+    if (nodeGroup) { highlightNode(nodeGroup, nodeId); setTimeout(() => highlightNode(nodeGroup, null), 3000); }
+
+    const edgeGroup = document.querySelector('.graph-edges');
+    if (edgeGroup && _edges) { highlightChain(edgeGroup, nodeId, _edges); setTimeout(() => clearEdgeHighlights(edgeGroup), 5000); }
+}
+
+/* ── Node callbacks ── */
+
+function _onNodeClick(node, e) {
+    const nodeGroup = document.querySelector('.graph-nodes');
+    const edgeGroup = document.querySelector('.graph-edges');
+
+    if (e.shiftKey) {
+        if (_selectedIds.has(node.id)) _selectedIds.delete(node.id);
+        else _selectedIds.add(node.id);
+    } else {
+        _selectedIds.clear();
+        _selectedIds.add(node.id);
+    }
+    if (nodeGroup) updateSelection(nodeGroup, _selectedIds);
+
+    if (_selectedIds.size === 1 && edgeGroup && _edges) {
+        const chain = highlightChain(edgeGroup, node.id, _edges);
+        if (nodeGroup) {
+            nodeGroup.querySelectorAll('.graph-node').forEach(n => {
+                n.style.opacity = chain.has(n.getAttribute('data-id')) ? '1' : '0.25';
+            });
+        }
+    } else if (edgeGroup) {
+        clearEdgeHighlights(edgeGroup);
+        if (nodeGroup) nodeGroup.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
+    }
+}
+
+function _onNodeDblClick(node) {
+    // Zoom to node and center it in one step
+    if (_canvas) {
+        _canvas.zoomToPoint(1.5, node.x + node.width / 2, node.y + node.height / 2);
+    }
+}
+
+function _onEditNode(node) {
+    const fnMap = {
+        device: () => window.showSettings?.(node.id),
+        capture_template: () => window.editTemplate?.(node.id),
+        pp_template: () => window.editPPTemplate?.(node.id),
+        audio_template: () => window.editAudioTemplate?.(node.id),
+        pattern_template: () => window.showPatternTemplateEditor?.(node.id),
+        picture_source: () => window.editStream?.(node.id),
+        audio_source: () => window.editAudioSource?.(node.id),
+        value_source: () => window.editValueSource?.(node.id),
+        color_strip_source: () => window.showCSSEditor?.(node.id),
+        sync_clock: () => {},
+        output_target: () => window.showTargetEditor?.(node.id),
+        scene_preset: () => window.editScenePreset?.(node.id),
+        automation: () => window.openAutomationEditor?.(node.id),
+    };
+    fnMap[node.kind]?.();
+}
+
+function _onDeleteNode(node) {
+    const fnMap = {
+        device: () => window.removeDevice?.(node.id),
+        capture_template: () => window.deleteTemplate?.(node.id),
+        pp_template: () => window.deletePPTemplate?.(node.id),
+        audio_template: () => window.deleteAudioTemplate?.(node.id),
+        pattern_template: () => window.deletePatternTemplate?.(node.id),
+        picture_source: () => window.deleteStream?.(node.id),
+        audio_source: () => window.deleteAudioSource?.(node.id),
+        value_source: () => window.deleteValueSource?.(node.id),
+        color_strip_source: () => window.deleteColorStrip?.(node.id),
+        output_target: () => window.deleteTarget?.(node.id),
+        scene_preset: () => window.deleteScenePreset?.(node.id),
+        automation: () => window.deleteAutomation?.(node.id),
+    };
+    fnMap[node.kind]?.();
+}
+
+/* ── Keyboard ── */
+
+function _onKeydown(e) {
+    if (e.key === '/' && !_searchVisible) { e.preventDefault(); openGraphSearch(); }
+    if (e.key === 'Escape') {
+        if (_searchVisible) { closeGraphSearch(); }
+        else {
+            const ng = document.querySelector('.graph-nodes');
+            const eg = document.querySelector('.graph-edges');
+            _deselect(ng, eg);
+        }
+    }
+}
+
+/* ── Helpers ── */
+
+function _escHtml(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+}
+
+// Re-render graph when language changes (toolbar titles, legend, search placeholder use t())
+document.addEventListener('languageChanged', () => {
+    if (_initialized && _nodeMap) {
+        const container = document.getElementById('graph-editor-content');
+        if (container) _renderGraph(container);
+    }
+});
diff --git a/server/src/wled_controller/static/js/features/tabs.js b/server/src/wled_controller/static/js/features/tabs.js
index 71c8d54..22d3a97 100644
--- a/server/src/wled_controller/static/js/features/tabs.js
+++ b/server/src/wled_controller/static/js/features/tabs.js
@@ -70,6 +70,8 @@ export function switchTab(name, { updateHash = true, skipLoad = false } = {}) {
             if (typeof window.loadTargetsTab === 'function') window.loadTargetsTab();
         } else if (name === 'automations') {
             if (typeof window.loadAutomations === 'function') window.loadAutomations();
+        } else if (name === 'graph') {
+            if (typeof window.loadGraphEditor === 'function') window.loadGraphEditor();
         }
     }
 }
diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json
index 708a3ff..cea4701 100644
--- a/server/src/wled_controller/static/locales/en.json
+++ b/server/src/wled_controller/static/locales/en.json
@@ -1373,5 +1373,16 @@
   "sync_clock.reset_done": "Clock reset to zero",
   "sync_clock.delete.confirm": "Delete this sync clock? Linked sources will lose synchronization and run at default speed.",
   "color_strip.clock": "Sync Clock:",
-  "color_strip.clock.hint": "Link to a sync clock to synchronize animation timing across sources. Speed is controlled on the clock."
+  "color_strip.clock.hint": "Link to a sync clock to synchronize animation timing across sources. Speed is controlled on the clock.",
+  "graph.title": "Graph",
+  "graph.fit_all": "Fit all nodes",
+  "graph.zoom_in": "Zoom in",
+  "graph.zoom_out": "Zoom out",
+  "graph.search": "Search nodes",
+  "graph.search_placeholder": "Search entities...",
+  "graph.legend": "Legend",
+  "graph.minimap": "Minimap",
+  "graph.relayout": "Re-layout",
+  "graph.empty": "No entities yet",
+  "graph.empty.hint": "Create devices, sources, and targets to see them here."
 }
diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json
index 904ef9c..085a887 100644
--- a/server/src/wled_controller/static/locales/ru.json
+++ b/server/src/wled_controller/static/locales/ru.json
@@ -1373,5 +1373,16 @@
   "sync_clock.reset_done": "Часы сброшены на ноль",
   "sync_clock.delete.confirm": "Удалить эти часы синхронизации? Привязанные источники потеряют синхронизацию и будут работать на скорости по умолчанию.",
   "color_strip.clock": "Часы синхронизации:",
-  "color_strip.clock.hint": "Привязка к часам для синхронизации анимации между источниками. Скорость управляется на часах."
+  "color_strip.clock.hint": "Привязка к часам для синхронизации анимации между источниками. Скорость управляется на часах.",
+  "graph.title": "Граф",
+  "graph.fit_all": "Показать все узлы",
+  "graph.zoom_in": "Приблизить",
+  "graph.zoom_out": "Отдалить",
+  "graph.search": "Поиск узлов",
+  "graph.search_placeholder": "Поиск сущностей...",
+  "graph.legend": "Легенда",
+  "graph.minimap": "Миникарта",
+  "graph.relayout": "Перестроить",
+  "graph.empty": "Ещё нет сущностей",
+  "graph.empty.hint": "Создайте устройства, источники и цели, чтобы увидеть их здесь."
 }
diff --git a/server/src/wled_controller/static/locales/zh.json b/server/src/wled_controller/static/locales/zh.json
index 5eb4808..28a24d7 100644
--- a/server/src/wled_controller/static/locales/zh.json
+++ b/server/src/wled_controller/static/locales/zh.json
@@ -1373,5 +1373,16 @@
   "sync_clock.reset_done": "时钟已重置为零",
   "sync_clock.delete.confirm": "删除此同步时钟？关联的源将失去同步并以默认速度运行。",
   "color_strip.clock": "同步时钟：",
-  "color_strip.clock.hint": "关联同步时钟以在多个源之间同步动画。速度在时钟上控制。"
+  "color_strip.clock.hint": "关联同步时钟以在多个源之间同步动画。速度在时钟上控制。",
+  "graph.title": "图表",
+  "graph.fit_all": "显示所有节点",
+  "graph.zoom_in": "放大",
+  "graph.zoom_out": "缩小",
+  "graph.search": "搜索节点",
+  "graph.search_placeholder": "搜索实体...",
+  "graph.legend": "图例",
+  "graph.minimap": "小地图",
+  "graph.relayout": "重新布局",
+  "graph.empty": "暂无实体",
+  "graph.empty.hint": "创建设备、源和目标后即可在此查看。"
 }
diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html
index 1e5fa8c..c6c168e 100644
--- a/server/src/wled_controller/templates/index.html
+++ b/server/src/wled_controller/templates/index.html
@@ -28,8 +28,10 @@
     <link rel="stylesheet" href="/static/css/automations.css">
     <link rel="stylesheet" href="/static/css/tree-nav.css">
     <link rel="stylesheet" href="/static/css/tutorials.css">
+    <link rel="stylesheet" href="/static/css/graph-editor.css">
     <link rel="stylesheet" href="/static/css/mobile.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/elkjs@0.9.3/lib/elk.bundled.js"></script>
 </head>
 <body style="visibility: hidden;">
     <canvas id="bg-anim-canvas"></canvas>
@@ -51,6 +53,7 @@
                 <button class="tab-btn" data-tab="automations" onclick="switchTab('automations')" role="tab" aria-selected="false" aria-controls="tab-automations" id="tab-btn-automations" title="Ctrl+2"><svg class="icon" viewBox="0 0 24 24"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg> <span data-i18n="automations.title">Automations</span><span class="tab-badge" id="tab-badge-automations" style="display:none"></span></button>
                 <button class="tab-btn" data-tab="targets" onclick="switchTab('targets')" role="tab" aria-selected="false" aria-controls="tab-targets" id="tab-btn-targets" title="Ctrl+3"><svg class="icon" viewBox="0 0 24 24"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg> <span data-i18n="targets.title">Targets</span><span class="tab-badge" id="tab-badge-targets" style="display:none"></span></button>
                 <button class="tab-btn" data-tab="streams" onclick="switchTab('streams')" role="tab" aria-selected="false" aria-controls="tab-streams" id="tab-btn-streams" title="Ctrl+4"><svg class="icon" viewBox="0 0 24 24"><path d="m17 2-5 5-5-5"/><rect width="20" height="15" x="2" y="7" rx="2"/></svg> <span data-i18n="streams.title">Sources</span></button>
+                <button class="tab-btn" data-tab="graph" onclick="switchTab('graph')" role="tab" aria-selected="false" aria-controls="tab-graph" id="tab-btn-graph" title="Ctrl+5"><svg class="icon" viewBox="0 0 24 24"><circle cx="5" cy="6" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M7.5 7.5 10.5 16"/><path d="M16.5 7.5 13.5 16"/></svg> <span data-i18n="graph.title">Graph</span></button>
             </div>
             <div class="header-toolbar">
                 <a href="/docs" target="_blank" class="header-link" data-i18n-title="app.api_docs" title="API Docs">API</a>
@@ -139,6 +142,12 @@
                 </div>
             </div>
 
+            <div class="tab-panel" id="tab-graph" role="tabpanel" aria-labelledby="tab-btn-graph">
+                <div id="graph-editor-content">
+                    <div class="loading-spinner"></div>
+                </div>
+            </div>
+
 
             <script>
                 // Apply saved tab immediately during parse to prevent visible jump
@@ -147,6 +156,7 @@
                     var saved = hash ? hash.split('/')[0] : localStorage.getItem('activeTab');
                     if (saved === 'devices') saved = 'targets';
                     if (!saved || !document.getElementById('tab-' + saved)) saved = 'dashboard';
+                    /* graph tab is valid */
                     document.querySelectorAll('.tab-btn').forEach(function(btn) { btn.classList.toggle('active', btn.dataset.tab === saved); });
                     document.querySelectorAll('.tab-panel').forEach(function(panel) { panel.classList.toggle('active', panel.id === 'tab-' + saved); });
                 })();
@@ -382,6 +392,7 @@
             document.getElementById('automations-content').innerHTML = loginMsg;
             document.getElementById('targets-panel-content').innerHTML = loginMsg;
             document.getElementById('streams-list').innerHTML = loginMsg;
+            document.getElementById('graph-editor-content').innerHTML = loginMsg;
         }
 
         // Initialize on load