@datapith/cdk4j-diagram 0.4.1

package/graph/MxGenerator.js

@@ -0,0 +1,400 @@
+"use strict";
+const jsdom = require("jsdom");
+const { JSDOM } = jsdom;
+const dom = new JSDOM();
+const jsonUtil = require("../resources/JsonUtil");
+const iconMap = require("../resources/IconMap");
+const filterConfig = require("../resources/FilterConfig");
+const fs = require("fs");
+const inquirer = require("inquirer");
+const templateCache = require("../shared/templateCache");
+const openInEditor = require("open-in-editor");
+const prompt = inquirer.createPromptModule();
+const templateHelper = require("../shared/templateParser");
+const actionOption = {
+  FilterResourceTypes: "Filter resources by type",
+  FilterResourceName: "Filter resources by name",
+  EdgeLabels: "Edge labels: On",
+  Quit: "Quit",
+};
+const YAML = require("yaml-cfn");
+
+global.window = dom.window;
+global.document = window.document;
+global.XMLSerializer = window.XMLSerializer;
+Object.defineProperty(global, 'navigator', {
+  value: window.navigator,
+  writable: true,
+  configurable: true
+});
+const mxgraph = require("mxgraph")({});
+const { mxGraph, mxCodec, mxUtils } = mxgraph;
+
+const layouts = [
+  { name: "Organic", value: "mxFastOrganicLayout" },
+  { name: "Circle", value: "mxCircleLayout" },
+  { name: "Compact Tree", value: "mxCompactTreeLayout" },
+  { name: "Radial Tree", value: "mxRadialTreeLayout" },
+];
+
+let currentLayout = "mxHierarchicalLayout";
+
+let vertices = [];
+let forceLayoutRender = true;
+let locationCache = {};
+let graph = new mxGraph();
+let parent = graph.getDefaultParent();
+
+function reset() {
+  graph = new mxGraph();
+  parent = graph.getDefaultParent();
+  vertices = [];
+  locationCache = {};
+}
+
+function makeGraph(template, prefix = "root") {
+  const layout = new mxgraph[currentLayout](graph, true, 500);
+  const resources = Object.keys(template.Resources);
+  layout.orientation = "west";
+  layout.intraCellSpacing = 50;
+  layout.interRankCellSpacing = 200;
+  layout.interHierarchySpacing = 100;
+  layout.parallelEdgeSpacing = 20;
+  layout.leftMargin = 200;
+  layout.resizeParent = true;
+  graph.getModel().beginUpdate();
+  try {
+    for (const resource of resources) {
+      const resObj = template.Resources[resource];
+      const type = resObj.Type;
+      if (
+        (filterConfig.resourceTypesToInclude &&
+          filterConfig.resourceNamesToInclude &&
+          !filterConfig.resourceTypesToInclude.includes(type)) ||
+        !filterConfig.resourceNamesToInclude.includes(resource)
+      ) {
+        updateFilters(type, resource, prefix);
+        continue;
+      }
+      if (resObj.Template) {
+        makeGraph(resObj.Template, resource);
+      }
+
+      const dependencies = getDependencies(template, resource);
+      addVertices(resource, dependencies, type, prefix);
+    }
+
+    for (const sourceVertex of vertices) {
+      for (const dependencyNode of sourceVertex.dependencies) {
+        for (const dependency of dependencyNode.value) {
+          const targets = vertices.filter(
+            (p) => p.name === prefix + "." + dependency.split(".").pop()
+          );
+          const targetVertex = targets[0];
+          if (!targetVertex) {
+            continue;
+          }
+          let from = sourceVertex.vertex;
+          let to = targetVertex.vertex;
+          addEdges(from, to, dependencyNode, prefix);
+        }
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  } finally {
+    layout.execute(parent);
+    forceLayoutRender = false;
+    graph.getModel().endUpdate();
+  }
+  return graph;
+}
+
+function addEdges(from, to, dependencyNode) {
+  if (from && to) {
+    const existingEdges = Object.keys(graph.getModel().cells).filter(
+      (c) => c === edgeId(to, from)
+    );
+
+    if (existingEdges.length > 0) {
+      const existingEdge = graph.model.cells[existingEdges[0]];
+      if (filterConfig.edgeMode === "Off") {
+        existingEdge.value = "";
+      } else if (
+        !existingEdge.value.includes(
+          jsonUtil.pathToDescriptor(dependencyNode.path, filterConfig)
+        )
+      ) {
+        existingEdge.value += `\n${jsonUtil.pathToDescriptor(
+          dependencyNode.path,
+          filterConfig
+        )}`;
+      }
+      return;
+    }
+    if (dependencyNode.path.indexOf("Properties.Events") > 0) {
+      graph.insertEdge(
+        parent,
+        edgeId(to, from),
+        "Invoke",
+        to,
+        from,
+        "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;labelBackgroundColor=none;fontColor=#7EA6E0;"
+      );
+    } else {
+      graph.insertEdge(
+        parent,
+        edgeId(to, from),
+        jsonUtil.pathToDescriptor(dependencyNode.path, filterConfig),
+        from,
+        to,
+        "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;labelBackgroundColor=none;fontColor=#EA6B66;"
+      );
+    }
+  }
+}
+
+function addVertices(resource, dependencies, type, prefix) {
+  if (vertices.filter((p) => p.name === prefix + "." + resource).length === 0) {
+    vertices.push({
+      name: `${prefix}.${resource}`,
+      dependencies: dependencies,
+      type: type,
+      vertex: graph.insertVertex(
+        parent,
+        null,
+        resource,
+        locationCache[resource] ? locationCache[resource].x : 70,
+        locationCache[resource] ? locationCache[resource].y : 0,
+        50,
+        50,
+        iconMap.getIcon(type)
+      ),
+    });
+  }
+}
+
+function getDependencies(template, resource) {
+  const dependencies = [];
+  jsonUtil.findAllValues(template.Resources[resource], dependencies, "Ref");
+  jsonUtil.findAllValues(template.Resources[resource], dependencies, "Fn::Sub");
+  jsonUtil.findAllValues(
+    template.Resources[resource],
+    dependencies,
+    "Fn::GetAtt"
+  );
+
+  jsonUtil.findAllValues(
+    template.Resources[resource],
+    dependencies,
+    "Fn::ImportValue"
+  );
+
+  for (const dependency of dependencies) {
+    dependency.value = dependency.value.filter((p) => {
+      const split = p.split(".");
+      if (split.length === 2 && templateCache.templates[split[0]]) {
+        return templateCache.templates[split[0]].Resources[split[1]];
+      }
+      return template.Resources[p];
+    });
+  }
+
+  return dependencies;
+}
+
+function updateFilters(type, resource, prefix) {
+  const cells = graph.getModel().cells;
+  const keys = Object.keys(cells);
+  keys.map(
+    (p) =>
+      (locationCache[cells[p].value] = cells[p].geometry
+        ? { x: cells[p].geometry.x, y: cells[p].geometry.y }
+        : null)
+  );
+  if (vertices.filter((p) => p.type === type).length) {
+    const item = vertices.filter((p) => p.name === `${prefix}.${resource}`)[0];
+    if (item) {
+      graph.removeCells([item.vertex], true);
+    }
+    vertices = vertices.filter((p) => p.name != `${prefix}.${resource}`);
+  }
+}
+
+function edgeId(to, from) {
+  return `${to.value}|${from.value}`; //|${pathToDescriptor(dependencyNode.path)}`;
+}
+
+function graphToXML(graph) {
+  var encoder = new mxCodec();
+  var result = encoder.encode(graph.getModel());
+  return `<mxfile host="" modified="2020-05-24T15:21:41.060Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.45.0 Chrome/78.0.3904.130 Electron/7.2.4 Safari/537.36" version="13.1.3" etag="lrwgP8mNOWNbAz78NI_h" pages="2">
+            <diagram id="diagramid" name="Diagram">
+              ${mxUtils.getXml(result)}
+            </diagram>
+          </mxfile>`;
+}
+
+function renderTemplate(template) {
+  const xml = graphToXML(makeGraph(template));
+  return xml;
+}
+
+async function generate(cmd, template) {
+  const ciMode = cmd.ciMode;
+
+  template = template || templateHelper.get(cmd).template;
+  jsonUtil.createPseudoResources(template);
+
+  const resources = iterateResources(template);
+  let types = [];
+  addTypesToShow(Object.keys(template.Resources), types, template);
+  types = [...new Set(types)].sort();
+  let resourceTypes = { answer: types };
+  let resourceNames = { answer: resources };
+  let edgeMode = { answer: "On" };
+  filterConfig.resourceNamesToInclude = resourceNames.answer;
+  filterConfig.resourceTypesToInclude = resourceTypes.answer;
+  filterConfig.edgeMode = edgeMode.answer;
+
+  let actionChoice = {};
+  console.log("Diagram will be written to " + cmd.outputFile);
+  let backedUp = false;
+  if (fs.existsSync(cmd.outputFile)) {
+    fs.copyFileSync(cmd.outputFile, `${cmd.outputFile}.bak`);
+    backedUp = true;
+  }
+
+  if (ciMode) {
+    if (cmd.excludeTypes && Array.isArray(cmd.excludeTypes)) {
+      const filteredTypes = filterConfig.resourceTypesToInclude.filter((type) =>
+        shouldFilterFromCiTypeList(type, cmd.excludeTypes)
+      );
+      filterConfig.resourceTypesToInclude = filteredTypes;
+    }
+    const xml = renderTemplate(template);
+    fs.writeFileSync(cmd.outputFile, xml);
+    return;
+  }
+
+  try {
+    const editor = await openInEditor.configure({
+      editor: "code",
+    });
+
+    await editor.open(cmd.outputFile);
+  } catch (err){
+    console.log("Could not find vscode");    
+  }
+  
+  while (true) {
+    filterConfig.resourceNamesToInclude = resourceNames.answer;
+    filterConfig.resourceTypesToInclude = resourceTypes.answer;
+
+    filterConfig.edgeMode = edgeMode.answer;
+
+    const xml = renderTemplate(template);
+
+    fs.writeFileSync(cmd.outputFile, xml);
+
+    actionChoice = await prompt({
+      message: "Options",
+      choices: [
+        actionOption.FilterResourceTypes,
+        actionOption.FilterResourceName,
+        actionOption.EdgeLabels,
+        actionOption.Quit,
+      ],
+      type: "list",
+      name: "answer",
+    });
+
+    switch (actionChoice.answer) {
+      case actionOption.FilterResourceTypes:
+        resourceTypes = await prompt({
+          message: "Select resource types to include",
+          choices: types,
+          default: resourceTypes.answer,
+          type: "checkbox",
+          name: "answer",
+        });
+        break;
+      case actionOption.FilterResourceName:
+        resourceNames = await prompt({
+          message: "Select resources to include",
+          choices: resources,
+          default: resourceNames.answer,
+          type: "checkbox",
+          name: "answer",
+        });
+        break;
+      case actionOption.EdgeLabels:
+        edgeMode = await prompt({
+          message: "Toggle edge labels",
+          choices: ["On", "Off"],
+          default: resourceNames.answer,
+          type: "list",
+          name: "answer",
+        });
+        actionOption.EdgeLabels = `Edge labels: ${edgeMode.answer}`;
+        break;
+      case actionOption.Quit:
+        const quit = await prompt({
+          message: "Do you want to keep your diagram?",
+          type: "confirm",
+          name: "answer",
+        });
+        if (!quit.answer) {
+          fs.unlinkSync(cmd.outputFile);
+          if (backedUp) {
+            fs.renameSync(`${cmd.outputFile}.bak`, cmd.outputFile);
+          }
+        }
+        process.exit(0);
+    }
+  }
+}
+
+function iterateResources(template) {
+  const resources = [];
+  for (const resource of Object.keys(template.Resources)) {
+    resources.push(resource);
+    if (template.Resources[resource].Template) {
+      resources.push(
+        ...iterateResources(template.Resources[resource].Template, resource)
+      );
+    }
+  }
+  return resources;
+}
+
+function addTypesToShow(resources, types, template) {
+  for (const resource of resources) {
+    types.push(template.Resources[resource].Type);
+    if (template.Resources[resource].Template) {
+      addTypesToShow(
+        Object.keys(template.Resources[resource].Template.Resources),
+        types,
+        template.Resources[resource].Template
+      );
+    }
+  }
+}
+
+function shouldFilterFromCiTypeList(type, excludeList) {
+  type = type.toLowerCase();
+  const isInExcludeList = excludeList.find(
+    (exclude) =>
+      exclude.toLowerCase() == type ||
+      (type.startsWith("external resource") && type.includes(exclude))
+  );
+
+  return !isInExcludeList;
+}
+
+module.exports = {
+  renderTemplate,
+  layouts,
+  reset,
+  generate,
+};

package/graph/Vis.js

@@ -0,0 +1,231 @@
+"use strict";
+const jsonUtil = require("../resources/JsonUtil");
+const icons = require("./ui/icons");
+const filterConfig = require("../resources/FilterConfig");
+const tempDirectory = require("temp-dir");
+const templateCache = require("../shared/templateCache");
+const fs = require("fs");
+const path = require("path");
+const open = require("open");
+const ColorHash = require("color-hash");
+const { yamlParse, yamlDump } = require("yaml-cfn");
+const AWSIcon = require("aws-icons-directory");
+
+const colorHash = new ColorHash();
+let nodes = [];
+let edges = [];
+let nested = [];
+let types = new Set();
+let useJson;
+
+function reset() {
+  nodes = [];
+  edges = [];
+  nested = [];
+  types = new Set();
+}
+
+function makeGraph(template, prefix, doReset, renderAll) {
+  if (doReset) {
+    reset();
+  }
+  jsonUtil.createPseudoResources(template);
+
+  const resources = Object.keys(template.Resources);
+  try {
+    for (const resource of resources) {
+      const resObj = template.Resources[resource];
+      const type = resObj.Type;
+      types.add(type);
+      if (resObj.Template) {
+        nested.push(resource);
+        makeGraph(resObj.Template, resource, false, renderAll);
+      }
+      const dependencies = getDependencies(template, resource);
+      addnodes(
+        resource,
+        dependencies,
+        type,
+        template.Resources[resource],
+        prefix,
+        renderAll
+      );
+    }
+
+    for (const sourceVertex of nodes) {
+      for (const dependencyNode of sourceVertex.dependencies) {
+        for (const dependency of dependencyNode.value) {
+          const targets = nodes.filter(
+            (p) => p.id === prefix + "." + dependency.split(".").pop()
+          );
+          const targetVertex = targets[0];
+          if (!targetVertex) {
+            continue;
+          }
+          let from = sourceVertex.id;
+          let to = targetVertex.id;
+          addEdges(from, to, dependencyNode, sourceVertex);
+        }
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  } finally {
+  }
+  return { nodes, edges };
+}
+
+function addEdges(from, to, dependencyNode, fromNode) {
+  if (from && to) {
+    if (dependencyNode.path.indexOf("Properties.Events") > 0) {
+      edges.push({
+        to: from,
+        from: to,
+        label: "Invoke",
+      });
+    } else {
+      const descriptor = jsonUtil.pathToDescriptor(
+        dependencyNode.path,
+        filterConfig
+      );
+      if (
+        edges.filter(
+          (p) => p.from === from && p.to === to && p.label === descriptor
+        ).length
+      ) {
+        return;
+      }
+
+      edges.push({
+        from,
+        to,
+        label: descriptor,
+        color: {
+          color: colorHash.hex(descriptor),
+        },
+      });
+    }
+  }
+}
+
+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" && !renderAll,
+      type: type,
+      label: resource,
+      shape: "image",
+      image: createImage(type),
+      title: `${
+        useJson
+          ? JSON.stringify(resourceObject, null, 2)
+          : yamlDump(resourceObject).replace(/>/g, "").replace(/</g, "")
+      }`,
+      resource: resourceObject,
+    });
+  }
+}
+
+function createImage(resourceType) {
+  const resType = resourceType.startsWith("External") ? resourceType.match(/^.+\((.+)\)/)[1] : resourceType
+  var svg =
+    AWSIcon.getSVG(resType) ||
+    '<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"    width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g>   <rect x="15" y="15" fill="#FF9900" width="70" height="70"/>   <g>       <path fill="#FFFFFF" d="M39.4,47c0,0.6,0.1,1.1,0.2,1.4c0.1,0.4,0.3,0.7,0.5,1.2c0.1,0.1,0.1,0.3,0.1,0.4c0,0.2-0.1,0.3-0.3,0.5           l-1,0.7c-0.2,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3-0.1-0.5-0.2c-0.2-0.2-0.4-0.5-0.6-0.8c-0.2-0.3-0.3-0.6-0.5-1           c-1.3,1.5-2.9,2.2-4.8,2.2c-1.4,0-2.4-0.4-3.2-1.2c-0.8-0.8-1.2-1.8-1.2-3.1c0-1.4,0.5-2.5,1.5-3.3c1-0.8,2.3-1.3,4-1.3           c0.5,0,1.1,0,1.7,0.1c0.6,0.1,1.2,0.2,1.9,0.4V42c0-1.2-0.3-2.1-0.8-2.6c-0.5-0.5-1.4-0.8-2.6-0.8c-0.6,0-1.1,0.1-1.7,0.2           c-0.6,0.1-1.2,0.3-1.7,0.6c-0.3,0.1-0.5,0.2-0.6,0.2c-0.1,0-0.2,0-0.3,0c-0.2,0-0.3-0.2-0.3-0.5v-0.8c0-0.3,0-0.5,0.1-0.6           c0.1-0.1,0.2-0.2,0.5-0.3c0.6-0.3,1.2-0.5,2-0.7c0.8-0.2,1.6-0.3,2.5-0.3c1.9,0,3.3,0.4,4.2,1.3c0.9,0.9,1.3,2.2,1.3,4V47z            M32.8,49.5c0.5,0,1.1-0.1,1.7-0.3c0.6-0.2,1.1-0.5,1.5-1c0.3-0.3,0.4-0.6,0.6-1c0.1-0.4,0.2-0.9,0.2-1.4V45           c-0.5-0.1-1-0.2-1.5-0.3c-0.5-0.1-1-0.1-1.5-0.1c-1.1,0-1.9,0.2-2.4,0.7c-0.5,0.4-0.8,1.1-0.8,1.9c0,0.8,0.2,1.3,0.6,1.7           C31.5,49.3,32,49.5,32.8,49.5z M45.8,51.2c-0.3,0-0.5-0.1-0.6-0.2c-0.1-0.1-0.2-0.3-0.3-0.6L41,37.9c-0.1-0.3-0.1-0.5-0.1-0.7           c0-0.3,0.1-0.4,0.4-0.4h1.6c0.3,0,0.5,0.1,0.6,0.2c0.1,0.1,0.2,0.3,0.3,0.6l2.7,10.7l2.5-10.7c0.1-0.3,0.2-0.5,0.3-0.6           c0.1-0.1,0.3-0.2,0.7-0.2h1.3c0.3,0,0.5,0.1,0.7,0.2c0.1,0.1,0.2,0.3,0.3,0.6l2.6,10.9l2.8-10.9c0.1-0.3,0.2-0.5,0.3-0.6           c0.1-0.1,0.3-0.2,0.6-0.2h1.5c0.3,0,0.4,0.1,0.4,0.4c0,0.1,0,0.2,0,0.3c0,0.1-0.1,0.2-0.1,0.4l-3.9,12.5c-0.1,0.3-0.2,0.5-0.3,0.6           c-0.1,0.1-0.3,0.2-0.6,0.2h-1.4c-0.3,0-0.5-0.1-0.7-0.2c-0.1-0.1-0.2-0.3-0.3-0.7L50.7,40l-2.5,10.4c-0.1,0.3-0.2,0.5-0.3,0.7           c-0.1,0.1-0.4,0.2-0.7,0.2H45.8z M66.6,51.7c-0.9,0-1.7-0.1-2.5-0.3c-0.8-0.2-1.4-0.4-1.9-0.7c-0.3-0.2-0.4-0.3-0.5-0.5           c-0.1-0.2-0.1-0.3-0.1-0.5V49c0-0.3,0.1-0.5,0.4-0.5c0.1,0,0.2,0,0.3,0.1c0.1,0,0.2,0.1,0.4,0.2c0.5,0.2,1.1,0.4,1.8,0.6           c0.6,0.1,1.3,0.2,1.9,0.2c1,0,1.8-0.2,2.4-0.5c0.6-0.4,0.8-0.9,0.8-1.5c0-0.5-0.1-0.8-0.4-1.1c-0.3-0.3-0.8-0.6-1.6-0.9l-2.4-0.7           c-1.2-0.4-2.1-0.9-2.6-1.6c-0.5-0.7-0.8-1.5-0.8-2.4c0-0.7,0.1-1.3,0.4-1.8c0.3-0.5,0.7-1,1.2-1.3c0.5-0.4,1-0.6,1.7-0.8           c0.6-0.2,1.3-0.3,2-0.3c0.4,0,0.7,0,1.1,0.1c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.6,0.2,0.9,0.3c0.3,0.1,0.5,0.2,0.7,0.3           c0.2,0.1,0.4,0.3,0.5,0.4c0.1,0.1,0.1,0.3,0.1,0.5v0.8c0,0.3-0.1,0.5-0.4,0.5c-0.1,0-0.3-0.1-0.6-0.2c-0.9-0.4-2-0.6-3.1-0.6           c-0.9,0-1.6,0.2-2.2,0.5c-0.5,0.3-0.8,0.8-0.8,1.4c0,0.5,0.2,0.8,0.5,1.1c0.3,0.3,0.9,0.6,1.8,0.9l2.3,0.7c1.2,0.4,2,0.9,2.5,1.6           c0.5,0.7,0.8,1.4,0.8,2.3c0,0.7-0.1,1.3-0.4,1.9c-0.3,0.6-0.7,1-1.2,1.4c-0.5,0.4-1.1,0.7-1.8,0.9C68.2,51.6,67.5,51.7,66.6,51.7z           "/>       <g>           <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M69.7,59.5c-5.3,3.9-13.1,6-19.7,6c-9.3,0-17.8-3.5-24.1-9.2               c-0.5-0.5-0.1-1.1,0.5-0.7c6.9,4,15.4,6.4,24.1,6.4c5.9,0,12.4-1.2,18.4-3.8C69.8,57.9,70.6,58.9,69.7,59.5z"/>           <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M71.9,57c-0.7-0.9-4.5-0.4-6.2-0.2c-0.5,0.1-0.6-0.4-0.1-0.7               c3.1-2.1,8.1-1.5,8.6-0.8c0.6,0.7-0.2,5.7-3,8.1c-0.4,0.4-0.9,0.2-0.7-0.3C71.2,61.5,72.6,57.9,71.9,57z"/>       </g>   </g></g></svg>';
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+}
+
+function getDependencies(template, resource) {
+  const dependencies = [];
+  jsonUtil.findAllValues(template.Resources[resource], dependencies, "Ref");
+  jsonUtil.findAllValues(template.Resources[resource], dependencies, "Fn::Sub");
+  jsonUtil.findAllValues(
+    template.Resources[resource],
+    dependencies,
+    "Fn::GetAtt"
+  );
+  jsonUtil.findAllValues(
+    template.Resources[resource],
+    dependencies,
+    "Fn::ImportValue"
+  );
+
+  for (const dependency of dependencies) {
+    dependency.value = dependency.value.filter((p) => {
+      const split = p.split(".");
+      if (split.length === 2 && templateCache.templates[split[0]]) {
+        return templateCache.templates[split[0]].Resources[split[1]];
+      }
+      return template.Resources[p];
+    });
+  }
+  return dependencies;
+}
+
+async function renderTemplate(
+  template,
+  isJson,
+  filePath,
+  ciMode,
+  reset,
+  standaloneIndex,
+  renderAll
+) {
+  useJson = isJson;
+  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())};
+  var types = ${JSON.stringify(Array.from(types).sort())};
+  var showSidebar = ${!ciMode};
+  `;
+  const uiPath = filePath || path.join(tempDirectory, "cdk4j-diagram");
+  if (!fs.existsSync(uiPath)) {
+    fs.mkdirSync(uiPath);
+  }
+  if (standaloneIndex) {
+    fs.readFile(path.join(__dirname, "ui", "index_standalone.template"), 'utf8', function (err, data) {
+      if (err) {
+        return console.log(err);
+      }
+      var result = data.replace(/%DATA_JS%/g, fileContent);
+
+      fs.writeFile(path.join(uiPath, "index.html"), result, 'utf8', function (err) {
+        if (err) return console.log(err);
+      });
+  });
+  }
+  else
+  {
+  fs.copyFileSync(
+    path.join(__dirname, "ui", "index.html"),
+    path.join(uiPath, "index.html")
+  );
+  fs.copyFileSync(
+    path.join(__dirname, "ui", "icons.js"),
+    path.join(uiPath, "icons.js")
+  );
+  fs.writeFileSync(path.join(uiPath, "data.js"), fileContent);
+  }
+  if (!ciMode) {
+    open(path.join(uiPath, "index.html"));
+  }
+}
+
+module.exports = {
+  renderTemplate,
+  reset,
+  makeGraph
+};