marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 16:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: adds title and description to flowchart

Browse Source
This commit is contained in:
Lindsey Wild
2022-04-06 16:06:57 -04:00
parent f2e77917d7
commit 7a5149e39e
8 changed files with 82 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -40,6 +40,8 @@ __The following are some examples of the diagrams, charts and graphs that can be
``` ```
flowchart LR flowchart LR
title Example flow chart
accDescripton Flow chart showing examples of node usage
A[Hard] -->|Text| B(Round) A[Hard] -->|Text| B(Round)
B --> C{Decision} B --> C{Decision}
C -->|One| D[Result 1] C -->|One| D[Result 1]
@@ -47,6 +49,8 @@ C -->|Two| E[Result 2]
``` ```
```mermaid ```mermaid
flowchart LR flowchart LR
title Example flow chart
accDescripton Flow chart showing examples of node usage
A[Hard] -->|Text| B(Round) A[Hard] -->|Text| B(Round)
B --> C{Decision} B --> C{Decision}
C -->|One| D[Result 1] C -->|One| D[Result 1]

8
demos/flowchart.html
View File

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

22
src/diagrams/flowchart/flowDb.js
View File

@@ -17,6 +17,8 @@ let tooltips = {};
let subCount = 0; let subCount = 0;
let firstGraphFlag = true; let firstGraphFlag = true;
let direction; let direction;
let title = 'Flow chart';
let description = '';
let version; // As in graph let version; // As in graph
@@ -27,6 +29,22 @@ export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, 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. * Function to lookup domId from id in the graph definition.
* *
@@ -736,6 +754,10 @@ const makeUniq = (sg, allSubgraphs) => {
export default { export default {
parseDirective, parseDirective,
defaultConfig: () => configApi.defaultConfig.flowchart, defaultConfig: () => configApi.defaultConfig.flowchart,
setTitle,
getTitle,
getAccDescription,
setAccDescription,
addVertex, addVertex,
lookUpDomId, lookUpDomId,
addLink, addLink,

10
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -10,6 +10,7 @@ import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { log } from '../../logger'; import { log } from '../../logger';
import common, { evaluate } from '../common/common'; import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils'; import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {}; const conf = {};
export const setConf = function (cnf) { 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} edges The edges to add to the graph
* @param {object} g The graph object * @param {object} g The graph object
@@ -380,7 +381,7 @@ export const draw = function (text, id) {
const rankSpacing = conf.rankSpacing || 50; const rankSpacing = conf.rankSpacing || 50;
const securityLevel = getConfig().securityLevel; 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; let sandboxElement;
if (securityLevel === 'sandbox') { if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id); 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); 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 vert = flowDb.getVertices();
const edges = flowDb.getEdges(); const edges = flowDb.getEdges();
@@ -444,6 +445,9 @@ export const draw = function (text, id) {
const svg = root.select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); 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. // Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g'); const element = root.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id); render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);

8
src/diagrams/flowchart/flowRenderer.js
View File

@@ -11,6 +11,7 @@ import { log } from '../../logger';
import common, { evaluate } from '../common/common'; import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils'; import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
import flowChartShapes from './flowChartShapes'; import flowChartShapes from './flowChartShapes';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {}; const conf = {};
export const setConf = function (cnf) { 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} edges The edges to add to the graph
* @param {object} g The graph object * @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); 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(); const vert = flowDb.getVertices();
log.warn('Get vertices', vert); log.warn('Get vertices', vert);
@@ -426,6 +427,9 @@ export const draw = function (text, id) {
log.warn(g); 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. // Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g'); const element = root.select('#' + id + ' g');
render(element, g); render(element, g);

8
src/diagrams/flowchart/parser/flow.jison
View File

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

42
src/diagrams/flowchart/parser/flow.spec.js
View File

@@ -6,13 +6,13 @@ setConfig({
securityLevel: 'strict', securityLevel: 'strict',
}); });
describe('when parsing ', function () { describe('parsing a flow chart', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = flowDb;
flow.parser.yy.clear(); 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 res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
const vert = flow.parser.yy.getVertices(); const vert = flow.parser.yy.getVertices();
@@ -80,47 +80,47 @@ describe('when parsing ', function () {
flow.parser.yy.clear(); flow.parser.yy.clear();
}; };
it("it should be able to parse a '.'", function () { it("should be able to parse a '.'", function () {
charTest('.'); charTest('.');
charTest('Start 103a.a1'); charTest('Start 103a.a1');
}); });
// it('it should be able to parse text containing \'_\'', function () { // it('should be able to parse text containing \'_\'', function () {
// charTest('_') // charTest('_')
// }) // })
it("it should be able to parse a ':'", function () { it("should be able to parse a ':'", function () {
charTest(':'); charTest(':');
}); });
it("it should be able to parse a ','", function () { it("should be able to parse a ','", function () {
charTest(','); charTest(',');
}); });
it("it should be able to parse text containing '-'", function () { it("should be able to parse text containing '-'", function () {
charTest('a-b'); charTest('a-b');
}); });
it("it should be able to parse a '+'", function () { it("should be able to parse a '+'", function () {
charTest('+'); charTest('+');
}); });
it("it should be able to parse a '*'", function () { it("should be able to parse a '*'", function () {
charTest('*'); charTest('*');
}); });
it("it should be able to parse a '<'", function () { it("should be able to parse a '<'", function () {
charTest('<', '&lt;'); charTest('<', '&lt;');
}); });
// it("it should be able to parse a '>'", function() { // it("should be able to parse a '>'", function() {
// charTest('>', '&gt;'); // charTest('>', '&gt;');
// }); // });
// it("it should be able to parse a '='", function() { // it("should be able to parse a '='", function() {
// charTest('=', '&equals;'); // charTest('=', '&equals;');
// }); // });
it("it should be able to parse a '&'", function () { it("should be able to parse a '&'", function () {
charTest('&'); charTest('&');
}); });
}); });
@@ -146,6 +146,7 @@ describe('when parsing ', function () {
const classes = flow.parser.yy.getClasses(); const classes = flow.parser.yy.getClasses();
expect(vertices['A'].id).toBe('A'); expect(vertices['A'].id).toBe('A');
}); });
it('should be possible to use numbers as labels', function () { it('should be possible to use numbers as labels', function () {
let statement = ''; let statement = '';
@@ -155,4 +156,19 @@ describe('when parsing ', function () {
const classes = flow.parser.yy.getClasses(); const classes = flow.parser.yy.getClasses();
expect(vertices['1'].id).toBe('1'); 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');
});
}); });