Update snapshots

* develop: (44 commits)
  Update docs
  Add `workflow_dispatch` to lint.yml
  chore: update docs folder
  lint
  fix typescript error
  fix(docs): build the docs
  fix(docs): remove duplicate section
  chore(deps): update all non-major dependencies
  Update docs/misc/integrations.md
  Add links to github atom add-ons
  remove links from atom.io; add note Atom has been archived
  set svg role to 'graphics-document document'
  common function for a11y; add to renderAsync; + renderAsync spec
  feat: add links to theme listing
  fix cspell
  fix cspell
  fix lint
  refactor theming doc
  remove typeof
  use camelCase
  ...

.eslintrc.json

@@ -69,7 +69,6 @@
     "unicorn/no-abusive-eslint-disable": "error",
     "unicorn/no-array-push-push": "error",
     "unicorn/no-for-loop": "error",
-    "unicorn/no-null": "error",
     "unicorn/no-instanceof-array": "error",
     "unicorn/no-typeof-undefined": "error",
     "unicorn/no-unnecessary-await": "error",

.github/pull_request_template.md

@@ -14,5 +14,4 @@ Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 - [ ] :computer: have added unit/e2e tests (if appropriate)
-- [ ] :notebook: have added documentation (if appropriate)
 - [ ] :bookmark: targeted `develop` branch

.github/workflows/e2e.yml

@@ -3,7 +3,7 @@ name: E2E
 on: [push, pull_request]
 
 permissions:
-  contents: read
+  contents: write
 
 jobs:
   build:
@@ -28,15 +28,28 @@ jobs:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
 
+      # Experiment with this step if we cannot check-in the snapshots to the repo.
+      # - name: Cache snapshots
+      #   id: cache-snapshot
+      #   uses: actions/cache@v3
+      #   with:
+      #     # npm cache files are stored in `~/.npm` on Linux/macOS
+      #     path: ./cypress/snapshots
+      #     key: ${{ runner.os }}-build-${env.GITHUB_REF}
+      #     restore-keys: |
+      #       ${{ runner.os }}-build-develop
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
+        id: cypress
         uses: cypress-io/github-action@v4
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
           start: pnpm run dev
