resolving lint errors

6919: correct viewBox casing in Radar & Packet

.changeset/brave-memes-flash.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support edge animation in hand drawn look

.changeset/busy-mirrors-try.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Resolved parsing error where direction TD was not recognized within subgraphs

.changeset/chilly-words-march.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Correct viewBox casing and make SVGs responsive

.changeset/curly-apes-prove.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Improve participant parsing and prevent recursive loops on invalid syntax

CHANGELOG.md

@@ -1 +1 @@
-./packages/mermaid/CHANGELOG.md
+./packages/mermaid/CHANGELOG.md

CONTRIBUTING.md

@@ -1 +1 @@
-./packages/mermaid/src/docs/community/contributing.md
+./packages/mermaid/src/docs/community/contributing.md

cypress/helpers/util.ts

@@ -6,6 +6,7 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
+  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -90,7 +91,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, '-');
@@ -98,12 +99,15 @@ export const openURLAndVerifyRendering = (
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
   cy.get('svg').should('be.visible');
+  cy.get('svg').should('not.have.attr', 'viewbox');
 
   if (validation) {
     cy.get('svg').should(validation);
   }
 
-  verifyScreenshot(name);
+  if (screenshot) {
+    verifyScreenshot(name);
+  }
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/rendering/classDiagram-elk-v3.spec.js

@@ -661,6 +661,19 @@ class Class10
       { logLevel: 1, htmlLabels: true, layout: 'elk' }
     );
   });
+
+  it('ELK: should render a class with a text label, members and multiple annotations', () => {
+    imgSnapshotTest(
+      `classDiagram
+        class C1["Class 1 with text label"] {
+            <<interface>> <<injected>>
+            +member1
+        }
+        C1 -->  C2`,
+      { logLevel: 1, htmlLabels: true, layout: 'elk' }
+    );
+  });
+
   it('ELK: should render multiple classes with same text labels', () => {
     imgSnapshotTest(
       `classDiagram

cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js

@@ -661,6 +661,19 @@ class Class10
       { logLevel: 1, htmlLabels: true, look: 'handDrawn' }
     );
   });
+
+  it('HD: should render a class with a text label, membersand  multiple annotations', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"] {
+    <<interface>> <<injected>>
+    +member1
+  }
+  C1 -->  C2`,
+      { logLevel: 1, htmlLabels: true, look: 'handDrawn' }
+    );
+  });
+
   it('HD: should render multiple classes with same text labels', () => {
     imgSnapshotTest(
       `classDiagram

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -510,6 +510,16 @@ class Class10
   C1 -->  C2`
     );
   });
+  it('should render a class with a text label, members and multiple annotations', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"] {
+    <<interface>> <<injected>>
+    +member1
+  }
+  C1 -->  C2`
+    );
+  });
   it('should render multiple classes with same text labels', () => {
     imgSnapshotTest(
       `classDiagram

cypress/integration/rendering/classDiagram-v3.spec.js

@@ -657,6 +657,17 @@ class Class10
   C1 -->  C2`
     );
   });
+  it('should render a class with a text label, members and multiple annotations', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"] {
+    <<interface>> <<injected>>
+    +member1
+  }
+  C1 -->  C2`
+    );
+  });
+
   it('should render multiple classes with same text labels', () => {
     imgSnapshotTest(
       `classDiagram

cypress/integration/rendering/classDiagram.spec.js

@@ -452,6 +452,20 @@ describe('Class diagram', () => {
       <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\`  
     `);
   });
