fix: flowchart rendering issues

playground/testcases/flowchart.ts

@@ -465,6 +465,62 @@ C -->|Two| E[Result two]
   AA[Loop] --> AG[Subprocess]
   AG[Subprocess] --> J[Task 1]
   AG[Subprocess] --> B[Initialize]
+`,
+    type: "flowchart",
+  },
+  {
+    name: "Multiple Edges, Relations to a Single Entity",
+    definition: `
+    flowchart LR
+     style Entity1 fill: gold, stroke:#333, stroke-width:4px
+
+    Entity1[Entity 1]
+    Entity2[Entity 2 fa:fa-suitcase]
+    Entity3[Entity 3 fa:fa-suitcase]
+    Entity4[Entity 4]
+    Entity5[Entity 5]
+    Entity6[Entity 6<br><sub>Entity6</sub>]
+    Entity7[Entity 7]
+
+    Entity2 -..->|Relation1| Entity1
+    Entity3 -..->|Relation2| Entity1
+    Entity4 -..->|Relation3| Entity1
+    Entity3 -..->|Relation4| Entity1
+    Entity5 -..->|Relation5| Entity1
+    Entity5 -..->|Relation6| Entity1
+    Entity6 -..->|Relation7| Entity1
+    Entity7 -..->|Relation8| Entity1
+
+    Entity8[Entity 8<br><sub>Entity8</sub>]
+    Entity1[Entity 1]
+    Entity9[Entity 9<br><sub>Entity9</sub>]
+    Entity10[Entity 10]
+    Entity4[Entity 4]
+    Entity11[Entity 11]
+    Entity12[Entity 12]
+    Entity13[Entity 13<br><sub>Entity13</sub>]
+    Entity14[Entity 14]
+    Entity15[Entity 15]
+    Entity16[Entity 16 fa:fa-suitcase]
+    Entity17[Entity 17 fa:fa-suitcase]
+    Entity18[Entity 18 fa:fa-suitcase]
+    Entity19[Entity 19 fa:fa-suitcase]
+
+    Entity1 -..->|Relation9| Entity8
+    Entity1 -..->|Relation10| Entity9
+    Entity1 -..->|Relation11| Entity10
+    Entity1 -..->|Relation12| Entity4
+    Entity1 ===>|fa:fa-link Relation13| Entity11
+    Entity1 -..->|Relation14| Entity12
+    Entity1 -..->|Relation15| Entity13
+    Entity1 -..->|Relation16| Entity14
+    Entity1 ===>|fa:fa-link Relation17| Entity15
+    Entity1 -..->|Relation18| Entity16
+    Entity1 -..->|Relation19| Entity17
+    Entity1 -..->|Relation20| Entity17
+    Entity1 -..->|Relation21| Entity17
+    Entity1 -..->|Relation22| Entity18
+    Entity1 -..->|Relation23| Entity19
 `,
     type: "flowchart",
   },

src/parser/flowchart.ts

@@ -141,18 +141,40 @@ const parseVertex = (data: any, containerEl: Element): Vertex | undefined => {
   };
 };
 
+const processedEdges = () => {
+  const edges = new Set<string>();
+
+  const add = (id: string) => {
+    edges.add(id);
+  };
+
+  return {
+    add,
+    has: (id: string) => edges.has(id),
+  };
+};
+
 const parseEdge = (data: any, containerEl: Element): Edge => {
   // Find edge element
-  const el: SVGPathElement | null = containerEl.querySelector(
-    `[id*="L-${data.start}-${data.end}"]`
+  const edges = Array.from(
+    containerEl.querySelectorAll<SVGPathElement>(
+      `[id*="L-${data.start}-${data.end}"]`
+    )
   );
-  if (!el) {
+  const unprocessedEdges = edges.filter(
+    (edge) => !processedEdges().has(edge.id)
+  );
+
+  if (!unprocessedEdges.length) {
     throw new Error("Edge element not found");
   }
 
+  const edge = unprocessedEdges[0];
+  processedEdges().add(edge.id);
+
   // Compute edge position data
-  const position = computeElementPosition(el, containerEl);
-  const edgePositionData = computeEdgePositions(el, position);
+  const position = computeElementPosition(edge, containerEl);
+  const edgePositionData = computeEdgePositions(edge, position);
 
   // Remove irrelevant properties
   data.length = undefined;
@@ -228,9 +250,11 @@ export const parseMermaidFlowChartDiagram = (
   Object.keys(vertices).forEach((id) => {
     vertices[id] = parseVertex(vertices[id], containerEl);
   });
+
   const edges = mermaidParser
     .getEdges()
     .map((data: any) => parseEdge(data, containerEl));
+
   const subGraphs = mermaidParser
     .getSubGraphs()
     .map((data: any) => parseSubGraph(data, containerEl));

src/utils.ts

@@ -116,11 +116,9 @@ export const computeEdgePositions = (
       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
+      // Always include the start point, or if the current point is not the same as the previous point
       const prevPoint = array[index - 1];
-      return (
-        index === 0 || (point.x !== prevPoint.x && point.y !== prevPoint.y)
-      );
+      return index === 0 || point.x !== prevPoint.x || point.y !== prevPoint.y;
     })
     .map((p) => {
       // Offset the point by the provided offset