Merge branch 'mermaid-js:develop' into add-pie-langium-parser

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

@@ -571,4 +571,14 @@ class C13["With Città foreign language"]
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
+  it('should render a simple class diagram with style definition', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        style Class10 fill:#f9f,stroke:#333,stroke-width:4px
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.18.2-alpine3.18
+    image: node:18.19.0-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid

docs/syntax/classDiagram.md

@@ -240,9 +240,9 @@ class BankAccount{
 
 #### Generic Types
 
-Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
+Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
 
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
 
 ```mermaid-example
 classDiagram
@@ -766,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v\<MERMAID_RELEASE_VERSION>+)
 
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. 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.
+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.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### 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.
 
 ```html
 <style>

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.11.0",
+  "packageManager": "pnpm@8.12.0",
   "keywords": [
     "diagram",
     "markdown",
@@ -125,7 +125,7 @@
     "vitest": "^0.34.0"
   },
   "volta": {
-    "node": "18.18.2"
+    "node": "18.19.0"
   },
   "nyc": {
     "report-dir": "coverage/cypress"

packages/mermaid/src/config.type.ts

@@ -68,6 +68,11 @@ export interface MermaidConfig {
    * The maximum allowed size of the users text diagram
    */
   maxTextSize?: number;
+  /**
+   * Defines the maximum number of edges that can be drawn in a graph.
+   *
+   */
+  maxEdges?: number;
   darkMode?: boolean;
   htmlLabels?: boolean;
   /**

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
   });
 
   rect
+    .attr('style', node.style)
     .attr('class', 'outer title-state')
     .attr('x', -maxWidth / 2 - halfPadding)
     .attr('y', -(maxHeight / 2) - halfPadding)

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

@@ -84,6 +84,7 @@ export const addClass = function (_id: string) {
     methods: [],
     members: [],
     annotations: [],
+    styles: [],
     domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
   } as ClassNode;
 
@@ -214,7 +215,7 @@ export const cleanupLabel = function (label: string) {
 };
 
 /**
- * Called by parser when a special node is found, e.g. a clickable element.
+ * Called by parser when assigning cssClass to a class
  *
  * @param ids - Comma separated list of ids
  * @param className - Class to add
@@ -456,6 +457,20 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
   }
 };
 
+export const setCssStyle = function (id: string, styles: string[]) {
+  const thisClass = classes[id];
+  if (!styles || !thisClass) {
+    return;
+  }
+  for (const s of styles) {
+    if (s.includes(',')) {
+      thisClass.styles.push(...s.split(','));
+    } else {
+      thisClass.styles.push(s);
+    }
+  }
+};
+
 export default {
   setAccTitle,
   getAccTitle,
@@ -492,4 +507,5 @@ export default {
   addClassesToNamespace,
   getNamespace,
   getNamespaces,
+  setCssStyle,
 };

packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js

@@ -56,5 +56,18 @@ describe('class diagram, ', function () {
       expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
       expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
     });
+    it('should be possible to apply a style to an individual node', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class01\n class Class02\n style Class01 fill:#f9f,stroke:#333,stroke-width:4px';
+
+      parser.parse(str);
+
+      const styleElements = parser.yy.getClass('Class01').styles;
+
+      expect(styleElements[0]).toBe('fill:#f9f');
+      expect(styleElements[1]).toBe('stroke:#333');
+      expect(styleElements[2]).toBe('stroke-width:4px');
+    });
   });
 });

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

@@ -409,6 +409,7 @@ class C13["With Città foreign language"]
             },
           ],
           "methods": [],
+          "styles": [],
           "type": "",
         }
       `);

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -104,7 +104,7 @@ export const addClasses = function (
        */
       const cssClassStr = vertex.cssClasses.join(' ');
 
-      const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
+      const styles = getStylesFromArray(vertex.styles);
 
       // Use vertex id as text in the box if no text is provided by the graph definition
       const vertexText = vertex.label ?? vertex.id;

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

@@ -10,6 +10,7 @@ export interface ClassNode {
   members: ClassMember[];
   annotations: string[];
   domId: string;
+  styles: string[];
   parent?: string;
   link?: string;
   linkTarget?: string;

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

@@ -60,6 +60,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <string>["]                     this.popState();
 <string>[^"]*                   return "STR";
 <*>["]                          this.begin("string");
+"style"                         return 'STYLE';
 
 <INITIAL,namespace>"namespace"  { this.begin('namespace'); return 'NAMESPACE'; }
 <namespace>\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
@@ -127,6 +128,10 @@ line was introduced with 'click'.
 <*>\-                           return 'MINUS';
 <*>"."                          return 'DOT';
 <*>\+                           return 'PLUS';
+":"                             return 'COLON';
+","                             return 'COMMA';
+\#                              return 'BRKT';
+"#"                             return 'BRKT';
 <*>\%                           return 'PCT';
 <*>"="                          return 'EQUALS';
 <*>\=                           return 'EQUALS';
@@ -198,6 +203,7 @@ line was introduced with 'click'.
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
                                 return 'UNICODE_TEXT';
 <*>\s                           return 'SPACE';
+\s                              return 'SPACE';
 <*><<EOF>>                      return 'EOF';
 
 /lex
@@ -254,6 +260,7 @@ statement
     | memberStatement
     | annotationStatement
     | clickStatement
+    | styleStatement
     | cssClassStatement
     | noteStatement
     | direction
@@ -365,10 +372,26 @@ clickStatement
     | CLICK className HREF STR STR LINK_TARGET          {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
     ;
 
+styleStatement
+    :STYLE ALPHA stylesOpt                              {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
+    ;
+
 cssClassStatement
-    : CSSCLASS STR alphaNumToken  {yy.setCssClass($2, $3);}
+    : CSSCLASS STR ALPHA                            {yy.setCssClass($2, $3);}
+    ;
+
+stylesOpt
+    : style {$$ = [$style]}
+    | stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
     ;
 
+style
+    : styleComponent
+    | style styleComponent  {$$ = $style + $styleComponent;}
+    ;
+
+styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | STYLE | PCT | LABEL;
+
 commentToken   : textToken | graphCodeTokens ;
 
 textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;

packages/mermaid/src/diagrams/flowchart/flowDb.js

@@ -12,7 +12,6 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import errorDiagram from '../error/errorDiagram.js';
 
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
@@ -92,7 +91,6 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
       txt = txt.substring(1, txt.length - 1);
     }
-
     vertices[id].text = txt;
   } else {
     if (vertices[id].text === undefined) {
@@ -160,11 +158,17 @@ export const addSingleLink = function (_start, _end, type) {
   if (edge?.length > 10) {
     edge.length = 10;
   }
-  if (edges.length < 280) {
+  if (edges.length < (config.maxEdges ?? 500)) {
     log.info('abc78 pushing edge...');
     edges.push(edge);
   } else {
-    throw new Error('Too many edges');
+    throw new Error(
+      `Edge limit exceeded. ${edges.length} edges found, but the limit is ${config.maxEdges}.
+
+Initialize mermaid with maxEdges set to a higher number to allow more edges. 
+You cannot set this config via configuration inside the diagram as it is a secure config. 
+You have to call mermaid.initialize.`
+    );
   }
 };
 export const addLink = function (_start, _end, type) {
@@ -460,6 +464,7 @@ export const clear = function (ver = 'gen-1') {
   tooltips = {};
   firstGraphFlag = true;
   version = ver;
+  config = getConfig();
   commonClear();
 };
 export const setGen = (ver) => {

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -143,9 +143,9 @@ class BankAccount{
 
 #### Generic Types
 
-Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
+Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
 
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
 
 ```mermaid-example
 classDiagram
@@ -518,9 +518,22 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v<MERMAID_RELEASE_VERSION>+)
 
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. 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.
+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.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### 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.
 
 ```html
 <style>

packages/mermaid/src/schemas/config.schema.yaml

@@ -73,6 +73,12 @@ properties:
     description: The maximum allowed size of the users text diagram
     type: number
     default: 50000
+  maxEdges:
+    description: |
+      Defines the maximum number of edges that can be drawn in a graph.
+    type: integer
+    default: 500
+    minimum: 0
   darkMode:
     type: boolean
     default: false
@@ -151,7 +157,7 @@ properties:
       in the current `currentConfig`.
 
       This prevents malicious graph directives from overriding a site's default security.
-    default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+    default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'maxEdges']
     type: array
     items:
       type: string