# Dynamic map of a mesh network

**URL:** <https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800>\
**Category:** Dashboard\
**Created:** [22 January 2024 13:35 UTC](https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800 "2024-01-22T13:35:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mzsolnay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mzsolnay/32/40308_2.png) [@mzsolnay](https://discourse.nodered.org/u/mzsolnay)\
**Post date:** [22 January 2024 13:35 UTC](https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800/1 "2024-01-22T13:35:05Z")

</div>

Hi !

I am desperately in need of help with creating a network map with ui-template dashboard.  
the input is a payload, like this:

{"nodeId":207253600,"root":true,"subs":[{"nodeId":3178927348,"subs":[{"nodeId":3178927464,"subs":[{"nodeId":3178932996}]},{"nodeId":2577528556}]}]}

The result should be a graphical representation of the nodes, showing the total number of nodes and the connections between nodes and their subnodes, like a directory tree stucture.

Any help highly appritiated !

---

<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:** [22 January 2024 13:42 UTC](https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800/2 "2024-01-22T13:42:03Z")

</div>

You should use a 3rd-party graph library (don't mix up charts and graphs, graphs are interconnected nodes, charts are representations of mostly numeric data).

This is my Obsidian note on the subject:

| 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/) |
| [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:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [22 January 2024 14:55 UTC](https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800/3 "2024-01-22T14:55:30Z")

</div>

FWIW.

I use **cytoscape.js** in the list above for my Node RED Zwave Module Mesh map feature

works really well!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d63b66c0b6232345565b76e7d1ff234bf2dcde2.png)

---

<div class="post-metadata">

**Author:** ![mzsolnay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mzsolnay/32/40308_2.png) [@mzsolnay](https://discourse.nodered.org/u/mzsolnay)\
**Post date:** [22 January 2024 16:47 UTC](https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800/4 "2024-01-22T16:47:50Z")

</div>

Thank you for the tips, but I'am afraid, deploying any those sollutions are above my capabilities ☹

---

<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:** [21 February 2024 16:48 UTC](https://discourse.nodered.org/t/dynamic-map-of-a-mesh-network/84800/5 "2024-02-21T16:48:37Z")

</div>

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