Merge pull request #3923 from tomperr/feature/3036_group_style_definition

feat(flowchart): add classDef style group definition

demos/flowchart.html

@@ -1505,6 +1505,34 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    graph TD
+      A([Start]) ==> B[Step 1]
+      B ==> C{Flow 1}
+      C -- Choice 1.1 --> D[Step 2.1]
+      C -- Choice 1.3 --> I[Step 2.3]
+      C == Choice 1.2 ==> E[Step 2.2]
+      D --> F{Flow 2}
+      E ==> F{Flow 2}
+      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
+      H[Feedback node] ==> B[Step 1]
+      F{Flow 2} == Choice 2.2 ==> G((Finish))
+      
+      linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
+
+      classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
+      classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px      
+      classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
+      classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
+
+      class A start_node;
+      class B,C,E,F,H active_node;
+      class D unactive_node;
+      class G finish_node;
+      class I bugged_node
+    </pre>
+    <hr />
+
     <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
     <script type="module">

docs/syntax/flowchart.md

@@ -919,6 +919,10 @@ In the example below the style defined in the linkStyle statement will belong to
 
     linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 
+It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
+
+    linkStyle 1,2,7 color:blue;
+
 ### Styling line curves
 
 It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
@@ -957,10 +961,14 @@ flowchart LR
 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.
 
-a class definition looks like the example below:
+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;
+
 Attachment of a class to a node is done as per below:
 
         class nodeId1 className;

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

@@ -208,21 +208,22 @@ export const updateLink = function (positions, style) {
   });
 };
 
-export const addClass = function (id, style) {
+export const addClass = function (ids, style) {
-  if (classes[id] === undefined) {
+  ids.split(',').forEach(function (id) {
-    classes[id] = { id: id, styles: [], textStyles: [] };
+    if (classes[id] === undefined) {
-  }
+      classes[id] = { id, styles: [], textStyles: [] };
+    }
 
-  if (style !== undefined && style !== null) {
+    if (style !== undefined && style !== null) {
-    style.forEach(function (s) {
+      style.forEach(function (s) {
-      if (s.match('color')) {
+        if (s.match('color')) {
-        const newStyle1 = s.replace('fill', 'bgFill');
+          const newStyle = s.replace('fill', 'bgFill').replace('color', 'fill');
-        const newStyle2 = newStyle1.replace('color', 'fill');
+          classes[id].textStyles.push(newStyle);
-        classes[id].textStyles.push(newStyle2);
+        }
-      }
+        classes[id].styles.push(s);
-      classes[id].styles.push(s);
+      });
-    });
+    }
-  }
+  });
 };
 
 /**

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

@@ -41,3 +41,26 @@ describe('flow db subgraphs', () => {
     });
   });
 });
+
+describe('flow db addClass', () => {
+  beforeEach(() => {
+    flowDb.clear();
+  });
+  it('should detect many classes', () => {
+    flowDb.addClass('a,b', ['stroke-width: 8px']);
+    const classes = flowDb.getClasses();
+
+    expect(classes.hasOwnProperty('a')).toBe(true);
+    expect(classes.hasOwnProperty('b')).toBe(true);
+    expect(classes['a']['styles']).toEqual(['stroke-width: 8px']);
+    expect(classes['b']['styles']).toEqual(['stroke-width: 8px']);
+  });
+
+  it('should detect single class', () => {
+    flowDb.addClass('a', ['stroke-width: 8px']);
+    const classes = flowDb.getClasses();
+
+    expect(classes.hasOwnProperty('a')).toBe(true);
+    expect(classes['a']['styles']).toEqual(['stroke-width: 8px']);
+  });
+});

packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js

@@ -113,6 +113,22 @@ describe('[Style] when parsing', () => {
     expect(classes['exClass'].styles[1]).toBe('border:1px solid red');
   });
 
+  it('should be possible to declare multiple classes', function () {
+    const res = flow.parser.parse(
+      'graph TD;classDef firstClass,secondClass background:#bbb,border:1px solid red;'
+    );
+
+    const classes = flow.parser.yy.getClasses();
+
+    expect(classes['firstClass'].styles.length).toBe(2);
+    expect(classes['firstClass'].styles[0]).toBe('background:#bbb');
+    expect(classes['firstClass'].styles[1]).toBe('border:1px solid red');
+
+    expect(classes['secondClass'].styles.length).toBe(2);
+    expect(classes['secondClass'].styles[0]).toBe('background:#bbb');
+    expect(classes['secondClass'].styles[1]).toBe('border:1px solid red');
+  });
+
   it('should be possible to declare a class with a dot in the style', function () {
     const res = flow.parser.parse(
       'graph TD;classDef exClass background:#bbb,border:1.5px solid red;'

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

@@ -605,6 +605,12 @@ In the example below the style defined in the linkStyle statement will belong to
 linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 ```
 
+It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
+
+```
+linkStyle 1,2,7 color:blue;
+```
+
 ### Styling line curves
 
 It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
@@ -638,12 +644,18 @@ flowchart LR
 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.
 
-a class definition looks like the example below:
+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;
+```
+
 Attachment of a class to a node is done as per below:
 
 ```