How do I adjust arrow size?

If the default arrow size isn't to your liking you can use the following properties to customize the arrow size:

  • arrow-min-width

  • arrow-min-height

  • arrow-width

  • arrow-height

These properties can be used within @settings or within a connection decoration rule in the Advanced Editor. Generally you'll want to set arrow-min-width and arrow-min-height to 0 if you're sizing arrows manually.

@settings {
  arrow-min-width: 0;
  arrow-min-height: 0;
  arrow-width: 5;
  arrow-height: 3;
}

Arrow offset

You can also increase the offset between the element and the connection to make the arrow more distinctive. To do so, add this code to your advanced editor:

element {
  margin: 10;
}

You can change the number 10 to any other number to increase/decrease the space between element and arrow.

Last updated

Was this helpful?