From 18703782ee9497673ab1c223ba069b83f2eafa80 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 11 Aug 2025 15:52:49 +0530 Subject: [PATCH 01/10] Fixed edge animation for hand drawn shapes --- .../rendering/flowchart-handDrawn.spec.js | 15 ++++++++++++++ .../integration/rendering/flowchart.spec.js | 12 +++++++++++ .../rendering-elements/edges.js | 20 +++++++++++-------- 3 files changed, 39 insertions(+), 8 deletions(-) diff --git a/cypress/integration/rendering/flowchart-handDrawn.spec.js b/cypress/integration/rendering/flowchart-handDrawn.spec.js index 49c55c628..e5a188a7b 100644 --- a/cypress/integration/rendering/flowchart-handDrawn.spec.js +++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js @@ -1029,4 +1029,19 @@ graph TD } ); }); + + it('FDH49: should add edge animation', () => { + renderGraph( + ` + flowchart TD + A(["Start"]) L_A_B_0@--> B{"Decision"} + B --> C["Option A"] & D["Option B"] + style C stroke-width:4px,stroke-dasharray: 5 + L_A_B_0@{ animation: slow } + L_B_D_0@{ animation: fast }`, + { look: 'handDrawn' } + ); + cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow'); + cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast'); + }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 40713ac4e..6a655096b 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -774,6 +774,18 @@ describe('Graph', () => { expect(svg).to.not.have.attr('style'); }); }); + it('40: should add edge animation', () => { + renderGraph(` + flowchart TD + A(["Start"]) L_A_B_0@--> B{"Decision"} + B --> C["Option A"] & D["Option B"] + style C stroke-width:4px,stroke-dasharray: 5 + L_A_B_0@{ animation: slow } + L_B_D_0@{ animation: fast }`); + // Verify animation classes are applied to both edges + cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow'); + cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast'); + }); it('58: handle styling with style expressions', () => { imgSnapshotTest( ` diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index db48e313c..f3b029d5e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -565,6 +565,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : []; let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:')); + let animationClass = ''; + if (edge.animate) { + animationClass = ' edge-animation-fast'; + } + if (edge.animation) { + animationClass = ' edge-animation-' + edge.animation; + } + if (edge.look === 'handDrawn') { const rc = rough.svg(elem); Object.assign([], lineData); @@ -579,7 +587,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod svgPath = select(svgPathNode) .select('path') .attr('id', edge.id) - .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) + .attr( + 'class', + ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '') + ) .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : ''); let d = svgPath.attr('d'); svgPath.attr('d', d); @@ -587,13 +598,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod } else { const stylesFromClasses = edgeClassStyles.join(';'); const styles = edgeStyles ? edgeStyles.reduce((acc, style) => acc + style + ';', '') : ''; - let animationClass = ''; - if (edge.animate) { - animationClass = ' edge-animation-fast'; - } - if (edge.animation) { - animationClass = ' edge-animation-' + edge.animation; - } const pathStyle = stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles; svgPath = elem From 32723b2de13474d7d13e9292e6f801e9874936ab Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 11 Aug 2025 15:59:07 +0530 Subject: [PATCH 02/10] Added change set --- .changeset/brave-memes-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/brave-memes-flash.md diff --git a/.changeset/brave-memes-flash.md b/.changeset/brave-memes-flash.md new file mode 100644 index 000000000..f127dd97e --- /dev/null +++ b/.changeset/brave-memes-flash.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +Fix: Support edge animation in hand drawn look From e6fb4a84da34a03e8a95e21d5f7d61036f650ad7 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 11 Aug 2025 16:32:03 +0530 Subject: [PATCH 03/10] code refactor --- .changeset/brave-memes-flash.md | 2 +- .../src/rendering-util/rendering-elements/edges.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/.changeset/brave-memes-flash.md b/.changeset/brave-memes-flash.md index f127dd97e..720cd7202 100644 --- a/.changeset/brave-memes-flash.md +++ b/.changeset/brave-memes-flash.md @@ -2,4 +2,4 @@ 'mermaid': patch --- -Fix: Support edge animation in hand drawn look +fix: Support edge animation in hand drawn look diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index f3b029d5e..77947a114 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -567,10 +567,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod let animationClass = ''; if (edge.animate) { - animationClass = ' edge-animation-fast'; + animationClass = 'edge-animation-fast'; } if (edge.animation) { - animationClass = ' edge-animation-' + edge.animation; + animationClass = 'edge-animation-' + edge.animation; } if (edge.look === 'handDrawn') { @@ -589,7 +589,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod .attr('id', edge.id) .attr( 'class', - ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '') + ' ' + + strokeClasses + + (edge.classes ? ' ' + edge.classes : '') + + (animationClass ? ' ' + animationClass : '') ) .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : ''); let d = svgPath.attr('d'); @@ -606,7 +609,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod .attr('id', edge.id) .attr( 'class', - ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '') + ' ' + + strokeClasses + + (edge.classes ? ' ' + edge.classes : '') + + (animationClass ? ' ' + animationClass : '') ) .attr('style', pathStyle); strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1]; From 56cc12690f4369eea69d76182e510b1523ecb540 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Fri, 5 Sep 2025 12:47:07 +0530 Subject: [PATCH 04/10] Added option to skip screenshot for cypress tests --- cypress/helpers/util.ts | 7 +++++-- cypress/integration/rendering/flowchart-handDrawn.spec.js | 2 +- cypress/integration/rendering/flowchart.spec.js | 7 +++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 81b7036af..79be26dd9 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -6,6 +6,7 @@ interface CypressConfig { listUrl?: boolean; listId?: string; name?: string; + screenshot?: boolean; } type CypressMermaidConfig = MermaidConfig & CypressConfig; @@ -92,7 +93,7 @@ export const renderGraph = ( export const openURLAndVerifyRendering = ( url: string, - options: CypressMermaidConfig, + { screenshot = true, ...options }: CypressMermaidConfig, validation?: any ): void => { const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); @@ -105,7 +106,9 @@ export const openURLAndVerifyRendering = ( cy.get('svg').should(validation); } - verifyScreenshot(name); + if (screenshot) { + verifyScreenshot(name); + } }; export const verifyScreenshot = (name: string): void => { diff --git a/cypress/integration/rendering/flowchart-handDrawn.spec.js b/cypress/integration/rendering/flowchart-handDrawn.spec.js index e5a188a7b..d3ca1d1f1 100644 --- a/cypress/integration/rendering/flowchart-handDrawn.spec.js +++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js @@ -1039,7 +1039,7 @@ graph TD style C stroke-width:4px,stroke-dasharray: 5 L_A_B_0@{ animation: slow } L_B_D_0@{ animation: fast }`, - { look: 'handDrawn' } + { look: 'handDrawn', screenshot: false } ); cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow'); cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast'); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 6a655096b..8e4adb30d 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -775,13 +775,16 @@ describe('Graph', () => { }); }); it('40: should add edge animation', () => { - renderGraph(` + renderGraph( + ` flowchart TD A(["Start"]) L_A_B_0@--> B{"Decision"} B --> C["Option A"] & D["Option B"] style C stroke-width:4px,stroke-dasharray: 5 L_A_B_0@{ animation: slow } - L_B_D_0@{ animation: fast }`); + L_B_D_0@{ animation: fast }`, + { screenshot: false } + ); // Verify animation classes are applied to both edges cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow'); cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast'); From 1a9d45abf0a991c40985021e8b523c32b46dd897 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 24 Sep 2025 12:22:31 +0530 Subject: [PATCH 05/10] fix: allow direction TD inside subgraphs on-behalf-of: @Mermaid-Chart --- .changeset/busy-mirrors-try.md | 5 +++++ cypress/integration/rendering/flowchart.spec.js | 15 +++++++++++++++ .../src/diagrams/flowchart/parser/flow.jison | 3 +++ .../diagrams/flowchart/parser/subgraph.spec.js | 17 +++++++++++++++++ 4 files changed, 40 insertions(+) create mode 100644 .changeset/busy-mirrors-try.md diff --git a/.changeset/busy-mirrors-try.md b/.changeset/busy-mirrors-try.md new file mode 100644 index 000000000..7e5d3b632 --- /dev/null +++ b/.changeset/busy-mirrors-try.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Resolved parsing error where direction TD was not recognized within subgraphs diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 40713ac4e..6e19da973 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -973,4 +973,19 @@ graph TD } ); }); + + it('70: should render a subgraph with direction TD', () => { + imgSnapshotTest( + ` + flowchart LR + subgraph A + direction TD + a --> b + end + `, + { + fontFamily: 'courier', + } + ); + }); }); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index 7b2f4386a..7340cf8d3 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison @@ -140,6 +140,7 @@ that id. .*direction\s+BT[^\n]* return 'direction_bt'; .*direction\s+RL[^\n]* return 'direction_rl'; .*direction\s+LR[^\n]* return 'direction_lr'; +.*direction\s+TD[^\n]* return 'direction_td'; [^\s\"]+\@(?=[^\{\"]) { return 'LINK_ID'; } [0-9]+ return 'NUM'; @@ -626,6 +627,8 @@ direction { $$={stmt:'dir', value:'RL'};} | direction_lr { $$={stmt:'dir', value:'LR'};} + | direction_td + { $$={stmt:'dir', value:'TD'};} ; %% diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js index 9339a6e2c..1273c4d7f 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js @@ -309,4 +309,21 @@ describe('when parsing subgraphs', function () { expect(subgraphA.nodes).toContain('a'); expect(subgraphA.nodes).not.toContain('c'); }); + it('should correctly parse direction TD inside a subgraph', function () { + const res = flow.parser.parse(` + graph LR + subgraph WithTD + direction TD + A1 --> A2 + end + `); + + const subgraphs = flow.parser.yy.getSubGraphs(); + expect(subgraphs.length).toBe(1); + const subgraph = subgraphs[0]; + + expect(subgraph.dir).toBe('TD'); + expect(subgraph.nodes).toContain('A1'); + expect(subgraph.nodes).toContain('A2'); + }); }); From 6d0650918f6825d0ff09f15940dd300cc5198c7c Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 8 Oct 2025 13:09:30 +0530 Subject: [PATCH 06/10] fix: handle participant names with spaces correctly in sequenceDiagram on-behalf-of: @Mermaid-Chart --- .../diagrams/sequence/parser/sequenceDiagram.jison | 8 +++++--- .../src/diagrams/sequence/sequenceDiagram.spec.js | 12 ++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index f1364895b..e932f604f 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -32,13 +32,14 @@ [^\}]+ { return 'CONFIG_CONTENT'; } \} { this.popState(); this.popState(); return 'CONFIG_END'; } [^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; } -[^\<->\->:\n,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } +[^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; } "box" { this.begin('LINE'); return 'box'; } "participant" { this.begin('ID'); return 'participant'; } "actor" { this.begin('ID'); return 'participant_actor'; } "create" return 'create'; "destroy" { this.begin('ID'); return 'destroy'; } -[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } "as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; } (?:) { this.popState(); this.popState(); return 'NEWLINE'; } "loop" { this.begin('LINE'); return 'loop'; } @@ -145,6 +146,7 @@ line : SPACE statement { $$ = $2 } | statement { $$ = $1 } | NEWLINE { $$=[]; } + | INVALID { $$=[]; } ; box_section @@ -411,4 +413,4 @@ text2 : TXT {$$ = yy.parseMessage($1.trim().substring(1)) } ; -%% +%% \ No newline at end of file diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 5f4e06dcd..cabcd7db5 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -2609,5 +2609,17 @@ Bob->>Alice:Got it! expect(actors.get('E').type).toBe('entity'); expect(actors.get('E').description).toBe('E'); }); + it('should handle fail parsing when alias token causes conflicts in participant definition', async () => { + let error = false; + try { + await Diagram.fromText(` + sequenceDiagram + participant SAS MyServiceWithMoreThan20Chars
service decription + `); + } catch (e) { + error = true; + } + expect(error).toBe(true); + }); }); }); From fa15ce8502d2f1d72787998d9d944c5a98b992dd Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 8 Oct 2025 13:23:28 +0530 Subject: [PATCH 07/10] chore: added changeset on-behalf-of: @Mermaid-Chart --- .changeset/curly-apes-prove.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curly-apes-prove.md diff --git a/.changeset/curly-apes-prove.md b/.changeset/curly-apes-prove.md new file mode 100644 index 000000000..2acf3d1a3 --- /dev/null +++ b/.changeset/curly-apes-prove.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Improve participant parsing and prevent recursive loops on invalid syntax From 69b338d8af4fcfb22add30aca747f1aed3486554 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Thu, 9 Oct 2025 11:37:05 +0530 Subject: [PATCH 08/10] fix: formatting issues Co-authored-by: omkarht --- .../src/diagrams/sequence/parser/sequenceDiagram.jison | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index e932f604f..cfc108b24 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -32,9 +32,9 @@ [^\}]+ { return 'CONFIG_CONTENT'; } \} { this.popState(); this.popState(); return 'CONFIG_END'; } [^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; } -[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } -[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } -[^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; } +[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } +[^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; } "box" { this.begin('LINE'); return 'box'; } "participant" { this.begin('ID'); return 'participant'; } "actor" { this.begin('ID'); return 'participant_actor'; } From 6fecb985e8654bafd8073075f3a9382cbd29f10b Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Thu, 9 Oct 2025 11:50:44 +0530 Subject: [PATCH 09/10] fix: failing argos on-behalf-of: @Mermaid-Chart --- .../mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison index cfc108b24..214189a5b 100644 --- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -32,7 +32,7 @@ [^\}]+ { return 'CONFIG_CONTENT'; } \} { this.popState(); this.popState(); return 'CONFIG_END'; } [^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; } -[^<>:\n,;@]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } +[^<>:\n,;@\s]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } [^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; } [^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; } "box" { this.begin('LINE'); return 'box'; } From ac411a7d7e028729f374c62ada72e9989396c985 Mon Sep 17 00:00:00 2001 From: Antonio Spadaro <9268789+ilovelinux@users.noreply.github.com> Date: Sat, 11 Oct 2025 22:53:58 +0200 Subject: [PATCH 10/10] Fix class diagram example --- docs/syntax/classDiagram.md | 4 ++-- packages/mermaid/src/docs/syntax/classDiagram.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index 2067cc97c..ffef1e5c3 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -21,7 +21,7 @@ title: Animal example classDiagram note "From Duck till Zebra" Animal <|-- Duck - note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" + note for Duck "can fly
can swim
can dive
can help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age @@ -50,7 +50,7 @@ title: Animal example classDiagram note "From Duck till Zebra" Animal <|-- Duck - note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" + note for Duck "can fly
can swim
can dive
can help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md index 7ef81b96f..ed69bd223 100644 --- a/packages/mermaid/src/docs/syntax/classDiagram.md +++ b/packages/mermaid/src/docs/syntax/classDiagram.md @@ -15,7 +15,7 @@ title: Animal example classDiagram note "From Duck till Zebra" Animal <|-- Duck - note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" + note for Duck "can fly
can swim
can dive
can help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age