7

I have looked through all the available items but cannot find a curve or arc to add to my diagram. Is it there somewhere?

2

You can drag on a new edge as a curve from the Connection library

The curved connector icon in the Connection library in draw.io

Or you can change an existing connection by selecting it and picking curve from the edge style toolbar drop-down

enter image description here

  • You can also select one of those curved lines and click on the right sidebar button "Set as Default Style" to always use the curved shape. I think it's prettier. – Yavor Kirov May 20 at 6:05
9

A more manual approach to getting curves in draw.io, is to edit the shape of some element. This allows for three different variations of curves, <arc ... />, <quad ... /> or <curve ... />. The image show these three curves, and further down is the code needed to produce these elements. The image has some extra guidelines to help illustrate the curve generation.

Example image of arc, quad and curve

Modifying shapes

We are able to edit the style and shape of elements within draw.io. Not all elements does however have a shape to be edited. Most of the elements in the Basic menu does have a shape to edited.

Shape and style can edited from the Format Panel Ctrl+Shift+P in the Style tab, and there you have some buttons aptly named Edit Style, Edit Image, and/or Edit Shape. Which buttons are showing depends on the selected element.

For this answer we're focusing on the Edit Shape button, and to display it we start by adding a Basic > Star to our drawing. Draw.io has some documentation on editing shapes with a small example, and a reference to the SVG documentation on drawing arcs, which was the basis for me experimenting until I found the code examples used in this answer.

For each of the examples below, insert some element with a shape, select it and click the Edit Shape button. Insert or edit the text within and either hit Preview for a preview, or Apply to close the dialog and see your final result. The final result of this code, with some added guidelines results in this image:

Edit an arc

The arc is the based upon two ellipses which goes through the base point, and the specificed point. As these actually form four different paths from the base to the end point, you have to chose which of these paths you are using.

Here is example code for a pie segment of 240°:

<shape aspect="variable" h="2.0" w="2.0" name="Angle" strokewidth="inherit">
  <connections/>
  <background>
    <path>
      <move x="2.0" y="1.0"/>
      <arc x="0.5" y="1.866" rx="1.0" ry="1.0" large-arc-flag="1" sweep-flag="0" x-axis-rotation="0"/>
      <line x="1.0" y="1.0"/>
      <close/>
    </path>
  </background>  
  <foreground>
    <fillstroke/>
  </foreground>
</shape>

Here are the details as to why this code draws a pie segmennt of 240 degrees:

  • Most shapes will need to have shape, background and/or foreground. When I chose to use background it is because that allows me to add shadows to the shape very easily. I've made the base canvas of the shape to be a square of height and width equals 2.0, this is to allow for a full unit circle to be included within the shape
  • We need to draw a path
    • We'll start at 0 degrees, which translates into the <move x="2.0" y="1.0"> command
    • We then draw an arc going from the previous point in path till an end point (x, y), with radiuses of the ellipsises (rx and ry) where sweep-flag and large-arc-flag selects the correct ellipse part, and whether these ellipsises are rotated (x-axis-rotation). To get a 240 degree we need the following:
      • Using basic trig or an Interactive Unit Circle we find the coordinates on the unit circle corresponding to 240 degrees: (cos(240°), sin(240°) = (-0.5, -0.866) which translated into our shape needs to be (1+x, 1-y) which gives x="0.5" y="1.866"
      • The degree is larger than 180, so we choose large-arc-flag="1"
      • And we are drawing the path anti-clockwise, which gives sweep-flag="0"
    • To make it a nice pie segment, we add a line back to the center, coordinates 1.0, 1.0, and then close the path
  • This defines the entire path, which is going to get a shadow, but it has strictly speaking not been drawn yet. This is done using the fillstroke command in the foreground section

Note that if you only want the arc segment, you can drop the line and close tags, and replace the fillstroke with a simple stroke. Do experiment with changing the sweep-flagand large-arc-flag, and the other tags. In my example I've used rx=ry=1 which transform the ellipsis into circles, but do experiment with change the radius, sweep or large-arc stuff, and see what happens.

Some other coordinates to get some standard angles are as follows:

  • 45° on unit circle: (0.707, 0.707) which gives x="1.707" y="0.293"
  • 60° on unit circle: (0.5, 0.866) which gives x="1.5" y="0.134"
  • 225° = 180°+45° : (-0.707, -0.707) which gives x="0.293" y="1.707"
  • n° on unit circle: (cos(n), sin(n)`` which gives x="1+cos(n)" y="1-sin(n)"
  • Note the values 0.707 (& 0.293), 0.5, 0.866 (& 0.134), which reoccurs regularly related to the 30°, 45° & 60° and n*90° angles around the circle...

Note the use of move to specify the base point, and then the daisy chaining of arc and line (and you could have used quad and curve) to produce a longer path.

Edit an quad

An quad curve is a quadratic curve, which is the curve you get when starting with a line from base point through control point, and turn around till you match the line from the control point through end point.

Here is an example:

<shape aspect="variable" h="1" w="1" name="Quad" strokewidth="inherit">
  <connections />
  <background>
    <path>
      <move x="0" y="0"/>
      <quad x1="0.25" y1="1" x2="1" y2="1"/>
    </path>
  </background>
  <foreground>
    <stroke/>
  </foreground>
</shape>

Explanation of quad curve:

  • Set the base point, <move x="0" y="0" />
  • Give a control point to the quad, x1="0.25" y1="1"
  • And specify the end point, x2="1" y2="1"

This kind of curve can be useful when you want to control the angle of the start and end line segments of the curve. That is, if you want to make multiple curve segments, and want them to have nice joints.

Edit a curve

The final curve shape, are using two control point which kind of works as gravitational pulls on the line until the end point. Here is the code:

<shape aspect="variable" h="1" w="1" name="curve" strokewidth="inherit">
  <connections />
  <background>
    <path>
      <move x="0" y="0"/>
      <curve x1="0.1" y1="0.4" x2="0.9" y2="0.3" x3="1" y3="1"/>
    </path>
  </background>
  <foreground>
    <stroke/>
  </foreground>
</shape>
  • Set the base point, <move x="0" y="0" />
  • Give two control points to the curve, x1="0.1" y1="0.4" x2="0.9" y2="0.3"
  • And specify the end point, x3="1" y3="1"

Note that I've used the upper left as start point, and lower right as end point for both the quad and the curve, this can of course be changed if you want another general direction of the curve.

  • Where do I enter this code? All I can find is a button called "Edit Style", but when I press it I get code on the form ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FF6666;fontColor=#FFFFFF;, and when I paste your code in there instead, I break the shape and I can't see it anymore. – HelloGoodbye Jul 31 '17 at 22:51
  • Menu bar -> Extras -> Create Shape – gdamjan Mar 5 '18 at 23:06
1

One of the way to draw arcs is drag the Bidirectional curve from the Misc panel to the drawing area and then click on the curve to see the "blue colored" points known as "waypoints". You can remove these waypoints to alter its structure. Right click and select remove waypoint. Remove unnecessary way points until you have only 3 way points , 2 at the edges and one anywhere in between. By dragging the waypoint that is in between the 2 way points you can get a curve of different curvatures.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.