search

mingrammer / diagrams

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

Edge labels not placed with line #433

Open jonnyhoff opened 3 years ago

jonnyhoff commented 3 years ago

Green line labels not displaying correctly.

with Diagram("Diagram", outformat="svg") as diag:
    with Cluster("cluster01"):
        s1prox1 = ociVM("Proxy01")
        s1prox2 = ociVM("Proxy02")
        proxygrp = [ s1prox1, s1prox2 ]

    with Cluster("cluster02"):
        s1 = ociVM("s1")

    with Cluster("cluster02"):
        nfs1 = FileStorage("/nfs1")
        nfs2 = FileStorage("/nfs2")
        nfs3 = FileStorage("/nfs3")
        mounts = [nfs1,nfs2,nfs3]

    # s1 - s1prox1
    s1 - Edge(color="blue", style="bold") - proxygrp
    s1prox1 - Edge(color="blue", style="bold") - s1prox2
    s1 >> Edge(label="collect", color="green") >> mounts
    s1prox1 >> Edge(label="collect", color="green") >> mounts
    s1prox2 >> Edge(label="collect", color="green") >> mounts

diag

image

clayms commented 3 years ago

Try using the xlabel Edge parameter instead of label.

Ref: https://graphviz.gitlab.io/doc/info/attrs.html#d:xlabel

For more Edge label placement options see: https://github.com/mingrammer/diagrams/issues/427#issuecomment-753481290

from diagrams import Diagram, Edge, Cluster
from diagrams.oci.compute import VM as ociVM
from diagrams.oci.storage import FileStorage

with Diagram("Diagram", outformat="svg", graph_attr=graph_attr, show=False) as diag:
    with Cluster("cluster01"):
        s1prox1 = ociVM("Proxy01")
        s1prox2 = ociVM("Proxy02")
        proxygrp = [ s1prox1, s1prox2 ]

    with Cluster("cluster02"):
        s1 = ociVM("s1")

    with Cluster("cluster03"):
        nfs1 = FileStorage("/nfs1")
        nfs2 = FileStorage("/nfs2")
        nfs3 = FileStorage("/nfs3")
        mounts = [nfs1,nfs2,nfs3]

    # s1 - s1prox1
    s1 - Edge(color="blue", style="bold") - proxygrp
    s1prox1 - Edge(color="blue", style="bold") - s1prox2
    s1 >> Edge(xlabel="collect", color="green") >> mounts
    s1prox1 >> Edge(xlabel="collect", color="green", minlen="1") >> mounts
    s1prox2 >> Edge(xlabel="collect", color="green", minlen="2") >> mounts

diag

image

clayms commented 3 years ago

For a slightly cleaner look, try the following:


from diagrams import Diagram, Node, Edge, Cluster
from diagrams.oci.compute import VM as ociVM
from diagrams.oci.storage import FileStorage

graph_attr = {
    "splines": "spline",
    "concentrate":"true",
}

with Diagram("Diagram", outformat="svg", graph_attr=graph_attr, show=False) as diag:
    blank1 = Node("", shape="plaintext", height="0.0", width="0.0")
    blank2 = Node("", shape="plaintext", height="0.0", width="0.0")

    with Cluster("cluster02"):
        s1 = ociVM("s1")

    with Cluster("cluster01"):
        s1prox1 = ociVM("Proxy01")
        s1prox2 = ociVM("Proxy02")
        proxygrp = [ s1prox1, s1prox2 ]

    with Cluster("cluster03"):
        nfs1 = FileStorage("/nfs1")
        nfs2 = FileStorage("/nfs2")
        nfs3 = FileStorage("/nfs3")
        mounts = [nfs1,nfs2,nfs3]

    (s1 - 
        Edge(color="blue", style="bold", tailport="se", headport="nw", minlen="1") - 
        proxygrp)
    (s1prox1 - 
        Edge(color="blue", style="bold", tailport="e", headport="w", minlen="1") - 
        s1prox2)
    (s1 - 
        Edge(color="green", tailport="e", headport="w", minlen="1") -
        blank1)
    (proxygrp -
        Edge(color="green", tailport="se", headport="w", minlen="2") -
        blank1)
    (blank1 -
        Edge(xlabel="collect", color="green", tailport="e", headport="w", minlen="1") -
        blank2 >> 
        Edge(color="green", tailport="e", headport="w", minlen="1") >> 
        mounts)

diag

image

jonnyhoff commented 3 years ago

Thank you @clayms ! Legend! Works like a charm.

gabriel-tessier commented 3 years ago

@clayms Good examples why not adding them in the edge page? https://diagrams.mingrammer.com/docs/guides/edge

clayms commented 3 years ago

@gabriel-tessier The diagram in https://github.com/mingrammer/diagrams/issues/358#issuecomment-723674931 would be a better one to be added to the Edge examples page. It has most of the features above, and it is the same as the example already on the Edge examples page.

I can add it and do a pull request when I get time.

clayms commented 3 years ago

@gabriel-tessier Also should include examples that demonstrate features shown in the issue comments linked to below:

https://github.com/mingrammer/diagrams/issues/432#issuecomment-756335311 https://github.com/mingrammer/diagrams/issues/427#issuecomment-753481290 https://github.com/mingrammer/diagrams/issues/352#issuecomment-721985338 https://github.com/mingrammer/diagrams/issues/390#issuecomment-737432230 https://github.com/mingrammer/diagrams/issues/389#issuecomment-737537465 https://github.com/mingrammer/diagrams/issues/367#issuecomment-721482363 https://github.com/mingrammer/diagrams/issues/367#issuecomment-721482642 https://github.com/mingrammer/diagrams/issues/367#issuecomment-721965854 https://github.com/mingrammer/diagrams/issues/17#issuecomment-723564748 (although PR https://github.com/mingrammer/diagrams/pull/407 may yield another option to do that. When that feature is made available, it should also be added)

gabriel-tessier commented 3 years ago

@clayms I pushed a PR https://github.com/mingrammer/diagrams/pull/495 if you have time to review.

Thanks a lot for your contributions.