Interactive HTML diagrams - adds a new renderer

Introduces a new rendering option based on HTML and Cytoscape. The new rendering option creates a local static "website" with an interactive Cytoscape based diagram of the CDK App

README.md

@@ -32,10 +32,15 @@ Synthesize your CDK application
 $ cdk synth
 ```
 
-Generate a CDK-DIA diagram
+Generate a CDK-DIA diagram PNG
 ```sh
 $ npx cdk-dia
 ```
+
+Generate a CDK-DIA diagram as an interactive HTML (experimental)
+```sh
+$ npx cdk-dia --rendering cytoscape-html
+```
 <br/>
 
 ## Getting started - any other CDK language

bin/cli.ts

@@ -2,7 +2,7 @@
 import chalk from "chalk"
 import yargs from "yargs/yargs"
 import * as path from "path"
-import {CdkDia} from "../src/cdk-dia"
+import {CdkDia, Renderers} from "../src/cdk-dia"
 import * as rendering from "../src/render/index"
 
 async function initCli(): Promise<cdkDiaCliArgs> {
@@ -11,7 +11,8 @@ async function initCli(): Promise<cdkDiaCliArgs> {
         'cdk-tree-path': {type: 'string', alias: 'tree', default: 'cdk.out/tree.json', describe: 'Path of synthesized cdk cloud assembly'},
         'target-path': {type: 'string', alias: 'target', default: 'diagram.png', describe: 'Target path for rendered PNG'},
         'collapse': {type: 'boolean', default: true, describe: 'Collapse CDK Constructs'},
-        'stacks': {type: 'array', describe: 'Stacks to include (if not specified all stacks are diagramed)'}
+        'stacks': {type: 'array', describe: 'Stacks to include (if not specified all stacks are diagramed)'},
+        'rendering': {type: 'string', choices:[ Renderers.GRAPHVIZ, Renderers.CYTOSCAPE],default: Renderers.GRAPHVIZ, describe: 'The rendering engine to use'}
     }).version(false).argv
 }
 
@@ -31,9 +32,11 @@ async function generateDiagram(args: cdkDiaCliArgs) {
         args["target-path"],
         args.collapse,
         packageBasePath,
-        includedStacks)
+        includedStacks,
+        args["rendering"])
         .then((output) => output.userOutput())
         .catch(e => {
+            console.error(`Failed to generate diagram - ${e}`)
             throw e
         })
 }
@@ -68,5 +71,6 @@ interface cdkDiaCliArgs {
     'cdk-tree-path': string,
     'target-path': string,
     collapse: boolean,
-    stacks: (string | number)[] | undefined
+    stacks: (string | number)[] | undefined,
+    rendering: Renderers
 }

cytoscape-rendering/.gitignore

@@ -0,0 +1,15 @@
+# dependencies
+node_modules
+
+# production
+build
+
+# misc
+.DS_Store
+
+npm-debug.log
+yarn-error.log
+yarn.lock
+.yarnclean
+.vscode
+.idea

cytoscape-rendering/README.md

@@ -0,0 +1 @@
+This folder includes the all resources required to develop and bundle the Cytoscape base resources.