Merge pull request #5880 from yari-dewalt/update-class-diagram

Update class diagram to v3 using new renderer

docs/config/setup/interfaces/mermaid.LayoutData.md

@@ -20,7 +20,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L125)
+[packages/mermaid/src/rendering-util/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L128)
 
 ---
 
@@ -30,7 +30,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L124)
+[packages/mermaid/src/rendering-util/types.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L127)
 
 ---
 
@@ -40,4 +40,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L123)
+[packages/mermaid/src/rendering-util/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L126)

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267)
+[packages/mermaid/src/defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)
 
 ---
 

docs/syntax/classDiagram.md

@@ -427,6 +427,51 @@ And `Link` can be one of:
 | --   | Solid       |
 | ..   | Dashed      |
 
+### Lollipop Interfaces
+
+Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:
+
+- `bar ()-- foo`
+- `foo --() bar`
+
+The interface (bar) with the lollipop connects to the class (foo).
+
+Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.
+
+```mermaid-example
+classDiagram
+  bar ()-- foo
+```
+
+```mermaid
+classDiagram
+  bar ()-- foo
+```
+
+```mermaid-example
+classDiagram
+  class Class01 {
+    int amount
+    draw()
+  }
+  Class01 --() bar
+  Class02 --() bar
+
+  foo ()-- Class01
+```
+
+```mermaid
+classDiagram
+  class Class01 {
+    int amount
+    draw()
+  }
+  Class01 --() bar
+  Class02 --() bar
+
+  foo ()-- Class01
+```
+
 ## Define Namespace
 
 A namespace groups classes.
@@ -776,10 +821,12 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node (v10.7.0+)
+### Styling a node
 
 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 
+Note that notes and namespaces cannot be styled individually but do support themes.
+
 ```mermaid-example
 classDiagram
   class Animal
@@ -799,172 +846,147 @@ classDiagram
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
-should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+should have a different look.
 
-```html
-<style>
-  .styleClass > rect {
-    fill: #ff0000;
-    stroke: #ffff00;
-    stroke-width: 4px;
-  }
-</style>
+A class definition looks like the example below:
+
+```
+classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+Also, it is possible to define style to multiple classes in one statement:
+
+```
+classDef firstClassName,secondClassName font-size:12pt;
 ```
 
-Then attaching that class to a specific node:
+Attachment of a class to a node is done as per below:
 
 ```
-    cssClass "nodeId1" styleClass;
+cssClass "nodeId1" className;
 ```
 
 It is also possible to attach a class to a list of nodes in one statement:
 
 ```
-    cssClass "nodeId1,nodeId2" styleClass;
+cssClass "nodeId1,nodeId2" className;
 ```
 
 A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
 
 ```mermaid-example
 classDiagram
-    class Animal:::styleClass
+    class Animal:::someclass
+    classDef someclass fill:#f96
 ```
 
 ```mermaid
 classDiagram
-    class Animal:::styleClass
+    class Animal:::someclass
+    classDef someclass fill:#f96
 ```
 
 Or:
 
 ```mermaid-example
 classDiagram
