ngDiagram

A dark-themed graphic titled "ngDiagram" with a green button labeled "INDUSTRIAL & TECHNICAL SCHEMATICS". The central image shows: Interface: A software window labeled "Demo project / Example" with a side toolbar containing icons for searching, filtering, and settings. Diagram: A detailed electronic circuit schematic on a grid background featuring various components such as resistors (R1, R3, R4), capacitors (C1, C4, C5), diodes (D1-D4), and an integrated circuit (IC1 TDA1083). Footer: Text at the bottom stating "Open source by Synergy Codes".

A promotional graphic for "ngDiagram," an open-source tool by Synergy Codes. The image features a dark-mode interface titled "WORKFLOW AUTOMATION BUILDER". Below the title is a visual flowchart on a dotted grid background. The flow starts with a highlighted green node labeled "Start Workflow (Event-based Trigger)," which connects to a "Check Client Source" conditional node. The path then splits into two actions based on the source: "Confirm Request" for a "Partner website" and "Notify Platform" for "Our website". Both paths converge into a final decision node labeled "Recurring Customer?".

A promotional graphic for "ngDiagram" featuring an organizational chart. The diagram shows corporate ownership structures between entities like "Alpha Group Holding," "Novatek Holding NV," and "Jordan Taylor," with percentage labels indicating ownership stakes.

A dark-themed, purple-tinted graphic titled "ngDiagram" with a green button labeled "AND MORE". The image displays a collection of potential use cases for the tool: Workflow Flowchart: A central, multi-step diagram showing nodes like "Economic details," "User statistics," and "Reports" connected by directional arrows. Global Statistics Dashboard: A card showing a large "74.3%" completion or status ring, with a table below listing parameters for Sales, Users, and Products across week, month, and plan cycles. Database Schemas: The bottom section features relational table diagrams for "countries," "users," and "merchants" showing data fields like ID, name, and country_code. UI Controls: Various floating buttons for actions like "Export," "Share," "Group," and "Add section" are visible throughout the layout. Footer: The bottom of the image states "Open source by Synergy Codes."

Workflow designers, visual rule engines, system architecture diagrams, low-code editors.
ngdiagram.dev is an open-source, Angular-native library built by Synergy Codes.

It’s a foundation for building custom visual tools in real-world Angular apps.
Check the GitHub: github.com/synergycodes...

Exciting news! ngDiagram v1.1.0 has launched with lifecycle events, selectionGestureEnded, precise edge labels, and more. Your feedback made this possible – thank you!

Full changelog: ngdiagram.dev/docs/changelog/

We’re thrilled to share that ngDiagram has joined forces with Angular Wrocław, and we'll be supporting upcoming meetups. The next one is just around the corner – March 26th in Wrocław.
Event link: www.meetup.com/angularwrocl...

Hope to see you there!

An image showing a diagram made with ngDiagram library, text stating "See ngDiagram in action, try the demo."

No need to install ngDiagram locally to give it a spin. We’ve launched a live demo where you can see what the library can do – no setup required.

Check it out here: lnkd.in/dhdeJszP
Source code: lnkd.in/dEcBcmyq

Go ahead, poke around and have some fun!

#diagrams #angular #opensource

NgDiagram — Native Diagramming for Angular Apps NgDiagram lets you build interactive, DOM-based diagrams directly in Angular. Native, flexible, and extensible — with minimal boilerplate.

Building node-based UIs in Angular just got easier!

The team at Synergy Codes (in node graphs since 2014) launched ngDiagram, a new open-source library that makes diagramming a breeze. We love seeing the community build such powerful tools!

Check it out for your next project: ngdiagram.dev 🛠️