Padding of custom nodes

[evanr70]

I've created some custom nodes with png icons. When I render the graph with direction="TB" I get a lot of padding above the icons. With direction="LR" it also shows up by giving linking arrows a position which is above the icon. My icons have dimension [208 x 208].

Is there a way of reducing this white-space padding?

Left to right:

Top to bottom:

[clayms]

Try using Node directly and then set the width and height attributes.

For example:

from diagrams import Diagram, Edge, Node

common_node_attr = {
    "fixedsize": "true",            # true | false
    "imagescale": "true",           # true | false | width | height | both 
    "labelloc":"b",                 # t | c | b
    "penwidth": "0",
    "width": "2",
    "height": "2",
}

with Diagram("\n\nNode Sizing", direction="TB", show=False) as diag:
    N1 = Node("N2", image="icon1.png",  **common_node_attr)
    N2 = Node("N1", image="icon2.png",  **common_node_attr)

    N1 >> Edge() >> N2

diag

For Node attribute details, see: https://graphviz.gitlab.io/doc/info/attrs.html

[clayms]

You can also use an HTML Node, then adjust the Nodes width or height attribute parameters to your liking.

For more info on "HTML-Like Labels" see: https://graphviz.gitlab.io/doc/info/shapes.html#html

Example code and output below.

from diagrams import Diagram, Node, Edge

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

html_img_node_base = """<
    <TABLE BORDER="0" CELLBORDER="0" CELLSPACING="0">
    <TR><TD fixedsize="true" width="100" height="100"><IMG SRC="{0}" /></TD></TR>
    <TR><TD>{1}</TD></TR>
    </TABLE>
    >"""

img1 = "etcd.png"
label1 = "etcd"
img2 = "pod_w_docker.png"
label2 = "pod_w_docker"

html_node_1 = html_img_node_base.format(img1, label1)
html_node_2 = html_img_node_base.format(img2, label2)

with Diagram("\n\nHTML Node Option", direction="TB", show=False) as diag:
    etcd = Node(shape="plaintext", label=html_node_1, width="1.0", height="1.5",)
    pod = Node(shape="plaintext", label=html_node_2, width="1.0", height="1.5",)

    etcd >> Edge() >> pod

diag

Also see these issue comments: https://github.com/mingrammer/diagrams/issues/389#issuecomment-737501794 https://github.com/mingrammer/diagrams/issues/389#issuecomment-737523177 https://github.com/mingrammer/diagrams/issues/389#issuecomment-737537465