search

mingrammer / diagrams

:art: Diagram as Code for prototyping cloud system architectures
https://diagrams.mingrammer.com
MIT License
39.8k stars 2.55k forks source link

Cluster direction/Data Flow not working as expected #1014

Open chrislynch8 opened 3 months ago

chrislynch8 commented 3 months ago

Hi,

I'm completely new to this tool and testing its viability for use in work. I've got a basic sample defined in the following code

from diagrams import Cluster, Diagram, Edge
from diagrams.aws.compute import EC2
from diagrams.aws.network import NATGateway,  InternetGateway
from diagrams.aws.general import InternetAlt2

with Diagram("Sample", show=True, outformat="png", direction="BT"):
    PublicInternet = InternetAlt2("Internet")     
    with Cluster("AWS Account"):
        with Cluster("Region:"):
            with Cluster("VPC:"):
                IGW = InternetGateway("InternetGateway")
                with Cluster("Availability Zone A"):
                    with Cluster("Public Subnet"):
                        NAT = NATGateway("NATGateway")           
                    with Cluster("App Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        APP = EC2("WebServers")
                    with Cluster("DB Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        DB = EC2("DatabaseServers")
                    with Cluster("FSx Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        FSx = EC2("FSx")
            with Cluster("VPC1:"):
                IGW1 = InternetGateway("InternetGateway")
                with Cluster("Availability Zone A"):
                    with Cluster("Public Subnet"):
                        NAT1 = NATGateway("NATGateway")           
                    with Cluster("App Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        APP1 = EC2("WebServers")
                    with Cluster("DB Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        DB1 = EC2("DatabaseServers")
                    with Cluster("FSx Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        FSx1 = EC2("FSx")   
        with Cluster("Region2:"):
            with Cluster("VPC2:"):
                IGW2 = InternetGateway("InternetGateway")
                with Cluster("Availability Zone A"):
                    with Cluster("Public Subnet"):
                        NAT2 = NATGateway("NATGateway")           
                    with Cluster("App Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        APP2 = EC2("WebServers")
                    with Cluster("DB Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        DB2 = EC2("DatabaseServers")
                    with Cluster("FSx Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        FSx2 = EC2("FSx")

    NAT >> IGW >> PublicInternet  
    APP - Edge(xlabel="TCP: 443/587") >> NAT
    APP - Edge(xlabel="TCP: 1433",forward=True, reverse=True) >> DB
    APP - Edge(xlabel="TCP: 145",forward=True, reverse=True) >> FSx

    NAT1 >> IGW1 >> PublicInternet  
    APP1 - Edge(xlabel="TCP: 443/587") >> NAT1
    APP1 - Edge(xlabel="TCP: 1433",forward=True, reverse=True) >> DB1
    APP1 - Edge(xlabel="TCP: 145",forward=True, reverse=True) >> FSx1

    NAT2 >> IGW2 >> PublicInternet
    APP2 - Edge(xlabel="TCP: 443/587") >> NAT2
    APP2 - Edge(xlabel="TCP: 1433",forward=True, reverse=True) >> DB2
    APP2 - Edge(xlabel="TCP: 145",forward=True, reverse=True) >> FSx2

This produces the following diagram image

The way Regions/VPC/AvailabilityZone have rendered is perfect, but I'm stuggling to find a way to have the clusters in the Availability Zones to follow direction="BT"?

With the way I have Nodes linked I was expecting that I would have the Public Subnet on one row, then below that I would have the App Private Subnet and on the next row I would have the DB & FSx Subnets so 3 rows and 2 columns rather than 2 rows and three columns. Also it I add different direction options in nested Clusters they're not respected, is it on the initial Top Level direction that is applied to all nested ones?

Some other issues I've noticed is that the Data Flow lines to Internet are missing.

Any help or nudge to relavent documentation/guides would be great, I've not found it in the Cluster Docs

Thanks for you time Chris

chrislynch8 commented 3 months ago

Sorry for wasting time if anyone actually read this. I see the error in the code now that I've taken a step back. My issue is the Data Flow, I need DB >> App rather than APP >> DB to have it appear on a row below.

Updated code

from diagrams import Cluster, Diagram, Edge
from diagrams.aws.compute import EC2
from diagrams.aws.network import NATGateway,  InternetGateway
from diagrams.aws.general import InternetAlt2

with Diagram("Sample", show=True, outformat="png", direction="BT"):
    PublicInternet = InternetAlt2("Internet")     
    with Cluster("AWS Account"):
        with Cluster("Region:"):
            with Cluster("VPC:"):
                IGW = InternetGateway("InternetGateway")
                with Cluster("Availability Zone A"):
                    with Cluster("Public Subnet"):
                        NAT = NATGateway("NATGateway")           
                    with Cluster("App Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        APP = EC2("WebServers")
                    with Cluster("DB Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        DB = EC2("DatabaseServers")
                    with Cluster("FSx Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        FSx = EC2("FSx")
            with Cluster("VPC1:"):
                IGW1 = InternetGateway("InternetGateway")
                with Cluster("Availability Zone A"):
                    with Cluster("Public Subnet"):
                        NAT1 = NATGateway("NATGateway")           
                    with Cluster("App Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        APP1 = EC2("WebServers")
                    with Cluster("DB Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        DB1 = EC2("DatabaseServers")
                    with Cluster("FSx Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        FSx1 = EC2("FSx")   
        with Cluster("Region2:"):
            with Cluster("VPC2:"):
                IGW2 = InternetGateway("InternetGateway")
                with Cluster("Availability Zone A"):
                    with Cluster("DB Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        DB2 = EC2("DatabaseServers")
                    with Cluster("FSx Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        FSx2 = EC2("FSx")                               
                    with Cluster("App Private Subnet",graph_attr={"bgcolor":"#9ed5e5"}):
                        APP2 = EC2("WebServers")
                    with Cluster("Public Subnet"):
                        NAT2 = NATGateway("NATGateway")

    NAT >> IGW >> PublicInternet  
    APP - Edge(xlabel="TCP: 443/587") >> NAT
    DB - Edge(xlabel="TCP: 1433",forward=True, reverse=True) >> APP
    FSx - Edge(xlabel="TCP: 145",forward=True, reverse=True) >> APP

    NAT1 >> IGW1 >> PublicInternet  
    APP1 - Edge(xlabel="TCP: 443/587") >> NAT1
    DB1 - Edge(xlabel="TCP: 1433",forward=True, reverse=True) >> APP1
    FSx1 - Edge(xlabel="TCP: 145",forward=True, reverse=True) >> APP1

    NAT2 >> IGW2 >> PublicInternet
    APP2 - Edge(xlabel="TCP: 443/587") >> NAT2
    DB2 - Edge(xlabel="TCP: 1433",forward=True, reverse=True) >> APP2
    FSx2 - Edge(xlabel="TCP: 145",forward=True, reverse=True) >> APP2

Now gives me sample

Only problems I face are the Data Flow lines to Internet and also the xlabel going behind a cluster

eugeneVzaidun commented 2 months ago

hi @chrislynch8 check this - #1019 It might be the same for your case as well