feat: adds title and description to flowchart

mermaid-js · Apr 7, 2022 · 89385bb · 89385bb
1 parent 904826b
commit 89385bb
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -40,13 +40,17 @@ __The following are some examples of the diagrams, charts and graphs that can be
 
 ```
 flowchart LR
+title Example flow chart
+accDescripton Flow chart showing examples of node usage
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 ```mermaid
 flowchart LR
+title Example flow chart
+accDescripton Flow chart showing examples of node usage
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]

diff --git a/demos/flowchart.html b/demos/flowchart.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Mermaid Quick Test Page</title>
+  <title>Mermaid Quick Flowchart Test Page</title>
   <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
   <style>
       div.mermaid {
@@ -220,6 +220,8 @@ <h2>Sample 2</h2>
   <h3>graph</h3>
   <div class="mermaid">
     graph TD
+    title What to buy
+    accDescription Options of what to buy with Christmas money
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
     C -->|One| D[Laptop]
@@ -230,8 +232,8 @@ <h3>graph</h3>
   <h3>flowchart</h3>
   <div class="mermaid">
     flowchart TD
-    title Christmas
-    accDescription Get money
+    title What to buy
+    accDescription Options of what to buy with Christmas money
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
     C -->|One| D[Laptop]

diff --git a/demos/index.html b/demos/index.html
@@ -872,4 +872,4 @@ <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
   </script>
 </body>
 
-</html>
+</html>
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -17,6 +17,8 @@ let tooltips = {};
 let subCount = 0;
 let firstGraphFlag = true;
 let direction;
+let title = 'Flow chart';
+let description = '';
 
 let version; // As in graph
 
@@ -27,6 +29,22 @@ export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
 
+const setTitle = function (txt) {
+  title = txt;
+};
+
+const getTitle = function () {
+  return title;
+};
+
+const setAccDescription = function (txt) {
+  description = txt;
+};
+
+const getAccDescription = function () {
+  return description;
+};
+
 /**
  * Function to lookup domId from id in the graph definition.
  *
@@ -736,6 +754,10 @@ const makeUniq = (sg, allSubgraphs) => {
 export default {
   parseDirective,
   defaultConfig: () => configApi.defaultConfig.flowchart,
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
   addVertex,
   lookUpDomId,
   addLink,

diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -10,6 +10,7 @@ import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -181,7 +182,7 @@ export const addVertices = function (vert, g, svgId, root, doc) {
 };
 
 /**
- * Add edges to graph based on parsed graph defninition
+ * Add edges to graph based on parsed graph definition
  *
  * @param {object} edges The edges to add to the graph
  * @param {object} g The graph object
@@ -380,7 +381,7 @@ export const draw = function (text, id) {
   const rankSpacing = conf.rankSpacing || 50;
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -416,7 +417,7 @@ export const draw = function (text, id) {
     flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
   }
 
-  // Fetch the verices/nodes and edges/links from the parsed graph definition
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const vert = flowDb.getVertices();
 
   const edges = flowDb.getEdges();
@@ -444,6 +445,9 @@ export const draw = function (text, id) {
   const svg = root.select(`[id="${id}"]`);
   svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
 
+  // Adds title and description to the flow chart
+  addSVGAccessibilityFields(parser.yy, svg, id);
+
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -11,6 +11,7 @@ import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import flowChartShapes from './flowChartShapes';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -158,7 +159,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
 };
 
 /**
- * Add edges to graph based on parsed graph defninition
+ * Add edges to graph based on parsed graph definition
  *
  * @param {object} edges The edges to add to the graph
  * @param {object} g The graph object
@@ -350,7 +351,7 @@ export const draw = function (text, id) {
     flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   }
 
-  // Fetch the verices/nodes and edges/links from the parsed graph definition
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const vert = flowDb.getVertices();
   log.warn('Get vertices', vert);
 
@@ -426,6 +427,9 @@ export const draw = function (text, id) {
 
   log.warn(g);
 
+  // Adds title and description to the flow chart
+  addSVGAccessibilityFields(parser.yy, svg, id);
+
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g);

diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
@@ -7,6 +7,8 @@
 /* lexical grammar */
 %lex
 %x string
+%x title
+%x accDescription
 %x dir
 %x vertex
 %x click
@@ -26,6 +28,10 @@
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%\%(?!\{)[^\n]*                                                /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
+title                                                           { this.begin("title");return 'title'; }
+<title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
+accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
+<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -337,6 +343,8 @@ statement
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
     | direction
+    | title title_value  { $$=$2.trim();yy.setTitle($$); }
+    | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
     ;
 
 separator: NEWLINE | SEMI | EOF ;

diff --git a/src/diagrams/flowchart/parser/flow.spec.js b/src/diagrams/flowchart/parser/flow.spec.js
@@ -6,13 +6,13 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('when parsing ', function () {
+describe('parsing a flow chart', function () {
   beforeEach(function () {
     flow.parser.yy = flowDb;
     flow.parser.yy.clear();
   });
 
-  it('it should handle a trailing whitespaces after statememnts', function () {
+  it('should handle a trailing whitespaces after statememnts', function () {
     const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
 
     const vert = flow.parser.yy.getVertices();
@@ -80,47 +80,47 @@ describe('when parsing ', function () {
       flow.parser.yy.clear();
     };
 
-    it("it should be able to parse a '.'", function () {
+    it("should be able to parse a '.'", function () {
       charTest('.');
       charTest('Start 103a.a1');
     });
 
-    // it('it should be able to parse text containing \'_\'', function () {
+    // it('should be able to parse text containing \'_\'', function () {
     //   charTest('_')
     // })
 
-    it("it should be able to parse a ':'", function () {
+    it("should be able to parse a ':'", function () {
       charTest(':');
     });
 
-    it("it should be able to parse a ','", function () {
+    it("should be able to parse a ','", function () {
       charTest(',');
     });
 
-    it("it should be able to parse text containing '-'", function () {
+    it("should be able to parse text containing '-'", function () {
       charTest('a-b');
     });
 
-    it("it should be able to parse a '+'", function () {
+    it("should be able to parse a '+'", function () {
       charTest('+');
     });
 
-    it("it should be able to parse a '*'", function () {
+    it("should be able to parse a '*'", function () {
       charTest('*');
     });
 
-    it("it should be able to parse a '<'", function () {
+    it("should be able to parse a '<'", function () {
       charTest('<', '&lt;');
     });
 
-    // it("it should be able to parse a '>'", function() {
+    // it("should be able to parse a '>'", function() {
     //   charTest('>', '&gt;');
     // });
 
-    // it("it should be able to parse a '='", function() {
+    // it("should be able to parse a '='", function() {
     //   charTest('=', '&equals;');
     // });
-    it("it should be able to parse a '&'", function () {
+    it("should be able to parse a '&'", function () {
       charTest('&');
     });
   });
@@ -146,6 +146,7 @@ describe('when parsing ', function () {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['A'].id).toBe('A');
   });
+
   it('should be possible to use numbers as labels', function () {
     let statement = '';
 
@@ -155,4 +156,19 @@ describe('when parsing ', function () {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['1'].id).toBe('1');
   });
+
+  it('should add title and description to flow chart', function () {
+    const flowChart = `graph LR
+      title Big decisions
+      accDescription Flow chart of the decision making process
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+      C -->|Two| E[Result 2]
+      `;
+
+    flow.parser.parse(flowChart);
+    expect(flow.parser.yy.getTitle()).toBe('Big decisions');
+    expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
+  });
 });