Merge branch 'develop' into UpdateClasstoMatchUmlSpecs

* develop: (56 commits) chore: Fix unit tests chore(deps): update all patch dependencies chore: Update docs Update docs New Mermaid Live Editor for Confluence Cloud (#4814) Update link to Discourse theme component (#4811) Update flowchart.md (#4810) chore: remove unneeded `CommomDB` chore: Update docs "CSS" instead of "css" in flowchart.md (#4797) Update CONTRIBUTING.md Update CONTRIBUTING.md fix: typos (#4801) chore: Align with convention chore: Add JSDoc to apply in sequenceDB refactor: Tidy up direction handling chore: Fix flowchart arrow chore: Add test to verify activate chore: Update tests snapshot fix: #4691 Align arrowheads properly in sequenceDiagram ...
mermaid-js · Sep 5, 2023 · f1a6ef1 · f1a6ef1
2 parents 67ff83a + ebaabbf
commit f1a6ef1
Show file tree

Hide file tree

Showing 77 changed files with 1,680 additions and 935 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -71,6 +71,8 @@ Documentation is necessary for all non bugfix/refactoring changes.
 
 Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
 
-**_DO NOT CHANGE FILES IN `/docs`_**
+**_DO NOT CHANGE FILES IN `/docs` MANUALLY_**
+
+The `/docs` folder will be rebuilt and committed as part of a pre-commit hook.
 
 [Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
diff --git a/cSpell.json b/cSpell.json
@@ -38,7 +38,10 @@
     "docsy",
     "doku",
     "dompurify",
+    "dont",
+    "doublecircle",
     "edgechromium",
+    "elems",
     "elkjs",
     "elle",
     "faber",

diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -386,12 +386,11 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-
-  it('18: should handle the direction statement with LR', () => {
+  it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
       `
       classDiagram
-        direction LR
+        direction BT
         class Student {
           -idCard : IdCard
         }
@@ -410,11 +409,11 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-  it('17a: should handle the direction statement with BT', () => {
+  it('17b: should handle the direction statement with RL', () => {
     imgSnapshotTest(
       `
       classDiagram
-        direction BT
+        direction RL
         class Student {
           -idCard : IdCard
         }
@@ -433,11 +432,12 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-  it('17b: should handle the direction statement with RL', () => {
+
+  it('18a: should handle the direction statement with LR', () => {
     imgSnapshotTest(
       `
       classDiagram
-        direction RL
+        direction LR
         class Student {
           -idCard : IdCard
         }
@@ -457,7 +457,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('18: should render a simple class diagram with notes', () => {
+  it('18b: should render a simple class diagram with notes', () => {
     imgSnapshotTest(
       `
       classDiagram-v2
@@ -562,4 +562,13 @@ class C13["With Città foreign language"]
       `
     );
   });
+  it('should render a simple class diagram with no members', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/demos/classchart.html b/demos/classchart.html
@@ -38,12 +38,14 @@ <h1>Class diagram demos</h1>
         +quack()
       }
       class Fish{
-        -int sizeInFeet
+        -Listint sizeInFeet
         -canEat()
       }
       class Zebra{
         +bool is_wild
-        +run()
+        +run(List~T~, List~OT~)
+        %% +run-composite(List~T, K~)
+        +run-nested(List~List~OT~~)
       }
 
     </pre>
@@ -80,6 +82,7 @@ <h1>Class diagram demos</h1>
     Class01 : #size()
     Class01 : -int chimp
     Class01 : +int gorilla
+    Class01 : +abstractAttribute string*
     class Class10~T~ {
     &lt;&lt;service&gt;&gt;
     int id
@@ -122,6 +125,8 @@ <h1>Class diagram demos</h1>
     classDiagram
     direction LR
     Animal ()-- Dog
+    Animal ()-- Cat
+    note for Cat "should have no members area"
     Dog : bark()
     Dog : species()
     </pre>
@@ -151,6 +156,7 @@ <h1>Class diagram demos</h1>
         ~InternalProperty : string
         ~AnotherInternalProperty : List~List~string~~
       }
+      class People List~List~Person~~
     </pre>
     <hr />
 

diff --git a/demos/er.html b/demos/er.html
@@ -125,6 +125,21 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    erDiagram
+      _customer_order {
+          bigint id PK
+          bigint customer_id FK
+          text shipping_address 
+          text delivery_method 
+          timestamp_with_time_zone ordered_at 
+          numeric total_tax_amount 
+          numeric total_price 
+          text payment_method 
+      }
+    </pre>
+    <hr />
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

diff --git a/docs/community/code.md b/docs/community/code.md
@@ -42,7 +42,7 @@ Once the release happens we add a tag to the `release` branch and merge it with
 2.  Check out the `develop` branch
 3.  Create a new branch for your work. Please name the branch following our naming convention below.
 
-We use the follow naming convention for branches:
+We use the following naming convention for branches:
 
 ```txt
    [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]

diff --git a/docs/community/development.md b/docs/community/development.md
@@ -22,7 +22,7 @@ In GitHub, you first **fork** a repository when you are going to make changes an
 
 Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
 
-[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentaion, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).
+[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentation, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).
 
 [Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
 

diff --git a/docs/community/docker-development.md b/docs/community/docker-development.md
@@ -22,7 +22,7 @@ In GitHub, you first **fork** a repository when you are going to make changes an
 
 Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
 
-[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentaion, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).
+[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentation, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).
 
 [Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
 

diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
@@ -19,7 +19,7 @@ For instance:
 
 #### Store data found during parsing
 
-There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
+There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
 
 ```jison
 statement
@@ -35,7 +35,7 @@ In the extract of the grammar above, it is defined that a call to the setTitle m
 > **Note**
 > Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
 
-For more info look in the example diagram type:
+For more info look at the example diagram type:
 
 The `yy` object has the following function:
 
@@ -54,15 +54,15 @@ parser.yy = db;
 
 ### Step 2: Rendering
 
-Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.
+Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather than the flowchart renderer as this is a more generic example.
 
 Place the renderer in the diagram folder.
 
 ### Step 3: Detection of the new diagram type
 
 The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
-For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
+For example, if your new diagram uses a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
 
 Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
@@ -122,7 +122,7 @@ There are a few features that are common between the different types of diagrams
 - Themes, there is a common way to modify the styling of diagrams in Mermaid.
 - Comments should follow mermaid standards
 
-Here some pointers on how to handle these different areas.
+Here are some pointers on how to handle these different areas.
 
 ## Accessibility
 
@@ -140,7 +140,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 ### accessible title and description
 
-The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
+The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md)
 
 As a design goal, the jison syntax should be similar between the diagrams.
 

diff --git a/docs/config/directives.md b/docs/config/directives.md
@@ -126,7 +126,7 @@ The following code snippet changes `theme` to `forest`:
 
 `%%{init: { "theme": "forest" } }%%`
 
-Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`.
+Possible theme values are: `default`, `base`, `dark`, `forest` and `neutral`.
 Default Value is `default`.
 
 Example:
@@ -291,7 +291,7 @@ Let us see an example:
 sequenceDiagram
 
 Alice->Bob: Hello Bob, how are you?
-Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
+Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
@@ -300,7 +300,7 @@ Bob->Alice: Cool
 sequenceDiagram
 
 Alice->Bob: Hello Bob, how are you?
-Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
+Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
@@ -317,7 +317,7 @@ By applying that snippet to the diagram above, `wrap` will be enabled:
 %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
-Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
+Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
@@ -326,7 +326,7 @@ Bob->Alice: Cool
 %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
-Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
+Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
diff --git a/docs/config/usage.md b/docs/config/usage.md
@@ -41,7 +41,7 @@ pnpm add mermaid
 
 **Hosting mermaid on a web page:**
 
-> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
+> Note: This topic is explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
 
 The easiest way to integrate mermaid on a web page requires two elements:
 
@@ -100,7 +100,7 @@ Mermaid can load multiple diagrams, in the same page.
 
 ## Enabling Click Event and Tags in Nodes
 
-A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.
 
 **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
 
@@ -115,13 +115,13 @@ Values:
 - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
 - **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled.
 - **loose**: HTML tags in text are allowed and click functionality is enabled.
-- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevent any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
+- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevents any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
 
 > **Note**
 > This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
 > **sandbox** security level is still in the beta version.
 
-**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
+**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing. This allows clicks and tags are allowed.**
 
 **To change `securityLevel`, you have to call `mermaid.initialize`:**
 

diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
@@ -49,6 +49,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) (**Native support**)
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
   - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
   - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)

diff --git a/docs/intro/getting-started.md b/docs/intro/getting-started.md
@@ -103,7 +103,7 @@ When writing the .html file, we give two instructions inside the html code to th
 
 a. The mermaid code for the diagram we want to create.
 
-b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
+b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
 
 **a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
 
@@ -221,4 +221,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 
 **Comments from Knut Sveidqvist, creator of mermaid:**
 
-- In early versions of mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
+- In early versions of mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflect the previous way which still works.
diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md
@@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
 
 Where:
 
-- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens.
 - `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
@@ -1051,9 +1051,9 @@ flowchart LR
     classDef foobar stroke:#00f
 ```
 
-### Css classes
+### CSS classes
 
-It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
+It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
 below:
 
 **Example style**

diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
@@ -58,15 +58,15 @@ mindmap
 
 The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
 
-In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.
+In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.
 
     mindmap
         Root
             A
                 B
                 C
 
-In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
+In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
 
 ```mermaid-example
 mindmap
@@ -228,7 +228,7 @@ _These classes need to be supplied by the site administrator._
 
 ## Unclear indentation
 
-The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
+The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
 
     mindmap
         Root