New version in the docs

Fix styling of flowchart nodes with links when class definitions are assigned

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [knsv]
+#patreon: # Replace with a single Patreon username
+#open_collective: # Replace with a single Open Collective username
+#ko_fi: # Replace with a single Ko-fi username
+#tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+#community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+#liberapay: # Replace with a single Liberapay username
+#issuehunt: # Replace with a single IssueHunt username
+#otechie: # Replace with a single Otechie username
+#custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/pr-labeler.yml

@@ -0,0 +1,3 @@
+'Type: Bug / Error': 'bug/*'
+'Type: Enhancement': 'feature/*'
+'Type: Other': 'other/*'

.github/pull_request_template.md

@@ -0,0 +1,13 @@
+## :bookmark_tabs: Summary
+Brief description about the content of your PR.
+
+Resolves #<your issue id here>
+
+## :straight_ruler: Design Decisions
+Describe the way your implementation works or what design decisions you made if applicable.
+
+### :clipboard: Tasks
+Make sure you
+- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) 
+- [ ] :computer: have added unit/e2e tests (if appropriate) 
+- [ ] :bookmark: targeted `develop` branch 

.github/release-drafter.yml

@@ -0,0 +1,25 @@
+name-template: '$NEXT_PATCH_VERSION'
+tag-template: '$NEXT_PATCH_VERSION'
+categories:
+  - title: '🚀 Features'
+    labels:
+      - 'Type: Enhancement'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'Type: Bug / Error'
+  - title: '🧰 Maintenance'
+    label: 'Type: Other'
+change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
+sort-by: title
+sort-direction: ascending
+branches:
+  - develop
+exclude-labels:
+  - 'Skip changelog'
+no-changes-template: 'This release contains minor changes and bugfixes.'
+template: |
+  # Release Notes
+
+  $CHANGES
+
+  🎉 **Thanks to all contributors helping with this release!** 🎉

.github/workflows/build.yml

@@ -0,0 +1,64 @@
+name: Build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+    steps:
+    - uses: actions/checkout@v1
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Cache Node Modules
+      uses: actions/cache@v1
+      with:
+        path: .cache
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+
+    - name: Install Packages
+      run: |
+        yarn config set cache-folder $GITHUB_WORKSPACE/.cache/yarn
+        yarn install --frozen-lockfile
+      env:
+        CYPRESS_CACHE_FOLDER: ../../.cache/Cypress
+
+    - name: Run Build
+      run: yarn build
+      
+    - name: Upload Build as Artifact
+      uses: actions/upload-artifact@v1
+      with:
+        name: dist
+        path: dist
+
+    - name: Run Unit Tests
+      run: |
+        yarn test --coverage
+        
+    - name: Upload Test Results
+      uses: coverallsapp/github-action@v1.0.1
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel: true
+
+    - name: Run E2E Tests
+      run: yarn e2e
+      env:
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
+        
+    - name: Post Upload Test Results
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel-finished: true

.github/workflows/checks.yml

@@ -0,0 +1,19 @@
+on: [push]
+
+name: Static analysis
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    name: check tests
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - uses: testomatio/check-tests@stable
+      with:
+        framework: cypress
+        tests: "./cypress/integration/**/**.spec.js"
+        token: ${{ secrets.GITHUB_TOKEN }}
+        has-tests-label: true
+

.github/workflows/pr-labeler.yml

@@ -0,0 +1,13 @@
+name: Apply labels to PR
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  pr-labeler:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Label PR
+        uses: TimonVS/pr-labeler-action@v3
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-draft.yml

@@ -0,0 +1,15 @@
+name: Draft Release
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  draft-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Draft Release
+        uses: toolmantim/release-drafter@v5.2.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-preview-publish.yml

@@ -8,15 +8,12 @@ on:
 jobs:
   publish:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [10.x]
     steps:
     - uses: actions/checkout@v1
-    - name: Setup Node.js ${{ matrix.node-version }}
+    - name: Setup Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 10.x
     - name: Install Yarn
       run: npm i yarn --global
 
@@ -24,7 +21,7 @@ jobs:
       run: npm i json --global
 
     - name: Install Packages
-      run: yarn install
+      run: yarn install --frozen-lockfile
 
     - name: Publish
       run: |

.github/workflows/release-publish.yml

@@ -0,0 +1,46 @@
+name: Publish release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: fregante/setup-git-token@v1
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.x
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Install Json
+      run: npm i json --global
+
+    - name: Install Packages
+      run: yarn install --frozen-lockfile
+
+    - name: Prepare release
+      run: |
+        VERSION=${GITHUB_REF:10}
+        echo "Preparing release $VERSION"
+        git checkout -t origin/release/$VERSION
+        npm version --no-git-tag-version --allow-same-version $VERSION
+        git add package.json
+        git commit -m "Bump version $VERSION"
+        git checkout -t origin/master
+        git merge -m "Release $VERSION" --no-ff release/$VERSION
+        git push --no-verify
+
+    - name: Publish
+      run: |
+        npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
+        npm publish
+      env:
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.vscode/settings.json

@@ -1,8 +0,0 @@
-{
-  "typescript.format.enable": false,
-  "typescript.reportStyleChecksAsWarnings": false,
-  "typescript.validate.enable": false,
-  "javascript.validate.enable": false,
-  "editor.formatOnSave": false,
-  "editor.snippetSuggestions": "top"
-}

babel.config.js

@@ -3,9 +3,7 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        targets: {
-          node: 'current'
-        }
+        targets: "defaults, ie >= 11, current node"
       }
     ]
   ]

cypress/helpers/util.js

@@ -26,3 +26,9 @@ export const imgSnapshotTest = (graphStr, options, api) => {
   cy.get('svg');
   cy.percySnapshot();
 };
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+
+  cy.visit(url);
+};

cypress/integration/other/configuration.spec.js

@@ -0,0 +1,100 @@
+import { renderGraph } from '../../helpers/util';
+/* eslint-env jest */
+describe('Configuration', () => {
+  describe('arrowMarkerAbsolute', () => {
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        { }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        { }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: false
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: "false"
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute set to true', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: true
+        }
+      );
+
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(http://localhost');
+    });
+  });
+});

cypress/integration/other/interaction.spec.js

