mingrammer / diagrams

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

Incorrect edge and label positions #658

Open rbarzic opened 2 years ago

rbarzic commented 2 years ago

In the attached diagram,

clayms commented 2 years ago

@rbarzic please post your code.

rbarzic commented 2 years ago

It is attached :-) (example1.py.gz)

gabriel-tessier commented 2 years ago

@rbarzic you can check this issue with some examples that can help you to organize your edges: https://github.com/mingrammer/diagrams/issues/433

I think it's more easy to have reply and support if you put the original code instead of a gz file that people may not be able to open.

Here the original code from the file

from diagrams import Cluster, Diagram, Edge
from diagrams.aws.compute import ECS, EKS, Lambda
from diagrams.aws.database import Redshift
from diagrams.aws.integration import SQS
from diagrams.aws.storage import S3
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("example1", show=False):
    source = EKS("k8s source")

    with Cluster("Top Core"):
        with Cluster("Event Workers"):
            ahb_masters = [ECS("jtagif"),
                       ECS("cpu"),
                       ECS("debug")]

        ahb_matrix= SQS("AHB Matrix")
        apb_bridge= RDS("APB Bridge")
        nvm = ELB("NVM")
        ram = ELB("RAM")
        rom = ELB("ROM")
        with Cluster("APB Peripherals"):
            nvmctrl  = Lambda("nvmctrl")
            ramctrl  = Lambda("ramctrl")
            romctrl  = Lambda("romctrl")
            sysctrl  = Lambda("sysctrl")
            aes      = Lambda("aes")
            freqm    = Lambda("freqm")

            apb_peripherals = [nvmctrl, ramctrl, romctrl,sysctrl,aes, freqm]

    #store = S3("events store")
    #dw = Redshift("analytics")

    source >> ahb_masters
    ahb_masters >> Edge(label="AHB", color="black", style="bold") >> ahb_matrix
    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> apb_bridge
    apb_bridge >> Edge(label="APB", color="blue", style="bold") >> apb_peripherals

    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> nvmctrl
    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> ramctrl
    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> romctrl

    nvmctrl >> nvm 
    ramctrl >> ram 
    romctrl >> rom 

With my limited knowledge I try to apply the solution to group edge for the first parts and here how it render, check the other issues for more example that my better fit your need.

example1

and the related code with comment to pin point the changes I made


from diagrams import Cluster, Diagram, Edge, Node # I added node import
from diagrams.aws.compute import ECS, EKS, Lambda
from diagrams.aws.database import Redshift
from diagrams.aws.integration import SQS
from diagrams.aws.storage import S3
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("example1", show=False):
    source = EKS("k8s source")

    with Cluster("Top Core"):
        # blank node to group the edges from source to Event workers
        blankAHB = Node("", shape="plaintext", width="0", height="0")
        # blank node to group the edges from Event workers to AHB matrix
        blankMatrix = Node("", shape="plaintext", width="0", height="0")

        with Cluster("Event Workers"):
            ahb_masters = [ECS("jtagif"),
                       ECS("cpu"),
                       ECS("debug")]

        ahb_matrix= SQS("AHB Matrix")
        apb_bridge= RDS("APB Bridge")
        nvm = ELB("NVM")
        ram = ELB("RAM")
        rom = ELB("ROM")
        with Cluster("APB Peripherals"):
            nvmctrl  = Lambda("nvmctrl")
            ramctrl  = Lambda("ramctrl")
            romctrl  = Lambda("romctrl")
            sysctrl  = Lambda("sysctrl")
            aes      = Lambda("aes")
            freqm    = Lambda("freqm")

            apb_peripherals = [nvmctrl, ramctrl, romctrl,sysctrl,aes, freqm]

    #store = S3("events store")
    #dw = Redshift("analytics")

    # link between source and event workers with the blank node in middle
    source >> blankAHB >> ahb_masters
    # link between event workers and ahb matrix, note that the label is only between the blank node and the matrix
    ahb_masters >> Edge(label="", color="black", style="bold") >> blankMatrix >> Edge(label="AHB", color="black", style="bold") >> ahb_matrix

    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> apb_bridge
    apb_bridge >> Edge(label="APB", color="blue", style="bold") >> apb_peripherals

    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> nvmctrl
    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> ramctrl
    ahb_matrix >> Edge(label="AHB", color="black", style="bold") >> romctrl

    nvmctrl >> nvm 
    ramctrl >> ram 
    romctrl >> rom 
rbarzic commented 2 years ago

Hi @gabriel-tessier : Thank you. I'll have a look at the examples linked in #433. Sorry if I attached a .gz file but it is because GitHub doesn't allow drag & drop of Python files but allows compressed files. As the file was more than a few lines, I thought it was better to not include it directly.