feat(cdk-graph): handle CustomResources

- flag CustomResource nodes
- collapse CustomResource nodes during "compact"
- add resource icon styling to CustomResource nodes in diagram

packages/cdk-graph-plugin-diagram/src/internal/graphviz/diagram.ts

@@ -173,7 +173,11 @@ export function buildDiagram(
       }
       default: {
         if (gNode.isLeaf) {
-          entity = new Diagram.Node(gNode);
+          if (gNode.hasFlag(FlagEnum.CUSTOM_RESOURCE)) {
+            entity = new Diagram.CustomResourceNode(gNode);
+          } else {
+            entity = new Diagram.Node(gNode);
+          }
         } else {
           entity = new Diagram.Cluster(gNode);
           gNode.addFlag(FlagEnum.CLUSTER);

packages/cdk-graph-plugin-diagram/src/internal/graphviz/entities/nodes.ts

@@ -7,6 +7,7 @@ import * as Dot from "ts-graphviz";
 import wordWrap = require("word-wrap"); // eslint-disable-line @typescript-eslint/no-require-imports
 import {
   resolveCfnResourceImage,
+  resolveCustomResourceImage,
   resolveResourceImage,
 } from "../../utils/resource-images";
 import { GraphTheme } from "../theme";
@@ -179,11 +180,9 @@ export class ResourceNode extends ImageNode {
  * CustomResourceNode class defines a {@link Dot.Node} based on a {@link Graph.Node} for a *custom resource*
  * @internal
  */
-export class CustomResourceNode extends Node {
+export class CustomResourceNode extends ImageNode {
   /** @internal */
-  constructor(node: Graph.ResourceNode) {
-    super(node);
-
-    this.attributes.apply(GraphTheme.instance.customResourceNode);
+  constructor(node: Graph.Node) {
+    super(node, resolveCustomResourceImage(node));
   }
 }

packages/cdk-graph-plugin-diagram/src/internal/graphviz/theme/index.ts

@@ -153,8 +153,6 @@ export interface IGraphTheme {
   readonly cfnResourceNode: Dot.NodeAttributesObject;
   /** Styling for {@link Graph.ResourceNode} diagram entities */
   readonly resourceNode: Dot.NodeAttributesObject;
-  /** Styling for {@link Graph.ResourceNode} *custom resource* diagram entities */
-  readonly customResourceNode: Dot.NodeAttributesObject;
 
   // edges
   /** Styling for {@link Graph.Edge} *parent-child* based diagram edges */
@@ -237,8 +235,6 @@ export class GraphTheme implements IGraphTheme {
   /** @inheritdoc */
   readonly resourceNode: Dot.NodeAttributesObject;
   /** @inheritdoc */
-  readonly customResourceNode: Dot.NodeAttributesObject;
-  /** @inheritdoc */
   readonly childLink: Dot.EdgeAttributesObject;
   /** @inheritdoc */
   readonly referenceLink: Dot.EdgeAttributesObject;
@@ -265,7 +261,6 @@ export class GraphTheme implements IGraphTheme {
     this.imageNode = theme.imageNode;
     this.cfnResourceNode = theme.cfnResourceNode;
     this.resourceNode = theme.resourceNode;
-    this.customResourceNode = theme.customResourceNode;
     this.childLink = theme.childLink;
     this.referenceLink = theme.referenceLink;
     this.dependencyLink = theme.dependencyLink;
@@ -293,7 +288,6 @@ export function getBaseTheme(rendering?: IGraphThemeRendering): IGraphTheme {
     imageNode: IMAGE_NODE_ATTRIBUTES,
     cfnResourceNode: CFN_RESOURCE_NODE_ATTRIBUTES,
     resourceNode: RESOURCE_NODE_ATTRIBUTES,
-    customResourceNode: CUSTOM_RESOURCE_NODE_ATTRIBUTES,
     childLink: CHILD_LINK_ATTRIBUTES,
     referenceLink: REFERENCE_LINK_ATTRIBUTES,
     dependencyLink: DEPENDENCY_LINK_ATTRIBUTES,
@@ -345,11 +339,6 @@ function generateGraphThemeFromAwsTheme(
     color: awsTheme.text.primary,
     fontcolor: awsTheme.text.primary as Dot.Color,
   });
-  Object.assign(theme.customResourceNode, {
-    color: awsTheme.text.primary,
-    fillcolor: awsTheme.backgrounds.generic,
-    fontcolor: awsTheme.text.primary as Dot.Color,
-  });
 
   Object.assign(theme.childLink, awsArrowToEdgeAtts(awsTheme.arrows.child));
   Object.assign(
@@ -480,15 +469,6 @@ const RESOURCE_NODE_ATTRIBUTES: Dot.NodeAttributesObject = {
   fontcolor: "#666666",
 };
 
-/** Base customer resource node attributes */
-const CUSTOM_RESOURCE_NODE_ATTRIBUTES: Dot.NodeAttributesObject = {
-  shape: "box",
-  style: "solid,filled",
-  width: 1,
-  height: 1,
-  fixedsize: false,
-};
-
 /** Base edge attributes */
 const EDGE_ATTRIBUTES: Dot.EdgeAttributesObject = {
   ...GraphFonts.LIGHT_ITALIC,

packages/cdk-graph-plugin-diagram/src/internal/utils/resource-images.ts

@@ -37,6 +37,15 @@ export function resolveResourceImage(
   );
 }
 
+/** Resolves CustomResource image from {@link AwsArchitecture} asset */
+export function resolveCustomResourceImage(
+  _node: Graph.Node
+): string | undefined {
+  return AwsArchitecture.getResource(
+    "AWS::CloudFormation::CustomResource"
+  ).icon("svg", GraphTheme.instance.awsTheme?.id);
+}
+
 /** Resolves Resource image from {@link AwsArchitecture} asset */
 function _resolveResourceLikeImage(
   node: Graph.ResourceNode | Graph.CfnResourceNode,