# Basic drawing tools in NR editor

**URL:** <https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924>\
**Category:** Feature Requests\
**Created:** [12 October 2018 10:02 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924 "2018-10-12T10:02:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [12 October 2018 10:02 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/1 "2018-10-12T10:02:04Z")

</div>

How difficult would it be to add some basic drawing tools to the editor?

Things like box, circle, text. Perhaps even some colour?

Grouping stuff within a tab would be so much easier using visual queues.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 October 2018 10:09 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/2 "2018-10-12T10:09:47Z")

</div>

There is already one option for organizing nodes.  
Groups, well you can always leave big enough gaps between logical groups.

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

---

<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:** [12 October 2018 12:30 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/3 "2018-10-12T12:30:02Z")

</div>

The simple answer is - quite difficult. So not on any near term to-do list.

Everything about a flow is held in the flow file - and that doesn't have the concepts for things that aren't nodes - or things not part of the flow itself. To revisit that would be a fundamental reworking of the guts of Node-RED that we don't really have time for compared to all the other things we also have on the roadmap.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [13 October 2018 04:39 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/4 "2018-10-13T04:39:03Z")

</div>

Thanks for reply.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [13 October 2018 13:14 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/5 "2018-10-13T13:14:29Z")

</div>

Well, this seems a good time to let (another) cat outta the bag... so here goes nothin'!

Earlier this year, I developed a new feature for the node-red Editor -- Swimlanes -- in order to visually separate portions of flows by task, owner, context, whatever. Here is an example of how it looks in one of my projects:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c3c65efc4b93ea35be826293d66f9d6343ab3f9f.jpeg)

The swimlane information is stored as 2 new properties on the flow (tab) itself, so there are no extra nodes needed. The tab Edit panel is enhanced to allow adding, editing, and moving the swimlanes -- like so:

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

In addition, the "headers" for each swimlane (the semi-opaque rect on the left) can be dragged and resized right in the node-red Editor. The implementation is similar to the grid lines, in that they are background display only and can be turned on/off as necessary.

I do have several other improvements planned, so the nodes can move with the lanes. My employer has given me permission to contribute this work back to the community, if Nick and the team think it would be useful to the general public. Anyway, just wanted to get a conversation started, fwiw...  
\_\_  
Steve

---

<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:** [13 October 2018 14:34 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/6 "2018-10-13T14:34:56Z")

</div>

