feat: ci/cd mode rendering diagram s png

NetRock6 · Oct 23, 2020 · 00a31f7 · 00a31f7
1 parent 8469840
commit 00a31f7
Show file tree

Hide file tree

Showing 6 changed files with 2,208 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,16 @@ The HTML output uses [vis.js](https://github.com/visjs/vis-network) to generate
 cfn-dia html -t template.yaml
 ```
 
+### Image
+Uses [pageres](https://github.com/sindresorhus/pageres) to generate a screenshot of a HTML diagram. This can be used in a CI/CD pipeline to keep an always up-to-date diagram in your readme-file.
+
+![Demo](https://raw.githubusercontent.com/mhlabs/cfn-diagram/master/demo-image.gif)
+
+#### Example 
+```
+cfn-dia image -t template.yaml
+```
+
 
 ## Known issues
 * Some icons are missing. Working on completing the coverage.

diff --git a/graph/Vis.js b/graph/Vis.js
@@ -8,6 +8,8 @@ const path = require("path");
 const open = require("open");
 const ColorHash = require("color-hash");
 const { yamlParse, yamlDump } = require("yaml-cfn");
+const Pageres = require('pageres');
+
 const colorHash = new ColorHash();
 let nodes = [];
 let edges = [];
@@ -156,7 +158,7 @@ function pathToDescriptor(path) {
   return path.split(".").slice(-1)[0];
 }
 
-function renderTemplate(template, isJson, filePath) {
+async function renderTemplate(template, isJson, filePath, outputType, imagePath) {
   useJson = isJson;
   const { nodes, edges } = makeGraph(template, "root");
   const fileContent = `
@@ -165,6 +167,7 @@ function renderTemplate(template, isJson, filePath) {
   var edges = new vis.DataSet(${JSON.stringify(edges)});
   var nested = ${JSON.stringify(nested.sort())};
   var types = ${JSON.stringify(Array.from(types).sort())};
+  var showSidebar = ${outputType === "html"};
   `;
   const uiPath = filePath || path.join(tempDirectory, "cfn-diagram");
   if (!fs.existsSync(uiPath)) {
@@ -179,7 +182,14 @@ function renderTemplate(template, isJson, filePath) {
     path.join(uiPath, "icons.js")
   );
   fs.writeFileSync(path.join(uiPath, "data.js"), fileContent);
-  open(path.join(uiPath, "index.html"));
+  if (outputType === "html") {
+    open(path.join(uiPath, "index.html"));
+  } else {
+    await new Pageres({filename: "cfn-diagram"})
+		.src(`file://${path.join(uiPath, "index.html")}`, ['1024x768'], {crop: true})
+		.dest(imagePath)
+		.run()
+  }
 }
 
 module.exports = {

diff --git a/graph/ui/index.html b/graph/ui/index.html
@@ -131,6 +131,9 @@
     </div>
     <script>
       window.onload = function (event) {
+        if (!showSidebar) {
+          document.getElementById("filtersContainer").hidden = true;
+        }
         populateFilters("nested-stacks", nested, false, (x) => {
           const ns = nodes.get({ filter: (p) => p.prefix === x.target.value });
           for (const n of ns) {

diff --git a/index.js b/index.js
@@ -27,7 +27,7 @@ program
   .option(
     "-t, --template-file [templateFile]",
     "Path to template",
-    "template.yml"
+    "template.yaml"
   )
   .option("-o, --output-file [outputFile]", "Output file", "template.drawio")
   .description("Generates a draw.io diagram from a CloudFormation template")
@@ -40,7 +40,7 @@ program
   .option(
     "-t, --template-file [templateFile]",
     "Path to template",
-    "template.yml"
+    "template.yaml"
   )
   .option(
     "-o, --output-path [outputPath]",
@@ -50,15 +50,33 @@ program
   .description("Generates a vis.js diagram from a CloudFormation template")
   .action(async (cmd) => {
     const template = getTemplate(cmd);
-    await Vis.renderTemplate(template.template, template.isJson, cmd.outputPath);
+    await Vis.renderTemplate(template.template, template.isJson, cmd.outputPath, "html");
+  });
+program
+  .command("image")
+  .alias("i")
+  .option(
+    "-t, --template-file [templateFile]",
+    "Path to template",
+    "template.yaml"
+  )
+  .option(
+    "-o, --output-path [outputPath]",
+    "Output path",
+    `./`
+  )
+  .description("Generates a vis.js diagram from a CloudFormation template")
+  .action(async (cmd) => {
+    const template = getTemplate(cmd);
+    await Vis.renderTemplate(template.template, template.isJson, `${path.join(tempDirectory, "cfn-diagram")}`, "image", cmd.outputPath);
   });
 program
   .command("generate")
   .alias("g")
   .option(
     "-t, --template-file [templateFile]",
     "Path to template",
-    "template.yml"
+    "template.yaml"
   )
   .option("-o, --output-file [outputFile]", "Output file", "template.drawio")
   .description("[Deprected] Same as draw.io. Kept for backward compatability")