feat(flowchart): add classDef group definition

enable to add styles to many classDef in a single statement

demos/flowchart.html

@@ -1505,6 +1505,34 @@ title: What to buy
     </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 src="./mermaid.js"></script>

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

@@ -202,21 +202,23 @@ export const updateLink = function (positions, style) {
   });
 };
 
-export const addClass = function (id, style) {
-  if (classes[id] === undefined) {
-    classes[id] = { id: id, styles: [], textStyles: [] };
-  }
+export const addClass = function (ids, style) {
+  ids.split(',').forEach(function (_id) {
+    if (classes[_id] === undefined) {
+      classes[_id] = { id: _id, styles: [], textStyles: [] };
+    }
 
-  if (style !== undefined && style !== null) {
-    style.forEach(function (s) {
-      if (s.match('color')) {
-        const newStyle1 = s.replace('fill', 'bgFill');
-        const newStyle2 = newStyle1.replace('color', 'fill');
-        classes[id].textStyles.push(newStyle2);
-      }
-      classes[id].styles.push(s);
-    });
-  }
+    if (style !== undefined && style !== null) {
+      style.forEach(function (s) {
+        if (s.match('color')) {
+          const newStyle1 = s.replace('fill', 'bgFill');
+          const newStyle2 = newStyle1.replace('color', 'fill');
+          classes[_id].textStyles.push(newStyle2);
+        }
+        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']);
+  });
+});