Fix for broken test

Mindmap cleanup
Using cose-bilkent layout algorithm for mindmaps
2025-10-15 03:59:46 +02:00 · 2022-10-03 11:22:06 +02:00 · 2022-10-03 11:08:55 +02:00 · 2022-10-03 10:05:12 +02:00 · 2022-10-03 07:02:25 +02:00 · 2022-10-03 07:01:56 +02:00
68 changed files with 311 additions and 300 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-yarn pre-commit
+pnpm run pre-commit
--- a/.lintstagedrc.json
+++ b/.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"]
 }
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -12,8 +12,10 @@ async function createServer() {
    appType: 'custom', // don't include Vite's default HTML handling middlewares
  });

-  app.use(vite.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('demos'));
  app.use(express.static('cypress/platform'));

--- a/CONTRIBUTING.md
+++ b/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.

--- a/README.md
+++ b/README.md
@@ -9,13 +9,13 @@ We are transforming the Mermaid repository to a so called mono-repo. This is a p
 - 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 sime changes..
+As such be aware of some changes..

 # We use pnpm now

 # The source code has moved

-It is now localted in the src forunder for respoective package located as subfoders in packages.
+It is now located in the src folder for each respective package located as subfolders in packages.

 English | [简体中文](./README.zh-CN.md)

--- a/cypress/platform/knsv.html
+++ b/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
@@ -364,8 +368,8 @@ flowchart TD
    </pre>

    <!-- <script src="./mermaid.js"></script> -->
-    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
-    <script src="./packages/mermaid/dist/mermaid.js"></script>
+    <script src="./mermaid-mindmap-detector.js"></script>
+    <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
--- a/cypress/platform/knsv2.html
+++ b/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,20 +49,30 @@
  </head>
  <body>
    <div>Security check</div>
-    <pre id="diagram" class="mermaid">
-info
-        </pre
-    >
    <pre id="diagram" class="mermaid2">
-            mindmap
-          root
-            ch1
-            ch2
+example-diagram
        </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>
+    <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);
--- a/docs/8.6.0_docs.md
+++ b/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

--- a/docs/CHANGELOG.md
+++ b/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

--- a/docs/Configuration.md
+++ b/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

--- a/docs/README.md
+++ b/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

--- a/docs/SUMMARY.md
+++ b/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

--- a/docs/Setup.md
+++ b/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. -->

--- a/docs/Tutorials.md
+++ b/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

--- a/docs/_navbar.md
+++ b/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

--- a/docs/_sidebar.md
+++ b/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

--- a/docs/accessibility.md
+++ b/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

--- a/docs/breakingChanges.md
+++ b/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

--- a/docs/c4c.md
+++ b/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

--- a/docs/classDiagram.md
+++ b/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

--- a/docs/developer-docs/configuration.md
+++ b/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

--- a/docs/development.md
+++ b/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.

--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/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.

 ---

--- a/docs/directives.md
+++ b/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

--- a/docs/entityRelationshipDiagram.md
+++ b/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

--- a/docs/examples.md
+++ b/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

--- a/docs/faq.md
+++ b/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

--- a/docs/flowchart.md
+++ b/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

--- a/docs/gantt.md
+++ b/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

--- a/docs/gitgraph.md
+++ b/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

--- a/docs/index.html
+++ b/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,
--- a/docs/integrations.md
+++ b/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

--- a/docs/introduction.md
+++ b/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.
--- a/docs/landing/index.html
+++ b/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" />
--- a/docs/mermaidCLI.md
+++ b/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

--- a/docs/mindmap.md
+++ b/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

--- a/docs/n00b-advanced.md
+++ b/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..)

--- a/docs/n00b-gettingStarted.md
+++ b/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

--- a/docs/n00b-overview.md
+++ b/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

--- a/docs/n00b-syntaxReference.md
+++ b/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

--- a/docs/newDiagram.md
+++ b/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 📊

--- a/docs/pie.md
+++ b/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

--- a/docs/requirementDiagram.md
+++ b/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

--- a/docs/security.md
+++ b/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

