# Vertical flow view

**URL:** https://discourse.nodered.org/t/vertical-flow-view/5487
**Category:** Feature Requests
**Created:** [4 December 2018 23:40 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487 "2018-12-04T23:40:31Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![tree-frog](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tree-frog/32/89303_2.png) [@tree-frog](https://discourse.nodered.org/u/tree-frog)
#### Post date: [17 October 2019 19:24 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/22 "2019-10-17T19:24:24Z")

</div>

Reverse the flow just because you cross lines? That would be confusing. You would need to orient the icon on the left to the right or do some king of mark to understand it is reversed.

(Hint, use at least 1 pair of Link Nodes to unclutter your crossing lines. You could at least hover over the link to see the lines.)

---

<div class="post-metadata">

### Author: ![jacob.m](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jacob.m](https://discourse.nodered.org/u/jacob.m)
#### Post date: [18 October 2019 01:55 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/23 "2019-10-18T01:55:28Z")

</div>

I absolutely like it.  
Can you say something about how we can convert our current version to vertical view? Which files need to be modified?

---

<div class="post-metadata">

### Author: ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)
#### Post date: [18 October 2019 04:32 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/24 "2019-10-18T04:32:09Z")

</div>

This thread was about the _feature request_. It hasn't been implemented, and since there are many unresolved questions about how to do it _right_, it won't be for the time being, if at all.

---

<div class="post-metadata">

### Author: ![paulohlp](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@paulohlp](https://discourse.nodered.org/u/paulohlp)
#### Post date: [20 October 2019 13:01 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/25 "2019-10-20T13:01:20Z")

</div>

That is amazing. Would be really nice to see this as a option.  
Very nice job.

---

<div class="post-metadata">

### Author: ![jacob.m](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jacob.m](https://discourse.nodered.org/u/jacob.m)
#### Post date: [20 October 2019 21:40 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/26 "2019-10-20T21:40:32Z")

</div>

@sakazuki I followed your code in your github to reproduce this in node-red 1.0.1, without success.  
I was able to get all working, but the connectors would not connect to other nodes.

Do you have any plans to update your github to node-red 1.0.1?  
Many thanks for your contribution!

---

<div class="post-metadata">

### Author: ![sakazuki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sakazuki/32/550_2.png) [@sakazuki](https://discourse.nodered.org/u/sakazuki)
#### Post date: [20 October 2019 23:12 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/27 "2019-10-20T23:12:06Z")

</div>

Hi,

I have a plan to update it to latest node-red 1.0.x.  
Maybe within 1 month... 🙄

Regards,

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [20 October 2019 23:20 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/28 "2019-10-20T23:20:27Z")

</div>

Excellent news @sakazuki - thanks for this.

I really hope you can find a way make integration smart and elegant so the head developers will accept a PR.

I offered some (not so detailed) thoughts on how this could be integrated in an [earlier reply](https://discourse.nodered.org/t/vertical-flow-view/5487/12) I hope you find useful.

I believe one of the main hurdles will be how to handle pasting of flows when users share code.

👍

---

<div class="post-metadata">

### Author: ![TheHypnoToad](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thehypnotoad/32/7979_2.png) [@TheHypnoToad](https://discourse.nodered.org/u/TheHypnoToad)
#### Post date: [21 October 2019 01:36 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/29 "2019-10-21T01:36:17Z")

</div>

If you do have vertical ins and outs then you could have the ins a different shape to the outs on the UI in order to show the difference between the them. 🙂

---

<div class="post-metadata">

### Author: ![jacob.m](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jacob.m](https://discourse.nodered.org/u/jacob.m)
#### Post date: [21 October 2019 13:16 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/30 "2019-10-21T13:16:57Z")

</div>

@sakazuki Yes, I meant to say v1.0.1.  
That's great news, vertical flows are especially useful for us as we use node-red for our chatbot. The flow of a conversation is more readable, as that's how most people are used to seeing conversations flow.

---

<div class="post-metadata">

### Author: ![jacob.m](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jacob.m](https://discourse.nodered.org/u/jacob.m)
#### Post date: [22 October 2019 01:11 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/31 "2019-10-22T01:11:35Z")

</div>

For us, the whole point of using node-red to write the chatbot logic, was to easily visualize the conversation flow.  
Just to see what the chatbot flow looks like, this is what I'd like to clean up with a vertical view:

 ![chatbot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/32d96600bf0c74f15e68237a068fae6a5fdee352.png)

@knolleary Do you have some type donation account that we can contribute to, to show our appreciation?

---

<div class="post-metadata">

### Author: ![tilleul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tilleul/32/78_2.png) [@tilleul](https://discourse.nodered.org/u/tilleul)
#### Post date: [22 October 2019 04:58 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/32 "2019-10-22T04:58:36Z")

</div>

I have flows that are even more complex than that ... what I use is link-nodes within the flow... this removes all the links that go across the other nodes ... also I hide the nodes labels and/or use different icons for the nodes ... for example you certainly could hide the labels for the "send & listen" and "send and continue" nodes ...

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [22 October 2019 06:56 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/33 "2019-10-22T06:56:31Z")

</div>

Of course there is nothing to stop one doing this, which I have myself done on occasion when the flow leant itself to this layout

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

---

<div class="post-metadata">

### Author: ![AntCole](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@AntCole](https://discourse.nodered.org/u/AntCole)
#### Post date: [23 October 2019 06:41 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/34 "2019-10-23T06:41:51Z")

</div>

+1 to this idea, in our upcoming situation this would be really valuable given words are inherently wide not tall. However, I note OP's appreciation this would not be applicable for all flows.

**Approaching some of the ideas mentioned in this thread:**

I agree with @knolleary that if done, an editorTheme feels like a good place for this to live

@sakazuki is it possible to render a how a previously complex horizontal flow (eg sample-H) would look once the horizontal mode is enabled but not moved any nodes? It seems if this were a local setting, differing preference between co-authors would be mildly messy but not a killer to collaboration or sharing - for sure no worse than working with someone who doesn't care about lining nodes up in their flows.

Status of nodes is maybe the biggest real UI challenge, which may be beyond the time availability of Nick. The Status UI works really nicely as is though I would sacrifice that short term by simply having the lines under the status for a short term fix. Longer-term, a lower tray with this status may be a way forward (Sorry if this is another off top of head idea like Steve).

I don't think the JSON sharing would need to differ when im/exporting flows (but Nick may know more) so it wouldn't prevent sharing and would just look like Colin's example if not enabled for the new user. I would suggest the best practice to add a comment node to mention vertical was used.

was mentioned a few places more detail may be needed to achieve this idea - could this be listed what would be required? (other than needing 30hr days.. we greatly appreciate all the effort that is going into this!)

---

<div class="post-metadata">

### Author: ![georgegreener](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/georgegreener/32/13246_2.png) [@georgegreener](https://discourse.nodered.org/u/georgegreener)
#### Post date: [30 October 2019 18:04 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/35 "2019-10-30T18:04:20Z")

</div>

Hi Jacob. I did the same thing based off @sakazuki 's codebase. Here's what I came up with, implemented with v1.0.1. Hope it helps. I haven't figured out how to change the port orientation in the palette yet, but the ports and wires are working vertically and horizontally.

@sakazuki , looking forward to your v1.0.x implementation

> **[georgegreener/node-red](https://github.com/georgegreener/node-red)**
>
> Low-code programming for event-driven applications - georgegreener/node-red

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [30 October 2019 22:39 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/36 "2019-10-30T22:39:22Z")

</div>

Looks quite good 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1ffdadaa2e575cdff2644274b55e3cc9f765bac0.png)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [31 October 2019 00:12 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/37 "2019-10-31T00:12:16Z")

</div>

If/when we look at this properly.... those bezier curves the wires follow need a lot of work. Of the many things I'm particular about, it's the curve of our wires.

---

<div class="post-metadata">

### Author: ![sakazuki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sakazuki/32/550_2.png) [@sakazuki](https://discourse.nodered.org/u/sakazuki)
#### Post date: [2 November 2019 05:31 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/38 "2019-11-02T05:31:55Z")

</div>

Hi,

For the time being, I updated [vertical\_view branch](https://github.com/sakazuki/node-red/tree/vertical-view) to work with Node-RED v1.0.2.

Thank you for your interest.  
Regards,

---

<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: [2 November 2019 11:28 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/39 "2019-11-02T11:28:46Z")

</div>

Agree - also the vertical alignment of nodes should always result in a fully vertical line otherwise a lot of folk with OCD are going to be very agitated.

---

<div class="post-metadata">

### Author: ![sakazuki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sakazuki/32/550_2.png) [@sakazuki](https://discourse.nodered.org/u/sakazuki)
#### Post date: [3 November 2019 07:46 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/40 "2019-11-03T07:46:13Z")

</div>

Though I understand that there are various challenges,  
For the time being, I added a vertical flow to the [Node-RED-Desktop v1.0.0-beta.2](https://sakazuki.github.io/node-red-desktop/) on a trial basis so that interested people can easily try the vertical flow.

---

<div class="post-metadata">

### Author: ![arlint](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@arlint](https://discourse.nodered.org/u/arlint)
#### Post date: [13 November 2019 18:26 UTC](https://discourse.nodered.org/t/vertical-flow-view/5487/41 "2019-11-13T18:26:46Z")

</div>

This is amazing. I think having the lines turned into arrows would be great. It would add probably too much extra info to the flow file but being able to drag from the one nodes edge (top or left or right) To any edge of another node (top or left or right etc). Flow follows the arrow direction. That could result with some clean flows.

[Previous page](https://discourse.nodered.org/t/vertical-flow-view/5487.md?page=1)

[Next page](https://discourse.nodered.org/t/vertical-flow-view/5487.md?page=3)
