Fix for #25 🎉

Author: ljacobsson

.vscode/launch.json

@@ -39,6 +39,24 @@ Html Options:
 ## Output formats
 
 ### Draw.io
+```
+Usage: cfn-dia draw.io|d [options]
+
+Generates a draw.io diagram from a CloudFormation template
+
+Options:
+  -t, --template-file [templateFile]     Path to template or cdk.json file (default: "template.yaml or
+                                         cdk.json")
+  -c, --ci-mode                          Disable terminal/console interactivity (default: false)
+  --stacks [stacks]                      Comma separated list of stack name(s) to include. Defaults to
+                                         all.
+  -o, --output-file [outputFile]         Name of output file (default: "template.drawio")
+  -co, --cdk-output [outputPath]         CDK synth output path (default: "cdk.out")
+  -s, --skip-synth                       Skips CDK synth (default: false)
+  -e, --exclude-types [excludeTypes...]  List of resource types to exclude when using CI mode
+  -h, --help                             display help for command
+```
+
 Use it in combination with the [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) for VS Code to instantly visualise your stacks.
 
 ![Demo](https://raw.githubusercontent.com/mhlabs/cfn-diagram/master/demo.gif)
@@ -56,6 +74,24 @@ cfn-dia draw.io -t template.yaml
 * Works with CloudFormation, SAM and CDK
 
 ### HTML
+```
+Usage: cfn-dia html|h [options]
+
+Generates a vis.js diagram from a CloudFormation template
+
+Options:
+  -t, --template-file [templateFile]  Path to template or cdk.json file (default: "template.yaml or
+                                      cdk.json")
+  --stacks [stacks]                   Comma separated list of stack name(s) to include. Defaults to all.
+  -all --render-all                   If set, all nested stacks will be rendered. By default only root
+                                      template is rendered (default: false)
+  -c, --ci-mode                       Disable terminal/console interactivity (default: false)
+  -o, --output-path [outputPath]      Name of output file (default: "/tmp/cfn-diagram")
+  -co, --cdk-output [outputPath]      CDK synth output path (default: "cdk.out")
+  -s, --skip-synth                    Skips CDK synth (default: false)
+  -h, --help                          display help for command
+```
+
 The HTML output uses [vis.js](https://github.com/visjs/vis-network) to generate an interactive diagram from your template.
 
 ![Demo](https://raw.githubusercontent.com/mhlabs/cfn-diagram/master/demo-html.gif)
@@ -69,6 +105,8 @@ or, for CDK stacks, go to project directory (where cdk.json is located) and ente
 cfn-dia html 
 ```
 
+Large stacks, in particular multi-stack CDK projects, tend to generate huge diagrams. You can pass the stack names you want to render using the `--stacks` argument followed by a comma separated list of stack names.
+
 ### CI-mode
 This functionality lives in its own CLI, [cfn-diagram-ci](https://github.com/mhlabs/cfn-diagram-ci). This is beacuse it requires headless Chromium to be installed which makes the package size very large
 

README.md

@@ -16,6 +16,7 @@ program
     "Disable terminal/console interactivity",
     false
   )
+  .option("--stacks [stacks]", "Comma separated list of stack name(s) to include. Defaults to all.")
   .option("-o, --output-file [outputFile]", "Name of output file", "template.drawio")
   .option(
     "-co, --cdk-output [outputPath]",

commands/draw.io/index.js

@@ -13,6 +13,8 @@ program
     "Path to template or cdk.json file",
     "template.yaml or cdk.json"
   )
+  .option("--stacks [stacks]", "Comma separated list of stack name(s) to include. Defaults to all.")
+  .option("-all --render-all", "If set, all nested stacks will be rendered. By default only root template is rendered", false)
   .option("-c, --ci-mode", "Disable terminal/console interactivity", false)
   .option(
     "-o, --output-path [outputPath]",
@@ -29,6 +31,8 @@ program
       templateObj.template,
       template.isJson,
       cmd.outputPath,
-      ciMode
+      ciMode,
+      false,
+      cmd.renderAll
     );
   });

commands/html/index.js

@@ -24,7 +24,7 @@ function reset() {
   types = new Set();
 }
 
-function makeGraph(template, prefix, doReset) {
+function makeGraph(template, prefix, doReset, renderAll) {
   if (doReset) {
     reset();
   }
@@ -38,15 +38,16 @@ function makeGraph(template, prefix, doReset) {
       types.add(type);
       if (resObj.Template) {
         nested.push(resource);
-        makeGraph(resObj.Template, resource);
+        makeGraph(resObj.Template, resource, false, renderAll);
       }
       const dependencies = getDependencies(template, resource);
       addnodes(
         resource,
         dependencies,
         type,
         template.Resources[resource],
-        prefix
+        prefix,
+        renderAll
       );
     }
 
@@ -106,14 +107,14 @@ function addEdges(from, to, dependencyNode, fromNode) {
   }
 }
 
-function addnodes(resource, dependencies, type, resourceObject, prefix) {
+function addnodes(resource, dependencies, type, resourceObject, prefix, renderAll) {
   delete resourceObject.Template;
   if (nodes.filter((p) => p.id === resource).length === 0) {
     nodes.push({
       id: `${prefix}.${resource}`,
       dependencies: dependencies,
       prefix: prefix,
-      hidden: prefix != "root",
+      hidden: prefix != "root" && !renderAll,
       type: type,
       label: resource,
       shape: "image",
@@ -162,11 +163,11 @@ function getDependencies(template, resource) {
   return dependencies;
 }
 
-async function renderTemplate(template, isJson, filePath, ciMode, reset) {
+async function renderTemplate(template, isJson, filePath, ciMode, reset, renderAll) {
   useJson = isJson;
-  const { nodes, edges } = makeGraph(template, "root", reset);
+  const { nodes, edges } = makeGraph(template, "root", reset, renderAll);
   const fileContent = `
-  
+  var renderAll = ${renderAll}
   var nodes = new vis.DataSet(${JSON.stringify(nodes)});
   var edges = new vis.DataSet(${JSON.stringify(edges)});
   var nested = ${JSON.stringify(nested.sort())};

graph/Vis.js

@@ -143,7 +143,7 @@
         if (!showSidebar) {
           document.getElementById("filtersContainer").hidden = true;
         }
-        populateFilters("nested-stacks", nested, false, (x) => {
+        populateFilters("nested-stacks", nested, renderAll, (x) => {
           const ns = nodes.get({ filter: (p) => p.prefix === x.target.value });
           for (const n of ns) {
             nodes.update({ id: n.id, hidden: !x.target.checked });

graph/ui/index.html

@@ -1,6 +1,6 @@
 {
   "name": "@mhlabs/cfn-diagram",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "description": "CLI tool to visualise CloudFormation, SAM or CDK stacks as draw.io or HTML diagrams",
   "main": "index.js",
   "scripts": {

package.json

@@ -80,13 +80,12 @@ function findAllValues(obj, keyArray, keyName, path) {
         }
         values = multiValue.map((p) => p[0]);
       }
-
       if (prop === "Fn::ImportValue") {
         const split = typeof values[0] ==="string" && values[0].split(":");
         if (split.length == 2) {
           const stackName = split[0];
           const exportName = split[1];
-          const value = templateCache.templates[stackName].Outputs[exportName].Value;
+          const value = templateCache.templates[stackName] ? templateCache.templates[stackName].Outputs[exportName].Value : {"Fn::ImportValue": "Unknown"};
           const intrinsicFunction = Object.keys(value)[0];
           const prefix = stackName === templateCache.rootTemplate ? "root" : stackName;
           values[0] = `${prefix}.${value[intrinsicFunction]}`;

resources/JsonUtil.js

@@ -77,16 +77,20 @@ function fromCDK(cmd) {
   if (!cmd.skipSynth) {
     cp.execSync("cdk synth -o " + cmd.cdkOutput);
   }
+  const manifestFile = fs.readFileSync(path.join(cmd.cdkOutput, "manifest.json"));
   const treeFile = fs.readFileSync(path.join(cmd.cdkOutput, "tree.json"));
+  const manifest = JSON.parse(manifestFile);
   const tree = JSON.parse(treeFile);
-  const stacks = Object.keys(tree.tree.children).filter((p) => p !== "Tree");
-  const parentStack = stacks.shift();
+  const includeStacks = cmd.stacks ? cmd.stacks.split(",").map(p=>p.trim()) : null;
+  let stacks = Object.keys(manifest.artifacts).filter((p) => p !== "Tree" && (!includeStacks || includeStacks.includes(p)));  
+  const parentStack = Object.keys(tree.tree.children).filter((p) => p !== "Tree" && (!includeStacks || includeStacks.includes(p)))[0];
   const template = fs.readFileSync(
     path.join(cmd.cdkOutput, `${parentStack}.template.json`)
   );
   const parsedTemplate = JSON.parse(template);
   templateCache.templates[parentStack] = parsedTemplate;
   templateCache.rootTemplate = parentStack;
+  stacks = stacks.filter(p => p != parentStack);
   for (const stack of stacks) {
     const childTemplate = fs.readFileSync(
       path.join(cmd.cdkOutput, `${stack}.template.json`)