diff --git a/.changeset/add-nested-namespaces.md b/.changeset/add-nested-namespaces.md new file mode 100644 index 0000000000..39097c49bf --- /dev/null +++ b/.changeset/add-nested-namespaces.md @@ -0,0 +1,17 @@ +--- +'@mermaid': patch +--- + +Fixed an issue when the mermaid classdiagram crashes when adding a . to the namespace. +Forexample + +```mermaid + +classDiagram + namespace Company.Project.Module { + class GenericClass~T~ { + +addItem(item: T) + +getItem() T + } + } +``` diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 258f8529f6..0c5dbc04b0 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -581,4 +581,63 @@ class C13["With Città foreign language"] { logLevel: 1, flowchart: { htmlLabels: false } } ); }); + + it('renders a class diagram with a generic class in a namespace', () => { + const diagramDefinition = ` + classDiagram-v2 + namespace Company.Project.Module { + class GenericClass~T~ { + +addItem(item: T) + +getItem() T + } + } + `; + + imgSnapshotTest(diagramDefinition); + }); + + it('renders a class diagram with nested namespaces and relationships', () => { + const diagramDefinition = ` + classDiagram-v2 + namespace Company.Project.Module.SubModule { + class Report { + +generatePDF(data: List) + +generateCSV(data: List) + } + } + namespace Company.Project.Module { + class Admin { + +generateReport() + } + } + Admin --> Report : generates + `; + + imgSnapshotTest(diagramDefinition); + }); + + it('renders a class diagram with multiple classes and relationships in a namespace', () => { + const diagramDefinition = ` + classDiagram-v2 + namespace Company.Project.Module { + class User { + +login(username: String, password: String) + +logout() + } + class Admin { + +addUser(user: User) + +removeUser(user: User) + +generateReport() + } + class Report { + +generatePDF(reportData: List) + +generateCSV(reportData: List) + } + } + Admin --> User : manages + Admin --> Report : generates + `; + + imgSnapshotTest(diagramDefinition); + }); }); diff --git a/demos/classchart.html b/demos/classchart.html index f04fa5b5f9..980ea5098d 100644 --- a/demos/classchart.html +++ b/demos/classchart.html @@ -159,30 +159,87 @@

Class diagram demos

class People List~List~Person~~
-
     classDiagram
-      A1 --> B1
-      namespace A {
-        class A1 {
-          +foo : string
+      namespace Company.Project.Module {
+        class GenericClass~T~ {
+          +addItem(item: T)
+          +getItem() T
+        }
+      }
+    
+
+
+    classDiagram
+      namespace Company.Project.Module.SubModule {
+        class Report {
+          +generatePDF(data: List)
+          +generateCSV(data: List)
         }
-        class A2 {
-          +bar : int
+      }
+      namespace Company.Project.Module {
+        class Admin {
+          +generateReport()
         }
       }
-      namespace B {
-        class B1 {
-          +foo : bool
+      Admin --> Report : generates
+    
+
+    classDiagram
+      namespace Company.Project.Module {
+        class User {
+          +login(username: String, password: String)
+          +logout()
+        }
+        class Admin {
+          +addUser(user: User)
+          +removeUser(user: User)
+          +generateReport()
         }
-        class B2 {
-          +bar : float
+        class Report {
+          +generatePDF(reportData: List)
+          +generateCSV(reportData: List)
         }
       }
-      A2 --> B2
+      Admin --> User : manages
+      Admin --> Report : generates
     

- +
+    classDiagram
+      namespace Shapes {
+        class Shape {
+          +calculateArea() double
+        }
+        class Circle {
+          +double radius
+        }
+        class Square {
+          +double side
+        }
+      }
+      
+      Shape <|-- Circle
+      Shape <|-- Square
+      
+      namespace Vehicles {
+        class Vehicle {
+          +String brand
+        }
+        class Car {
+          +int horsepower
+        }
+        class Bike {
+          +boolean hasGears
+        }
+      }
+      
+      Vehicle <|-- Car
+      Vehicle <|-- Bike
+      Car --> Circle : "Logo Shape"
+      Bike --> Square : "Logo Shape"
+                  
+