> [@shrickus](#):
>
> Swimlanes

Ha! Simple but potentially useful. Nice.

While there is no doubt that some kind of more generic "container" format for grouping sections of flow would be really nice (if you've ever used Microsoft Visio, you'll know how that works), horizontal swimlanes could be really useful in some circumstances for sure.

Be nice if the lanes automatically adjusted to their contents 😉 but I realise that would be back to the "quite difficult" understatement that Dave made.

Also be nice if the colours could be #rrggbb CSS types too.

Great work though, I hope this gets adopted.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [14 October 2018 05:28 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/7 "2018-10-14T05:28:39Z")

</div>

Certainly a vast improvement over having nothing. 😄

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [14 October 2018 14:46 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/8 "2018-10-14T14:46:04Z")

</div>

> [@TotallyInformation](#):
>
> Also be nice if the colours could be #rrggbb CSS types too.

I started down that path, but found that most combinations made the whole flow hard to see. Without pre-defining some options, I was spending too much time tweaking the color palette, and it was too difficult to have consistency across my flows.

And since my requirements were to have a curated list of colors, I settled on these -- enough separation from each other (imo), without obscuring the wires/nodes (with and without highlights) of the flow editor.

---

<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:** [15 October 2018 07:31 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/9 "2018-10-15T07:31:00Z")

</div>

> [@shrickus](#):
>
> Swimlanes

Interesting idea ... I suppose that to achieve this you had to modify the core of NR ?

---

<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:** [15 October 2018 08:59 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/10 "2018-10-15T08:59:54Z")

</div>

> [@shrickus](#):
>
> I started down that path, but found that most combinations made the whole flow hard to see. Without pre-defining some options, I was spending too much time tweaking the color palette, and it was too difficult to have consistency across my flows.
> 
> And since my requirements were to have a curated list of colors, I settled on these -- enough separation from each other (imo), without obscuring the wires/nodes (with and without highlights) of the flow editor.

All valid points Steve and I'm certainly not complaining about having some pre-defined colours - I wouldn't complain anyway! 🙂

However, not everyone uses the standard colour scheme so at some future point, people will doubtless be needing the capability. Still a great start though and I certainly back having this PR'd into core if possible.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [15 October 2018 14:21 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/11 "2018-10-15T14:21:49Z")

</div>

> [@tilleul](#):
>
> I suppose that to achieve this you had to modify the core of NR ?

Yes -- it's rather tightly integrated into d3 logic for drawing the grid lines. This was necessary since svg elements don't use z-index to determine which are "on top of" each other -- that is defined by the order the elements occur on the page (\*aargh)

---

<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:** [15 October 2018 14:39 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/12 "2018-10-15T14:39:11Z")

</div>

> [@shrickus](#):
>
> elements don't use z-index to determine which are "on top of" each other

That is part of svg v2 standard it seems. No idea when/if browser support will ever arrive for that. It seems permanently stuck in "Editors Review" at the W3C.

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [10 February 2019 08:50 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/13 "2019-02-10T08:50:49Z")

</div>

I am quite surprised of how little appraisal this has received. This feature would be immensely useful. Also the execution looks extremely polished. Awesome work!

I've been wanting to document my flows to assist seeing the logical grouping of nodes. The he existing comment node seems to just clutter up the flow even more so I've stopped using it. It does not visually stand up enough for it to be useful. .

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [10 February 2019 10:53 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/14 "2019-02-10T10:53:05Z")

</div>

Agreed, very useful, but other priorities I guess. 😑

---

<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:** [10 February 2019 12:47 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/15 "2019-02-10T12:47:51Z")

</div>

> [@ristomatti](#):
>
> I've been wanting to document my flows to assist seeing the logical grouping of nodes. The he existing comment node seems to just clutter up the flow even more so I've stopped using it. It does not visually stand up enough for it to be useful. .

There is certainly a bit of art involved with laying out a neat flow. I couldn't live without plenty of comment nodes though.

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/404f79d4d0060bad1bc687c6a9be618a4eff7ede.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:** [8 August 2019 15:26 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/16 "2019-08-08T15:26:14Z")

</div>

Some food for thought;

It would be great if it was possible to resize the comment node as a "border" around a flow (perhaps with custom background color and hidden icon as it doesn't add much value to the node)

---

<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:** [8 August 2019 18:50 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/17 "2019-08-08T18:50:12Z")

</div>

This comes up on a fairly regular basis. However, I think that most of us would prefer a "group" node so that the nodes it contains move about together.

To be honest though, even one that didn't interact with the nodes but, as you say, had a resizable border would be useful.

Not sure whether it is worth overloading the comment node for that though. Might be better for it to be a separate node - after all, all nodes now inherit a comment tab.

The Node-RED Trello board is a useful place to see what might already be on the roadmap for future releases:

https://trello.com/b/R0O3CSrI.html

Also, don't forget that you can use a subflow to group nodes together as well. Although they are designed for reusability, you don't have to reuse it.

---

<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:** [8 August 2019 19:11 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/18 "2019-08-08T19:11:44Z")

</div>

also discussed:

> [@Expanding on the Comment node--Creating a node that can be resized?](https://discourse.nodered.org/t/expanding-on-the-comment-node-creating-a-node-that-can-be-resized/10841):
>
> Use-case: Building a Section node that a flow user can re-size and always is the "bottom-most" node layer of the Node-RED canvas. Users would use this node for demarcating a specific area of interest for the original Flow designer and other succeeding flow designers. This is similar to the comment node It doesn't appear that node resizing is something immediately supported, nor within the vanilla Style Guide. Has anyone else considered this? Any best practices for accomplishing this use-case? …

and

> [@Being able to draw optical frames in editor](https://discourse.nodered.org/t/being-able-to-draw-optical-frames-in-editor/13000):
>
> It would be great to be able to have some kind of a draw function to create rectangles in editor to group nodes optical together. I have a picture attached of how it could look like. Similar to the selection frame. It could also be kind of attached to a comment node to provide a UI reference point where it belongs to (for example to delete it). What do you think about this idea?

---

<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:** [8 August 2019 19:59 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/19 "2019-08-08T19:59:20Z")

</div>

I assume that to contribute something of this nature, one would have to know something about D3? I can't imagine it would be that easy to do.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [9 August 2019 04:07 UTC](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924/20 "2019-08-09T04:07:44Z")

</div>

> [@TotallyInformation](#):
>
> However, I think that most of us would prefer a "group" node so that the nodes it contains move about together

Yes, but some of us (ok, maybe only me) wanted the ability to be able to "draw" on/in the Editor as well. Nothing fancy, but enough to add text, some flowchart symbols, and basic line drawing tools. Throw in some colour as well, and ...💥

[Next page](https://discourse.nodered.org/t/basic-drawing-tools-in-nr-editor/3924.md?page=2)