Fix for broken test

Corrected theme variables reference table layout

.github/workflows/build.yml

@@ -20,26 +20,32 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Build
-        run: yarn build
+        run: pnpm run build
 
-      - name: Upload Build as Artifact
+      - name: Upload Mermaid Build as Artifact
         uses: actions/upload-artifact@v3
         with:
-          name: dist
-          path: dist
+          name: mermaid-build
+          path: packages/mermaid/dist
+
+      - name: Upload Mermaid Mindmap Build as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: mermaid-mindmap-build
+          path: packages/mermaid-mindmap/dist

.github/workflows/e2e-applitools.yml

@@ -29,25 +29,24 @@ jobs:
         name: Warn if not using Applitools
         run: |
           echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+
       - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-      - name: Run Build
-        run: yarn build
-
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
@@ -60,7 +59,7 @@ jobs:
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
       - name: Run E2E Tests
-        run: yarn e2e
+        run: pnpm run e2e
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
           # Mermaid applitools.config.js uses this to pick batch name.

.github/workflows/e2e.yml

@@ -16,37 +16,31 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/cache@v3
-        id: yarn-and-build-cache
-        with:
-          path: |
-            ~/.cache/Cypress
-            build
-            node_modules
-          key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node_modules-build-
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
+        # Need to skip setup if Cypress run is skipped, otherwise an error
+        # is thrown since the pnpm cache step fails
+        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v3
+        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: yarn dev
+          start: pnpm run dev
           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
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          headless: true
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/lint.yml

@@ -20,23 +20,23 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Linting
-        run: yarn lint
+        run: pnpm run lint
 
       - name: Verify Docs
-        run: yarn docs:verify
+        run: pnpm run docs:verify

.github/workflows/test.yml

@@ -14,24 +14,24 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Unit Tests
         run: |
-          yarn ci --coverage
+          pnpm run ci --coverage
 
       - name: Upload Coverage to Coveralls
         # it feels a bit weird to use @master, but that's what the docs use

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pre-commit
+pnpm run pre-commit

.lintstagedrc.json

@@ -1,6 +1,6 @@
 {
-  "src/docs/**": ["yarn docs:build --git"],
-  "src/docs.mts": ["yarn docs:build --git"],
+  "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
+  "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
   "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
-  "*.jison": ["yarn lint:jison"]
+  "*.jison": ["pnpm run lint:jison"]
 }

.prettierignore

@@ -1,4 +1,6 @@
 dist
 cypress/platform/xss3.html
 .cache
-coverage
+coverage
+# Autogenerated by PNPM
+pnpm-lock.yaml

.vite/build.ts

@@ -3,35 +3,67 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import pkg from '../package.json' assert { type: 'json' };
-type OutputOptions = Exclude<
-  Exclude<InlineConfig['build'], undefined>['rollupOptions'],
-  undefined
->['output'];
 
 const { dependencies } = pkg;
 const watch = process.argv.includes('--watch');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
+type OutputOptions = Exclude<
+  Exclude<InlineConfig['build'], undefined>['rollupOptions'],
+  undefined
+>['output'];
+
+const packageOptions = {
+  mermaid: {
+    name: 'mermaid',
+    packageName: 'mermaid',
+    file: 'mermaid.ts',
+  },
+  'mermaid-mindmap': {
+    name: 'mermaid-mindmap',
+    packageName: 'mermaid-mindmap',
+    file: 'add-diagram.ts',
+  },
+  'mermaid-mindmap-detector': {
+    name: 'mermaid-mindmap-detector',
+    packageName: 'mermaid-mindmap',
+    file: 'registry.ts',
+  },
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
+    file: 'add-diagram.ts',
+  },
+  'mermaid-example-diagram-detector': {
+    name: 'mermaid-example-diagram-detector',
+    packageName: 'mermaid-example-diagram',
+    file: 'registry.ts',
+  },
+};
+
 interface BuildOptions {
   minify: boolean | 'esbuild';
   core?: boolean;
   watch?: boolean;
+  entryName: keyof typeof packageOptions;
 }
 
