5

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.

| improve this answer | |
1

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]]
| improve this answer | |
  • 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 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.

| improve this answer | |
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]]
| improve this answer | |
-1

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

| improve this answer | |

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.