#1223 Adding support for multiple transitions to a node from another node

cypress/integration/rendering/stateDiagram.spec.js

@@ -319,7 +319,7 @@ describe('State diagram', () => {
       }
     );
   });
-  it('Simplest compone state', () => {
+  it('Simplest composit state', () => {
     imgSnapshotTest(
       `
       stateDiagram
@@ -332,5 +332,17 @@ describe('State diagram', () => {
       }
     );
   });
+  it('should handle multiple arrows from one node to another', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+        a --> b: Status
+        a --> b: Stop
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
 
 });

cypress/platform/current.html

@@ -18,20 +18,16 @@
     <h1>info below</h1>
     <div style="display: flex;width: 100%; height: 100%">
       <div class="mermaid" style="width: 100%; height: 100%">
-        graph TB
+        stateDiagram
-          A --> B
+          a --> b: Status
-          A ==> C
+          a --> b: Stop
-          A .-> D
+
-          A === E
-          A -.- F
-          D -- Hello --> a
-          D-- text including R TD space --xb
       </div>
 </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'dark',
+        // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

src/diagrams/state/stateDb.js

@@ -113,6 +113,7 @@ export const addRelation = function(_id1, _id2, title) {
   }
   addState(id1, type1);
   addState(id2, type2);
+  console.info('Adding relation', { id1, id2, title });
   currentDocument.relations.push({ id1, id2, title });
 };
 

src/diagrams/state/stateRenderer.js

@@ -53,7 +53,7 @@ export const draw = function(text, id) {
 
   // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
-    multigraph: false,
+    multigraph: true,
     compound: true,
     // acyclicer: 'greedy',
     rankdir: 'RL'
@@ -110,7 +110,8 @@ const getRows = s => {
 const renderDoc = (doc, diagram, parentId, altBkg) => {
   // // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
-    compound: true
+    compound: true,
+    multigraph: true
   });
 
   let i;
@@ -126,28 +127,29 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
   if (parentId)
     graph.setGraph({
       rankdir: 'LR',
-      // multigraph: false,
+      multigraph: true,
       compound: true,
       // acyclicer: 'greedy',
       ranker: 'tight-tree',
       ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
-      nodeSep: edgeFreeDoc ? 1 : 50
+      nodeSep: edgeFreeDoc ? 1 : 50,
-      // isMultiGraph: false
+      isMultiGraph: true
       // ranksep: 5,
       // nodesep: 1
     });
   else {
     graph.setGraph({
       rankdir: 'TB',
+      multigraph: true,
       compound: true,
       // isCompound: true,
       // acyclicer: 'greedy',
       // ranker: 'longest-path'
       ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
       nodeSep: edgeFreeDoc ? 1 : 50,
-      ranker: 'tight-tree'
+      ranker: 'tight-tree',
       // ranker: 'network-simplex'
-      // isMultiGraph: false
+      isMultiGraph: true
     });
   }
 
@@ -226,14 +228,22 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
     }
   }
 
-  logger.info('Count=', graph.nodeCount());
+  logger.info('Count=', graph.nodeCount(), graph);
+  let cnt = 0;
   relations.forEach(function(relation) {
-    graph.setEdge(relation.id1, relation.id2, {
+    cnt++;
-      relation: relation,
+    logger.debug('Setting edge', relation);
-      width: getLabelWidth(relation.title),
+    graph.setEdge(
-      height: conf.labelHeight * getRows(relation.title).length,
+      relation.id1,
-      labelpos: 'c'
+      relation.id2,
-    });
+      {
+        relation: relation,
+        width: getLabelWidth(relation.title),
+        height: conf.labelHeight * getRows(relation.title).length,
+        labelpos: 'c'
+      },
+      'id' + cnt
+    );
   });
 
   dagre.layout(graph);
@@ -282,7 +292,8 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
 
   graph.edges().forEach(function(e) {
     if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {
-      logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
+      // logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
+      logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e).points));
       drawEdge(diagram, graph.edge(e), graph.edge(e).relation);
     }
   });