Collapsed symbols on diagram.

[cpgonz2]

Hi, I am having some issues when doing npx cdk-dia. The AWS resources appear like collapsed as you can see:

I thought it was because of dependencies but I don't know why this is happening. Thanks!

[pistazie]

Strange.

• In addition to the diagram.png cdk-dia created a diagram.dot file. would you mind posting it here?
• How did you install Graphviz and which OS do you run on?

[cpgonz2]

digraph "Diagram" {
splines = "ortho";
pad = "1.0";
nodesep = "0.60";
ranksep = "0.75";
fontname = "Sans-Serif";
fontsize = "15";
dpi = "200";
rankdir = "BT";
compound = "true";
fontcolor = "#222222";
edge [
color = "#D5871488",
penwidth = 2,
arrowhead = "dot",
arrowtail = "dot",
];
node [
shape = "box",
style = "rounded",
fixedsize = true,
width = 1.7,
height = 1.7,
labelloc = "c",
imagescale = true,
fontname = "Sans-Serif",
fontsize = 8,
margin = 8,
];
subgraph "AwsCdkBackstageAuroraTsStack" {
subgraph "cluster-SubGraph.AwsCdkBackstageAuroraTsStack" {
graph [
label = "AwsCdkBackstageAuroraTsStack",
labelloc = "b",
labeljust = "l",
margin = "10",
fontsize = "16",
penwidth = "2",
pencolor = "#888888",
style = "filled,rounded",
fillcolor = "#e4e4e4",
];
"AwsCdkBackstageAuroraTsStack/Secret" [
label = " Secret",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Service/Arch_Security-Identity-Compliance/64/Arch_AWS-Secrets-Manager_64@5x.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 1.2,
height = 1.466,
];
"AwsCdkBackstageAuroraTsStack/ecs-vpc-1" [
label = " ecs-vpc-1",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Service/Arch_Networking-Content/64/Arch_Amazon-Virtual-Private-Cloud_64@5x.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
"AwsCdkBackstageAuroraTsStack/fargate-sg" [
label = " fargate-sg",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/security_group.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
"AwsCdkBackstageAuroraTsStack/aurora-sg" [
label = " aurora-sg",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/security_group.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
"AwsCdkBackstageAuroraTsStack/Database" [
label = " Database",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Service/Arch_Database/64/Arch_Amazon-RDS_64@5x.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
"AwsCdkBackstageAuroraTsStack/ecs-cluster" [
label = " ecs-cluster",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Service/Arch_Compute/64/Arch_Amazon-Elastic-Container-Service_64@5x.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
subgraph "cluster-SubGraph.backstage-load-balanced-application" {
graph [
label = "backstage-load-balanced-application",
labelloc = "b",
labeljust = "l",
margin = "10",
fontsize = "16",
penwidth = "2",
pencolor = "#888888",
style = "filled,rounded",
fillcolor = "#d6d6d6",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/LB" [
label = " LB",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Service/Arch_Networking-Content/64/Arch_Elastic-Load-Balancing_64@5x.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/DNS" [
label = " DNS",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Resource/Res_Networking-and-Content-Delivery/Res_48_Dark/Res_Amazon-Route-53-Hosted-Zone_48_Dark_gen.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 1.2,
height = 1.466,
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/TaskDef" [
label = " TaskDef",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Resource/Res_Containers/Res_48_Dark/Res_Amazon-Elastic-Container-Service_Task_48_Dark_gen.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/Service/Service" [
label = " ECS Service Service",
fontsize = 12,
image = "/home/ec2-user/environment/aws-cdk-backstage-aurora/node_modules/cdk-dia/icons/aws/Resource/Res_Containers/Res_48_Dark/Res_Amazon-Elastic-Container-Service_Service_48_Dark_gen.png",
imagescale = "true",
imagepos = "tc",
penwidth = "0",
shape = "node",
fixedsize = "true",
labelloc = "b",
width = 2,
height = 2.266,
];
}
}
}
"AwsCdkBackstageAuroraTsStack/Secret" -> "AwsCdkBackstageAuroraTsStack/Database" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/fargate-sg" -> "AwsCdkBackstageAuroraTsStack/ecs-vpc-1" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/fargate-sg" -> "AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/LB" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/aurora-sg" -> "AwsCdkBackstageAuroraTsStack/ecs-vpc-1" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/aurora-sg" -> "AwsCdkBackstageAuroraTsStack/fargate-sg" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/Database" -> "AwsCdkBackstageAuroraTsStack/ecs-vpc-1" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/Database" -> "AwsCdkBackstageAuroraTsStack/Secret" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/Database" -> "AwsCdkBackstageAuroraTsStack/aurora-sg" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/LB" -> "AwsCdkBackstageAuroraTsStack/ecs-vpc-1" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/LB" -> "AwsCdkBackstageAuroraTsStack/fargate-sg" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/DNS" -> "AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/LB" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/TaskDef" -> "AwsCdkBackstageAuroraTsStack/Secret" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/TaskDef" -> "AwsCdkBackstageAuroraTsStack/Database" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/Service/Service" -> "AwsCdkBackstageAuroraTsStack/ecs-vpc-1" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/Service/Service" -> "AwsCdkBackstageAuroraTsStack/fargate-sg" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/Service/Service" -> "AwsCdkBackstageAuroraTsStack/ecs-cluster" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/Service/Service" -> "AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/LB" [
dir = "both",
];
"AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/Service/Service" -> "AwsCdkBackstageAuroraTsStack/backstage-load-balanced-application/TaskDef" [
dir = "both",
];
}

##Running on a Cloud9, installed graphviz with yum. .dot file autocompletes itself.

[vaneek]

Same issue here(cloud9). Interesting project but not useful if doesn't work properly.