Shapes missing when converting when converting icons clusters from diagrams.net #119
Description
related to #110
I added the abillity to add a cluster icon to the clusters. This makes the cluster shapes not visible like in #110 . Is this a graphviz2drawio issue or is this an invalid dot file?
Test case:
(pip install diagrams)
from diagrams import Cluster, Diagram
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
def icon(node: object, label: str, size=30):
"""
Function adds a Diagrams-compatible icon
:param node: Diagrams object, like VPC or Docker
:param label: Label text, like "subnet-a"
:param size: Icon size in px.
:returns: "Label prefixed with a specified icon"
"""
# o = node.__new__(cls=None, label=label, size=size)
class Node(node):
def __init__(self):
pass
icon_path = Node()._load_icon()
#return '<<img src="' + icon_path + '" />>'
return '<<table border="0" width="100%"><tr><td fixedsize="true" width="' + str(size) + '" height="' + str(size) + '"><img src="' + icon_path + '" /></td><td>' + label + '</td></tr></table>>'
with Diagram("Event Processing", show=False,outformat=["jpg", "png", "dot", "svg"]):
source = EKS("k8s source")
with Cluster(icon(ECS, "Event Flows")):
with Cluster(icon(ECS, "Event Workers")):
workers = [ECS("worker1"),
ECS("worker2"),
ECS("worker3")]
queue = SQS("event queue")
with Cluster("Processing"):
handlers = [Lambda("proc1"),
Lambda("proc2"),
Lambda("proc3")]
store = S3("events store")
dw = Redshift("analytics")
source >> workers >> queue >> handlers
handlers >> store
handlers >> dw
creates following dot file
digraph "Event Processing" {
graph [bb="0,0,756,655",
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=15,
label="Event Processing",
lheight=0.24,
lp="378,12.5",
lwidth=1.79,
nodesep=0.60,
pad=2.0,
rankdir=LR,
ranksep=0.75,
splines=ortho
];
node [fixedsize=true,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
height=1.4,
imagescale=true,
label="\N",
labelloc=b,
shape=box,
style=rounded,
width=1.4
];
edge [color="#7B8894"];
subgraph "cluster_<<table border=\"0\" width=\"100%\"><tr><td fixedsize=\"true\" width=\"30\" height=\"30\"><img src=\"/home/stefan/diagrams/venv_diagrams/\
lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png\" /></td><td>Event Flows</td></tr></table>>" {
graph [bb="139,33,617,647",
bgcolor="#E5F5FD",
fontname="Sans-Serif",
fontsize=12,
label=<<table border="0" width="100%"><tr><td fixedsize="true" width="30" height="30"><img src="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png" /></td><td>Event Flows</td></tr></table>>,
labeljust=l,
lheight=0.47,
lp="202.5,626",
lwidth=1.54,
pencolor="#AEB6BE",
rankdir=LR,
shape=box,
style=rounded
];
subgraph "cluster_<<table border=\"0\" width=\"100%\"><tr><td fixedsize=\"true\" width=\"30\" height=\"30\"><img src=\"/home/stefan/diagrams/venv_diagrams/\
lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png\" /></td><td>Event Workers</td></tr></table>>" {
graph [bb="147,41,291,597",
bgcolor="#EBF3E7",
fontname="Sans-Serif",
fontsize=12,
label=<<table border="0" width="100%"><tr><td fixedsize="true" width="30" height="30"><img src="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png" /></td><td>Event Workers</td></tr></table>>,
labeljust=l,
lheight=0.47,
lp="219,576",
lwidth=1.78,
pencolor="#AEB6BE",
rankdir=LR,
shape=box,
style=rounded
];
"0942cf6a5ad34b29a895186143aeaa6d" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png",
label=worker1,
pos="218.5,478",
shape=none,
width=1.4028];
"13ad942422914e169be5feb7ebff19d8" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png",
label=worker2,
pos="218.5,298",
shape=none,
width=1.4028];
f19fc49de578405bb28b4ca77a651c48 [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/elastic-container-service.png",
label=worker3,
pos="218.5,118",
shape=none,
width=1.4028];
}
subgraph cluster_Processing {
graph [bb="492,41,609,576",
bgcolor="#EBF3E7",
fontname="Sans-Serif",
fontsize=12,
label=Processing,
labeljust=l,
lheight=0.18,
lp="532,565.5",
lwidth=0.89,
pencolor="#AEB6BE",
rankdir=LR,
shape=box,
style=rounded
];
ce72205051874a22a5a56c2779167419 [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/lambda.png",
label=proc1,
pos="550.5,298",
shape=none,
width=1.4028];
"617ba83587184922afa096f3ca958bd1" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/lambda.png",
label=proc2,
pos="550.5,118",
shape=none,
width=1.4028];
"1a89650bcfa1469aaaaaac29c6d40ab2" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/lambda.png",
label=proc3,
pos="550.5,478",
shape=none,
width=1.4028];
}
"189d894764cc4160b1167c53b38fdbe1" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/integration/simple-queue-service-sqs.png",
label="event queue",
pos="395.5,298",
shape=none,
width=1.4028];
"0942cf6a5ad34b29a895186143aeaa6d" -> "189d894764cc4160b1167c53b38fdbe1" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,379,366.94 269.28,455.17 316.3,455.17 379,455.17 379,455.17 379,455.17 379,376.94 379,376.94"];
"13ad942422914e169be5feb7ebff19d8" -> "189d894764cc4160b1167c53b38fdbe1" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,344.77,298 269.22,298 269.22,298 334.77,298 334.77,298"];
f19fc49de578405bb28b4ca77a651c48 -> "189d894764cc4160b1167c53b38fdbe1" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,379,229.33 269.28,95.167 316.3,95.167 379,95.167 379,95.167 379,95.167 379,219.33 379,219.33"];
"189d894764cc4160b1167c53b38fdbe1" -> ce72205051874a22a5a56c2779167419 [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,499.9,298 446.25,298 446.25,298 489.9,298 489.9,298"];
"189d894764cc4160b1167c53b38fdbe1" -> "617ba83587184922afa096f3ca958bd1" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,499.69,140.83 413,229.06 413,186.84 413,140.83 413,140.83 413,140.83 489.69,140.83 489.69,140.83"];
"189d894764cc4160b1167c53b38fdbe1" -> "1a89650bcfa1469aaaaaac29c6d40ab2" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,499.69,500.83 413,366.67 413,425.51 413,500.83 413,500.83 413,500.83 489.69,500.83 489.69,500.83"];
}
"8f3ac2154adf449ab95ecb5cd4e08553" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/compute/elastic-kubernetes-service.png",
label="k8s source",
pos="50.5,298",
shape=none,
width=1.4028];
"8f3ac2154adf449ab95ecb5cd4e08553" -> "0942cf6a5ad34b29a895186143aeaa6d" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,167.79,478 51,366.56 51,417.43 51,478 51,478 51,478 157.79,478 157.79,478"];
"8f3ac2154adf449ab95ecb5cd4e08553" -> "13ad942422914e169be5feb7ebff19d8" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,167.81,298 101.36,298 101.36,298 157.81,298 157.81,298"];
"8f3ac2154adf449ab95ecb5cd4e08553" -> f19fc49de578405bb28b4ca77a651c48 [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,167.79,118 51,229.44 51,178.57 51,118 51,118 51,118 157.79,118 157.79,118"];
"09d6dfbe2ff6404ab620cf5fcf23efc0" [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/storage/simple-storage-service-s3.png",
label="events store",
pos="705.5,388",
shape=none,
width=1.4028];
ce72205051874a22a5a56c2779167419 -> "09d6dfbe2ff6404ab620cf5fcf23efc0" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,654.9,350.83 601.25,350.83 601.25,350.83 644.9,350.83 644.9,350.83"];
c89c58846f12461c920d839ee7df4b16 [height=1.9028,
image="/home/stefan/diagrams/venv_diagrams/lib/python3.12/site-packages/resources/aws/database/redshift.png",
label=analytics,
pos="705.5,208",
shape=none,
width=1.4028];
ce72205051874a22a5a56c2779167419 -> c89c58846f12461c920d839ee7df4b16 [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,654.9,245.17 601.25,245.17 601.25,245.17 644.9,245.17 644.9,245.17"];
"617ba83587184922afa096f3ca958bd1" -> "09d6dfbe2ff6404ab620cf5fcf23efc0" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,655,335.17 601.07,170.83 620,170.83 637,170.83 637,170.83 637,170.83 637,335.17 637,335.17 637,335.17 645,335.17 645,335.17"];
"617ba83587184922afa096f3ca958bd1" -> c89c58846f12461c920d839ee7df4b16 [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,654.9,155.17 601.25,155.17 601.25,155.17 644.9,155.17 644.9,155.17"];
"1a89650bcfa1469aaaaaac29c6d40ab2" -> "09d6dfbe2ff6404ab620cf5fcf23efc0" [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,654.9,440.83 601.25,440.83 601.25,440.83 644.9,440.83 644.9,440.83"];
"1a89650bcfa1469aaaaaac29c6d40ab2" -> c89c58846f12461c920d839ee7df4b16 [dir=forward,
fontcolor="#2D3436",
fontname="Sans-Serif",
fontsize=13,
pos="e,654.93,260.83 601,425.17 611.27,425.17 619,425.17 619,425.17 619,425.17 619,260.83 619,260.83 619,260.83 644.93,260.83 644.93,\
260.83"];
}
What I should look like (Validated with an online dot file viewer)
What it looks like in a draw.io viewer after conversion.