+  it('should render with newlines in title and multiple annotations', () => {
+    imgSnapshotTest(`
+    classDiagram
+      class \`This\nTitle\nHas\nMany\nNewlines\` {
+        +String Also
+        -String Many
+        #int Members
+        +And()
+        -Many()
+        #Methods()
+      }
+      <<Interface>> <<Service>> \`This\nTitle\nHas\nMany\nNewlines\`  
+    `);
+  });
 
   it('should handle newline title in namespace', () => {
     imgSnapshotTest(`

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', 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');
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -774,6 +774,21 @@ 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 }`,
+      { 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');
+  });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
       `
@@ -973,4 +988,19 @@ graph TD
       }
     );
   });
+
+  it('70: should render a subgraph with direction TD', () => {
+    imgSnapshotTest(
+      `
+      flowchart LR
+        subgraph A
+          direction TD
+          a --> b
+        end
+      `,
+      {
+        fontFamily: 'courier',
+      }
+    );
+  });
 });

demos/class-multiple-stereotypes.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Class Diagram - Multiple Stereotypes Test</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Multiple Stereotypes Test</h1>
+
+    <h2>Test 1: Inline with class definition (single)</h2>
+    <pre class="mermaid">
+    classDiagram
+      class Shape &lt;&lt;interface&gt;&gt;
+    </pre>
+
+    <h2>Test 2: Inline with class definition (multiple)</h2>
+    <pre class="mermaid">
+    classDiagram
+      class Shape &lt;&lt;interface&gt;&gt; &lt;&lt;injected&gt;&gt;
+    </pre>
+
+    <h2>Test 3: Separate line (single)</h2>
+    <pre class="mermaid">
+    classDiagram
+      class Shape
+      &lt;&lt;interface&gt;&gt; Shape
+    </pre>
+
+    <h2>Test 4: Separate line (multiple)</h2>
+    <pre class="mermaid">
+    classDiagram
+      class Shape
+      &lt;&lt;interface&gt;&gt; &lt;&lt;injected&gt;&gt; Shape
+    </pre>
+
+    <h2>Test 5: Inside class body (single)</h2>
+    <pre class="mermaid">
+    classDiagram
+    class Shape{
+        &lt;&lt;interface&gt;&gt;
+        noOfVertices
+        draw()
+    }
+    </pre>
+
+    <h2>Test 6: Inside class body (multiple on same line)</h2>
+    <pre class="mermaid">
+    classDiagram
+    class Shape{
+        &lt;&lt;interface&gt;&gt; &lt;&lt;injected&gt;&gt;
+        noOfVertices
+        draw()
+    }
+    </pre>
+
+    <h2>Test 7: Combined example</h2>
+    <pre class="mermaid">
+    classDiagram
+    class Shape{
+        &lt;&lt;interface&gt;&gt; &lt;&lt;injected&gt;&gt;
+        noOfVertices
+        draw()
+    }
+    class Color{
+        &lt;&lt;enumeration&gt;&gt;
+        RED
+        BLUE
+        GREEN
+        WHITE
+        BLACK
+    }
+    Shape &lt;|-- Color
+    </pre>
+
+    <hr />
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>

demos/classchart.html

@@ -38,7 +38,7 @@
         +quack()
       }
       class Fish{
-        -Listint sizeInFeet
+        -int sizeInFeet
         -canEat()
       }
       class Zebra{
@@ -143,21 +143,7 @@
     Pineapple : -int leafCount()
     Pineapple : -int spikeCount()
     </pre>
-    <hr />
 
-    <pre class="mermaid">
-    classDiagram
-      class Person {
-        +ID : Guid
-        +FirstName : string
-        +LastName : string
-        -privateProperty : string
-        #ProtectedProperty : string
-        ~InternalProperty : string
-        ~AnotherInternalProperty : List~List~string~~
-      }
-      class People List~List~Person~~
-    </pre>
     <hr />
     <pre class="mermaid">
     classDiagram

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<br>can swim<br>can dive<br>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<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -702,7 +702,6 @@ classDiagram
 It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 You would define these actions on a separate line after all classes have been declared.
-If you have classes defined within a namespace, you can also add interaction definitions within the namespace definition, after the class(es) is defined
 
 ```
 action className "reference" "tooltip"

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -88,50 +88,6 @@ describe('given a basic class diagram, ', function () {
       expect(relations[0].title).toBe('generates');
     });
 
-    it('should handle link statements within namespaces', function () {
-      spyOn(classDb, 'setLink');
-      const str = `classDiagram
-        namespace MyNamespace {
-          class UserService {
-            +createUser()
-            +deleteUser()
-          }
-          
-          class PaymentService {
-            +processPayment()
-            +refund()
-          }
-          
-          link UserService "https://example.com/user-service"
-          link PaymentService "https://example.com/payment-service" "Payment Service Documentation"
-        }`;
-
-      parser.parse(str);
-
-      // Verify setLink was called for both classes
-      expect(classDb.setLink).toHaveBeenCalledWith(
-        'UserService',
-        'https://example.com/user-service'
-      );
-      expect(classDb.setLink).toHaveBeenCalledWith(
-        'PaymentService',
-        'https://example.com/payment-service'
-      );
-
-      // Verify the classes have the correct links and are in the namespace
-      const userService = classDb.getClass('UserService');
-      const paymentService = classDb.getClass('PaymentService');
-
-      expect(userService.parent).toBe('MyNamespace');
-      expect(userService.link).toBe('https://example.com/user-service');
-      expect(userService.cssClasses).toBe('default clickable');
-
-      expect(paymentService.parent).toBe('MyNamespace');
-      expect(paymentService.link).toBe('https://example.com/payment-service');
-      expect(paymentService.tooltip).toBe('Payment Service Documentation');
-      expect(paymentService.cssClasses).toBe('default clickable');
-    });
-
     it('should handle accTitle and accDescr', function () {
       const str = `classDiagram
             accTitle: My Title

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -18,6 +18,7 @@
 %x acc_descr_multiline
 %x class
 %x class-body
+%x class-body-annotation
 %x namespace
 %x namespace-body
 %%
@@ -82,9 +83,16 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <class-body><<EOF>>             return "EOF_IN_STRUCT";
 <class-body>"[*]"               { return 'EDGE_STATE';}
 <class-body>[{]                 return "OPEN_IN_STRUCT";
+<class-body>"<<"                { this.begin("class-body-annotation"); return 'ANNOTATION_START';}
 <class-body>[\n]                /* nothing */
+<class-body>[ \t]+              /* skip whitespace in class body */
 <class-body>[^{}\n]*            { return "MEMBER";}
 
+<class-body-annotation>">>"     { this.popState(); return 'ANNOTATION_END';}
+<class-body-annotation>[0-9]+   return 'NUM';
+<class-body-annotation>\w+      return 'ALPHA';
+<class-body-annotation>[\s]+    /* ignore whitespace */
+
 <*>"cssClass"                   return 'CSSCLASS';
 <*>"callback"                   return 'CALLBACK';
 <*>"link"                       return 'LINK';
@@ -275,25 +283,14 @@ statement
     ;
 
 namespaceStatement
-    : namespaceIdentifier STRUCT_START namespaceBodyStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3); }
-    | namespaceIdentifier STRUCT_START NEWLINE namespaceBodyStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4); }
+    : namespaceIdentifier STRUCT_START classStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3); }
+    | namespaceIdentifier STRUCT_START NEWLINE classStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4); }
     ;
 
 namespaceIdentifier
     : NAMESPACE namespaceName { $$=$2; yy.addNamespace($2); }
     ;
 
-namespaceBodyStatements
-    : namespaceBodyStatement                                        { $$=[$1].filter(s => s !== null); }
-    | namespaceBodyStatement NEWLINE                                { $$=[$1].filter(s => s !== null); }
-    | namespaceBodyStatement NEWLINE namespaceBodyStatements        { var filtered = [$1].filter(s => s !== null); $3.unshift(...filtered); $$=$3; }
-    ;
-
-namespaceBodyStatement
-    : classStatement                { $$=$1; }
-    | clickStatement               { $$=null; /* clickStatements don't return class names, but are processed for side effects */ }
-    ;
-
 classStatements
     : classStatement                            {$$=[$1]}
     | classStatement NEWLINE                    {$$=[$1]}
@@ -305,12 +302,26 @@ classStatement
     | classIdentifier STYLE_SEPARATOR alphaNumToken      {yy.setCssClass($1, $3);}
     | classIdentifier STRUCT_START members STRUCT_STOP   {yy.addMembers($1,$3);}
     | classIdentifier STRUCT_START STRUCT_STOP           {}
+    | classIdentifier STRUCT_START NEWLINE members STRUCT_STOP {yy.addMembers($1,$4);}
+    | classIdentifier STRUCT_START annotationList members STRUCT_STOP {for(const annotation of $3) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$4);}
+    | classIdentifier STRUCT_START annotationList STRUCT_STOP {for(const annotation of $3) { yy.addAnnotation($1, annotation); }}
+    | classIdentifier STRUCT_START NEWLINE annotationList members STRUCT_STOP {for(const annotation of $4) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$5);}
+    | classIdentifier STRUCT_START NEWLINE annotationList STRUCT_STOP {for(const annotation of $4) { yy.addAnnotation($1, annotation); }}
     | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);}
+    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START NEWLINE members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$6);}
+    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START annotationList members STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $5) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$6);}
+    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START annotationList STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $5) { yy.addAnnotation($1, annotation); }}
+    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START NEWLINE annotationList members STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $6) { yy.addAnnotation($1, annotation); } yy.addMembers($1,$7);}
+    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START NEWLINE annotationList STRUCT_STOP {yy.setCssClass($1, $3); for(const annotation of $6) { yy.addAnnotation($1, annotation); }}
     ;
 
 classIdentifier
     : CLASS className                                    {$$=$2; yy.addClass($2);}
+    | CLASS className ANNOTATION_START alphaNumToken ANNOTATION_END {$$=$2; yy.addClass($2); yy.addAnnotation($2,$4);}
+    | CLASS className annotationList                     {$$=$2; yy.addClass($2); for(const annotation of $3) { yy.addAnnotation($2, annotation); }}
     | CLASS className classLabel                         {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3);}
+    | CLASS className classLabel ANNOTATION_START alphaNumToken ANNOTATION_END {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3); yy.addAnnotation($2,$5);}
+    | CLASS className classLabel annotationList          {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3); for(const annotation of $4) { yy.addAnnotation($2, annotation); }}
     ;
 
 
@@ -322,6 +333,12 @@ emptyBody
 
 annotationStatement
     : ANNOTATION_START alphaNumToken ANNOTATION_END className  { yy.addAnnotation($4,$2); }
+    | annotationList className  { for(const annotation of $1) { yy.addAnnotation($2, annotation); } }
+    ;
+
+annotationList
+    : ANNOTATION_START alphaNumToken ANNOTATION_END { $$ = [$2]; }
+    | annotationList ANNOTATION_START alphaNumToken ANNOTATION_END { $1.push($3); $$ = $1; }
     ;
 
 members

packages/mermaid/src/diagrams/class/shapeUtil.ts

@@ -36,8 +36,8 @@ export async function textHelper<T extends SVGGraphicsElement>(
 
   annotationGroup = shapeSvg.insert('g').attr('class', 'annotation-group text');
   if (node.annotations.length > 0) {
-    const annotation = node.annotations[0];
-    await addText(annotationGroup, { text: `«${annotation}»` } as unknown as ClassMember, 0);
+    const annotationText = node.annotations.map((a: string) => `«${a}»`).join('\n');
+    await addText(annotationGroup, { text: annotationText } as unknown as ClassMember, 0);
 
     const annotationGroupBBox = annotationGroup.node()!.getBBox();
     annotationGroupHeight = annotationGroupBBox.height;

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'};}
     ;
 
 %%

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');
+  });
 });

packages/mermaid/src/diagrams/packet/renderer.ts

@@ -16,7 +16,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
   const svgWidth = bitWidth * bitsPerRow + 2;
   const svg: SVG = selectSvgElement(id);
 
-  svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`);
+  svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
   configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
 
   for (const [word, packet] of words.entries()) {

packages/mermaid/src/diagrams/radar/renderer.ts

@@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js';
 import type { RadarDiagramConfig } from '../../config.type.js';
 import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { RadarDB, RadarAxis, RadarCurve } from './types.js';
 
 const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
@@ -53,11 +54,9 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
     x: config.marginLeft + config.width / 2,
     y: config.marginTop + config.height / 2,
   };
-  // Initialize the SVG
-  svg
-    .attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`)
-    .attr('width', totalWidth)
-    .attr('height', totalHeight);
+  configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
+
+  svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
   // g element to center the radar chart
   return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`);
 };

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -32,13 +32,14 @@
 <CONFIG>[^\}]+                                                  { return 'CONFIG_CONTENT'; }
 <CONFIG>\}                                                      { this.popState(); this.popState(); return 'CONFIG_END'; }
 <ID>[^\<->\->:\n,;@\s]+(?=\@\{)                                 { yytext = yytext.trim(); return 'ACTOR'; }
-<ID>[^\<->\->:\n,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^<>:\n,;@\s]+(?=\s+as\s)                                   { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^<>:\n,;@]+(?=\s*[\n;#]|$)                                 { yytext = yytext.trim(); this.popState(); return 'ACTOR'; }
+<ID>[^<>:\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'; }
-<ID>[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { 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)) }
   ;
 
-%%
+%%

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 <br> service decription
+       `);
+      } catch (e) {
+        error = true;
+      }
+      expect(error).toBe(true);
+    });
   });
 });

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<br>can swim<br>can dive<br>can help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -358,17 +358,19 @@ It is possible to annotate classes with markers to provide additional metadata a
 - `<<Service>>` To represent a service class
 - `<<Enumeration>>` To represent an enum
 
-Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
+Annotations are defined within the opening `<<` and closing `>>`. There are multiple ways to add an annotation to a class, which all result in the same output, and you can add multiple annotations by adding others on the same line:
 
-> **Tip:**  
-> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
->
 > - **Inline with the class definition** (Recommended for consistency):
 >
 >   ```mermaid-example
 >   classDiagram
 >     class Shape <<interface>>
 >   ```
+
+> ```mermaid-example
+> classDiagram
+>   class Shape <<interface>> <<injected>>
+> ```
 >
 > - **Separate line after the class definition**:
 >
@@ -378,25 +380,18 @@ Annotations are defined within the opening `<<` and closing `>>`. There are two
 >     <<interface>> Shape
 >   ```
 >
-> Both methods are fully supported and produce identical diagrams.  
-> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams.
+>   ```mermaid-example
+>   classDiagram
+>     class Shape
+>     <<interface>> <<injected>> Shape
+>   ```
 
-- In a **_separate line_** after a class is defined:
-
-```mermaid-example
-classDiagram
-class Shape
-<<interface>> Shape
-Shape : noOfVertices
-Shape : draw()
-```
-
-- In a **_nested structure_** along with the class definition:
+> In a **_nested structure_** along with the class definition:
 
 ```mermaid-example
 classDiagram
 class Shape{
-    <<interface>>
+    <<interface>> <<injected>>
     noOfVertices
     draw()
 }
@@ -452,7 +447,6 @@ classDiagram
 It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 You would define these actions on a separate line after all classes have been declared.
-If you have classes defined within a namespace, you can also add interaction definitions within the namespace definition, after the class(es) is defined
 
 ```
 action className "reference" "tooltip"

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -605,6 +605,14 @@ export const insertEdge = function (
   const edgeStyles = Array.isArray(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;
+  }
+
   let animatedEdge = false;
   if (edge.look === 'handDrawn') {
     const rc = rough.svg(elem);
@@ -620,7 +628,13 @@ export const insertEdge = function (
     svgPath = select(svgPathNode)
       .select('path')
       .attr('id', edge.id)
-      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
+      .attr(
+        'class',
+        ' ' +
+          strokeClasses +
+          (edge.classes ? ' ' + edge.classes : '') +
+          (animationClass ? ' ' + animationClass : '')
+      )
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
     let d = svgPath.attr('d');
     svgPath.attr('d', d);
@@ -628,13 +642,6 @@ export const insertEdge = function (
   } 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) +
@@ -646,7 +653,10 @@ export const insertEdge = function (
       .attr('id', edge.id)
       .attr(
         'class',
-        ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
+        ' ' +
+          strokeClasses +
+          (edge.classes ? ' ' + edge.classes : '') +
+          (animationClass ? ' ' + animationClass : '')
       )
       .attr('style', pathStyle);