Merge branch 'release/8.13.4'

.github/dependabot.yml

@@ -1,12 +1,17 @@
 version: 2
 updates:
 - package-ecosystem: npm
+  open-pull-requests-limit: 10
   directory: /
   target-branch: develop
   schedule:
     interval: weekly
+    day: monday
+    time: "07:00"
 - package-ecosystem: github-actions
   directory: /
   target-branch: develop
   schedule:
     interval: weekly
+    day: monday
+    time: "07:00"

.github/workflows/issue-triage.yml

@@ -8,7 +8,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: andymckay/[email protected].3
+    - uses: andymckay/[email protected].4
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         add-labels: "Status: Triage"

CONTRIBUTING.md

@@ -11,7 +11,7 @@ Here are a few things to know to get you started on the right path.
 We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:
 
 * Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller low-risk changes like dependecies, documentation etc can be merged by active collaborators
+* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
 * documentation (updates to the docs folder is also allowed via direct commits)
 
 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
@@ -35,13 +35,13 @@ The documentation is written in Markdown, for more information about Markdown [s
 
 If you want to preview the documentation site on your machine, you need to install `docsify-cli`:
 
-```
+```sh
 $ npm i docsify-cli -g
-````
+```
 
 If you are more familiar with Yarn, you can use the following command:
 
-```
+```sh
 $ yarn global add docsify-cli
 ```
 
@@ -50,7 +50,7 @@ If the installation is successful, the command `docsify` will be available in yo
 
 You can now run the following command to serve the documentation site:
 
-```
+```sh
 $ docsify serve docs
 ```
 
@@ -85,7 +85,7 @@ The rendering tests are very straightforward to create. There is a function imgS
 When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
 
 This is what a rendering test looks like:
-```
+```javascript
   it('should render forks and joins', () => {
     imgSnapshotTest(
       `

README.zh-CN.md

@@ -23,15 +23,15 @@ Mermaid 通过减少创建可修改的图表所需要的时间、精力和工具
 你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程。
 U也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md).
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
 
 <!-- </Main description> -->
 
 ## 示例
 
-__下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。点击[语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情__
+__下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情__
 <table>
 <!-- <Flowchart> -->
 <tr><td colspan=2 align="center">

cypress/integration/other/xss.spec.js

@@ -78,5 +78,25 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   })
+  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss10.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  })
+  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss11.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  })
+  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss12.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  })
+  it('should not allow maniplulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss13.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  })
 
 })

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

@@ -611,6 +611,16 @@ flowchart RL
     );
   });
 
+  it('76: handle unicode encoded character with HTML labels true', () => {
+    imgSnapshotTest(
+      `flowchart TB
+      a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}    
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+
     it('2050: handling of different rendering direction in subgraphs', () => {
     imgSnapshotTest(
       `

cypress/platform/current.html

@@ -74,7 +74,7 @@ <h1>info below</h1>
   A --> D: asd123
       </div>
       </div>
-      <div class="mermaid" style="width: 50%; height: 40%;">
+      <div class="mermaid2" style="width: 50%; height: 40%;">
 %% this does not produce the desired result
 flowchart TB
   subgraph container_Beta
@@ -88,24 +88,13 @@ <h1>info below</h1>
 
       </div>
       <div class="mermaid" style="width: 50%; height: 40%;">
-        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-flowchart TB
-    b-->B
-    a-->c
-    subgraph O
-      A
-    end
-    subgraph B
-      c
-    end
-    subgraph A
-        a
-        b
-        B
-    end
+        flowchart TB
+	a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+	--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
+
 
       </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TB
   internet
   nat
@@ -130,7 +119,7 @@ <h1>info below</h1>
   routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TD
 
 subgraph one[One]
@@ -145,7 +134,7 @@ <h1>info below</h1>
 
 sub_one --> two
       </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TD
 
 subgraph one[One]
@@ -174,7 +163,7 @@ <h1>info below</h1>
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', "htmlLabels": true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

cypress/platform/knsv.html

@@ -28,113 +28,13 @@
     <div>info below</div>
     <div class="flex flex-wrap">
 
-<div class="mermaid2" style="width: 100%; height: 20%;">
-classDiagram
-  direction TB
-  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
-
-</div>
-<div class="mermaid3" style="width: 100%; height: 20%;">
-stateDiagram
-  state CompositeState {
-      YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
-    }
-
-</div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-sequenceDiagram
-  %%{init: {'config': {'wrap': true }}}%%
-  actor Alice as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-  actor Bob
-  participant John as John2
-  participant Mandy
-  Alice->>Bob: Hi Bob
-  Bob->>Alice: Hi Alice
-  Alice->>John: Hi John
-  John->>Mandy: Hi Mandy
-  Mandy ->>Joan: Hi Joan
-
-</div>
-<div class="mermaid" style="width: 100%; height: 20%;">
-%%{int: { "apa":"b", "theme":"forest"}}%%
-sequenceDiagram
-Alice->>Bob: Hi Bob
-Bob->>Alice: Hi Alice
-</div>
-<div class="mermaid">
-sequenceDiagram
-  autonumber
-  par Action 1
-    Alice->>John: Hello John, how are you?
-  and Action 2
-    Alice->>Bob: Hello Bob, how are you?
-  end
-  Alice->>+John: Hello John, how are you?
-  Alice->>+John: John, can you hear me?
-  John-->>-Alice: Hi Alice, I can hear you!
-  Note right of John: John is perceptive
-  John-->>-Alice: I feel great!
-      loop Every minute
-        John-->Alice: Great!
-    end
-</div>
-<div class="mermaid">
-sequenceDiagram
-  %%{init: {'config': {'wrap': true }}}%%
-  actor Alice
-  actor Bob
-  Alice->>Bob: Hi Bob
-  Bob->>Alice: Hi Alice
-</div>
-<div class="mermaid" style="width: 100%; height: 20%;">
-        %%{init: {'config': {'wrap': true }}}%%
-        sequenceDiagram
-        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-        A->>Bob: Hola
-        Bob-->A: Pasten !
-  </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
 stateDiagram-v2
-state CS {
-state ACS {
-YourState
-}
-}
-  </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-      stateDiagram-v2
-        [*] --> Active
+      [*] --> S1
+      state "Some long name" as S1
 
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
+</div>
 
-        SomethingElse --> [*]  </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {