Merge pull request #1230 from mermaid-js/bug/1223_multiple_transition…

…s_in_statediagram Bug/1223 multiple transitions in statediagram
mermaid-js · Jan 29, 2020 · fbd8dfa · fbd8dfa
2 parents 39b873c + c43f791
commit fbd8dfa
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ yarn-error.log
 token
 
 package-lock.json
+cypress/platform/current.html
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/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: Start
+        a --> b: Stop
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
 
 });
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -5,33 +5,28 @@
       rel="stylesheet"
     />
     <style>
-      body {background: black}
+      body {background: white}
       h1 { color: white;}
       .arrowheadPath {fill: red;}
 
       .edgePath .path {stroke: red;}
-
-
     </style>
   </head>
   <body>
     <h1>info below</h1>
     <div style="display: flex;width: 100%; height: 100%">
       <div class="mermaid" style="width: 100%; height: 100%">
-        graph TB
-          A --> B
-          A ==> C
-          A .-> D
-          A === E
-          A -.- F
-          D -- Hello --> a
-          D-- text including R TD space --xb
+        stateDiagram
+
+        NotFound --> NotFound: Status
+              NotFound --> NotFound: Stop
+
       </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,

diff --git a/src/diagrams/state/stateRenderer.js b/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
-      // isMultiGraph: false
+      nodeSep: edgeFreeDoc ? 1 : 50,
+      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.debug('Count=', graph.nodeCount(), graph);
+  let cnt = 0;
   relations.forEach(function(relation) {
-    graph.setEdge(relation.id1, relation.id2, {
-      relation: relation,
-      width: getLabelWidth(relation.title),
-      height: conf.labelHeight * getRows(relation.title).length,
-      labelpos: 'c'
-    });
+    cnt++;
+    logger.debug('Setting edge', relation);
+    graph.setEdge(
+      relation.id1,
+      relation.id2,
+      {
+        relation: relation,
+        width: getLabelWidth(relation.title),
+        height: conf.labelHeight * getRows(relation.title).length,
+        labelpos: 'c'
+      },
+      'id' + cnt
+    );
   });
 
   dagre.layout(graph);
@@ -299,7 +309,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
   stateInfo.width = stateBox.width + 2 * conf.padding;
   stateInfo.height = stateBox.height + 2 * conf.padding;
 
-  logger.info('Doc rendered', stateInfo, graph);
+  logger.debug('Doc rendered', stateInfo, graph);
   return stateInfo;
 };