@datapith/cdk4j-diagram 0.4.1

package/BUILD.md

@@ -0,0 +1,12 @@
+### Development Build on Windows
+
+1. Install npm from https://github.com/coreybutler/nvm-windows#overview
+2. nvm ls
+3. nvm use 16.13.1
+4. npm install -g pkg
+6. npm install
+7. pkg index.js -o cfn-dia
+
+### Running from node
+node index.js h -t tests/template.json
+cd ta

package/commands/asciiart/index.js

@@ -0,0 +1,58 @@
+const program = require("commander");
+const mxGenerator = require("../../graph/MxGenerator");
+const templateParser = require("../../shared/templateParser");
+const filterConfig = require("../../resources/FilterConfig");
+const mxGraphToAsciiArt = require("./mxgraph-to-asciiart");
+const fs = require("fs");
+program
+  .command("ascii-art")
+  .alias("a")
+  .option(
+    "-t, --template-file [templateFile]",
+    "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("-co, --cdk-output [outputPath]", "CDK synth output path", `cdk.out`)
+  .option("-s, --skip-synth", "Skips CDK synth", false)
+  .option(
+    "-w, --watch",
+    "Watch for changes in template and rerender diagram on change",
+    false
+  )
+  .option(
+    "-e, --exclude-types [excludeTypes...]",
+    "List of resource types to exclude when using CI mode"
+  )
+  .description("Generates an ascii-art diagram from a CloudFormation template")
+  .action(async (cmd) => {
+    const xml = await render(cmd);
+    if (cmd.watch) {
+      fs.watchFile(cmd.templateFile, (a, b) => {
+        render(cmd);
+      });
+    }
+  });
+async function render(cmd) {
+  try {
+    const template = templateParser.get(cmd).template;
+
+    if (!template.Resources) {
+      console.log("Can't find resources");
+      return;
+    }
+    filterConfig.resourceNamesToInclude = Object.keys(template.Resources);
+    filterConfig.resourceTypesToInclude = Object.keys(template.Resources).map(
+      (p) => template.Resources[p].Type
+    );
+    mxGenerator.reset();
+    const xml = await mxGenerator.renderTemplate(template);
+    mxGraphToAsciiArt.render(xml);
+    return xml;
+  } catch (err) {
+    console.log(err.message);
+  }
+}

package/commands/asciiart/mxgraph-to-asciiart.js

@@ -0,0 +1,203 @@
+const clc = require("cli-color");
+const parser = require("fast-xml-parser");
+const colorConvert = require("color-convert");
+const yScale = 12;
+const xScale = 7;
+const serviceColors = {
+  lambda: clc.bgYellow,
+  apigateway: clc.bgRed,
+  sqs: clc.bgRed,
+  sns: clc.bgRed,
+  dynamodb: clc.bgBlue,
+};
+
+let highestY = 0;
+function render(xml) {
+  const doc = parser.parse(xml, {
+    ignoreAttributes: false,
+    attributeNamePrefix: "",
+  });
+
+  console.clear();
+  const mxGraphModel = doc.mxGraphModel || doc.mxfile.diagram.mxGraphModel;
+  for (const cell of mxGraphModel.root.mxCell) {
+    if (
+      cell.mxGeometry &&
+      cell.mxGeometry.Array &&
+      cell.mxGeometry.Array.as === "points"
+    ) {
+      let lastKnownX, lastKnownY;
+      const color = Math.floor(Math.random() * 200 + 100);
+      for (let i = 0; i < cell.mxGeometry.Array.mxPoint.length; i++) {
+        const point = cell.mxGeometry.Array.mxPoint[i];
+        if (lastKnownX && lastKnownY) {
+          edge(
+            lastKnownX / xScale,
+            lastKnownY / yScale,
+            (point.x || lastKnownX) / xScale,
+            (point.y || lastKnownY) / yScale,
+            color,
+            i === cell.mxGeometry.Array.mxPoint.length - 1
+          );
+        }
+        lastKnownX = point.x || lastKnownX;
+        lastKnownY = point.y || lastKnownY;
+        highestY = Math.max(highestY, lastKnownY);
+      }
+    }
+  }
+
+  for (const cell of mxGraphModel.root.mxCell) {
+    if (cell.mxGeometry && cell.mxGeometry.width) {
+      const resourceType = cell.style.match(/resIcon=mxgraph.aws4.(.+);/);
+      const color = cell.style.match(/fillColor=#(.+?);/);
+      box(
+        cell.mxGeometry.x / xScale,
+        cell.mxGeometry.y / yScale,
+        resourceType ? resourceType[1] : "",
+        cell.value,
+        color ? color[1] : "#000000"
+      );
+      highestY = Math.max(cell.mxGeometry.y + 4, highestY);
+    }
+  }
+  process.stdout.write(clc.move.bottom);
+  process.stdout.write(clc.move.lineBegin);
+}
+
+function edge(fromX, fromY, toX, toY, color, isLast) {
+  const coloredLine = clc.xterm(color);
+  let x = fromX;
+  let y = fromY;
+  const deltaX = Math.max(Math.min(1, (toX - fromX) / xScale), -1);
+  const deltaY = Math.max(Math.min(1, (toY - fromY) / yScale), -1);
+  let prevX = Math.floor(x);
+  let prevY = Math.floor(y);
+  let safetyExit = 0;
+  while (
+    (Math.floor(x) !== Math.floor(toX) || Math.floor(y) !== Math.floor(toY)) &&
+    safetyExit++ < 50
+  ) {
+    const flooredX = Math.floor(x);
+    const flooredY = Math.floor(y);
+    if (flooredX !== Math.floor(toX)) x = x + deltaX;
+    if (flooredY !== Math.floor(toY)) y = y + deltaY;
+    let char = "+";
+    if (flooredY === prevY && flooredX !== prevX) char = "─";
+    if (flooredY === prevY && flooredX === prevX) char = "─";
+    if (flooredY > prevY) {
+      if (flooredX == prevX) char = "│";
+      if (flooredX > prevX) {
+        char = "└";
+        moveToAbsolute(flooredX, flooredY - 1);
+        process.stdout.write(coloredLine("┐"));
+      }
+      if (flooredX < prevX) {
+        char = "┘";
+        moveToAbsolute(flooredX, flooredY - 1);
+        process.stdout.write(coloredLine("┌"));
+      }
+    }
+    if (flooredY < prevY) {
+      if (flooredX === prevX) char = "│";
+      if (flooredX > prevX) {
+        char = "┌";
+        moveToAbsolute(flooredX, flooredY + 1);
+        process.stdout.write(coloredLine("┘"));
+      }
+      if (flooredX < prevX) {
+        char = "┐";
+        moveToAbsolute(flooredX, flooredY + 1);
+        process.stdout.write(coloredLine("└"));
+      }
+    }
+    prevX = flooredX;
+    prevY = flooredY;
+    moveToAbsolute(flooredX, flooredY);
+    process.stdout.write(coloredLine(char));
+  }
+  if (isLast) {
+    moveToAbsolute(toX, toY);
+    if (fromX > toX) process.stdout.write(coloredLine("<"));
+    else process.stdout.write(coloredLine(">"));
+  }
+}
+
+function box(x, y, type, text, color) {
+  const coloredBox =
+    clc.bgXterm(rgbToX256(...colorConvert.hex.rgb(color))) || clc.bgBlack;
+
+  y = y || 0;
+  x = x || 0;
+  const height = 2;
+  if (text.length > 20) {
+    text = text.substring(0, 20) + "...";
+  }
+  const width = Math.max(text.length, type.length + 2) + 2;
+  moveToAbsolute(x, y);
+  print(coloredBox, `┌${"─".repeat(width - 2)}╮`);
+  for (let row = 0; row < height; row++) {
+    moveToRelative(-width, 1);
+    print(coloredBox, `│${" ".repeat(width - 2)}│`);
+  }
+  moveToRelative(-width, 1);
+  print(coloredBox, `╰${"─".repeat(width - 2)}╯`);
+  moveToAbsolute(x + 1, y + Math.floor(height / 2));
+  print(coloredBox, text);
+  moveToAbsolute(x + 1, y + Math.floor(height / 2) + 1);
+  print(coloredBox, `(${type})`);
+}
+
+function print(coloredBox, text) {
+  process.stdout.write(coloredBox(text));
+}
+
+function moveToAbsolute(x, y) {
+  process.stdout.write(clc.move.to(x, y + 7));
+}
+
+function moveToRelative(x, y) {
+  process.stdout.write(clc.move(x, y));
+}
+
+function rgbToX256(r, g, b) {
+  // Calculate the nearest 0-based color index at 16 .. 231
+  const v2ci = (v) => {
+    if (v < 48) {
+      return 0;
+    } else if (v < 115) {
+      return 1;
+    } else {
+      return Math.trunc((v - 35) / 40);
+    }
+  };
+
+  const ir = v2ci(r);
+  const ig = v2ci(g);
+  const ib = v2ci(b);
+  const colorIndex = 36 * ir + 6 * ig + ib;
+
+  // Calculate the nearest 0-based gray index at 232 .. 255
+  const average = Math.trunc((r + g + b) / 3);
+  const grayIndex = average > 238 ? 23 : Math.trunc((average - 3) / 10);
+
+  // Calculate the represented colors back from the index
+  const i2cv = [0, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
+  const cr = i2cv[ir];
+  const cg = i2cv[ig];
+  const cb = i2cv[ib];
+  const gv = 8 + 10 * grayIndex;
+
+  // Return the one which is nearer to the original input rgb value
+  const distSquare = (A, B, C, a, b, c) => {
+    return (A - a) * (A - a) + (B - b) * (B - b) + (C - c) * (C - c);
+  };
+  const colorErr = distSquare(cr, cg, cb, r, g, b);
+  const grayErr = distSquare(gv, gv, gv, r, g, b);
+
+  return colorErr <= grayErr ? 16 + colorIndex : 232 + grayIndex;
+}
+
+module.exports = {
+  render,
+};

package/commands/browse/index.js

@@ -0,0 +1,61 @@
+const program = require("commander");
+const Vis = require("../../graph/Vis");
+const draw = require("../../graph/MxGenerator");
+const { CloudFormationClient, ListStacksCommand, GetTemplateCommand } = require("@aws-sdk/client-cloudformation");
+const inquirer = require("inquirer");
+const prompt = inquirer.createPromptModule();
+const YAML = require("yaml-cfn");
+const jsonUtil = require("../../resources/JsonUtil");
+const { fromSSO } = require("@aws-sdk/credential-provider-sso");
+
+program
+  .command("browse")
+  .alias("b")
+  .option("-o --output [output]", "Output format. draw.io or html")
+  .option("--output-file [outputFile]", "Output file. Only used when using draw.io output. Defaults to <stack-name>.drawio")
+  .option("-p --profile [profile]", "AWS CLI profile")
+  .option("-r --region [region]", "AWS region")
+  .description("Browses and generates diagrams from your deployed templates")
+  .action(async (cmd) => {
+
+    const credentials = await fromSSO({ profile: cmd.profile || 'default' })();
+
+    const cloudFormation = new CloudFormationClient({ credentials, region: cmd.region || process.env.AWS_REGION });
+
+    let nextToken = null;
+    const stackList = [];
+    do {
+      const response = await cloudFormation.send(new ListStacksCommand({
+        NextToken: nextToken,
+        StackStatusFilter: ["CREATE_COMPLETE", "UPDATE_COMPLETE"],
+      }));
+      stackList.push(...response.StackSummaries.map((p) => p.StackName));
+      nextToken = response.NextToken;
+    } while (nextToken);
+    while (true) {
+      const stack = await prompt({
+        name: "stackName",
+        type: "list",
+        choices: stackList.sort(),
+      });
+      const templateBody = (
+        await cloudFormation.send(new GetTemplateCommand({ StackName: stack.stackName }))
+      ).TemplateBody;
+      const isJson = jsonUtil.isJson(templateBody);
+      const parser = isJson ? JSON.parse : YAML.yamlParse;
+
+      const template = parser(templateBody);
+      if (cmd.output === "html") {
+        await Vis.renderTemplate(
+          template,
+          template.isJson,
+          cmd.outputPath,
+          false,
+          true
+        );
+      } else {
+        cmd.outputFile = cmd.outputFile || stack.stackName + ".drawio"
+        await draw.generate(cmd, template);
+      }
+    }
+  });

package/commands/draw.io/index.js

@@ -0,0 +1,40 @@
+const program = require("commander");
+const mxGenerator = require("../../graph/MxGenerator");
+
+let ciMode = false;
+
+program
+  .command("draw.io")
+  .alias("d")
+  .option(
+    "-t, --template-file [templateFile]",
+    "Path to template or cdk.json file",
+    "template.yaml or cdk.json"
+  )
+  .option(
+    "-c, --ci-mode",
+    "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]",
+    "CDK synth output path",
+    `cdk.out`
+  )
+  .option(
+    "-s, --skip-synth",
+    "Skips CDK synth",
+    false
+  )
+  .option(
+    "-e, --exclude-types [excludeTypes...]",
+    "List of resource types to exclude when using CI mode"
+  )
+  .description("Generates a draw.io diagram from a CloudFormation template")
+  .action(async (cmd) => {
+    await mxGenerator.generate(cmd);
+  });
+
+

package/commands/html/index.js

@@ -0,0 +1,40 @@
+const program = require("commander");
+const template = require("../../shared/templateParser");
+const path = require("path");
+const tempDirectory = require("temp-dir");
+const Vis = require("../../graph/Vis");
+const YAML = require("yaml-cfn");
+
+program
+  .command("html")
+  .alias("h")
+  .option(
+    "-t, --template-file [templateFile]",
+    "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]",
+    "Name of output file",
+    `${path.join(tempDirectory, "cdk4j-diagram")}`
+  )
+  .option("-co, --cdk-output [outputPath]", "CDK synth output path", `cdk.out`)
+  .option("-s, --skip-synth", "Skips CDK synth", false)
+  .option("-sa, --standalone", "Creates a self-contained standalone index.html", false)
+  .description("Generates a vis.js diagram from a CloudFormation template")
+  .action(async (cmd) => {
+    ciMode = cmd.ciMode;
+    const templateObj = template.get(cmd);
+    await Vis.renderTemplate(
+      templateObj.template,
+      template.isJson,
+      cmd.outputPath,
+      true,
+      false,
+      cmd.standalone,
+      cmd.renderAll
+    );
+  });

package/commands/mermaid/index.js

@@ -0,0 +1,100 @@
+const Vis = require("../../graph/Vis");
+const program = require("commander");
+const template = require("../../shared/templateParser");
+const fs = require("fs");
+program
+  .command("mermaid")
+  .alias("m")
+  .option(
+    "-t, --template-file [templateFile]",
+    "Path to template or cdk.json file",
+    "template.yaml or cdk.json"
+  )
+  .option("-all --render-all", "If set, all nested stacks will be rendered. By default only root template is rendered", false)
+  .option(
+    "-o, --output-path [outputPath]",
+    "Name of output file"
+  )
+  .option("-co, --cdk-output [cdkOutputPath]", "CDK synth output path", `cdk.out`)
+  .option("-s, --skip-synth", "Skips CDK synth", false)
+  .description("Generates a mermaid graph from a template")
+  .action(async (cmd) => {
+    ciMode = cmd.ciMode;
+    const templateObj = template.get(cmd);
+    const graph = await Vis.makeGraph(
+      templateObj.template,
+      "root",
+      false,
+      cmd.renderAll
+    );
+
+    const groups = {};
+    for (const edge of graph.edges) {
+      const owner = edge.from.split(".")[0];
+      
+      if (edge.to.startsWith(`${owner}.`) && edge.from.startsWith(`${owner}.`)) {
+        if (!groups[owner]) {
+          groups[owner] = [];
+        }
+        groups[owner].push(edge);
+      } else {
+        if (!groups["crossgroup"]) {
+          groups["crossgroup"] = [];
+        }
+        groups["crossgroup"].push(edge);
+      }
+    }
+    const uniqueRelations = [];
+    let mermaidString = `\`\`\`mermaid\n\tflowchart TB;\n`;
+    for (const groupKey in groups) {
+      const group = groups[groupKey];
+      if (groupKey !== "crossgroup") {
+        mermaidString += `\t\tsubgraph ${groupKey !== "root" ? groupKey : " "}\n`;
+      }
+
+      mermaidString += `${group.map(p => {
+        const fromResource = graph.nodes.find(n => n.id === p.from);
+        const toResource = graph.nodes.find(n => n.id === p.to);
+
+        const from = createShape(fromResource);
+        const to = createShape(toResource);
+        const relation = `\t\t${from}-->${to}`;
+        if (!uniqueRelations.includes(relation)) {
+          uniqueRelations.push(relation);
+          return relation;
+        }
+      }).filter(p => p).join("\n")}
+
+  `
+      if (groupKey !== "crossgroup") {
+        mermaidString += `\tend\n`;
+      }
+
+    }
+
+    mermaidString += `\n\`\`\``;
+    if (cmd.outputPath) {
+      fs.writeFileSync(cmd.outputPath, mermaidString);
+      console.log(`Wrote Mermaid diagram to ${cmd.outputPath}`);
+    } else {
+      console.log(mermaidString)
+    }
+  });
+
+function createShape(resource, cmd) {
+  const label = resource.label.replace(/[^a-z0-9\n]/gmi, "").replace(/\s+/g, "");
+  const id = resource.id.replace(/[^a-z0-9\n]/gmi, "").replace(/\s+/g, "");;
+  const type = resource.type.replace("AWS::", "");
+  switch (resource.type) {
+    case "AWS::Serverless::Function":
+    case "AWS::Lambda::Function":
+      return `${id}[[${label}<br/>${type}]]`;
+    case "AWS::Serverless::SimpleTable":
+    case "AWS::DynamoDB::Table":
+    case "AWS::RDS::DBInstance":
+    case "AWS::RDS::DBCluster":
+      return `${id}[(${label}<br/>${type})]`;
+  }
+  return `${id}[${label}<br/>${type}]`;
+
+}