update the theme

1 files changed, 814 insertions, 0 deletions

diff --git a/themes/blowfish/assets/lib/mermaid/flowchart-elk-definition-ae0efee6.js b/themes/blowfish/assets/lib/mermaid/flowchart-elk-definition-ae0efee6.js
new file mode 100644
index 0000000..07e6601
--- /dev/null
+++ b/themes/blowfish/assets/lib/mermaid/flowchart-elk-definition-ae0efee6.js
@@ -0,0 +1,814 @@
+import { d as db, p as parser } from "./flowDb-c1833063.js";
+import { select, curveLinear, line } from "d3";
+import { a as insertMarkers, e as insertNode, l as labelHelper, f as insertEdgeLabel, k as getLineFunctionsWithOffset, m as addEdgeMarkers } from "./edges-066a5561.js";
+import { l as log, F as getConfig, o as setupGraphViewbox, k as getStylesFromArray, n as interpolateToCurve, e as common } from "./mermaid-6dc72991.js";
+import ELK from "elkjs/lib/elk.bundled.js";
+import "./createText-ca0c5216.js";
+import "mdast-util-from-markdown";
+import "ts-dedent";
+import "dayjs";
+import "@braintree/sanitize-url";
+import "dompurify";
+import "khroma";
+import "lodash-es/memoize.js";
+import "lodash-es/merge.js";
+import "stylis";
+import "lodash-es/isEmpty.js";
+const findCommonAncestor = (id1, id2, treeData) => {
+  const { parentById } = treeData;
+  const visited = /* @__PURE__ */ new Set();
+  let currentId = id1;
+  while (currentId) {
+    visited.add(currentId);
+    if (currentId === id2) {
+      return currentId;
+    }
+    currentId = parentById[currentId];
+  }
+  currentId = id2;
+  while (currentId) {
+    if (visited.has(currentId)) {
+      return currentId;
+    }
+    currentId = parentById[currentId];
+  }
+  return "root";
+};
+const elk = new ELK();
+let portPos = {};
+const conf = {};
+let nodeDb = {};
+const addVertices = async function(vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
+  const svg = root.select(`[id="${svgId}"]`);
+  const nodes = svg.insert("g").attr("class", "nodes");
+  const keys = Object.keys(vert);
+  await Promise.all(
+    keys.map(async function(id) {
+      const vertex = vert[id];
+      let classStr = "default";
+      if (vertex.classes.length > 0) {
+        classStr = vertex.classes.join(" ");
+      }
+      classStr = classStr + " flowchart-label";
+      const styles2 = getStylesFromArray(vertex.styles);
+      let vertexText = vertex.text !== void 0 ? vertex.text : vertex.id;
+      const labelData = { width: 0, height: 0 };
+      const ports = [
+        {
+          id: vertex.id + "-west",
+          layoutOptions: {
+            "port.side": "WEST"
+          }
+        },
+        {
+          id: vertex.id + "-east",
+          layoutOptions: {
+            "port.side": "EAST"
+          }
+        },
+        {
+          id: vertex.id + "-south",
+          layoutOptions: {
+            "port.side": "SOUTH"
+          }
+        },
+        {
+          id: vertex.id + "-north",
+          layoutOptions: {
+            "port.side": "NORTH"
+          }
+        }
+      ];
+      let radius = 0;
+      let _shape = "";
+      let layoutOptions = {};
+      switch (vertex.type) {
+        case "round":
+          radius = 5;
+          _shape = "rect";
+          break;
+        case "square":
+          _shape = "rect";
+          break;
+        case "diamond":
+          _shape = "question";
+          layoutOptions = {
+            portConstraints: "FIXED_SIDE"
+          };
+          break;
+        case "hexagon":
+          _shape = "hexagon";
+          break;
+        case "odd":
+          _shape = "rect_left_inv_arrow";
+          break;
+        case "lean_right":
+          _shape = "lean_right";
+          break;
+        case "lean_left":
+          _shape = "lean_left";
+          break;
+        case "trapezoid":
+          _shape = "trapezoid";
+          break;
+        case "inv_trapezoid":
+          _shape = "inv_trapezoid";
+          break;
+        case "odd_right":
+          _shape = "rect_left_inv_arrow";
+          break;
+        case "circle":
+          _shape = "circle";
+          break;
+        case "ellipse":
+          _shape = "ellipse";
+          break;
+        case "stadium":
+          _shape = "stadium";
+          break;
+        case "subroutine":
+          _shape = "subroutine";
+          break;
+        case "cylinder":
+          _shape = "cylinder";
+          break;
+        case "group":
+          _shape = "rect";
+          break;
+        case "doublecircle":
+          _shape = "doublecircle";
+          break;
+        default:
+          _shape = "rect";
+      }
+      const node = {
+        labelStyle: styles2.labelStyle,
+        shape: _shape,
+        labelText: vertexText,
+        labelType: vertex.labelType,
+        rx: radius,
+        ry: radius,
+        class: classStr,
+        style: styles2.style,
+        id: vertex.id,
+        link: vertex.link,
+        linkTarget: vertex.linkTarget,
+        tooltip: diagObj.db.getTooltip(vertex.id) || "",
+        domId: diagObj.db.lookUpDomId(vertex.id),
+        haveCallback: vertex.haveCallback,
+        width: vertex.type === "group" ? 500 : void 0,
+        dir: vertex.dir,
+        type: vertex.type,
+        props: vertex.props,
+        padding: getConfig().flowchart.padding
+      };
+      let boundingBox;
+      let nodeEl;
+      if (node.type !== "group") {
+        nodeEl = await insertNode(nodes, node, vertex.dir);
+        boundingBox = nodeEl.node().getBBox();
+      } else {
+        doc.createElementNS("http://www.w3.org/2000/svg", "text");
+        const { shapeSvg, bbox } = await labelHelper(nodes, node, void 0, true);
+        labelData.width = bbox.width;
+        labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
+        labelData.height = bbox.height;
+        labelData.labelNode = shapeSvg.node();
+        node.labelData = labelData;
+      }
+      const data = {
+        id: vertex.id,
+        ports: vertex.type === "diamond" ? ports : [],
+        // labelStyle: styles.labelStyle,
+        // shape: _shape,
+        layoutOptions,
+        labelText: vertexText,
+        labelData,
+        // labels: [{ text: vertexText }],
+        // rx: radius,
+        // ry: radius,
+        // class: classStr,
+        // style: styles.style,
+        // link: vertex.link,
+        // linkTarget: vertex.linkTarget,
+        // tooltip: diagObj.db.getTooltip(vertex.id) || '',
+        domId: diagObj.db.lookUpDomId(vertex.id),
+        // haveCallback: vertex.haveCallback,
+        width: boundingBox == null ? void 0 : boundingBox.width,
+        height: boundingBox == null ? void 0 : boundingBox.height,
+        // dir: vertex.dir,
+        type: vertex.type,
+        // props: vertex.props,
+        // padding: getConfig().flowchart.padding,
+        // boundingBox,
+        el: nodeEl,
+        parent: parentLookupDb.parentById[vertex.id]
+      };
+      nodeDb[node.id] = data;
+    })
+  );
+  return graph;
+};
+const getNextPosition = (position, edgeDirection, graphDirection) => {
+  const portPos2 = {
+    TB: {
+      in: {
+        north: "north"
+      },
+      out: {
+        south: "west",
+        west: "east",
+        east: "south"
+      }
+    },
+    LR: {
+      in: {
+        west: "west"
+      },
+      out: {
+        east: "south",
+        south: "north",
+        north: "east"
+      }
+    },
+    RL: {
+      in: {
+        east: "east"
+      },
+      out: {
+        west: "north",
+        north: "south",
+        south: "west"
+      }
+    },
+    BT: {
+      in: {
+        south: "south"
+      },
+      out: {
+        north: "east",
+        east: "west",
+        west: "north"
+      }
+    }
+  };
+  portPos2.TD = portPos2.TB;
+  return portPos2[graphDirection][edgeDirection][position];
+};
+const getNextPort = (node, edgeDirection, graphDirection) => {
+  log.info("getNextPort", { node, edgeDirection, graphDirection });
+  if (!portPos[node]) {
+    switch (graphDirection) {
+      case "TB":
+      case "TD":
+        portPos[node] = {
+          inPosition: "north",
+          outPosition: "south"
+        };
+        break;
+      case "BT":
+        portPos[node] = {
+          inPosition: "south",
+          outPosition: "north"
+        };
+        break;
+      case "RL":
+        portPos[node] = {
+          inPosition: "east",
+          outPosition: "west"
+        };
+        break;
+      case "LR":
+        portPos[node] = {
+          inPosition: "west",
+          outPosition: "east"
+        };
+        break;
+    }
+  }
+  const result = edgeDirection === "in" ? portPos[node].inPosition : portPos[node].outPosition;
+  if (edgeDirection === "in") {
+    portPos[node].inPosition = getNextPosition(
+      portPos[node].inPosition,
+      edgeDirection,
+      graphDirection
+    );
+  } else {
+    portPos[node].outPosition = getNextPosition(
+      portPos[node].outPosition,
+      edgeDirection,
+      graphDirection
+    );
+  }
+  return result;
+};
+const getEdgeStartEndPoint = (edge, dir) => {
+  let source = edge.start;
+  let target = edge.end;
+  const sourceId = source;
+  const targetId = target;
+  const startNode = nodeDb[source];
+  const endNode = nodeDb[target];
+  if (!startNode || !endNode) {
+    return { source, target };
+  }
+  if (startNode.type === "diamond") {
+    source = `${source}-${getNextPort(source, "out", dir)}`;
+  }
+  if (endNode.type === "diamond") {
+    target = `${target}-${getNextPort(target, "in", dir)}`;
+  }
+  return { source, target, sourceId, targetId };
+};
+const addEdges = function(edges, diagObj, graph, svg) {
+  log.info("abc78 edges = ", edges);
+  const labelsEl = svg.insert("g").attr("class", "edgeLabels");
+  let linkIdCnt = {};
+  let dir = diagObj.db.getDirection();
+  let defaultStyle;
+  let defaultLabelStyle;
+  if (edges.defaultStyle !== void 0) {
+    const defaultStyles = getStylesFromArray(edges.defaultStyle);
+    defaultStyle = defaultStyles.style;
+    defaultLabelStyle = defaultStyles.labelStyle;
+  }
+  edges.forEach(function(edge) {
+    const linkIdBase = "L-" + edge.start + "-" + edge.end;
+    if (linkIdCnt[linkIdBase] === void 0) {
+      linkIdCnt[linkIdBase] = 0;
+      log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]);
+    } else {
+      linkIdCnt[linkIdBase]++;
+      log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]);
+    }
+    let linkId = linkIdBase + "-" + linkIdCnt[linkIdBase];
+    log.info("abc78 new link id to be used is", linkIdBase, linkId, linkIdCnt[linkIdBase]);
+    const linkNameStart = "LS-" + edge.start;
+    const linkNameEnd = "LE-" + edge.end;
+    const edgeData = { style: "", labelStyle: "" };
+    edgeData.minlen = edge.length || 1;
+    if (edge.type === "arrow_open") {
+      edgeData.arrowhead = "none";
+    } else {
+      edgeData.arrowhead = "normal";
+    }
+    edgeData.arrowTypeStart = "arrow_open";
+    edgeData.arrowTypeEnd = "arrow_open";
+    switch (edge.type) {
+      case "double_arrow_cross":
+        edgeData.arrowTypeStart = "arrow_cross";
+      case "arrow_cross":
+        edgeData.arrowTypeEnd = "arrow_cross";
+        break;
+      case "double_arrow_point":
+        edgeData.arrowTypeStart = "arrow_point";
+      case "arrow_point":
+        edgeData.arrowTypeEnd = "arrow_point";
+        break;
+      case "double_arrow_circle":
+        edgeData.arrowTypeStart = "arrow_circle";
+      case "arrow_circle":
+        edgeData.arrowTypeEnd = "arrow_circle";
+        break;
+    }
+    let style = "";
+    let labelStyle = "";
+    switch (edge.stroke) {
+      case "normal":
+        style = "fill:none;";
+        if (defaultStyle !== void 0) {
+          style = defaultStyle;
+        }
+        if (defaultLabelStyle !== void 0) {
+          labelStyle = defaultLabelStyle;
+        }
+        edgeData.thickness = "normal";
+        edgeData.pattern = "solid";
+        break;
+      case "dotted":
+        edgeData.thickness = "normal";
+        edgeData.pattern = "dotted";
+        edgeData.style = "fill:none;stroke-width:2px;stroke-dasharray:3;";
+        break;
+      case "thick":
+        edgeData.thickness = "thick";
+        edgeData.pattern = "solid";
+        edgeData.style = "stroke-width: 3.5px;fill:none;";
+        break;
+    }
+    if (edge.style !== void 0) {
+      const styles2 = getStylesFromArray(edge.style);
+      style = styles2.style;
+      labelStyle = styles2.labelStyle;
+    }
+    edgeData.style = edgeData.style += style;
+    edgeData.labelStyle = edgeData.labelStyle += labelStyle;
+    if (edge.interpolate !== void 0) {
+      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
+    } else if (edges.defaultInterpolate !== void 0) {
+      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
+    } else {
+      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
+    }
+    if (edge.text === void 0) {
+      if (edge.style !== void 0) {
+        edgeData.arrowheadStyle = "fill: #333";
+      }
+    } else {
+      edgeData.arrowheadStyle = "fill: #333";
+      edgeData.labelpos = "c";
+    }
+    edgeData.labelType = edge.labelType;
+    edgeData.label = edge.text.replace(common.lineBreakRegex, "\n");
+    if (edge.style === void 0) {
+      edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none;";
+    }
+    edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:");
+    edgeData.id = linkId;
+    edgeData.classes = "flowchart-link " + linkNameStart + " " + linkNameEnd;
+    const labelEl = insertEdgeLabel(labelsEl, edgeData);
+    const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
+    log.debug("abc78 source and target", source, target);
+    graph.edges.push({
+      id: "e" + edge.start + edge.end,
+      sources: [source],
+      targets: [target],
+      sourceId,
+      targetId,
+      labelEl,
+      labels: [
+        {
+          width: edgeData.width,
+          height: edgeData.height,
+          orgWidth: edgeData.width,
+          orgHeight: edgeData.height,
+          text: edgeData.label,
+          layoutOptions: {
+            "edgeLabels.inline": "true",
+            "edgeLabels.placement": "CENTER"
+          }
+        }
+      ],
+      edgeData
+    });
+  });
+  return graph;
+};
+const addMarkersToEdge = function(svgPath, edgeData, diagramType, arrowMarkerAbsolute, id) {
+  let url = "";
+  if (arrowMarkerAbsolute) {
+    url = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
+    url = url.replace(/\(/g, "\\(");
+    url = url.replace(/\)/g, "\\)");
+  }
+  addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
+};
+const getClasses = function(text, diagObj) {
+  log.info("Extracting classes");
+  return diagObj.db.getClasses();
+};
+const addSubGraphs = function(db2) {
+  const parentLookupDb = { parentById: {}, childrenById: {} };
+  const subgraphs = db2.getSubGraphs();
+  log.info("Subgraphs - ", subgraphs);
+  subgraphs.forEach(function(subgraph) {
+    subgraph.nodes.forEach(function(node) {
+      parentLookupDb.parentById[node] = subgraph.id;
+      if (parentLookupDb.childrenById[subgraph.id] === void 0) {
+        parentLookupDb.childrenById[subgraph.id] = [];
+      }
+      parentLookupDb.childrenById[subgraph.id].push(node);
+    });
+  });
+  subgraphs.forEach(function(subgraph) {
+    ({ id: subgraph.id });
+    if (parentLookupDb.parentById[subgraph.id] !== void 0) {
+      parentLookupDb.parentById[subgraph.id];
+    }
+  });
+  return parentLookupDb;
+};
+const calcOffset = function(src, dest, parentLookupDb) {
+  const ancestor = findCommonAncestor(src, dest, parentLookupDb);
+  if (ancestor === void 0 || ancestor === "root") {
+    return { x: 0, y: 0 };
+  }
+  const ancestorOffset = nodeDb[ancestor].offset;
+  return { x: ancestorOffset.posX, y: ancestorOffset.posY };
+};
+const insertEdge = function(edgesEl, edge, edgeData, diagObj, parentLookupDb, id) {
+  const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
+  const src = edge.sections[0].startPoint;
+  const dest = edge.sections[0].endPoint;
+  const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
+  const segPoints = segments.map((segment) => [segment.x + offset.x, segment.y + offset.y]);
+  const points = [
+    [src.x + offset.x, src.y + offset.y],
+    ...segPoints,
+    [dest.x + offset.x, dest.y + offset.y]
+  ];
+  const { x, y } = getLineFunctionsWithOffset(edge.edgeData);
+  const curve = line().x(x).y(y).curve(curveLinear);
+  const edgePath = edgesEl.insert("path").attr("d", curve(points)).attr("class", "path " + edgeData.classes).attr("fill", "none");
+  const edgeG = edgesEl.insert("g").attr("class", "edgeLabel");
+  const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl));
+  const box = edgeWithLabel.node().firstChild.getBoundingClientRect();
+  edgeWithLabel.attr("width", box.width);
+  edgeWithLabel.attr("height", box.height);
+  edgeG.attr(
+    "transform",
+    `translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})`
+  );
+  addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute, id);
+};
+const insertChildren = (nodeArray, parentLookupDb) => {
+  nodeArray.forEach((node) => {
+    if (!node.children) {
+      node.children = [];
+    }
+    const childIds = parentLookupDb.childrenById[node.id];
+    if (childIds) {
+      childIds.forEach((childId) => {
+        node.children.push(nodeDb[childId]);
+      });
+    }
+    insertChildren(node.children, parentLookupDb);
+  });
+};
+const draw = async function(text, id, _version, diagObj) {
+  var _a;
+  diagObj.db.clear();
+  nodeDb = {};
+  portPos = {};
+  diagObj.db.setGen("gen-2");
+  diagObj.parser.parse(text);
+  const renderEl = select("body").append("div").attr("style", "height:400px").attr("id", "cy");
+  let graph = {
+    id: "root",
+    layoutOptions: {
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "org.eclipse.elk.padding": "[top=100, left=100, bottom=110, right=110]",
+      "elk.layered.spacing.edgeNodeBetweenLayers": "30",
+      // 'elk.layered.mergeEdges': 'true',
+      "elk.direction": "DOWN"
+      // 'elk.ports.sameLayerEdges': true,
+      // 'nodePlacement.strategy': 'SIMPLE',
+    },
+    children: [],
+    edges: []
+  };
+  log.info("Drawing flowchart using v3 renderer", elk);
+  let dir = diagObj.db.getDirection();
+  switch (dir) {
+    case "BT":
+      graph.layoutOptions["elk.direction"] = "UP";
+      break;
+    case "TB":
+      graph.layoutOptions["elk.direction"] = "DOWN";
+      break;
+    case "LR":
+      graph.layoutOptions["elk.direction"] = "RIGHT";
+      break;
+    case "RL":
+      graph.layoutOptions["elk.direction"] = "LEFT";
+      break;
+  }
+  const { securityLevel, flowchart: conf2 } = getConfig();
+  let sandboxElement;
+  if (securityLevel === "sandbox") {
+    sandboxElement = select("#i" + id);
+  }
+  const root = securityLevel === "sandbox" ? select(sandboxElement.nodes()[0].contentDocument.body) : select("body");
+  const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
+  const svg = root.select(`[id="${id}"]`);
+  const markers = ["point", "circle", "cross"];
+  insertMarkers(svg, markers, diagObj.type, id);
+  const vert = diagObj.db.getVertices();
+  let subG;
+  const subGraphs = diagObj.db.getSubGraphs();
+  log.info("Subgraphs - ", subGraphs);
+  for (let i = subGraphs.length - 1; i >= 0; i--) {
+    subG = subGraphs[i];
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      "group",
+      void 0,
+      subG.classes,
+      subG.dir
+    );
+  }
+  const subGraphsEl = svg.insert("g").attr("class", "subgraphs");
+  const parentLookupDb = addSubGraphs(diagObj.db);
+  graph = await addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
+  const edgesEl = svg.insert("g").attr("class", "edges edgePath");
+  const edges = diagObj.db.getEdges();
+  graph = addEdges(edges, diagObj, graph, svg);
+  const nodes = Object.keys(nodeDb);
+  nodes.forEach((nodeId) => {
+    const node = nodeDb[nodeId];
+    if (!node.parent) {
+      graph.children.push(node);
+    }
+    if (parentLookupDb.childrenById[nodeId] !== void 0) {
+      node.labels = [
+        {
+          text: node.labelText,
+          layoutOptions: {
+            "nodeLabels.placement": "[H_CENTER, V_TOP, INSIDE]"
+          },
+          width: node.labelData.width,
+          height: node.labelData.height
+          // width: 100,
+          // height: 100,
+        }
+      ];
+      delete node.x;
+      delete node.y;
+      delete node.width;
+      delete node.height;
+    }
+  });
+  insertChildren(graph.children, parentLookupDb);
+  log.info("after layout", JSON.stringify(graph, null, 2));
+  const g = await elk.layout(graph);
+  drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
+  log.info("after layout", g);
+  (_a = g.edges) == null ? void 0 : _a.map((edge) => {
+    insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);
+  });
+  setupGraphViewbox({}, svg, conf2.diagramPadding, conf2.useMaxWidth);
+  renderEl.remove();
+};
+const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
+  nodeArray.forEach(function(node) {
+    if (node) {
+      nodeDb[node.id].offset = {
+        posX: node.x + relX,
+        posY: node.y + relY,
+        x: relX,
+        y: relY,
+        depth,
+        width: node.width,
+        height: node.height
+      };
+      if (node.type === "group") {
+        const subgraphEl = subgraphsEl.insert("g").attr("class", "subgraph");
+        subgraphEl.insert("rect").attr("class", "subgraph subgraph-lvl-" + depth % 5 + " node").attr("x", node.x + relX).attr("y", node.y + relY).attr("width", node.width).attr("height", node.height);
+        const label = subgraphEl.insert("g").attr("class", "label");
+        const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
+        label.attr(
+          "transform",
+          `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${node.labels[0].y + relY + node.y + 3})`
+        );
+        label.node().appendChild(node.labelData.labelNode);
+        log.info("Id (UGH)= ", node.type, node.labels);
+      } else {
+        log.info("Id (UGH)= ", node.id);
+        node.el.attr(
+          "transform",
+          `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
+        );
+      }
+    }
+  });
+  nodeArray.forEach(function(node) {
+    if (node && node.type === "group") {
+      drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, diagObj, depth + 1);
+    }
+  });
+};
+const renderer = {
+  getClasses,
+  draw
+};
+const genSections = (options) => {
+  let sections = "";
+  for (let i = 0; i < 5; i++) {
+    sections += `
+      .subgraph-lvl-${i} {
+        fill: ${options[`surface${i}`]};
+        stroke: ${options[`surfacePeer${i}`]};
+      }
+    `;
+  }
+  return sections;
+};
+const getStyles = (options) => `.label {
+    font-family: ${options.fontFamily};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+  .cluster-label text {
+    fill: ${options.titleColor};
+  }
+  .cluster-label span {
+    color: ${options.titleColor};
+  }
+
+  .label text,span {
+    fill: ${options.nodeTextColor || options.textColor};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 2.0px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.85;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.clusterBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  .cluster span {
+    color: ${options.titleColor};
+  }
+  /* .cluster div {
+    color: ${options.titleColor};
+  } */
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: ${options.fontFamily};
+    font-size: 12px;
+    background: ${options.tertiaryColor};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .flowchartTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }
+  .subgraph {
+    stroke-width:2;
+    rx:3;
+  }
+  // .subgraph-lvl-1 {
+  //   fill:#ccc;
+  //   // stroke:black;
+  // }
+
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+
+  ${genSections(options)}
+`;
+const styles = getStyles;
+const diagram = {
+  db,
+  renderer,
+  parser,
+  styles
+};
+export {
+  diagram
+};