jekyll-ham 1.0.4 → 1.1.1

data/assets/mermaid/stateDiagram-fca82b5b.js

@@ -0,0 +1,275 @@
+import { d as N, p as C, s as R } from "./styles-cacbff60.js";
+import { c as t, F as U, A as F, f as T, l as b, j as H, k as O } from "./mermaid-9f2aa176.js";
+import { G as X } from "./graph-0ee63739.js";
+import { l as J } from "./layout-fd473db2.js";
+import { l as Y } from "./line-24d93f1b.js";
+import "./array-2ff2c7a6.js";
+import "./path-428ebac9.js";
+const L = {}, $ = (e, i) => {
+  L[e] = i;
+}, v = (e) => L[e], P = () => Object.keys(L), I = () => P().length, _ = {
+  get: v,
+  set: $,
+  keys: P,
+  size: I
+}, j = (e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), q = (e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), Z = (e, i) => {
+  const o = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 2 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), d = o.node().getBBox();
+  return e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", d.width + 2 * t().state.padding).attr("height", d.height + 2 * t().state.padding).attr("rx", t().state.radius), o;
+}, K = (e, i) => {
+  const o = function(l, m, w) {
+    const k = l.append("tspan").attr("x", 2 * t().state.padding).text(m);
+    w || k.attr("dy", t().state.textHeight);
+  }, s = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 1.3 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.descriptions[0]).node().getBBox(), g = s.height, p = e.append("text").attr("x", t().state.padding).attr(
+    "y",
+    g + t().state.padding * 0.4 + t().state.dividerMargin + t().state.textHeight
+  ).attr("class", "state-description");
+  let a = !0, r = !0;
+  i.descriptions.forEach(function(l) {
+    a || (o(p, l, r), r = !1), a = !1;
+  });
+  const y = e.append("line").attr("x1", t().state.padding).attr("y1", t().state.padding + g + t().state.dividerMargin / 2).attr("y2", t().state.padding + g + t().state.dividerMargin / 2).attr("class", "descr-divider"), x = p.node().getBBox(), c = Math.max(x.width, s.width);
+  return y.attr("x2", c + 3 * t().state.padding), e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", c + 2 * t().state.padding).attr("height", x.height + g + 2 * t().state.padding).attr("rx", t().state.radius), e;
+}, Q = (e, i, o) => {
+  const d = t().state.padding, s = 2 * t().state.padding, g = e.node().getBBox(), p = g.width, a = g.x, r = e.append("text").attr("x", 0).attr("y", t().state.titleShift).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), x = r.node().getBBox().width + s;
+  let c = Math.max(x, p);
+  c === p && (c = c + s);
+  let l;
+  const m = e.node().getBBox();
+  i.doc, l = a - d, x > p && (l = (p - c) / 2 + d), Math.abs(a - m.x) < d && x > p && (l = a - (x - p) / 2);
+  const w = 1 - t().state.textHeight;
+  return e.insert("rect", ":first-child").attr("x", l).attr("y", w).attr("class", o ? "alt-composit" : "composit").attr("width", c).attr(
+    "height",
+    m.height + t().state.textHeight + t().state.titleShift + 1
+  ).attr("rx", "0"), r.attr("x", l + d), x <= p && r.attr("x", a + (c - s) / 2 - x / 2 + d), e.insert("rect", ":first-child").attr("x", l).attr(
+    "y",
+    t().state.titleShift - t().state.textHeight - t().state.padding
+  ).attr("width", c).attr("height", t().state.textHeight * 3).attr("rx", t().state.radius), e.insert("rect", ":first-child").attr("x", l).attr(
+    "y",
+    t().state.titleShift - t().state.textHeight - t().state.padding
+  ).attr("width", c).attr("height", m.height + 3 + 2 * t().state.textHeight).attr("rx", t().state.radius), e;
+}, V = (e) => (e.append("circle").attr("class", "end-state-outer").attr("r", t().state.sizeUnit + t().state.miniPadding).attr(
+  "cx",
+  t().state.padding + t().state.sizeUnit + t().state.miniPadding
+).attr(
+  "cy",
+  t().state.padding + t().state.sizeUnit + t().state.miniPadding
+), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), D = (e, i) => {
+  let o = t().state.forkWidth, d = t().state.forkHeight;
+  if (i.parentId) {
+    let s = o;
+    o = d, d = s;
+  }
+  return e.append("rect").style("stroke", "black").style("fill", "black").attr("width", o).attr("height", d).attr("x", t().state.padding).attr("y", t().state.padding);
+}, tt = (e, i, o, d) => {
+  let s = 0;
+  const g = d.append("text");
+  g.style("text-anchor", "start"), g.attr("class", "noteText");
+  let p = e.replace(/\r\n/g, "<br/>");
+  p = p.replace(/\n/g, "<br/>");
+  const a = p.split(T.lineBreakRegex);
+  let r = 1.25 * t().state.noteMargin;
+  for (const y of a) {
+    const x = y.trim();
+    if (x.length > 0) {
+      const c = g.append("tspan");
+      if (c.text(x), r === 0) {
+        const l = c.node().getBBox();
+        r += l.height;
+      }
+      s += r, c.attr("x", i + t().state.noteMargin), c.attr("y", o + s + 1.25 * t().state.noteMargin);
+    }
+  }
+  return { textWidth: g.node().getBBox().width, textHeight: s };
+}, et = (e, i) => {
+  i.attr("class", "state-note");
+  const o = i.append("rect").attr("x", 0).attr("y", t().state.padding), d = i.append("g"), { textWidth: s, textHeight: g } = tt(e, 0, 0, d);
+  return o.attr("height", g + 2 * t().state.noteMargin), o.attr("width", s + t().state.noteMargin * 2), o;
+}, A = function(e, i) {
+  const o = i.id, d = {
+    id: o,
+    label: i.id,
+    width: 0,
+    height: 0
+  }, s = e.append("g").attr("id", o).attr("class", "stateGroup");
+  i.type === "start" && j(s), i.type === "end" && V(s), (i.type === "fork" || i.type === "join") && D(s, i), i.type === "note" && et(i.note.text, s), i.type === "divider" && q(s), i.type === "default" && i.descriptions.length === 0 && Z(s, i), i.type === "default" && i.descriptions.length > 0 && K(s, i);
+  const g = s.node().getBBox();
+  return d.width = g.width + 2 * t().state.padding, d.height = g.height + 2 * t().state.padding, _.set(o, d), d;
+};
+let G = 0;
+const at = function(e, i, o) {
+  const d = function(r) {
+    switch (r) {
+      case N.relationType.AGGREGATION:
+        return "aggregation";
+      case N.relationType.EXTENSION:
+        return "extension";
+      case N.relationType.COMPOSITION:
+        return "composition";
+      case N.relationType.DEPENDENCY:
+        return "dependency";
+    }
+  };
+  i.points = i.points.filter((r) => !Number.isNaN(r.y));
+  const s = i.points, g = Y().x(function(r) {
+    return r.x;
+  }).y(function(r) {
+    return r.y;
+  }).curve(U), p = e.append("path").attr("d", g(s)).attr("id", "edge" + G).attr("class", "transition");
+  let a = "";
+  if (t().state.arrowMarkerAbsolute && (a = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search, a = a.replace(/\(/g, "\\("), a = a.replace(/\)/g, "\\)")), p.attr(
+    "marker-end",
+    "url(" + a + "#" + d(N.relationType.DEPENDENCY) + "End)"
+  ), o.title !== void 0) {
+    const r = e.append("g").attr("class", "stateLabel"), { x: y, y: x } = F.calcLabelPosition(i.points), c = T.getRows(o.title);
+    let l = 0;
+    const m = [];
+    let w = 0, k = 0;
+    for (let u = 0; u <= c.length; u++) {
+      const h = r.append("text").attr("text-anchor", "middle").text(c[u]).attr("x", y).attr("y", x + l), f = h.node().getBBox();
+      w = Math.max(w, f.width), k = Math.min(k, f.x), b.info(f.x, y, x + l), l === 0 && (l = h.node().getBBox().height, b.info("Title height", l, x)), m.push(h);
+    }
+    let E = l * c.length;
+    if (c.length > 1) {
+      const u = (c.length - 1) * l * 0.5;
+      m.forEach((h, f) => h.attr("y", x + f * l - u)), E = l * c.length;
+    }
+    const n = r.node().getBBox();
+    r.insert("rect", ":first-child").attr("class", "box").attr("x", y - w / 2 - t().state.padding / 2).attr("y", x - E / 2 - t().state.padding / 2 - 3.5).attr("width", w + t().state.padding).attr("height", E + t().state.padding), b.info(n);
+  }
+  G++;
+};
+let B;
+const z = {}, it = function() {
+}, nt = function(e) {
+  e.append("defs").append("marker").attr("id", "dependencyEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
+}, st = function(e, i, o, d) {
+  B = t().state;
+  const s = t().securityLevel;
+  let g;
+  s === "sandbox" && (g = H("#i" + i));
+  const p = s === "sandbox" ? H(g.nodes()[0].contentDocument.body) : H("body"), a = s === "sandbox" ? g.nodes()[0].contentDocument : document;
+  b.debug("Rendering diagram " + e);
+  const r = p.select(`[id='${i}']`);
+  nt(r);
+  const y = d.db.getRootDoc();
+  W(y, r, void 0, !1, p, a, d);
+  const x = B.padding, c = r.node().getBBox(), l = c.width + x * 2, m = c.height + x * 2, w = l * 1.75;
+  O(r, m, w, B.useMaxWidth), r.attr(
+    "viewBox",
+    `${c.x - B.padding}  ${c.y - B.padding} ` + l + " " + m
+  );
+}, rt = (e) => e ? e.length * B.fontSizeFactor : 1, W = (e, i, o, d, s, g, p) => {
+  const a = new X({
+    compound: !0,
+    multigraph: !0
+  });
+  let r, y = !0;
+  for (r = 0; r < e.length; r++)
+    if (e[r].stmt === "relation") {
+      y = !1;
+      break;
+    }
+  o ? a.setGraph({
+    rankdir: "LR",
+    multigraph: !0,
+    compound: !0,
+    // acyclicer: 'greedy',
+    ranker: "tight-tree",
+    ranksep: y ? 1 : B.edgeLengthFactor,
+    nodeSep: y ? 1 : 50,
+    isMultiGraph: !0
+    // ranksep: 5,
+    // nodesep: 1
+  }) : a.setGraph({
+    rankdir: "TB",
+    multigraph: !0,
+    compound: !0,
+    // isCompound: true,
+    // acyclicer: 'greedy',
+    // ranker: 'longest-path'
+    ranksep: y ? 1 : B.edgeLengthFactor,
+    nodeSep: y ? 1 : 50,
+    ranker: "tight-tree",
+    // ranker: 'network-simplex'
+    isMultiGraph: !0
+  }), a.setDefaultEdgeLabel(function() {
+    return {};
+  }), p.db.extract(e);
+  const x = p.db.getStates(), c = p.db.getRelations(), l = Object.keys(x);
+  for (const n of l) {
+    const u = x[n];
+    o && (u.parentId = o);
+    let h;
+    if (u.doc) {
+      let f = i.append("g").attr("id", u.id).attr("class", "stateGroup");
+      h = W(u.doc, f, u.id, !d, s, g, p);
+      {
+        f = Q(f, u, d);
+        let S = f.node().getBBox();
+        h.width = S.width, h.height = S.height + B.padding / 2, z[u.id] = { y: B.compositTitleSize };
+      }
+    } else
+      h = A(i, u);
+    if (u.note) {
+      const f = {
+        descriptions: [],
+        id: u.id + "-note",
+        note: u.note,
+        type: "note"
+      }, S = A(i, f);
+      u.note.position === "left of" ? (a.setNode(h.id + "-note", S), a.setNode(h.id, h)) : (a.setNode(h.id, h), a.setNode(h.id + "-note", S)), a.setParent(h.id, h.id + "-group"), a.setParent(h.id + "-note", h.id + "-group");
+    } else
+      a.setNode(h.id, h);
+  }
+  b.debug("Count=", a.nodeCount(), a);
+  let m = 0;
+  c.forEach(function(n) {
+    m++, b.debug("Setting edge", n), a.setEdge(
+      n.id1,
+      n.id2,
+      {
+        relation: n,
+        width: rt(n.title),
+        height: B.labelHeight * T.getRows(n.title).length,
+        labelpos: "c"
+      },
+      "id" + m
+    );
+  }), J(a), b.debug("Graph after layout", a.nodes());
+  const w = i.node();
+  a.nodes().forEach(function(n) {
+    n !== void 0 && a.node(n) !== void 0 ? (b.warn("Node " + n + ": " + JSON.stringify(a.node(n))), s.select("#" + w.id + " #" + n).attr(
+      "transform",
+      "translate(" + (a.node(n).x - a.node(n).width / 2) + "," + (a.node(n).y + (z[n] ? z[n].y : 0) - a.node(n).height / 2) + " )"
+    ), s.select("#" + w.id + " #" + n).attr("data-x-shift", a.node(n).x - a.node(n).width / 2), g.querySelectorAll("#" + w.id + " #" + n + " .divider").forEach((h) => {
+      const f = h.parentElement;
+      let S = 0, M = 0;
+      f && (f.parentElement && (S = f.parentElement.getBBox().width), M = parseInt(f.getAttribute("data-x-shift"), 10), Number.isNaN(M) && (M = 0)), h.setAttribute("x1", 0 - M + 8), h.setAttribute("x2", S - M - 8);
+    })) : b.debug("No Node " + n + ": " + JSON.stringify(a.node(n)));
+  });
+  let k = w.getBBox();
+  a.edges().forEach(function(n) {
+    n !== void 0 && a.edge(n) !== void 0 && (b.debug("Edge " + n.v + " -> " + n.w + ": " + JSON.stringify(a.edge(n))), at(i, a.edge(n), a.edge(n).relation));
+  }), k = w.getBBox();
+  const E = {
+    id: o || "root",
+    label: o || "root",
+    width: 0,
+    height: 0
+  };
+  return E.width = k.width + 2 * B.padding, E.height = k.height + 2 * B.padding, b.debug("Doc rendered", E, a), E;
+}, ot = {
+  setConf: it,
+  draw: st
+}, ut = {
+  parser: C,
+  db: N,
+  renderer: ot,
+  styles: R,
+  init: (e) => {
+    e.state || (e.state = {}), e.state.arrowMarkerAbsolute = e.arrowMarkerAbsolute, N.clear();
+  }
+};
+export {
+  ut as diagram
+};

data/assets/mermaid/stateDiagram-v2-1992cada.js

@@ -0,0 +1,333 @@
+import { D as DEFAULT_STATE_TYPE, a as DIVIDER_TYPE, S as STMT_RELATION, b as STMT_STATE, c as DEFAULT_NESTED_DOC_DIR, p as parser, d as db, s as styles } from "./styles-0784dbeb.js";
+import * as graphlib from "dagre-d3-es/src/graphlib/index.js";
+import { select } from "d3";
+import { l as log, c as getConfig, u as utils, i as configureSvgSize, e as common } from "./mermaid-6dc72991.js";
+import { r as render } from "./index-01f381cb.js";
+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";
+import "dagre-d3-es/src/dagre/index.js";
+import "dagre-d3-es/src/graphlib/json.js";
+import "./edges-066a5561.js";
+import "./createText-ca0c5216.js";
+import "mdast-util-from-markdown";
+const SHAPE_STATE = "rect";
+const SHAPE_STATE_WITH_DESC = "rectWithTitle";
+const SHAPE_START = "start";
+const SHAPE_END = "end";
+const SHAPE_DIVIDER = "divider";
+const SHAPE_GROUP = "roundedWithTitle";
+const SHAPE_NOTE = "note";
+const SHAPE_NOTEGROUP = "noteGroup";
+const CSS_DIAGRAM = "statediagram";
+const CSS_STATE = "state";
+const CSS_DIAGRAM_STATE = `${CSS_DIAGRAM}-${CSS_STATE}`;
+const CSS_EDGE = "transition";
+const CSS_NOTE = "note";
+const CSS_NOTE_EDGE = "note-edge";
+const CSS_EDGE_NOTE_EDGE = `${CSS_EDGE} ${CSS_NOTE_EDGE}`;
+const CSS_DIAGRAM_NOTE = `${CSS_DIAGRAM}-${CSS_NOTE}`;
+const CSS_CLUSTER = "cluster";
+const CSS_DIAGRAM_CLUSTER = `${CSS_DIAGRAM}-${CSS_CLUSTER}`;
+const CSS_CLUSTER_ALT = "cluster-alt";
+const CSS_DIAGRAM_CLUSTER_ALT = `${CSS_DIAGRAM}-${CSS_CLUSTER_ALT}`;
+const PARENT = "parent";
+const NOTE = "note";
+const DOMID_STATE = "state";
+const DOMID_TYPE_SPACER = "----";
+const NOTE_ID = `${DOMID_TYPE_SPACER}${NOTE}`;
+const PARENT_ID = `${DOMID_TYPE_SPACER}${PARENT}`;
+const G_EDGE_STYLE = "fill:none";
+const G_EDGE_ARROWHEADSTYLE = "fill: #333";
+const G_EDGE_LABELPOS = "c";
+const G_EDGE_LABELTYPE = "text";
+const G_EDGE_THICKNESS = "normal";
+let nodeDb = {};
+let graphItemCount = 0;
+const setConf = function(cnf) {
+  const keys = Object.keys(cnf);
+  for (const key of keys) {
+    cnf[key];
+  }
+};
+const getClasses = function(text, diagramObj) {
+  diagramObj.db.extract(diagramObj.db.getRootDocV2());
+  return diagramObj.db.getClasses();
+};
+function getClassesFromDbInfo(dbInfoItem) {
+  if (dbInfoItem === void 0 || dbInfoItem === null) {
+    return "";
+  } else {
+    if (dbInfoItem.classes) {
+      return dbInfoItem.classes.join(" ");
+    } else {
+      return "";
+    }
+  }
+}
+function stateDomId(itemId = "", counter = 0, type = "", typeSpacer = DOMID_TYPE_SPACER) {
+  const typeStr = type !== null && type.length > 0 ? `${typeSpacer}${type}` : "";
+  return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
+}
+const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => {
+  const itemId = parsedItem.id;
+  const classStr = getClassesFromDbInfo(diagramStates[itemId]);
+  if (itemId !== "root") {
+    let shape = SHAPE_STATE;
+    if (parsedItem.start === true) {
+      shape = SHAPE_START;
+    }
+    if (parsedItem.start === false) {
+      shape = SHAPE_END;
+    }
+    if (parsedItem.type !== DEFAULT_STATE_TYPE) {
+      shape = parsedItem.type;
+    }
+    if (!nodeDb[itemId]) {
+      nodeDb[itemId] = {
+        id: itemId,
+        shape,
+        description: common.sanitizeText(itemId, getConfig()),
+        classes: `${classStr} ${CSS_DIAGRAM_STATE}`
+      };
+    }
+    const newNode = nodeDb[itemId];
+    if (parsedItem.description) {
+      if (Array.isArray(newNode.description)) {
+        newNode.shape = SHAPE_STATE_WITH_DESC;
+        newNode.description.push(parsedItem.description);
+      } else {
+        if (newNode.description.length > 0) {
+          newNode.shape = SHAPE_STATE_WITH_DESC;
+          if (newNode.description === itemId) {
+            newNode.description = [parsedItem.description];
+          } else {
+            newNode.description = [newNode.description, parsedItem.description];
+          }
+        } else {
+          newNode.shape = SHAPE_STATE;
+          newNode.description = parsedItem.description;
+        }
+      }
+      newNode.description = common.sanitizeTextOrArray(newNode.description, getConfig());
+    }
+    if (newNode.description.length === 1 && newNode.shape === SHAPE_STATE_WITH_DESC) {
+      newNode.shape = SHAPE_STATE;
+    }
+    if (!newNode.type && parsedItem.doc) {
+      log.info("Setting cluster for ", itemId, getDir(parsedItem));
+      newNode.type = "group";
+      newNode.dir = getDir(parsedItem);
+      newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP;
+      newNode.classes = newNode.classes + " " + CSS_DIAGRAM_CLUSTER + " " + (altFlag ? CSS_DIAGRAM_CLUSTER_ALT : "");
+    }
+    const nodeData = {
+      labelStyle: "",
+      shape: newNode.shape,
+      labelText: newNode.description,
+      // typeof newNode.description === 'object'
+      //   ? newNode.description[0]
+      //   : newNode.description,
+      classes: newNode.classes,
+      style: "",
+      //styles.style,
+      id: itemId,
+      dir: newNode.dir,
+      domId: stateDomId(itemId, graphItemCount),
+      type: newNode.type,
+      padding: 15
+      //getConfig().flowchart.padding
+    };
+    nodeData.centerLabel = true;
+    if (parsedItem.note) {
+      const noteData = {
+        labelStyle: "",
+        shape: SHAPE_NOTE,
+        labelText: parsedItem.note.text,
+        classes: CSS_DIAGRAM_NOTE,
+        // useHtmlLabels: false,
+        style: "",
+        // styles.style,
+        id: itemId + NOTE_ID + "-" + graphItemCount,
+        domId: stateDomId(itemId, graphItemCount, NOTE),
+        type: newNode.type,
+        padding: 15
+        //getConfig().flowchart.padding
+      };
+      const groupData = {
+        labelStyle: "",
+        shape: SHAPE_NOTEGROUP,
+        labelText: parsedItem.note.text,
+        classes: newNode.classes,
+        style: "",
+        // styles.style,
+        id: itemId + PARENT_ID,
+        domId: stateDomId(itemId, graphItemCount, PARENT),
+        type: "group",
+        padding: 0
+        //getConfig().flowchart.padding
+      };
+      graphItemCount++;
+      const parentNodeId = itemId + PARENT_ID;
+      g.setNode(parentNodeId, groupData);
+      g.setNode(noteData.id, noteData);
+      g.setNode(itemId, nodeData);
+      g.setParent(itemId, parentNodeId);
+      g.setParent(noteData.id, parentNodeId);
+      let from = itemId;
+      let to = noteData.id;
+      if (parsedItem.note.position === "left of") {
+        from = noteData.id;
+        to = itemId;
+      }
+      g.setEdge(from, to, {
+        arrowhead: "none",
+        arrowType: "",
+        style: G_EDGE_STYLE,
+        labelStyle: "",
+        classes: CSS_EDGE_NOTE_EDGE,
+        arrowheadStyle: G_EDGE_ARROWHEADSTYLE,
+        labelpos: G_EDGE_LABELPOS,
+        labelType: G_EDGE_LABELTYPE,
+        thickness: G_EDGE_THICKNESS
+      });
+    } else {
+      g.setNode(itemId, nodeData);
+    }
+  }
+  if (parent && parent.id !== "root") {
+    log.trace("Setting node ", itemId, " to be child of its parent ", parent.id);
+    g.setParent(itemId, parent.id);
+  }
+  if (parsedItem.doc) {
+    log.trace("Adding nodes children ");
+    setupDoc(g, parsedItem, parsedItem.doc, diagramStates, diagramDb, !altFlag);
+  }
+};
+const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) => {
+  log.trace("items", doc);
+  doc.forEach((item) => {
+    switch (item.stmt) {
+      case STMT_STATE:
+        setupNode(g, parentParsedItem, item, diagramStates, diagramDb, altFlag);
+        break;
+      case DEFAULT_STATE_TYPE:
+        setupNode(g, parentParsedItem, item, diagramStates, diagramDb, altFlag);
+        break;
+      case STMT_RELATION:
+        {
+          setupNode(g, parentParsedItem, item.state1, diagramStates, diagramDb, altFlag);
+          setupNode(g, parentParsedItem, item.state2, diagramStates, diagramDb, altFlag);
+          const edgeData = {
+            id: "edge" + graphItemCount,
+            arrowhead: "normal",
+            arrowTypeEnd: "arrow_barb",
+            style: G_EDGE_STYLE,
+            labelStyle: "",
+            label: common.sanitizeText(item.description, getConfig()),
+            arrowheadStyle: G_EDGE_ARROWHEADSTYLE,
+            labelpos: G_EDGE_LABELPOS,
+            labelType: G_EDGE_LABELTYPE,
+            thickness: G_EDGE_THICKNESS,
+            classes: CSS_EDGE
+          };
+          g.setEdge(item.state1.id, item.state2.id, edgeData, graphItemCount);
+          graphItemCount++;
+        }
+        break;
+    }
+  });
+};
+const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
+  let dir = defaultDir;
+  if (parsedItem.doc) {
+    for (let i = 0; i < parsedItem.doc.length; i++) {
+      const parsedItemDoc = parsedItem.doc[i];
+      if (parsedItemDoc.stmt === "dir") {
+        dir = parsedItemDoc.value;
+      }
+    }
+  }
+  return dir;
+};
+const draw = async function(text, id, _version, diag) {
+  log.info("Drawing state diagram (v2)", id);
+  nodeDb = {};
+  diag.db.getDirection();
+  const { securityLevel, state: conf } = getConfig();
+  const nodeSpacing = conf.nodeSpacing || 50;
+  const rankSpacing = conf.rankSpacing || 50;
+  log.info(diag.db.getRootDocV2());
+  diag.db.extract(diag.db.getRootDocV2());
+  log.info(diag.db.getRootDocV2());
+  const diagramStates = diag.db.getStates();
+  const g = new graphlib.Graph({
+    multigraph: true,
+    compound: true
+  }).setGraph({
+    rankdir: getDir(diag.db.getRootDocV2()),
+    nodesep: nodeSpacing,
+    ranksep: rankSpacing,
+    marginx: 8,
+    marginy: 8
+  }).setDefaultEdgeLabel(function() {
+    return {};
+  });
+  setupNode(g, void 0, diag.db.getRootDocV2(), diagramStates, diag.db, true);
+  let sandboxElement;
+  if (securityLevel === "sandbox") {
+    sandboxElement = select("#i" + id);
+  }
+  const root = securityLevel === "sandbox" ? select(sandboxElement.nodes()[0].contentDocument.body) : select("body");
+  const svg = root.select(`[id="${id}"]`);
+  const element = root.select("#" + id + " g");
+  await render(element, g, ["barb"], CSS_DIAGRAM, id);
+  const padding = 8;
+  utils.insertTitle(svg, "statediagramTitleText", conf.titleTopMargin, diag.db.getDiagramTitle());
+  const bounds = svg.node().getBBox();
+  const width = bounds.width + padding * 2;
+  const height = bounds.height + padding * 2;
+  svg.attr("class", CSS_DIAGRAM);
+  const svgBounds = svg.node().getBBox();
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
+  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
+  log.debug(`viewBox ${vBox}`);
+  svg.attr("viewBox", vBox);
+  const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
+  for (const label of labels) {
+    const dim = label.getBBox();
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", SHAPE_STATE);
+    rect.setAttribute("rx", 0);
+    rect.setAttribute("ry", 0);
+    rect.setAttribute("width", dim.width);
+    rect.setAttribute("height", dim.height);
+    label.insertBefore(rect, label.firstChild);
+  }
+};
+const renderer = {
+  setConf,
+  getClasses,
+  draw
+};
+const diagram = {
+  parser,
+  db,
+  renderer,
+  styles,
+  init: (cnf) => {
+    if (!cnf.state) {
+      cnf.state = {};
+    }
+    cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    db.clear();
+  }
+};
+export {
+  diagram
+};