+          browser: chrome
           wait-on: 'http://localhost:9000'
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
@@ -44,3 +57,18 @@ jobs:
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        with:
+          name: error-snapshots
+          path: cypress/snapshots/**/__diff_output__/*
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ github.event_name == 'push' }}
+        with:
+          message: 'Update snapshots'
+          add: 'cypress/snapshots/*'
+          pull: '--rebase --autostash'

.github/workflows/link-checker.yml

@@ -13,10 +13,11 @@ on:
       - master
   pull_request:
     branches:
+      - develop
       - master
   schedule:
     # * is a special character in YAML so you have to quote this string
-    - cron: '30 8 * * *'
+    - cron: '30 8 * * 5'
 
 jobs:
   linkChecker:

.gitignore

@@ -26,7 +26,7 @@ Gemfile.lock
 /.vs
 
 cypress/screenshots/
-cypress/snapshots/
+cypress/snapshots-dev/
 
 # eslint --cache file
 .eslintcache

.lycheeignore

@@ -9,8 +9,5 @@ https://mkdocs.org/
 https://osawards.com/javascript/#nominees
 https://osawards.com/javascript/2019
 
-# Timeout error, maybe Twitter has anti-bot defences against GitHub's CI servers?
-https://twitter.com/mermaidjs_
-
 # Don't check files that are generated during the build via `pnpm docs:code`
 packages/mermaid/src/docs/config/setup/*

.vite/build.ts

@@ -41,11 +41,6 @@ const packageOptions = {
     packageName: 'mermaid-mindmap',
     file: 'detector.ts',
   },
-  'mermaid-flowchart-v3': {
-    name: 'mermaid-flowchart-v3',
-    packageName: 'mermaid-flowchart-v3',
-    file: 'detector.ts',
-  },
   // 'mermaid-example-diagram-detector': {
   //   name: 'mermaid-example-diagram-detector',
   //   packageName: 'mermaid-example-diagram',
@@ -125,7 +120,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
   if (watch && config.build) {
     config.build.watch = {
       include: [
-        'packages/mermaid-flowchart-v3/src/**',
         'packages/mermaid-mindmap/src/**',
         'packages/mermaid/src/**',
         // 'packages/mermaid-example-diagram/src/**',
@@ -152,9 +146,8 @@ const main = async () => {
 };
 
 if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-flowchart-v3' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
     // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }

README.md

@@ -10,7 +10,7 @@ English | [简体中文](./README.zh-CN.md)
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## About
 

README.zh-CN.md

@@ -10,7 +10,7 @@
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## 关于 Mermaid
 

cSpell.json

@@ -14,7 +14,6 @@
     "bilkent",
     "bisheng",
     "braintree",
-    "brkt",
     "brolin",
     "brotli",
     "classdef",
@@ -31,7 +30,6 @@
     "doku",
     "dompurify",
     "edgechromium",
-    "elkjs",
     "faber",
     "flatmap",
     "ftplugin",
@@ -40,7 +38,6 @@
     "gitgraph",
     "globby",
     "graphlib",
-    "graphviz",
     "grav",
     "greywolf",
     "inkdrop",
@@ -55,6 +52,7 @@
     "laganeckas",
     "lintstagedrc",
     "lucida",
+    "mansalva",
     "matthieu",
     "mdbook",
     "mermerd",
@@ -63,15 +61,12 @@
     "mindmaps",
     "mitigations",
     "mkdocs",
-    "mult",
     "orlandoni",
     "phpbb",
     "plantuml",
     "playfair",
     "pnpm",
     "podlite",
-    "quence",
-    "radious",
     "ranksep",
     "rect",
     "rects",
@@ -82,18 +77,15 @@
     "shiki",
     "sidharth",
     "sphinxcontrib",
+    "ssim",
     "statediagram",
     "stylis",
     "substate",
     "sveidqvist",
-    "swimm",
     "techn",
-    "teststr",
-    "textlength",
     "treemap",
     "ts-nocheck",
     "tuleap",
-    "ugge",
     "unist",
     "verdana",
     "viewports",

cypress.config.cjs

@@ -5,9 +5,17 @@ const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 
 module.exports = defineConfig({
   projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
   e2e: {
     specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
     setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+        }
+        return launchOptions;
+      });
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;

cypress/helpers/util.js

@@ -136,6 +136,5 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
 
 export const renderGraph = (graphStr, options, api) => {
   const url = mermaidUrl(graphStr, options, api);
-
   cy.visit(url);
 };

cypress/integration/other/configuration.spec.js

@@ -117,7 +117,6 @@ describe('Configuration', () => {
     });
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
-      cy.viewport(1440, 1024);
       cy.visit(url);
 
       cy.get('svg');

cypress/integration/other/external-diagrams.spec.js

@@ -1,10 +1,13 @@
-import { urlSnapshotTest } from '../../helpers/util';
-
 describe('mermaid', () => {
   describe('registerDiagram', () => {
     it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
       const url = 'http://localhost:9000/external-diagrams-mindmap.html';
-      urlSnapshotTest(url, {}, false, false);
+      cy.visit(url);
+
+      cy.get('svg', {
+        // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
+        timeout: 10000,
+      }).matchImageSnapshot();
     });
   });
 });

cypress/integration/other/ghsa.spec.js

@@ -7,10 +7,4 @@ describe('CSS injections', () => {
       flowchart: { htmlLabels: false },
     });
   });
-  it('should not allow adding styletags affecting the page', () => {
-    urlSnapshotTest('http://localhost:9000/ghsa3.html', {
-      logLevel: 1,
-      flowchart: { htmlLabels: false },
-    });
-  });
 });

cypress/integration/other/rerender.spec.js

@@ -1,14 +1,12 @@
 describe('Rerendering', () => {
   it('should be able to render after an error has occurred', () => {
     const url = 'http://localhost:9000/render-after-error.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graphDiv').should('exist');
   });
 
   it('should be able to render and rerender a graph via API', () => {
     const url = 'http://localhost:9000/rerender.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
 

cypress/integration/rendering/c4.spec.js

@@ -1,122 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
-
-describe('C4 diagram', () => {
-  it('should render a simple C4Context diagram', () => {
-    imgSnapshotTest(
-      `
-      C4Context
-      accTitle: C4 context demo
-      accDescr: Many large C4 diagrams
-
-      title System Context diagram for Internet Banking System
-
-      Enterprise_Boundary(b0, "BankBoundary0") {
-          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-
-          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-          Enterprise_Boundary(b1, "BankBoundary") {
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-          }
-        }
-
-      BiRel(customerA, SystemAA, "Uses")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      Rel(SystemC, customerA, "Sends e-mails to")
-
-      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
-      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
-      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render a simple C4Container diagram', () => {
-    imgSnapshotTest(
-      `
-      C4Container
-      title Container diagram for Internet Banking System
-
-      System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
-      Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
-
-      Container_Boundary(c1, "Internet Banking") {
-          Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
-      }
-
-      Rel(customer, spa, "Uses", "HTTPS")
-      Rel(email_system, customer, "Sends e-mails to")
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render a simple C4Component diagram', () => {
-    imgSnapshotTest(
-      `
-      C4Component
-      title Component diagram for Internet Banking System - API Application
-
-      Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-
-      Container_Boundary(api, "API Application") {
-        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
-      }
-
-      Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
-      UpdateRelStyle(spa, sign, $offsetY="-40")
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render a simple C4Dynamic diagram', () => {
-    imgSnapshotTest(
-      `
-      C4Dynamic
-      title Dynamic diagram for Internet Banking System - API Application
-
-      ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-      Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
-      Container_Boundary(b, "API Application") {
-        Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
-        Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
-      }
-      Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
-      Rel(c2, c3, "Calls isAuthenticated() on")
-      Rel(c3, c4, "select * from users where username = ?", "JDBC")
-
-      UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
-      UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
-      UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render a simple C4Deployment diagram', () => {
-    imgSnapshotTest(
-      `
-      C4Deployment
-      title Deployment Diagram for Internet Banking System - Live
-
-      Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
-          Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
-      }
-
-      Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
-          Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
-              Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
-                  Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
-              }
-          }
-      }
-
-      Rel(mobile, api, "Makes API calls to", "json/HTTPS")
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-});

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

@@ -485,7 +485,8 @@ describe('Class diagram V2', () => {
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
         class Class10 {
-            int id
+          <<service>>
+          int id
           size()
         }
         note for Class10 "Cool class\nI said it's very cool class!"

cypress/integration/rendering/classDiagram.spec.js

@@ -414,6 +414,7 @@ describe('Class diagram', () => {
     classDiagram
       note "I love this diagram!\nDo you love it?"
       class Class10 {
+        <<service>>
         int id
         size()
       }

cypress/integration/rendering/current.spec.js

@@ -1,6 +1,6 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
-describe('Current diagram', () => {
+describe('State diagram', () => {
   it('should render a state with states in it', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/erDiagram.spec.js

@@ -182,20 +182,6 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
-  it('should render entities with length in attributes type', () => {
-    renderGraph(
-      `
-    erDiagram
-        CLUSTER {
-          varchar(99) name
-          string(255) description 
-        }
-      `,
-      { logLevel: 1 }
-    );
-    cy.get('svg');
-  });
-
   it('should render entities and attributes with big and small entity names', () => {
     renderGraph(
       `

cypress/integration/rendering/gantt.spec.js

@@ -225,7 +225,10 @@ describe('Gantt diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
 
@@ -269,7 +272,10 @@ describe('Gantt diagram', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
-      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/integration/rendering/pie.spec.js

@@ -54,7 +54,10 @@ describe('Pie Chart', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
   it('should render a pie diagram when useMaxWidth is false', () => {
@@ -68,10 +71,11 @@ describe('Pie Chart', () => {
       { pie: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // expect(height).to.eq(450);
-      expect(width).to.eq(984);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/platform/e2e.html

@@ -1,32 +1,8 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- <meta charset="iso-8859-15"/> -->
     <script src="./viewer.js" type="module"></script>
-    <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
     <style>
-      body {
-        /* font-family: 'Mansalva', cursive;*/
-        /* font-family: 'Mansalva', cursive; */
-        /* font-family: 'arial'; */
-        /* font-family: "trebuchet ms", verdana, arial; */
-      }
-      /* div {
-        font-family: 'arial';
-      } */
-      /* .mermaid-main-font {
-        font-family: "trebuchet ms", verdana, arial;
-        font-family: var(--mermaid-font-family);
-      } */
-      /* :root {
-        --mermaid-font-family: '"trebuchet ms", verdana, arial';
-        --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-        --mermaid-font-family: '"Lucida Console", Monaco, monospace';
-      } */
       svg {
         border: 2px solid darkred;
       }
