From 3251d2f9aa028a2084178c6405e4da9af259e9cf Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Wed, 27 Mar 2024 17:08:33 +0530
Subject: [PATCH] feat: upgrade mermaid to 10.9.0 and support sequence creation
 and destruction (#46)

* feat: upgrade mermaid and support sequence creation and destruction

* pgrade to v10.9.0

* update arrow position for class diagrams for diamond and triangle arrow heads and add comments

* fix double rendering of elements in namespace class diagrams

* fix cardianlities and multiplicites position

* remove unnecessary destruct

* add class diagram in supported diagrams
---
 package.json                     |   2 +-
 playground/index.html            |   8 +-
 playground/testcases/class.ts    |   9 ++
 playground/testcases/sequence.ts |  14 +++
 src/converter/types/class.ts     |   8 +-
 src/parser/class.ts              | 151 ++++++++++++++++++++-----------
 src/parser/sequence.ts           |  34 ++++---
 src/utils.ts                     |  25 ++++-
 yarn.lock                        | 105 +++++++++++++++++++--
 9 files changed, 264 insertions(+), 92 deletions(-)

diff --git a/package.json b/package.json
index ca2390ee..c70ad193 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@excalidraw/markdown-to-text": "0.1.2",
-    "mermaid": "10.2.3",
+    "mermaid": "10.9.0",
     "nanoid": "4.0.2"
   },
   "devDependencies": {
diff --git a/playground/index.html b/playground/index.html
index 9c382656..77067c85 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -13,12 +13,16 @@ <h1>Custom Test</h1>
       <a target="_blank" href="https://mermaid.js.org/syntax/flowchart.html"
         >Flowchart</a
       >
-      and
+
       <a
         target="_blank"
         href="https://mermaid.js.org/syntax/sequenceDiagram.html"
       >
-        Sequence </a
+        Sequence
+      </a>
+      and
+      <a target="_blank" href="https://mermaid.js.org/syntax/classDiagram.html">
+        class </a
       >diagrams.
       <br />
       <textarea
diff --git a/playground/testcases/class.ts b/playground/testcases/class.ts
index 64678345..093ffcdb 100644
--- a/playground/testcases/class.ts
+++ b/playground/testcases/class.ts
@@ -99,6 +99,15 @@ export const CLASS_DIAGRAM_TESTCASES = [
   Animal <|--|> Zebra
   Bird o..\* Peacock`,
   },
+  {
+    name: "Class with 2 way Relations and direction",
+    defination: `classDiagram
+    direction RL
+    classA <|--|> classB
+    classC *--* classD
+    classE o--o classF
+    classG <--> classH`,
+  },
   {
     name: "Class with Namespace",
     defination: `classDiagram
diff --git a/playground/testcases/sequence.ts b/playground/testcases/sequence.ts
index 4facba7f..d414f7c9 100644
--- a/playground/testcases/sequence.ts
+++ b/playground/testcases/sequence.ts
@@ -179,6 +179,20 @@ const SEQUENCE_DIAGRAM_TESTCASES = [
     Alice->>Bob: I #9829; you!
     Bob->>Alice: I #9829; you #infin; times more!`,
   },
+  {
+    name: "Actor creation and destruction",
+    defination: `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree`,
+  },
 ];
 
 export { SEQUENCE_DIAGRAM_TESTCASES };
diff --git a/src/converter/types/class.ts b/src/converter/types/class.ts
index c4c103aa..9819056a 100644
--- a/src/converter/types/class.ts
+++ b/src/converter/types/class.ts
@@ -69,19 +69,13 @@ export const classToExcalidrawSkeletonConvertor = new GraphConverter({
       const chartElements = [...chart.lines, ...chart.arrows, ...chart.text];
       classIds.forEach((classId) => {
         const childIds = chartElements
-          .filter(
-            (ele) =>
-              ele.metadata &&
-              "class" in ele.metadata &&
-              ele.metadata.classId === classId
-          )
+          .filter((ele) => ele.metadata && ele.metadata.classId === classId)
           .map((ele) => ele.id);
 
         if (childIds.length) {
           children.push(...(childIds as string[]));
         }
       });
-
       const frame: ExcalidrawElementSkeleton = {
         type: "frame",
         id: nanoid(),
diff --git a/src/parser/class.ts b/src/parser/class.ts
index 6000d9eb..4390d728 100644
--- a/src/parser/class.ts
+++ b/src/parser/class.ts
@@ -40,6 +40,9 @@ const LINE_TYPE = {
   DOTTED_LINE: 1,
 };
 
+// This is the offset to update the arrow head postition for rendering in excalidraw as mermaid calculates the position until the start of arrowhead
+const MERMAID_ARROW_HEAD_OFFSET = 16;
+
 export interface Class {
   type: "class";
   nodes: Array<Node[]>;
@@ -98,9 +101,9 @@ const parseClasses = (
   const text: Text[] = [];
 
   Object.values(classes).forEach((classNode) => {
-    const { domId, id } = classNode;
+    const { domId, id: classId } = classNode;
     const groupId = nanoid();
-    const domNode = containerEl.querySelector(`[id*=classId-${id}]`);
+    const domNode = containerEl.querySelector(`[id*=classId-${classId}]`);
     if (!domNode) {
       throw Error(`DOM Node with id ${domId} not found`);
     }
@@ -109,11 +112,11 @@ const parseClasses = (
     const container = createContainerSkeletonFromSVG(
       domNode.firstChild as SVGRectElement,
       "rectangle",
-      { id, groupId }
+      { id: classId, groupId }
     );
     container.x += transformX;
     container.y += transformY;
-    container.metadata = { classId: id };
+    container.metadata = { classId };
     nodes.push(container);
 
     const lineNodes = Array.from(
@@ -140,7 +143,7 @@ const parseClasses = (
       line.startY += transformY;
       line.endX += transformX;
       line.endY += transformY;
-      line.metadata = { classId: id };
+      line.metadata = { classId };
       lines.push(line);
     });
 
@@ -171,17 +174,59 @@ const parseClasses = (
           height: boundingBox.height,
           id,
           groupId,
-          metadata: { classId: id },
+          metadata: { classId },
         }
       );
 
       text.push(textElement);
     });
   });
-
   return { nodes, lines, text };
 };
 
+// update arrow position by certain offset for triangle and diamond arrow head types
+// as mermaid calculates the position until the start of arrowhead
+// for reference - https://github.com/mermaid-js/mermaid/issues/5417
+const adjustArrowPosition = (direction: string, arrow: Arrow) => {
+  // The arrowhead shapes where we need to update the position by a 16px offset
+  const arrowHeadShapes = ["triangle_outline", "diamond", "diamond_outline"];
+
+  const shouldUpdateStartArrowhead =
+    arrow.startArrowhead && arrowHeadShapes.includes(arrow.startArrowhead);
+
+  const shouldUpdateEndArrowhead =
+    arrow.endArrowhead && arrowHeadShapes.includes(arrow.endArrowhead);
+
+  if (!shouldUpdateEndArrowhead && !shouldUpdateStartArrowhead) {
+    return arrow;
+  }
+
+  if (shouldUpdateStartArrowhead) {
+    if (direction === "LR") {
+      arrow.startX -= MERMAID_ARROW_HEAD_OFFSET;
+    } else if (direction === "RL") {
+      arrow.startX += MERMAID_ARROW_HEAD_OFFSET;
+    } else if (direction === "TB") {
+      arrow.startY -= MERMAID_ARROW_HEAD_OFFSET;
+    } else if (direction === "BT") {
+      arrow.startY += MERMAID_ARROW_HEAD_OFFSET;
+    }
+  }
+
+  if (shouldUpdateEndArrowhead) {
+    if (direction === "LR") {
+      arrow.endX += MERMAID_ARROW_HEAD_OFFSET;
+    } else if (direction === "RL") {
+      arrow.endX -= MERMAID_ARROW_HEAD_OFFSET;
+    } else if (direction === "TB") {
+      arrow.endY += MERMAID_ARROW_HEAD_OFFSET;
+    } else if (direction === "BT") {
+      arrow.endY -= MERMAID_ARROW_HEAD_OFFSET;
+    }
+  }
+  return arrow;
+};
+
 const parseRelations = (
   relations: ClassRelation[],
   classNodes: Container[],
@@ -208,17 +253,22 @@ const parseRelations = (
     const edgePositionData = computeEdgePositions(
       edges[index] as SVGPathElement
     );
-    const { startX, startY, endX, endY } = edgePositionData;
-
-    const arrow = createArrowSkeletion(startX, startY, endX, endY, {
-      strokeStyle,
-      startArrowhead,
-      endArrowhead,
-      label: relationNode.title ? { text: relationNode.title } : undefined,
-      start: { type: "rectangle", id: node1.id },
-      end: { type: "rectangle", id: node2.id },
-    });
+    const arrowSkeletion = createArrowSkeletion(
+      edgePositionData.startX,
+      edgePositionData.startY,
+      edgePositionData.endX,
+      edgePositionData.endY,
+      {
+        strokeStyle,
+        startArrowhead,
+        endArrowhead,
+        label: relationNode.title ? { text: relationNode.title } : undefined,
+        start: { type: "rectangle", id: node1.id },
+        end: { type: "rectangle", id: node2.id },
+      }
+    );
 
+    const arrow = adjustArrowPosition(direction, arrowSkeletion);
     arrows.push(arrow);
 
     // Add cardianlities and Multiplicities
@@ -228,39 +278,40 @@ const parseRelations = (
     const directionOffset = 15;
     let x;
     let y;
+
     if (relationTitle1 && relationTitle1 !== "none") {
       switch (direction) {
         case "TB":
-          x = startX - offsetX;
-          if (endX < startX) {
+          x = arrow.startX - offsetX;
+          if (arrow.endX < arrow.startX) {
             x -= directionOffset;
           }
-          y = startY + offsetY;
+          y = arrow.startY + offsetY;
           break;
         case "BT":
-          x = startX + offsetX;
-          if (endX > startX) {
+          x = arrow.startX + offsetX;
+          if (arrow.endX > arrow.startX) {
             x += directionOffset;
           }
-          y = startY - offsetY;
+          y = arrow.startY - offsetY;
           break;
         case "LR":
-          x = startX + offsetX;
-          y = startY + offsetY;
-          if (endY > startY) {
+          x = arrow.startX + offsetX;
+          y = arrow.startY + offsetY;
+          if (arrow.endY > arrow.startY) {
             y += directionOffset;
           }
           break;
         case "RL":
-          x = startX - offsetX;
-          y = startY - offsetY;
-          if (startY > endY) {
+          x = arrow.startX - offsetX;
+          y = arrow.startY - offsetY;
+          if (arrow.startY > arrow.endY) {
             y -= directionOffset;
           }
           break;
         default:
-          x = startX - offsetX;
-          y = startY + offsetY;
+          x = arrow.startX - offsetX;
+          y = arrow.startY + offsetY;
       }
 
       const relationTitleElement = createTextSkeleton(x, y, relationTitle1, {
@@ -272,36 +323,36 @@ const parseRelations = (
     if (relationTitle2 && relationTitle2 !== "none") {
       switch (direction) {
         case "TB":
-          x = endX + offsetX;
-          if (endX < startX) {
+          x = arrow.endX + offsetX;
+          if (arrow.endX < arrow.startX) {
             x += directionOffset;
           }
-          y = endY - offsetY;
+          y = arrow.endY - offsetY;
           break;
         case "BT":
-          x = endX - offsetX;
-          if (endX > startX) {
+          x = arrow.endX - offsetX;
+          if (arrow.endX > arrow.startX) {
             x -= directionOffset;
           }
-          y = endY + offsetY;
+          y = arrow.endY + offsetY;
           break;
         case "LR":
-          x = endX - offsetX;
-          y = endY - offsetY;
-          if (endY > startY) {
+          x = arrow.endX - offsetX;
+          y = arrow.endY - offsetY;
+          if (arrow.endY > arrow.startY) {
             y -= directionOffset;
           }
           break;
         case "RL":
-          x = endX + offsetX;
-          y = endY + offsetY;
-          if (startY > endY) {
+          x = arrow.endX + offsetX;
+          y = arrow.endY + offsetY;
+          if (arrow.startY > arrow.endY) {
             y += directionOffset;
           }
           break;
         default:
-          x = endX + offsetX;
-          y = endY - offsetY;
+          x = arrow.endX + offsetX;
+          y = arrow.endY - offsetY;
       }
 
       const relationTitleElement = createTextSkeleton(x, y, relationTitle2, {
@@ -376,16 +427,6 @@ export const parseMermaidClassDiagram = (
 
   const namespaces: NamespaceNode[] = mermaidParser.getNamespaces();
 
-  if (Object.keys(namespaces).length) {
-    Object.values(namespaces).forEach((namespace) => {
-      const namespaceClassData = parseClasses(namespace.classes, containerEl);
-      nodes.push(namespaceClassData.nodes);
-      lines.push(...namespaceClassData.lines);
-      text.push(...namespaceClassData.text);
-      classNodes.push(...namespaceClassData.nodes);
-    });
-  }
-
   const classes = mermaidParser.getClasses();
   if (Object.keys(classes).length) {
     const classData = parseClasses(classes, containerEl);
diff --git a/src/parser/sequence.ts b/src/parser/sequence.ts
index 3a76817f..a82effb6 100644
--- a/src/parser/sequence.ts
+++ b/src/parser/sequence.ts
@@ -146,7 +146,7 @@ const attachSequenceNumberToArrow = (
 };
 
 const createActorSymbol = (
-  rootNode: HTMLElement,
+  rootNode: SVGRectElement,
   text: string,
   opts?: { id?: string }
 ) => {
@@ -209,19 +209,22 @@ const createActorSymbol = (
 };
 
 const parseActor = (actors: { [key: string]: Actor }, containerEl: Element) => {
-  const actorRootNodes = Array.from(
-    containerEl.querySelectorAll<SVGElement>(".actor")
-  )
-    .filter((node) => node.tagName === "text")
-    .map((actor) => actor.parentElement);
+  const actorTopNodes = Array.from(
+    containerEl.querySelectorAll<SVGElement>(".actor-top")
+  );
+  const actorBottomNodes = Array.from(
+    containerEl.querySelectorAll<SVGElement>(".actor-bottom")
+  );
 
   const nodes: Array<Node[]> = [];
   const lines: Array<Line> = [];
-  const actorsLength = Object.keys(actors).length;
   Object.values(actors).forEach((actor, index) => {
-    // For each actor there are two nodes top and bottom which is connected by a line
-    const topRootNode = actorRootNodes[index];
-    const bottomRootNode = actorRootNodes[actorsLength + index];
+    const topRootNode = actorTopNodes.find(
+      (actorNode) => actorNode.getAttribute("name") === actor.name
+    ) as SVGRectElement;
+    const bottomRootNode = actorBottomNodes.find(
+      (actorNode) => actorNode.getAttribute("name") === actor.name
+    ) as SVGRectElement;
 
     if (!topRootNode || !bottomRootNode) {
       throw "root not found";
@@ -230,7 +233,7 @@ const parseActor = (actors: { [key: string]: Actor }, containerEl: Element) => {
     if (actor.type === "participant") {
       // creating top actor node element
       const topNodeElement = createContainerSkeletonFromSVG(
-        topRootNode.firstChild as SVGSVGElement,
+        topRootNode,
         "rectangle",
         { id: `${actor.name}-top`, label: { text }, subtype: "actor" }
       );
@@ -241,14 +244,15 @@ const parseActor = (actors: { [key: string]: Actor }, containerEl: Element) => {
 
       // creating bottom actor node element
       const bottomNodeElement = createContainerSkeletonFromSVG(
-        bottomRootNode.firstChild as SVGSVGElement,
+        bottomRootNode,
         "rectangle",
         { id: `${actor.name}-bottom`, label: { text }, subtype: "actor" }
       );
       nodes.push([bottomNodeElement]);
 
-      // Get the line connecting the top and bottom nodes. As per the DOM, the line is rendered as first child of parent element
-      const lineNode = topRootNode.previousElementSibling as SVGLineElement;
+      // Get the line connecting the top and bottom nodes. As per the DOM, the line is rendered as sibling parent of top root node
+      const lineNode = topRootNode?.parentElement
+        ?.previousElementSibling as SVGLineElement;
 
       if (lineNode?.tagName !== "line") {
         throw "Line not found";
@@ -279,7 +283,7 @@ const parseActor = (actors: { [key: string]: Actor }, containerEl: Element) => {
       });
       nodes.push(bottomNodeElement);
 
-      // Get the line connecting the top and bottom nodes. As per the DOM, the line is rendered as first child of parent element
+      // Get the line connecting the top and bottom nodes. As per the DOM, the line is rendered as sibling of the actor root element
       const lineNode = topRootNode.previousElementSibling as SVGLineElement;
 
       if (lineNode?.tagName !== "line") {
diff --git a/src/utils.ts b/src/utils.ts
index d82010bd..a1f038de 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -3,11 +3,16 @@ import { Position } from "./interfaces.js";
 // Convert mermaid entity codes to text e.g. "#9829;" to "♥"
 export const entityCodesToText = (input: string): string => {
   input = decodeEntities(input);
-  const modifiedInput = input
+  // Append & before the pattern #(\d+); or #([a-z]+); to convert to decimal code
+  // so it can be rendered as html character
+  // eg #9829; => &#9829;
+  const inputWithDecimalCode = input
     .replace(/#(\d+);/g, "&#$1;")
     .replace(/#([a-z]+);/g, "&$1;");
+
+  // Render the decimal code as html character, eg &#9829; => ♥
   const element = document.createElement("textarea");
-  element.innerHTML = modifiedInput;
+  element.innerHTML = inputWithDecimalCode;
   return element.value;
 };
 
@@ -62,31 +67,42 @@ interface EdgePositionData {
   reflectionPoints: Position[];
 }
 
+// Compute edge postion start, end and points (reflection points)
 export const computeEdgePositions = (
   pathElement: SVGPathElement,
   offset: Position = { x: 0, y: 0 }
 ): EdgePositionData => {
+  // Check if the element is a path else throw an error
   if (pathElement.tagName.toLowerCase() !== "path") {
     throw new Error(
       `Invalid input: Expected an HTMLElement of tag "path", got ${pathElement.tagName}`
     );
   }
 
+  // Get the d attribute from the path element else throw an error
   const dAttr = pathElement.getAttribute("d");
   if (!dAttr) {
     throw new Error('Path element does not contain a "d" attribute');
   }
 
   // Split the d attribute based on M (Move To) and L (Line To) commands
+  // eg "M29.383,38.5L29.383,63.5L29.383,83.2" => ["M29.383,38.5", "L29.383,63.5", "L29.383,83.2"]
   const commands = dAttr.split(/(?=[LM])/);
+
+  // Get the start position from the first commands element => [29.383,38.5]
   const startPosition = commands[0]
     .substring(1)
     .split(",")
     .map((coord) => parseFloat(coord));
+
+  // Get the last position from the last commands element => [29.383,83.2]
   const endPosition = commands[commands.length - 1]
     .substring(1)
     .split(",")
     .map((coord) => parseFloat(coord));
+
+  // compute the reflection points -> [ {x: 29.383, y: 38.5}, {x: 29.383, y: 83.2} ]
+  // These includes the start and end points and also points which are not the same as the previous points
   const reflectionPoints = commands
     .map((command) => {
       const coords = command
@@ -96,21 +112,24 @@ export const computeEdgePositions = (
       return { x: coords[0], y: coords[1] };
     })
     .filter((point, index, array) => {
+      // Always include the last point
       if (index === array.length - 1) {
         return true;
       }
+      // Include the start point or if the current point if it's not the same as the previous point
       const prevPoint = array[index - 1];
       return (
         index === 0 || (point.x !== prevPoint.x && point.y !== prevPoint.y)
       );
     })
     .map((p) => {
+      // Offset the point by the provided offset
       return {
         x: p.x + offset.x,
         y: p.y + offset.y,
       };
     });
-
+  // Return the edge positions
   return {
     startX: startPosition[0] + offset.x,
     startY: startPosition[1] + offset.y,
diff --git a/yarn.lock b/yarn.lock
index c0731eee..8a36678d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -841,6 +841,11 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@braintree/sanitize-url@^6.0.1":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
+  integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
+
 "@braintree/sanitize-url@^6.0.2":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
@@ -1787,6 +1792,23 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/d3-scale-chromatic@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz#fc0db9c10e789c351f4c42d96f31f2e4df8f5644"
+  integrity sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==
+
+"@types/d3-scale@^4.0.3":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-time@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+  integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
+
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@@ -2162,6 +2184,11 @@ commander@7, commander@^7.0.0, commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -2270,6 +2297,21 @@ cytoscape@^3.23.0:
     heap "^0.2.6"
     lodash "^4.17.21"
 
+cytoscape@^3.28.1:
+  version "3.28.1"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.28.1.tgz#f32c3e009bdf32d47845a16a4cd2be2bbc01baf7"
+  integrity sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==
+  dependencies:
+    heap "^0.2.6"
+    lodash "^4.17.21"
+
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
@@ -2386,6 +2428,11 @@ d3-hierarchy@3:
   dependencies:
     d3-color "1 - 3"
 
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 "d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
@@ -2406,6 +2453,14 @@ d3-random@3:
   resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
   integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
 
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
 d3-scale-chromatic@3:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
@@ -2437,6 +2492,13 @@ d3-shape@3:
   dependencies:
     d3-path "^3.1.0"
 
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
 "d3-time-format@2 - 4", d3-time-format@4:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
@@ -2608,6 +2670,11 @@ dompurify@3.0.3:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
   integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
 
+dompurify@^3.0.5:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.11.tgz#c163f5816eaac6aeef35dae2b77fca0504564efe"
+  integrity sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg==
+
 domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -2637,6 +2704,11 @@ elkjs@^0.8.2:
   resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.8.2.tgz#c37763c5a3e24e042e318455e0147c912a7c248e"
   integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
 
+elkjs@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.9.2.tgz#3d4ef6f17fde06a5d7eaa3063bb875e25e59e972"
+  integrity sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -3032,6 +3104,11 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3125,6 +3202,13 @@ json5@^2.1.2, json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+katex@^0.16.9:
+  version "0.16.10"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.10.tgz#6f81b71ac37ff4ec7556861160f53bc5f058b185"
+  integrity sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==
+  dependencies:
+    commander "^8.3.0"
+
 khroma@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.0.0.tgz#7577de98aed9f36c7a474c4d453d94c0d6c6588b"
@@ -3331,20 +3415,23 @@ mermaid@*:
     uuid "^9.0.0"
     web-worker "^1.2.0"
 
-mermaid@10.2.3:
-  version "10.2.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.2.3.tgz#789d3b582c5da8c69aa4a7c0e2b826562c8c8b12"
-  integrity sha512-cMVE5s9PlQvOwfORkyVpr5beMsLdInrycAosdr+tpZ0WFjG4RJ/bUHST7aTgHNJbujHkdBRAm+N50P3puQOfPw==
+mermaid@10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+  integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
   dependencies:
-    "@braintree/sanitize-url" "^6.0.2"
-    cytoscape "^3.23.0"
+    "@braintree/sanitize-url" "^6.0.1"
+    "@types/d3-scale" "^4.0.3"
+    "@types/d3-scale-chromatic" "^3.0.0"
+    cytoscape "^3.28.1"
     cytoscape-cose-bilkent "^4.1.0"
-    cytoscape-fcose "^2.1.0"
     d3 "^7.4.0"
+    d3-sankey "^0.12.3"
     dagre-d3-es "7.0.10"
     dayjs "^1.11.7"
-    dompurify "3.0.3"
-    elkjs "^0.8.2"
+    dompurify "^3.0.5"
+    elkjs "^0.9.0"
+    katex "^0.16.9"
     khroma "^2.0.0"
     lodash-es "^4.17.21"
     mdast-util-from-markdown "^1.3.0"