-export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineConfig => {
+export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
   const external = ['require', 'fs', 'path'];
+  console.log(entryName, packageOptions[entryName]);
+  const { name, file, packageName } = packageOptions[entryName];
   let output: OutputOptions = [
     {
-      name: 'mermaid',
+      name,
       format: 'esm',
       sourcemap: true,
-      entryFileNames: `[name].esm${minify ? '.min' : ''}.mjs`,
+      entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
     {
-      name: 'mermaid',
+      name,
       format: 'umd',
       sourcemap: true,
-      entryFileNames: `[name]${minify ? '.min' : ''}.js`,
+      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
     },
   ];
 
@@ -42,9 +74,10 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon
     // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
     output = [
       {
+        name,
         format: 'esm',
         sourcemap: true,
-        entryFileNames: `[name].core.mjs`,
+        entryFileNames: `${name}.core.mjs`,
       },
     ];
   }
@@ -53,11 +86,12 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon
     configFile: false,
     build: {
       emptyOutDir: false,
+      outDir: resolve(__dirname, `../packages/${packageName}/dist`),
       lib: {
-        entry: resolve(__dirname, '../src/mermaid.ts'),
-        name: 'mermaid',
+        entry: resolve(__dirname, `../packages/${packageName}/src/${file}`),
+        name,
         // the proper extensions will be added
-        fileName: 'mermaid',
+        fileName: name,
       },
       minify,
       rollupOptions: {
@@ -73,17 +107,36 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon
 
   if (watch && config.build) {
     config.build.watch = {
-      include: 'src/**',
+      include: [
+        'packages/mermaid-mindmap/src/**',
+        'packages/mermaid/src/**',
+        'packages/mermaid-example-diagram/src/**',
+      ],
     };
   }
 
   return config;
 };
 
+const buildPackage = async (entryName: keyof typeof packageOptions) => {
+  return Promise.allSettled([
+    build(getBuildConfig({ minify: false, entryName })),
+    build(getBuildConfig({ minify: 'esbuild', entryName })),
+    build(getBuildConfig({ minify: false, core: true, entryName })),
+  ]);
+};
+
+const main = async () => {
+  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
+  for (const pkg of packageNames) {
+    await buildPackage(pkg);
+  }
+};
+
 if (watch) {
-  build(getBuildConfig({ minify: false, watch }));
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
 } else {
-  build(getBuildConfig({ minify: false }));
-  build(getBuildConfig({ minify: 'esbuild' }));
-  build(getBuildConfig({ minify: false, core: true }));
+  void main();
 }

.vite/server.ts

@@ -12,8 +12,10 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
+  app.use(express.static('./packages/mermaid/dist'));
+  app.use(express.static('./packages/mermaid-example-diagram/dist'));
+  app.use(express.static('./packages/mermaid-mindmap/dist'));
   app.use(vite.middlewares);
-  app.use(express.static('dist'));
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
 

CONTRIBUTING.md

@@ -11,8 +11,8 @@ Here are a few things to know to get you started on the right path.
 ```bash
 git clone git@github.com:mermaid-js/mermaid.git
 cd mermaid
-yarn
-yarn test
+pnpm install
+pnpm test
 ```
 
 ## Committing code
@@ -103,7 +103,7 @@ This is important so that, if someone else does a change to the grammar that doe
 
 This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
 
-To start working with the e2e tests, run `yarn dev` to start the dev server, after that start cypress by running `cypress open` in the mermaid folder. (Make sure you have path to cypress in order, the binary is located in node_modules/.bin).
+To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder.
 
 The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress.
 

README.md

@@ -1,5 +1,22 @@
 # mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
+# Whoa, whats going on here?
+
+We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
+
+- Make it possible to select which diagrams to include on your site
+- Open up for lazy loading
+- Make it possible to add diagrams from outside of the Mermaid repository
+- Separate the release flow between different diagrams and the Mermaid core
+
+As such be aware of some changes..
+
+# We use pnpm now
+
+# The source code has moved
+
+It is now located in the src folder for each respective package located as subfolders in packages.
+
 English | [简体中文](./README.zh-CN.md)
 
 <img src="./img/header.png" alt="" />

cypress/platform/bundle-test.js

@@ -1,4 +1,4 @@
-import mermaid from '../../src/mermaid';
+import mermaid from '../../packages/mermaid/src/mermaid';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A

cypress/platform/e2e.html

@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8" />
     <!-- <meta charset="iso-8859-15"/> -->
-    <script src="./viewer.js" type="module" />
+    <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"

cypress/platform/knsv.html

@@ -6,6 +6,10 @@
       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"
@@ -38,7 +42,7 @@
     </style>
   </head>
   <body>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
 flowchart LR
   subgraph one
     direction LR
@@ -363,6 +367,8 @@ flowchart TD
     }
     </pre>
 
+    <!-- <script src="./mermaid.js"></script> -->
+    <script src="./mermaid-mindmap-detector.js"></script>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

cypress/platform/knsv2.html

@@ -6,6 +6,10 @@
       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"
@@ -45,41 +49,47 @@
   </head>
   <body>
     <div>Security check</div>
-    <div class="flex">
-      <pre id="diagram" class="mermaid">
-    flowchart TD
-    A[myClass1] --> B[default] & C[default]
-    B[default] & C[default] --> D[myClass2]
-    classDef default stroke-width:2px,fill:none,stroke:silver
-    classDef node color:red
-    classDef myClass1 color:#0000ff
-    classDef myClass2 stroke:#0000ff,fill:#ccccff
-    class A myClass1
-    class D myClass2
-  </pre
-      >
-      <div id="res" class=""></div>
-    </div>
+    <pre id="diagram" class="mermaid2">
+example-diagram
+        </pre
+    >
+    <pre id="diagram" class="mermaid">
+mindmap
+  root
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
+        </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="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        startOnLoad: false,
+        startOnLoad: true,
         logLevel: 0,
+        basePath: './packages/',
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
         alert('It worked');
       }
-
-      // document.querySelector('#diagram').innerHTML = diagram;
-      try {
-        mermaid.initThrowsErrors(undefined, '#diagram');
-      } catch (err) {
-        console.log('Caught error:', err);
-      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
     </script>
   </body>
 </html>

cypress/platform/per.html

@@ -0,0 +1,82 @@
+<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>
+    <div>Security check</div>
+    <pre id="diagram" class="mermaid">
+flowchart LR
+A-->B
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+            mindmap
+          root
+            ch1
+            ch2
+        </pre
+    >
+    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
+    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
+    <script src="./packages/mermaid/dist/mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        startOnLoad: true,
+        logLevel: 0,
+        basePath: './packages/',
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>

cypress/platform/viewer.js

@@ -1,4 +1,4 @@
-import mermaid2 from '../../src/mermaid';
+import mermaid2 from '../../packages/mermaid/src/mermaid';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));

demos/er.html

@@ -15,31 +15,47 @@
 
   <body>
     <pre class="mermaid">
-      erDiagram
-        title: This is a title
-        accDescription_ Test a description
 
