23

I want to draw a free-hand polygon, to enclose certain portions of my diagram so I can identify them as being part of Phase I development, for example. Is there a polygon tool in draw.io?

2

5 Answers 5

19

Start by adding the polygon shape to your drawing. The polygon shape is within the "Basic" shapes group. You may need to bring the "Basic" shapes group into view from the "View" > "Shapes..." menu.

Next, select your polygon and click "Edit Style". There you will see something like:

shape=mxgraph.basic.polygon;polyCoords=[[0.25,0],[0.75,0],[1,0.25],[1,0.75],[0.75,1],[0.25,1],[0,0.75],[0,0.25]];

Add/Remove additional points to the polyCoords array and click on Apply. No need to worry about getting the coordinates correct -- we'll move them around in the next step. Just keep them within the boundary of your shape (from 0.0 to 1.0). Click Apply.

Finally, move your points around on the drawing canvas.

3
  • 2
    This should be the accepted answer.
    – A.D.
    Commented Nov 28, 2020 at 21:05
  • This should be the accepted answer. Commented Mar 4, 2021 at 23:56
  • 1
    Just to be a little more helpful, here are the coords I use: polyCoords=[[0.50,0],[0.81,0.095],[1,0.35],[1,0.66],[0.81,0.91],[0.50,1],[0.25,0.94],[0,0.66],[0,0.35],[0.19,0.095]]
    – flags
    Commented Jul 15, 2022 at 11:58
8

I just found the polyline and polygon shapes, which are kindof what you were searching for... however they're limited to 8 waypoints, you can move every waypoint separately and they can be filled.

Both are located in the Basic shapes section.

enter image description here

3
  • It seems that those options were removed. Using v 12.4.2 here, they are nowhere to be found.
    – alelom
    Commented Dec 15, 2020 at 16:41
  • On my machine it loads v 14.0.4 and it has that option...
    – JCH2k
    Commented Dec 16, 2020 at 20:31
  • 2
    Both polyline and polygon shapes have 8 waypoints by default, However, you can add (or remove) waypoints on the polyline or polygon shapes by editing its style. Select the shape, then choose 'Edit Style'. You'll see 8 default waypoint coordinates in the polyCoords array -- simply add or remove waypoints to this array as needed and apply. Then, drag any added waypoints on the edge of the shape as desired.
    – bug11
    Commented Jan 24, 2021 at 20:55
7

I do it via the line tool. You can switch the endings to none and the waypoints to orthogonal so you get a "free hand" tool. If you place the first and last waypoint on each other you can draw any polygon you want.

1
  • 14
    That's cool, but how can you close the shape to fill it in?
    – z0r
    Commented Feb 23, 2018 at 3:05
5

Unfortunately, at present time (and since a long time) there is no easy solution. If you really need to draw a filled polygon, the only solution that I could find is to represent it as a "patchwork" of simple shape (triangles, rectangles, etc.). More precisely, for each of the shapes which will compose te patchwork, you can:

  1. define the correct size, and the correct rotation by adjusting the parameter [Angle] of the onglet [Arrange]; this is the most time-consuming step,
  2. remove the border, fill the shape with the color you want, and send it to the back,

If you take time, you can reasonably cover simple polygons by using this technique.

0

Try using these coordinates. verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.polygon;polyCoords=[[0.27,0.02],[0.67,0],[0.94,0.15],[1,0.43],[0.92,0.75],[0.59,0.9],[0.16,0.84],[0,0.57],[0,0.25]];polyline=0;fillColor=none;strokeColor=#FF3333;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.