@@ -36,21 +12,5 @@
       }
     </style>
   </head>
-  <body>
-    <!-- <script src="./mermaid.js"></script> -->
-    <script>
-      // Notice startOnLoad=false
-      // This prevents default handling in mermaid from render before the e2e logic is applied
-      // mermaid.initialize({
-      //   startOnLoad: false,
-      //   useMaxWidth: true,
-      //   // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
-      //   // fontFamily: '\"trebuchet ms\", verdana, arial;'
-      //   // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
-      //   // fontFamily: '"Mansalva", cursive',
-      //   // fontFamily: '"Noto Sans SC", sans-serif'
-      //   fontFamily: '"Noto Sans SC", sans-serif'
-      // });
-    </script>
-  </body>
+  <body></body>
 </html>

cypress/platform/ghsa1.html

@@ -4,7 +4,7 @@
   </script>
   <body>
     <div id="target">
-      <h1>Background should be yellow!!!</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
     </div>
     <svg id="diagram"></svg>
 

cypress/platform/ghsa3.html

@@ -1,100 +0,0 @@
-<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>
-  </head>
-  <body>
-    <h1>PAGE SHOULD NOT BE RED</h1>
-    <div class="flex">
-      <div id="diagram" class="mermaid"></div>
-      <div id="res" class=""></div>
-    </div>
-    <script src="./mermaid.js"></script>
-    <script>
-      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: true,
-        // 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 = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
-      diagram += 'flowchart\n';
-      diagram += 'A["<p><sty';
-      diagram += 'le> * { background : red}</style>test</p>"]';
-
-      console.log(diagram);
-      // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
-        document.querySelector('#res').innerHTML = res;
-      });
-    </script>
-  </body>
-</html>

