Ports (on shapes)

[alixander]

This suggestion has come up a few times. I find myself wanting this concept of ports not infrequently too. E.g. internet connection goes to firewall port, firewall port goes to first rule.

Layout engine support for ports specifically is scattered. Dagre doesn't support it. Graphviz, as with most things on there, you can hack it to work. ELK has good port support.

[quixoticaxis]

Hello.
Is it currently possible to control ports at all?
I'm trying to use D2 with ELK layout engine to create algorithm flowcharts, and I'm looking for a way to force connections to stick to vertices of diamond "decision" blocks.

[alixander]

Is it currently possible to control ports at all?

no, unfortunately not.

I'm looking for a way to force connections to stick to vertices of diamond "decision" blocks.

yeah that should be possible. made an issue: #1212

[quixoticaxis]

Thank you.

[soma-m]

What do you think about the following syntax for drawing ports?

A
B: {
    port_1: {shape: port}
    port_2: {shape: port}
}

A -> B.port_1
A -> B.port_2

I was thinking we could add a new shape port which draws the element as a port on the parent container.

In case there is no parent container, I was thinking we could make a box around root and draw the port on that box.

What do you think?

[brandonzylstra]

The syntax looks fine, but I think you'll want some way to specify where the port goes, won't you?

A
B: {
    left: {shape: port, side: left, placement: 50%}
    bottom: {shape: port, side: bottom, placement: 25%}
}
C

A -> B.left
C -> B.bottom

(The side: left would be used by D2, while the name of the port is just for the user's convenience.)

top, bottom, right, left would work for rectangular shapes. I don't know if D2 supports other shapes but degrees or clock positioning could also be supported for non-rectangles (if and when that is relevant).

[sincebyte]

I'm wonder what about the issues now?

[pidgeon777]

I'm also interested

[TheOtherMarcus]

I want ports as well and even better would be if I can put labels on them. See Simulink block diagrams for ideas, where blocks often have labels at the point where the arrow is attached.

Just by adding a new position "near: edge" for internal objects we would come a long way.

[dunderInitt]

Feature would still come in handy, i would like to visualize different services on an infra type of diagram, each with their own port.