Merge pull request #3644 from weedySeaDragon/feat/1952-state--classDe…

…f-states feat: [State diagram] Add classDefs and classes to states
mermaid-js · Oct 26, 2022 · fb9127e · fb9127e
2 parents 10ba3b6 + 599d035
commit fb9127e
Show file tree

Hide file tree

Showing 13 changed files with 1,211 additions and 259 deletions.
diff --git a/cSpell.json b/cSpell.json
@@ -62,7 +62,8 @@
     "flatmap",
     "Kaufmann",
     "viewports",
-    "edgechromium"
+    "edgechromium",
+    "statediagram"
   ],
   "patterns": [
     {

diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -521,4 +521,42 @@ stateDiagram-v2
       { logLevel: 0, fontFamily: 'courier' }
     );
   });
+
+  describe('classDefs and applying classes', () => {
+    it('v2 states can have a class applied', () => {
+      imgSnapshotTest(
+        `
+          stateDiagram-v2
+          [*] --> A
+          A --> B: test({ foo#colon; 'far' })
+          B --> [*]
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
+            class B badBadEvent
+           `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
+    it('v2 can have multiple classes applied to multiple states', () => {
+      imgSnapshotTest(
+        `
+          stateDiagram-v2
+          classDef notMoving fill:white
+          classDef movement font-style:italic;
+          classDef badBadEvent fill:#f00,color:white,font-weight:bold
+    
+          [*] --> Still
+          Still --> [*]
+          Still --> Moving
+          Moving --> Still
+          Moving --> Crash
+          Crash --> [*]
+    
+          class Still notMoving
+          class Moving, Crash movement
+          class Crash badBadEvent
+        `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
+  });
 });
diff --git a/demos/state.html b/demos/state.html
@@ -15,6 +15,7 @@
 
   <body>
     <h1>State diagram demos</h1>
+    <h2>Very simple showing change from State1 to State2</h2>
     <pre class="mermaid">
 		stateDiagram
 		  accTitle: This is the accessible title
@@ -24,59 +25,126 @@ <h1>State diagram demos</h1>
 
     <hr />
 
+    <h2>This has classDef statements to apply style classes to specific states</h2>
+    <h4>Here are the <code>classDef</code> statements:</h4>
+    <p>
+      <code>
+        classDef notMoving fill:white<br />
+        classDef movement font-style:italic;<br />
+        classDef badBadEvent fill:#f00,color:white,font-weight:bold<br />
+      </code>
+    </p>
+    <h4>And these are how they are applied:</h4>
+    <p>
+      <code>
+        class Still notMoving<br />
+        class Moving, Crash movement<br />
+        class Crash badBadEvent<br />
+      </code>
+    </p>
     <pre class="mermaid">
 		stateDiagram-v2
 		  accTitle: This is the accessible title
       accDescr: This is an accessible description
+
+      classDef notMoving fill:white
+      classDef movement font-style:italic;
+      classDef badBadEvent fill:#f00,color:white,font-weight:bold
+
       [*] --> Still
       Still --> [*]
       Still --> Moving
       Moving --> Still
       Moving --> Crash
       Crash --> [*]
+
+      class Still notMoving
+      class Moving, Crash movement
+      class Crash badBadEvent
     </pre>
 
     <hr />
 
     <pre class="mermaid">
-    stateDiagram
+    stateDiagram-v2
       accTitle: very very simple state
     accDescr: This is a state diagram showing one state
     State1
     </pre>
+    <hr />
 
+    <h2>You can label the relationships</h2>
+    <pre class="mermaid">
+    stateDiagram-v2
+    [*] --> State1
+    State1 --> State2 : Transition 1
+    State1 --> State3 : Transition 2
+    State1 --> State4 : Transition 3
+    State1 --> [*]
+    </pre>
     <hr />
 
+    <h2>This shows Composite states</h2>
     <pre class="mermaid">
-    stateDiagram
+    stateDiagram-v2
     [*] --> First
+    First --> Second
+    First --> Third
+
     state First {
-    [*] --> second
-    second --> [*]
+        [*] --> 1st
+        1st --> [*]
+    }
+    state Second {
+        [*] --> 2nd
+        2nd --> [*]
+    }
+    state Third {
+        [*] --> 3rd
+        3rd --> [*]
     }
     </pre>
+    <hr />
+
+    <h2>Compsite states can link to themselves</h2>
     <pre class="mermaid">
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-    Important information! You can write
-    notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
+      stateDiagram-v2
+            state Active {
+              Idle
+            }
+            Inactive --> Idle: ACT
+            Active --> Active: LOG
     </pre>
+    <hr />
+
+    <h2>transition labels can span multiple lines using "br" tags or \n</h2>
     <pre class="mermaid">
-    stateDiagram
-    State1
-    note right of State1
-    Line1<br>Line2<br />Line3<br />Line4<br />Line5
-    end note
+      stateDiagram-v2
+      [*] --> S1
+      S1 --> S2: This long line uses a br tag<br/>to create multiple<br/>lines.
+      S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
+
+    </pre>
+    <hr />
+
+    <h2>You can add Notes</h2>
+    <pre class="mermaid">
+    stateDiagram-v2
+      direction LR
+      State1: A state with a note
+      note right of State1
+        Important information!<br />You can write notes.<br/>And\nthey\ncan\nbe\nmulti-\nline.
+      end note
+      State1 --> State2
+      note left of State2 : Notes can be to the left of a state\n(like this one).
+      note right of State2 : Notes can be to the right of a state\n(like this one).
     </pre>
+    <hr />
 
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'base',
+        theme: 'default',
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

diff --git a/docs/index.html b/docs/index.html
@@ -151,8 +151,9 @@
             hook.afterEach(function (html, next) {
               next(html);
               (async () => {
-                while (!window.hasOwnProperty('monaco'))
+                while (!window.hasOwnProperty('monaco')) {
                   await new Promise((resolve) => setTimeout(resolve, 1000));
+                }
                 colorizeEverything(html).then(
                   (newHTML) =>
                     (document.querySelector('article.markdown-section').innerHTML = newHTML)
@@ -170,7 +171,9 @@
         startOnLoad: false,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
       };
-      if (isDarkMode) conf.theme = 'dark';
+      if (isDarkMode) {
+        conf.theme = 'dark';
+      }
       mermaid.initialize(conf);
     </script>
     <script>