# Node-RED flow to Mermaid diagram

**URL:** <https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412>\
**Category:** General\
**Created:** [18 September 2023 10:25 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412 "2023-09-18T10:25:55Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [18 September 2023 10:25 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/1 "2023-09-18T10:25:55Z")

</div>

Hi There!

I've been playing around with [Mermaid](https://mermaid.js.org/) diagrams for a while and now that in version 3.1.x they are officially supported, I've created a [convertor flow](https://flowhub.org/f/6e54d62e53ab5b6d) that takes your node-red flow and generates a Mermaid flow diagram.

It does this with a non-deployed flow, i.e. what see in the editor, is what you get. I've put in a few different shapes so that some node types can be differentiated and also if possible, a dashed line between link-out and link-in nodes.

I'm sure its buggy and broken but it does its best - BBB-software so to say!

Hope it Helps, Cheers!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [18 September 2023 19:38 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/2 "2023-09-18T19:38:53Z")

</div>

Hi @gregorius,

Again a flow that could be nominated for the Node-RED creativity award 2023.  
But I am wondering where in real life something like this can be used?  
I assume there are good use cases, but my brain is to small to find one 😉  
Thanks for illuminating me!

Bart

---

<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:** [19 September 2023 06:03 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/3 "2023-09-19T06:03:23Z")

</div>

I find this idea amazing. Downside (because of node-red itself) is the output in payload, it can become huge and node-red is (so) limited in terms of what it displays in payload/debug, one has to work around it to ouput it in an external file/console or something.

> But I am wondering where in real life something like this can be used?

I am working on a project and I think it can very useful for describing/documenting what a flow is doing, providing that the node names describe its actions.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/1189abd1f3c069e2d5295f98fee323615e127395.png)

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [19 September 2023 06:54 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/4 "2023-09-19T06:54:46Z")

</div>

> [@bakman2](#):
>
> it can become huge and node-red is (so) limited in terms of what it displays in payload/debug, one has to work around it to ouput it in an external file/console or something.

In settings.js I have:

```auto
    debugMaxLength: 10000000,

```

so the entire graph can be shown in the debug panel. I explicitly did not do anything with the output since everyone has their own setup. If you want to write out to disk, use a write-file node or alternatively use the http-in & response node to generate the graph on the fly 🙂

> [@bakman2](#):
>
> very useful for describing/documenting what a flow is doing,

@BartButenaers that and also building bridges. Some people think in UML diagrams and its great way to explain a Node-RED flow to them by showing them a UML flowchart of the Node-RED flow. Surprisingly Node-RED flows and UML Flowcharts are very similar, UML tends to be top-to-bottom and uses more shapes (instead of colours) but showing this difference can bring understanding. Btw Mermaid flowcharts can be aligned left-to-right which makes them look [nearly exactly like node-red flows](https://flowhub.org/f/118d664c87ce7320).

UML usage is surprisingly widespread and having a bridge to that world can make the acceptance of Node-RED easier. Hence also the inclusion of Mermaid in Node-RED 3.1.x.

At the end of the day, it's about bridge building between two different worlds. Ironically the companies that would use Node-RED for its IIoT abilities, would probably have a different department doing UML modelling on some high-level system that they are working on.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [19 September 2023 07:57 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/5 "2023-09-19T07:57:39Z")

</div>

> [@bakman2](#):
>
> limited in terms of what it displays in payload/debug, one has to work around it to ouput it in an external file/console or something

I've just updated the [flow](https://flowhub.org/f/6e54d62e53ab5b6d) to have a "copy to clipboard" node that copies the Mermaid flowchart code to your clipboard - I've tested on Firefox and there it works but browser copy-to-clipboard functionality various ...

 ![Screen Shot 2023-09-19 at 09.55.48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/0743ed6038bde638fd6e4df107647279b234186f.png)

---

<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:** [19 September 2023 11:58 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/6 "2023-09-19T11:58:04Z")

</div>

Copy doesnt work for me, the debugMaxLength will do for now.  
Food for thought - automatic flow description based on a group. I use mermaid in the info tab, now if only you could display them in a popup as that window is too small.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [19 September 2023 12:43 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/7 "2023-09-19T12:43:37Z")

</div>

> [@bakman2](#):
>
> I use mermaid in the info tab,

you can always use [flowhub.org](http://flowhub.org) (excuse the self-promotion) - it displays the contents of the info tab plus it has mermaid support #justsaying 😉 - e.g. [this flow](https://flowhub.org/f/90196166b57a77e5).

> [@bakman2](#):
>
> Copy doesnt work for me,

did you have an error in the browser console? and what browser?

---

<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:** [20 September 2023 04:43 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/8 "2023-09-20T04:43:23Z")

</div>

I am using Safari, and the API:

> The implementation is available through the `navigator.clipboard` API which must be called within user gesture event handlers like `pointerdown` or `pointerup` , and only works for content served in a secure context (e.g. `https://` )

I have broken down the flows in groups and via payload gets me going.

Would be nice if your own flow would be excluded from the output.  
Link nodes act like a pipeline, for the goal of using it as "documentation" - link nodes should be excluded/transparent/directly connected.

Flow hub is public right ? Not an option 😉  
I am now using a custom endpoint with the diagrams and mermaid pulled via cdn.

Very useful stuff, thanks a lot!

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [20 September 2023 09:01 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/9 "2023-09-20T09:01:46Z")

</div>

> [@bakman2](#):
>
> Would be nice if your own flow would be excluded from the output.

I've updated the [flow](https://flowhub.org/f/6e54d62e53ab5b6d) so that happens now - the group containing the nodes is completely removed from the mermaid graph generated. Which on the other hand, means that removing the nodes from their group will cause them to stop working, the assumption being made is that the ClientCode node is a in a group.

> [@bakman2](#):
>
> Flow hub is public right ? Not an option

Yep and copyleft. Perhaps an enterprise version would make the world a better place ... but I doubt it.

> [@bakman2](#):
>
> Very useful stuff, thanks a lot!

Thank you, glad to have helped! 👍

---

<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:** [21 September 2023 04:31 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/10 "2023-09-21T04:31:24Z")

</div>

The updated flow no longer works for me (at all) - nothing comes out of any of the debug nodes within the group:

`TypeError: undefined is not an object (evaluating 'RED.nodes.node(node.id).g')`

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [21 September 2023 07:02 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/11 "2023-09-21T07:02:46Z")

</div>

> [@bakman2](#):
>
> `TypeError: undefined is not an object (evaluating 'RED.nodes.node(node.id).g')`

Sorry for that, I have updated the flow to catch that error. It might be that you have an older version of the introspection package, i.e. ClientCode node. Either way, it should work but might not remove the group.

---

<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:** [21 September 2023 11:29 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/12 "2023-09-21T11:29:33Z")

</div>

> [@gregorius](#):
>
> In settings.js I have:
> 
> ```auto
> debugMaxLength: 10000000,
> 
> ```

The problem with that is that it can bring the browser to a crawl. That was the reason the max length was set to what it is. You could end up with 10MB x however messages have been sent, all in the browser memory. And if you ever put full msg debug outputs onto the output of an http-in or http-request node, and gets lots of requests, you will soon see an impact.

> [@gregorius](#):
>
> If you want to write out to disk, use a write-file node or alternatively use the http-in & response node to generate the graph on the fly

Or uibuilder 😉

It will let you output Markdown simply by loading the MarkdownIT library to your html page. Of course, you can also add the Mermaid extension for MarkdownIT. You can even sanitise input if you need to by using the DOMPurify library. The only code needed is the HTML to load the libraries.

> [@bakman2](#):
>
> I am now using a custom endpoint with the diagrams and mermaid pulled via cdn

Sorry to sound like a broken, self-serving record, but of course, uibuilder lets you manage front-end libraries so you don't always have to use external CDN's (though of course you can do that too).

---

<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:** [21 September 2023 16:15 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/13 "2023-09-21T16:15:45Z")

</div>

> [@TotallyInformation](#):
>
> Sorry to sound like a broken, self-serving record, but of course, uibuilder lets you manage front-end libraries so you don't always have to use external CDN's (though of course you can do that too).

Look again, I have exactly nothing to gain from uibuilder.

I use alpinejs with tailwind - the full cdn version. Tailwind requires tooling if you want to optimise, ie. this is not a frontend library you can install without using the tooling and its scaffolding setup (which I don't want).

If I want to serve them up locally, I put the full scripts in template nodes and serve them up via a custom endpoint.

This way I create complex interfaces with 2-way databinding extremely fast, that are highly performant and there is nothing that uibuilder brings to the table that gives me any sort of an advantage.

---

<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:** [21 September 2023 16:25 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/14 "2023-09-21T16:25:25Z")

</div>

> [@bakman2](#):
>
> If I want to serve them up locally, I put the full scripts in template nodes and serve them up via a custom endpoint.
> 
> This way I create complex interfaces with 2-way databinding extremely fast, that are highly performant and there is nothing that uibuilder brings to the table that gives me any sort of an advantage.

The performance of delivering scripts via template nodes isn't my idea of "highly performant". So I think there are certainly things that uibuilder could help with.

But of course, there are many ways to do anything, not trying to do a hard sell since I've nothing to gain - I don't sell uibuilder after all. 😁 Just pointing out other ways in case people want them.

---

<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:** [21 September 2023 16:56 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/15 "2023-09-21T16:56:21Z")

</div>

Ofcourse you have the last word.

> The performance of delivering scripts via template nodes isn't my idea of "highly performant". So I think there are certainly things that uibuilder could help with.

There is this thing called 304 - cache, the same thing that uibuilder needs as it sends a client js library over as well. So I don't understand what your argument really is. My interfaces are extremely fast, load once and data served via websockets and everything fully dynamic.

Enough uibuilder hijacking.

@gregorius thanks again for the quick update, flow works great (somehow I dont get the copy/clipboard error now although nothing ends up in clipboard)

Already created quite some documentation with this! Time to investigate the rest of your curious nodes 😉

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [21 September 2023 17:27 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/16 "2023-09-21T17:27:54Z")

</div>

> [@bakman2](#):
>
> Time to investigate the rest of your curious nodes

Hehe ... I hope you find something useful 🙂

Speaking of curious, has anyone come with a list of names of specific flow forms?

For example, the screw and stairway:

 ![Screen Shot 2023-09-21 at 19.23.20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5a9ec7295fd909047b1ccf96519297f3e23a7698.png)

There is also spaghetti:

 ![Screen Shot 2023-09-21 at 19.24.33](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b59fb0687642a71229f85499433f2906f0190b2.png)

And once, completely randomly I came up with a gun:

 ![Screen Shot 2023-09-21 at 19.25.18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a16536c18e711949c64699a2214f4c3824ab0fe.png)

I wonder whether Freud would have approved of this new form of programming 🤔

> [@bakman2](#):
>
> thanks again for the quick update, flow works great

No worries, glad that I could help someone be productive 🙂

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 September 2023 17:06 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/17 "2023-09-22T17:06:16Z")

</div>

Hmmm can you make a flow layout look like what it does ? 🤪

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [30 September 2023 09:58 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/18 "2023-09-30T09:58:54Z")

</div>

Update: for all those that enjoy converting things to other things, there is now a [node](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-flow2uml) for converting the Node-RED flows to UML flowcharts using Mermaid.

See the nodes [documentation](https://www.npmjs.com/package/@gregoriusrippenstein/node-red-contrib-flow2uml) for more details.

---

<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:** [29 November 2023 09:59 UTC](https://discourse.nodered.org/t/node-red-flow-to-mermaid-diagram/81412/19 "2023-11-29T09:59:21Z")

</div>

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