From 00a31f7de8ecba062a73dbace61b24afcbfe1e23 Mon Sep 17 00:00:00 2001 From: Lars Jacobsson Date: Fri, 23 Oct 2020 15:19:21 +0200 Subject: [PATCH] feat: ci/cd mode rendering diagram s png --- README.md | 10 + graph/Vis.js | 14 +- graph/ui/index.html | 3 + index.js | 26 +- package-lock.json | 2218 +++++++++++++++++++++++++++++++++++++++++-- package.json | 4 +- 6 files changed, 2208 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 5f7fc3c..e0d7156 100644 --- 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 index 335b1c1..23c899a 100644 --- 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 index b7230f9..1c97fd1 100644 --- a/graph/ui/index.html +++ b/graph/ui/index.html @@ -131,6 +131,9 @@