@@ -16,7 +16,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-2URL')
+        .find('g[id="2URL"]')
         .click();
 
       cy.location().should(location => {
@@ -70,7 +70,7 @@ describe('Interaction', () => {
         expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('should handle a click on a task with a bound function', () => {
+    it('should handle a click on a task with a bound function without args', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
@@ -78,9 +78,20 @@ describe('Interaction', () => {
         .find('rect#cl2')
         .click({ force: true });
 
-      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant');
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
-    it('should handle a click on a task with a bound function', () => {
+    it('should handle a click on a task with a bound function with args', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('rect#cl3')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
+    });
+
+    it('should handle a click on a task with a bound function without args', () => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
@@ -88,8 +99,19 @@ describe('Interaction', () => {
         .find('text#cl2-text')
         .click({ force: true });
 
-      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant');
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
+    it('should handle a click on a task with a bound function with args ', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body')
+        .find('text#cl3-text')
+        .click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
+    });
+
   });
 
   describe('Interaction - security level tight', () => {
@@ -108,7 +130,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -130,7 +152,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-2URL')
+        .find('g[id="2URL"]')
         .click();
 
       cy.location().should(location => {
@@ -170,7 +192,7 @@ describe('Interaction', () => {
         .find('rect#cl2')
         .click({ force: true });
 
-      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
     });
     it('should handle a click on a task with a bound function', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
@@ -180,7 +202,7 @@ describe('Interaction', () => {
         .find('text#cl2-text')
         .click({ force: true });
 
-      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
     });
   });
 
@@ -200,7 +222,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -226,7 +248,7 @@ describe('Interaction', () => {
         .find('rect#cl2')
         .click({ force: true });
 
-      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
     });
     it('should handle a click on a task with a bound function', () => {
       const url = 'http://localhost:9000/click_security_strict.html';
@@ -236,7 +258,7 @@ describe('Interaction', () => {
         .find('text#cl2-text')
         .click({ force: true });
 
-      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant');
+      cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
     });
   });
 });

cypress/integration/other/xss.spec.js

@@ -9,8 +9,27 @@ describe('XSS', () => {
     const url = mermaidUrl(str,{}, true);
 
     cy.visit(url);
+    cy.wait(1000).then(()=>{
+      cy.get('.mermaid').should('exist');
+    });
     cy.get('svg')
-    cy.percySnapshot()
+    // cy.percySnapshot()
+
+  })
+  it('should handle xss in tags in non-html mode', () => {
+    const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
+
+    const url = mermaidUrl(str,{
+      "theme": "default",
+      "flowchart": {
+        "htmlMode": false
+      }
+    }, true);
+
+    cy.visit(url);
+    // cy.get('svg')
+    // cy.percySnapshot()
+    cy.get('.malware').should('not.exist');
 
   })
 })

cypress/integration/rendering/classDiagram.spec.js

@@ -2,7 +2,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Class diagram', () => {
-  it('should render a simple class diagram', () => {
+  it('1: should render a simple class diagram', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -14,11 +14,16 @@ describe('Class diagram', () => {
       Class09 --> C2 : Where am i?
       Class09 --* C3
       Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
       Class07 : equals()
       Class07 : Object[] elementData
       Class01 : size()
       Class01 : int chimp
       Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
       Class08 <--> C2: Cool label
       class Class10 {
         &lt;&lt;service&gt;&gt;
@@ -26,11 +31,12 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {}
+      {logLevel : 1}
     );
     cy.get('svg');
   });
-  it('should render a simple class diagrams with cardinality', () => {
+
+  it('2: should render a simple class diagrams with cardinality', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -58,4 +64,229 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render a simple class diagram with different visibilities', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class01 : -int privateMethod()
+      Class01 : +int publicMethod()
+      Class01 : #int protectedMethod()
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+      {}
+    );
+    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');
+  });
+
+  it('4: should render a simple class diagram with comments', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      %% this is a comment
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('5: should render a simple class diagram with abstract method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()*
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('6: should render a simple class diagram with static method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()$
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('7: should render a simple class diagram with Generic class', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    class Class01~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('8: should render a simple class diagram with Generic class and relations', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('9: should render a simple class diagram with clickable link', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      link class01 "google.com" "A Tooltip"
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('10: should render a simple class diagram with clickable callback', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      callback class01 "functionCall" "A Tooltip"
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('11: should render a simple class diagram with return type on method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      class Class10~T~ {
+        int[] id
+        test(int[] ids) bool
+        testArray() bool[]
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/current.spec.js

@@ -2,19 +2,20 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('State diagram', () => {
-  it('should render a flowchart full of circles', () => {
+  it('should render a state with states in it', () => {
     imgSnapshotTest(
       `
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-      Important information! You\ncan write
-      notes with multiple lines...
-      Here is another line...
-      And another line...
-    end note
+      stateDiagram
+      state PersonalizedCockpit {
+        Other
+        state  Parent {
+          C
+        }
+    }
     `,
-      {}
+      {
+        logLevel: 0,
+      }
     );
   });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -1,7 +1,7 @@
 /* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util';
 
-describe('Flowcart', () => {
+describe('Flowchart', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
     imgSnapshotTest(
       `graph TD
@@ -14,6 +14,7 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('2: should render a simple flowchart with htmlLabels', () => {
     imgSnapshotTest(
       `graph TD
@@ -26,6 +27,7 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: true } }
     );
   });
+
   it('3: should render a simple flowchart with line breaks', () => {
     imgSnapshotTest(
       `
@@ -55,7 +57,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('4: should style nodes via a class.', () => {
+  it('5: should style nodes via a class.', () => {
     imgSnapshotTest(
       `
     graph TD
@@ -71,7 +73,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('5: should render a flowchart full of circles', () => {
+  it('6: should render a flowchart full of circles', () => {
     imgSnapshotTest(
       `
     graph LR
@@ -99,7 +101,8 @@ describe('Flowcart', () => {
       {}
     );
   });
-  it('6: should render a flowchart full of icons', () => {
+
+  it('7: should render a flowchart full of icons', () => {
     imgSnapshotTest(
       `
     graph TD
@@ -170,7 +173,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('7: should render labels with numbers at the start', () => {
+  it('8: should render labels with numbers at the start', () => {
     imgSnapshotTest(
       `
     graph TB;subgraph "number as labels";1;end;
@@ -178,7 +181,8 @@ describe('Flowcart', () => {
       {}
     );
   });
-  it('8: should render subgraphs', () => {
+
+  it('9: should render subgraphs', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -190,7 +194,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('9: should render subgraphs with a title startign with a digit', () => {
+  it('10: should render subgraphs with a title starting with a digit', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -202,7 +206,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('10: should render styled subgraphs', () => {
+  it('11: should render styled subgraphs', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -237,7 +241,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('11: should render a flowchart with ling sames and class definitoins', () => {
+  it('12: should render a flowchart with long names and class definitions', () => {
     imgSnapshotTest(
       `graph LR
       sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -339,7 +343,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('12: should render color of styled nodes', () => {
+  it('13: should render color of styled nodes', () => {
     imgSnapshotTest(
       `
       graph LR
@@ -356,7 +360,8 @@ describe('Flowcart', () => {
       }
     );
   });
-  it('13: should render hexagons', () => {
+
+  it('14: should render hexagons', () => {
     imgSnapshotTest(
       `
       graph TD
@@ -369,6 +374,7 @@ describe('Flowcart', () => {
         click B testClick "click test"
         classDef someclass fill:#f96;
         class A someclass;
+        class C someclass;
       `,
       {
         listUrl: false,
@@ -377,4 +383,145 @@ describe('Flowcart', () => {
       }
     );
   });
+
+  it('15: should render a simple flowchart with comments', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('16: Render Stadium shape', () => {
+    imgSnapshotTest(
+      ` graph TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('17: Render multiline texts', () => {
+    imgSnapshotTest(
+      `graph LR
+        A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
+        C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
+        E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
+        A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
+        C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
+        E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
+        linkStyle 0 stroke:DarkGray,stroke-width:2px
+        linkStyle 1 stroke:DarkGray,stroke-width:2px
+        linkStyle 2 stroke:DarkGray,stroke-width:2px
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('18: Chaining of nodes', () => {
+    imgSnapshotTest(
+      `graph LR
+        a --> b --> c
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('19: Multiple nodes and chaining in one statement', () => {
+    imgSnapshotTest(
+      `graph LR
+        a --> b & c--> d
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('20: Multiple nodes and chaining in one statement', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
+      classDef exClass background:#bbb,border:1px solid red;
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('21: Render cylindrical shape', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[(cylindrical<br />shape<br />test)]
+      A -->|Get money| B1[(Go shopping 1)]
+      A -->|Get money| B2[(Go shopping 2)]
+      A -->|Get money| B3[(Go shopping 3)]
+      C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
+      B1 --> C
+      B2 --> C
+      B3 --> C
+      C -->|One| D[(Laptop)]
+      C -->|Two| E[(iPhone)]
+      C -->|Three| F[(Car)]
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;`,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('22: Render a simple flowchart with nodeSpacing set to 100', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { nodeSpacing: 50 } }
+    );
+  });
+
+  it('23: Render a simple flowchart with rankSpacing set to 100', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { rankSpacing: '100' } }
+    );
+  });
+
+  it('24: Keep node label text (if already defined) when a style is applied', () => {
+    imgSnapshotTest(
+      `graph LR
+      A(( )) -->|step 1| B(( ))
+      B(( )) -->|step 2| C(( ))
+      C(( )) -->|step 3| D(( ))
+      linkStyle 1 stroke:greenyellow,stroke-width:2px
+      style C fill:greenyellow,stroke:green,stroke-width:4px
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -38,4 +38,96 @@ describe('Sequencediagram', () => {
       {}
     );
   });
+  it('Handle multiline section titles with different line breaks', () => {
+    imgSnapshotTest(
+      `
+      gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title       GANTT diagram with multiline section titles
+      excludes    weekdays 2014-01-10
+
+      section A section<br>multiline
+      Completed task            : done,    des1, 2014-01-06,2014-01-08
+      Active task               : active,  des2, 2014-01-09, 3d
+      Future task               :          des3, after des2, 5d
+      Future task2              :          des4, after des3, 5d
+
+      section Critical tasks<br/>multiline
+      Completed task in the critical line : crit, done, 2014-01-06, 24h
+      Implement parser and jison          : crit, done, after des1, 2d
+      Create tests for parser             : crit, active, 3d
+      Future task in critical line        : crit, 5d
+      Create tests for renderer           : 2d
+      Add to mermaid                      : 1d
+
+      section Documentation<br />multiline
+      Describe gantt syntax               : active, a1, after des1, 3d
+      Add gantt diagram to demo page      : after a1, 20h
+      Add another diagram to demo page    : doc1, after a1, 48h
+
+      section Last section<br	/>multiline
+      Describe gantt syntax               : after doc1, 3d
+      Add gantt diagram to demo page      : 20h
+      Add another diagram to demo page    : 48h
+      `,
+      {}
+    );
+  });
+  it('Multiple dependencies syntax', () => {
+    imgSnapshotTest(
+      `
+      gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title Adding GANTT diagram to mermaid
+      excludes weekdays 2014-01-10
+
+      apple :a, 2017-07-20, 1w
+      banana :crit, b, 2017-07-23, 1d
+      cherry :active, c, after b a, 1d
+      `,
+      {}
+    );
+  });
+  it('should render a gantt chart for issue #1060', () => {
+    imgSnapshotTest(
+      `
+      gantt
+      excludes weekdays 2017-01-10
+      title Projects Timeline
+  
+      section asdf
+          specs :done, :ps, 2019-05-10, 50d
+          Plasma      :pc, 2019-06-20, 60d
+          Rollup  :or, 2019-08-20, 50d
+      
+      section CEL
+              
+          plasma-chamber      :done, :pc, 2019-05-20, 60d
+          Plasma Implementation (Rust)      :por, 2019-06-20, 120d
+          Predicates (Atomic Swap)      :pred, 2019-07-20, 60d
+      
+      section DEX 💰
+          
+          History zkSNARK  :hs, 2019-08-10, 40d
+          Exit           :vs, after hs, 60d
+          PredicateSpec          :ps, 2019-09-1, 20d
+          PlasmaIntegration     :pi, after ps,40d
+      
+      
+      section Events 🏁
+      
+      ETHBoston :done, :eb, 2019-09-08, 3d
+      DevCon :active, :dc, 2019-10-08, 3d
+      
+      section Plasma Calls & updates ✨
+          OVM      :ovm, 2019-07-12, 120d
+      Plasma call 26 :pc26, 2019-08-21, 1d
+      Plasma call 27 :pc27, 2019-09-03, 1d
+      Plasma call 28 :pc28, 2019-09-17, 1d 
+        `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -2,20 +2,20 @@
 import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Sequencediagram', () => {
-  it('should render a simple git graph', () => {
-    imgSnapshotTest(
-      `
-    gitGraph:
-      commit
-      branch newbranch
-      checkout newbranch
-      commit
-      commit
-      checkout master
-      commit
-      commit
-      merge newbranch`,
-      { logLevel: 0 }
-    );
-  });
+  // it('should render a simple git graph', () => {
+  //   imgSnapshotTest(
+  //     `
+  //   gitGraph:
+  //     commit
+  //     branch newbranch
+  //     checkout newbranch
+  //     commit
+  //     commit
+  //     checkout master
+  //     commit
+  //     commit
+  //     merge newbranch`,
+  //     { logLevel: 0 }
+  //   );
+  // });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -2,8 +2,8 @@
 
 import { imgSnapshotTest } from '../../helpers/util';
 
-context('Aliasing', () => {
-  it('should render a simple sequence diagrams', () => {
+context('Sequence diagram', () => {
+  it('should render a simple sequence diagram', () => {
     imgSnapshotTest(
       `
       sequenceDiagram
@@ -32,6 +32,26 @@ context('Aliasing', () => {
       {}
     );
   });
+  it('should handle different line breaks', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      participant 1 as multiline<br>using #lt;br#gt;
+      participant 2 as multiline<br/>using #lt;br/#gt;
+      participant 3 as multiline<br />using #lt;br /#gt;
+      participant 4 as multiline<br \t/>using #lt;br \t/#gt;
+      1->>2: multiline<br>using #lt;br#gt;
+      note right of 2: multiline<br>using #lt;br#gt;
+      2->>3: multiline<br/>using #lt;br/#gt;
+      note right of 3: multiline<br/>using #lt;br/#gt;
+      3->>4: multiline<br />using #lt;br /#gt;
+      note right of 4: multiline<br />using #lt;br /#gt;
+      4->>1: multiline<br />using #lt;br /#gt;
+      note right of 1: multiline<br \t/>using #lt;br \t/#gt;
+    `,
+      {}
+    );
+  });
   context('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(

cypress/integration/rendering/stateDiagram.spec.js

@@ -106,6 +106,34 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a note with multiple lines in it', () => {
+    imgSnapshotTest(
+      `
+    stateDiagram
+    State1: The state with a note
+    note right of State1
+      Important information! You\ncan write
+      notes with multiple lines...
+      Here is another line...
+      And another line...
+    end note
+    `,
+      {}
+    );
+  });
+  it('should handle multiline notes with different line breaks', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+      State1
+      note right of State1
+      Line1<br>Line2<br/>Line3<br />Line4<br	/>Line5
+      end note
+      `,
+      {}
+    );
+  });
+
   it('should render a states with descriptions including multi-line descriptions', () => {
     imgSnapshotTest(
       `
@@ -276,4 +304,33 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a state with states in it', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+      state PilotCockpit {
+        state  Parent {
+          C
+        }
+    }
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
+  it('Simplest compone state', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+        state  Parent {
+          C
+        }
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
+
 });

cypress/platform/click_security_loose.html

@@ -49,9 +49,11 @@
     section Clickable
     Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
+    Calling a Callback with args :cl3, after cl1, 3d
 
     click cl1 href "http://localhost:9000/webpackUsage.html"
-    click cl2 call clickByGantt("test", test, test)
+    click cl2 call clickByGantt()
+    click cl3 call clickByGantt("test1", test2, test3)
 
     section Last section
     Describe gantt syntax               :after doc1, 3d
@@ -69,11 +71,14 @@
 
     document.getElementsByTagName('body')[0].appendChild(div)
   }
-  function clickByGantt(elemName) {
+  function clickByGantt(arg1, arg2, arg3) {
     const div = document.createElement('div')
     div.className = 'created-by-gant-click'
     div.style = 'padding: 20px; background: green; color: white;'
     div.innerText = 'Clicked By Gant'
+    if (arg1) div.innerText += ' ' + arg1;
+    if (arg2) div.innerText += ' ' + arg2;
+    if (arg3) div.innerText += ' ' + arg3;
 
     document.getElementsByTagName('body')[0].appendChild(div)
   }

cypress/platform/click_security_strict.html

@@ -49,9 +49,11 @@
     section Clickable
     Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
+    Calling a Callback with args :cl3, after cl1, 3d
 
     click cl1 href "http://localhost:9000/webpackUsage.html"
-    click cl2 call clickByGantt("test", test, test)
+    click cl2 call clickByGantt()
+    click cl3 call clickByGantt("test1", test2, test3)
 
     section Last section
     Describe gantt syntax               :after doc1, 3d
@@ -69,11 +71,14 @@
 
     document.getElementsByTagName('body')[0].appendChild(div)
   }
-  function clickByGantt(elemName) {
+  function clickByGantt(arg1, arg2, arg3) {
     const div = document.createElement('div')
     div.className = 'created-by-gant-click'
     div.style = 'padding: 20px; background: green; color: white;'
     div.innerText = 'Clicked By Gant'
+    if (arg1) div.innerText += ' ' + arg1;
+    if (arg2) div.innerText += ' ' + arg2;
+    if (arg3) div.innerText += ' ' + arg3;
 
     document.getElementsByTagName('body')[0].appendChild(div)
   }

cypress/platform/current.html

@@ -4,24 +4,39 @@
       href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
       rel="stylesheet"
     />
+    <style>
+      body {background: black}
+      h1 { color: white;}
+      .arrowheadPath {fill: red;}
 
+      .edgePath .path {stroke: red;}
+
+
+    </style>
   </head>
   <body>
     <h1>info below</h1>
-    <div class="mermaid">graph TB
-      a --> b
-      a --> c
-      a --> d
-    </div>
-    <script src="./mermaid.js"></script>
+    <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
+      </div>
+</div>
+  <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'forest',
+        theme: 'dark',
         // arrowMarkerAbsolute: true,
-        // themeCSS: '.node rect { fill: red; }',
-        logLevel: 3,
-        flowchart: { curve: 'linear' },
-        gantt: { axisFormat: '%m/%d/%Y' },
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { curve: 'linear', "htmlLabels": false },
+        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
       });

cypress/platform/e2e.html

@@ -4,9 +4,8 @@
     <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
     <style>
       body {
-        /* font-family: 'Mansalva', cursive;
-        font-family: 'Mansalva', cursive; */
-        font-family: 'times';
+        /* font-family: 'Mansalva', cursive;*/
+        font-family: 'Mansalva', cursive;
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;

cypress/platform/viewer.js

@@ -14,13 +14,23 @@ 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 +41,53 @@ 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;
+      }
 
-    mermaid2.render(
-      'newid',
-      graphObj.code,
-      (svgCode, bindFunctions) => {
-        div.innerHTML = svgCode;
+      mermaid2.initialize(graphObj.mermaid);
 
-        bindFunctions(div);
-      },
-      div
-    );
+      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
+      console.warn('graphObj.mermaid', graphObj.mermaid);
+      document.getElementsByTagName('body')[0].appendChild(div);
+      mermaid2.initialize(graphObj.mermaid);
+
+      mermaid2.render(
+        'newid',
+        graphObj.code,
+        (svgCode, bindFunctions) => {
+          div.innerHTML = svgCode;
+
+          if (bindFunctions) bindFunctions(div);
+        },
+        div
+      );
+    }
   }
 };
 

cypress/platform/xss.html

@@ -28,7 +28,10 @@
         div.id = 'the-malware'
         div.className = 'malware'
         div.innerHTML = 'XSS Succeeded'
-        document.getElementsByTagName('body')[0].appendChild(div)
+        document.getElementsByTagName('body')[0].appendChild(div);
+        // const el = document.querySelector('.mermaid');
+        // el.parentNode.removeChild(el);
+        throw new Error('XSS Succeded');
       }
     </script>
   </head>

dist/index.html

@@ -289,16 +289,69 @@ graph TB
       style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
   </div>
   <div class="mermaid">
-graph TD
-A[Christmas] -->|Get money| B(Go shopping)
-B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
-C -->|One| D[Laptop]
-C -->|Two| E[iPhone]
-C -->|Three| F[Car]
-click A "index.html#link-clicked" "link test"
-click B testClick "click test"
-classDef someclass fill:#f96;
-class A someclass;
+    graph TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[Car]
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+    class C someclass;
+  </div>
+  <div class="mermaid">
+    graph TD
+    A([stadium shape test])
+    A -->|Get money| B([Go shopping])
+    B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+    C -->|One| D([Laptop])
+    C -->|Two| E([iPhone])
+    C -->|Three| F([Car<br/>wroom wroom])
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+    class C someclass;
+  </div>
+  <div class="mermaid">
+    graph LR
+    A[(cylindrical<br />shape<br />test)]
+    A -->|Get money| B1[(Go shopping 1)]
+    A -->|Get money| B2[(Go shopping 2)]
+    A -->|Get money| B3[(Go shopping 3)]
+    C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
+    B1 --> C
+    B2 --> C
+    B3 --> C
+    C -->|One| D[(Laptop)]
+    C -->|Two| E[(iPhone)]
+    C -->|Three| F[(Car)]
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+  </div>
+  <div class="mermaid">
+    graph LR
+    A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
+    C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
+    E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
+    A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
+    C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
+    E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
+    linkStyle 0 stroke:DarkGray,stroke-width:2px
+    linkStyle 1 stroke:DarkGray,stroke-width:2px
+    linkStyle 2 stroke:DarkGray,stroke-width:2px
+  </div>
+  <div class="mermaid">
+    graph LR
+    A(( )) -->|step 1| B(( ))
+    B(( )) -->|step 2| C(( ))
+    C(( )) -->|step 3| D(( ))
+    linkStyle 1 stroke:greenyellow,stroke-width:2px
+    style C fill:greenyellow,stroke:green,stroke-width:4px
   </div>
 
   <hr/>
@@ -331,6 +384,21 @@ and
 Alice -->> John: Parallel message 2
 end
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    participant 1 as multiline<br>using #lt;br#gt;
+    participant 2 as multiline<br/>using #lt;br/#gt;
+    participant 3 as multiline<br />using #lt;br /#gt;
+    participant 4 as multiline<br 	/>using #lt;br 	/#gt;
+    1->>2: multiline<br>using #lt;br#gt;
+    note right of 2: multiline<br>using #lt;br#gt;
+    2->>3: multiline<br/>using #lt;br/#gt;
+    note right of 3: multiline<br/>using #lt;br/#gt;
+    3->>4: multiline<br />using #lt;br /#gt;
+    note right of 4: multiline<br />using #lt;br /#gt;
+    4->>1: multiline<br 	/>using #lt;br 	/#gt;
+    note right of 1: multiline<br 	/>using #lt;br 	/#gt;
+  </div>
 
   <hr/>
 
@@ -372,6 +440,37 @@ Describe gantt syntax               :after doc1, 3d
 Add gantt diagram to demo page      : 20h
 Add another diagram to demo page    : 48h
   </div>
+  <div class="mermaid">
+    gantt
+    dateFormat  YYYY-MM-DD
+    axisFormat  %d/%m
+    title       GANTT diagram with multiline section titles
+    excludes    weekdays 2014-01-10
+
+    section A section<br>multiline
+    Completed task            : done,    des1, 2014-01-06,2014-01-08
+    Active task               : active,  des2, 2014-01-09, 3d
+    Future task               :          des3, after des2, 5d
+    Future task2              :          des4, after des3, 5d
+
+    section Critical tasks<br/>multiline
+    Completed task in the critical line : crit, done, 2014-01-06, 24h
+    Implement parser and jison          : crit, done, after des1, 2d
+    Create tests for parser             : crit, active, 3d
+    Future task in critical line        : crit, 5d
+    Create tests for renderer           : 2d
+    Add to mermaid                      : 1d
+
+    section Documentation<br />multiline
+    Describe gantt syntax               : active, a1, after des1, 3d
+    Add gantt diagram to demo page      : after a1, 20h
+    Add another diagram to demo page    : doc1, after a1, 48h
+
+    section Last section<br	/>multiline
+    Describe gantt syntax               : after doc1, 3d
+    Add gantt diagram to demo page      : 20h
+    Add another diagram to demo page    : 48h
+  </div>
 
   <hr/>
 
@@ -408,9 +507,9 @@ Class09 "0" --* "1..n" C3
 Class09 --|> Class07
 Class07 : equals()
 Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
+Class01 : #size()
+Class01 : -int chimp
+Class01 : +int gorilla
 Class08 <--> C2: Cool label
 class Class10 {
   &lt;&lt;service&gt;&gt;
@@ -418,20 +517,58 @@ class Class10 {
   size()
 }
   </div>
+
+  <div class="mermaid">
+    classDiagram
+    class Class01~T~
+    Class01 : #size()
+    Class01 : -int chimp
+    Class01 : +int gorilla
+    class Class10~T~ {
+      &lt;&lt;service&gt;&gt;
+      int id
+      size()
+    }
+  </div>
+
+  <div class="mermaid">
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    &lt;&lt;interface&gt;&gt; Class01
+    Class03~T~ "0" *-- "0..n" Class04
+    Class05 "1" o-- "many" Class06
+    Class07~T~ .. Class08
+    Class09 "many" --> "1" C2  : Where am i?
+    Class09 "0" --* "1..n" C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : #size()
+    Class01 : -int chimp
+    Class01 : +int gorilla
+    Class08 <--> C2: Cool label
+    class Class10 {
+      &lt;&lt;service&gt;&gt;
+      int id
+      size()
+    }
+  </div>
+
   <div class="mermaid">
     stateDiagram
       State1
-      </div>
+  </div>
 
-      <hr>
-      <div class="mermaid">
-        stateDiagram
-        [*] --> First
-        state First {
-            [*] --> second
-            second --> [*]
-        }
-          </div>
+  <hr>
+
+  <div class="mermaid">
+    stateDiagram
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+  </div>
   <div class="mermaid">
     stateDiagram
         State1: The state with a note
@@ -441,8 +578,14 @@ class Class10 {
         end note
         State1 --> State2
         note left of State2 : This is the note to the left.
-      </div>
-
+  </div>
+  <div class="mermaid">
+    stateDiagram
+    State1
+    note right of State1
+    Line1<br>Line2<br/>Line3<br />Line4<br	/>Line5
+    end note
+  </div>
 
   <script src="./mermaid.js"></script>
   <script>

docs/README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid)
+[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid)
 [![Coverage Status](https://coveralls.io/repos/github/knsv/mermaid/badge.svg?branch=master)](https://coveralls.io/github/knsv/mermaid?branch=master)
 [![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 

docs/classDiagram.md

@@ -29,7 +29,7 @@ Mermaid can render class diagrams.
           +bool is_wild
           +run()
       }
-     
+
 ```
 ```mermaid
  classDiagram
@@ -52,8 +52,8 @@ Mermaid can render class diagrams.
       class Zebra{
           +bool is_wild
           +run()
-      }  
-    
+      }
+
 ```
 
 ## Syntax
@@ -105,55 +105,67 @@ Naming convention: a class name should be composed of alphanumeric (unicode allo
 
 UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
 
-#### Visibility
-To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member's name, but is it optional:
+Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and others as attributes. To indicate a return type for a method, enclose the type within **square brackets** `[]`
 
-- `+`	Public
-- `-`	Private
-- `#`	Protected
-- `~`	Package
 
-Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The one with `()` are treated as functions/methods, and others as attributes.
-
-There are two ways to define the members of a class, and regardless of the whichever syntax is used to define the members, the output will still be same. The two different ways are :
-- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: 
+There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :
+- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
 
  ```
   class BankAccount
   BankAccount : +String owner
   BankAccount : +BigDecimal balance
-  BankAccount : +deposit(amount)
-  BankAccount : +withdrawl(amount)
+  BankAccount : +deposit(amount) bool
+  BankAccount : +withdrawal(amount)
   ```
-  ```mermaid
+
+  ```  mermaid
     classDiagram
     class BankAccount
     BankAccount : +String owner
     BankAccount : +BigDecimal balance
-    BankAccount : +deposit(amount)
+    BankAccount : +deposit(amount) : bool
     BankAccount : +withdrawl(amount)
-```
+  ```
 
 - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
 ```
 class BankAccount{
     +String owner
     +BigDecimal balance
-    +deposit(amount)
+    +deposit(amount) bool
     +withdrawl(amount)
 }
 ```
 ```mermaid
-    classDiagram
+  classDiagram
     class BankAccount{
         +String owner
         +BigDecimal balance
-        +deposit(amount)
+        +deposit(amount) : bool
         +withdrawl(amount)
-}```
+}
+```
+
+
+#### Return Type
+Optionally you can end the method/function definition with the data type that will be returned
+
+#### Visibility
+To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member's name, but it is optional:
+
+- `+`	Public
+- `-`	Private
+- `#`	Protected
+- `~`	Package
+
+>_note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
+> - `*` Abstract e.g.: `someAbstractMethod()*`
+> - `$` Static e.g.: `someStaticMethod()$`
+
 
 ## Defining Relationship
-A relationship is a general term covering the specific types of logical connections found on class and object diagrams. 
+A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
 ```
 [classA][Arrow][ClassB]:LabelText
 ```
@@ -161,22 +173,26 @@ A relationship is a general term covering the specific types of logical connecti
 There are different types of relations defined for classes under UML which are currently supported:
 
 Type | Description
----  | ---
-<\|--| Inheritance
-*--  | Composition
-o--  | Aggregation
--->  | Association
---   | Link 
+---   | ---
+<\|-- | Inheritance
+*--   | Composition
+o--   | Aggregation
+-->   | Association
+--    | Link (Solid)
+..>   | Dependency
+..\|> | Realization
+..    | Link (Dashed)
 
-<!--- TODO ..>  Dependency--->
 ```
 classDiagram
 classA <|-- classB
 classC *-- classD
 classE o-- classF
 classG <-- classH
-classI <.. classJ
-classK .. classL
+classI -- classJ
+classK <.. classL
+classM <|.. classN
+classO .. classP
 
 ```
 
@@ -186,34 +202,40 @@ classA <|-- classB
 classC *-- classD
 classE o-- classF
 classG <-- classH
-classI <.. classJ
-classK .. classL
+classI -- classJ
+classK <.. classL
+classM <|.. classN
+classO .. classP
 
 ```
-We can use the arrowheads in opposite directions as well :
+We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well :
 ```
 classDiagram
-classA --|> classB
-classC --* classD
-classE --o classF
-classG <--> classH
-classI ..> classJ
-classK .. classL
+classA --|> classB : Inheritance
+classC --* classD : Composition
+classE --o classF : Aggregation
+classG --> classH : Association
+classI -- classJ : Link(Solid)
+classK ..> classL : Dependency
+classM ..|> classN : Realization
+classO .. classP : Link(Dashed)
 
 ```
 
 ```mermaid
 classDiagram
-classA --|> classB
-classC --* classD
-classE --o classF
-classG <--> classH
-classI ..> classJ
-classK .. classL
+classA --|> classB : Inheritance
+classC --* classD : Composition
+classE --o classF : Aggregation
+classG --> classH : Association
+classI -- classJ : Link(Solid)
+classK ..> classL : Dependency
+classM ..|> classN : Realization
+classO .. classP : Link(Dashed)
 
 
 ```
-## Labels on Relations 
+## Labels on Relations
 
 It is possible to add a label text to a relation:
 ```
@@ -234,7 +256,7 @@ classE o-- classF : association
 ## Cardinality / Multiplicity on relations
 Multiplicity or cardinality in class diagrams indicates the number of instances of one class linked to one instance of the other class. For example, one company will have one or more employees, but each employee works for just one company.
 
-Multiplicity notations are placed near the ends of an association. 
+Multiplicity notations are placed near the ends of an association.
 
 The different cardinality options are :
 - `0..1`        Zero or one
@@ -262,7 +284,7 @@ classDiagram
     Student "1" --> "1..*" Course
     Galaxy --> "many" Star : Contains
 ```
-## Annotations on classes 
+## Annotations on classes
 
 It is possible to annotate classes with a specific marker text which is like meta-data for the class, giving a clear indication about its nature. Some common annotations examples could be:
 - `<<Interface>>`   To represent an Interface class
@@ -322,7 +344,115 @@ class Color{
 }
 ```
 
+## Comments
 
+Comments can be entered within a class diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax
+
+```
+classDiagram
+%% This whole line is a comment classDiagram class Shape <<interface>>
+class Shape{
+    <<interface>>
+    noOfVertices
+    draw()
+}
+
+```
+
+## Interaction
+
+It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+
+You would define these actions on a separate line after all classes have been declared.
+
+```
+action className "reference" "tooltip"
+```
+
+* _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
+* _className_ is the id of the node that the action will be associated with
+* _reference_ is either the url link, or the function name for callback. (note: callback function will be called with the nodeId as parameter).
+* (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
+
+### Examples:
+
+*URL Link:*
+
+```
+classDiagram
+class Shape
+link Shape "http://www.github.com" "This is a tooltip for a link"
+```
+
+*Callback:*
+
+```
+classDiagram
+class Shape
+callback Shape "callbackFunction" "This is a tooltip for a callback"
+```
+
+```
+<script>
+    var callbackFunction = function(){
+        alert('A callback was triggered');
+    }
+<script>
+```
+
+```mermaid
+classDiagram
+    class Class01
+    class Class02
+    callback Class01 "callbackFunction" "Callback tooltip"
+    link Class02 "http://www.github.com" "This is a link"
+```
+
+> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
+
+Beginners tip, a full example using interactive links in an html context:
+```
+<body>
+  <div class="mermaid">
+    classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+      }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+      }
+    class Zebra{
+      +bool is_wild
+      +run()
+      }
+
+    	callback Duck callback "Tooltip"
+    	click Zebra "http://www.github.com" "This is a link"
+  </div>
+
+  <script>
+  	var callback = function(){
+        alert('A callback was triggered');
+    }
+    var config = {
+      startOnLoad:true,
+      securityLevel:'loose',
+    };
+
+    mermaid.initialize(config);
+  </script>
+</body>
+```
 
 ## Styling
 
@@ -334,7 +464,7 @@ Class               | Description
 ---                 | ---
 g.classGroup text   | Styles for general class text
 classGroup .title   | Styles for general class title
-g.classGroup rect   | Styles for class diagram rectangle 
+g.classGroup rect   | Styles for class diagram rectangle
 g.classGroup line   | Styles for class diagram line
 .classLabel .box    | Styles for class label box
 .classLabel .label  | Styles for class label text

docs/flowchart.md

@@ -78,6 +78,28 @@ graph LR
     id1(This is the text in the box)
 ```
 
+### A stadium-shaped node
+
+```
+graph LR
+    id1([This is the text in the box])
+```
+```mermaid
+graph LR
+    id1([This is the text in the box])
+```
+
+### A node in a cylindrical shape
+
+```
+graph LR
+    id1[(Database)]
+```
+```mermaid
+graph LR
+    id1[(Database)]
+```
+
 ### A node in the form of a circle
 
 ```
@@ -123,6 +145,28 @@ graph LR
     id1{{This is the text in the box}}
 ```
 
+### Parallelogram
+
+```
+graph TD
+    id1[/This is the text in the box/]
+```
+```mermaid
+graph TD
+    id1[/This is the text in the box/]
+```
+
+### Parallelogram alt
+
+```
+graph TD
+    id1[\This is the text in the box\]
+```
+```mermaid
+graph TD
+    id1[\This is the text in the box\]
+```
+
 ### Trapezoid
 
 ```
@@ -270,6 +314,37 @@ graph LR
    A -- text --> B -- text2 --> C
 ```
 
+It is also possible to declare multiple nodes links in the same line as per below:
+```
+graph LR
+   a --> b & c--> d
+```
+```mermaid
+graph LR
+   a --> b & c--> d
+```
+
+You can then describe dependencies in a very expressive way. Like the onliner below:
+```
+graph TB
+    A & B--> C & D
+```
+```mermaid
+graph TB
+    A & B--> C & D
+```
+If you describe the same diagram using the the basic syntax, it will take four lines. A
+word of warning, one could go overboard with this making the graph harder to read in
+markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little.
+This goes for expressive syntaxes as well.
+```
+graph TB
+    A --> C
+    A --> D
+    B --> C
+    B --> D
+```
+
 
 ## Special characters that break syntax
 
@@ -402,6 +477,16 @@ Beginners tip, a full example using interactive links in a html context:
 </body>
 ```
 
+### Comments
+
+Comments can be entered within a flow diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
+
+```
+graph LR
+%% this is a comment A -- text --> B{node}
+   A -- text --> B -- text2 --> C
+```
+
 ## Styling and classes
 
 ### Styling links
@@ -458,6 +543,19 @@ It is also possible to attach a class to a list of nodes in one statement:
     class nodeId1,nodeId2 className;
 ```
 
+A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
+
+```
+graph LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+```mermaid
+graph LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+
 
 ### Css classes
 

docs/gantt.md

@@ -87,6 +87,20 @@ gantt
        Add another diagram to demo page    :48h
    ```
 
+It is possible to set multiple depenendenies separated by space:
+```
+    gantt
+        apple :a, 2017-07-20, 1w
+        banana :crit, b, 2017-07-23, 1d
+        cherry :active, c, after b a, 1d
+```
+```
+    gantt
+        apple :a, 2017-07-20, 1w
+        banana :crit, b, 2017-07-23, 1d
+        cherry :active, c, after b a, 1d
+```
+
 ### Title
 
 Tbd
@@ -173,6 +187,23 @@ More info in: http://momentjs.com/docs/#/parsing/string-format/
 
 More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
 
+## Comments
+
+Comments can be entered within a gantt chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+
+```
+gantt
+    title A Gantt Diagram
+    %% this is a comment
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+
+```
 
 ## Styling
 
@@ -271,3 +302,48 @@ Param | Descriotion | Default value
 --- | --- | ---
 mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
 bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
+
+## Interaction
+
+It is possible to bind a click event to a task, the click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+
+```
+click taskId call callback(arguments)
+click taskId href URL
+```
+
+* taskId is the id of the task
+* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
+
+Beginners tip, a full example using interactive links in an html context:
+```
+<body>
+  <div class="mermaid">
+    gantt
+      dateFormat  YYYY-MM-DD
+
+      section Clickable
+      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
+      Print arguments         :cl2, after cl1, 3d
+      Print task              :cl3, after cl2, 3d
+
+      click cl1 href "https://mermaidjs.github.io/"
+      click cl2 call printArguments("test1", "test2", test3)
+      click cl3 call printTask()
+  </div>
+
+  <script>
+    var printArguments = function(arg1, arg2, arg3) {
+      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
+    }
+    var printTask = function(taskId) {
+      alert('taskId: ' + taskId);
+    }
+    var config = {
+      startOnLoad:true,
+      securityLevel:'loose',
+    };
+    mermaid.initialize(config);
+  </script>
+</body>
+```

docs/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.1/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.6/dist/mermaid.min.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

docs/mermaidAPI.md

@@ -19,7 +19,7 @@ These are the default options which can be overridden with the initialization ca
 <pre>
 mermaid.initialize({
   flowchart:{
-     htmlLabels: false
+    htmlLabels: false
   }
 });
 </pre>
@@ -27,7 +27,7 @@ mermaid.initialize({
 **Example 2:**
 
 <pre>
- <script>
+&lt;script>
   var config = {
     startOnLoad:true,
     flowchart:{
@@ -39,10 +39,10 @@ mermaid.initialize({
     securityLevel:'loose',
   };
   mermaid.initialize(config);
-</script>
-
+&lt;/script>
 </pre>
-A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
+
+A summary of all options and their defaults is found [here][2]. A description of each option follows below.
 
 ## theme
 
@@ -105,6 +105,18 @@ Flag for setting whether or not a html tag should be used for rendering labels
 on the edges.
 **Default value true**.
 
+### nodeSpacing
+
+Defines the spacing between nodes on the same level (meaning horizontal spacing for
+TB or BT graphs, and the vertical spacing for LR as well as RL graphs).
+**Default value 50**.
+
+### rankSpacing
+
+Defines the spacing between nodes on different levels (meaning vertical spacing for
+TB or BT graphs, and the horizontal spacing for LR as well as RL graphs).
+**Default value 50**.
+
 ### curve
 
 How mermaid renders curves for flowcharts. Possible values are
@@ -321,3 +333,5 @@ mermaidAPI.initialize({
 </pre>
 
 [1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
+
+[2]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults

docs/sequenceDiagram.md

@@ -271,7 +271,16 @@ sequenceDiagram
 
 ```
 
+## Comments
 
+Comments can be entered within a sequence diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+
+```
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    %% this is a comment
+    John-->>Alice: Great!
+```
 
 ## Styling
 

docs/stateDiagram.md

@@ -322,6 +322,21 @@ As in plantUml you can specify concurrency using the -- symbol.
         }
 ```
 
+## Comments
+
+Comments can be entered within a state diagram chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+
+```
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+%% this is a comment
+    Still --> Moving
+    Moving --> Still %% another comment
+    Moving --> Crash
+    Crash --> [*]
+```
+
 ## Styling
 
 Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss

docs/usage.md

@@ -159,14 +159,13 @@ The main idea of the API is to be able to call a render function with the graph
 will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
 fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this
-could be used. The example just logs the resulting svg to the javascript console.
+The example below show an outline of how this could be used. The example just logs the resulting svg to the javascript console.
 
 ```html
-<script src="mermaidAPI.js"></script>
+<script src="mermaid.js"></script>
 
 <script>
-    mermaidAPI.initialize({
+    mermaid.mermaidAPI.initialize({
         startOnLoad:false
     });
     $(function(){
@@ -178,7 +177,7 @@ could be used. The example just logs the resulting svg to the javascript console
         };
 
         var graphDefinition = 'graph TB\na-->b';
-        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+        var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
     });
 </script>
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.2",
+  "version": "8.4.6",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -24,7 +24,7 @@
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
     "dev": "webpack-dev-server --config webpack.config.e2e.js",
-    "test": "yarn lint && jest src",
+    "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn release && yarn test && yarn e2e",
     "prepush": "yarn test"
@@ -49,45 +49,43 @@
     "@braintree/sanitize-url": "^3.1.0",
     "crypto-random-string": "^3.0.1",
     "d3": "^5.7.0",
-    "dagre-d3": "dagrejs/dagre-d3",
     "dagre": "^0.8.4",
+    "dagre-d3": "^0.6.4",
     "graphlib": "^2.1.7",
     "he": "^1.2.0",
     "lodash": "^4.17.11",
     "minify": "^4.1.1",
     "moment-mini": "^2.22.1",
-    "prettier": "^1.18.2",
     "scope-css": "^1.2.1"
   },
   "devDependencies": {
-    "documentation": "^12.0.1",
-    "eslint": "^6.3.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-prettier": "^3.1.0",
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.0",
     "@babel/register": "^7.0.0",
     "@percy/cypress": "^2.0.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.4",
     "coveralls": "^3.0.2",
     "css-loader": "^2.0.1",
     "css-to-string-loader": "^0.1.3",
     "cypress": "3.4.0",
+    "documentation": "^12.0.1",
+    "eslint": "^6.3.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
-    "jest-environment-puppeteer": "^4.2.0",
-    "jest-image-snapshot": "^2.8.2",
-    "jest-puppeteer": "^4.2.0",
+    "jest": "^24.9.0",
     "jison": "^0.4.18",
     "moment": "^2.23.0",
     "node-sass": "^4.12.0",
+    "prettier": "^1.18.2",
     "puppeteer": "^1.17.0",
     "sass-loader": "^7.1.0",
-    "start-server-and-test": "^1.10.0",
-    "webpack": "^4.27.1",
+    "start-server-and-test": "^1.10.6",
+    "terser-webpack-plugin": "^2.2.2",
+    "webpack": "^4.41.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.4.1",
     "webpack-node-externals": "^1.7.2",

src/diagrams/class/classDb.js

@@ -1,7 +1,30 @@
+import * as d3 from 'd3';
 import { logger } from '../../logger';
+import { getConfig } from '../../config';
+import utils from '../../utils';
+
+const MERMAID_DOM_ID_PREFIX = 'classid-';
+
+const config = getConfig();
 
 let relations = [];
 let classes = {};
+let classCounter = 0;
+
+let funs = [];
+
+const splitClassNameAndType = function(id) {
+  let genericType = '';
+  let className = id;
+
+  if (id.indexOf('~') > 0) {
+    let split = id.split('~');
+    className = split[0];
+    genericType = split[1];
+  }
+
+  return { className: className, type: genericType };
+};
 
 /**
  * Function called by parser when a node definition has been found.
@@ -9,20 +32,41 @@ let classes = {};
  * @public
  */
 export const addClass = function(id) {
+  let classId = splitClassNameAndType(id);
   // Only add class if not exists
-  if (typeof classes[id] !== 'undefined') return;
+  if (typeof classes[classId.className] !== 'undefined') return;
 
-  classes[id] = {
-    id: id,
+  classes[classId.className] = {
+    id: classId.className,
+    type: classId.type,
+    cssClasses: [],
     methods: [],
     members: [],
-    annotations: []
+    annotations: [],
+    domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter
   };
+  classCounter++;
+};
+
+/**
+ * Function to lookup domId from id in the graph definition.
+ * @param id
+ * @public
+ */
+export const lookUpDomId = function(id) {
+  const classKeys = Object.keys(classes);
+  for (let i = 0; i < classKeys.length; i++) {
+    if (classes[classKeys[i]].id === id) {
+      return classes[classKeys[i]].domId;
+    }
+  }
 };
 
 export const clear = function() {
   relations = [];
   classes = {};
+  funs = [];
+  funs.push(setupToolTips);
 };
 
 export const getClass = function(id) {
@@ -40,6 +84,10 @@ export const addRelation = function(relation) {
   logger.debug('Adding relation: ' + JSON.stringify(relation));
   addClass(relation.id1);
   addClass(relation.id2);
+
+  relation.id1 = splitClassNameAndType(relation.id1).className;
+  relation.id2 = splitClassNameAndType(relation.id2).className;
+
   relations.push(relation);
 };
 
@@ -51,7 +99,8 @@ export const addRelation = function(relation) {
  * @public
  */
 export const addAnnotation = function(className, annotation) {
-  classes[className].annotations.push(annotation);
+  const validatedClassName = splitClassNameAndType(className).className;
+  classes[validatedClassName].annotations.push(annotation);
 };
 
 /**
@@ -64,7 +113,9 @@ export const addAnnotation = function(className, annotation) {
  * @public
  */
 export const addMember = function(className, member) {
-  const theClass = classes[className];
+  const validatedClassName = splitClassNameAndType(className).className;
+  const theClass = classes[validatedClassName];
+
   if (typeof member === 'string') {
     // Member can contain white spaces, we trim them out
     const memberString = member.trim();
@@ -72,7 +123,7 @@ export const addMember = function(className, member) {
     if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
       // Remove leading and trailing brackets
       theClass.annotations.push(memberString.substring(2, memberString.length - 2));
-    } else if (memberString.endsWith(')')) {
+    } else if (memberString.indexOf(')') > 0) {
       theClass.methods.push(memberString);
     } else if (memberString) {
       theClass.members.push(memberString);
@@ -89,12 +140,97 @@ export const addMembers = function(className, members) {
 
 export const cleanupLabel = function(label) {
   if (label.substring(0, 1) === ':') {
-    return label.substr(2).trim();
+    return label.substr(1).trim();
   } else {
     return label.trim();
   }
 };
 
+/**
+ * Called by parser when a special node is found, e.g. a clickable element.
+ * @param ids Comma separated list of ids
+ * @param className Class to add
+ */
+export const setCssClass = function(ids, className) {
+  ids.split(',').forEach(function(_id) {
+    let id = _id;
+    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+    if (typeof classes[id] !== 'undefined') {
+      classes[id].cssClasses.push(className);
+    }
+  });
+};
+
+/**
+ * Called by parser when a link is found. Adds the URL to the vertex data.
+ * @param ids Comma separated list of ids
+ * @param linkStr URL to create a link for
+ * @param tooltip Tooltip for the clickable element
+ */
+export const setLink = function(ids, linkStr, tooltip) {
+  ids.split(',').forEach(function(_id) {
+    let id = _id;
+    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+    if (typeof classes[id] !== 'undefined') {
+      classes[id].link = utils.formatUrl(linkStr, config);
+
+      if (tooltip) {
+        classes[id].tooltip = utils.sanitize(tooltip, config);
+      }
+    }
+  });
+  setCssClass(ids, 'clickable');
+};
+
+/**
+ * Called by parser when a click definition is found. Registers an event handler.
+ * @param ids Comma separated list of ids
+ * @param functionName Function to be called on click
+ * @param tooltip Tooltip for the clickable element
+ */
+export const setClickEvent = function(ids, functionName, tooltip) {
+  ids.split(',').forEach(function(id) {
+    setClickFunc(id, functionName, tooltip);
+  });
+  setCssClass(ids, 'clickable');
+};
+
+const setClickFunc = function(domId, functionName, tooltip) {
+  let id = domId;
+  let elemId = lookUpDomId(id);
+
+  if (config.securityLevel !== 'loose') {
+    return;
+  }
+  if (typeof functionName === 'undefined') {
+    return;
+  }
+  if (typeof classes[id] !== 'undefined') {
+    if (tooltip) {
+      classes[id].tooltip = utils.sanitize(tooltip, config);
+    }
+
+    funs.push(function() {
+      const elem = document.querySelector(`[id="${elemId}"]`);
+      if (elem !== null) {
+        elem.addEventListener(
+          'click',
+          function() {
+            window[functionName](elemId);
+          },
+          false
+        );
+      }
+    });
+  }
+};
+
+export const bindFunctions = function(element) {
+  funs.forEach(function(fun) {
+    fun(element);
+  });
+};
+
 export const lineType = {
   LINE: 0,
   DOTTED_LINE: 1
@@ -107,8 +243,53 @@ export const relationType = {
   DEPENDENCY: 3
 };
 
+const setupToolTips = function(element) {
+  let tooltipElem = d3.select('.mermaidTooltip');
+  if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
+    tooltipElem = d3
+      .select('body')
+      .append('div')
+      .attr('class', 'mermaidTooltip')
+      .style('opacity', 0);
+  }
+
+  const svg = d3.select(element).select('svg');
+
+  const nodes = svg.selectAll('g.node');
+  nodes
+    .on('mouseover', function() {
+      const el = d3.select(this);
+      const title = el.attr('title');
+      // Dont try to draw a tooltip if no data is provided
+      if (title === null) {
+        return;
+      }
+      const rect = this.getBoundingClientRect();
+
+      tooltipElem
+        .transition()
+        .duration(200)
+        .style('opacity', '.9');
+      tooltipElem
+        .html(el.attr('title'))
+        .style('left', rect.left + (rect.right - rect.left) / 2 + 'px')
+        .style('top', rect.top - 14 + document.body.scrollTop + 'px');
+      el.classed('hover', true);
+    })
+    .on('mouseout', function() {
+      tooltipElem
+        .transition()
+        .duration(500)
+        .style('opacity', 0);
+      const el = d3.select(this);
+      el.classed('hover', false);
+    });
+};
+funs.push(setupToolTips);
+
 export default {
   addClass,
+  bindFunctions,
   clear,
   getClass,
   getClasses,
@@ -119,5 +300,9 @@ export default {
   addMembers,
   cleanupLabel,
   lineType,
-  relationType
+  relationType,
+  setClickEvent,
+  setCssClass,
+  setLink,
+  lookUpDomId
 };

src/diagrams/class/classDiagram.spec.js

@@ -2,13 +2,13 @@
 import { parser } from './parser/classDiagram';
 import classDb from './classDb';
 
-describe('class diagram, ', function() {
-  describe('when parsing an info graph it', function() {
-    beforeEach(function() {
+describe('class diagram, ', function () {
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
       parser.yy = classDb;
     });
 
-    it('should handle relation definitions', function() {
+    it('should handle relation definitions', function () {
       const str =
         'classDiagram\n' +
         'Class01 <|-- Class02\n' +
@@ -19,7 +19,8 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
-    it('should handle relation definition of different types and directions', function() {
+
+    it('should handle relation definition of different types and directions', function () {
       const str =
         'classDiagram\n' +
         'Class11 <|.. Class12\n' +
@@ -31,7 +32,7 @@ describe('class diagram, ', function() {
       parser.parse(str);
     });
 
-    it('should handle cardinality and labels', function() {
+    it('should handle cardinality and labels', function () {
       const str =
         'classDiagram\n' +
         'Class01 "1" *-- "many" Class02 : contains\n' +
@@ -40,6 +41,88 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
+    it('should handle visibility for methods and members', function() {
+      const str =
+        'classDiagram\n' +
+        'class TestClass\n' +
+        'TestClass : -int privateMember\n' +
+        'TestClass : +int publicMember\n' +
+        'TestClass : #int protectedMember\n' +
+        'TestClass : -privateMethod()\n' +
+        'TestClass : +publicMethod()\n' +
+        'TestClass : #protectedMethod()\n';
+
+      parser.parse(str);
+    });
+
+    it('should handle generic class', function() {
+      const str =
+        'classDiagram\n' +
+        'class Car~T~\n' +
+        'Driver -- Car : drives >\n' +
+        'Car *-- Wheel : have 4 >\n' +
+        'Car -- Person : < owns';
+
+      parser.parse(str);
+    });
+
+    it('should break when another `{`is encountered before closing the first one while defining generic class with brackets', function() {
+      const str =
+        'classDiagram\n' +
+        'class Dummy_Class~T~ {\n' +
+        'String data\n' +
+        '  void methods()\n' +
+        '}\n' +
+        '\n' +
+        'class Dummy_Class {\n' +
+        'class Flight {\n' +
+        '   flightNumber : Integer\n' +
+        '   departureTime : Date\n' +
+        '}';
+      let testPased =false;
+      try{
+        parser.parse(str);
+      }catch (error){
+        console.log(error.name);
+        testPased = true;
+      }
+      expect(testPased).toBe(true);
+    });
+
+    it('should break when EOF is encountered before closing the first `{` while defining generic class with brackets', function() {
+      const str =
+        'classDiagram\n' +
+        'class Dummy_Class~T~ {\n' +
+        'String data\n' +
+        '  void methods()\n' +
+        '}\n' +
+        '\n' +
+        'class Dummy_Class {\n';
+      let testPased =false;
+      try{
+        parser.parse(str);
+      }catch (error){
+        console.log(error.name);
+        testPased = true;
+      }
+      expect(testPased).toBe(true);
+    });
+
+    it('should handle generic class with brackets', function() {
+      const str =
+        'classDiagram\n' +
+        'class Dummy_Class~T~ {\n' +
+        'String data\n' +
+        '  void methods()\n' +
+        '}\n' +
+        '\n' +
+        'class Flight {\n' +
+        '   flightNumber : Integer\n' +
+        '   departureTime : Date\n' +
+        '}';
+    });
+
     it('should handle class definitions', function() {
       const str =
         'classDiagram\n' +
@@ -51,7 +134,7 @@ describe('class diagram, ', function() {
       parser.parse(str);
     });
 
-    it('should handle method statements', function() {
+    it('should handle method statements', function () {
       const str =
         'classDiagram\n' +
         'Object <|-- ArrayList\n' +
@@ -61,7 +144,8 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
-    it('should handle parsing of method statements  grouped by brackets', function() {
+
+    it('should handle parsing of method statements grouped by brackets', function () {
       const str =
         'classDiagram\n' +
         'class Dummy_Class {\n' +
@@ -77,7 +161,37 @@ describe('class diagram, ', function() {
       parser.parse(str);
     });
 
-    it('should handle parsing of separators', function() {
+    it('should handle return types on methods', function () {
+      const str =
+        'classDiagram\n' +
+        'Object <|-- ArrayList\n' +
+        'Object : equals()\n' +
+        'Object : -Object[] objects\n' +
+        'Object : +getObjects() Object[]\n' +
+        'ArrayList : Dummy elementData\n' +
+        'ArrayList : getDummy() Dummy';
+
+      parser.parse(str);
+    });
+
+    it('should handle return types on methods grouped by brackets', function () {
+      const str =
+        'classDiagram\n' +
+        'class Dummy_Class {\n' +
+        'string data\n' +
+        'getDummy() Dummy\n' +
+        '}\n' +
+        '\n' +
+        'class Flight {\n' +
+        '   int flightNumber\n' +
+        '   datetime departureTime\n' +
+        '   getDepartureTime() datetime\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle parsing of separators', function () {
       const str =
         'classDiagram\n' +
         'class Foo1 {\n' +
@@ -109,14 +223,181 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
+    it('should handle a comment', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle comments at the start', function () {
+      const str =
+        '%% Comment\n' +
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+      parser.parse(str);
+    });
+
+    it('should handle comments at the end', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '\n}' +
+        '%% Comment\n';
+
+      parser.parse(str);
+    });
+
+    it('should handle comments at the end no trailing newline', function () {
+      const str =
+      'classDiagram\n' +
+      'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}\n' +
+        '%% Comment';
+
+      parser.parse(str);
+    });
+
+    it('should handle a comment with multiple line feeds', function () {
+      const str =
+        'classDiagram\n\n\n' +
+        '%% Comment\n\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle a comment with mermaid class diagram code in them', function () {
+      const str =
+        'classDiagram\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle a comment inside brackets', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle click statement with link', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}\n' +
+        'link Class01 "google.com" ';
+
+      parser.parse(str);
+    });
+
+    it('should handle click statement with link and tooltip', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}\n' +
+        'link Class01 "google.com" "A Tooltip" ';
+
+      parser.parse(str);
+    });
+
+    it('should handle click statement with callback', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}\n' +
+        'callback Class01 "functionCall" ';
+
+      parser.parse(str);
+    });
+
+    it('should handle click statement with callback and tooltip', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}\n' +
+        'callback Class01 "functionCall" "A Tooltip" ';
+
+      parser.parse(str);
+    });
+    it('should handle dashed relation definition of different types and directions', function () {
+      const str =
+        'classDiagram\n' +
+        'Class11 <|.. Class12\n' +
+        'Class13 <.. Class14\n' +
+        'Class15 ..|> Class16\n' +
+        'Class17 ..> Class18\n' +
+        'Class19 .. Class20';
+      parser.parse(str);
+    });
   });
 
-  describe('when fetching data from an classDiagram graph it', function() {
-    beforeEach(function() {
+  describe('when fetching data from a classDiagram graph it', function () {
+    beforeEach(function () {
       parser.yy = classDb;
       parser.yy.clear();
     });
-    it('should handle relation definitions EXTENSION', function() {
+    it('should handle relation definitions EXTENSION', function () {
       const str = 'classDiagram\n' + 'Class01 <|-- Class02';
 
       parser.parse(str);
@@ -129,7 +410,8 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe('none');
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
-    it('should handle relation definitions AGGREGATION and dotted line', function() {
+
+    it('should handle relation definitions AGGREGATION and dotted line', function () {
       const str = 'classDiagram\n' + 'Class01 o.. Class02';
 
       parser.parse(str);
@@ -142,7 +424,8 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe('none');
       expect(relations[0].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
     });
-    it('should handle relation definitions COMPOSITION on both sides', function() {
+
+    it('should handle relation definitions COMPOSITION on both sides', function () {
       const str = 'classDiagram\n' + 'Class01 *--* Class02';
 
       parser.parse(str);
@@ -155,7 +438,8 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe(classDb.relationType.COMPOSITION);
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
-    it('should handle relation definitions no types', function() {
+
+    it('should handle relation definitions no types', function () {
       const str = 'classDiagram\n' + 'Class01 -- Class02';
 
       parser.parse(str);
@@ -168,7 +452,8 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe('none');
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
-    it('should handle relation definitions with type only on right side', function() {
+
+    it('should handle relation definitions with type only on right side', function () {
       const str = 'classDiagram\n' + 'Class01 --|> Class02';
 
       parser.parse(str);
@@ -182,7 +467,7 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
 
-    it('should handle multiple classes and relation definitions', function() {
+    it('should handle multiple classes and relation definitions', function () {
       const str =
         'classDiagram\n' +
         'Class01 <|-- Class02\n' +
@@ -208,7 +493,22 @@ describe('class diagram, ', function() {
       expect(relations[3].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
     });
 
-    it('should handle class annotations', function() {
+    it('should handle generic class with relation definitions', function () {
+      const str = 'classDiagram\n' + 'Class01~T~ <|-- Class02';
+
+      parser.parse(str);
+
+      const relations = parser.yy.getRelations();
+
+      expect(parser.yy.getClass('Class01').id).toBe('Class01');
+      expect(parser.yy.getClass('Class01').type).toBe('T');
+      expect(parser.yy.getClass('Class02').id).toBe('Class02');
+      expect(relations[0].relation.type1).toBe(classDb.relationType.EXTENSION);
+      expect(relations[0].relation.type2).toBe('none');
+      expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
+    });
+
+    it('should handle class annotations', function () {
       const str = 'classDiagram\n' + 'class Class1\n' + '<<interface>> Class1';
       parser.parse(str);
 
@@ -219,7 +519,7 @@ describe('class diagram, ', function() {
       expect(testClass.annotations[0]).toBe('interface');
     });
 
-    it('should handle class annotations with members and methods', function() {
+    it('should handle class annotations with members and methods', function () {
       const str =
         'classDiagram\n' +
         'class Class1\n' +
@@ -235,7 +535,7 @@ describe('class diagram, ', function() {
       expect(testClass.annotations[0]).toBe('interface');
     });
 
-    it('should handle class annotations in brackets', function() {
+    it('should handle class annotations in brackets', function () {
       const str = 'classDiagram\n' + 'class Class1 {\n' + '<<interface>>\n' + '}';
       parser.parse(str);
 
@@ -246,7 +546,7 @@ describe('class diagram, ', function() {
       expect(testClass.annotations[0]).toBe('interface');
     });
 
-    it('should handle class annotations in brackets with members and methods', function() {
+    it('should handle class annotations in brackets with members and methods', function () {
       const str =
         'classDiagram\n' +
         'class Class1 {\n' +
@@ -263,7 +563,7 @@ describe('class diagram, ', function() {
       expect(testClass.annotations[0]).toBe('interface');
     });
 
-    it('should add bracket members in right order', function() {
+    it('should add bracket members in right order', function () {
       const str =
         'classDiagram\n' +
         'class Class1 {\n' +
@@ -282,5 +582,63 @@ describe('class diagram, ', function() {
       expect(testClass.methods[0]).toBe('test()');
       expect(testClass.methods[1]).toBe('foo()');
     });
+
+    it('should handle abstract methods', function () {
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()*';
+      parser.parse(str);
+
+      const testClass = parser.yy.getClass('Class1');
+      expect(testClass.annotations.length).toBe(0);
+      expect(testClass.members.length).toBe(0);
+      expect(testClass.methods.length).toBe(1);
+      expect(testClass.methods[0]).toBe('someMethod()*');
+    });
+
+    it('should handle static methods', function () {
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()$';
+      parser.parse(str);
+
+      const testClass = parser.yy.getClass('Class1');
+      expect(testClass.annotations.length).toBe(0);
+      expect(testClass.members.length).toBe(0);
+      expect(testClass.methods.length).toBe(1);
+      expect(testClass.methods[0]).toBe('someMethod()$');
+    });
+
+    it('should associate link and css appropriately', function () {
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com"';
+      parser.parse(str);
+
+      const testClass = parser.yy.getClass('Class1');
+      expect(testClass.link).toBe('about:blank');//('google.com'); security needs to be set to 'loose' for this to work right
+      expect(testClass.cssClasses.length).toBe(1);
+      expect(testClass.cssClasses[0]).toBe('clickable');
+    });
+    it('should associate link with tooltip', function () {
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com" "A tooltip"';
+      parser.parse(str);
+
+      const testClass = parser.yy.getClass('Class1');
+      expect(testClass.link).toBe('about:blank');//('google.com'); security needs to be set to 'loose' for this to work right
+      expect(testClass.tooltip).toBe('A tooltip');
+      expect(testClass.cssClasses.length).toBe(1);
+      expect(testClass.cssClasses[0]).toBe('clickable');
+    });
+
+    it('should associate callback appropriately', function () {
+      spyOn(classDb, 'setClickEvent');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"';
+      parser.parse(str);
+
+      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', undefined);
+    });
+
+    it('should associate callback with tooltip', function () {
+      spyOn(classDb, 'setClickEvent');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall" "A tooltip"';
+      parser.parse(str);
+
+      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', 'A tooltip');
+    });
   });
 });

src/diagrams/class/classRenderer.js

@@ -2,15 +2,14 @@ import * as d3 from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { logger } from '../../logger';
-import classDb from './classDb';
+import classDb, { lookUpDomId } from './classDb';
 import utils from '../../utils';
 import { parser } from './parser/classDiagram';
 
 parser.yy = classDb;
 
-const idCache = {};
+let idCache = {};
 
-let classCnt = 0;
 const conf = {
   dividerMargin: 10,
   padding: 5,
@@ -136,7 +135,6 @@ const insertMarkers = function(elem) {
 };
 
 let edgeCount = 0;
-let total = 0;
 const drawEdge = function(elem, path, relation) {
   const getRelationType = function(type) {
     switch (type) {
@@ -184,6 +182,9 @@ const drawEdge = function(elem, path, relation) {
     url = url.replace(/\)/g, '\\)');
   }
 
+  if (relation.relation.lineType == 1) {
+    svgPath.attr('class', 'relation dashed-line');
+  }
   if (relation.relation.type1 !== 'none') {
     svgPath.attr(
       'marker-start',
@@ -281,17 +282,81 @@ const drawEdge = function(elem, path, relation) {
 const drawClass = function(elem, classDef) {
   logger.info('Rendering class ' + classDef);
 
+  let cssClassStr = 'classGroup ';
+  if (classDef.cssClasses.length > 0) {
+    cssClassStr = cssClassStr + classDef.cssClasses.join(' ');
+  }
+
   const addTspan = function(textEl, txt, isFirst) {
+    let isMethod = txt.indexOf(')') > 1;
+    let displayText = txt;
+    let cssStyle = '';
+
+    if (isMethod) {
+      let method = buildDisplayTextForMethod(txt);
+      displayText = method.displayText;
+      cssStyle = method.cssStyle;
+    }
+
     const tSpan = textEl
       .append('tspan')
       .attr('x', conf.padding)
-      .text(txt);
+      .text(displayText);
+
+    if (cssStyle !== '') {
+      tSpan.attr('style', cssStyle);
+    }
+
     if (!isFirst) {
       tSpan.attr('dy', conf.textHeight);
     }
   };
 
-  const id = 'classId' + (classCnt % total);
+  const buildDisplayTextForMethod = function(txt) {
+    let regEx = /(\+|-|~|#)?(\w+)\s?\((\w+(<\w+>|\[\])?\s?(\w+)?)?\)\s?([*|$])?\s?(\w+(<\w+>|\[\])?)?/;
+
+    let cssStyle = '';
+    let displayText = txt;
+    let methodName = txt;
+    let classifier = '';
+
+    let parsedText = txt.match(regEx);
+
+    if (parsedText) {
+      let visibility = parsedText[1] ? parsedText[1].trim() : '';
+      methodName = parsedText[2] ? parsedText[2].trim() : '';
+      let parameters = parsedText[3] ? parsedText[3].trim() : '';
+      classifier = parsedText[6] ? parsedText[6].trim() : '';
+      let returnType = parsedText[7] ? ' : ' + parsedText[7].trim() : '';
+
+      displayText = visibility + methodName + '(' + parameters + ')' + returnType;
+    } else {
+      let methodEnd = displayText.indexOf(')') + 1;
+      classifier = displayText.substring(methodEnd, methodEnd + 1);
+      if (classifier !== '' && classifier !== ' ') {
+        displayText = displayText.replace(classifier, '');
+      }
+    }
+
+    switch (classifier) {
+      case '*':
+        cssStyle = 'font-style:italic;';
+        break;
+      case '$':
+        cssStyle = 'text-decoration:underline;';
+        break;
+    }
+
+    let method = {
+      methodname: methodName,
+      displayText: displayText,
+      cssStyle: cssStyle
+    };
+
+    return method;
+  };
+
+  const id = classDef.id;
   const classInfo = {
     id: id,
     label: classDef.id,
@@ -302,14 +367,25 @@ const drawClass = function(elem, classDef) {
   // add class group
   const g = elem
     .append('g')
-    .attr('id', id)
-    .attr('class', 'classGroup');
+    .attr('id', lookUpDomId(id))
+    .attr('class', cssClassStr);
 
   // add title
-  const title = g
-    .append('text')
-    .attr('y', conf.textHeight + conf.padding)
-    .attr('x', 0);
+  let title;
+  if (classDef.link) {
+    title = g
+      .append('svg:a')
+      .attr('xlink:href', classDef.link)
+      .attr('target', '_blank')
+      .append('text')
+      .attr('y', conf.textHeight + conf.padding)
+      .attr('x', 0);
+  } else {
+    title = g
+      .append('text')
+      .attr('y', conf.textHeight + conf.padding)
+      .attr('x', 0);
+  }
 
   // add annotations
   let isFirst = true;
@@ -319,10 +395,15 @@ const drawClass = function(elem, classDef) {
     isFirst = false;
   });
 
-  // add class title
+  let classTitleString = classDef.id;
+
+  if (classDef.type !== undefined && classDef.type !== '') {
+    classTitleString += '<' + classDef.type + '>';
+  }
+
   const classTitle = title
     .append('tspan')
-    .text(classDef.id)
+    .text(classTitleString)
     .attr('class', 'title');
 
   // If class has annotations the title needs to have an offset of the text height
@@ -387,6 +468,10 @@ const drawClass = function(elem, classDef) {
     x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
   });
 
+  if (classDef.tooltip) {
+    title.insert('title').text(classDef.tooltip);
+  }
+
   membersLine.attr('x2', rectWidth);
   methodsLine.attr('x2', rectWidth);
 
@@ -394,7 +479,6 @@ const drawClass = function(elem, classDef) {
   classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;
 
   idCache[id] = classInfo;
-  classCnt++;
   return classInfo;
 };
 
@@ -405,12 +489,14 @@ export const setConf = function(cnf) {
     conf[key] = cnf[key];
   });
 };
+
 /**
  * Draws a flowchart in the tag with id: id based on the graph definition in text.
  * @param text
  * @param id
  */
 export const draw = function(text, id) {
+  idCache = {};
   parser.yy.clear();
   parser.parse(text);
 
@@ -437,14 +523,15 @@ 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);
+
     // Add nodes to the graph. The first argument is the node id. The second is
     // metadata about the node. In this case we're going to add labels to each of
     // our nodes.
     g.setNode(node.id, node);
+
     logger.info('Org height: ' + node.height);
   }
 
@@ -453,15 +540,20 @@ export const draw = function(text, id) {
     logger.info(
       'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
     );
-    g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {
-      relation: relation
-    });
+    g.setEdge(
+      getGraphId(relation.id1),
+      getGraphId(relation.id2),
+      {
+        relation: relation
+      },
+      relation.title || 'DEFAULT'
+    );
   });
   dagre.layout(g);
   g.nodes().forEach(function(v) {
     if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
       logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
-      d3.select('#' + v).attr(
+      d3.select('#' + lookUpDomId(v)).attr(
         'transform',
         'translate(' +
           (g.node(v).x - g.node(v).width / 2) +

src/diagrams/class/parser/classDiagram.jison

@@ -6,14 +6,16 @@
 
 /* lexical grammar */
 %lex
-%x string struct
+%x string generic struct
 
 %%
-\%\%[^\n]*            /* do nothing */
+\%\%[^\n]*\n*           /* do nothing */
 \n+                   return 'NEWLINE';
 \s+                     /* skip whitespace */
 "classDiagram"          return 'CLASS_DIAGRAM';
 [\{]                    { this.begin("struct"); /*console.log('Starting struct');*/return 'STRUCT_START';}
+<struct><<EOF>>         return "EOF_IN_STRUCT";
+<struct>[\{]            return "OPEN_IN_STRUCT";
 <struct>\}           { /*console.log('Ending struct');*/this.popState(); return 'STRUCT_STOP';}}
 <struct>[\n]              /* nothing */
 <struct>[^\{\}\n]*     { /*console.log('lex-member: ' + yytext);*/  return "MEMBER";}
@@ -21,8 +23,14 @@
 
 
 "class"               return 'CLASS';
+//"click"               return 'CLICK';
+"callback"            return 'CALLBACK';
+"link"                return 'LINK';
 "<<"                  return 'ANNOTATION_START';
 ">>"                  return 'ANNOTATION_END';
+[~]                   this.begin("generic");
+<generic>[~]          this.popState();
+<generic>[^~]*        return "GENERICTYPE";
 ["]                   this.begin("string");
 <string>["]           this.popState();
 <string>[^"]*         return "STR";
@@ -36,7 +44,7 @@
 \s*o                  return 'AGGREGATION';
 \-\-                  return 'LINE';
 \.\.                  return 'DOTTED_LINE';
-":"[^#\n;]+        return 'LABEL';
+":"[^\n;]+            return 'LABEL';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 \+                    return 'PLUS';
@@ -136,6 +144,8 @@ statements
 className
     : alphaNumToken className { $$=$1+$2; }
     | alphaNumToken { $$=$1; }
+    | alphaNumToken GENERICTYPE className { $$=$1+'~'+$2+$3; }
+    | alphaNumToken GENERICTYPE { $$=$1+'~'+$2; }
     ;
 
 statement
@@ -144,6 +154,7 @@ statement
     | classStatement
     | methodStatement
     | annotationStatement
+    | clickStatement
     ;
 
 classStatement
@@ -193,6 +204,13 @@ lineType
     | DOTTED_LINE   {$$=yy.lineType.DOTTED_LINE;}
     ;
 
+clickStatement
+    : CALLBACK className STR                    {$$ = $1;yy.setClickEvent($2, $3, undefined);}
+    | CALLBACK className STR STR                {$$ = $1;yy.setClickEvent($2, $3, $4);}
+    | LINK className STR                        {$$ = $1;yy.setLink($2, $3, undefined);}
+    | LINK className STR STR                    {$$ = $1;yy.setLink($2, $3, $4);}
+    ;
+
 commentToken   : textToken | graphCodeTokens ;
 
 textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;

src/diagrams/flowchart/flowChartShapes.js

@@ -135,9 +135,93 @@ function rect_right_inv_arrow(parent, bbox, node) {
   return shapeSvg;
 }
 
+function stadium(parent, bbox, node) {
+  const h = bbox.height;
+  const w = bbox.width + h / 4;
+
+  const shapeSvg = parent
+    .insert('rect', ':first-child')
+    .attr('rx', h / 2)
+    .attr('ry', h / 2)
+    .attr('x', -w / 2)
+    .attr('y', -h / 2)
+    .attr('width', w)
+    .attr('height', h);
+
+  node.intersect = function(point) {
+    return dagreD3.intersect.rect(node, point);
+  };
+  return shapeSvg;
+}
+
+function cylinder(parent, bbox, node) {
+  const w = bbox.width;
+  const rx = w / 2;
+  const ry = rx / (2.5 + w / 50);
+  const h = bbox.height + ry;
+
+  const shape =
+    'M 0,' +
+    ry +
+    ' a ' +
+    rx +
+    ',' +
+    ry +
+    ' 0,0,0 ' +
+    w +
+    ' 0 a ' +
+    rx +
+    ',' +
+    ry +
+    ' 0,0,0 ' +
+    -w +
+    ' 0 l 0,' +
+    h +
+    ' a ' +
+    rx +
+    ',' +
+    ry +
+    ' 0,0,0 ' +
+    w +
+    ' 0 l 0,' +
+    -h;
+
+  const shapeSvg = parent
+    .attr('label-offset-y', ry)
+    .insert('path', ':first-child')
+    .attr('d', shape)
+    .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
+
+  node.intersect = function(point) {
+    const pos = dagreD3.intersect.rect(node, point);
+    const x = pos.x - node.x;
+
+    if (
+      rx != 0 &&
+      (Math.abs(x) < node.width / 2 ||
+        (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
+    ) {
+      // ellipsis equation: x*x / a*a + y*y / b*b = 1
+      // solve for y to get adjustion value for pos.y
+      let y = ry * ry * (1 - (x * x) / (rx * rx));
+      if (y != 0) y = Math.sqrt(y);
+      y = ry - y;
+      if (point.y - node.y > 0) y = -y;
+
+      pos.y += y;
+    }
+
+    return pos;
+  };
+
+  return shapeSvg;
+}
+
 export function addToRender(render) {
   render.shapes().question = question;
   render.shapes().hexagon = hexagon;
+  render.shapes().stadium = stadium;
+  render.shapes().cylinder = cylinder;
 
   // Add custom shape for box with inverted arrow on left side
   render.shapes().rect_left_inv_arrow = rect_left_inv_arrow;

src/diagrams/flowchart/flowChartShapes.spec.js

@@ -1,6 +1,46 @@
 import { addToRender } from './flowChartShapes';
 
 describe('flowchart shapes', function() {
+  // rect-based shapes
+  [
+    ['stadium', useWidth, useHeight]
+  ].forEach(function([shapeType, getW, getH]) {
+    it(`should add a ${shapeType} shape that renders a properly positioned rect element`, function() {
+      const mockRender = MockRender();
+      const mockSvg = MockSvg();
+      addToRender(mockRender);
+
+      [[100, 100], [123, 45], [71, 300]].forEach(function([width, height]) {
+        const shape = mockRender.shapes()[shapeType](mockSvg, { width, height }, {});
+        const w = width + height / 4;
+        const h = height;
+        const dx = -getW(w, h) / 2;
+        const dy = -getH(w, h) / 2;
+        expect(shape.__tag).toEqual('rect');
+        expect(shape.__attrs).toHaveProperty('x', dx);
+        expect(shape.__attrs).toHaveProperty('y', dy);
+      });
+    });
+  });
+
+  // path-based shapes
+  [
+    ['cylinder', useWidth, useHeight]
+  ].forEach(function([shapeType, getW, getH]) {
+    it(`should add a ${shapeType} shape that renders a properly positioned path element`, function() {
+      const mockRender = MockRender();
+      const mockSvg = MockSvg();
+      addToRender(mockRender);
+
+      [[100, 100], [123, 45], [71, 300]].forEach(function([width, height]) {
+        const shape = mockRender.shapes()[shapeType](mockSvg, { width, height }, {});
+        expect(shape.__tag).toEqual('path');
+        expect(shape.__attrs).toHaveProperty('d');
+      });
+    });
+  });
+
+  // polygon-based shapes
   [
     [
       'question',

src/diagrams/flowchart/flowDb.js

@@ -1,10 +1,10 @@
 import * as d3 from 'd3';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
 
-const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+const MERMAID_DOM_ID_PREFIX = '';
 
 const config = getConfig();
 let vertices = {};
@@ -19,19 +19,6 @@ let direction;
 // Functions to be run after graph rendering
 let funs = [];
 
-const sanitize = text => {
-  let txt = text;
-  if (config.securityLevel !== 'loose') {
-    txt = txt.replace(/<br>/g, '#br#');
-    txt = txt.replace(/<br\S*?\/>/g, '#br#');
-    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    txt = txt.replace(/=/g, '&equals;');
-    txt = txt.replace(/#br#/g, '<br/>');
-  }
-
-  return txt;
-};
-
 /**
  * Function called by parser when a node definition has been found
  * @param id
@@ -56,16 +43,16 @@ export const addVertex = function(_id, text, type, style, classes) {
     vertices[id] = { id: id, styles: [], classes: [] };
   }
   if (typeof text !== 'undefined') {
-    txt = sanitize(text.trim());
+    txt = utils.sanitize(text.trim(), config);
 
-    // strip quotes if string starts and exnds with a quote
+    // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
       txt = txt.substring(1, txt.length - 1);
     }
 
     vertices[id].text = txt;
   } else {
-    if (!vertices[id].text) {
+    if (typeof vertices[id].text === 'undefined') {
       vertices[id].text = _id;
     }
   }
@@ -95,7 +82,7 @@ export const addVertex = function(_id, text, type, style, classes) {
  * @param type
  * @param linktext
  */
-export const addLink = function(_start, _end, type, linktext) {
+export const addSingleLink = function(_start, _end, type, linktext) {
   let start = _start;
   let end = _end;
   if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
@@ -106,7 +93,7 @@ export const addLink = function(_start, _end, type, linktext) {
   linktext = type.text;
 
   if (typeof linktext !== 'undefined') {
-    edge.text = sanitize(linktext.trim());
+    edge.text = utils.sanitize(linktext.trim(), config);
 
     // strip quotes if string starts and exnds with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
@@ -120,6 +107,14 @@ export const addLink = function(_start, _end, type, linktext) {
   }
   edges.push(edge);
 };
+export const addLink = function(_start, _end, type, linktext) {
+  let i, j;
+  for (i = 0; i < _start.length; i++) {
+    for (j = 0; j < _end.length; j++) {
+      addSingleLink(_start[i], _end[j], type, linktext);
+    }
+  }
+};
 
 /**
  * Updates a link's line interpolation algorithm
@@ -210,7 +205,7 @@ export const setClass = function(ids, className) {
 const setTooltip = function(ids, tooltip) {
   ids.split(',').forEach(function(id) {
     if (typeof tooltip !== 'undefined') {
-      tooltips[id] = sanitize(tooltip);
+      tooltips[id] = utils.sanitize(tooltip, config);
     }
   });
 };
@@ -251,11 +246,7 @@ export const setLink = function(ids, linkStr, tooltip) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
-      if (config.securityLevel !== 'loose') {
-        vertices[id].link = sanitizeUrl(linkStr); // .replace(/javascript:.*/g, '')
-      } else {
-        vertices[id].link = linkStr;
-      }
+      vertices[id].link = utils.formatUrl(linkStr, config);
     }
   });
   setTooltip(ids, tooltip);
@@ -414,7 +405,7 @@ export const addSubGraph = function(_id, list, _title) {
   id = id || 'subGraph' + subCount;
   if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
   title = title || '';
-  title = sanitize(title);
+  title = utils.sanitize(title, config);
   subCount = subCount + 1;
   const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
   subGraphs.push(subGraph);
@@ -494,6 +485,130 @@ export const firstGraph = () => {
   return false;
 };
 
+const destructStartLink = _str => {
+  const str = _str.trim();
+
+  switch (str) {
+    case '<--':
+      return { type: 'arrow', stroke: 'normal' };
+    case 'x--':
+      return { type: 'arrow_cross', stroke: 'normal' };
+    case 'o--':
+      return { type: 'arrow_circle', stroke: 'normal' };
+    case '<-.':
+      return { type: 'arrow', stroke: 'dotted' };
+    case 'x-.':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case 'o-.':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '<==':
+      return { type: 'arrow', stroke: 'thick' };
+    case 'x==':
+      return { type: 'arrow_cross', stroke: 'thick' };
+    case 'o==':
+      return { type: 'arrow_circle', stroke: 'thick' };
+    case '--':
+      return { type: 'arrow_open', stroke: 'normal' };
+    case '==':
+      return { type: 'arrow_open', stroke: 'thick' };
+    case '-.':
+      return { type: 'arrow_open', stroke: 'dotted' };
+  }
+};
+
+const destructEndLink = _str => {
+  const str = _str.trim();
+
+  switch (str) {
+    case '--x':
+      return { type: 'arrow_cross', stroke: 'normal' };
+    case '-->':
+      return { type: 'arrow', stroke: 'normal' };
+    case '<-->':
+      return { type: 'double_arrow_point', stroke: 'normal' };
+    case 'x--x':
+      return { type: 'double_arrow_cross', stroke: 'normal' };
+    case 'o--o':
+      return { type: 'double_arrow_circle', stroke: 'normal' };
+    case 'o.-o':
+      return { type: 'double_arrow_circle', stroke: 'dotted' };
+    case '<==>':
+      return { type: 'double_arrow_point', stroke: 'thick' };
+    case 'o==o':
+      return { type: 'double_arrow_circle', stroke: 'thick' };
+    case 'x==x':
+      return { type: 'double_arrow_cross', stroke: 'thick' };
+    case 'x.-x':
+      return { type: 'double_arrow_cross', stroke: 'dotted' };
+    case 'x-.-x':
+      return { type: 'double_arrow_cross', stroke: 'dotted' };
+    case '<.->':
+      return { type: 'double_arrow_point', stroke: 'dotted' };
+    case '<-.->':
+      return { type: 'double_arrow_point', stroke: 'dotted' };
+    case 'o-.-o':
+      return { type: 'double_arrow_circle', stroke: 'dotted' };
+    case '--o':
+      return { type: 'arrow_circle', stroke: 'normal' };
+    case '---':
+      return { type: 'arrow_open', stroke: 'normal' };
+    case '-.-x':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case '-.->':
+      return { type: 'arrow', stroke: 'dotted' };
+    case '-.-o':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '-.-':
+      return { type: 'arrow_open', stroke: 'dotted' };
+    case '.-x':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case '.->':
+      return { type: 'arrow', stroke: 'dotted' };
+    case '.-o':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '.-':
+      return { type: 'arrow_open', stroke: 'dotted' };
+    case '==x':
+      return { type: 'arrow_cross', stroke: 'thick' };
+    case '==>':
+      return { type: 'arrow', stroke: 'thick' };
+    case '==o':
+      return { type: 'arrow_circle', stroke: 'thick' };
+    case '===':
+      return { type: 'arrow_open', stroke: 'thick' };
+  }
+};
+
+const destructLink = (_str, _startStr) => {
+  const info = destructEndLink(_str);
+  let startInfo;
+  if (_startStr) {
+    startInfo = destructStartLink(_startStr);
+
+    if (startInfo.stroke !== info.stroke) {
+      return { type: 'INVALID', stroke: 'INVALID' };
+    }
+
+    if (startInfo.type === 'arrow_open') {
+      // -- xyz -->  - take arrow type form ending
+      startInfo.type = info.type;
+    } else {
+      // x-- xyz -->  - not supported
+      if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };
+
+      startInfo.type = 'double_' + startInfo.type;
+    }
+
+    if (startInfo.type === 'double_arrow') {
+      startInfo.type = 'double_arrow_point';
+    }
+
+    return startInfo;
+  }
+
+  return info;
+};
+
 export default {
   addVertex,
   addLink,
@@ -516,6 +631,7 @@ export default {
   getDepthFirstPos,
   indexNodes,
   getSubGraphs,
+  destructLink,
   lex: {
     firstGraph
   }

src/diagrams/flowchart/flowRenderer.js

@@ -5,11 +5,7 @@ import flowDb from './flowDb';
 import flow from './parser/flow';
 import { getConfig } from '../../config';
 
-const newDagreD3 = true;
 import dagreD3 from 'dagre-d3';
-// const newDagreD3 = false;
-// import dagreD3 from '../../../../dagre-d3-renderer/dist/dagre-d3.core.js';
-
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import { interpolateToCurve } from '../../utils';
@@ -92,7 +88,7 @@ export const addVertices = function(vert, g, svgId) {
     } else {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
 
-      const rows = vertexText.split(/<br[/]{0,1}>/);
+      const rows = vertexText.split(/<br\s*\/?>/gi);
 
       for (let j = 0; j < rows.length; j++) {
         const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -105,15 +101,6 @@ export const addVertices = function(vert, g, svgId) {
       vertexNode = svgLabel;
     }
 
-    // If the node has a link, we wrap it in a SVG link
-    if (vertex.link) {
-      const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
-      link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
-      link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
-      link.appendChild(vertexNode);
-      vertexNode = link;
-    }
-
     let radious = 0;
     let _shape = '';
     // Set the shape based parameters
@@ -155,6 +142,12 @@ export const addVertices = function(vert, g, svgId) {
       case 'ellipse':
         _shape = 'ellipse';
         break;
+      case 'stadium':
+        _shape = 'stadium';
+        break;
+      case 'cylinder':
+        _shape = 'cylinder';
+        break;
       case 'group':
         _shape = 'rect';
         break;
@@ -214,10 +207,10 @@ export const addEdges = function(edges, g) {
           }
           break;
         case 'dotted':
-          style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';
+          style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
           break;
         case 'thick':
-          style = 'stroke: #333; stroke-width: 3.5px;fill:none';
+          style = ' stroke-width: 3.5px;fill:none';
           break;
       }
     }
@@ -237,18 +230,18 @@ export const addEdges = function(edges, g) {
       }
     } else {
       edgeData.arrowheadStyle = 'fill: #333';
-      if (typeof edge.style === 'undefined') {
-        edgeData.labelpos = 'c';
-        if (getConfig().flowchart.htmlLabels) {
-          edgeData.labelType = 'html';
-          edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
-        } else {
-          edgeData.labelType = 'text';
-          edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
-          edgeData.label = edge.text.replace(/<br>/g, '\n');
-        }
+      edgeData.labelpos = 'c';
+
+      if (getConfig().flowchart.htmlLabels) {
+        edgeData.labelType = 'html';
+        edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {
-        edgeData.label = edge.text.replace(/<br>/g, '\n');
+        edgeData.labelType = 'text';
+        edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
+
+        if (typeof edge.style === 'undefined') {
+          edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
+        }
       }
     }
     // Add the edge to the graph
@@ -295,36 +288,25 @@ export const draw = function(text, id) {
     dir = 'TD';
   }
 
+  const conf = getConfig().flowchart;
+  const nodeSpacing = conf.nodeSpacing || 50;
+  const rankSpacing = conf.rankSpacing || 50;
+
   // Create the input mermaid.graph
-  let g;
-  // Todo remove newDagreD3 when properly verified
-  if (newDagreD3) {
-    g = new graphlib.Graph({
-      multigraph: true,
-      compound: true
+  const g = new graphlib.Graph({
+    multigraph: true,
+    compound: true
+  })
+    .setGraph({
+      rankdir: dir,
+      nodesep: nodeSpacing,
+      ranksep: rankSpacing,
+      marginx: 8,
+      marginy: 8
     })
-      .setGraph({
-        rankdir: dir,
-        marginx: 8,
-        marginy: 8
-      })
-      .setDefaultEdgeLabel(function() {
-        return {};
-      });
-  } else {
-    g = new graphlib.Graph({
-      multigraph: true,
-      compound: true
-    })
-      .setGraph({
-        rankdir: dir,
-        marginx: 20,
-        marginy: 20
-      })
-      .setDefaultEdgeLabel(function() {
-        return {};
-      });
-  }
+    .setDefaultEdgeLabel(function() {
+      return {};
+    });
 
   let subG;
   const subGraphs = flowDb.getSubGraphs();
@@ -407,51 +389,28 @@ export const draw = function(text, id) {
     return flowDb.getTooltip(this.id);
   });
 
-  const conf = getConfig().flowchart;
   const padding = 8;
-  // Todo remove newDagreD3 when properly verified
-  if (newDagreD3) {
-    const svgBounds = svg.node().getBBox();
-    const width = svgBounds.width + padding * 2;
-    const height = svgBounds.height + padding * 2;
-    logger.debug(
-      `new ViewBox 0 0 ${width} ${height}`,
-      `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
-    );
+  const svgBounds = svg.node().getBBox();
+  const width = svgBounds.width + padding * 2;
+  const height = svgBounds.height + padding * 2;
+  logger.debug(
+    `new ViewBox 0 0 ${width} ${height}`,
+    `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
+  );
 
-    if (conf.useMaxWidth) {
-      svg.attr('width', '100%');
-      svg.attr('style', `max-width: ${width}px;`);
-    } else {
-      svg.attr('height', height);
-      svg.attr('width', width);
-    }
-
-    svg.attr('viewBox', `0 0 ${width} ${height}`);
-    svg
-      .select('g')
-      .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
+  if (conf.useMaxWidth) {
+    svg.attr('width', '100%');
+    svg.attr('style', `max-width: ${width}px;`);
   } else {
-    const width = g.maxX - g.minX + padding * 2;
-    const height = g.maxY - g.minY + padding * 2;
-
-    if (conf.useMaxWidth) {
-      svg.attr('width', '100%');
-      svg.attr('style', `max-width: ${width}px;`);
-    } else {
-      svg.attr('height', height);
-      svg.attr('width', width);
-    }
-
-    logger.debug(
-      `Org ViewBox 0 0 ${width} ${height}`,
-      `translate(${padding - g.minX}, ${padding - g.minY})\n${location.href}`
-    );
-
-    svg.attr('viewBox', `0 0 ${width} ${height}`);
-    svg.select('g').attr('transform', `translate(${padding - g.minX}, ${padding - g.minY})`);
-    // svg.select('g').attr('transform', `translate(${padding - minX}, ${padding - minY})`);
+    svg.attr('height', height);
+    svg.attr('width', width);
   }
+
+  svg.attr('viewBox', `0 0 ${width} ${height}`);
+  svg
+    .select('g')
+    .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
+
   // Index nodes
   flowDb.indexNodes('subGraph' + i);
 
@@ -460,8 +419,8 @@ export const draw = function(text, id) {
     subG = subGraphs[i];
 
     if (subG.title !== 'undefined') {
-      const clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
+      const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
+      const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
 
       const xPos = clusterRects[0].x.baseVal.value;
       const yPos = clusterRects[0].y.baseVal.value;
@@ -475,7 +434,7 @@ export const draw = function(text, id) {
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
-    const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label');
+    const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];
 
@@ -492,6 +451,40 @@ export const draw = function(text, id) {
       label.insertBefore(rect, label.firstChild);
     }
   }
+
+  // If node has a link, wrap it in an anchor SVG object.
+  const keys = Object.keys(vert);
+  keys.forEach(function(key) {
+    const vertex = vert[key];
+
+    if (vertex.link) {
+      const node = d3.select('#' + id + ' [id="' + key + '"]');
+      if (node) {
+        const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
+        link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
+        link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
+        link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
+
+        const linkNode = node.insert(function() {
+          return link;
+        }, ':first-child');
+
+        const shape = node.select('.label-container');
+        if (shape) {
+          linkNode.append(function() {
+            return shape.node();
+          });
+        }
+
+        const label = node.select('.label');
+        if (label) {
+          linkNode.append(function() {
+            return label.node();
+          });
+        }
+      }
+    }
+  });
 };
 
 export default {

src/diagrams/flowchart/flowRenderer.spec.js

@@ -1,4 +1,4 @@
-import { addVertices } from './flowRenderer';
+import { addVertices, addEdges } from './flowRenderer';
 import { setConfig } from '../../config';
 
 setConfig({
@@ -22,6 +22,8 @@ describe('the flowchart renderer', function() {
       ['odd_right', 'rect_left_inv_arrow'],
       ['circle', 'circle'],
       ['ellipse', 'ellipse'],
+      ['stadium', 'stadium'],
+      ['cylinder', 'cylinder'],
       ['group', 'rect']
     ].forEach(function([type, expectedShape, expectedRadios = 0]) {
       it(`should add the correct shaped node to the graph for vertex type ${type}`, function() {
@@ -53,6 +55,43 @@ describe('the flowchart renderer', function() {
         expect(addedNodes[0][1]).toHaveProperty('ry', expectedRadios);
       });
     });
+
+    [
+      'Multi<br>Line',
+      'Multi<br/>Line',
+      'Multi<br />Line',
+      'Multi<br\t/>Line'
+    ].forEach(function(labelText) {
+      it('should handle multiline texts with different line breaks', function() {
+        const addedNodes = [];
+        const mockG = {
+          setNode: function(id, object) {
+            addedNodes.push([id, object]);
+          }
+        };
+        addVertices(
+          {
+            v1: {
+              type: 'rect',
+              id: 'my-node-id',
+              classes: [],
+              styles: [],
+              text: 'Multi<br>Line'
+            }
+          },
+          mockG,
+          'svg-id'
+        );
+        expect(addedNodes).toHaveLength(1);
+        expect(addedNodes[0][0]).toEqual('my-node-id');
+        expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id');
+        expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg');
+        expect(addedNodes[0][1].label).toBeDefined();
+        expect(addedNodes[0][1].label).toBeDefined(); // <text> node
+        expect(addedNodes[0][1].label.firstChild.innerHTML).toEqual('Multi'); // <tspan> node, line 1
+        expect(addedNodes[0][1].label.lastChild.innerHTML).toEqual('Line'); // <tspan> node, line 2
+      });
+    });
   });
 
   [
@@ -93,4 +132,34 @@ describe('the flowchart renderer', function() {
       expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle);
     });
   });
+
+  describe('when adding edges to a graph', function() {
+    it('should handle multiline texts and set centered label position', function() {
+      const addedEdges = [];
+      const mockG = {
+        setEdge: function(s, e, data, c) {
+          addedEdges.push(data);
+        }
+      };
+      addEdges(
+        [
+          { text: 'Multi<br>Line' },
+          { text: 'Multi<br/>Line' },
+          { text: 'Multi<br />Line' },
+          { text: 'Multi<br\t/>Line' },
+          { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br>Line' },
+          { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br/>Line' },
+          { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br />Line' },
+          { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi<br\t/>Line' }
+        ],
+        mockG,
+        'svg-id'
+      );
+
+      addedEdges.forEach(function(edge) {
+        expect(edge).toHaveProperty('label', 'Multi\nLine');
+        expect(edge).toHaveProperty('labelpos', 'c');
+      });
+    });
+  });
 });

src/diagrams/flowchart/parser/flow-comments.spec.js

@@ -12,8 +12,8 @@ describe('[Comments] when parsing', () => {
     flow.parser.yy.clear();
   });
 
-  it('should handle a comments', function() {
-    const res = flow.parser.parse('graph TD;\n%% CComment\n A-->B;');
+  it('should handle comments', function() {
+    const res = flow.parser.parse('graph TD;\n%% Comment\n A-->B;');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -27,7 +27,7 @@ describe('[Comments] when parsing', () => {
     expect(edges[0].text).toBe('');
   });
 
-  it('should handle comments a at the start', function() {
+  it('should handle comments at the start', function() {
     const res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
 
     const vert = flow.parser.yy.getVertices();
@@ -43,7 +43,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end', function() {
-    const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the find\n');
+    const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the end\n');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -117,7 +117,7 @@ describe('[Comments] when parsing', () => {
     expect(edges[0].text).toBe('');
   });
 
-  it('should handle a comments with blank rows in-between', function() {
+  it('should handle a comment with blank rows in-between', function() {
     const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
 
     const vert = flow.parser.yy.getVertices();
@@ -132,7 +132,7 @@ describe('[Comments] when parsing', () => {
     expect(edges[0].text).toBe('');
   });
 
-  it('should handle a comments mermaid flowchart code in them', function() {
+  it('should handle a comment with mermaid flowchart code in them', function() {
     const res = flow.parser.parse(
       'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
     );

src/diagrams/flowchart/parser/flow-edges.spec.js

@@ -87,7 +87,7 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].text).toBe('');
     });
 
-    it('should handle double edged nodes with text on thick arrows', function() {
+    it('should handle double edged nodes with text on thick arrows XYZ1', function() {
       const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
 
       const vert = flow.parser.yy.getVertices();

src/diagrams/flowchart/parser/flow-singlenode.spec.js

@@ -22,6 +22,16 @@ describe('[Singlenodes] when parsing', () => {
     expect(edges.length).toBe(0);
     expect(vert['A'].styles.length).toBe(0);
   });
+  it('should handle a single node with white space after it (SN1)', function() {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD;A ;');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(0);
+    expect(vert['A'].styles.length).toBe(0);
+  });
 
   it('should handle a single square node', function() {
     // Silly but syntactically correct
@@ -168,7 +178,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1'].text).toBe('1');
+    expect(vert['1'].text).toBe('1');
   });
 
   it('should handle a single node with a single digit in a subgraph', function() {
@@ -180,7 +190,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1'].text).toBe('1');
+    expect(vert['1'].text).toBe('1');
   });
 
   it('should handle a single node with alphanumerics starting on a num', function() {
@@ -191,7 +201,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1id'].styles.length).toBe(0);
+    expect(vert['1id'].styles.length).toBe(0);
   });
 
   it('should handle a single node with alphanumerics containing a minus sign', function() {

src/diagrams/flowchart/parser/flow-style.spec.js

@@ -86,6 +86,17 @@ describe('[Style] when parsing', () => {
     expect(vert['T'].styles[1]).toBe('border:1px solid red');
   });
 
+  it('should keep node label text (if already defined) when a style is applied', function() {
+    const res = flow.parser.parse('graph TD;A(( ));B((Test));C;style A background:#fff;style D border:1px solid red;');
+
+    const vert = flow.parser.yy.getVertices();
+
+    expect(vert['A'].text).toBe('');
+    expect(vert['B'].text).toBe('Test');
+    expect(vert['C'].text).toBe('C');
+    expect(vert['D'].text).toBe('D');
+  });
+
   it('should be possible to declare a class', function() {
     const res = flow.parser.parse(
       'graph TD;classDef exClass background:#bbb,border:1px solid red;'

src/diagrams/flowchart/parser/flow-text.spec.js

@@ -182,7 +182,7 @@ describe('[Text] when parsing', () => {
 
       expect(edges[0].stroke).toBe('normal');
     });
-    it('it should handle dotted text on lines', function() {
+    it('it should handle dotted text on lines (TD3)', function() {
       const res = flow.parser.parse('graph TD;A-. test text with == .->B;');
 
       const vert = flow.parser.yy.getVertices();
@@ -265,7 +265,7 @@ describe('[Text] when parsing', () => {
       expect(edges[0].text).toBe('text including URL space');
     });
 
-    it('should handle space and dir (TD)', function() {
+    it('should handle space and dir (TD2)', function() {
       const res = flow.parser.parse('graph TD;A-- text including R TD space --xB;');
 
       const vert = flow.parser.yy.getVertices();

src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js

@@ -34,4 +34,188 @@ describe('when parsing flowcharts', function() {
     expect(edges[1].type).toBe('arrow');
     expect(edges[1].text).toBe('');
   });
+  it('should handle chaining of vertices', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A & B --> C;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['C'].id).toBe('C');
+    expect(edges.length).toBe(2);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('C');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('B');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+  });
+  it('should multiple vertices in link statement in the begining', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A-->B & C;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['C'].id).toBe('C');
+    expect(edges.length).toBe(2);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+  });
+  it('should multiple vertices in link statement at the end', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A & B--> C & D;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('C');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('D');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('C');
+    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].text).toBe('');
+    expect(edges[3].start).toBe('B');
+    expect(edges[3].end).toBe('D');
+    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+  });
+  it('should handle chaining of vertices at both ends at once', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A & B--> C & D;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('C');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('D');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('C');
+    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].text).toBe('');
+    expect(edges[3].start).toBe('B');
+    expect(edges[3].end).toBe('D');
+    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+  });
+  it('should handle chaining and multiple nodes in in link statement FVC ', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A --> B & B2 & C --> D2;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['B2'].id).toBe('B2');
+    expect(vert['C'].id).toBe('C');
+    expect(vert['D2'].id).toBe('D2');
+    expect(edges.length).toBe(6);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('B2');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('');
+    expect(edges[2].start).toBe('A');
+    expect(edges[2].end).toBe('C');
+    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].text).toBe('');
+    expect(edges[3].start).toBe('B');
+    expect(edges[3].end).toBe('D2');
+    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+    expect(edges[4].start).toBe('B2');
+    expect(edges[4].end).toBe('D2');
+    expect(edges[4].type).toBe('arrow');
+    expect(edges[4].text).toBe('');
+    expect(edges[5].start).toBe('C');
+    expect(edges[5].end).toBe('D2');
+    expect(edges[5].type).toBe('arrow');
+    expect(edges[5].text).toBe('');
+  });
+  it('should handle chaining and multiple nodes in in link statement with extra info in statements', function() {
+    const res = flow.parser.parse(`
+    graph TD
+      A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
+      classDef exClass background:#bbb,border:1px solid red;
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    const classes = flow.parser.yy.getClasses();
+
+    expect(classes['exClass'].styles.length).toBe(2);
+    expect(classes['exClass'].styles[0]).toBe('background:#bbb');
+    expect(classes['exClass'].styles[1]).toBe('border:1px solid red');
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['B'].classes[0]).toBe('exClass');
+    expect(vert['C'].id).toBe('C');
+    expect(vert['D'].id).toBe('D');
+    expect(edges.length).toBe(4);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow');
+    expect(edges[0].text).toBe('hello');
+    expect(edges[1].start).toBe('A');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow');
+    expect(edges[1].text).toBe('hello');
+    expect(edges[2].start).toBe('B');
+    expect(edges[2].end).toBe('D');
+    expect(edges[2].type).toBe('arrow');
+    expect(edges[2].text).toBe('');
+    expect(edges[3].start).toBe('C');
+    expect(edges[3].end).toBe('D');
+    expect(edges[3].type).toBe('arrow');
+    expect(edges[3].text).toBe('');
+  });
 });

src/diagrams/flowchart/parser/flow.jison

@@ -8,8 +8,9 @@
 %lex
 %x string
 %x dir
+%x vertex
 %%
-\%\%[^\n]*            /* do nothing */
+\%\%[^\n]*\n*           /* do nothing */
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -37,51 +38,56 @@
 \#                    return 'BRKT';
 ":::"                 return 'STYLE_SEPARATOR';
 ":"                   return 'COLON';
+"&"                   return 'AMP';
 ";"                   return 'SEMI';
 ","                   return 'COMMA';
 "*"                   return 'MULT';
-\s*\-\-[x]\s*            return 'ARROW_CROSS';
-\s*\-\-\>\s*             return 'ARROW_POINT';
-\s*\<\-\-\>\s*           return 'DOUBLE_ARROW_POINT';
-\s*[x]\-\-[x]\s*         return 'DOUBLE_ARROW_CROSS';
-\s*[o]\-\-[o]\s*         return 'DOUBLE_ARROW_CIRCLE';
-\s*[o]\.\-[o]\s*         return 'DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\<\=\=\>\s*           return 'DOUBLE_THICK_ARROW_POINT';
-\s*[o]\=\=[o]\s*         return 'DOUBLE_THICK_ARROW_CIRCLE';
-\s*[x]\=\=[x]\s*         return 'DOUBLE_THICK_ARROW_CROSS';
-\s*[x].\-[x]\s*          return 'DOUBLE_DOTTED_ARROW_CROSS';
-\s*[x]\-\.\-[x]\s*       return 'DOUBLE_DOTTED_ARROW_CROSS';
-\s*\<\.\-\>\s*           return 'DOUBLE_DOTTED_ARROW_POINT';
-\s*\<\-\.\-\>\s*         return 'DOUBLE_DOTTED_ARROW_POINT';
-\s*[o]\-\.\-[o]\s*       return 'DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\-\-[o]\s*            return 'ARROW_CIRCLE';
-\s*\-\-\-\s*             return 'ARROW_OPEN';
-\s*\-\.\-[x]\s*          return 'DOTTED_ARROW_CROSS';
-\s*\-\.\-\>\s*           return 'DOTTED_ARROW_POINT';
-\s*\-\.\-[o]\s*          return 'DOTTED_ARROW_CIRCLE';
-\s*\-\.\-\s*             return 'DOTTED_ARROW_OPEN';
-\s*.\-[x]\s*             return 'DOTTED_ARROW_CROSS';
-\s*\.\-\>\s*             return 'DOTTED_ARROW_POINT';
-\s*\.\-[o]\s*            return 'DOTTED_ARROW_CIRCLE';
-\s*\.\-\s*               return 'DOTTED_ARROW_OPEN';
-\s*\=\=[x]\s*            return 'THICK_ARROW_CROSS';
-\s*\=\=\>\s*             return 'THICK_ARROW_POINT';
-\s*\=\=[o]\s*            return 'THICK_ARROW_CIRCLE';
-\s*\=\=[\=]\s*           return 'THICK_ARROW_OPEN';
-\s*\<\-\-\s*             return 'START_DOUBLE_ARROW_POINT';
-\s*[x]\-\-\s*            return 'START_DOUBLE_ARROW_CROSS';
-\s*[o]\-\-\s*            return 'START_DOUBLE_ARROW_CIRCLE';
-\s*\<\-\.\s*             return 'START_DOUBLE_DOTTED_ARROW_POINT';
-\s*[x]\-\.\s*            return 'START_DOUBLE_DOTTED_ARROW_CROSS';
-\s*[o]\-\.\s*            return 'START_DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\<\=\=\s*             return 'START_DOUBLE_THICK_ARROW_POINT';
-\s*[x]\=\=\s*            return 'START_DOUBLE_THICK_ARROW_CROSS';
-\s*[o]\=\=\s*            return 'START_DOUBLE_THICK_ARROW_CIRCLE';
-\s*\-\-\s*               return '--';
-\s*\-\.\s*               return '-.';
-\s*\=\=\s*               return '==';
+\s*\-\-[x]\s*            return 'LINK';
+\s*\-\-\>\s*             return 'LINK';
+\s*\<\-\-\>\s*           return 'LINK';
+\s*[x]\-\-[x]\s*         return 'LINK';
+\s*[o]\-\-[o]\s*         return 'LINK';
+\s*[o]\.\-[o]\s*         return 'LINK';
+\s*\<\=\=\>\s*           return 'LINK';
+\s*[o]\=\=[o]\s*         return 'LINK';
+\s*[x]\=\=[x]\s*         return 'LINK';
+\s*[x].\-[x]\s*          return 'LINK';
+\s*[x]\-\.\-[x]\s*       return 'LINK';
+\s*\<\.\-\>\s*           return 'LINK';
+\s*\<\-\.\-\>\s*         return 'LINK';
+\s*[o]\-\.\-[o]\s*       return 'LINK';
+\s*\-\-[o]\s*            return 'LINK';
+\s*\-\-\-\s*             return 'LINK';
+\s*\-\.\-[x]\s*          return 'LINK';
+\s*\-\.\-\>\s*           return 'LINK';
+\s*\-\.\-[o]\s*          return 'LINK';
+\s*\-\.\-\s*             return 'LINK';
+\s*.\-[x]\s*             return 'LINK';
+\s*\.\-\>\s*             return 'LINK';
+\s*\.\-[o]\s*            return 'LINK';
+\s*\.\-\s*               return 'LINK';
+\s*\=\=[x]\s*            return 'LINK';
+\s*\=\=\>\s*             return 'LINK';
+\s*\=\=[o]\s*            return 'LINK';
+\s*\=\=[\=]\s*           return 'LINK';
+\s*\<\-\-\s*             return 'START_LINK';
+\s*[x]\-\-\s*            return 'START_LINK';
+\s*[o]\-\-\s*            return 'START_LINK';
+\s*\<\-\.\s*             return 'START_LINK';
+\s*[x]\-\.\s*            return 'START_LINK';
+\s*[o]\-\.\s*            return 'START_LINK';
+\s*\<\=\=\s*             return 'START_LINK';
+\s*[x]\=\=\s*            return 'START_LINK';
+\s*[o]\=\=\s*            return 'START_LINK';
+\s*\-\-\s*               return 'START_LINK';
+\s*\-\.\s*               return 'START_LINK';
+\s*\=\=\s*               return 'START_LINK';
 "(-"                  return '(-';
 "-)"                  return '-)';
+"(["                  return 'STADIUMSTART';
+"])"                  return 'STADIUMEND';
+"[("                  return 'CYLINDERSTART';
+")]"                  return 'CYLINDEREND';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 [\_]                  return 'UNDERSCORE';
@@ -92,12 +98,13 @@
 "<"                   return 'TAGSTART';
 ">"                   return 'TAGEND';
 "^"                   return 'UP';
+"\|"                   return 'SEP';
 "v"                   return 'DOWN';
 [A-Za-z]+             return 'ALPHA';
 "\\]"                 return 'TRAPEND';
 "[/"                  return 'TRAPSTART';
-"/]"                 return 'INVTRAPEND';
-"[\\"                  return 'INVTRAPSTART';
+"/]"                  return 'INVTRAPEND';
+"[\\"                 return 'INVTRAPSTART';
 [!"#$%&'*+,-.`?\\_/]  return 'PUNCTUATION';
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
@@ -245,7 +252,7 @@ spaceList
 
 statement
     : verticeStatement separator
-    { $$=$1}
+    { /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
     | styleStatement separator
     {$$=[];}
     | linkStyleStatement separator
@@ -283,68 +290,51 @@ separator: NEWLINE | SEMI | EOF ;
 //         {$$ = [$1];yy.setClass($1,$3)}
 //    ;
 
-verticeStatement: verticeStatement link node { yy.addLink($1[0],$3[0],$2); $$ = $3.concat($1) }
-    |node { $$ = $1 }
+
+verticeStatement: verticeStatement link node
+        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+    |  verticeStatement link node spaceList
+        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+    |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+    |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
     ;
 
 node: vertex
-        { $$ = [$1];}
+        { /* console.warn('nod', $1); */ $$ = [$1];}
+    | node spaceList AMP spaceList vertex
+        { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
     | vertex STYLE_SEPARATOR idString
         {$$ = [$1];yy.setClass($1,$3)}
     ;
 
 vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'square');}
-    |  idString SQS text SQE spaceList
-        {$$ = $1;yy.addVertex($1,$3,'square');}
     | idString PS PS text PE PE
         {$$ = $1;yy.addVertex($1,$4,'circle');}
-    | idString PS PS text PE PE spaceList
-        {$$ = $1;yy.addVertex($1,$4,'circle');}
     | idString '(-' text '-)'
         {$$ = $1;yy.addVertex($1,$3,'ellipse');}
-    | idString '(-' text '-)' spaceList
-        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
+    | idString STADIUMSTART text STADIUMEND
+        {$$ = $1;yy.addVertex($1,$3,'stadium');}
+    | idString CYLINDERSTART text CYLINDEREND
+        {$$ = $1;yy.addVertex($1,$3,'cylinder');}
     | idString PS text PE
         {$$ = $1;yy.addVertex($1,$3,'round');}
-    | idString PS text PE spaceList
-        {$$ = $1;yy.addVertex($1,$3,'round');}
     | idString DIAMOND_START text DIAMOND_STOP
         {$$ = $1;yy.addVertex($1,$3,'diamond');}
-    | idString DIAMOND_START text DIAMOND_STOP spaceList
-        {$$ = $1;yy.addVertex($1,$3,'diamond');}
     | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
         {$$ = $1;yy.addVertex($1,$4,'hexagon');}
-    | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP spaceList
-        {$$ = $1;yy.addVertex($1,$4,'hexagon');}
     | idString TAGEND text SQE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
-    | idString TAGEND text SQE spaceList
-        {$$ = $1;yy.addVertex($1,$3,'odd');}
     | idString TRAPSTART text TRAPEND
         {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
-    | idString TRAPSTART text TRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
     | idString INVTRAPSTART text INVTRAPEND
         {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
-    | idString INVTRAPSTART text INVTRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
     | idString TRAPSTART text INVTRAPEND
         {$$ = $1;yy.addVertex($1,$3,'lean_right');}
-    | idString TRAPSTART text INVTRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'lean_right');}
     | idString INVTRAPSTART text TRAPEND
         {$$ = $1;yy.addVertex($1,$3,'lean_left');}
-    | idString INVTRAPSTART text TRAPEND spaceList
-        {$$ = $1;yy.addVertex($1,$3,'lean_left');}
-/*  | idString SQS text TAGSTART
-        {$$ = $1;yy.addVertex($1,$3,'odd_right');}
-    | idString SQS text TAGSTART spaceList
-        {$$ = $1;yy.addVertex($1,$3,'odd_right');} */
     | idString
-        {$$ = $1;yy.addVertex($1);}
-    | idString spaceList
-        {$$ = $1;yy.addVertex($1);}
+        { /*console.warn('h: ', $1);*/$$ = $1;yy.addVertex($1);}
     ;
 
 
@@ -357,92 +347,12 @@ link: linkStatement arrowText
     {$1.text = $2;$$ = $1;}
     | linkStatement
     {$$ = $1;}
-    | '--' text ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_POINT' text ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"normal","text":$2};}
-    | '--' text ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_CIRCLE' text ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"normal","text":$2};}
-    | '--' text ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_CROSS' text ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"normal","text":$2};}
-    | '--' text ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"normal","text":$2};}
-    | '-.' text DOTTED_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_POINT' text DOTTED_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_CIRCLE' text DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_CROSS' text DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"dotted","text":$2};}
-    | '==' text THICK_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_POINT' text THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_CIRCLE' text THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_CROSS' text THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"thick","text":$2};}
+    | START_LINK text LINK
+        {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"text":$2};}
     ;
 
-linkStatement: ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"normal"};}
-    | DOUBLE_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"normal"};}
-    | ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"normal"};}
-    | DOUBLE_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"normal"};}
-    | ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"normal"};}
-    | DOUBLE_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"normal"};}
-    | ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"normal"};}
-    | DOTTED_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"dotted"};}
-    | DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted"};}
-    | DOTTED_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted"};}
-    | DOTTED_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"dotted"};}
-    | THICK_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick"};}
-    | THICK_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick"};}
-    | THICK_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick"};}
-    | THICK_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"thick"};}
+linkStatement: LINK
+        {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke};}
         ;
 
 arrowText:
@@ -460,13 +370,6 @@ text: textToken
 
 
 
-commentText: commentToken
-    {$$=$1;}
-    | commentText commentToken
-    {$$=$1+''+$2;}
-    ;
-
-
 keywords
     : STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | subgraph | end | DOWN | UP;
 
@@ -516,8 +419,6 @@ linkStyleStatement
           {$$ = $1;yy.updateLinkInterpolate($3,$7);}
     ;
 
-commentStatement: PCT PCT commentText;
-
 numList: NUM
         {$$ = [$1]}
     | numList COMMA NUM
@@ -539,9 +440,7 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
 
 /* Token lists */
 
-commentToken   : textToken | graphCodeTokens ;
-
-textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;
+textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
@@ -570,9 +469,9 @@ alphaNumStatement
         {$$='-';}
     ;
 
-alphaNumToken  : PUNCTUATION | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
+alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
 
-idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION;
+idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
 
-graphCodeTokens:  TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI ;
+graphCodeTokens: STADIUMSTART | STADIUMEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%

src/diagrams/flowchart/parser/subgraph.spec.js

@@ -16,6 +16,7 @@ describe('when parsing subgraphs', function() {
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(1);
     const subgraph = subgraphs[0];
+
     expect(subgraph.nodes.length).toBe(2);
     expect(subgraph.nodes[0]).toBe('a2');
     expect(subgraph.nodes[1]).toBe('a1');
@@ -83,7 +84,7 @@ describe('when parsing subgraphs', function() {
     const subgraph = subgraphs[0];
     expect(subgraph.nodes.length).toBe(1);
     expect(subgraph.nodes[0]).toBe('A');
-    expect(subgraph.id).toBe('mermaid-dom-id-1test');
+    expect(subgraph.id).toBe('1test');
   });
 
   it('should handle subgraphs1', function() {
@@ -191,6 +192,15 @@ describe('when parsing subgraphs', function() {
     expect(edges[0].type).toBe('arrow');
   });
 
+  it('should handle subgraphs3', function() {
+    const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle   \n\n    c-->d \nend\n');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges[0].type).toBe('arrow');
+  });
+
   it('should handle nested subgraphs', function() {
     const str =
       'graph TD\n' +
@@ -218,6 +228,14 @@ describe('when parsing subgraphs', function() {
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
 
+    expect(edges[0].type).toBe('arrow');
+  });
+  it('should handle subgraphs with multi node statements in it', function() {
+    const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\na & b --> c & e\n end;');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
     expect(edges[0].type).toBe('arrow');
   });
 });

src/diagrams/gantt/ganttDb.js

@@ -117,7 +117,7 @@ const checkTaskDates = function(task, dateFormat, excludes) {
 const fixTaskDates = function(startTime, endTime, dateFormat, excludes) {
   let invalid = false;
   let renderEndTime = null;
-  while (startTime.date() <= endTime.date()) {
+  while (startTime <= endTime) {
     if (!invalid) {
       renderEndTime = endTime.toDate();
     }
@@ -134,18 +134,32 @@ const getStartDate = function(prevTime, dateFormat, str) {
   str = str.trim();
 
   // Test for after
-  const re = /^after\s+([\d\w-]+)/;
+  const re = /^after\s+([\d\w- ]+)/;
   const afterStatement = re.exec(str.trim());
 
   if (afterStatement !== null) {
-    const task = findTaskById(afterStatement[1]);
+    // check all after ids and take the latest
+    let latestEndingTask = null;
+    afterStatement[1].split(' ').forEach(function(id) {
+      let task = findTaskById(id);
+      if (typeof task !== 'undefined') {
+        if (!latestEndingTask) {
+          latestEndingTask = task;
+        } else {
+          if (task.endTime > latestEndingTask.endTime) {
+            latestEndingTask = task;
+          }
+        }
+      }
+    });
 
-    if (typeof task === 'undefined') {
+    if (!latestEndingTask) {
       const dt = new Date();
       dt.setHours(0, 0, 0, 0);
       return dt;
+    } else {
+      return latestEndingTask.endTime;
     }
-    return task.endTime;
   }
 
   // Check for actual date set
@@ -488,6 +502,11 @@ const setClickFun = function(id, functionName, functionArgs) {
     }
   }
 
+  /* if no arguments passed into callback, default to passing in id */
+  if (argList.length === 0) {
+    argList.push(id);
+  }
+
   let rawTask = findTaskById(id);
   if (typeof rawTask !== 'undefined') {
     pushFun(id, () => {

src/diagrams/gantt/ganttDb.spec.js

@@ -174,6 +174,26 @@ describe('when using the ganttDb', function() {
     expect(tasks[6].task).toEqual('test7');
   });
 
+  it('should work when end date is the 31st', function() {
+    ganttDb.setDateFormat('YYYY-MM-DD');
+    ganttDb.addSection('Task endTime is on the 31st day of the month');
+    ganttDb.addTask('test1', 'id1,2019-09-30,11d');
+    ganttDb.addTask('test2', 'id2,after id1,20d');
+    const tasks = ganttDb.getTasks();
+
+    expect(tasks[0].startTime).toEqual(moment('2019-09-30', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].endTime).toEqual(moment('2019-10-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
+    expect(tasks[0].id).toEqual('id1');
+    expect(tasks[0].task).toEqual('test1');
+
+    expect(tasks[1].startTime).toEqual(moment('2019-10-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].endTime).toEqual(moment('2019-10-31', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
+    expect(tasks[1].id).toEqual('id2');
+    expect(tasks[1].task).toEqual('test2');
+  });
+
   describe('when setting inclusive end dates', function() {
     beforeEach(function() {
       ganttDb.setDateFormat('YYYY-MM-DD');

src/diagrams/gantt/ganttRenderer.js

@@ -357,9 +357,22 @@ export const draw = function(text, id) {
       .selectAll('text')
       .data(numOccurances)
       .enter()
-      .append('text')
-      .text(function(d) {
-        return d[0];
+      .append(function(d) {
+        const rows = d[0].split(/<br\s*\/?>/gi);
+        const dy = -(rows.length - 1) / 2;
+
+        const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        svgLabel.setAttribute('dy', dy + 'em');
+
+        for (let j = 0; j < rows.length; j++) {
+          const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+          tspan.setAttribute('alignment-baseline', 'central');
+          tspan.setAttribute('x', '10');
+          if (j > 0) tspan.setAttribute('dy', '1em');
+          tspan.textContent = rows[j];
+          svgLabel.appendChild(tspan);
+        }
+        return svgLabel;
       })
       .attr('x', 10)
       .attr('y', function(d, i) {

src/diagrams/gantt/parser/gantt.spec.js

@@ -47,6 +47,16 @@ describe('when parsing a gantt diagram it', function() {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
+  it('should handle multiline section titles with different line breaks', function() {
+    const str =
+      'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'excludes weekdays 2019-02-01\n' +
+      'section Line1<br>Line2<br/>Line3</br />Line4<br\t/>Line5';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
   /**
    * Beslutsflöde inligt nedan. Obs bla bla bla
    * ```
@@ -106,4 +116,34 @@ describe('when parsing a gantt diagram it', function() {
       }
     });
   });
+  it('should parse callback specifier with no args', function() {
+    spyOn(ganttDb, 'setClickEvent');
+    const str =
+      'gantt\n' +
+      'dateFormat  YYYY-MM-DD\n' +
+      'section Clickable\n' +
+      'Visit mermaidjs           :active, cl1, 2014-01-07, 3d\n' +
+      'Calling a callback        :cl2, after cl1, 3d\n\n' +
+      'click cl1 href "https://mermaidjs.github.io/"\n' +
+      'click cl2 call ganttTestClick()\n';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', null);
+  });
+  it('should parse callback specifier with arbitrary number of args', function() {
+    spyOn(ganttDb, 'setClickEvent');
+    const str =
+      'gantt\n' +
+      'dateFormat  YYYY-MM-DD\n' +
+      'section Clickable\n' +
+      'Visit mermaidjs           :active, cl1, 2014-01-07, 3d\n' +
+      'Calling a callback        :cl2, after cl1, 3d\n\n' +
+      'click cl1 href "https://mermaidjs.github.io/"\n' +
+      'click cl2 call ganttTestClick("test0", test1, test2)\n';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    const args = '"test1", "test2", "test3"';
+    expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', '"test0", test1, test2');
+  });
+
 });

src/diagrams/git/gitGraphRenderer.js

@@ -302,6 +302,7 @@ export const draw = function(txt, id, ver) {
   try {
     const parser = gitGraphParser.parser;
     parser.yy = db;
+    parser.yy.clear();
 
     logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
     // Parse the graph definition

src/diagrams/pie/parser/pie.jison

@@ -49,7 +49,7 @@ line
 
 statement
 	:  STR VALUE {
-		console.log('str:'+$1+' value: '+$2)
+		/*console.log('str:'+$1+' value: '+$2)*/
 		yy.addSection($1,yy.cleanupValue($2));  }
 	| title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
 	;

src/diagrams/sequence/sequenceDb.js

@@ -16,6 +16,25 @@ export const addActor = function(id, name, description) {
   actors[id] = { name: name, description: description };
 };
 
+const activationCount = part => {
+  let i = 0;
+  let count = 0;
+  for (i = 0; i < messages.length; i++) {
+    // console.warn(i, messages[i]);
+    if (messages[i].type === LINETYPE.ACTIVE_START) {
+      if (messages[i].from.actor === part) {
+        count++;
+      }
+    }
+    if (messages[i].type === LINETYPE.ACTIVE_END) {
+      if (messages[i].from.actor === part) {
+        count--;
+      }
+    }
+  }
+  return count;
+};
+
 export const addMessage = function(idFrom, idTo, message, answer) {
   messages.push({ from: idFrom, to: idTo, message: message, answer: answer });
 };
@@ -24,7 +43,25 @@ export const addSignal = function(idFrom, idTo, message, messageType) {
   logger.debug(
     'Adding message from=' + idFrom + ' to=' + idTo + ' message=' + message + ' type=' + messageType
   );
+
+  if (messageType === LINETYPE.ACTIVE_END) {
+    const cnt = activationCount(idFrom.actor);
+    logger.debug('Adding message from=', messages, cnt);
+    if (cnt < 1) {
+      // Bail out as there is an activation signal from an inactive participant
+      var error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')');
+      error.hash = {
+        text: '->>-',
+        token: '->>-',
+        line: '1',
+        loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
+        expected: ["'ACTIVE_PARTICIPANT'"]
+      };
+      throw error;
+    }
+  }
   messages.push({ from: idFrom, to: idTo, message: message, type: messageType });
+  return true;
 };
 
 export const getMessages = function() {

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -214,6 +214,33 @@ describe('when parsing a sequenceDiagram', function() {
     expect(messages[7].type).toBe(parser.yy.LINETYPE.ACTIVE_END);
     expect(messages[7].from.actor).toBe('Carol');
   });
+  it('it should handle fail parsing when activating an inactive participant', function() {
+    const str =
+      `sequenceDiagram
+    participant user as End User
+    participant Server as Server
+    participant System as System
+    participant System2 as System2
+
+    user->>+Server: Test
+    user->>+Server: Test2
+    user->>System: Test
+    Server->>-user: Test
+    Server->>-user: Test2
+
+    %% The following deactivation of Server will fail
+    Server->>-user: Test3`;
+
+    let error = false;
+    try {
+      parser.parse(str);
+    } catch(e) {
+      console.log(e.hash);
+      error = true;
+    }
+    expect(error).toBe(true);
+  });
+
   it('it should handle comments in a sequenceDiagram', function() {
     const str =
       'sequenceDiagram\n' +
@@ -333,6 +360,40 @@ describe('when parsing a sequenceDiagram', function() {
     expect(messages[0].from).toBe('Alice');
     expect(messages[2].from).toBe('John');
   });
+  it('it should handle different line breaks', function() {
+    const str =
+      'sequenceDiagram\n' +
+      'participant 1 as multiline<br>text\n' +
+      'participant 2 as multiline<br/>text\n' +
+      'participant 3 as multiline<br />text\n' +
+      'participant 4 as multiline<br \t/>text\n' +
+      '1->>2: multiline<br>text\n' +
+      'note right of 2: multiline<br>text\n' +
+      '2->>3: multiline<br/>text\n' +
+      'note right of 3: multiline<br/>text\n' +
+      '3->>4: multiline<br />text\n' +
+      'note right of 4: multiline<br />text\n' +
+      '4->>1: multiline<br \t/>text\n' +
+      'note right of 1: multiline<br \t/>text\n';
+
+    parser.parse(str);
+
+    const actors = parser.yy.getActors();
+    expect(actors['1'].description).toBe('multiline<br>text');
+    expect(actors['2'].description).toBe('multiline<br/>text');
+    expect(actors['3'].description).toBe('multiline<br />text');
+    expect(actors['4'].description).toBe('multiline<br \t/>text');
+
+    const messages = parser.yy.getMessages();
+    expect(messages[0].message).toBe('multiline<br>text');
+    expect(messages[1].message).toBe('multiline<br>text');
+    expect(messages[2].message).toBe('multiline<br/>text');
+    expect(messages[3].message).toBe('multiline<br/>text');
+    expect(messages[4].message).toBe('multiline<br />text');
+    expect(messages[5].message).toBe('multiline<br />text');
+    expect(messages[6].message).toBe('multiline<br \t/>text');
+    expect(messages[7].message).toBe('multiline<br \t/>text');
+  });
   it('it should handle notes over a single actor', function() {
     const str =
       'sequenceDiagram\n' + 'Alice->Bob: Hello Bob, how are you?\n' + 'Note over Bob: Bob thinks\n';

src/diagrams/sequence/sequenceRenderer.js

@@ -168,7 +168,7 @@ export const bounds = {
 
 const _drawLongText = (text, x, y, g, width) => {
   let textHeight = 0;
-  const lines = text.split(/<br\/?>/gi);
+  const lines = text.split(/<br\s*\/?>/gi);
   for (const line of lines) {
     const textObj = svgDraw.getTextObj();
     textObj.x = x;
@@ -233,7 +233,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   let textElem;
   let counterBreaklines = 0;
   let breaklineOffset = 17;
-  const breaklines = msg.message.split(/<br\/?>/gi);
+  const breaklines = msg.message.split(/<br\s*\/?>/gi);
   for (const breakline of breaklines) {
     textElem = g
       .append('text') // text label for the x axis

src/diagrams/sequence/svgDraw.js

@@ -18,7 +18,7 @@ export const drawRect = function(elem, rectData) {
 
 export const drawText = function(elem, textData) {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br\/?>/gi, ' ');
+  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
 
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
@@ -321,7 +321,7 @@ const _drawTextCandidateFunc = (function() {
   function byTspan(content, g, x, y, width, height, textAttrs, conf) {
     const { actorFontSize, actorFontFamily } = conf;
 
-    const lines = content.split(/<br\/?>/gi);
+    const lines = content.split(/<br\s*\/?>/gi);
     for (let i = 0; i < lines.length; i++) {
       const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
       const text = g

src/diagrams/state/shapes.js

@@ -73,7 +73,7 @@ export const drawDescrState = (g, stateDef) => {
   const title = g
     .append('text')
     .attr('x', 2 * getConfig().state.padding)
-    .attr('y', getConfig().state.textHeight + 1.5 * getConfig().state.padding)
+    .attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)
     .attr('font-size', getConfig().state.fontSize)
     .attr('class', 'state-title')
     .text(stateDef.descriptions[0]);
@@ -87,7 +87,7 @@ export const drawDescrState = (g, stateDef) => {
     .attr(
       'y',
       titleHeight +
-        getConfig().state.padding * 0.2 +
+        getConfig().state.padding * 0.4 +
         getConfig().state.dividerMargin +
         getConfig().state.textHeight
     )
@@ -129,71 +129,108 @@ export const drawDescrState = (g, stateDef) => {
  * Adds the creates a box around the existing content and adds a
  * panel for the id on top of the content.
  */
-export const addIdAndBox = (g, stateDef) => {
-  // TODO Move hardcodings to conf
-  // const addTspan = function(textEl, txt, isFirst) {
-  //   const tSpan = textEl
-  //     .append('tspan')
-  //     .attr('x', 2 * getConfig().state.padding)
-  //     .text(txt);
-  //   if (!isFirst) {
-  //     tSpan.attr('dy', getConfig().state.textHeight);
-  //   }
-  // };
+/**
+ * Function that creates an title row and a frame around a substate for a composit state diagram.
+ * The function returns a new d3 svg object with updated width and height properties;
+ * @param {*} g The d3 svg object for the substate to framed
+ * @param {*} stateDef The info about the
+ */
+export const addTitleAndBox = (g, stateDef, altBkg) => {
+  const pad = getConfig().state.padding;
+  const dblPad = 2 * getConfig().state.padding;
+  const orgBox = g.node().getBBox();
+  const orgWidth = orgBox.width;
+  const orgX = orgBox.x;
+
   const title = g
     .append('text')
-    .attr('x', 2 * getConfig().state.padding)
+    .attr('x', 0)
     .attr('y', getConfig().state.titleShift)
     .attr('font-size', getConfig().state.fontSize)
     .attr('class', 'state-title')
     .text(stateDef.id);
 
   const titleBox = title.node().getBBox();
-
-  const lineY = 1 - getConfig().state.textHeight;
-  const descrLine = g
-    .append('line') // text label for the x axis
-    .attr('x1', 0)
-    .attr('y1', lineY)
-    .attr('y2', lineY)
-    .attr('class', 'descr-divider');
+  const titleWidth = titleBox.width + dblPad;
+  let width = Math.max(titleWidth, orgWidth); // + dblPad;
+  if (width === orgWidth) {
+    width = width + dblPad;
+  }
+  let startX;
+  // const lineY = 1 - getConfig().state.textHeight;
+  // const descrLine = g
+  //   .append('line') // text label for the x axis
+  //   .attr('x1', 0)
+  //   .attr('y1', lineY)
+  //   .attr('y2', lineY)
+  //   .attr('class', 'descr-divider');
 
   const graphBox = g.node().getBBox();
-  title.attr('x', graphBox.width / 2 - titleBox.width / 2);
-  descrLine.attr('x2', graphBox.width + getConfig().state.padding);
+  // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
+  // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
 
+  if (stateDef.doc) {
+    // cnsole.warn(
+    //   stateDef.id,
+    //   'orgX: ',
+    //   orgX,
+    //   'width: ',
+    //   width,
+    //   'titleWidth: ',
+    //   titleWidth,
+    //   'orgWidth: ',
+    //   orgWidth,
+    //   'width',
+    //   width
+    // );
+  }
+
+  startX = orgX - pad;
+  if (titleWidth > orgWidth) {
+    startX = (orgWidth - width) / 2 + pad;
+  }
+  if (Math.abs(orgX - graphBox.x) < pad) {
+    if (titleWidth > orgWidth) {
+      startX = orgX - (titleWidth - orgWidth) / 2;
+    }
+  }
+
+  const lineY = 1 - getConfig().state.textHeight;
   // White color
   g.insert('rect', ':first-child')
-    .attr('x', graphBox.x)
+    .attr('x', startX)
     .attr('y', lineY)
-    .attr('class', 'composit')
-    .attr('width', graphBox.width + getConfig().state.padding)
+    .attr('class', altBkg ? 'alt-composit' : 'composit')
+    .attr('width', width)
     .attr(
       'height',
       graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
     )
     .attr('rx', '0');
 
+  title.attr('x', startX + pad);
+  if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
+
   // Title background
   g.insert('rect', ':first-child')
-    .attr('x', graphBox.x)
+    .attr('x', startX)
     .attr(
       'y',
       getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
     )
-    .attr('width', graphBox.width + getConfig().state.padding)
+    .attr('width', width)
     // Just needs to be higher then the descr line, will be clipped by the white color box
     .attr('height', getConfig().state.textHeight * 3)
     .attr('rx', getConfig().state.radius);
 
   // Full background
   g.insert('rect', ':first-child')
-    .attr('x', graphBox.x)
+    .attr('x', startX)
     .attr(
       'y',
       getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
     )
-    .attr('width', graphBox.width + getConfig().state.padding)
+    .attr('width', width)
     .attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
     .attr('rx', getConfig().state.radius);
 
@@ -243,7 +280,7 @@ const drawForkJoinState = (g, stateDef) => {
 
 export const drawText = function(elem, textData) {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br\/?>/gi, ' ');
+  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
 
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
@@ -271,7 +308,7 @@ const _drawLongText = (_text, x, y, g) => {
 
   let text = _text.replace(/\r\n/g, '<br/>');
   text = text.replace(/\n/g, '<br/>');
-  const lines = text.split(/<br\/?>/gi);
+  const lines = text.split(/<br\s*\/?>/gi);
 
   let tHeight = 1.25 * getConfig().state.noteMargin;
   for (const line of lines) {
@@ -355,7 +392,7 @@ export const drawState = function(elem, stateDef) {
 };
 
 const getRows = s => {
-  let str = s.replace(/<br\/?>/gi, '#br#');
+  let str = s.replace(/<br\s*\/?>/gi, '#br#');
   str = str.replace(/\\n/g, '#br#');
   return str.split('#br#');
 };

src/diagrams/state/stateDiagram.spec.js

@@ -261,6 +261,16 @@ describe('state diagram, ', function() {
 
       parser.parse(str);
     });
+    it('should handle multiline notes with different line breaks', function() {
+      const str = `stateDiagram
+        State1
+        note right of State1
+          Line1<br>Line2<br/>Line3<br />Line4<br	/>Line5
+        end note
+      `;
+
+      parser.parse(str);
+    });
     it('should handle floating notes', function() {
       const str = `stateDiagram
         foo: bar

src/diagrams/state/stateRenderer.js

@@ -5,40 +5,19 @@ import { logger } from '../../logger';
 import stateDb from './stateDb';
 import { parser } from './parser/stateDiagram';
 // import idCache from './id-cache';
-import { drawState, addIdAndBox, drawEdge } from './shapes';
+import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 
 parser.yy = stateDb;
 
 // TODO Move conf object to main conf in mermaidAPI
 let conf;
-// {
-//   // Used
-//   padding: 5,
-//   // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
-//   // layout. This might need updating if/when switching font
-//   fontSizeFactor: 5.02,
-//   labelHeight: 16,
-//   edgeLengthFactor: '20',
-//   compositTitleSize: 35
-// };
 
 const transformationLog = {};
 
 export const setConf = function() {};
 
 // Todo optimize
-// const getGraphId = function(label) {
-//   const keys = idCache.keys();
-
-//   for (let i = 0; i < keys.length; i++) {
-//     if (idCache.get(keys[i]).label === label) {
-//       return keys[i];
-//     }
-//   }
-
-//   return undefined;
-// };
 
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
@@ -68,11 +47,11 @@ export const draw = function(text, id) {
   parser.parse(text);
   logger.debug('Rendering diagram ' + text);
 
-  // /// / Fetch the default direction, use TD if none was found
+  // Fetch the default direction, use TD if none was found
   const diagram = d3.select(`[id='${id}']`);
   insertMarkers(diagram);
 
-  // // Layout graph, Create a new directed graph
+  // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
     multigraph: false,
     compound: true,
@@ -81,19 +60,17 @@ export const draw = function(text, id) {
     // ranksep: '20'
   });
 
-  // // Default to assigning a new object as a label for each new edge.
+  // Default to assigning a new object as a label for each new edge.
   graph.setDefaultEdgeLabel(function() {
     return {};
   });
 
   const rootDoc = stateDb.getRootDoc();
-  renderDoc(rootDoc, diagram);
+  renderDoc(rootDoc, diagram, undefined, false);
 
   const padding = conf.padding;
   const bounds = diagram.node().getBBox();
 
-  console.warn(bounds);
-
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
@@ -102,7 +79,7 @@ export const draw = function(text, id) {
   // diagram.attr('height', height);
 
   // Zoom in a bit
-  diagram.attr('width', width * 2);
+  diagram.attr('width', width * 1.75);
   // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',
@@ -125,17 +102,26 @@ const getLabelWidth = text => {
 /* TODO: REMOVE DUPLICATION, SEE SHAPES */
 const getRows = s => {
   if (!s) return 1;
-  let str = s.replace(/<br\/?>/gi, '#br#');
+  let str = s.replace(/<br\s*\/?>/gi, '#br#');
   str = str.replace(/\\n/g, '#br#');
   return str.split('#br#');
 };
 
-const renderDoc = (doc, diagram, parentId) => {
+const renderDoc = (doc, diagram, parentId, altBkg) => {
   // // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
     compound: true
   });
 
+  let i;
+  let edgeFreeDoc = true;
+  for (i = 0; i < doc.length; i++) {
+    if (doc[i].stmt === 'relation') {
+      edgeFreeDoc = false;
+      break;
+    }
+  }
+
   // Set an object for the graph label
   if (parentId)
     graph.setGraph({
@@ -144,8 +130,11 @@ const renderDoc = (doc, diagram, parentId) => {
       compound: true,
       // acyclicer: 'greedy',
       ranker: 'tight-tree',
-      ranksep: conf.edgeLengthFactor
+      ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
+      nodeSep: edgeFreeDoc ? 1 : 50
       // isMultiGraph: false
+      // ranksep: 5,
+      // nodesep: 1
     });
   else {
     graph.setGraph({
@@ -154,7 +143,8 @@ const renderDoc = (doc, diagram, parentId) => {
       // isCompound: true,
       // acyclicer: 'greedy',
       // ranker: 'longest-path'
-      ranksep: conf.edgeLengthFactor,
+      ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
+      nodeSep: edgeFreeDoc ? 1 : 50,
       ranker: 'tight-tree'
       // ranker: 'network-simplex'
       // isMultiGraph: false
@@ -187,14 +177,14 @@ const renderDoc = (doc, diagram, parentId) => {
         .append('g')
         .attr('id', stateDef.id)
         .attr('class', 'stateGroup');
-      node = renderDoc(stateDef.doc, sub, stateDef.id);
+      node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);
 
       if (first) {
         // first = false;
-        sub = addIdAndBox(sub, stateDef);
+        sub = addTitleAndBox(sub, stateDef, altBkg);
         let boxBounds = sub.node().getBBox();
         node.width = boxBounds.width;
-        node.height = boxBounds.height + 2 * conf.padding;
+        node.height = boxBounds.height + conf.padding / 2;
         transformationLog[stateDef.id] = { y: conf.compositTitleSize };
       } else {
         // sub = addIdAndBox(sub, stateDef);
@@ -280,8 +270,8 @@ const renderDoc = (doc, diagram, parentId) => {
             pShift = 0;
           }
         }
-        divider.setAttribute('x1', 0 - pShift);
-        divider.setAttribute('x2', pWidth - pShift);
+        divider.setAttribute('x1', 0 - pShift + 8);
+        divider.setAttribute('x2', pWidth - pShift - 8);
       });
     } else {
       logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));

src/logger.js

@@ -23,23 +23,34 @@ export const setLogLevel = function(level) {
   logger.error = () => {};
   logger.fatal = () => {};
   if (level <= LEVELS.fatal) {
-    logger.fatal = console.log.bind(console, '\x1b[35m', format('FATAL'));
+    logger.fatal = console.error
+      ? console.error.bind(console, format('FATAL'), 'color: orange')
+      : console.log.bind(console, '\x1b[35m', format('FATAL'));
   }
   if (level <= LEVELS.error) {
-    logger.error = console.log.bind(console, '\x1b[31m', format('ERROR'));
+    logger.error = console.error
+      ? console.error.bind(console, format('ERROR'), 'color: orange')
+      : console.log.bind(console, '\x1b[31m', format('ERROR'));
   }
   if (level <= LEVELS.warn) {
-    logger.warn = console.log.bind(console, `\x1b[33m`, format('WARN'));
+    logger.warn = console.warn
+      ? console.warn.bind(console, format('WARN'), 'color: orange')
+      : console.log.bind(console, `\x1b[33m`, format('WARN'));
   }
   if (level <= LEVELS.info) {
-    logger.info = console.log.bind(console, '\x1b[34m', format('INFO'));
+    logger.info = console.info
+      ? // ? console.info.bind(console, '\x1b[34m', format('INFO'), 'color: blue')
+        console.info.bind(console, format('INFO'), 'color: lightblue')
+      : console.log.bind(console, '\x1b[34m', format('INFO'));
   }
   if (level <= LEVELS.debug) {
-    logger.debug = console.log.bind(console, '\x1b[32m', format('DEBUG'));
+    logger.debug = console.debug
+      ? console.debug.bind(console, format('DEBUG'), 'color: lightgreen')
+      : console.log.bind(console, '\x1b[32m', format('DEBUG'));
   }
 };
 
 const format = level => {
-  const time = moment().format('HH:mm:ss.SSS');
-  return `${time} : ${level} : `;
+  const time = moment().format('ss.SSS');
+  return `%c${time} : ${level} : `;
 };

src/mermaid.js

@@ -98,7 +98,7 @@ const init = function() {
     txt = he
       .decode(txt)
       .trim()
-      .replace(/<br>/gi, '<br/>');
+      .replace(/<br\s*\/?>/gi, '<br/>');
 
     mermaidAPI.render(
       id,
@@ -116,7 +116,6 @@ const init = function() {
 };
 
 const initialize = function(config) {
-  logger.debug('Initializing mermaid ');
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
       mermaid.startOnLoad = config.mermaid.startOnLoad;
@@ -126,6 +125,7 @@ const initialize = function(config) {
     }
   }
   mermaidAPI.initialize(config);
+  logger.debug('Initializing mermaid ');
 };
 
 /**

src/mermaidAPI.js

@@ -52,14 +52,14 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  * <pre>
  * mermaid.initialize({
  *   flowchart:{
- *      htmlLabels: false
+ *     htmlLabels: false
  *   }
  * });
  * </pre>
  *
  * **Example 2:**
  * <pre>
- *  <script>
+ * &lt;script>
  *   var config = {
  *     startOnLoad:true,
  *     flowchart:{
@@ -71,7 +71,7 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  *     securityLevel:'loose',
  *   };
  *   mermaid.initialize(config);
- * </script>
+ * &lt;/script>
  * </pre>
  * A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
  *
@@ -142,6 +142,20 @@ const config = {
      */
     htmlLabels: true,
 
+    /**
+     * Defines the spacing between nodes on the same level (meaning horizontal spacing for
+     * TB or BT graphs, and the vertical spacing for LR as well as RL graphs).
+     * **Default value 50**.
+     */
+    nodeSpacing: 50,
+
+    /**
+     * Defines the spacing between nodes on different levels (meaning vertical spacing for
+     * TB or BT graphs, and the horizontal spacing for LR as well as RL graphs).
+     * **Default value 50**.
+     */
+    rankSpacing: 50,
+
     /**
      * How mermaid renders curves for flowcharts. Possible values are
      *   * basis
@@ -585,23 +599,23 @@ const render = function(id, txt, cb, container) {
     .selectAll('foreignobject > *')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml');
 
-  let url = '';
-  if (config.arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
+  // if (config.arrowMarkerAbsolute) {
+  //   url =
+  //     window.location.protocol +
+  //     '//' +
+  //     window.location.host +
+  //     window.location.pathname +
+  //     window.location.search;
+  //   url = url.replace(/\(/g, '\\(');
+  //   url = url.replace(/\)/g, '\\)');
+  // }
 
   // Fix for when the base tag is used
-  let svgCode = d3
-    .select('#d' + id)
-    .node()
-    .innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
+  let svgCode = d3.select('#d' + id).node().innerHTML;
+
+  if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
+    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
+  }
 
   svgCode = decodeEntities(svgCode);
 
@@ -613,6 +627,9 @@ const render = function(id, txt, cb, container) {
       case 'gantt':
         cb(svgCode, ganttDb.bindFunctions);
         break;
+      case 'class':
+        cb(svgCode, classDb.bindFunctions);
+        break;
       default:
         cb(svgCode);
     }

src/themes/class.scss

@@ -10,6 +10,10 @@ g.classGroup text {
   }
 }
 
+g.clickable {
+  cursor: pointer;
+}
+
 g.classGroup rect {
   fill: $nodeBkg;
   stroke: $nodeBorder;
@@ -38,6 +42,10 @@ g.classGroup line {
   fill: none;
 }
 
+.dashed-line{
+  stroke-dasharray: 3;
+}
+
 @mixin composition {
   fill: $nodeBorder;
   stroke: $nodeBorder;

src/themes/flowchart.scss

@@ -11,7 +11,8 @@
 .node rect,
 .node circle,
 .node ellipse,
-.node polygon {
+.node polygon,
+.node path {
   fill: $mainBkg;
   stroke: $nodeBorder;
   stroke-width: 1px;

src/themes/gantt.scss

@@ -54,7 +54,7 @@
 
 .grid .tick {
   stroke: $gridColor;
-  opacity: 0.3;
+  opacity: 0.8;
   shape-rendering: crispEdges;
   text {
     font-family: 'trebuchet ms', verdana, arial;

src/themes/state.scss

@@ -37,6 +37,11 @@ g.stateGroup line {
   border-bottom: 1px
 }
 
+.stateGroup .alt-composit {
+  fill: #e0e0e0;
+  border-bottom: 1px
+}
+
 .state-note {
   stroke: $noteBorderColor;
   fill: $noteBkgColor;

src/utils.js

@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { logger } from './logger';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 
 /**
  * @function detectType
@@ -73,6 +74,41 @@ export const interpolateToCurve = (interpolate, defaultCurve) => {
   return d3[curveName] || defaultCurve;
 };
 
+export const sanitize = (text, config) => {
+  let txt = text;
+  let htmlLabels = true;
+  if (
+    config.flowchart &&
+    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
+  )
+    htmlLabels = false;
+
+  if (config.securityLevel !== 'loose' && htmlLabels) { // eslint-disable-line
+    txt = txt.replace(/<br\s*\/?>/gi, '#br#');
+    txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    txt = txt.replace(/=/g, '&equals;');
+    txt = txt.replace(/#br#/g, '<br/>');
+  }
+
+  return txt;
+};
+
+export const formatUrl = (linkStr, config) => {
+  let url = linkStr.trim();
+
+  if (url) {
+    if (config.securityLevel !== 'loose') {
+      return sanitizeUrl(url);
+    } else {
+      if (!/^(https?:)?\/\//i.test(url)) {
+        url = 'http://' + url;
+      }
+    }
+
+    return url;
+  }
+};
+
 const distance = (p1, p2) =>
   p1 && p2 ? Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) : 0;
 
@@ -174,5 +210,7 @@ export default {
   isSubstringInArray,
   interpolateToCurve,
   calcLabelPosition,
-  calcCardinalityPosition
+  calcCardinalityPosition,
+  sanitize,
+  formatUrl
 };

webpack.config.base.js

@@ -1,10 +1,10 @@
-import path from 'path'
+import path from 'path';
 
 const amdRule = {
   parser: {
     amd: false // https://github.com/lodash/lodash/issues/3052
   }
-}
+};
 
 const jisonRule = {
   test: /\.jison$/,
@@ -14,7 +14,7 @@ const jisonRule = {
       'token-stack': true
     }
   }
-}
+};
 const jsRule = {
   test: /\.js$/,
   include: [
@@ -24,16 +24,13 @@ const jsRule = {
   use: {
     loader: 'babel-loader'
   }
-}
+};
 
-const scssRule = { // load scss to string
+const scssRule = {
+  // load scss to string
   test: /\.scss$/,
-  use: [
-    { loader: 'css-to-string-loader' },
-    { loader: 'css-loader' },
-    { loader: 'sass-loader' }
-  ]
-}
+  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
+};
 
 export const jsConfig = () => {
   return {
@@ -59,5 +56,5 @@ export const jsConfig = () => {
       rules: [amdRule, jsRule, scssRule, jisonRule]
     },
     devtool: 'source-map'
-  }
-}
+  };
+};