From 4ee3cea6ce91678a5f593ec0ace03837c8fe33e4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Fri, 21 Feb 2020 10:31:11 +0100
Subject: [PATCH 01/12] Setting version to 8.4.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30d14ee66..8ed257b57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.7",
+  "version": "8.4.8",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [

From 6c7b7b796e51552172c3aa72e4b74d65fb384fe9 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Fri, 21 Feb 2020 10:49:52 +0100
Subject: [PATCH 02/12] Docs updated to new version

---
 docs/index.html         | 2 +-
 docs/sequenceDiagram.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 376fd5d66..5d96945a8 100644
--- a/docs/index.html
+++ b/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.7/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.8/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),
diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md
index bf95d078c..f94492713 100755
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@@ -284,7 +284,7 @@ sequenceDiagram
 
 ## sequenceNumbers
 
-It is possiebl to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
+It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
 ```
     <script>
       mermaid.initialize({

From c527392e214a8a090da4b898a2cb995e7267c8c0 Mon Sep 17 00:00:00 2001
From: Soptq <32592090+Soptq@users.noreply.github.com>
Date: Wed, 1 Apr 2020 15:12:45 +0800
Subject: [PATCH 03/12] Add useMaxWidth to stateRenderer

---
 src/diagrams/state/stateRenderer.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 405bb358a..03fee04b2 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -75,8 +75,13 @@ export const draw = function(text, id) {
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
-  // Zoom in a bit
-  diagram.attr('width', width * 1.75);
+  if (conf.useMaxWidth) {
+    diagram.attr('width', '100%');
+    diagram.attr('style', `max-width: ${width * 1.75}px;`);
+  } else {
+    // Zoom in a bit
+    diagram.attr('width', width * 1.75);
+  }
   // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',

From 9d5303c59dbada2de7f53e9b5251edaf41b684a4 Mon Sep 17 00:00:00 2001
From: Adrian Hall <ade@adrian-hall.name>
Date: Thu, 2 Apr 2020 15:29:12 +0100
Subject: [PATCH 04/12] Prevent un-labelled edges that are left of the
 left-most vertex from being cut off the diagram

---
 cypress/integration/rendering/flowchart.spec.js | 12 ++++++++++++
 src/diagrams/flowchart/flowRenderer.js          | 12 ++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index c88129ddc..1a7c41163 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -640,4 +640,16 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('31: should not slice off edges that are to the left of the left-most vertex', () => {
+    imgSnapshotTest(
+      `graph TD
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index e572f9188..bfe407b16 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -380,10 +380,6 @@ export const draw = function(text, id) {
   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%');
@@ -393,10 +389,10 @@ export const draw = function(text, id) {
     svg.attr('width', width);
   }
 
-  svg.attr('viewBox', `0 0 ${width} ${height}`);
-  svg
-    .select('g')
-    .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
+  // Ensure the viewBox includes the whole svgBounds area with extra space for padding
+  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
+  logger.debug(`viewBox ${vBox}`);
+  svg.attr('viewBox', vBox);
 
   // Index nodes
   flowDb.indexNodes('subGraph' + i);

From fc70a8e1454b20bb7b0162d84ba580ef8588c2a5 Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Sat, 4 Apr 2020 21:53:31 +0200
Subject: [PATCH 05/12] #1271 Fix autonumber positioning in sequence diagrams
 with multiline texts

---
 .../integration/rendering/sequencediagram.spec.js   | 13 +++++++++++++
 dist/index.html                                     |  8 ++++++++
 src/diagrams/sequence/sequenceRenderer.js           |  2 +-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index c084b73c1..cf65485c7 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -182,5 +182,18 @@ context('Sequence diagram', () => {
       {}
       );
     });
