How do we change the position of edge

[Goutham10]

I've build a network architecture design where i want to make more customization in my design. so please help me how do we change the position of Edge() the way presenting in the design

Here, in the diagram we have two edges going towards "storage backup layer" cluster from "application layer" cluster with the labels as "application backup"

now, my requirement is i want to make a edge(label="application backup") go above the "database layer" cluster till backup server 2 and another edge(label="application backup") should go below the "database layer" cluster

code:

from diagrams import Diagram, Cluster, Edge, Node from diagrams.custom import Custom

common_cluster ={ "bgcolor":"white", "fontsize" : "20", "pencolor" : "brown", "penwidth" : "1", "orientation" : "portrait"

}

temp_cluster = { "pencolor" : "brown", "penwidth" : "0", "bgcolor" : "white",

"orientation" : "portrait"

}

main_cluster ={ "labelloc" : "t", "fontsize" : "28",

"labeljust" : "l",

"splines" : "spline"

}

with Diagram("Network Architecture", show=False, graph_attr= main_cluster):

with Cluster("  Storage Backup \nLayer", graph_attr=common_cluster):
    # with Cluster("Backup Server"):
    data = [Custom("Backup\nServer " + str(i)+"\n\n","./images/DB_replicate_"+str(i)+".png") for i in range(1,3)]

    # data[0] - Edge(color="white") - data[1] <<  Edge(label="DB backup", style="bold") <<db
    # db << Edge() >> data[0]

with Cluster("",graph_attr=temp_cluster):
    with Cluster("  Application Layer \n ", graph_attr=common_cluster):
        server = [Custom("Application\n Server\n\n", "./images/Server.png")]

    with Cluster("  Database Layer",graph_attr=common_cluster):
        db = Custom("\nDatabase\nServer\n\n", "./images/Database.jpg")

with Cluster("  Presentation Layer", graph_attr=common_cluster):
    clients = [Custom("Client","./images/Client.png") for i in range(3)]

    # clients[0] - Edge(color="white") - clients[1] -Edge(color="white") - clients[2]

for index in range(len(clients)):
    clients[index] >> Edge(style="bold") >> server[0]

server[0] << Edge(style="bold", minlen="2") >> db
# server[0] >> Edge(style="bold") >> data[1]
# server[0] >> Edge(label="Application Backup",style="bold") >> data[0]
server[0] >> Edge(xlabel="  \n Application \n Backup", style="bold") >> data[0]
server[0] >> Edge(xlabel="\nApplication\n Backup", style="bold") >> data[1]

db >> Edge(label="\nDB Backup", style="bold") >> data[1]

[clayms]

If your ok with the db at the same level as the application server, then the example below should will work. Otherwise, you'll have to add blank Node(shape="plaintext") spacers to "push" the db down .

Other notes:

• I did not have your images, so I used generic
• you don't need to use a for loop over lists of Nodes, just one Edge from the list of Nodes to the next Node
• I added blank Edge(penwidth="0") from the clients to the db so the vertical balance would not get too skewed.
• see what I did below with headport and tailport

with Diagram("Network Architecture\n\n", show=False, graph_attr= main_cluster):
    with Cluster("Storage Backup\nLayer", graph_attr=common_cluster):
        data = [Rack("Backup\nServer") for i in range(1,3)]

    with Cluster("",graph_attr=temp_cluster):
        with Cluster("Application Layer", graph_attr=common_cluster):
            server = Rack("\nApplication\n Server")

        with Cluster("Database Layer",graph_attr=common_cluster):
            db = Rack("Database\nServer")

    with Cluster("  Presentation Layer", graph_attr=common_cluster):
        clients = [Client("Client") for i in range(3)]

    clients >> Edge(style="bold") >> server
    clients - Edge(penwidth="0") - db
    server << Edge(style="bold", minlen="0", tailport="s", headport="n") >> db
    server >> Edge(xlabel="Application \n Backup", style="bold", tailport="e", headport="w") >> data[0]
    server >> Edge(xlabel="Application\n Backup", style="bold", tailport="e", headport="nw") >> data[1]

    db >> Edge(label="\nDB Backup", style="bold") >> data[1]

[Goutham10]

@https://github.com/clayms thank you so much for your efforts towards the issue. But i managed to do it as per my requirement. This might help someone

code:

from diagrams import Diagram, Cluster, Edge, Node from diagrams.custom import Custom

common_cluster ={ "bgcolor":"white", "fontsize" : "20", "pencolor" : "brown", "penwidth" : "1", "orientation" : "portrait" }

temp_cluster = { "pencolor" : "brown", "penwidth" : "0", "bgcolor" : "white", }

main_cluster ={ "labelloc" : "t", "fontsize" : "28", "splines" : "spline" }

with Diagram("Network Architecture", show=False, graph_attr= main_cluster):

with Cluster("", graph_attr=temp_cluster):

    with Cluster("Storage Backup 2", graph_attr=common_cluster):
        data_1 = Custom("Backup Server 2", "./images/DB_replicate_1.png")

    with Cluster("Storage Backup 1",graph_attr=common_cluster):
        data_2 = Custom("Backup Server 1","./images/DB_replicate_2.png")

with Cluster("",graph_attr=temp_cluster):

    with Cluster("  Application Layer \n ", graph_attr=common_cluster):
        server = [Custom("Application\n Server\n\n", "./images/Server.png")]

    with Cluster("  Database Layer",graph_attr=common_cluster):
        db = Custom("\nDatabase\nServer\n\n", "./images/Database.jpg")

with Cluster("  Presentation Layer", graph_attr=common_cluster):
    clients = [Custom("Client","./images/Client.png") for i in range(3)]

# Connections

for index in range(len(clients)):
    clients[index] >> Edge(style="bold") >> server[0]

server[0] << Edge(style="bold", minlen="2") >> db
server[0] >> Edge(xlabel="  Application \n Backup", style="bold") >> data_1
server[0] >> Edge(xlabel="\nApplication\n Backup", style="bold") >> data_2

db >> Edge(label="\nDB Backup", style="bold") >> data_1
db >> Edge(label="\nDB Backup", style="bold") >> data_2

[clayms]

Looks like you knew the solution before you asked.

[Goutham10]

@clayms actually i figured it out in few hours after posting the question.

can you please help me with a small random design which has graph_attr, edge_attr, node_attr used in it

[RyanMillerC]

@Goutham10 Answered your question in #701