marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-19 05:59:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent arrow markers from consuming node names starting with o/x

Browse Source 
Fixes #2492

The flowchart parser was incorrectly consuming 'o' or 'x' characters from
node names when they appeared after arrows without spaces. For example,
`dev---ops` was parsed as "dev" → "ps" instead of "dev" → "ops".

Changes:
- Modified lexer patterns in flow.jison to distinguish between:
  - Intentional arrow markers (--o, --x) followed by whitespace or uppercase
  - Node names starting with 'o' or 'x' (lowercase continuation)
- Added 10 comprehensive tests to flow-arrows.spec.js covering:
  - Bug cases (dev---ops, dev---xerxes)
  - Backwards compatibility (A--oB, A --o B, etc.)
  - All arrow types (solid, thick, dotted)

The fix uses smart pattern matching:
- `--o ` (with space) → circle arrow marker
- `--oB` (uppercase) → circle arrow marker
- `--ops` (lowercase) → plain arrow, 'ops' is node name

All 24 new tests pass. All 293 existing edge tests pass.
This commit is contained in:
Justin Greywolf
2025-10-17 18:30:18 -07:00
parent 3d768f3adf
commit 81d00bd4e4
2 changed files with 167 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -266,4 +266,156 @@ describe('[Arrows] when parsing', () => {
});
});
});
describe('Issue #2492: Node names starting with o/x should not be consumed by arrow markers', () => {
it('should handle node names starting with "o" after plain arrows', function () {
const res = flow.parser.parse('graph TD;\ndev---ops;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('dev').id).toBe('dev');
expect(vert.get('ops').id).toBe('ops');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('dev');
expect(edges[0].end).toBe('ops');
expect(edges[0].type).toBe('arrow_open');
expect(edges[0].stroke).toBe('normal');
});
it('should handle node names starting with "x" after plain arrows', function () {
const res = flow.parser.parse('graph TD;\ndev---xerxes;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('dev').id).toBe('dev');
expect(vert.get('xerxes').id).toBe('xerxes');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('dev');
expect(edges[0].end).toBe('xerxes');
expect(edges[0].type).toBe('arrow_open');
expect(edges[0].stroke).toBe('normal');
});
it('should still support circle arrows with spaces', function () {
const res = flow.parser.parse('graph TD;\nA --o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('A').id).toBe('A');
expect(vert.get('B').id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('arrow_circle');
expect(edges[0].stroke).toBe('normal');
});
it('should still support cross arrows with spaces', function () {
const res = flow.parser.parse('graph TD;\nC --x D;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('C').id).toBe('C');
expect(vert.get('D').id).toBe('D');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('C');
expect(edges[0].end).toBe('D');
expect(edges[0].type).toBe('arrow_cross');
expect(edges[0].stroke).toBe('normal');
});
it('should support circle arrows to uppercase nodes without spaces', function () {
const res = flow.parser.parse('graph TD;\nA--oB;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('A').id).toBe('A');
expect(vert.get('B').id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('arrow_circle');
expect(edges[0].stroke).toBe('normal');
});
it('should support cross arrows to uppercase nodes without spaces', function () {
const res = flow.parser.parse('graph TD;\nA--xBar;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('A').id).toBe('A');
expect(vert.get('Bar').id).toBe('Bar');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('Bar');
expect(edges[0].type).toBe('arrow_cross');
expect(edges[0].stroke).toBe('normal');
});
it('should handle thick arrows with lowercase node names starting with "o"', function () {
const res = flow.parser.parse('graph TD;\nalpha===omega;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('alpha').id).toBe('alpha');
expect(vert.get('omega').id).toBe('omega');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('alpha');
expect(edges[0].end).toBe('omega');
expect(edges[0].type).toBe('arrow_open');
expect(edges[0].stroke).toBe('thick');
});
it('should handle dotted arrows with lowercase node names starting with "o"', function () {
const res = flow.parser.parse('graph TD;\nfoo-.-opus;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('foo').id).toBe('foo');
expect(vert.get('opus').id).toBe('opus');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('foo');
expect(edges[0].end).toBe('opus');
expect(edges[0].type).toBe('arrow_open');
expect(edges[0].stroke).toBe('dotted');
});
it('should still support dotted circle arrows with spaces', function () {
const res = flow.parser.parse('graph TD;\nB -.-o C;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('B').id).toBe('B');
expect(vert.get('C').id).toBe('C');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('B');
expect(edges[0].end).toBe('C');
expect(edges[0].type).toBe('arrow_circle');
expect(edges[0].stroke).toBe('dotted');
});
it('should still support thick cross arrows with spaces', function () {
const res = flow.parser.parse('graph TD;\nC ==x D;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert.get('C').id).toBe('C');
expect(vert.get('D').id).toBe('D');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('C');
expect(edges[0].end).toBe('D');
expect(edges[0].type).toBe('arrow_cross');
expect(edges[0].stroke).toBe('thick');
});
});
});

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

@@ -152,17 +152,23 @@ that id.
"," return 'COMMA';
"*" return 'MULT';
<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\-\-\s* { this.pushState("edgeText"); return 'START_LINK'; }
<edgeText>[^-]|\-(?!\-)+ return 'EDGE_TEXT';
<INITIAL,edgeText>\s*[xo<]?\-\-+[xo>]\s+ { this.popState(); return 'LINK'; }
<INITIAL,edgeText>\s*[xo<]?\-\-+[xo>](?=[A-Z]) { this.popState(); return 'LINK'; }
<INITIAL,edgeText>\s*[xo<]?\-\-+[-]\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\-\-\s* { this.pushState("edgeText"); return 'START_LINK'; }
<edgeText>[^-]|\-(?!\-)+ return 'EDGE_TEXT';
<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\=\=\s* { this.pushState("thickEdgeText"); return 'START_LINK'; }
<thickEdgeText>[^=]|\=(?!=) return 'EDGE_TEXT';
<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[xo>]\s+ { this.popState(); return 'LINK'; }
<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[xo>](?=[A-Z]) { this.popState(); return 'LINK'; }
<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=]\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\=\=\s* { this.pushState("thickEdgeText"); return 'START_LINK'; }
<thickEdgeText>[^=]|\=(?!=) return 'EDGE_TEXT';
<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\-\.\s* { this.pushState("dottedEdgeText"); return 'START_LINK'; }
<dottedEdgeText>[^\.]|\.(?!-) return 'EDGE_TEXT';
<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]\s+ { this.popState(); return 'LINK'; }
<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>](?=[A-Z]) { this.popState(); return 'LINK'; }
<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\-\.\s* { this.pushState("dottedEdgeText"); return 'START_LINK'; }
<dottedEdgeText>[^\.]|\.(?!-) return 'EDGE_TEXT';
<*>\s*\~\~[\~]+\s* return 'LINK';