Merge 6966aae into 1ecf0f4

mermaid-js · Nov 14, 2019 · 61f0527 · 61f0527
2 parents 1ecf0f4 + 6966aae
commit 61f0527
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 33 deletions.
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
@@ -58,4 +58,56 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render multiple class diagrams', () => {
+    imgSnapshotTest(
+      [
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      ],
+      {}
+    );
+    cy.get('svg');
+  });
 });
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -14,11 +14,22 @@ const contentLoaded = function() {
     const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
     console.log(graphObj);
-    const div = document.createElement('div');
-    div.id = 'block';
-    div.className = 'mermaid';
-    div.innerHTML = graphObj.code;
-    document.getElementsByTagName('body')[0].appendChild(div);
+    if (Array.isArray(graphObj.code)) {
+      const numCodes = graphObj.code.length;
+      for (let i = 0; i < numCodes; i++) {
+        const div = document.createElement('div');
+        div.id = 'block' + i;
+        div.className = 'mermaid';
+        div.innerHTML = graphObj.code[i];
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+    } else {
+      const div = document.createElement('div');
+      div.id = 'block';
+      div.className = 'mermaid';
+      div.innerHTML = graphObj.code;
+      document.getElementsByTagName('body')[0].appendChild(div);
+    }
     global.mermaid.initialize(graphObj.mermaid);
     // console.log('graphObj.mermaid', graphObj.mermaid)
     global.mermaid.init();
@@ -31,23 +42,52 @@ const contentLoadedApi = function() {
     const graphBase64 = document.location.href.substr(pos);
     const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
-    const div = document.createElement('div');
-    div.id = 'block';
-    div.className = 'mermaid';
-    // div.innerHTML = graphObj.code
-    document.getElementsByTagName('body')[0].appendChild(div);
-    global.mermaid.initialize(graphObj.mermaid);
+    if (Array.isArray(graphObj.code)) {
+      const numCodes = graphObj.code.length;
+      const divs = [];
+      let div;
+      for (let i = 0; i < numCodes; i++) {
+        div = document.createElement('div');
+        div.id = 'block' + i;
+        div.className = 'mermaid';
+        // div.innerHTML = graphObj.code
+        document.getElementsByTagName('body')[0].appendChild(div);
+        divs[i] = div;
+      }
+
+      global.mermaid.initialize(graphObj.mermaid);
+
+      for (let i = 0; i < numCodes; i++) {
+        mermaid2.render(
+          'newid' + i,
+          graphObj.code[i],
+          (svgCode, bindFunctions) => {
+            div.innerHTML = svgCode;
+
+            bindFunctions(div);
+          },
+          divs[i]
+        );
+      }
+    } else {
+      const div = document.createElement('div');
+      div.id = 'block';
+      div.className = 'mermaid';
+      // div.innerHTML = graphObj.code
+      document.getElementsByTagName('body')[0].appendChild(div);
+      global.mermaid.initialize(graphObj.mermaid);
 
-    mermaid2.render(
-      'newid',
-      graphObj.code,
-      (svgCode, bindFunctions) => {
-        div.innerHTML = svgCode;
+      mermaid2.render(
+        'newid',
+        graphObj.code,
+        (svgCode, bindFunctions) => {
+          div.innerHTML = svgCode;
 
-        bindFunctions(div);
-      },
-      div
-    );
+          if (bindFunctions) bindFunctions(div);
+        },
+        div
+      );
+    }
   }
 };
 

diff --git a/docs/usage.md b/docs/usage.md
@@ -114,7 +114,7 @@ $(document).ready(function() {
 
 Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
 
-If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. 
+If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
 ```
     div.mermaid {
         font-family: 'trebuchet ms', verdana, arial;
@@ -262,8 +262,14 @@ function in order to handle the error in an application-specific way.
 
 **Parsing text without rendering**
 
+Text can also be parsed without rendering it. The function
+**mermaid.validate(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
+false if it is not. The parseError function will be called when the parse function returns false.
+
+**Validating text**
+
 It is also possible to validate the syntax before rendering in order to streamline the user experience. The function
-**mermaid.parse(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
+**mermaid.validate(txt)** takes a text string as an argument and returns true if the text is syntactically correct and
 false if it is not. The parseError function will be called when the parse function returns false.
 
 The code-example below in meta code illustrates how this could work:

diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
@@ -8,7 +8,7 @@ import { parser } from './parser/classDiagram';
 
 parser.yy = classDb;
 
-const idCache = {};
+let idCache = {};
 
 let classCnt = 0;
 const conf = {
@@ -136,7 +136,6 @@ const insertMarkers = function(elem) {
 };
 
 let edgeCount = 0;
-let total = 0;
 const drawEdge = function(elem, path, relation) {
   const getRelationType = function(type) {
     switch (type) {
@@ -291,7 +290,7 @@ const drawClass = function(elem, classDef) {
     }
   };
 
-  const id = 'classId' + (classCnt % total);
+  const id = 'classId' + classCnt;
   const classInfo = {
     id: id,
     label: classDef.id,
@@ -411,6 +410,7 @@ export const setConf = function(cnf) {
  * @param id
  */
 export const draw = function(text, id) {
+  idCache = {};
   parser.yy.clear();
   parser.parse(text);
 
@@ -437,7 +437,6 @@ export const draw = function(text, id) {
 
   const classes = classDb.getClasses();
   const keys = Object.keys(classes);
-  total = keys.length;
   for (let i = 0; i < keys.length; i++) {
     const classDef = classes[keys[i]];
     const node = drawClass(diagram, classDef);

diff --git a/src/mermaid.js b/src/mermaid.js
@@ -172,6 +172,7 @@ const mermaid = {
 
   mermaidAPI,
   parse: mermaidAPI.parse,
+  validate: mermaidAPI.validate,
   render: mermaidAPI.render,
 
   init,

diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js
@@ -4,8 +4,8 @@ import flowDb from './diagrams/flowchart/flowDb';
 import flowParser from './diagrams/flowchart/parser/flow';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
 
-describe('when using mermaid and ', function() {
-  describe('when detecting chart type ', function() {
+describe('when using mermaid and', function() {
+  describe('when detecting chart type', function() {
     it('should not start rendering with mermaid.startOnLoad set to false', function() {
       mermaid.startOnLoad = false;
       document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
@@ -38,7 +38,7 @@ describe('when using mermaid and ', function() {
     });
   });
 
-  describe('when calling addEdges ', function() {
+  describe('when calling addEdges', function() {
     beforeEach(function() {
       flowParser.parser.yy = flowDb;
       flowDb.clear();
@@ -180,7 +180,7 @@ describe('when using mermaid and ', function() {
     });
   });
 
-  describe('checking validity of input ', function() {
+  describe('parsing input', function() {
     beforeEach(function() {
       flowParser.parser.yy = flowDb;
       flowDb.clear();
@@ -224,4 +224,18 @@ describe('when using mermaid and ', function() {
       expect(() => mermaid.parse(text)).toThrow();
     });
   });
+  describe('checking validity of input', function() {
+    beforeEach(function() {
+      flowParser.parser.yy = flowDb;
+      flowDb.clear();
+    });
+    it('it should return false for an invalid definiton', function() {
+      const res = mermaid.validate('this is not a mermaid diagram definition');
+      expect(res).toBeFalsy();
+    });
+    it('it should return true for a valid definition', function() {
+      const res = mermaid.validate('graph TD;A--x|text including URL space|B;');
+      expect(res).toBeTruthy();
+    });
+  });
 });
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -383,6 +383,16 @@ function parse(text) {
   parser.parse(text);
 }
 
+function validate(text) {
+  try {
+    parse(text);
+    return true;
+  } catch (e) {
+    // ignored
+  }
+  return false;
+}
+
 export const encodeEntities = function(text) {
   let txt = text;
 
@@ -677,6 +687,7 @@ function initialize(options) {
 const mermaidAPI = {
   render,
   parse,
+  validate,
   initialize,
   getConfig
 };

diff --git a/src/mermaidAPI.spec.js b/src/mermaidAPI.spec.js
@@ -1,8 +1,8 @@
 /* eslint-env jasmine */
 import mermaidAPI from './mermaidAPI';
 
-describe('when using mermaidAPI and ', function() {
-  describe('doing initialize ', function() {
+describe('when using mermaidAPI and', function() {
+  describe('doing initialize', function() {
     beforeEach(function() {
       document.body.innerHTML = '';
     });
@@ -34,12 +34,23 @@ describe('when using mermaidAPI and ', function() {
       expect(config.testObject.test3).toBe(true);
     });
   });
-  describe('checking validity of input ', function() {
+  describe('parsing input', function() {
     it('it should throw for an invalid definiton', function() {
       expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
     });
     it('it should not throw for a valid definiton', function() {
       expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
     });
   });
+
+  describe('checking validity of input', function() {
+    it('it should return false for an invalid definiton', function() {
+      const res = mermaidAPI.validate('this is not a mermaid diagram definition');
+      expect(res).toBeFalsy();
+    });
+    it('it should return true for a valid definiton', function() {
+      const res = mermaidAPI.validate('graph TD;A--x|text including URL space|B;');
+      expect(res).toBeTruthy();
+    });
+  });
 });