Drawing "interfaces" with Graphviz - graphviz

Question

In order to model some sort of (nested/layered) system architecture I am trying to figure out how to draw a box that has multiple "entry points" (aka interfaces). The goal is which component uses which interface to communicate with another component.
Here is a hand drawn example to illustrate the goal:
Note that the yellow boxes are systems made of components (blue boxes). The green dots are interfaces of components. If an interface is exposed to components from outside the system, the interface needs to be propagated on system level (red dots).
For the interfaces of components (green dots) a "record-based node" does the trick; a "table cell" in the top row can be used to act as an interface.
What I have not figured out yet is the "system interface" part (red dots). Is there a way how I place for example a "circle" shape explicitly on the border of a subgraph? Or do you have an other solution in mind how I can emulate the representation of a "system interface"?

Answer 1

You can get fairly close by using non-standard "arrowheads" (https://graphviz.org/doc/info/arrows.html), but tough/impossible to get
circles on the border
edges to "line up" (can't declare an edge from an interior node to its own cluster)
see graph below
It is possible to draw the desired graph with Graphviz by explicitly positioning nodes, including the colored points, setting X,Y coordinates (see https://www.graphviz.org/faq/#FaqDotWithNodeCoords). Instead, I'd suggest using one of the PIC language implementation. Specifically, pikchr (https://pikchr.org/home/doc/trunk/homepage.md)
Best dot version (without explicit positioning):

Answer 2

Using additional hidden edges and nodes you can get a partial solution, but surely there are better tools, as already said, in graphviz you can not easy place a point on the boundary of a cluster and keep the code clean of extra nodes (unless it's not neato engine).
Variant with hidden elements, image:
and script:
digraph system_architecture {
graph [
newrank=true
ranksep=0
compound=true
splines=curved]
subgraph cluster_S1 {
style=filled
fillcolor="lightyellow"
label="Sys 1"
labelloc="b"
margin=3
sys1_rest_dot_1 [shape=point height=0]
sys1_rest_dot_2 [shape=point height=0]
comp11_rest_dot [shape=point height=0]
comp12_graphql_dot [shape=point height=0]
subgraph cluster_C11 {
label=""
style="filled"
fillcolor="cyan"
comp11 [label="Comp 1.1" shape=none]
}
subgraph cluster_C12 {
label=""
style="filled"
fillcolor="cyan"
comp12 [label="Comp 1.2" shape=none]
}
}
invis_node [style=invis]
invis_node -> sys1_rest_dot_1 [lhead="cluster_S1" color=none minlen=2]
sys1_rest_dot_1 -> sys1_rest_dot_2 [lhead="cluster_S1" arrowsize=1 penwidth=10 arrowhead=dot color=red headlabel="REST"]
sys1_rest_dot_2 -> comp11_rest_dot [minlen=4 headlabel="REST" arrowhead=vee ]
comp11_rest_dot -> comp11 [lhead="cluster_C11" arrowsize=1 penwidth=10 arrowhead=dot color=lime]
comp11 -> comp12_graphql_dot [minlen=3 lhead="cluster_C12" headlabel="GraphQL" arrowhead=vee]
comp12_graphql_dot -> comp12 [lhead="cluster_C12" arrowsize=1 penwidth=10 arrowhead=dot color=lime]
subgraph cluster_S2 {
style=filled
fillcolor="lightyellow"
label="Sys 2"
labelloc="b"
margin=3
sys2_rest_dot_1 [shape=point height=0]
sys2_rest_dot_2 [shape=point height=0]
comp21_rest_dot [shape=point height=0]
comp22_sql_dot [shape=point height=0]
sys2_soa_dot_1 [shape=point height=0]
sys2_soa_dot_2 [shape=point height=0]
comp22_soa_dot [shape=point height=0]
subgraph cluster_C21 {
label=""
style="filled"
fillcolor="cyan"
comp21 [label="Comp 2.1" shape=none]
}
subgraph cluster_C22 {
label=""
style="filled"
fillcolor="cyan"
comp22 [label="Comp 2.2" shape=none]
}
}
comp12 -> sys2_rest_dot_1 [arrowhead=vee]
sys2_rest_dot_1 -> sys2_rest_dot_2 [lhead="cluster_S2" arrowsize=1 penwidth=10 arrowhead=dot color=red headlabel="REST"]
sys2_rest_dot_2 -> comp21_rest_dot [minlen=4 headlabel="REST" arrowhead=vee ]
comp21_rest_dot -> comp21 [lhead="cluster_C21" arrowsize=1 penwidth=10 arrowhead=dot color=lime]
comp21 -> comp22_sql_dot [minlen=3 lhead="cluster_C22" headlabel="SQL" arrowhead=vee]
comp22_sql_dot -> comp22 [lhead="cluster_C22" arrowsize=1 penwidth=10 arrowhead=dot color=lime]
comp12 -> sys2_soa_dot_1 [arrowhead=vee]
sys2_soa_dot_1 -> sys2_soa_dot_2 [lhead="cluster_S2" arrowsize=1 penwidth=10 arrowhead=dot color=red headlabel="SOA"]
sys2_soa_dot_2 -> comp22_soa_dot [minlen=7 headlabel="SOA" arrowhead=vee]
comp22_soa_dot -> comp22 [ head="cluster_C21" arrowsize=1 penwidth=10 arrowhead=dot color=lime]
}
Variant without tricks (does not fit the question, but code is clean), image:
and script:
digraph system_architecture {
graph [
overlap=false
ranksep=.6
nodesep=.6
compound=true
splines=curved
fontname="Arial"]
subgraph cluster_S1 {
style=filled
fillcolor="lightyellow"
label="Sys 1"
rest_s1 [shape=circle label="" height=.2 fillcolor=red style=filled xlabel=<<FONT FACE="Arial">REST</FONT>>]
subgraph cluster_C11 {
label=""
style="filled"
fillcolor="cyan"
rest_c11 [shape=circle label="" height=.2 fillcolor=lime style=filled xlabel=<<FONT FACE="Arial">REST</FONT>>]
comp11 [label=<<FONT FACE="Arial">Comp 1.1</FONT>> shape=none]
}
subgraph cluster_C12 {
label="";
style="filled"
fillcolor="cyan"
graphql_c12 [shape=circle label="" height=.2 fillcolor=lime style=filled xlabel=<<FONT FACE="Arial">GraphQL</FONT>>]
comp12 [label=<<FONT FACE="Arial">Comp 1.2</FONT>> shape=none]
}
}
rest_s1 -> rest_c11 [arrowhead=vee]
comp11 -> graphql_c12 [ltail="cluster_C11" arrowhead=vee]
subgraph cluster_S2 {
style=filled
fillcolor="lightyellow"
label="Sys 2"
rest_s2 [shape=circle label="" height=.2 fillcolor=red style=filled xlabel=<<FONT FACE="Arial">REST</FONT>>]
soa_s2 [shape=circle label="" height=.2 fillcolor=red style=filled xlabel=<<FONT FACE="Arial">SOA</FONT>>]
subgraph cluster_C21 {
label=""
style="filled"
fillcolor="cyan"
rest_c21 [shape=circle label="" height=.2 fillcolor=lime style=filled xlabel=<<FONT FACE="Arial">REST</FONT>>]
comp21 [label=<<FONT FACE="Arial">Comp 2.1</FONT>> shape=none]
}
subgraph cluster_C22 {
label="";
style="filled"
fillcolor="cyan"
sql_c22 [shape=circle label="" height=.2 fillcolor=lime style=filled xlabel=<<FONT FACE="Arial">SQL</FONT>>]
soa_c22 [shape=circle label="" height=.2 fillcolor=lime style=filled xlabel=<<FONT FACE="Arial">SOA</FONT>>]
comp22 [label="Comp 2.2" shape=none labelfontname="Arial"]
}
}
comp12 -> rest_s2 [ltail="cluster_C12" arrowhead=vee]
comp12 -> soa_s2 [ltail="cluster_C12" arrowhead=vee]
rest_s2 -> rest_c21 [arrowhead=vee]
soa_s2 -> soa_c22 [arrowhead=vee]
comp21 -> sql_c22 [ltail="cluster_C21" arrowhead=vee]
}