mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #2913 from lindseywild/feat/flowchart-accessibility
feat: adds title and description to flowchart
This commit is contained in:
commit
4f833db2d0
@ -40,6 +40,8 @@ __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]
|
||||
@ -47,6 +49,8 @@ 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]
|
||||
|
@ -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 @@
|
||||
<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>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]
|
||||
|
@ -872,4 +872,4 @@
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
@ -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.
|
||||
*
|
||||
@ -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] === '"') {
|
||||
@ -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] === '"') {
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -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 };
|
||||
|
||||
@ -736,6 +756,10 @@ const makeUniq = (sg, allSubgraphs) => {
|
||||
export default {
|
||||
parseDirective,
|
||||
defaultConfig: () => configApi.defaultConfig.flowchart,
|
||||
setTitle,
|
||||
getTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
addVertex,
|
||||
lookUpDomId,
|
||||
addLink,
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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 ;
|
||||
|
@ -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('<', '<');
|
||||
});
|
||||
|
||||
// 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('&');
|
||||
});
|
||||
});
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user