GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#6186 Fixes the flowchaart node metadata syntax bugs

Browse Source
This commit is contained in:
Ashish Jain 2025-01-14 14:07:25 +01:00
parent bc2cc61240
commit 7809b5a93f
20 changed files with 91 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/great-ghosts-rule.md Normal file
View File

@ -0,0 +1,8 @@
---
'mermaid': minor
---
Flowchart new syntax for node metadata bugs
- Incorrect label mapping for nodes when using `&`
- Syntax error when `}` with trailing spaces before new line

28
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -1076,4 +1076,32 @@ end
);
});
});
describe('New @ sytax for node metadata edge cases', () => {
it('should be possible to use @ syntax to add labels on multi nodes', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"]
n4@{ label: "labe for n4"}
n5@{ label: "labe for n5"}
`,
{}
);
});
});
});

3
packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
View File

@ -3,7 +3,8 @@ import { setConfig } from '../../diagram-api/diagramAPI.js';
import flowDb from './flowDb.js';
import renderer from './flowRenderer-v3-unified.js';
// @ts-ignore: JISON doesn't support types
import flowParser from './parser/flow.jison';
//import flowParser from './parser/flow.jison';
import flowParser from './parser/flowParser.ts';
import flowStyles from './styles.js';
export const diagram = {

2
packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
import { cleanupComments } from '../../../diagram-api/comments.js';

2
packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
import { vi } from 'vitest';
const spyOn = vi.spyOn;

2
packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

26
packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({
@ -290,4 +290,28 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is a string with}');
});
it(' should be possible to use @ syntax to add labels on multi nodes', function () {
const res = flow.parser.parse(`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(3);
expect(data4Layout.nodes[0].label).toEqual('label for n2');
expect(data4Layout.nodes[1].label).toEqual('labe for n4');
expect(data4Layout.nodes[2].label).toEqual('labe for n5');
});
it.skip(' should be possible to use @ syntax to add labels with trail spaces', function () {
const res = flow.parser.parse(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"} `
);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(3);
expect(data4Layout.nodes[0].label).toEqual('label for n2');
expect(data4Layout.nodes[1].label).toEqual('labe for n4');
expect(data4Layout.nodes[2].label).toEqual('labe for n5');
});
});

2
packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

2
packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({

4
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@ -407,7 +407,7 @@ vertexStatement: vertexStatement link node shapeData
|node spaceList { /*console.warn('vertexStatement: node spaceList', $node);*/ $$ = {stmt: $node, nodes:$node }}
|node shapeData {
/*console.warn('vertexStatement: node shapeData', $node[0], $shapeData);*/
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData);
yy.addVertex($node[$node.length-1],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData);
$$ = {stmt: $node, nodes:$node, shapeData: $shapeData}
}
|node { /* console.warn('vertexStatement: single node', $node); */ $$ = {stmt: $node, nodes:$node }}
@ -416,7 +416,7 @@ vertexStatement: vertexStatement link node shapeData
node: styledVertex
{ /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
| node shapeData spaceList AMP spaceList styledVertex
{ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); /*console.warn('pip2', $node[0], $styledVertex, $$);*/ }
{ yy.addVertex($node[$node.length-1],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); /*console.warn('pip2', $node[0], $styledVertex, $$);*/ }
| node spaceList AMP spaceList styledVertex
{ $$ = $node.concat($styledVertex); /*console.warn('pip', $node[0], $styledVertex, $$);*/ }
;

2
packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { cleanupComments } from '../../../diagram-api/comments.js';
import { setConfig } from '../../../config.js';

12
packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts Normal file
View File

@ -0,0 +1,12 @@
// @ts-ignore: JISON doesn't support types
import flowJisonParser from './flow.jison';
const newParser = Object.assign({}, flowJisonParser);
newParser.parse = (src: string): unknown => {
// remove the trailing whitespace after closing curly braces when ending a line break
const newSrc = src.replace(/}\s*\n/g, '}\n');
return flowJisonParser.parse(newSrc);
};
export default newParser;

2
packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
View File

@ -1,5 +1,5 @@
import flowDb from '../flowDb.js';
import flow from './flow.jison';
import flow from './flowParser.ts';
import { setConfig } from '../../../config.js';
setConfig({