# Guidance on Implementing a Third-Party Network Topology Diagram in Node-RED Dashboard

**URL:** <https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170>\
**Category:** General\
**Created:** [26 December 2024 06:12 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170 "2024-12-26T06:12:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DhamodharanGopal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dhamodharangopal/32/95512_2.png) [@DhamodharanGopal](https://discourse.nodered.org/u/DhamodharanGopal)\
**Post date:** [26 December 2024 06:12 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170/1 "2024-12-26T06:12:52Z")

</div>

I am working on integrating a third-party network topology visualization tool into the Node-RED dashboard dynamically. I’d appreciate guidance or recommendations on the following:

**Native Support for Topology Visualizations:**  
Are there any libraries or nodes natively supported by Node-RED for visualizing network topologies?  
If not, what are the best practices for embedding third-party libraries into the dashboard?

**Dynamic Data Integration:**  
How can I dynamically fetch and update topology data in real-time using Node-RED flows?  
What nodes (e.g., HTTP Request, WebSocket) work best for sending data to the visualization?

**Third-Party Library Recommendations:**  
Any suggestions for libraries that integrate well with Node-RED  
Examples of successful implementations using these or other libraries.

**UI Template Configuration:**  
How to configure the Node-RED UI Template node to host and render the third-party topology tool?  
Tips for managing dependencies like external CSS and JS files within the dashboard.

**Performance and Responsiveness:**  
Best practices to ensure the topology visualization is responsive and performs well, especially for larger datasets.  
How to handle resizing events and clean up DOM elements when switching tabs?

**Event Handling and Interactivity:**  
Guidance on implementing interactive features like node selection, drag-and-drop, and live updates within the dashboard.

I would appreciate any advice, examples, or resources to help me achieve this. Your input will be incredibly valuable!  
Thank you in advance!

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [26 December 2024 10:59 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170/2 "2024-12-26T10:59:34Z")

</div>

[mermaid](https://mermaid.js.org/syntax/architecture.html) supports an 'architecture' option, but this is only available in the latest 11.x version, node-red has native mermaid support, but it does not include the latest version.

I tried to include the cdn version with a markdown node (which supports mermaid), but it uses the internal version from node-red and I could not find a way to override it, as it is initialized based on the mermaid class name.

Long story short, with this flow, you can create dynamic mermaid architecture maps:

```auto
[{"id":"ac080e3433e4fcc9","type":"http in","z":"c8d44844ba5acdbd","name":"","url":"/network_map","method":"get","upload":false,"swaggerDoc":"","x":330,"y":4160,"wires":[["6756125209907198"]]},{"id":"49ac2f6d633dd7f8","type":"http response","z":"c8d44844ba5acdbd","name":"","statusCode":"","headers":{},"x":670,"y":4160,"wires":[]},{"id":"6756125209907198","type":"template","z":"c8d44844ba5acdbd","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>network map</title>\n\n </head>\n <body>\n <pre class=\"mermaid\">\narchitecture-beta\n group api(cloud)[API]\n\n service db(database)[Database] in api\n service disk1(disk)[Storage] in api\n service disk2(disk)[Storage] in api\n service server(server)[Server] in api\n\n db:L -- R:server\n disk1:T -- B:server\n disk2:T -- B:db\n </pre>\n <script type=\"module\">\n import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'\n mermaid.registerIconPacks([\n {\n name: 'logos',\n loader: () =>\n fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),\n },\n {\n name: 'mdi',\n loader: () =>\n fetch('https://unpkg.com/@iconify-json/mdi/icons.json').then((res) => res.json()),\n }\n])\n </script>\n </body>\n</html>\n","output":"str","x":520,"y":4160,"wires":[["49ac2f6d633dd7f8"]]}]

```

It creates an endpoint on `http://<ip:1880>/network_map` and renders the following:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/be18c88ed359470663a743c5da0d52cde6125e5b.png)

It uses a (normal) template node to render the html etc. This means you can have a dynamic description of your map using mustache and it will render it accordingly. This can all be made dynamic too, but I would suggest to explore this option first.

mermaid uses a textual description of the map:

```auto
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 December 2024 23:25 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170/3 "2024-12-27T23:25:49Z")

</div>

I recently posted an example of using Mermaid with UIBUILDER if that is of any use. You could possibly adapt it to work with D2 if you really need that.

Mermaid is pretty static though (e.g. you have to rebuild the whole thing if something changes) so not really a good choice if you are looking for something more dynamic.

Network topologies are actually examples of GRAPH's rather than CHART's. So searching for graph libraries should give you more options.

Here is a dump from my Obsidian notebook on Graph libraries:

| Name | Descr | $ | Comments | |
| --- | --- | --- | --- | --- |
| [baklavajs](https://github.com/newcat/baklavajs) | Graph/node editor for VueJs | 0 | Interesting Unreal engine style flow-based display and processing. | |
| [beautiful-react-diagrams](https://github.com/beautifulinteractions/beautiful-react-diagrams) | React components and hooks to build diagrams | | | |
| [butterfly](https://github.com/alibaba/butterfly) | Renderer for interactive diagrams and flowcharts | | | |
| [cytoscape.js](https://js.cytoscape.org/) | Canvas based renderer with utilities and algorithms | | [blog](https://blog.js.cytoscape.org/) | |
| [d3-graphviz](https://github.com/magjac/d3-graphviz) | Graphviz DOT rendering and animated transitions using D3 | 0 | | |
| [diagram-maker](https://awslabs.github.io/diagram-maker) | Interactive editor for any graph-like data | 0 | Online editor | |
| [Flowy](https://github.com/alyssaxuu/flowy) | Flowchart library | 0 | Flowcharts only | |
| [flow-builder](https://github.com/bytedance/flow-builder) | React-based renderer for workflows and process diagrams | | | |
| [Flume](https://github.com/chrisjpatty/flume) | A React-powered node editor and runtime engine | 0 | Unreal engine style flow-based display and processing. | |
| ~~[GoJS](https://gojs.net/)~~ | ~~Diagramming library with a focus on customization and interactivity~~ | `$$$` | Go library | |
| ~~[jointjs](https://www.jointjs.com/)~~ | ~~JavaScript diagramming library~~ | `$$$` | | |
| ~~[jsplumb](https://jsplumbtoolkit.com/community)~~ | ~~Open source project written in Typescript that gives you the tools you need to visually connect DOM elements~~ | 0 (Limited), `$$$` | Free version is too limiting | |
| ~~[kedro-viz](https://github.com/kedro-org/kedro-viz)~~ | ~~Visualises Kedro data and machine-learning pipelines~~ | | Specialist | |
| [litegraph.js](https://github.com/jagenjo/litegraph.js) | A graph node engine and editor | 0 | Unreal engine style flow-based display and processing. | |
| [mermaid](https://mermaid-js.github.io/mermaid) | JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. | 0 | Widely embedded in other tools.
[Live Editor](https://mermaid.live/)  

 | |
| ~~[ngx-graph](https://github.com/swimlane/ngx-graph)~~ | ~~Graph visualization library for Angular~~ | | Angular only | |
| [nice-dag](https://github.com/eBay/nice-dag) | Lightweight javascript library, which is used to present a DAG diagram | | | |
| [nodl](https://github.com/emilwidlund/nodl) | Framework for computational node graphs | 0 | Unreal engine style flow-based display and processing. | |
| [Pintora](https://github.com/hikerpig/pintora) | Extensible javascript text-to-diagrams library that works in both browser and Node.js. Inspired by Mermaid and PlantUML | 0 | | |
| [react-dag-editor](https://github.com/microsoft/react-dag-editor) | React component to create graphic user interface | | | |
| [react-digraph](https://github.com/uber/react-digraph) | A library for creating directed graph editors | | | |
| [react-flow](https://github.com/wbkd/react-flow) | React library for rendering node-based UIs | | | |
| [reaflow](https://github.com/reaviz/reaflow) | React library for building workflow editors | | | |
| [rete](https://github.com/retejs/rete/) | Framework for visual programming and node editors | 0 | Unreal engine style flow-based display and processing. | |
| [sigma.js](https://github.com/jacomyal/sigma.js) | Visualization framework for large graphs | | | |
| [vue-flow](https://github.com/bcakmakoglu/vue-flow) | Flowchart component for Vue 3 | | Simplified graph view | |
| [X6](https://github.com/antvis/X6) | X6 is an HTML and SVG-based graph editing engine that provides low-cost customization capabilities and out-of-the-box built-in extensions to quickly build DAG diagrams, ER diagrams, flowcharts, lineage diagrams, and more. | | Mostly Chinese. | |

* * *

## Apache ECharts

[Website](https://echarts.apache.org/en/index.html) [Docs](https://echarts.apache.org/handbook/en/get-started/) [GitHub](https://github.com/apache/echarts)  
Includes Graph types.

## Arbor.js

[arbor.js » introduction (arborjs.org)](http://arborjs.org/introduction) [samizdatco/arbor: a graph visualization library using web workers and jQuery (github.com)](https://github.com/samizdatco/arbor)

> "a graph visualization library built with web workers and jQuery."

## D3.js

[Website](https://d3js.org/) [Docs](https://github.com/d3/d3/wiki) [GitHub](https://github.com/d3/d3)  
Data visualisation

## d3-graphviz

[magjac/d3-graphviz: Graphviz DOT rendering and animated transitions using D3 (github.com)](https://github.com/magjac/d3-graphviz)

## Dracula

[strathausen/dracula: JavaScript layout and representation of connected graphs. (github.com)](https://github.com/strathausen/dracula) [Dracula Graph Library – Graph Computation, Layout, Algorithms for JavaScript (graphdracula.net)](https://www.graphdracula.net/)

## G6 (AntV)

[Introduction | G6 (gitee.io)](https://antv-g6.gitee.io/en/docs/manual/introduction)

## Graphviz (C)

DOT Language. Command line only.

## Vega - Incl Tree & Network views

[A Visualization Grammar | Vega](https://vega.github.io/vega/)

## Vis.js (Community Edition) - Incl Network view

[vis.js (visjs.org)](https://visjs.org/)

> A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

## VivaGraphJS

[website](https://github.com/anvaka/VivaGraphJS)

* * *

### Layouting

- [elkjs](https://github.com/kieler/elkjs) - A port of the Java ELK layouting library to Javascript
- [d3-hierarchy](https://github.com/d3/d3-hierarchy) - Helpers and algorithms for working with hierarchical graphs
- [d3-force](https://github.com/d3/d3-force) - Library for creating interactive force directed graphs
- [d3-dag](https://erikbrinkman.github.io/d3-dag/) - D3 plugin to work with DAG data structures
- [dagrejs](https://github.com/dagrejs/dagre) - Directed graph layout algorithms for Javascript
- [graphology-layout](https://graphology.github.io/standard-library/layout.html) - Layout algorithms
- [springy](https://github.com/dhotson/springy) - Force directed graph layouts

### Graph Utilities

- [behave-graph](https://github.com/bhouston/behave-graph) - Extensible behaviour-graph execution engine
  - [behave-flow](https://github.com/beeglebug/behave-flow) - UI for behave-graph using react-flow

- [graphlib](https://github.com/dagrejs/graphlib) - Helpers for directed graphs in JS
- [graphology](https://github.com/graphology/graphology) - Utilities and algorithms for all kinds of graphs

### Misc

- [flume](https://github.com/chrisjpatty/flume) - Business logic graph editor
- [mermaid](https://github.com/mermaid-js/mermaid) - Flowchart and sequence diagrams generation
- [pintora](https://github.com/hikerpig/pintora) - Text-to-diagrams library
- [quick-erd](https://github.com/beenotung/quick-erd) - Generate entity-relationship diagrams (ERD) from text, and reverse engineer ERD text from live database

**[Overview | Welcome to PyFlow homepage! (wonderworks-software.github.io)](https://wonderworks-software.github.io/PyFlow/)** is a general purpose visual scripting framework for python.

[Ryven - Flow-based visual scripting for Python](https://ryven.org/) - A simple and powerful visual nodes editor for Python, and a framework for building nodes executing any Python code.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [28 December 2024 06:35 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170/4 "2024-12-28T06:35:28Z")

</div>

> Mermaid is pretty static though (e.g. you have to rebuild the whole thing if something changes) so not really a good choice if you are looking for something more dynamic.

which is a matter of:

```auto
mermaid.run()

```

Then again, we don't really know what OP is looking for.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 December 2024 17:08 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170/5 "2024-12-28T17:08:00Z")

</div>

> [@bakman2](#):
>
> which is a matter of:
> 
> ```auto
> mermaid.run()
> 
> ```

After resending all the data. Not necessarily a problem for smaller charts but might get "interesting" for larger ones. I've not had time to test.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 March 2025 17:08 UTC](https://discourse.nodered.org/t/guidance-on-implementing-a-third-party-network-topology-diagram-in-node-red-dashboard/94170/6 "2025-03-28T17:08:46Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.