cypress/platform/knsv2.html

@@ -54,172 +54,31 @@
     </style>
   </head>
   <body>
+    <div>Security check</div>
     <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
+flowchart LR
+    %% Actors
+    A
+    subgraph Sub
+        B --> C
+    end
+
+    %% Accusations
+    A --L --> Sub
+
+    %% Offense
+    B --> A
+
     </pre>
     <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
+      stateDiagram-v2
 
-    rom[16 KB ROM]
+      [*] --> S1
+      S1 --> S2: long line using<br/>should work
+      S1 --> S3: long line using <br>should work
+      S1 --> S4: long line using \\nshould work
 
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    <pre id="diagram" class="mermaid">
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    &nbsp;
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-  B1 --be be--x B2
-  B1 --bo bo--o B3
-  subgraph Ugge
-      B2
-      B3
-      subgraph inner
-          B4
-          B5
-      end
-      subgraph inner2
-        subgraph deeper
-          C4
-          C5
-        end
-        C6
-      end
-
-      B4 --> C4
-
-      B3 -- X --> B4
-      B2 --> inner
-
-      C4 --> C5
-  end
-
-  subgraph outer
-      B6
-  end
-  B6 --> B5
-  </pre
-    >
-    <pre id="diagram" class="mermaid2">
-sequenceDiagram
-    Customer->>+Stripe: Makes a payment request
-    Stripe->>+Bank: Forwards the payment request to the bank
-    Bank->>+Customer: Asks for authorization
-    Customer->>+Bank: Provides authorization
-    Bank->>+Stripe: Sends a response with payment details
-    Stripe->>+Merchant: Sends a notification of payment receipt
-    Merchant->>+Stripe: Confirms the payment
-    Stripe->>+Customer: Sends a confirmation of payment
-    Customer->>+Merchant: Receives goods or services
-        </pre
-    >
+    </pre>
     <pre id="diagram" class="mermaid2">
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
@@ -238,19 +97,17 @@ sequenceDiagram
 
     <script type="module">
       import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import flowV3 from '../../packages/mermaid-flowchart-v3/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap, flowV3]);