--- a/docs/sequenceDiagram.md
+++ b/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

--- a/docs/stateDiagram.md
+++ b/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

--- a/docs/theming.md
+++ b/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                                                                                                |
--- a/docs/upgrading.md
+++ b/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

--- a/docs/usage.md
+++ b/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

--- a/docs/user-journey.md
+++ b/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

--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
    "test": "pnpm lint && vitest run",
    "test:watch": "vitest --coverage --watch",
    "prepublishOnly": "pnpm build && pnpm test",
-    "todo-prepare": "concurrently \"husky install\" \"pnpm build\"",
+    "prepare": "concurrently \"husky install\" \"pnpm build\"",
    "pre-commit": "lint-staged"
  },
  "repository": {
--- a/packages/mermaid-example-diagram/src/exampleDetector.ts
+++ b/packages/mermaid-example-diagram/src/exampleDetector.ts
@@ -1,3 +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;
 };
--- a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
@@ -7,8 +7,8 @@ describe('when parsing an info graph it', function () {
    ex.yy = db;
  });

-  it('should handle an info definition', function () {
-    let str = `info
+  it('should handle an example-diagram definition', function () {
+    let str = `example-diagram
    showInfo`;

    ex.parse(str);
--- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
@@ -13,21 +13,29 @@ 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: () => {
-    message = '';
-    info = false;
-  },
+  clear,
 };
--- a/packages/mermaid-example-diagram/src/parser/exampleDiagram.jison
+++ b/packages/mermaid-example-diagram/src/parser/exampleDiagram.jison
@@ -8,7 +8,7 @@

 %%

-"info"		      return 'info'    ;
+"example-diagram"		      return 'example-diagram'    ;
 [\s\n\r]+         return 'NL'      ;
 [\s]+ 		      return 'space';
 "showInfo"		  return 'showInfo';
@@ -22,8 +22,8 @@
 %% /* language grammar */

 start
-// %{	: info document 'EOF' { return yy; } }
-	: info document 'EOF' { return yy; }
+// %{	: example-diagram document 'EOF' { return yy; } }
+	: example-diagram document 'EOF' { return yy; }
 	;

 document
--- a/packages/mermaid-mindmap/package.json
+++ b/packages/mermaid-mindmap/package.json
@@ -54,8 +54,10 @@
  },
  "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",
-    "mermaid": "workspace:*",
    "non-layered-tidy-tree-layout": "^2.0.2"
  },
  "devDependencies": {
--- a/packages/mermaid-mindmap/src/add-diagram.ts
+++ b/packages/mermaid-mindmap/src/add-diagram.ts
@@ -5,12 +5,6 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';

-// const getBaseFolder = (path: string) => {
-//   const parts = path.split('/');
-//   parts.pop();
-//   return parts.join('/');
-// };
-
 window.mermaid.connectDiagram(
  'mindmap',
  {
--- a/packages/mermaid-mindmap/src/mindmapDb.js
+++ b/packages/mermaid-mindmap/src/mindmapDb.js
@@ -132,11 +132,7 @@ export const type2Str = (type) => {
  }
 };

-export let parseError; // = (str, hash)
-//  => {
-//   const error = { str, hash };
-//   throw error;
-// };
+export let parseError;
 export const setErrorHandler = (handler) => {
  parseError = handler;
 };
@@ -146,17 +142,3 @@ 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
-// };
--- a/packages/mermaid-mindmap/src/mindmapDetector.old
+++ b/packages/mermaid-mindmap/src/mindmapDetector.old
@@ -1,8 +0,0 @@
-const detector = function detect(txt) {
-  if (txt.match(/^\s*mindmap/)) {
-    return 'mindmap';
-  }
-  return null;
-};
-
-export default detector;
--- a/packages/mermaid-mindmap/src/mindmapRenderer.js
+++ b/packages/mermaid-mindmap/src/mindmapRenderer.js
@@ -2,10 +2,13 @@
 import { select } from 'd3';
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 import svgDraw from './svgDraw';
-import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout';
-import clone from 'fast-clone';
+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
@@ -27,184 +30,138 @@ function drawNodes(svg, mindmap, section, conf) {
 * @param parent
 * @param depth
 * @param section
- * @param conf
+ * @param edgesEl
+ * @param cy
 */
-function drawEdges(edgesElem, mindmap, parent, depth, section, conf) {
-  if (parent) {
-    svgDraw.drawEdge(edgesElem, mindmap, parent, depth, section, conf);
-  }
-  if (mindmap.children) {
-    mindmap.children.forEach((child, index) => {
-      drawEdges(edgesElem, child, mindmap, depth + 1, section < 0 ? index : section, conf);
-    });
-  }
+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 mindmap
- * @param callback
+ * @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 eachNode(mindmap, callback) {
-  callback(mindmap);
+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) => {
-      eachNode(child, callback);
-    });
-  }
-}
-/** @param {object} mindmap */
-function transpose(mindmap) {
-  eachNode(mindmap, (node) => {
-    const orgWidth = node.width;
-    const orgX = node.x;
-    node.width = node.height;
-    node.height = orgWidth;
-    node.x = node.y;
-    node.y = orgX;
-  });
-  return mindmap;
-}
-/** @param {object} mindmap */
-function bottomToUp(mindmap) {
-  log.debug('bottomToUp', mindmap);
-  eachNode(mindmap.result, (node) => {
-    // node.y = node.y - (node.y - bb.top) * 2 - node.height;
-    node.y = node.y - (node.y - 0) * 2 - node.height;
-  });
-  return mindmap;
-}
-/** @param {object} mindmap The mindmap hierarchy */
-function rightToLeft(mindmap) {
-  eachNode(mindmap.result, (node) => {
-    // node.y = node.y - (node.y - bb.top) * 2 - node.height;
-    node.x = node.x - (node.x - 0) * 2 - node.width;
-  });
-  return mindmap;
-}
-
-/**
- * @param mindmap
- * @param dir
- */
-function layout(mindmap, dir) {
-  const bb = new BoundingBox(30, 60);
-
-  const layout = new Layout(bb);
-  switch (dir) {
-    case 'TB':
-      return layout.layout(mindmap);
-    case 'BT':
-      return bottomToUp(layout.layout(mindmap));
-    case 'RL': {
-      transpose(mindmap);
-      let newRes = layout.layout(mindmap);
-      transpose(newRes.result);
-      return rightToLeft(newRes);
-    }
-    case 'LR': {
-      transpose(mindmap);
-      let newRes = layout.layout(mindmap);
-      transpose(newRes.result);
-      return newRes;
-    }
-    default:
-  }
-}
-const dirFromIndex = (index) => {
-  const dirNum = (index + 2) % 4;
-  switch (dirNum) {
-    case 0:
-      return 'LR';
-    case 1:
-      return 'RL';
-    case 2:
-      return 'TB';
-    case 3:
-      return 'BT';
-    default:
-      return 'TB';
-  }
-};
-
-const mergeTrees = (node, trees) => {
-  node.x = trees[0].result.x;
-  node.y = trees[0].result.y;
-  trees.forEach((tree) => {
-    tree.result.children.forEach((child) => {
-      const dx = node.x - tree.result.x;
-      const dy = node.y - tree.result.y;
-      eachNode(child, (childNode) => {
-        const orgNode = db.getNodeById(childNode.id);
-        if (orgNode) {
-          orgNode.x = childNode.x + dx;
-          orgNode.y = childNode.y + dy;
-        }
+      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,
+        },
      });
    });
-  });
-  return node;
-};
+  }
+}

 /**
 * @param node
 * @param conf
+ * @param cy
 */
 function layoutMindmap(node, conf) {
-  // BoundingBox(gap, bottomPadding)
-  // const bb = new BoundingBox(10, 10);
-  // const layout = new Layout(bb);
-  // // const layout = new HorizontalLayout(bb);
-  if (node.children.length === 0) {
-    return node;
-  }
-  const trees = [];
-  // node.children.forEach((child, index) => {
-  //   const tree = clone(node);
-  //   tree.children = [tree.children[index]];
-  //   trees.push(layout(tree, dirFromIndex(index), conf));
-  // });
+  return new Promise((resolve) => {
+    if (node.children.length === 0) {
+      return node;
+    }

-  let cnt = 0;
-  // For each direction, create a new tree with the same root, and add a ubset of the children to it.
-  for (let i = 0; i < 4; i++) {
-    // Calculate the number of the children of the root node that will be used in this direction
-    const numChildren =
-      Math.floor(node.children.length / 4) + (node.children.length % 4 > i ? 1 : 0);
-    // Copy the original root node
-    const tree = clone(node);
-    // Setup the new copy with the children to be rendered in this direction
-    tree.children = [];
-    for (let j = 0; j < numChildren; j++) {
-      tree.children.push(node.children[cnt]);
-      cnt++;
-    }
-    if (tree.children.length > 0) {
-      trees.push(layout(tree, dirFromIndex(i), conf));
-    }
-  }
-  // Let each node know the direct of its tree for when we draw the branches.
-  trees.forEach((tree, index) => {
-    tree.result.direction = dirFromIndex(index);
-    eachNode(tree.result, (node) => {
-      node.direction = dirFromIndex(index);
+    // 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);
    });
  });
-
-  // Merge the trees into a single tree
-  mergeTrees(node, trees);
-  return node;
 }
 /**
 * @param node
+ * @param cy
+ * @param positionedMindmap
 * @param conf
 */
-function positionNodes(node, conf) {
-  svgDraw.positionNode(node, conf);
-  if (node.children) {
-    node.children.forEach((child) => {
-      positionNodes(child, 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})`);
+  });
 }

 /**
@@ -216,7 +173,7 @@ function positionNodes(node, conf) {
 * @param diagObj
 */