-        CUSTOMER ||--o{ ORDER : places
-        ORDER ||--|{ LINE-ITEM : contains
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+erDiagram
+  %% title This is a title
+  %% accDescription Test a description
 
-        DELIVERY-ADDRESS {
-          int customerId
-          string addressLine1
-          string addressLine2
-          string city
-          string county
-          string state
-          string region
-          string country
-          string postalCode
-        }
+  "Person . CUSTOMER"||--o{ ORDER : places
+
+  ORDER ||--|{ "€£LINE_ITEM ¥" : contains
+
+  "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
+
+  "Address//StreetAddress::[DELIVERY ADDRESS]" {
+      int customerID FK
+      string line1 "this is the first address line comment"
+      string line2
+      string city
+      string region
+      string state
+      string postal_code
+      string country
+      }
+
+      "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
+        string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
+      }
+
+      "€£LINE_ITEM ¥" {
+        int orderID FK
+        int currencyId FK
+        number price
+        number quantity
+        number adjustment
+        number final_price
+      }
     </pre>
 
     <script type="module">
       import mermaid from '../src/mermaid';
       mermaid.initialize({
-        theme: 'base',
+        theme: 'default',
+
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

docs/8.6.0_docs.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Version 8.6.0 Changes
 

docs/CHANGELOG.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Change Log
 

docs/Configuration.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Configuration
 

docs/README.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # About Mermaid
 

docs/SUMMARY.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Summary
 

docs/Setup.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 

docs/Tutorials.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Tutorials
 

docs/_navbar.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 - Getting started
 

docs/_sidebar.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 - 📔 Introduction
 

docs/accessibility.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Accessibility Options
 

docs/breakingChanges.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Breaking changes
 

docs/c4c.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # C4 Diagrams
 

docs/classDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Class diagrams
 

docs/developer-docs/configuration.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Configuration
 

docs/development.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Development and Contribution 🙌
 
@@ -72,9 +72,8 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
 
 To start working with the e2e tests:
 
-1.  Run `yarn dev` to start the dev server
-2.  Start **Cypress** by running `cypress open` in the **mermaid** folder.
-    (Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
+1.  Run `pnpm run dev` to start the dev server
+2.  Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder.
 
 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
 

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 ---
 

docs/directives.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Directives
 

docs/entityRelationshipDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Entity Relationship Diagrams
 

docs/examples.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Examples
 

docs/faq.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Frequently Asked Questions
 

docs/flowchart.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Flowcharts - Basic Syntax
 

docs/gantt.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Gantt diagrams
 

docs/gitgraph.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Gitgraph Diagrams
 

docs/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.--><head>
+  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><head>
     <meta charset="UTF-8" />
     <title>
       mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,

docs/integrations.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Integrations
 

docs/introduction.md

@@ -1 +1 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.

docs/landing/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.--><head>
+  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

docs/mermaidCLI.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # mermaid CLI
 

docs/mindmap.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Mindmap
 

docs/n00b-advanced.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Advanced n00b mermaid (Coming soon..)
 

docs/n00b-gettingStarted.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # A Mermaid User-Guide for Beginners
 

docs/n00b-overview.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Overview for Beginners
 

docs/n00b-syntaxReference.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Diagram Syntax
 

docs/newDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Adding a New Diagram/Chart 📊
 

docs/pie.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Pie chart diagrams
 

docs/requirementDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Requirement Diagram
 

docs/security.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Security
 

docs/sequenceDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Sequence diagrams
 

docs/stateDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # State diagrams
 

docs/theming.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Theme Configuration
 
@@ -157,7 +157,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 ```
 
 | Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
+| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
 | darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
 | background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
 | fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
@@ -168,7 +168,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 | secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
 | secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
 | secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
-| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |     |     |
+| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |
 | tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
 | tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
 | noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |

docs/upgrading.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Upgrading
 

docs/usage.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Usage
 

docs/user-journey.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # User Journey Diagram
 

package.json

@@ -1,11 +1,13 @@
 {
-  "name": "mermaid",
+  "name": "mermaid-monorepo",
+  "private": true,
   "version": "9.2.0-rc2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.mjs",
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "type": "module",
+  "packageManager": "pnpm@7.12.2",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -26,25 +28,25 @@
   "scripts": {
     "clean": "rimraf dist",
     "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
-    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
-    "build:watch": "yarn build:code --watch",
-    "build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"",
-    "dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"",
-    "docs:build": "ts-node-esm --transpileOnly src/docs.mts",
-    "docs:verify": "yarn docs:build --verify",
-    "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
-    "release": "yarn build",
-    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
+    "build:watch": "pnpm build:vite --watch",
+    "build": "pnpm clean; concurrently \"pnpm build:vite\" \"pnpm build:types\"",
+    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server\"",
+    "docs:build": "ts-node-esm --transpileOnly packages/mermaid/src/docs.mts",
+    "docs:verify": "pnpm docs:build --verify",
+    "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
+    "release": "pnpm build",
+    "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
-    "lint:jison": "ts-node-esm --transpileOnly src/jison/lint.mts",
+    "lint:jison": "ts-node-esm --transpileOnly packages/mermaid/src/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "ci": "vitest run",
-    "test": "yarn lint && vitest run",
+    "test": "pnpm lint && vitest run",
     "test:watch": "vitest --coverage --watch",
-    "prepublishOnly": "yarn build && yarn test",
-    "prepare": "concurrently \"husky install\" \"yarn build\"",
+    "prepublishOnly": "pnpm build && pnpm test",
+    "prepare": "concurrently \"husky install\" \"pnpm build\"",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -65,6 +67,8 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "@types/uuid": "^8.3.4",
+    "@types/node": "^18.7.21",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -75,7 +79,9 @@
     "lodash": "^4.17.21",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.1.2"
+    "rollup": "^2.79.1",
+    "stylis": "^4.1.2",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
@@ -110,6 +116,7 @@
     "globby": "^13.1.2",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "29.x",
     "jison": "^0.4.18",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.0",
@@ -119,7 +126,6 @@
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
     "start-server-and-test": "^1.12.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",

packages/mermaid-example-diagram/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@mermaid-js/mermaid-example-diagram",
+  "version": "9.2.0-rc2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "main": "dist/mermaid-mindmap.core.mjs",
+  "module": "dist/mermaid-mindmap.core.mjs",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/mermaid-example-diagram.min.js",
+      "import": "./dist/mermaid-example-diagram.core.mjs"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "mindmap",
+    "mermaid"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:watch": "yarn build:code --watch",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
+    "release": "yarn build",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "ci": "vitest run",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest --coverage --watch",
+    "todo-prepublishOnly": "yarn build && yarn test",
+    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
+    "todo-pre-commit": "lint-staged"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "concurrently": "^7.4.0",
+    "rimraf": "^3.0.2"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}

packages/mermaid-example-diagram/src/add-diagram.ts

@@ -0,0 +1,17 @@
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/exampleDiagram';
+import * as db from './exampleDiagramDb';
+import renderer from './exampleDiagramRenderer';
+import styles from './styles';
+import { injectUtils } from './mermaidUtils';
+
+window.mermaid.connectDiagram(
+  'example-diagram',
+  {
+    db,
+    renderer,
+    parser,
+    styles,
+  },
+  injectUtils
+);

packages/mermaid-example-diagram/src/exampleDetector.ts

@@ -0,0 +1,10 @@
+/**
+ * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
+ *
+ * @param txt The diagram text will be passed to the detector
+ * @returns True if the diagram text matches a diagram of this type
+ */
+
+export const detector = (txt: string) => {
+  return txt.match(/^\s*example-diagram/) !== null;
+};

packages/mermaid-example-diagram/src/exampleDiagram.spec.js

@@ -0,0 +1,16 @@
+import { parser } from './parser/exampleDiagram';
+import db from './exampleDiagramDb';
+describe('when parsing an info graph it', function () {
+  let ex;
+  beforeEach(function () {
+    ex = parser;
+    ex.yy = db;
+  });
+
+  it('should handle an example-diagram definition', function () {
+    let str = `example-diagram
+    showInfo`;
+
+    ex.parse(str);
+  });
+});

packages/mermaid-example-diagram/src/exampleDiagramDb.js

@@ -0,0 +1,41 @@
+/** Created by knut on 15-01-14. */
+import { log } from './mermaidUtils';
+
+var message = '';
+var info = false;
+
+export const setMessage = (txt) => {
+  log.debug('Setting message to: ' + txt);
+  message = txt;
+};
+
+export const getMessage = () => {
+  return message;
+};
+
+/**
+ * Sets the info flag
+ *
+ * @param {boolean} inf
+ */
+export const setInfo = (inf) => {
+  info = inf;
+};
+
+/** @returns Returns the info flag */
+export const getInfo = () => {
+  return info;
+};
+
+export const clear = () => {
+  message = '';
+  info = false;
+};
+
+export default {
+  setMessage,
+  getMessage,
+  setInfo,
+  getInfo,
+  clear,
+};

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -0,0 +1,55 @@
+/** Created by knut on 14-12-11. */
+import { select } from 'd3';
+import { log, getConfig } from './mermaidUtils';
+
+/**
+ * Draws a an info picture in the tag with id: id based on the graph definition in text.
+ *
+ * @param {any} text
+ * @param {any} id
+ * @param {any} version
+ * @param diagObj
+ */
+export const draw = (text, id, version, diagObj) => {
+  try {
+    log.debug('Rendering info diagram\n' + text);
+
+    const securityLevel = getConfig().securityLevel;
+    // Handle root and Document for when rendering in sanbox mode
+    let sandboxElement;
+    if (securityLevel === 'sandbox') {
+      sandboxElement = select('#i' + id);
+    }
+    const root =
+      securityLevel === 'sandbox'
+        ? select(sandboxElement.nodes()[0].contentDocument.body)
+        : select('body');
+
+    // Parse the graph definition
+    // parser.parse(text);
+    // log.debug('Parsed info diagram');
+    // Fetch the default direction, use TD if none was found
+    const svg = root.select('#' + id);
+
+    const g = svg.append('g');
+
+    g.append('text') // text label for the x axis
+      .attr('x', 100)
+      .attr('y', 40)
+      .attr('class', 'version')
+      .attr('font-size', '32px')
+      .style('text-anchor', 'middle')
+      .text('v ' + version);
+
+    svg.attr('height', 100);
+    svg.attr('width', 400);
+    // svg.attr('viewBox', '0 0 300 150');
+  } catch (e) {
+    log.error('Error while rendering info diagram');
+    log.error(e.message);
+  }
+};
+
+export default {
+  draw,
+};

packages/mermaid-example-diagram/src/mermaidUtils.ts

@@ -0,0 +1,63 @@
+const warning = () => null;
+
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+export const LEVELS: Record<LogLevel, number> = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 3,
+  error: 4,
+  fatal: 5,
+};
+
+export const log: Record<keyof typeof LEVELS, typeof console.log> = {
+  trace: warning,
+  debug: warning,
+  info: warning,
+  warn: warning,
+  error: warning,
+  fatal: warning,
+};
+
+export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
+export let getConfig: () => object;
+export let sanitizeText: (str: string) => string;
+/**
+ * Placeholder for the real function that will be injected by mermaid.
+ */
+// eslint-disable @typescript-eslint/no-explicit-any
+export let setupGraphViewbox: (
+  graph: any,
+  svgElem: any,
+  padding: any,
+  useMaxWidth: boolean
+) => void;
+
+/**
+ * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
+ * @param _log
+ * @param _setLogLevel
+ * @param _getConfig
+ * @param _sanitizeText
+ * @param _setupGraphViewbox
+ */
+export const injectUtils = (
+  _log: Record<keyof typeof LEVELS, typeof console.log>,
+  _setLogLevel: any,
+  _getConfig: any,
+  _sanitizeText: any,
+  _setupGraphViewbox: any
+) => {
+  _log.debug('Mermaid utils injected into example-diagram');
+  log.trace = _log.trace;
+  log.debug = _log.debug;
+  log.info = _log.info;
+  log.warn = _log.warn;
+  log.error = _log.error;
+  log.fatal = _log.fatal;
+  setLogLevel = _setLogLevel;
+  getConfig = _getConfig;
+  sanitizeText = _sanitizeText;
+  setupGraphViewbox = _setupGraphViewbox;
+};

packages/mermaid-example-diagram/src/parser/exampleDiagram.jison

@@ -0,0 +1,43 @@
+%lex
+
+%options case-insensitive
+
+%{
+	// Pre-lexer code can go here
+%}
+
+%%
+
+"example-diagram"		      return 'example-diagram'    ;
+[\s\n\r]+         return 'NL'      ;
+[\s]+ 		      return 'space';
+"showInfo"		  return 'showInfo';
+<<EOF>>           return 'EOF'     ;
+.                 return 'TXT' ;
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+// %{	: example-diagram document 'EOF' { return yy; } }
+	: example-diagram document 'EOF' { return yy; }
+	;
+
+document
+	: /* empty */
+	| document line
+	;
+
+line
+	: statement { }
+	| 'NL'
+	;
+
+statement
+	:  showInfo   { yy.setInfo(true);  }
+	;
+
+%%

packages/mermaid-example-diagram/src/registry.ts

@@ -0,0 +1,33 @@
+// @ts-ignore: TODO Fix ts errors
+import { detector } from './exampleDetector';
+
+const scriptElement = document.currentScript as HTMLScriptElement;
+const path = scriptElement.src;
+const lastSlash = path.lastIndexOf('/');
+const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
+
+if (typeof document !== 'undefined') {
+  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+    window.mermaid.detectors.push({ id: 'example-diagram', detector });
+  } else {
+    window.mermaid = {};
+    window.mermaid.detectors = [{ id: 'example-diagram', detector }];
+  }
+
+  /*
+   * Wait for document loaded before starting the execution.
+   */
+  window.addEventListener(
+    'load',
+    () => {
+      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+        window.mermaid.detectors.push({
+          id: 'example-diagram',
+          detector,
+          path: baseFolder,
+        });
+      }
+    },
+    false
+  );
+}

packages/mermaid-example-diagram/src/types/index.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    mermaid: any; // 👈️ turn off type checking
+  }
+}

packages/mermaid-example-diagram/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}

packages/mermaid-mindmap/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@mermaid-js/mermaid-mindmap",
+  "version": "9.2.0-rc2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "main": "dist/mermaid-mindmap.core.mjs",
+  "module": "dist/mermaid-mindmap.core.mjs",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/mermaid-mindmap.min.js",
+      "import": "./dist/mermaid-mindmap.core.mjs"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "mindmap",
+    "mermaid"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:watch": "yarn build:code --watch",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
+    "release": "yarn build",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "ci": "vitest run",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest --coverage --watch",
+    "todo-prepublishOnly": "yarn build && yarn test",
+    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
+    "todo-pre-commit": "lint-staged"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {
+    "@braintree/sanitize-url": "^6.0.0",
+    "cytoscape": "^3.23.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.1.0",
+    "d3": "^7.0.0",
+    "non-layered-tidy-tree-layout": "^2.0.2"
+  },
+  "devDependencies": {
+    "concurrently": "^7.4.0",
+    "rimraf": "^3.0.2"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}

packages/mermaid-mindmap/src/add-diagram.ts

@@ -0,0 +1,17 @@
+// @ts-ignore: TODO Fix ts errors
+import mindmapParser from './parser/mindmap';
+import * as mindmapDb from './mindmapDb';
+import mindmapRenderer from './mindmapRenderer';
+import mindmapStyles from './styles';
+import { injectUtils } from './mermaidUtils';
+
+window.mermaid.connectDiagram(
+  'mindmap',
+  {
+    db: mindmapDb,
+    renderer: mindmapRenderer,
+    parser: mindmapParser,
+    styles: mindmapStyles,
+  },
+  injectUtils
+);

packages/mermaid-mindmap/src/mermaidUtils.ts

@@ -0,0 +1,81 @@
+const warning = (s: string) => {
+  // Todo remove debug code
+  console.error('Log function was called before initialization', s); // eslint-disable-line
+};
+
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+export const LEVELS: Record<LogLevel, number> = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 3,
+  error: 4,
+  fatal: 5,
+};
+
+export const log: Record<keyof typeof LEVELS, typeof console.log> = {
+  trace: warning,
+  debug: warning,
+  info: warning,
+  warn: warning,
+  error: warning,
+  fatal: warning,
+};
+
+export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
+export let getConfig: () => object;
+export let sanitizeText: (str: string) => string;
+// eslint-disable @typescript-eslint/no-explicit-any
+export let setupGraphViewbox: (
+  graph: any,
+  svgElem: any,
+  padding: any,
+  useMaxWidth: boolean
+) => void;
+
+export const injectUtils = (
+  _log: Record<keyof typeof LEVELS, typeof console.log>,
+  _setLogLevel: any,
+  _getConfig: any,
+  _sanitizeText: any,
+  _setupGraphViewbox: any
+) => {
+  _log.info('Mermaid utils injected');
+  log.trace = _log.trace;
+  log.debug = _log.debug;
+  log.info = _log.info;
+  log.warn = _log.warn;
+  log.error = _log.error;
+  log.fatal = _log.fatal;
+  setLogLevel = _setLogLevel;
+  getConfig = _getConfig;
+  sanitizeText = _sanitizeText;
+  setupGraphViewbox = _setupGraphViewbox;
+};
+
+/*
+const warning = (..._args: any[]) => {
+  console.error('Log function was called before initialization');
+};
+
+export let log = {
+  trace: warning,
+  debug: warning,
+  info: warning,
+  warn: warning,
+  error: warning,
+  fatal: warning,
+};
+export let setLogLevel;
+export let getConfig;
+export let sanitizeText;
+export let setupGraphViewbox;
+export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
+  log = _log;
+  setLogLevel = _setLogLevel;
+  getConfig = _getConfig;
+  sanitizeText = _sanitizeText;
+  setupGraphViewbox = _setupGraphViewbox;
+};
+*/

packages/mermaid-mindmap/src/mindmap.spec.js

@@ -1,6 +1,16 @@
 import { parser as mindmap } from './parser/mindmap';
 import * as mindmapDB from './mindmapDb';
-import { setLogLevel } from '../../diagram-api/diagramAPI';
+import { injectUtils } from './mermaidUtils';
+// Todo fix utils functions for tests
+import {
+  log,
+  setLogLevel,
+  getConfig,
+  sanitizeText,
+  setupGraphViewBox,
+} from '../../mermaid/src/diagram-api/diagramAPI';
+
+injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
 
 describe('when parsing a mindmap ', function () {
   beforeEach(function () {

packages/mermaid-mindmap/src/mindmapDb.js

@@ -1,5 +1,5 @@
 /** Created by knut on 15-01-14. */
-import { sanitizeText, getConfig, log as _log } from '../../diagram-api/diagramAPI';
+import { sanitizeText, getConfig, log } from './mermaidUtils';
 
 let nodes = [];
 let cnt = 0;
@@ -131,21 +131,14 @@ export const type2Str = (type) => {
       return 'no-border';
   }
 };
+
+export let parseError;
+export const setErrorHandler = (handler) => {
+  parseError = handler;
+};
+
 // Expose logger to grammar
-export const log = _log;
+export const getLogger = () => log;
+
 export const getNodeById = (id) => nodes[id];
 export const getElementById = (id) => elements[id];
-// export default {
-// //   getMindmap,
-//   // addNode,
-//   // clear,
-//   // nodeType,
-//   // getType,
-//   // decorateNode,
-//   // setElementForId,
-//   getElementById: (id) => elements[id],
-//   // getNodeById: (id) => nodes.find((node) => node.id === id),
-//   getNodeById: (id) => nodes[id],
-//   // type2Str,
-//   // parseError
-// };

packages/mermaid-mindmap/src/mindmapDetector.ts

@@ -0,0 +1,3 @@
+export const mindmapDetector = (txt: string) => {
+  return txt.match(/^\s*mindmap/) !== null;
+};

packages/mermaid-mindmap/src/mindmapRenderer.js

@@ -0,0 +1,226 @@
+/** Created by knut on 14-12-11. */
+import { select } from 'd3';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+import svgDraw from './svgDraw';
+import cytoscape from 'cytoscape';
+import coseBilkent from 'cytoscape-cose-bilkent';
+import * as db from './mindmapDb';
+
+// Inject the layout algorithm into cytoscape
+cytoscape.use(coseBilkent);
+
+/**
+ * @param {any} svg The svg element to draw the diagram onto
+ * @param {object} mindmap The maindmap data and hierarchy
+ * @param section
+ * @param {object} conf The configuration object
+ */
+function drawNodes(svg, mindmap, section, conf) {
+  svgDraw.drawNode(svg, mindmap, section, conf);
+  if (mindmap.children) {
+    mindmap.children.forEach((child, index) => {
+      drawNodes(svg, child, section < 0 ? index : section, conf);
+    });
+  }
+}
+
+/**
+ * @param edgesElem
+ * @param mindmap
+ * @param parent
+ * @param depth
+ * @param section
+ * @param edgesEl
+ * @param cy
+ */
+function drawEdges(edgesEl, cy) {
+  cy.edges().map((edge, id) => {
+    const data = edge.data();
+    if (edge[0]._private.bodyBounds) {
+      const bounds = edge[0]._private.rscratch;
+      log.trace('Edge: ', id, data);
+      edgesEl
+        .insert('path')
+        .attr(
+          'd',
+          `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
+        )
+        .attr('class', 'edge section-edge-' + data.section + ' edge-depth-' + data.depth);
+    }
+  });
+}
+
+/**
+ * @param {any} svg The svg element to draw the diagram onto
+ * @param {object} mindmap The maindmap data and hierarchy
+ * @param section
+ * @param cy
+ * @param {object} conf The configuration object
+ * @param level
+ */
+function addNodes(mindmap, cy, conf, level) {
+  cy.add({
+    group: 'nodes',
+    data: {
+      id: mindmap.id,
+      labelText: mindmap.descr,
+      height: mindmap.height,
+      width: mindmap.width,
+      level: level,
+      nodeId: mindmap.id,
+      padding: mindmap.padding,
+      type: mindmap.type,
+    },
+    position: {
+      x: mindmap.x,
+      y: mindmap.y,
+    },
+  });
+  if (mindmap.children) {
+    mindmap.children.forEach((child) => {
+      addNodes(child, cy, conf, level + 1);
+      cy.add({
+        group: 'edges',
+        data: {
+          id: `${mindmap.id}_${child.id}`,
+          source: mindmap.id,
+          target: child.id,
+          depth: level,
+          section: child.section,
+        },
+      });
+    });
+  }
+}
+
+/**
+ * @param node
+ * @param conf
+ * @param cy
+ */
+function layoutMindmap(node, conf) {
+  return new Promise((resolve) => {
+    if (node.children.length === 0) {
+      return node;
+    }
+
+    // Add temporary render element
+    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
+    const cy = cytoscape({
+      container: document.getElementById('cy'), // container to render in
+      style: [
+        {
+          selector: 'edge',
+          style: {
+            'curve-style': 'bezier',
+          },
+        },
+      ],
+    });
+    // Remove element after layout
+    renderEl.remove();
+    addNodes(node, cy, conf, 0);
+
+    // Make cytoscape care about the dimensisions of the nodes
+    cy.nodes().forEach(function (n) {
+      n.layoutDimensions = () => {
+        const data = n.data();
+        return { w: data.width, h: data.height };
+      };
+    });
+
+    cy.layout({
+      name: 'cose-bilkent',
+      quality: 'proof',
+      // headless: true,
+      styleEnabled: false,
+      animate: false,
+    }).run();
+    cy.ready((e) => {
+      log.info('Ready', e);
+      resolve(cy);
+    });
+  });
+}
+/**
+ * @param node
+ * @param cy
+ * @param positionedMindmap
+ * @param conf
+ */
+function positionNodes(cy) {
+  cy.nodes().map((node, id) => {
+    const data = node.data();
+    data.x = node.position().x;
+    data.y = node.position().y;
+    svgDraw.positionNode(data);
+    const el = db.getElementById(data.nodeId);
+    log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data);
+    el.attr(
+      'transform',
+      `translate(${node.position().x - data.width / 2}, ${node.position().y - data.height / 2})`
+    );
+    el.attr('attr', `apa-${id})`);
+  });
+}
+
+/**
+ * Draws a an info picture in the tag with id: id based on the graph definition in text.
+ *
+ * @param {any} text
+ * @param {any} id
+ * @param {any} version
+ * @param diagObj
+ */
+
+export const draw = async (text, id, version, diagObj) => {
+  const conf = getConfig();
+
+  // This is done only for throwing the error if the text is not valid.
+  diagObj.db.clear();
+  // Parse the graph definition
+  diagObj.parser.parse(text);
+
+  log.debug('Renering info diagram\n' + text);
+
+  const securityLevel = getConfig().securityLevel;
+  // Handle root and Document for when rendering in sanbox mode
+  let sandboxElement;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? select(sandboxElement.nodes()[0].contentDocument.body)
+      : select('body');
+  // Parse the graph definition
+
+  const svg = root.select('#' + id);
+
+  svg.append('g');
+  const mm = diagObj.db.getMindmap();
+
+  // Draw the graph and start with drawing the nodes without proper position
+  // this gives us the size of the nodes and we can set the positions later
+
+  const edgesElem = svg.append('g');
+  edgesElem.attr('class', 'mindmap-edges');
+  const nodesElem = svg.append('g');
+  nodesElem.attr('class', 'mindmap-nodes');
+  drawNodes(nodesElem, mm, -1, conf);
+
+  // Next step is to layout the mindmap, giving each node a position
+
+  const cy = await layoutMindmap(mm, conf);
+
+  // // After this we can draw, first the edges and the then nodes with the correct position
+  drawEdges(edgesElem, cy, conf);
+  positionNodes(cy, conf);
+
+  // Setup the view box and size of the svg element
+  setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
+};
+
+export default {
+  draw,
+};