+      await mermaid.registerExternalDiagrams([mindmap]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'forest',
+        theme: 'default',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
-          // defaultRenderer: 'elk',
           useMaxWidth: false,
           htmlLabels: true,
         },

cypress/platform/knsv3.html

@@ -6,10 +6,6 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -18,7 +14,7 @@
       body {
         /* background: rgb(221, 208, 208); */
         /* background:#333; */
-        font-family: 'Arial';
+        font-family: 'Courier New', Courier, monospace;
         /* font-size: 18px !important; */
       }
       h1 {
@@ -27,77 +23,235 @@
       .mermaid2 {
         display: none;
       }
-      .mermaid svg {
+      .mermaid {
+        border: 1px solid red;
+        font-family: 'Courier New', Courier, monospace;
         /* font-size: 18px !important; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
-        background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
-        background-repeat: repeat;
-      }
-      .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>
   </head>
   <body>
-    <div>Security check</div>
-    <pre id="diagram" class="mermaid">
+    <div>info below</div>
+    <div class="">
+      <pre class="mermaid2" style="width: 100%; height: 400px">
+flowchart TB;subgraph "number as labels";1;end;
+      </pre>
+      <pre class="mermaid2" style="width: 100%; height: 400px">
+flowchart TB;a[APA];
+      </pre>
+      <pre class="mermaid2" style="margin-left: 100px">
+graph TD
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+      </pre>
+      <pre class="mermaid2" style="margin-left: 100px">
+flowchart TD
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+      </pre>
+      <pre class="mermaid2" style="">
+ graph TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
+      </pre>
+      <pre class="mermaid2" style="">
+      graph TB
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      </pre>
+      <pre class="mermaid2" style="">
       graph TD
-        A["test"] --"<p><style> * { display : none}</style>test</p>"--> B
-    </pre>
-
-    <!-- <div id="cy"></div> -->
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <!-- <script src="./mermaid.js"></script> -->
-
-    <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+      </pre>
+      <pre class="mermaid2" style="">
+      graph TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+      </pre>
+      <pre class="mermaid2" style="">
+      flowchart TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+      </pre>
+      <pre class="mermaid2" style="">
+      flowchart TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+      </pre>
+      <pre class="mermaid2" style="">
+flowchart LR
+        a["<strong>Haiya</strong>"]---->b
+      </pre>
+      <pre class="mermaid" style="">
+flowchart LR
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        a["<strong>Haiya</strong>"]---->b
+      </pre>
+      <pre class="mermaid2" style="">
+      flowchart TD
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+      </pre>
+      <pre class="mermaid2" style="">
+      flowchart TD
+%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+        A[Christmas] ==> D
+        A[Christmas] -->|Get money| B(Go shopping)
+        A[Christmas] ==> C
+      </pre>
+      <pre class="mermaid2" style="">
+      %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
+classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      </pre>
+      <pre class="mermaid2" style="">
+classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      </pre>
+      <pre class="mermaid" style="">
+flowchart BT
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      </pre>
+    </div>
+    <script src="./mermaid.js"></script>
+    <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'default',
-        startOnLoad: true,
+        // theme: 'neutral',
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: {
-          useMaxWidth: false,
-          htmlLabels: true,
-        },
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        flowchart: { curve: 'cardinal', htmlLabels: false },
+        // htmlLabels: true,
+        // 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: 'cardinal',
+        securityLevel: 'loose',
+        // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
         alert('It worked');
       }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>