6

I'm trying to replicate a Data Flow Diagram using Draw.io.

I'm using the oval basic shape but there are not enough fix points.

Is it possible to add more?

1
+50

You can add fixed points by changing the style, as per this example.

2
2

The accepted answer links to the right documentation but it seems helpful to have a fully detailed answer on Stack Exchange, including a copy/pasteable example.

Here's the steps:

  1. Right click your shape
  2. Pick "Edit Style" from the context menu

    right click menu

  3. Add a key points with a value with an array of coordinates (values between 0 and 1 for place on the side of a shape), e.g. points=[ [0.0, 0.0], [0.0, 0.5], [0.0, 1.0], etc ]

    add style to shape

  4. Click apply and you're done.

Here's a particularly useful example:

10 anchor points per side (incl. corners):

points=[[0,0],[0,0.1],[0,0.2],[0,0.3],[0,0.4],[0,0.5],[0,0.6],[0,0.7],[0,0.8],[0,0.9],[0,1],[0.1,0],[0.2,0],[0.3,0],[0.4,0],[0.5,0],[0.6,0],[0.7,0],[0.8,0],[0.9,0],[1,0],[1,0.1],[1,0.2],[1,0.3],[1,0.4],[1,0.5],[1,0.6],[1,0.7],[1,0.8],[1,0.9],[0.1,1],[0.2,1],[0.3,1],[0.4,1],[0.5,1],[0.6,1],[0.7,1],[0.8,1],[0.9,1],[1,1]]

Or, the full style for a default white rectangular box:

rounded=0;whiteSpace=wrap;html=1;points=[[0,0],[0,0.1],[0,0.2],[0,0.3],[0,0.4],[0,0.5],[0,0.6],[0,0.7],[0,0.8],[0,0.9],[0,1],[0.1,0],[0.2,0],[0.3,0],[0.4,0],[0.5,0],[0.6,0],[0.7,0],[0.8,0],[0.9,0],[1,0],[1,0.1],[1,0.2],[1,0.3],[1,0.4],[1,0.5],[1,0.6],[1,0.7],[1,0.8],[1,0.9],[0.1,1],[0.2,1],[0.3,1],[0.4,1],[0.5,1],[0.6,1],[0.7,1],[0.8,1],[0.9,1],[1,1]]

Looks like this:

end result


Also useful for standard boxes, example with 5 points on left/right, and 10 on top/bottom:

points=[[0,0],[0,0.25],[0,0.5],[0,0.75],[0,1],[0.1,0],[0.2,0],[0.3,0],[0.4,0],[0.5,0],[0.6,0],[0.7,0],[0.8,0],[0.9,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[0.1,1],[0.2,1],[0.3,1],[0.4,1],[0.5,1],[0.6,1],[0.7,1],[0.8,1],[0.9,1],[1,1]]
1
  • Note that the points are moved to its nearest outer Edge for Example when your shape is a 5x5 Rectangle and you set a point to [0.5,0,5] it will be rendered like [1.0,0.5] – maxbit89 Jul 29 '20 at 8:29
0

Select the element you want to change. Click on edit style and add the parameter points after a semicolon:

points=[[0,0], [1,0],[0,1],[1,1]]

The example above will create 4 fixpoint in each corner. So you need list of lists [[x_i,y_i]] with elements between 0 and 1.

0

With the intention to make it clearer and as specified in the documentation the connection/anchor point can be places even inside the shape by using the third parameter (1 = tight the point to the edge, 0 = place it anywhere inside the shape) Negative numbers default to 0 and bigger than 1 default to 1

Activation for Snappoints makes easier to tie connectors to anchors.

points=[[0.25,0.5,0],[0.75,0.5,0]]
0

Hope this helps someone, I wrote a python script to generate the string for evenly spaced points on a rect

https://gist.github.com/gmkado/ab12ea0d0b5dbf589ec39b1b221f51d5

EDIT:

I'm guessing the downvotes are due to not explaining this well. If you run the code from that script as a python script it will print out the "points" array that you can then copy-paste into the drawio style. Here's a link to run it in the browser so you don't even need python locally: https://trinket.io/python3/ae199c59c1

Modify this section:

# SET THESE TO THE NUMBER OF POINTS YOU NEED
top = 0
left = 0
right = 13
bottom = 0

Running this will print out:

points=[[1.00, 0.00],[1.00, 0.08],[1.00, 0.17],[1.00, 0.25],[1.00, 0.33],[1.00, 0.42],[1.00, 0.50],[1.00, 0.58],[1.00, 0.67],[1.00, 0.75],[1.00, 0.83],[1.00, 0.92],[1.00, 1.00]]

Then copy-paste:

enter image description here

And voila:

enter image description here

2

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.