marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 23:39:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated flowcharts with the new syntax

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-04-30 11:36:00 +02:00
parent bada661bd0
commit 85e157f0d3
5 changed files with 1137 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1051
flow.js Normal file
View File

File diff suppressed because one or more lines are too long

34
src/commonDb.js Normal file
View File

@@ -0,0 +1,34 @@
import { sanitizeText as _sanitizeText } from './diagrams/common/common';
import { getConfig } from './config';
let title = '';
let description = '';
const sanitizeText = (txt) => _sanitizeText(txt, getConfig());
export const clear = function () {
title = '';
description = '';
};
export const setTitle = function (txt) {
title = sanitizeText(txt).replace(/^\s+/g, '');
};
export const getTitle = function () {
return title;
};
export const setAccDescription = function (txt) {
description = sanitizeText(txt).replace(/\n\s+/g, '\n');
};
export const getAccDescription = function () {
return description;
};
export default {
setTitle,
getTitle,
getAccDescription,
setAccDescription,
clear,
};

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

@@ -4,6 +4,7 @@ import * as configApi from '../../config';
import common from '../common/common';
import mermaidAPI from '../../mermaidAPI';
import { log } from '../../logger';
import { setTitle, getTitle, getAccDescription, setAccDescription } from '../../commonDb';
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
let vertexCounter = 0;
@@ -31,21 +32,17 @@ 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 getTitle = function () {
return title;
};
// const setAccDescription = function (txt) {
// description = sanitizeText(txt).replace(/\n\s+/g, '\n');
// };
const setAccDescription = function (txt) {
description = sanitizeText(txt);
};
const getAccDescription = function () {
return description;
};
// const getAccDescription = function () {
// return description;
// };
/**
* Function to lookup domId from id in the graph definition.
@@ -447,6 +444,8 @@ export const clear = function (ver) {
tooltips = [];
firstGraphFlag = true;
version = ver || 'gen-1';
title = '';
description = '';
};
export const setGen = (ver) => {
version = ver || 'gen-1';

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

@@ -7,8 +7,9 @@
/* lexical grammar */
%lex
%x string
%x title
%x accDescription
%x acc_title
%x acc_descr
%x acc_descr_multiline
%x dir
%x vertex
%x click
@@ -28,10 +29,14 @@
<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"; }
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
<acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
["] this.begin("string");
<string>["] this.popState();
<string>[^"]* return "STR";
@@ -343,27 +348,13 @@ 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($$); }
| acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
;
separator: NEWLINE | SEMI | EOF ;
// verticeStatement:
// vertex link vertex
// { yy.addLink($1,$3,$2);$$ = [$1,$3];}
// | vertex link vertex STYLE_SEPARATOR idString
// { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
// | vertex STYLE_SEPARATOR idString link vertex
// { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
// | vertex STYLE_SEPARATOR idString link vertex STYLE_SEPARATOR idString
// { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
// |vertex
// {$$ = [$1];}
// |vertex STYLE_SEPARATOR idString
// {$$ = [$1];yy.setClass($1,$3)}
// ;
verticeStatement: verticeStatement link node
{ /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }

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

@@ -157,10 +157,10 @@ describe('parsing a flow chart', function () {
expect(vertices['1'].id).toBe('1');
});
it('should add title and description to flow chart', function () {
it('should add accTitle and accDescr to flow chart', function () {
const flowChart = `graph LR
title Big decisions
accDescription Flow chart of the decision making process
accTitle: Big decisions
accDescr: Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
@@ -171,4 +171,27 @@ describe('parsing a flow chart', function () {
expect(flow.parser.yy.getTitle()).toBe('Big decisions');
expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
});
it('should add accTitle and a multi line accDescr to flow chart', function () {
const flowChart = `graph LR
accTitle: Big decisions
accDescr {
Flow chart of the decision making process
with a second line
}
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');
console.log(flow.parser.yy.getAccDescription());
expect(flow.parser.yy.getAccDescription()).toBe(
`Flow chart of the decision making process
with a second line`
);
});
});