Merge branch 'develop' into sidv/optimizeSize

* develop: (21 commits) chore: docs:build chore: docs:build tiny fix and change: "The/y cannot" -> "Cannot..." remove 'horz' from cSpell.json update demos/state.html to includ examples; formatting add 'horz' to cSpell (in pieDetector.ts commented out barChart work) refine - what is not done yet remove 'horz' from cSpell.json Revert "Added pie" chore: Fix cSpell in pieRenderer update demos/state.html to includ examples; formatting add 'horz' to cSpell (in pieDetector.ts commented out barChart work) refine - what is not done yet remove console stmt #3831 Re-enabling themes for er diagrams #3835 Adding path to list of elements to be styled #3882 fix for issues with mindmaps with only a single node Integrations added - Visual Studio Code [Polyglot Interactive Notebooks] Fix typos #3778 Adding a hexgon shape ...
mermaid-js · Nov 22, 2022 · 9da29da · 9da29da
2 parents 9b01a07 + f2ed255
commit 9da29da
Show file tree

Hide file tree

Showing 29 changed files with 573 additions and 101 deletions.
diff --git a/demos/state.html b/demos/state.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -33,8 +33,9 @@ <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 />
+        classDef movement font-style:italic<br />
+        classDef badBadEvent
+        fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br />
       </code>
     </p>
     <h4>And these are how they are applied:</h4>
@@ -49,15 +50,17 @@ <h4>And these are how they are applied:</h4>
 ---
 title: Very simple diagram
 ---
-		stateDiagram-v2
+		stateDiagram
+      direction TB
+
 		  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
+      classDef movement font-style:italic
+      classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 
-      [*] --> Still
+      [*]--> Still
       Still --> [*]
       Still --> Moving
       Moving --> Still
@@ -67,10 +70,57 @@ <h4>And these are how they are applied:</h4>
       class Still notMoving
       class Moving, Crash movement
       class Crash badBadEvent
+      class end badBadEvent
     </pre>
 
     <hr />
 
+    <h2>Here is a diagram that uses the ::: operator to apply styles to 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,stroke-width:2px,stroke:yellow<br />
+      </code>
+    </p>
+    <h4>And these are how they are applied:</h4>
+    <p>
+      <code>
+        [*] --> Still:::notMoving<br />
+        ...<br />
+        Still --> Moving:::movement<br />
+        ...<br />
+        Moving --> Crash:::movement<br />
+        Crash:::badBadEvent --> [*]<br />
+      </code>
+    </p>
+    <p>
+      Note that both the starting state and the end state have styles applied:<br />
+      The start state has the <i>start</i> classDef style<br />and the end state has the
+      <i>stop</i> classDef style applied.
+    </p>
+    <pre class="mermaid">
+    stateDiagram
+      direction TB
+
+		  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,stroke-width:2px,stroke:yellow
+
+      [*] --> Still:::notMoving
+      Still --> [*]
+      Still --> Moving:::movement
+      Moving --> Still
+      Moving --> Crash:::movement
+      Crash:::badBadEvent --> [*]
+    </pre>
+    <hr />
+
     <pre class="mermaid">
     stateDiagram-v2
       accTitle: very very simple state
@@ -79,6 +129,20 @@ <h4>And these are how they are applied:</h4>
     </pre>
     <hr />
 
+    <h2>States with spaces in them</h2>
+    <pre class="mermaid">
+      stateDiagram
+        classDef yourState font-style:italic,font-weight:bold,fill:white
+
+        yswsii: Your state with spaces in it
+        [*] --> yswsii:::yourState
+        [*] --> SomeOtherState
+        SomeOtherState --> YetAnotherState
+        yswsii --> YetAnotherState
+        YetAnotherState --> [*]
+    </pre>
+    <hr />
+
     <h2>You can label the relationships</h2>
     <pre class="mermaid">
     stateDiagram-v2
@@ -127,7 +191,7 @@ <h2>transition labels can span multiple lines using "br" tags or \n</h2>
     <pre class="mermaid">
       stateDiagram-v2
       [*] --> S1
-      S1 --> S2: This long line uses a br tag<br/>to create multiple<br/>lines.
+      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>
@@ -139,7 +203,7 @@ <h2>You can add Notes</h2>
       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.
+        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).

diff --git a/docs/config/usage.md b/docs/config/usage.md
@@ -348,7 +348,7 @@ on what kind of integration you use.
 
 ## Using the mermaid object
 
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
 approach are:
 
 - mermaid.startOnLoad

diff --git a/docs/misc/integrations.md b/docs/misc/integrations.md
@@ -39,6 +39,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
 - [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 - [mermerd](https://github.com/KarnerTh/mermerd)
+- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
 
 ## CRM/ERP/Similar
 

diff --git a/docs/syntax/c4c.md b/docs/syntax/c4c.md
@@ -567,7 +567,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
         Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
     }
 
-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
         Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
             Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
         }
@@ -619,7 +619,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
         Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
     }
 
-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
         Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
             Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
         }

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
@@ -571,7 +571,7 @@ You would define these actions on a separate line after all classes have been de
 
 ## Notes
 
-It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
 
 ### Examples
 

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
@@ -992,7 +992,7 @@ flowchart LR
 
 ## Configuration...
 
-Is it possible to adjust the width of the rendered flowchart.
+It is possible to adjust the width of the rendered flowchart.
 
 This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
 mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.

diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
@@ -21,7 +21,7 @@ mindmap
       Popularisation
         British popular psychology author Tony Buzan
     Research
-      On effectivness<br/>and eatures
+      On effectiveness<br/>and features
       On Automatic creation
         Uses
             Creative techniques
@@ -42,7 +42,7 @@ mindmap
       Popularisation
         British popular psychology author Tony Buzan
     Research
-      On effectivness<br/>and eatures
+      On effectiveness<br/>and features
       On Automatic creation
         Uses
             Creative techniques
@@ -152,6 +152,18 @@ mindmap
     id)I am a cloud(
 ```
 
+### Hexagon
+
+```mermaid-example
+mindmap
+    id{{I am a hexagon}}
+```
+
+```mermaid
+mindmap
+    id{{I am a hexagon}}
+```
+
 ### Default
 
 ```mermaid-example

diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
@@ -35,7 +35,7 @@ Drawing a pie chart is really simple in mermaid.
 - Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
-  - Followed by `positive numeric value` (supported upto two decimal places)
+  - Followed by `positive numeric value` (supported up to two decimal places)
 
 \[pie] \[showData] (OPTIONAL)
 \[title] \[titlevalue] (OPTIONAL)

diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
@@ -727,7 +727,7 @@ text.actor {
 
 ## Configuration
 
-Is it possible to adjust the margins for rendering the sequence diagram.
+It is possible to adjust the margins for rendering the sequence diagram.
 
 This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
 How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.