diff --git a/README.md b/README.md
index 5b7ecec32..c0b795665 100644
--- a/README.md
+++ b/README.md
@@ -46,12 +46,13 @@ See ng-diagram in action: **[Live Demo](https://synergycodes.github.io/ng-diagra
Production-ready starter kits built with ng-diagram. Fork, customize, ship.
-| Template | Description | Demo | Source |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| **Org Chart** | Tree-based org chart with drag-and-drop reordering, expand/collapse, ELK.js layout, minimap, dark/light theme | [Live Demo](https://www.ngdiagram.dev/templates/org-chart/) | [Source](https://github.com/synergycodes/ng-diagram-orgchart) |
-| **Electric Circuit** | Electronic circuit editor with a searchable SVG parts library, smart wire junctions, and SVG/JPEG/JSON export | [Live Demo](https://www.ngdiagram.dev/templates/electric-circuit/) | [Source](https://github.com/synergycodes/ng-diagram-electric-circuit) |
-| **Single-Line Diagram** | High-voltage substation SLD editor with IEC 60617 symbols and a schema-driven properties panel | [Live Demo](https://www.ngdiagram.dev/templates/single-line-diagram/) | [Source](https://github.com/synergycodes/ng-diagram-single-line-diagram) |
-| **AV Schematic** | Audio/video signal-flow editor with typed connectors (XLR, HDMI, Speakon) and PNG/DXF export for AutoCAD | [Live Demo](https://www.ngdiagram.dev/templates/av/) | [Source](https://github.com/synergycodes/ng-diagram-av-schematic) |
+| Template | Description | Demo | Source |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **Org Chart** | Tree-based org chart with drag-and-drop reordering, expand/collapse, ELK.js layout, minimap, dark/light theme | [Live Demo](https://www.ngdiagram.dev/templates/org-chart/) | [Source](https://github.com/synergycodes/ng-diagram-orgchart) |
+| **Electric Circuit** | Electronic circuit editor with a searchable SVG parts library, smart wire junctions, and SVG/JPEG/JSON export | [Live Demo](https://www.ngdiagram.dev/templates/electric-circuit/) | [Source](https://github.com/synergycodes/ng-diagram-electric-circuit) |
+| **Single-Line Diagram** | High-voltage substation SLD editor with IEC 60617 symbols and a schema-driven properties panel | [Live Demo](https://www.ngdiagram.dev/templates/single-line-diagram/) | [Source](https://github.com/synergycodes/ng-diagram-single-line-diagram) |
+| **AV Schematic** | Audio/video signal-flow editor with typed connectors (XLR, HDMI, Speakon) and PNG/DXF export for AutoCAD | [Live Demo](https://www.ngdiagram.dev/templates/av/) | [Source](https://github.com/synergycodes/ng-diagram-av-schematic) |
+| **Assembly Line** | Production-line monitor with Edit/Monitor modes, a live data feed, threshold-colored KPIs, sparklines, and PNG/SVG/DXF export | [Live Demo](https://www.ngdiagram.dev/templates/assembly-line/) | [Source](https://github.com/synergycodes/ng-diagram-assembly-line) |
## 🚀 Quick Start
diff --git a/apps/docs/public/assets/templates/assembly-line.png b/apps/docs/public/assets/templates/assembly-line.png
new file mode 100644
index 000000000..0fd8e5c2b
Binary files /dev/null and b/apps/docs/public/assets/templates/assembly-line.png differ
diff --git a/apps/docs/src/content/docs/intro/roadmap.mdx b/apps/docs/src/content/docs/intro/roadmap.mdx
index 9e2e5893e..cd29c5425 100644
--- a/apps/docs/src/content/docs/intro/roadmap.mdx
+++ b/apps/docs/src/content/docs/intro/roadmap.mdx
@@ -37,9 +37,9 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
- Awaitable Service Methods
- Every mutating service call returns a promise you can await
-
+ Assembly Line Template
+ Demo app for assembly line diagrams
+
|
@@ -60,9 +60,9 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
- Resize Snap Offset
- Snapping offset for node resize - a community request
-
+ Awaitable Service Methods
+ Every mutating service call returns a promise you can await
+
|
@@ -74,18 +74,12 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
+ |
- Assembly Line Template
- Demo app for assembly line diagrams
-
-
- |
-
-
- AV Schematic Template
- Demo app for audio-video diagrams
-
+ Resize Snap Offset
+ Snapping offset for node resize - a community request
+
|
@@ -98,6 +92,17 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
|
+
+
+ AV Schematic Template
+ Demo app for audio-video diagrams
+
+
+ |
+
+
+ |
+ |
Single-Line Diagram Template
diff --git a/apps/docs/src/content/docs/templates/templates.ts b/apps/docs/src/content/docs/templates/templates.ts
index 117b1363b..57e8ea7f1 100644
--- a/apps/docs/src/content/docs/templates/templates.ts
+++ b/apps/docs/src/content/docs/templates/templates.ts
@@ -61,4 +61,15 @@ export const templates: Template[] = [
imageAlt:
'Screenshot of the AV signal-flow editor: devices wired port-to-port with a properties panel for editing device fields and ports.',
},
+ {
+ type: 'regular',
+ title: 'Assembly Line',
+ description:
+ 'Interactive production-line monitor for automotive assembly plants. A starter kit for building your own live monitoring dashboard: drag-and-drop line editing, Edit/Monitor modes with a real-time data feed, threshold-colored KPIs and sparklines, and export to PNG, SVG, or DXF for AutoCAD.',
+ href: 'https://www.ngdiagram.dev/templates/assembly-line/',
+ codeHref: 'https://github.com/synergycodes/ng-diagram-assembly-line',
+ image: '/docs/assets/templates/assembly-line.png',
+ imageAlt:
+ 'Screenshot of the Assembly Line monitor: production modules connected by conveyor flows on a canvas, with live status badges, KPI grids and sparklines streaming in Monitor mode.',
+ },
];
diff --git a/packages/ng-diagram/projects/ng-diagram/README.md b/packages/ng-diagram/projects/ng-diagram/README.md
index 5b7ecec32..c0b795665 100644
--- a/packages/ng-diagram/projects/ng-diagram/README.md
+++ b/packages/ng-diagram/projects/ng-diagram/README.md
@@ -46,12 +46,13 @@ See ng-diagram in action: **[Live Demo](https://synergycodes.github.io/ng-diagra
Production-ready starter kits built with ng-diagram. Fork, customize, ship.
-| Template | Description | Demo | Source |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| **Org Chart** | Tree-based org chart with drag-and-drop reordering, expand/collapse, ELK.js layout, minimap, dark/light theme | [Live Demo](https://www.ngdiagram.dev/templates/org-chart/) | [Source](https://github.com/synergycodes/ng-diagram-orgchart) |
-| **Electric Circuit** | Electronic circuit editor with a searchable SVG parts library, smart wire junctions, and SVG/JPEG/JSON export | [Live Demo](https://www.ngdiagram.dev/templates/electric-circuit/) | [Source](https://github.com/synergycodes/ng-diagram-electric-circuit) |
-| **Single-Line Diagram** | High-voltage substation SLD editor with IEC 60617 symbols and a schema-driven properties panel | [Live Demo](https://www.ngdiagram.dev/templates/single-line-diagram/) | [Source](https://github.com/synergycodes/ng-diagram-single-line-diagram) |
-| **AV Schematic** | Audio/video signal-flow editor with typed connectors (XLR, HDMI, Speakon) and PNG/DXF export for AutoCAD | [Live Demo](https://www.ngdiagram.dev/templates/av/) | [Source](https://github.com/synergycodes/ng-diagram-av-schematic) |
+| Template | Description | Demo | Source |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **Org Chart** | Tree-based org chart with drag-and-drop reordering, expand/collapse, ELK.js layout, minimap, dark/light theme | [Live Demo](https://www.ngdiagram.dev/templates/org-chart/) | [Source](https://github.com/synergycodes/ng-diagram-orgchart) |
+| **Electric Circuit** | Electronic circuit editor with a searchable SVG parts library, smart wire junctions, and SVG/JPEG/JSON export | [Live Demo](https://www.ngdiagram.dev/templates/electric-circuit/) | [Source](https://github.com/synergycodes/ng-diagram-electric-circuit) |
+| **Single-Line Diagram** | High-voltage substation SLD editor with IEC 60617 symbols and a schema-driven properties panel | [Live Demo](https://www.ngdiagram.dev/templates/single-line-diagram/) | [Source](https://github.com/synergycodes/ng-diagram-single-line-diagram) |
+| **AV Schematic** | Audio/video signal-flow editor with typed connectors (XLR, HDMI, Speakon) and PNG/DXF export for AutoCAD | [Live Demo](https://www.ngdiagram.dev/templates/av/) | [Source](https://github.com/synergycodes/ng-diagram-av-schematic) |
+| **Assembly Line** | Production-line monitor with Edit/Monitor modes, a live data feed, threshold-colored KPIs, sparklines, and PNG/SVG/DXF export | [Live Demo](https://www.ngdiagram.dev/templates/assembly-line/) | [Source](https://github.com/synergycodes/ng-diagram-assembly-line) |
## 🚀 Quick Start
|