-export const draw = (text, id, version, 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.
@@ -254,11 +211,11 @@ export const draw = (text, id, version, diagObj) => {

  // Next step is to layout the mindmap, giving each node a position

-  const positionedMindmap = layoutMindmap(mm, conf);
+  const cy = await layoutMindmap(mm, conf);

-  // After this we can draw, first the edges and the then nodes with the correct position
-  drawEdges(edgesElem, positionedMindmap, null, 0, -1, conf);
-  positionNodes(positionedMindmap, 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);
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,24 +1,17 @@
 // @ts-ignore: TODO Fix ts errors
 import { mindmapDetector } from './mindmapDetector';

-// const getBaseFolder = () => {
 const scriptElement = document.currentScript as HTMLScriptElement;
 const path = scriptElement.src;
 const lastSlash = path.lastIndexOf('/');
 const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);

-// };
-
-// console.log('Current script', getBaseFolder(scriptElement !== null ? scriptElement.src : '')); // eslint-disable-line no-console
-
 if (typeof document !== 'undefined') {
  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
  } else {
-    // console.error('window.mermaid.detectors was not found!'); // eslint-disable-line no-console
    window.mermaid = {};
    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
-    // console.error('Detectors now:', window.mermaid.detectors); // eslint-disable-line no-console
  }

  /*!
@@ -33,7 +26,7 @@ if (typeof document !== 'undefined') {
          detector: mindmapDetector,
          path: baseFolder,
        });
-        // console.error(window.mermaid.detectors); // eslint-disable-line no-console
+        console.error(window.mermaid.detectors); // eslint-disable-line no-console
      }
    },
    false
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/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;
 };
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -41,7 +41,9 @@ import { remark } from 'remark';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';

-const SOURCE_DOCS_DIR = 'src/docs';
+// These paths are from the root of the mono-repo, not from the
+// mermaid sub-directory
+const SOURCE_DOCS_DIR = 'packages/mermaid/src/docs';
 const FINAL_DOCS_DIR = 'docs';

 const AUTOGENERATED_TEXT = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in ${SOURCE_DOCS_DIR}.`;
--- a/packages/mermaid/src/docs/development.md
+++ b/packages/mermaid/src/docs/development.md
@@ -70,9 +70,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.

--- a/packages/mermaid/src/docs/theming.md
+++ b/packages/mermaid/src/docs/theming.md
@@ -113,7 +113,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 |      |                                                                                                                                  |
@@ -124,7 +124,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                                                                                                |
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -105,6 +105,7 @@ const initThrowsErrors = function (
    mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
  }

+  // generate the id of the diagram
  const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);

  let txt;
@@ -222,7 +223,7 @@ const connectDiagram = (
  ) => void
 ) => {
  registerDiagram(id, diagram, callback);
-  // Todo move this connect call to after the diagram is actually loaded
+  // Todo move this connect call to after the diagram is actually loaded.
  callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
 };

--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -308,9 +308,9 @@ const render = async function (
  svg.insertBefore(style1, firstChild);

  try {
-    diag.renderer.draw(text, id, pkg.version, diag);
+    await diag.renderer.draw(text, id, pkg.version, diag);
  } catch (e) {
-    errorRenderer.draw(text, id, pkg.version);
+    await errorRenderer.draw(text, id, pkg.version);
    throw e;
  }

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -275,14 +275,18 @@ importers:
    specifiers:
      '@braintree/sanitize-url': ^6.0.0
      concurrently: ^7.4.0
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
      d3: ^7.0.0
-      mermaid: workspace:*
      non-layered-tidy-tree-layout: ^2.0.2
      rimraf: ^3.0.2
    dependencies:
      '@braintree/sanitize-url': 6.0.0
+      cytoscape: 3.23.0
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
      d3: 7.6.1
-      mermaid: link:../mermaid
      non-layered-tidy-tree-layout: 2.0.2
    devDependencies:
      concurrently: 7.4.0
@@ -4712,6 +4716,18 @@ packages:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
    dev: true

+  /cose-base/1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+    dependencies:
+      layout-base: 1.0.2
+    dev: false
+
+  /cose-base/2.1.0:
+    resolution: {integrity: sha512-HTMm07dhxq1dIPGWwpiVrIk9n+DH7KYmqWA786mLe8jDS+1ZjGtJGIIsJVKoseZXS6/FxiUWCJ2B7XzqUCuhPw==}
+    dependencies:
+      layout-base: 2.0.1
+    dev: false
+
  /cosmiconfig-typescript-loader/4.1.0_3owiowz3ujipd4k6pbqn3n7oui:
    resolution: {integrity: sha512-HbWIuR5O+XO5Oj9SZ5bzgrD4nN+rfhrm2PMb0FVx+t+XIvC45n8F0oTNnztXtspWGw0i2IzHaUWFD5LzV1JB4A==}
    engines: {node: '>=12', npm: '>=6'}
@@ -4881,6 +4897,32 @@ packages:
      yauzl: 2.10.0
    dev: true

+  /cytoscape-cose-bilkent/4.1.0_cytoscape@3.23.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.23.0
+    dev: false
+
+  /cytoscape-fcose/2.1.0_cytoscape@3.23.0:
+    resolution: {integrity: sha512-Q3apPl66jf8/2sMsrCjNP247nbDkyIPjA9g5iPMMWNLZgP3/mn9aryF7EFY/oRPEpv7bKJ4jYmCoU5r5/qAc1Q==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+    dependencies:
+      cose-base: 2.1.0
+      cytoscape: 3.23.0
+    dev: false
+
+  /cytoscape/3.23.0:
+    resolution: {integrity: sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      heap: 0.2.7
+      lodash: 4.17.21
+    dev: false
+
  /d3-array/3.2.0:
    resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==}
    engines: {node: '>=12'}
@@ -7251,6 +7293,10 @@ packages:
    hasBin: true
    dev: true

+  /heap/0.2.7:
+    resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
+    dev: false
+
  /highlight.js/10.7.3:
    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
    dev: true
@@ -8575,6 +8621,14 @@ packages:
    engines: {node: '>=12'}
    dev: true

+  /layout-base/1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+    dev: false
+
+  /layout-base/2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+    dev: false
+
  /lazy-ass/1.6.0:
    resolution: {integrity: sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==}
    engines: {node: '> 0.8'}
Author	SHA1	Message	Date
Knut Sveidqvist	05a594a492	Fix for broken test	2022-10-03 11:22:06 +02:00
Knut Sveidqvist	0a2804c641	Mindmap cleanup	2022-10-03 11:08:55 +02:00
Knut Sveidqvist	5079fa93b4	Using cose-bilkent layout algorithm for mindmaps	2022-10-03 10:05:12 +02:00
Knut Sveidqvist	383cbcf3a0	Merge branch 'develop' into minmaps	2022-10-03 07:02:25 +02:00
Knut Sveidqvist	56add0756f	Lazy loading fix for example-diagram and mindmaps	2022-10-03 07:01:56 +02:00
Alois Klink	02a0f87562	Merge pull request #3541 from marcastel/patch-2 Corrected theme variables reference table layout	2022-10-03 02:11:57 +01:00
Alois Klink	feb1d34c1a	style(docs): fix prettier issues (extra newline) Fix prettier issues by running `pnpm run lint:fix`	2022-10-03 02:06:49 +01:00
JM Marcastel	ffe956e27b	Corrected theme variables reference table layout In replacement of #3540 which modified the generated file and not the source file.	2022-10-02 05:31:41 +02:00
Alois Klink	03190c1dec	Merge pull request #3538 from elv-nate/patch-1 Fix typos in README.md	2022-09-30 22:20:14 +01:00
Nate Armstrong	92f1f2ffb6	Fix typos in README.md	2022-09-30 11:31:53 -07:00
Knut Sveidqvist	4d8d74a50d	Merge pull request #3536 from aloisklink/build/fix-pre-commit-rules Fix husky `pre-commit` rules	2022-09-30 09:07:12 +02:00
Knut Sveidqvist	0dc0de8f1d	Merge pull request #3534 from aloisklink/build/fix-docsbuild-script Fix `docs:build` and `docs:verify` scripts	2022-09-30 09:06:13 +02:00
Knut Sveidqvist	f5dc4d991f	Merge pull request #3535 from aloisklink/docs/replace-yarn-with-pnpm docs: replace `yarn` with `pnpm` in dev guide	2022-09-30 09:05:29 +02:00
Alois Klink	1f3a02559c	build: lint-staged docs in packages/mermaid/src/… When running lint-staged during git pre-commit scripts, search for docs in the packages/mermaid/src/docs folder instead of the original src/docs folder.	2022-09-29 20:11:26 +01:00
Alois Klink	70f94c3e44	chore(docs): run `pnpm run docs:build` Updates the auto-generated warning to tell people to edit packages/mermaid/src/docs instead of src/docs.	2022-09-29 20:02:16 +01:00
Alois Klink	b8eab08119	build(docs): fix `pnpm run docs:{build,verify}` Our docs script was searching for docs in the src/docs folder, which no longer exists. Instead, it should be looking at the packages/mermaid/src/docs folder.	2022-09-29 20:00:15 +01:00
Alois Klink	794b714fac	docs: replace `yarn` with `pnpm` in dev guide With the new mono-repo move (PR #3531), development must be done with `pnpm`. Using `memaid` can still be done with `yarn`/`npm` however.	2022-09-29 19:59:02 +01:00
Knut Sveidqvist	2f4b4ba13b	Merge pull request #3533 from mermaid-js/2979_arrow_alignment Arrow tip aligned to edge of box	2022-09-29 20:49:22 +02:00
Alois Klink	1cdb0ff72c	build: re-enable `prepare` script for husky setup Re-enables the `pnpm run prepare` script. The prepare script is automatically run when running `pnpm install` locally. It both: - Sets up husky/git pre-commit scripts - Builds the `packages/mermaid/dist` folder.	2022-09-29 19:48:54 +01:00
Alois Klink	9513e0e2d5	build: update pre-commit rules to use `pnpm` Update husky and lint-staged to use pnpm instead of yarn.	2022-09-29 19:48:02 +01:00