+    it('should render autonumber with different line breaks', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        autonumber
+        Alice->>John: Hello John,<br>how are you?
+        Alice->>John: John,<br/>can you hear me?
+        John-->>Alice: Hi Alice,<br />I can hear you!
+        John-->>Alice: I feel great!
+      `,
+      {}
+      );
+    });
   });
 });
diff --git a/dist/index.html b/dist/index.html
index 46af0d709..6c6d9dc8c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -441,6 +441,14 @@ end
     4->>1: multiline<br 	/>using #lt;br 	/#gt;
     note right of 1: multiline<br 	/>using #lt;br 	/#gt;
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    autonumber
+    Alice->>John: Hello John,<br>how are you?
+    Alice->>John: John,<br/>can you hear me?
+    John-->>Alice: Hi Alice,<br />I can hear you!
+    John-->>Alice: I feel great!
+  </div>
 
   <hr/>
 
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 96f99d9c2..c297a6526 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -362,7 +362,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
     line.attr('marker-start', 'url(' + url + '#sequencenumber)');
     g.append('text')
       .attr('x', startx)
-      .attr('y', verticalPos + 4)
+      .attr('y', verticalPos + 4 + totalOffset)
       .attr('font-family', 'sans-serif')
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')

From dcfa903176cb79b8a7cbc316c4a8e20de11765b2 Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Sun, 5 Apr 2020 01:59:18 +0200
Subject: [PATCH 06/12] #1290 Hide/style today marker in gantt diagram

---
 cypress/integration/rendering/gantt.spec.js | 32 ++++++++++++++++++++-
 dist/index.html                             | 25 +++++++++++++++-
 src/diagrams/gantt/ganttDb.js               | 12 ++++++++
 src/diagrams/gantt/ganttDb.spec.js          | 11 +++++++
 src/diagrams/gantt/ganttRenderer.js         | 14 +++++++--
 src/diagrams/gantt/parser/gantt.jison       |  8 ++++--
 src/diagrams/gantt/parser/gantt.spec.js     |  8 ++++++
 7 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c3614ec19..4c90654c8 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -1,7 +1,7 @@
 /* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util.js';
 
-describe('Sequencediagram', () => {
+describe('Gantt diagram', () => {
   it('should render a gantt chart', () => {
     imgSnapshotTest(
       `
@@ -130,4 +130,34 @@ describe('Sequencediagram', () => {
       {}
     );
   });
+
+  it('should hide today marker', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title Hide today marker (vertical line should not be visible)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker off
+        section Section1
+         Today: 1, -1h
+      `,
+      {}
+    );
+  });
+
+  it('should style today marker', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      title Style today marker (vertical line should be 5px wide and half-transparent blue)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+      section Section1
+       Today: 1, -1h
+      `,
+      {}
+    );
+  });
 });
diff --git a/dist/index.html b/dist/index.html
index 46af0d709..df4f5307d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -16,6 +16,9 @@
   <div class="mermaid">
     info
   </div>
+
+  <hr/>
+
   <div class="mermaid">
     gantt
       title Exclusive end dates (Manual date should end on 3d)
@@ -25,7 +28,6 @@
        2 Days: 1, 2019-01-01,2d
        Manual Date: 2, 2019-01-01,2019-01-03
   </div>
-
   <div class="mermaid">
     gantt
       title Inclusive end dates (Manual date should end on 4th)
@@ -36,6 +38,27 @@
        2 Days: 1, 2019-01-01,2d
        Manual Date: 2, 2019-01-01,2019-01-03
   </div>
+  <div class="mermaid">
+    gantt
+      title Hide today marker (vertical line should not be visible)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      todayMarker off
+      section Section1
+       Today: 1, -1h
+  </div>
+  <div class="mermaid">
+    gantt
+      title Style today marker (vertical line should be 5px wide and half-transparent blue)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+      section Section1
+       Today: 1, -1h
+  </div>
+
+  <hr/>
+
   <div class="mermaid">
       graph LR
       sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index de86c916d..702dc78b6 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -6,6 +6,7 @@ import { getConfig } from '../../config';
 const config = getConfig();
 let dateFormat = '';
 let axisFormat = '';
+let todayMarker = '';
 let excludes = [];
 let title = '';
 let sections = [];
@@ -27,6 +28,7 @@ export const clear = function() {
   rawTasks = [];
   dateFormat = '';
   axisFormat = '';
+  todayMarker = '';
   excludes = [];
   inclusiveEndDates = false;
 };
