Merge branch 'develop' into feature/1433_title_support

.github/ISSUE_TEMPLATE/bug_report.md

@@ -12,32 +12,35 @@ A clear and concise description of what the bug is.
 **To Reproduce**
 Steps to reproduce the behavior:
 
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+1. Go to the [live editor](https://mermaid.live).
+2. Enter the below code sample.
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+**Code Sample**
+Live version: A link to https://mermaid.live/edit#…
+
+```
+graph TD;
+…
+```
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 
-**Code Sample**
-If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
+**Expected behavior**
+A clear and concise description of what you expected to happen.
 
 **Desktop (please complete the following information):**
 
 - OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
+- Browser: [e.g. chrome, safari]
+- Version: [e.g. 22]
 
 **Smartphone (please complete the following information):**
 
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
-- Browser [e.g. stock browser, safari]
-- Version [e.g. 22]
+- Browser: [e.g. stock browser, safari]
+- Version: [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

cSpell.json

@@ -62,7 +62,8 @@
     "flatmap",
     "Kaufmann",
     "viewports",
-    "edgechromium"
+    "edgechromium",
+    "statediagram"
   ],
   "patterns": [
     {

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

@@ -479,6 +479,24 @@ describe('Class diagram V2', () => {
     cy.get('svg');
   });
 
+  it('18: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+        class Class10 {
+          <<service>>
+          int id
+          size()
+        }
+        note for Class10 "Cool class\nI said it's very cool class!"
+
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+    cy.get('svg');
+  });
+
   it('1433: should render a simple class with a title', () => {
     imgSnapshotTest(
       `classDiagram-v2

cypress/integration/rendering/classDiagram.spec.js

@@ -407,4 +407,21 @@ describe('Class diagram', () => {
   //      // expect(svg).to.not.have.attr('style');
   //     });
   // });
+
+  it('19: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      note "I love this diagram!\nDo you love it?"
+      class Class10 {
+        <<service>>
+        int id
+        size()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -256,6 +256,24 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
+  it('should render entities with aliases', () => {
+    renderGraph(
+      `
+    erDiagram
+      T1 one or zero to one or more T2 : test
+      T2 one or many optionally to zero or one T3 : test
+      T3 zero or more to zero or many T4 : test
+      T4 many(0) to many(1) T5 : test
+      T5 many optionally to one T6 : test
+      T6 only one optionally to only one T1 : test
+      T4 0+ to 1+ T6 : test
+      T1 1 to 1 T3 : test
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
   it('1433: should render a simple ER diagram with a title', () => {
     imgSnapshotTest(
       `erDiagram

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

@@ -522,6 +522,44 @@ stateDiagram-v2
     );
   });
 
+  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' }
+      );
+    });
+  });
+
   it('1433: should render a simple state diagram with a title', () => {
     imgSnapshotTest(
       `stateDiagram-v2

cypress/platform/knsv2.html

@@ -56,21 +56,10 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+flowchart TD
+    A --> B
+    B --> C
+    A --> C
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
@@ -93,8 +82,14 @@
       Pen and paper
       Mermaid
         </pre>
-    <pre id="diagram" class="mermaid2">
-      example-diagram
+    <pre id="diagram" class="mermaid">
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
     </pre>
 
     <!-- <div id="cy"></div> -->
@@ -111,13 +106,18 @@
         theme: 'base',
         startOnLoad: true,
         logLevel: 0,
-        // basePath: './packages/',
-        // themeVariables: { darkMode: true },
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
         lazyLoadedDiagrams: [
           './mermaid-mindmap-detector.esm.mjs',
           './mermaid-example-diagram-detector.esm.mjs',
         ],
-        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');

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
 		  -title Example state diagram
@@ -25,60 +26,127 @@ <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
 		  -title Example state diagram
 		  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',

docs/8.6.0_docs.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/8.6.0_docs.md](../packages/mermaid/src/docs/8.6.0_docs.md).
 
 # Version 8.6.0 Changes