From cdb4639aa401959baa3c0af0c3ba71996d868144 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Tue, 10 Oct 2023 00:16:05 +0530 Subject: [PATCH 01/11] bug/#3251_linkStyle-can't-specify-ids Fixed --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 6 ++++++ .../src/diagrams/flowchart/parser/flow-style.spec.js | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index a87bf558d..9c9442ce2 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -192,6 +192,12 @@ export const updateLinkInterpolate = function (positions, interp) { */ export const updateLink = function (positions, style) { positions.forEach(function (pos) { + if (pos >= edges.length) { + let error = new Error( + `Incorrect index ${pos} of linkStyle. (Help: Index must be from 0 to ${edges.length - 1})` + ); + throw error; + } if (pos === 'default') { edges.defaultStyle = style; } else { diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 1ab754308..eb56c24f3 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -286,6 +286,14 @@ describe('[Style] when parsing', () => { expect(edges[0].type).toBe('arrow_point'); }); + it('should handle style definitions within number of edges', function () { + const res = flow.parser.parse('graph TD\n' + 'A-->B\n' + 'linkStyle 0 stroke-width:1px;'); + + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].style[0]).toBe('stroke-width:1px'); + }); + it('should handle multi-numbered style definitions with more then 1 digit in a row', function () { const res = flow.parser.parse( 'graph TD\n' + From ce3d9fcddec74eca6baac8e7f2a1341c1f2171bf Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Tue, 10 Oct 2023 11:09:30 +0530 Subject: [PATCH 02/11] Added test suggested on PR --- .../mermaid/src/diagrams/flowchart/flowDb.js | 2 +- .../flowchart/parser/flow-style.spec.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 9c9442ce2..5e3b7d463 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -194,7 +194,7 @@ export const updateLink = function (positions, style) { positions.forEach(function (pos) { if (pos >= edges.length) { let error = new Error( - `Incorrect index ${pos} of linkStyle. (Help: Index must be from 0 to ${edges.length - 1})` + `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` ); throw error; } diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index eb56c24f3..4b461576b 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -287,7 +287,23 @@ describe('[Style] when parsing', () => { }); it('should handle style definitions within number of edges', function () { - const res = flow.parser.parse('graph TD\n' + 'A-->B\n' + 'linkStyle 0 stroke-width:1px;'); + try { + flow.parser.parse(`graph TD + A-->B + linkStyle 1 stroke-width:1px;`); + // Fail test if above expression doesn't throw anything. + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe( + `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` + ); + } + }); + + it('should handle style definitions within number of edges', function () { + const res = flow.parser.parse(`graph TD + A-->B + linkStyle 0 stroke-width:1px;`); const edges = flow.parser.yy.getEdges(); From 995449cbf665e8eb340a3f01aaccbc31488ab6e2 Mon Sep 17 00:00:00 2001 From: RounakJoshi09 Date: Wed, 11 Oct 2023 20:40:14 +0530 Subject: [PATCH 03/11] Error Message Changed --- .../mermaid/src/diagrams/flowchart/flowDb.js | 7 +++--- .../flowchart/parser/flow-style.spec.js | 22 +++++++++---------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 5e3b7d463..6cd3e2ecf 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -193,10 +193,11 @@ export const updateLinkInterpolate = function (positions, interp) { export const updateLink = function (positions, style) { positions.forEach(function (pos) { if (pos >= edges.length) { - let error = new Error( - `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` + throw new Error( + `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${ + edges.length - 1 + }. (Help: Ensure that the index is within the range of existing edges.)` ); - throw error; } if (pos === 'default') { edges.defaultStyle = style; diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 4b461576b..5b0f740bd 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -287,17 +287,17 @@ describe('[Style] when parsing', () => { }); it('should handle style definitions within number of edges', function () { - try { - flow.parser.parse(`graph TD - A-->B - linkStyle 1 stroke-width:1px;`); - // Fail test if above expression doesn't throw anything. - expect(true).toBe(false); - } catch (e) { - expect(e.message).toBe( - `The index for linkStyle is out of bounds. (Help: Ensure that the index is within the range of existing edges.)` - ); - } + expect(() => + flow.parser + .parse( + `graph TD + A-->B + linkStyle 1 stroke-width:1px;` + ) + .toThrow( + 'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)' + ) + ); }); it('should handle style definitions within number of edges', function () { From 3389ecdfea6d3d0dcea8cd19fcbd29b3869ba085 Mon Sep 17 00:00:00 2001 From: Claes Gill Date: Thu, 19 Oct 2023 22:48:49 +0200 Subject: [PATCH 04/11] Updated README with expandable table of content. --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 04747385a..e1f2fae9a 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,22 @@ Try Live Editor previews of future releases: Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! +## Table of content + +
+Expand contents + +- [About](#about) +- [Examples](#examples) +- [Release](#release) +- [Related projects](#related-projects) +- [Contributors](#contributors) +- [Security and safe diagrams](#security-and-safe-diagrams) +- [Reporting vulnerabilities](#reporting-vulnerabilities) +- [Appreciation](#appreciation) + +
+ ## About From b5fd8fb7c1276f004ebbdab62fddc5ecc1e97e0b Mon Sep 17 00:00:00 2001 From: SteffenLm <33038091+SteffenLm@users.noreply.github.com> Date: Fri, 3 Nov 2023 20:55:42 +0100 Subject: [PATCH 05/11] fix text-decoration for abstract attibutes --- .../src/diagrams/class/classTypes.spec.ts | 79 +++++++++++++++++++ .../mermaid/src/diagrams/class/classTypes.ts | 2 +- 2 files changed, 80 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classTypes.spec.ts b/packages/mermaid/src/diagrams/class/classTypes.spec.ts index 2b360d447..5a5ffa4db 100644 --- a/packages/mermaid/src/diagrams/class/classTypes.spec.ts +++ b/packages/mermaid/src/diagrams/class/classTypes.spec.ts @@ -681,3 +681,82 @@ describe('given text representing a method, ', function () { }); }); }); + +describe('given text representing an attribute', () => { + describe('when the attribute has no modifiers', () => { + it('should parse the display text correctly', () => { + const str = 'name String'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('name String'); + expect(displayDetails.cssStyle).toBe(''); + }); + }); + + describe('when the attribute has public "+" modifier', () => { + it('should parse the display text correctly', () => { + const str = '+name String'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('+name String'); + expect(displayDetails.cssStyle).toBe(''); + }); + }); + + describe('when the attribute has protected "#" modifier', () => { + it('should parse the display text correctly', () => { + const str = '#name String'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('#name String'); + expect(displayDetails.cssStyle).toBe(''); + }); + }); + + describe('when the attribute has private "-" modifier', () => { + it('should parse the display text correctly', () => { + const str = '-name String'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('-name String'); + expect(displayDetails.cssStyle).toBe(''); + }); + }); + + describe('when the attribute has internal "~" modifier', () => { + it('should parse the display text correctly', () => { + const str = '~name String'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('~name String'); + expect(displayDetails.cssStyle).toBe(''); + }); + }); + + describe('when the attribute has static "$" modifier', () => { + it('should parse the display text correctly and apply static css style', () => { + const str = 'name String$'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('name String'); + expect(displayDetails.cssStyle).toBe(staticCssStyle); + }); + }); + + describe('when the attribute has abstract "*" modifier', () => { + it('should parse the display text correctly and apply abstract css style', () => { + const str = 'name String*'; + + const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails(); + + expect(displayDetails.displayText).toBe('name String'); + expect(displayDetails.cssStyle).toBe(abstractCssStyle); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts index e288eefde..f112dd4dd 100644 --- a/packages/mermaid/src/diagrams/class/classTypes.ts +++ b/packages/mermaid/src/diagrams/class/classTypes.ts @@ -106,7 +106,7 @@ export class ClassMember { this.visibility = firstChar as Visibility; } - if (lastChar.match(/[*?]/)) { + if (lastChar.match(/[$*]/)) { potentialClassifier = lastChar; } From 23cbf50413e82a2f9160fddb648bfa69c44a8d17 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 18:47:38 +0530 Subject: [PATCH 06/11] fix: render the participants in same order as they are created --- demos/sequence.html | 9 ++++++++- packages/mermaid/src/diagrams/sequence/svgDraw.js | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index b2733a384..035dc7385 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -164,6 +164,13 @@ end + 
+    sequenceDiagram
+      actor Alice
+      actor John
+      Alice-xJohn: Hello John, how are you?
+      John--xAlice: Great!
+
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index f81147c10..87899df1e 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g').lower(); + const boxpluslineGroup = elem.append('g').raise(); var g = boxpluslineGroup; if (!isFooter) { @@ -1038,6 +1038,7 @@ export default { drawText, drawLabel, drawActor, + drawActorTypeParticipant, drawBox, drawPopup, anchorElement, From 78c1a3d98027393e99a96031b4fe0e943a248886 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 18:57:47 +0530 Subject: [PATCH 07/11] fix --- demos/sequence.html | 2 +- packages/mermaid/src/diagrams/sequence/svgDraw.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index 035dc7385..d7bce2fef 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -181,7 +181,7 @@ flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - sequenceDiagram: { actorMargin: 300 }, // deprecated + // sequenceDiagram: { actorMargin: 300 }, // deprecated }); diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 87899df1e..fd490e5ae 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -1038,7 +1038,6 @@ export default { drawText, drawLabel, drawActor, - drawActorTypeParticipant, drawBox, drawPopup, anchorElement, From dff8b783b8f85bb9b6b71986fdbce80f3ddfb204 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 19:02:10 +0530 Subject: [PATCH 08/11] fix --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index fd490e5ae..31e6dc2a8 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g').raise(); + const boxpluslineGroup = elem.append('g'); var g = boxpluslineGroup; if (!isFooter) { From 396ea3cec2e541199c817bd863a8c7b24ee17a8e Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 19:55:53 +0530 Subject: [PATCH 09/11] Update demos/sequence.html --- demos/sequence.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/sequence.html b/demos/sequence.html index d7bce2fef..3345fed17 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -181,7 +181,7 @@ flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - // sequenceDiagram: { actorMargin: 300 }, // deprecated + // sequenceDiagram: { actorMargin: 300 } // deprecated }); From 01bbcc597af5c20e03847e3fdadc0fe3f9b6b731 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Thu, 9 Nov 2023 17:49:25 +0530 Subject: [PATCH 10/11] draw top actors with lines first followed by messages --- .../mermaid/src/diagrams/sequence/sequenceRenderer.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index b8962395e..7c38a8016 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos); } + log.debug('createdActors', createdActors); + log.debug('destroyedActors', destroyedActors); + + drawActors(diagram, actors, actorKeys, false); + // Draw the messages/signals let sequenceIndex = 1; let sequenceIndexStep = 1; @@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO } }); - log.debug('createdActors', createdActors); - log.debug('destroyedActors', destroyedActors); - - drawActors(diagram, actors, actorKeys, false); messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj)); + if (conf.mirrorActors) { drawActors(diagram, actors, actorKeys, true); } + backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e)); fixLifeLineHeights(diagram, actors, actorKeys, conf); From adff22c1e2f5c73a1dd0f7b3c8b39fc7c5cb57d9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 13 Nov 2023 17:15:43 +0000 Subject: [PATCH 11/11] Update all patch dependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 098e91c30..d2ca53ce0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.10.2", + "packageManager": "pnpm@8.10.4", "keywords": [ "diagram", "markdown",