packages/mermaid-mindmap/src/parser/mindmap.jison

@@ -0,0 +1,108 @@
+/** mermaid
+ *  https://knsv.github.io/mermaid
+ *  (c) 2015 Knut Sveidqvist
+ *  MIT license.
+ */
+%lex
+
+%options case-insensitive
+
+%{
+	// Pre-lexer code can go here
+%}
+%x NODE
+%x NSTR
+%x ICON
+%x CLASS
+
+%%
+
+\s*\%\%.*          {yy.getLogger().trace('Found comment',yytext);}
+// \%\%[^\n]*\n                             /* skip comments */
+"mindmap"		       return 'MINDMAP';
+":::"              { this.begin('CLASS'); }
+<CLASS>.+			     { this.popState();return 'CLASS'; }
+<CLASS>\n				   { this.popState();}
+// [\s]*"::icon("   { this.begin('ICON'); }
+"::icon("   { yy.getLogger().trace('Begin icon');this.begin('ICON'); }
+[\n]+               return 'NL';
+<ICON>[^\)]+			 { return 'ICON'; }
+<ICON>\)				   {yy.getLogger().trace('end icon');this.popState();}
+"-)"               { yy.getLogger().trace('Exploding node'); this.begin('NODE');return 'NODE_DSTART'; }
+"(-"               { yy.getLogger().trace('Cloud'); this.begin('NODE');return 'NODE_DSTART'; }
+"))"               { yy.getLogger().trace('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; }
+")"               { yy.getLogger().trace('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; }
+"(("               { this.begin('NODE');return 'NODE_DSTART'; }
+"("                { this.begin('NODE');return 'NODE_DSTART'; }
+"["                { this.begin('NODE');return 'NODE_DSTART'; }
+[\s]+              return 'SPACELIST'                 /* skip all whitespace */    ;
+// !(-\()            return 'NODE_ID';
+[^\(\[\n\-\)]+         return 'NODE_ID';
+<<EOF>>            return 'EOF';
+<NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
+<NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
+<NSTR>["]          {this.popState();}
+<NODE>[\)]\)         {this.popState();yy.getLogger().trace('node end ))');return "NODE_DEND";}
+<NODE>[\)]         {this.popState();yy.getLogger().trace('node end )');return "NODE_DEND";}
+<NODE>[\]]         {this.popState();yy.getLogger().trace('node end ...',yytext);return "NODE_DEND";}
+<NODE>"(-"         {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
+<NODE>"-)"         {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
+<NODE>"(("         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
+<NODE>"("         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
+<NODE>[^\)\]\(]+     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
+<NODE>.+(?!\(\()     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
+// [\[]               return 'NODE_START';
+// .+                 return 'TXT' ;
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+// %{	: info document 'EOF' { return yy; } }
+	: MINDMAP document  { return yy; }
+	| MINDMAP NL document  { return yy; }
+  |	SPACELIST MINDMAP document  { return yy; }
+	;
+
+stop
+  : NL {yy.getLogger().trace('Stop NL ');}
+  | EOF {yy.getLogger().trace('Stop EOF ');}
+  | stop NL {yy.getLogger().trace('Stop NL2 ');}
+  | stop EOF {yy.getLogger().trace('Stop EOF2 ');}
+  ;
+document
+	: document statement stop
+	| statement stop
+	;
+
+statement
+	: SPACELIST node       { yy.getLogger().trace('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
+	| SPACELIST ICON       { yy.getLogger().trace('Icon: ',$2);yy.decorateNode({icon: $2}); }
+	| SPACELIST CLASS      { yy.decorateNode({class: $2}); }
+	| node					       { yy.getLogger().trace('Node: ',$1.id);yy.addNode(0, $1.id, $1.descr, $1.type);  }
+	| ICON                 { yy.decorateNode({icon: $1}); }
+	| CLASS                { yy.decorateNode({class: $1}); }
+  | SPACELIST
+	;
+
+
+
+node
+  :nodeWithId
+  |nodeWithoutId
+  ;
+
+nodeWithoutId
+  :   NODE_DSTART NODE_DESCR NODE_DEND
+	      { yy.getLogger().trace("node found ..", $1); $$ = { id: $2, descr: $2, type: yy.getType($1, $3) }; }
+  ;
+
+nodeWithId
+	:  NODE_ID             { $$ = { id: $1, descr: $1, type: yy.nodeType.DEFAULT }; }
+	|  NODE_ID NODE_DSTART NODE_DESCR NODE_DEND
+	                       { yy.getLogger().trace("node found ..", $1); $$ = { id: $1, descr: $3, type: yy.getType($2, $4) }; }
+	;
+%%

packages/mermaid-mindmap/src/registry.ts

@@ -0,0 +1,34 @@
+// @ts-ignore: TODO Fix ts errors
+import { mindmapDetector } from './mindmapDetector';
+
+const scriptElement = document.currentScript as HTMLScriptElement;
+const path = scriptElement.src;
+const lastSlash = path.lastIndexOf('/');
+const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
+
+if (typeof document !== 'undefined') {
+  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
+  } else {
+    window.mermaid = {};
+    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
+  }
+
+  /*!
+   * Wait for document loaded before starting the execution.
+   */
+  window.addEventListener(
+    'load',
+    () => {
+      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
+        window.mermaid.detectors.push({
+          id: 'mindmap',
+          detector: mindmapDetector,
+          path: baseFolder,
+        });
+        console.error(window.mermaid.detectors); // eslint-disable-line no-console
+      }
+    },
+    false
+  );
+}

packages/mermaid-mindmap/src/svgDraw.js

@@ -164,6 +164,7 @@ const roundedRectBkg = function (elem, node) {
  */
 export const drawNode = function (elem, node, section, conf) {
   const nodeElem = elem.append('g');
+  node.section = section;
   nodeElem.attr(
     'class',
     (node.class ? node.class + ' ' : '') +
@@ -252,9 +253,9 @@ export const drawNode = function (elem, node, section, conf) {
   }
 
   // Position the node to its coordinate
-  if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
-    nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
-  }
+  // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
+  //   nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
+  // }
   db.setElementForId(node.id, nodeElem);
   return node.height;
 };

packages/mermaid-mindmap/src/types/index.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    mermaid: any; // 👈️ turn off type checking
+  }
+}

packages/mermaid-mindmap/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}

packages/mermaid/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "mermaid",
+  "version": "9.2.0-rc2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "main": "./dist/mermaid.core.mjs",
+  "module": "./dist/mermaid.core.mjs",
+  "types": "./dist/mermaid.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/mermaid.min.js",
+      "import": "./dist/mermaid.core.mjs",
+      "types": "./dist/mermaid.d.ts"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "flowchart",
+    "sequence diagram",
+    "gantt",
+    "class diagram",
+    "git graph"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:code": "node .esbuild/esbuild.cjs",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:watch": "yarn build:code --watch",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
+    "docs:build": "ts-node-esm src/docs.mts",
+    "docs:verify": "yarn docs:build --verify",
+    "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
+    "release": "yarn build",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "cypress": "cypress run",
+    "cypress:open": "cypress open",
+    "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
+    "ci": "vitest run",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest --coverage --watch",
+    "prepublishOnly": "yarn build && yarn test",
+    "todo-prepare": "concurrently \"husky install\" \"yarn build\"",
+    "pre-commit": "lint-staged"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {
+    "@braintree/sanitize-url": "^6.0.0",
+    "d3": "^7.0.0",
+    "dagre": "^0.8.5",
+    "dagre-d3": "^0.6.4",
+    "dompurify": "2.4.0",
+    "fast-clone": "^1.5.13",
+    "graphlib": "^2.1.8",
+    "khroma": "^2.0.0",
+    "lodash": "^4.17.21",
+    "moment-mini": "^2.24.0",
+    "non-layered-tidy-tree-layout": "^2.0.2",
+    "stylis": "^4.1.2"
+  },
+  "devDependencies": {
+    "@applitools/eyes-cypress": "^3.25.7",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.0.0",
+    "@types/d3": "^7.4.0",
+    "@types/dompurify": "^2.3.4",
+    "@types/eslint": "^8.4.6",
+    "@types/express": "^4.17.13",
+    "@types/jsdom": "^20.0.0",
+    "@types/lodash": "^4.14.185",
+    "@types/prettier": "^2.7.0",
+    "@types/stylis": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "@vitest/coverage-c8": "^0.23.2",
+    "@vitest/ui": "^0.23.2",
+    "concurrently": "^7.4.0",
+    "coveralls": "^3.1.1",
+    "cypress": "^10.0.0",
+    "cypress-image-snapshot": "^4.0.1",
+    "documentation": "13.2.0",
+    "esbuild": "^0.15.8",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-markdown": "^3.0.0",
+    "express": "^4.18.1",
+    "globby": "^13.1.2",
+    "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jison": "^0.4.18",
+    "js-base64": "3.7.2",
+    "jsdom": "^20.0.0",
+    "lint-staged": "^13.0.0",
+    "moment": "^2.23.0",
+    "path-browserify": "^1.0.1",
+    "prettier": "^2.7.1",
+    "prettier-plugin-jsdoc": "^0.4.2",
+    "remark": "^14.0.2",
+    "rimraf": "^3.0.2",
+    "start-server-and-test": "^1.12.6",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.3",
+    "unist-util-flatmap": "^1.0.0",
+    "vitest": "^0.23.1"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}

packages/mermaid/src/Diagram.ts

@@ -1,7 +1,7 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagram } from './diagram-api/diagramAPI';
-import { detectType } from './diagram-api/detectType';
+import { getDiagram, loadDiagram } from './diagram-api/diagramAPI';
+import { detectType, getPathForDiagram } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
   type = 'graph';
@@ -26,11 +26,7 @@ export class Diagram {
       log.debug('Initialized diagram ' + this.type, cnf);
     }
     this.txt += '\n';
-    this.parser.parser.yy.graphType = this.type;
-    this.parser.parser.yy.parseError = (str: string, hash: string) => {
-      const error = { str, hash };
-      throw error;
-    };
+
     this.parse(this.txt, parseError);
   }
 
@@ -71,3 +67,21 @@ export class Diagram {
 }
 
 export default Diagram;
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const getDiagramFromText = async (txt: string, parseError?: Function) => {
+  const type = detectType(txt, configApi.getConfig());
+  try {
+    // Trying to find the diagram
+    getDiagram(type);
+  } catch (error) {
+    // Diagram not avaiable, loading it
+    const path = getPathForDiagram(type);
+    // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
+    await loadDiagram(path + 'mermaid-' + type + '.js');
+    // new diagram will try getDiagram again and if fails then it is a valid throw
+  }
+  // If either of the above worked, we have the diagram
+  // logic and can continue
+  return new Diagram(txt, parseError);
+};

packages/mermaid/src/dagre-wrapper/GraphObjects.md

@@ -1,140 +1,140 @@
-# Cluster handling
-
-Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
-
-In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
-
-```mermaid
-flowchart
-  subgraph C1
-    a --> b
-  end
-  subgraph C2
-    c
-  end
-  C1 --> C2
-```
-
-In this case the dagre-wrapper will transform the graph to the graph below.
-
-```mermaid
-flowchart
-  C1 --> C2
-```
-
-The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
-
-When rendering this diagram it it beeing rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
-
-```
-{ clusterNode: true, graph }
-```
-
-_Data for a clusterNode_
-
-When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
-
-```mermaid
-flowchart
-  subgraph C1
-    a
-  end
-  subgraph C2
-    b
-  end
-  a --> C2
-```
-
-To handle this case a special type of edge is inserted. The edge to/from the cluster is replaced with an edge to/from a node in the cluster which is tagged with toCluster/fromCluster. When rendering this edge the intersection between the edge and the border of the cluster is calculated making the edge start/stop there. In practice this renders like an an edge to/from the cluster.
-
-In the diagram above the root diagram would be rendered with C1 whereas C2 would be rendered recursively.
-
-Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.
-
-# Graph objects and their properties
-
-Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
-
-## node
-
-Sample object:
-
-```json
-{
-  "shape": "rect",
-  "labelText": "Test",
-  "rx": 0,
-  "ry": 0,
-  "class": "default",
-  "style": "",
-  "id": "Test",
-  "type": "group",
-  "padding": 15
-}
-```
-
-This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
-
-| property   | description                                                                                      |
-| ---------- | ------------------------------------------------------------------------------------------------ |
-| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                  |
-| shape      | The shape of the node.                                                                           |
-| labelText  | The text on the label                                                                            |
-| rx         | The corner radius - maybe part of the shape instead? Used for rects.                             |
-| ry         | The corner radius - maybe part of the shape instead? Used for rects.                             |
-| classes    | Classes to be set for the shape. Not used                                                        |
-| style      | Css styles for the actual shape                                                                  |
-| id         | id of the shape                                                                                  |
-| type       | if set to group then this node indicates _a cluster_.                                            |
-| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
-| data       | Non-generic data specific to the shape.                                                          |
-
-# edge
-
-arrowType sets the type of arrows to use. The following arrow types are currently supported:
-
-arrow_cross
-double_arrow_cross
-arrow_point
-double_arrow_point
-arrow_circle
-double_arrow_circle
-
-Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
-
-Required edgeData for proper rendering:
-
-| property   | description                                                          |
-| ---------- | -------------------------------------------------------------------- |
-| id         | Id of the edge                                                       |
-| arrowHead  | overlap between arrowHead and arrowType?                             |
-| arrowType  | overlap between arrowHead and arrowType?                             |
-| style      |                                                                      |
-| labelStyle |                                                                      |
-| label      | overlap between label and labelText?                                 |
-| labelPos   |                                                                      |
-| labelType  | overlap between label and labelText?                                 |
-| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
-| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
-
-# Markers
-
-Define what markers that should be included in the diagram with the insert markers function. The function takes two arguments, first the element in which the markers should be included and a list of the markers that should be added.
-
-Ex:
-insertMarkers(el, \['point', 'circle'\])
-
-The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.
-
-Current markers:
-
-- point - the standard arrow from flowcharts
-- circle - Arrows ending with circle
-- cross - arrows starting and ending with a cross
-
-// Todo - in case of common renderer
-
-# Common functions used by the renderer to be implemented by the Db
-
-getDirection
-getClasses
+# Cluster handling
+
+Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
+
+In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
+
+```mermaid
+flowchart
+  subgraph C1
+    a --> b
+  end
+  subgraph C2
+    c
+  end
+  C1 --> C2
+```
+
+In this case the dagre-wrapper will transform the graph to the graph below.
+
+```mermaid
+flowchart
+  C1 --> C2
+```
+
+The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
+
+When rendering this diagram it it beeing rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
+
+```
+{ clusterNode: true, graph }
+```
+
+_Data for a clusterNode_
+
+When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
+
+```mermaid
+flowchart
+  subgraph C1
+    a
+  end
+  subgraph C2
+    b
+  end
+  a --> C2
+```
+
+To handle this case a special type of edge is inserted. The edge to/from the cluster is replaced with an edge to/from a node in the cluster which is tagged with toCluster/fromCluster. When rendering this edge the intersection between the edge and the border of the cluster is calculated making the edge start/stop there. In practice this renders like an an edge to/from the cluster.
+
+In the diagram above the root diagram would be rendered with C1 whereas C2 would be rendered recursively.
+
+Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.
+
+# Graph objects and their properties
+
+Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
+
+## node
+
+Sample object:
+
+```json
+{
+  "shape": "rect",
+  "labelText": "Test",
+  "rx": 0,
+  "ry": 0,
+  "class": "default",
+  "style": "",
+  "id": "Test",
+  "type": "group",
+  "padding": 15
+}
+```
+
+This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
+
+| property   | description                                                                                      |
+| ---------- | ------------------------------------------------------------------------------------------------ |
+| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                  |
+| shape      | The shape of the node.                                                                           |
+| labelText  | The text on the label                                                                            |
+| rx         | The corner radius - maybe part of the shape instead? Used for rects.                             |
+| ry         | The corner radius - maybe part of the shape instead? Used for rects.                             |
+| classes    | Classes to be set for the shape. Not used                                                        |
+| style      | Css styles for the actual shape                                                                  |
+| id         | id of the shape                                                                                  |
+| type       | if set to group then this node indicates _a cluster_.                                            |
+| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
+| data       | Non-generic data specific to the shape.                                                          |
+
+# edge
+
+arrowType sets the type of arrows to use. The following arrow types are currently supported:
+
+arrow_cross
+double_arrow_cross
+arrow_point
+double_arrow_point
+arrow_circle
+double_arrow_circle
+
+Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.
+
+Required edgeData for proper rendering:
+
+| property   | description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| id         | Id of the edge                                                       |
+| arrowHead  | overlap between arrowHead and arrowType?                             |
+| arrowType  | overlap between arrowHead and arrowType?                             |
+| style      |                                                                      |
+| labelStyle |                                                                      |
+| label      | overlap between label and labelText?                                 |
+| labelPos   |                                                                      |
+| labelType  | overlap between label and labelText?                                 |
+| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
+| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
+
+# Markers
+
+Define what markers that should be included in the diagram with the insert markers function. The function takes two arguments, first the element in which the markers should be included and a list of the markers that should be added.
+
+Ex:
+insertMarkers(el, \['point', 'circle'\])
+
+The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.
+
+Current markers:
+
+- point - the standard arrow from flowcharts
+- circle - Arrows ending with circle
+- cross - arrows starting and ending with a cross
+
+// Todo - in case of common renderer
+
+# Common functions used by the renderer to be implemented by the Db
+
+getDirection
+getClasses