Skip to content

Publish the Assembly Line template card on release #797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukasz-jazwa merged 3 commits into from
Aug 25, 2026
Merged

Publish the Assembly Line template card on release #797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d54c11
Assembly line template added to docs (#792)
lukasz-jazwa Aug 18, 2026
d2d0f15
Refresh the Assembly Line template card (#794)
lukasz-jazwa Aug 18, 2026
549b299
Merge commit 'd2d0f155' into docs/assembly-line-to-release
lukasz-jazwa Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Binary file added apps/docs/public/assets/templates/assembly-line.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 21 additions & 16 deletions apps/docs/src/content/docs/intro/roadmap.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
</td>
<td>
<div class="task-card">
<h4>Awaitable Service Methods</h4>
<p>Every mutating service call returns a promise you can await</p>
<Badge text="feature" variant="tip" size="small" />
<h4>Assembly Line Template</h4>
<p>Demo app for assembly line diagrams</p>
<Badge text="demo" variant="tip" size="small" />
</div>
</td>
</tr>
Expand All @@ -60,9 +60,9 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
</td>
<td>
<div class="task-card">
<h4>Resize Snap Offset</h4>
<p>Snapping offset for node resize - a community request</p>
<Badge text="community" variant="caution" size="small" />
<h4>Awaitable Service Methods</h4>
<p>Every mutating service call returns a promise you can await</p>
<Badge text="feature" variant="tip" size="small" />
</div>
</td>
</tr>
Expand All @@ -74,18 +74,12 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
<Badge text="feature" variant="tip" size="small" />
</div>
</td>
<td></td>
<td>
<div class="task-card">
<h4>Assembly Line Template</h4>
<p>Demo app for assembly line diagrams</p>
<Badge text="demo" variant="tip" size="small" />
</div>
</td>
<td>
<div class="task-card">
<h4>AV Schematic Template</h4>
<p>Demo app for audio-video diagrams</p>
<Badge text="demo" variant="tip" size="small" />
<h4>Resize Snap Offset</h4>
<p>Snapping offset for node resize - a community request</p>
<Badge text="community" variant="caution" size="small" />
</div>
</td>
</tr>
Expand All @@ -98,6 +92,17 @@ ngDiagram is stable and actively developed. Here's what we're working on right n
</div>
</td>
<td></td>
<td>
<div class="task-card">
<h4>AV Schematic Template</h4>
<p>Demo app for audio-video diagrams</p>
<Badge text="demo" variant="tip" size="small" />
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<div class="task-card">
<h4>Single-Line Diagram Template</h4>
Expand Down
11 changes: 11 additions & 0 deletions apps/docs/src/content/docs/templates/templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 manufacturing 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 the module palette on the left, live status badges and KPI grids on the nodes, and a threshold editor in the properties panel.',
},
];
13 changes: 7 additions & 6 deletions packages/ng-diagram/projects/ng-diagram/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down