Merge branch 'develop' into release/10.2.0

* develop: (49 commits) Debug fetch-contributors Fix lockfile Revert "Replace esno & ts-node with tsx" Fix lockfile Fix build Update pnpm-lock Replace esno & ts-node with tsx chore(deps): update all minor dependencies chore(deps): update all patch dependencies Fix missing `await` in usage document Add integrations test: fix classDiagramGrammer unit test restore path calculation for grammar test Allow overlapping notes remove spellcheck warnings Fix path in test fix import issue requested update Reject ridiculous years in Gantt charts. Remove unnecessary dependencies ...
2025-09-25 02:09:50 +02:00 · 2023-05-09 10:13:15 +05:30
parent 29c8f8c867 c0b7ba305f
commit 17c798a1b3
70 changed files with 4436 additions and 923 deletions
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -248,7 +248,7 @@ classE o-- classF : aggregation

 Relations can logically represent an N:M association:

-```mmd
+```mermaid
 classDiagram
    Animal <|--|> Zebra
 ```
@@ -277,6 +277,23 @@ And `Link` can be one of:
 | --   | Solid       |
 | ..   | Dashed      |

+## Define Namespace
+
+A namespace groups classes.
+
+Code:
+
+```mermaid-example
+classDiagram
+namespace BaseShapes {
+    class Triangle
+    class Rectangle {
+      double width
+      double height
+    }
+}
+```
+
 ## Cardinality / Multiplicity on relations

 Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.
@@ -351,7 +368,7 @@ class Color{

 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.

-```mmd
+```mermaid
 classDiagram
 %% This whole line is a comment classDiagram class Shape <<interface>>
 class Shape{
@@ -417,7 +434,7 @@ classDiagram

 _URL Link:_

-```mmd
+```mermaid
 classDiagram
 class Shape
 link Shape "https://www.github.com" "This is a tooltip for a link"
@@ -427,7 +444,7 @@ click Shape2 href "https://www.github.com" "This is a tooltip for a link"

 _Callback:_

-```mmd
+```mermaid
 classDiagram
 class Shape
 callback Shape "callbackFunction" "This is a tooltip for a callback"
--- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
+++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -116,7 +116,7 @@ Relationships may be classified as either _identifying_ or _non-identifying_ and
 |      to       |   _identifying_   |
 | optionally to | _non-identifying_ |

-```mmd
+```mermaid
 erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    PERSON ||--o{ NAMED-DRIVER : is
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -5,11 +5,11 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress

 # Flowcharts - Basic Syntax

-All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
+Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.

-It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
-
-> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).
+```warning
+If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
+```

 ### A node (default)

@@ -294,7 +294,7 @@ word of warning, one could go overboard with this making the flowchart harder to
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.

-```mmd
+```mermaid
 flowchart TB
    A --> C
    A --> D
@@ -578,7 +578,7 @@ Beginner's tip—a full example using interactive links in a html context:

 Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax

-```mmd
+```mermaid
 flowchart LR
 %% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
@@ -704,7 +704,7 @@ flowchart TD
    B-->E(A fa:fa-camera-retro perhaps?)
 ```

-?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
+Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).

 ## Graph declarations with spaces between vertices and link and without semicolon

--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -193,7 +193,7 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/

 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.

-```mmd
+```mermaid
 ---
 displayMode: compact
 ---
@@ -211,7 +211,7 @@ gantt

 Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.

-```mmd
+```mermaid
 gantt
    title A Gantt Diagram
    %% this is a comment
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -114,7 +114,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.

 ## Icons

-As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
+As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.

 ```mermaid-example
 mindmap
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -387,7 +387,7 @@ sequenceDiagram

 Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

-```mmd
+```mermaid
 sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
@@ -443,7 +443,7 @@ This can be configured by adding one or more link lines with the format:
 link <actor>: <link-label> @ <link-url>
 ```

-```mmd
+```mermaid
 sequenceDiagram
    participant Alice
    participant John
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -249,7 +249,7 @@ Comments can be entered within a state diagram chart, which will be ignored by t
 own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
 newline will be treated as a comment, including any diagram syntax

-```mmd
+```mermaid
 stateDiagram-v2
    [*] --> Still
    Still --> [*]