Merge branch 'develop' into feature/4269_add_xychart

mermaid-js · Oct 2, 2023 · 0d64d8d · 0d64d8d
2 parents 42f8990 + c9d6769
commit 0d64d8d
Show file tree

Hide file tree

Showing 48 changed files with 660 additions and 171 deletions.
diff --git a/README.md b/README.md
@@ -59,9 +59,9 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -57,7 +57,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
 

diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
@@ -132,4 +132,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks in class names properly', () => {
+    cy.visit('http://localhost:9000/xss24.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
@@ -520,6 +520,25 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
+    imgSnapshotTest(
+      `gantt
+        title A long Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1day
+        excludes     weekends
+
+        section Section
+        A task           : a1, 9999-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `
+    );
+  });
+
   it('should render when compact is true', () => {
     imgSnapshotTest(
       `

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -58,12 +58,10 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-      flowchart
-        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(Customer Awareness Journey):::mainCategories
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
+      classDiagram
+  `Class<img src=x onerror=alert(1)>` <|-- `Class2<img src=x onerror=alert(2)>`
+    </pre>
+    <pre id="diagram" class="mermaid2">
 flowchart
 Node1:::class1 --> Node2:::class2
 Node1:::class1 --> Node3:::class2

diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss23-css.html b/cypress/platform/xss23-css.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss24.html b/cypress/platform/xss24.html
@@ -0,0 +1,109 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+          curve: 'cardinal',
+          htmlLabels: true,
+        },
+        htmlLabels: false,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+
+      let diagram = 'classDiagram\n';
+      diagram += '`Class<img src=x on';
+      diagram += 'error=xssAttack()>` <|-- `Class2<img src=x on';
+      diagram += 'error=xssAttack()>`';
+
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      const { svg } = await mermaid.render('diagram', diagram);
+      document.querySelector('#res').innerHTML = svg;
+    </script>
+  </body>
+</html>