Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: adds title and description to flowchart #2913

Merged
merged 2 commits into from Apr 12, 2022
Merged

feat: adds title and description to flowchart #2913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a5149e
feat: adds title and description to flowchart
lindseywild Apr 6, 2022
e2ec7fd
feat: adds text sanitization, refactors function
lindseywild Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -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]
Expand Down
8 changes: 5 additions & 3 deletions demos/flowchart.html
View file
Open in desktop
Expand Up @@ -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 {
Expand Down Expand Up @@ -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]
Expand All @@ -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]
Expand Down
2 changes: 1 addition & 1 deletion demos/index.html
View file
Open in desktop
Expand Up @@ -872,4 +872,4 @@ <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
</script>
</body>

</html>
</html>
32 changes: 28 additions & 4 deletions src/diagrams/flowchart/flowDb.js
View file
Open in desktop
Expand Up @@ -17,16 +17,36 @@ let tooltips = {};
let subCount = 0;
let firstGraphFlag = true;
let direction;
let title = 'Flow chart';
let description = '';

let version; // As in graph

// Functions to be run after graph rendering
let funs = [];

const sanitizeText = (txt) => common.sanitizeText(txt, config);

export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
};

const setTitle = function (txt) {
title = sanitizeText(txt);
};

const getTitle = function () {
return title;
};

const setAccDescription = function (txt) {
description = sanitizeText(txt);
};

const getAccDescription = function () {
return description;
};

/**
* Function to lookup domId from id in the graph definition.
*
Expand Down Expand Up @@ -77,7 +97,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
vertexCounter++;
if (typeof text !== 'undefined') {
config = configApi.getConfig();
txt = common.sanitizeText(text.trim(), config);
txt = sanitizeText(text.trim());

// strip quotes if string starts and ends with a quote
if (txt[0] === '"' && txt[txt.length - 1] === '"') {
Expand Down Expand Up @@ -132,7 +152,7 @@ export const addSingleLink = function (_start, _end, type, linktext) {
linktext = type.text;

if (typeof linktext !== 'undefined') {
edge.text = common.sanitizeText(linktext.trim(), config);
edge.text = sanitizeText(linktext.trim());

// strip quotes if string starts and exnds with a quote
if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
Expand Down Expand Up @@ -255,7 +275,7 @@ export const setClass = function (ids, className) {
const setTooltip = function (ids, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = sanitizeText(tooltip);
}
});
};
Expand Down Expand Up @@ -488,7 +508,7 @@ export const addSubGraph = function (_id, list, _title) {
id = id || 'subGraph' + subCount;
// if (id[0].match(/\d/)) id = lookUpDomId(id);
title = title || '';
title = common.sanitizeText(title, config);
title = sanitizeText(title);
subCount = subCount + 1;
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [], dir };

Expand Down Expand Up @@ -736,6 +756,10 @@ const makeUniq = (sg, allSubgraphs) => {
export default {
parseDirective,
defaultConfig: () => configApi.defaultConfig.flowchart,
setTitle,
getTitle,
getAccDescription,
setAccDescription,
addVertex,
lookUpDomId,
addLink,
Expand Down
10 changes: 7 additions & 3 deletions src/diagrams/flowchart/flowRenderer-v2.js
View file
Open in desktop
Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down
8 changes: 6 additions & 2 deletions src/diagrams/flowchart/flowRenderer.js
View file
Open in desktop
Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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);
Expand Down
8 changes: 8 additions & 0 deletions src/diagrams/flowchart/parser/flow.jison
View file
Open in desktop
Expand Up @@ -7,6 +7,8 @@
/* lexical grammar */
%lex
%x string
%x title
%x accDescription
%x dir
%x vertex
%x click
Expand All @@ -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";
Expand Down Expand Up @@ -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 ;
Expand Down
42 changes: 29 additions & 13 deletions src/diagrams/flowchart/parser/flow.spec.js
View file
Open in desktop
Expand Up @@ -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();
Expand Down Expand Up @@ -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('&');
});
});
Expand All @@ -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 = '';

Expand All @@ -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');
});
});