@@ -39,6 +41,14 @@ export const getAxisFormat = function() {
   return axisFormat;
 };
 
+export const setTodayMarker = function(txt) {
+  todayMarker = txt;
+};
+
+export const getTodayMarker = function() {
+  return todayMarker;
+};
+
 export const setDateFormat = function(txt) {
   dateFormat = txt;
 };
@@ -572,6 +582,8 @@ export default {
   endDatesAreInclusive,
   setAxisFormat,
   getAxisFormat,
+  setTodayMarker,
+  getTodayMarker,
   setTitle,
   getTitle,
   addSection,
diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js
index 547122685..67e150c15 100644
--- a/src/diagrams/gantt/ganttDb.spec.js
+++ b/src/diagrams/gantt/ganttDb.spec.js
@@ -21,6 +21,7 @@ describe('when using the ganttDb', function() {
     beforeEach(function() {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
+      ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
       ganttDb.addTask('test1', 'id1,2019-02-01,1d');
@@ -34,6 +35,7 @@ describe('when using the ganttDb', function() {
       ${'getTitle'}             | ${''}
       ${'getDateFormat'}        | ${''}
       ${'getAxisFormat'}        | ${''}
+      ${'getTodayMarker'}       | ${''}
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
@@ -216,4 +218,13 @@ describe('when using the ganttDb', function() {
       expect(tasks[1].task).toEqual('test2');
     });
   });
+
+  it.each`
+    type       | expected
+    ${'hide'}  | ${'off'}
+    ${'style'} | ${'stoke:stroke-width:5px,stroke:#00f,opacity:0.5'}
+  `('should ${type} today marker', ({ expected }) => {
+    ganttDb.setTodayMarker(expected);
+    expect(ganttDb.getTodayMarker()).toEqual(expected);
+  });
 });
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 050b1cc7b..825b7dce8 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -396,17 +396,25 @@ export const draw = function(text, id) {
   }
 
   function drawToday(theSidePad, theTopPad, w, h) {
+    const todayMarker = ganttDb.getTodayMarker();
+    if (todayMarker === 'off') {
+      return;
+    }
+
     const todayG = svg.append('g').attr('class', 'today');
-
     const today = new Date();
+    const todayLine = todayG.append('line');
 
-    todayG
-      .append('line')
+    todayLine
       .attr('x1', timeScale(today) + theSidePad)
       .attr('x2', timeScale(today) + theSidePad)
       .attr('y1', conf.titleTopMargin)
       .attr('y2', h - conf.titleTopMargin)
       .attr('class', 'today');
+
+    if (todayMarker !== '') {
+      todayLine.attr('style', todayMarker.replace(/,/g, ';'));
+    }
   }
 
   // from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison
index ea76b59a1..4a0a0e889 100644
--- a/src/diagrams/gantt/parser/gantt.jison
+++ b/src/diagrams/gantt/parser/gantt.jison
@@ -55,13 +55,14 @@ that id.
 
 "gantt"                 return 'gantt';
 "dateFormat"\s[^#\n;]+  return 'dateFormat';
-"inclusiveEndDates"			return 'inclusiveEndDates';
+"inclusiveEndDates"     return 'inclusiveEndDates';
 "axisFormat"\s[^#\n;]+  return 'axisFormat';
 "excludes"\s[^#\n;]+    return 'excludes';
+"todayMarker"\s[^\n;]+  return 'todayMarker';
 \d\d\d\d"-"\d\d"-"\d\d  return 'date';
 "title"\s[^#\n;]+       return 'title';
 "section"\s[^#:\n;]+    return 'section';
-[^#:\n;]+             return 'taskTxt';
+[^#:\n;]+               return 'taskTxt';
 ":"[^#\n;]+             return 'taskData';
 ":"                     return ':';
 <<EOF>>                 return 'EOF';
@@ -93,9 +94,10 @@ line
 
 statement
   : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
-	| inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
+  | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
   | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
   | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
+  | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
   | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
   | clickStatement
diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js
index 463dd26e6..4e7366ab4 100644
--- a/src/diagrams/gantt/parser/gantt.spec.js
+++ b/src/diagrams/gantt/parser/gantt.spec.js
@@ -37,6 +37,14 @@ describe('when parsing a gantt diagram it', function() {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
+  it('should handle a todayMarker definition', function() {
+    spyOn(ganttDb, 'setTodayMarker');
+    const str =
+      'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\nexcludes weekdays 2019-02-01\ntodayMarker off';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(ganttDb.setTodayMarker).toHaveBeenCalledWith('off');
+  });
   it('should handle a section definition', function() {
     const str =
       'gantt\n' +

From 7f67435cb944a03204e8914118081cd70b0d5ad1 Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Fri, 10 Apr 2020 00:14:41 +0200
Subject: [PATCH 08/12] #1343 Add flowchart subroutine node shape

---
 .../integration/rendering/flowchart.spec.js   | 19 +++++++++++++++
 dist/index.html                               | 14 +++++++++++
 docs/flowchart.md                             | 11 +++++++++
 src/diagrams/flowchart/flowChartShapes.js     | 24 +++++++++++++++++++
 .../flowchart/flowChartShapes.spec.js         |  3 ++-
 src/diagrams/flowchart/flowRenderer-v2.js     |  3 +++
 src/diagrams/flowchart/flowRenderer.js        |  3 +++
 src/diagrams/flowchart/flowRenderer.spec.js   |  1 +
 src/diagrams/flowchart/parser/flow.jison      |  6 ++++-
 9 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 1a7c41163..4acccfc37 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -652,4 +652,23 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('32: Render Subroutine shape', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[[subroutine 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 } }
+    );
+  });
 });
diff --git a/dist/index.html b/dist/index.html
index 46af0d709..7a3d213a6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -315,6 +315,20 @@ graph TB
     class A someclass;
     class C someclass;
   </div>
+  <div class="mermaid">
+    graph LR
+    A[[subroutine 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)]
diff --git a/docs/flowchart.md b/docs/flowchart.md
index 0d964bdcc..1e3d00510 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -89,6 +89,17 @@ graph LR
     id1([This is the text in the box])
 ```
 
+### A node in a subroutine shape
+
+```
+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
 
 ```
diff --git a/src/diagrams/flowchart/flowChartShapes.js b/src/diagrams/flowchart/flowChartShapes.js
index 8bd4f0b7a..66a7b79d2 100644
--- a/src/diagrams/flowchart/flowChartShapes.js
+++ b/src/diagrams/flowchart/flowChartShapes.js
@@ -154,6 +154,28 @@ function stadium(parent, bbox, node) {
   return shapeSvg;
 }
 
+function subroutine(parent, bbox, node) {
+  const w = bbox.width;
+  const h = bbox.height;
+  const points = [
+    { x: 0, y: 0 },
+    { x: w, y: 0 },
+    { x: w, y: -h },
+    { x: 0, y: -h },
+    { x: 0, y: 0 },
+    { x: -8, y: 0 },
+    { x: w + 8, y: 0 },
+    { x: w + 8, y: -h },
+    { x: -8, y: -h },
+    { x: -8, y: 0 }
+  ];
+  const shapeSvg = insertPolygonShape(parent, w, h, points);
+  node.intersect = function(point) {
+    return dagreD3.intersect.polygon(node, points, point);
+  };
+  return shapeSvg;
+}
+
 function cylinder(parent, bbox, node) {
   const w = bbox.width;
   const rx = w / 2;
@@ -221,6 +243,7 @@ export function addToRender(render) {
   render.shapes().question = question;
   render.shapes().hexagon = hexagon;
   render.shapes().stadium = stadium;
+  render.shapes().subroutine = subroutine;
   render.shapes().cylinder = cylinder;
 
   // Add custom shape for box with inverted arrow on left side
@@ -246,6 +269,7 @@ export function addToRenderV2(addShape) {
   addShape({ question });
   addShape({ hexagon });
   addShape({ stadium });
+  addShape({ subroutine });
   addShape({ cylinder });
 
   // Add custom shape for box with inverted arrow on left side
diff --git a/src/diagrams/flowchart/flowChartShapes.spec.js b/src/diagrams/flowchart/flowChartShapes.spec.js
index 61e876d4b..d6446f66e 100644
--- a/src/diagrams/flowchart/flowChartShapes.spec.js
+++ b/src/diagrams/flowchart/flowChartShapes.spec.js
@@ -65,7 +65,8 @@ describe('flowchart shapes', function() {
     ['lean_right', 4, useWidth, useHeight],
     ['lean_left', 4, useWidth, useHeight],
     ['trapezoid', 4, useWidth, useHeight],
-    ['inv_trapezoid', 4, useWidth, useHeight]
+    ['inv_trapezoid', 4, useWidth, useHeight],
+    ['subroutine', 10, useWidth, useHeight],
   ].forEach(function([shapeType, expectedPointCount, getW, getH]) {
     it(`should add a ${shapeType} shape that renders a properly translated polygon element`, function() {
       const mockRender = MockRender();
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index e8915fc08..c635c0606 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -119,6 +119,9 @@ export const addVertices = function(vert, g, svgId) {
       case 'stadium':
         _shape = 'stadium';
         break;
+      case 'subroutine':
+        _shape = 'subroutine';
+        break;
       case 'cylinder':
         _shape = 'cylinder';
         break;
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index bfe407b16..6f86d638d 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -119,6 +119,9 @@ export const addVertices = function(vert, g, svgId) {
       case 'stadium':
         _shape = 'stadium';
         break;
+      case 'subroutine':
+        _shape = 'subroutine';
+        break;
       case 'cylinder':
         _shape = 'cylinder';
         break;
diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js
index 95419a5df..41ce5fe55 100644
--- a/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/src/diagrams/flowchart/flowRenderer.spec.js
@@ -23,6 +23,7 @@ describe('the flowchart renderer', function() {
       ['circle', 'circle'],
       ['ellipse', 'ellipse'],
       ['stadium', 'stadium'],
+      ['subroutine', 'subroutine'],
       ['cylinder', 'cylinder'],
       ['group', 'rect']
     ].forEach(function([type, expectedShape, expectedRadios = 0]) {
diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
index 58e4664a6..6cd7c6af8 100644
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -87,6 +87,8 @@
 "-)"                  return '-)';
 "(["                  return 'STADIUMSTART';
 "])"                  return 'STADIUMEND';
+"[["                  return 'SUBROUTINESTART';
+"]]"                  return 'SUBROUTINEEND';
 "[("                  return 'CYLINDERSTART';
 ")]"                  return 'CYLINDEREND';
 \-                    return 'MINUS';
@@ -316,6 +318,8 @@ vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'ellipse');}
     | idString STADIUMSTART text STADIUMEND
         {$$ = $1;yy.addVertex($1,$3,'stadium');}
+    | idString SUBROUTINESTART text SUBROUTINEEND
+        {$$ = $1;yy.addVertex($1,$3,'subroutine');}
     | idString CYLINDERSTART text CYLINDEREND
         {$$ = $1;yy.addVertex($1,$3,'cylinder');}
     | idString PS text PE
@@ -474,5 +478,5 @@ alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA |
 
 idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
 
-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;
+graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | 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;
 %%

From 91b64798bbdf1beec9c6a3a38b74d3c7292562fd Mon Sep 17 00:00:00 2001
From: Adrian Hall <ade@adrian-hall.name>
Date: Fri, 10 Apr 2020 11:40:39 +0100
Subject: [PATCH 10/12] Escape the pipes in the syntax table

---
 docs/entityRelationshipDiagram.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md
index da5bf4b0d..f87b0c9b5 100644
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@@ -61,10 +61,10 @@ Cardinality is a property that describes how many elements of another entity can
 
 | Value (left) | Value (right) | Meaning                                                |
 |:------------:|:-------------:|--------------------------------------------------------|
-|     `|o`     |       `o|`    | Zero or one                                            |
-|     `||`     |       `||`    | Exactly one                                            |
+|     `\|o`    |       `o\|`   | Zero or one                                            |
+|     `\|\|`   |       `\|\|`  | Exactly one                                            |
 |     `}o`     |       `o{`    | Zero or more (no upper limit)                          |
-|     `}|`     |       `|{`    | One or more (no upper limit)                           |
+|     `}\|`    |       `\|{    | One or more (no upper limit)                           |
 
 ### Identification
 

From 3db27e601727e76f0dd68620978489a6545a9e40 Mon Sep 17 00:00:00 2001
From: Adrian Hall <ade@adrian-hall.name>
Date: Fri, 10 Apr 2020 11:47:29 +0100
Subject: [PATCH 11/12] Tiny tweaks to docs for ER diagram

---
 docs/entityRelationshipDiagram.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md
index f87b0c9b5..8a3924d3b 100644
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@@ -2,7 +2,7 @@
 
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
 
-Note that practitioners of ER modelling almost always refer to entity types simply as entities.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
+Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
 
 Mermaid can render ER diagrams
 ```
@@ -24,7 +24,7 @@ Relationships between entities are represented by lines with end markers represe
 
 ## Status
 
-ER diagrams are a new feature in Mermaid and are **experimental**.  There are likely to be a few bugs and constraints, and enhancements will be made in due course.
+ER diagrams are a new feature in Mermaid and are **experimental**.  There are likely to be a few bugs and constraints, and enhancements will be made in due course.  Currently you can only define entities and relationships, but not attributes.
 
 ## Syntax
 
@@ -64,7 +64,7 @@ Cardinality is a property that describes how many elements of another entity can
 |     `\|o`    |       `o\|`   | Zero or one                                            |
 |     `\|\|`   |       `\|\|`  | Exactly one                                            |
 |     `}o`     |       `o{`    | Zero or more (no upper limit)                          |
-|     `}\|`    |       `\|{    | One or more (no upper limit)                           |
+|     `}\|`    |       `\|{`   | One or more (no upper limit)                           |
 
 ### Identification
 

From f0119085e427aaa347149b75e20c6f8f9dcbf354 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sat, 11 Apr 2020 18:02:05 +0200
Subject: [PATCH 12/12] Updating mermaid to version 8.5.0

---
 docs/index.html    |  2 +-
 docs/mermaidAPI.md | 38 ++++++++++++++++++++++++++++++++++++++
 package.json       |  4 ++--
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 376fd5d66..c3bdbb17b 100644
--- a/docs/index.html
+++ b/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.7/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/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),
diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md
index ff25fd2f1..6dd749e27 100644
--- a/docs/mermaidAPI.md
+++ b/docs/mermaidAPI.md
@@ -263,6 +263,43 @@ The number of alternating section styles.
 Datetime format of the axis. This might need adjustment to match your locale and preferences
 **Default value '%Y-%m-%d'**.
 
+## er
+
+The object containing configurations specific for entity relationship diagrams
+
+### diagramPadding
+
+The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+
+### layoutDirection
+
+Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',
+where T = top, B = bottom, L = left, and R = right.
+
+### minEntityWidth
+
+The mimimum width of an entity box, expressed in pixels
+
+### minEntityHeight
+
+The minimum height of an entity box, expressed in pixels
+
+### entityPadding
+
+The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels
+
+### stroke
+
+Stroke color of box edges and lines
+
+### fill
+
+Fill color of entity boxes
+
+### fontSize
+
+Font size
+
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -318,6 +355,7 @@ mermaidAPI.initialize({
       boxTextMargin:5,
       noteMargin:10,
       messageMargin:35,
+      messageAlign:'center',
       mirrorActors:true,
       bottomMarginAdj:1,
       useMaxWidth:true,
diff --git a/package.json b/package.json
index 30d14ee66..c1e10d887 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.7",
+  "version": "8.5.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -13,7 +13,7 @@
     "git graph"
   ],
   "scripts": {
-    "build": "webpack --progress --colors",
+    "build": "webpack --progress --colors -p",
     "postbuild": "documentation build src/mermaidAPI.js --shallow -f md --markdown-toc false -o docs/mermaidAPI.md",
     "build:watch": "yarn build --watch",
     "minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",