-    class Animal:::styleClass {
+    class Animal:::someclass {
         -int sizeInFeet
         -canEat()
     }
+    classDef someclass fill:#f96
 ```
 
 ```mermaid
 classDiagram
-    class Animal:::styleClass {
+    class Animal:::someclass {
         -int sizeInFeet
         -canEat()
     }
+    classDef someclass fill:#f96
 ```
 
-?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
-
-?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
-
-### Default Styles
-
-The main styling of the class diagram is done with a preset number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss. The classes used here are described below:
+### Default class
 
-| Class              | Description                                                       |
-| ------------------ | ----------------------------------------------------------------- |
-| g.classGroup text  | Styles for general class text                                     |
-| classGroup .title  | Styles for general class title                                    |
-| g.classGroup rect  | Styles for class diagram rectangle                                |
-| g.classGroup line  | Styles for class diagram line                                     |
-| .classLabel .box   | Styles for class label box                                        |
-| .classLabel .label | Styles for class label text                                       |
-| composition        | Styles for composition arrow head and arrow line                  |
-| aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
-| dependency         | Styles for dependency arrow head and arrow line                   |
+If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
 
-#### Sample stylesheet
-
-```scss
-body {
-  background: white;
-}
+```
+classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
 
-g.classGroup text {
-  fill: $nodeBorder;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  font-size: 10px;
+```mermaid-example
+classDiagram
+  class Animal:::pink
+  class Mineral
 
-  .title {
-    font-weight: bolder;
-  }
-}
+  classDef default fill:#f96,color:red
+  classDef pink color:#f9f
+```
 
-g.classGroup rect {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-}
+```mermaid
+classDiagram
+  class Animal:::pink
+  class Mineral
 
-g.classGroup line {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
+  classDef default fill:#f96,color:red
+  classDef pink color:#f9f
+```
 
-.classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: $nodeBkg;
-  opacity: 0.5;
-}
+### CSS Classes
 
-.classLabel .label {
-  fill: $nodeBorder;
-  font-size: 10px;
-}
+It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
+below:
 
-.relation {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-  fill: none;
-}
+**Example style**
 
-@mixin composition {
-  fill: $nodeBorder;
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
+```html
+<style>
+  .styleClass > * > g {
+    fill: #ff0000;
+    stroke: #ffff00;
+    stroke-width: 4px;
+  }
+</style>
+```
 
-#compositionStart {
-  @include composition;
-}
+**Example definition**
 
-#compositionEnd {
-  @include composition;
-}
+```mermaid-example
+classDiagram
+    class Animal:::styleClass
+```
 
-@mixin aggregation {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
+```mermaid
+classDiagram
+    class Animal:::styleClass
+```
 
-#aggregationStart {
-  @include aggregation;
-}
+> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
 
-#aggregationEnd {
-  @include aggregation;
-}
+## Configuration
 
-#dependencyStart {
-  @include composition;
-}
+### Members Box
 
-#dependencyEnd {
-  @include composition;
-}
+It is possible to hide the empty members box of a class node.
 
-#extensionStart {
-  @include composition;
-}
+This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)
 
-#extensionEnd {
-  @include composition;
-}
+```mermaid-example
+---
+  config:
+    class:
+      hideEmptyMembersBox: true
+---
+classDiagram
+  class Duck
 ```
 
-## Configuration
-
-`Coming soon!`
+```mermaid
+---
+  config:
+    class:
+      hideEmptyMembersBox: true
+---
+classDiagram
+  class Duck
+```

docs/syntax/flowchart.md

@@ -319,6 +319,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
 | **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
 | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
 | Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
+| Class Box                         | Class Box              | `classBox`     | Class Box                      | `class-box`                                                      |
 | Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
 | Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
 | Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |

packages/mermaid-layout-elk/src/render.ts

@@ -149,6 +149,7 @@ export const render = async (
             const clusterNode = JSON.parse(JSON.stringify(node));
             clusterNode.x = node.offset.posX + node.width / 2;
             clusterNode.y = node.offset.posY + node.height / 2;
+            clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
             await insertCluster(subgraphEl, clusterNode);
 
             log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
@@ -275,6 +276,8 @@ export const render = async (
         interpolate: undefined;
         style: undefined;
         labelType: any;
+        startLabelRight?: string;
+        endLabelLeft?: string;
       }) {
         // Identify Link
         const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
@@ -328,6 +331,9 @@ export const render = async (
         let style = '';
         let labelStyle = '';
 
+        edgeData.startLabelRight = edge.startLabelRight;
+        edgeData.endLabelLeft = edge.endLabelLeft;
+
         switch (edge.stroke) {
           case 'normal':
             style = 'fill:none;';

packages/mermaid/scripts/docs.spec.ts

@@ -172,6 +172,7 @@ This Markdown should be kept.
         "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
         | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
         | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
+        | Class Box                         | Class Box              | \`classBox\`     | Class Box                      | \`class-box\`                                                      |
         | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
         | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
         | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |