chore: Replace moment with dayjs

fix: Vite, D3, Vitest Types
Skip precommit hooks on CI
2025-12-25 21:56:25 +01:00 · 2023-02-18 23:37:32 +05:30 · 2023-02-18 22:35:14 +05:30 · 2023-02-16 17:09:02 +05:30 · 2023-02-16 17:07:03 +05:30 · 2023-02-16 16:52:15 +05:30
75 changed files with 1351 additions and 1196 deletions
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -17,4 +17,4 @@ jobs:
      - name: 'Checkout Repository'
        uses: actions/checkout@v3
      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v2
+        uses: actions/dependency-review-action@v3
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -8,6 +8,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Label PR
-        uses: TimonVS/pr-labeler-action@v3
+        uses: TimonVS/pr-labeler-action@v4
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -5,6 +5,7 @@ on:
  push:
    branches:
      - master
+  pull_request:

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
@@ -40,7 +41,7 @@ jobs:
        run: pnpm install --frozen-lockfile

      - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v3

      - name: Run Build
        run: pnpm --filter mermaid run docs:build:vitepress
@@ -52,6 +53,7 @@ jobs:

  # Deployment job
  deploy:
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
    environment:
      name: github-pages
    runs-on: ubuntu-latest
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -11,18 +11,21 @@ jobs:
      - uses: actions/checkout@v3
      - uses: fregante/setup-git-user@v1

-      - name: Setup Node.js
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js v18
        uses: actions/setup-node@v3
        with:
+          cache: pnpm
          node-version: 18.x
-      - name: Install Yarn
-        run: npm i yarn --global
-
-      - name: Install Json
-        run: npm i json --global

      - name: Install Packages
-        run: yarn install --frozen-lockfile
+        run: |
+          pnpm install --frozen-lockfile
+          npm i json --global
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

      - name: Prepare release
        run: |
@@ -31,7 +34,7 @@ jobs:
          git checkout -t origin/release/$VERSION
          npm version --no-git-tag-version --allow-same-version $VERSION
          git add package.json
-          git commit -m "Bump version $VERSION"
+          git commit -nm "Bump version $VERSION"
          git checkout -t origin/master
          git merge -m "Release $VERSION" --no-ff release/$VERSION
          git push --no-verify
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -36,9 +36,9 @@ const packageOptions = {
    packageName: 'mermaid',
    file: 'mermaid.ts',
  },
-  'mermaid-mindmap': {
-    name: 'mermaid-mindmap',
-    packageName: 'mermaid-mindmap',
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
    file: 'detector.ts',
  },
 };
@@ -114,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)

  if (watch && config.build) {
    config.build.watch = {
-      include: ['packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**'],
+      include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'],
    };
  }

@@ -122,11 +122,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 };

 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 })),
-  ]);
+  await build(getBuildConfig({ minify: false, entryName }));
+  await build(getBuildConfig({ minify: 'esbuild', entryName }));
+  await build(getBuildConfig({ minify: false, core: true, entryName }));
 };

 const main = async () => {
@@ -139,7 +137,7 @@ const main = async () => {
 if (watch) {
  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
  if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
  }
 } else if (visualize) {
  await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -22,7 +22,7 @@ async function createServer() {
  app.use(cors);
  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(express.static('./packages/mermaid-example-diagram/dist'));
  app.use(vite.middlewares);
  app.use(express.static('demos'));
  app.use(express.static('cypress/platform'));
--- a/README.md
+++ b/README.md
@@ -1,8 +1,37 @@
-# mermaid
+<p align="center">
+<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
+</p>
+<h1 align="center">
+Mermaid
+</h1>
+<p align="center">
+Generate diagrams from markdown-like text.
+<p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+<p>

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![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) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+<p align="center">
+<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+</p>
+<p align="center">
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
+</p>
+<p align="center">
+<a href="./README.zh-CN.md">简体中文</a>
+</p>

-English | [简体中文](./README.zh-CN.md)
+<br>
+<br>
+
+[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
+[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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)
+[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
+[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
+[![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)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)

 <img src="./img/header.png" alt="" />

@@ -27,14 +56,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia

 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).

-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).

 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.

 <a href="https://applitools.com/">
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,8 +1,37 @@
-# mermaid
+<p align="center">
+<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
+</p>
+<h1 align="center">
+Mermaid
+</h1>
+<p align="center">
+通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
+<p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+<p>

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![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) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+<p align="center">
+<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+</p>
+<p align="center">
+ <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
+</p>
+<p align="center">
+<a href="./README.md">English</a>
+</p>

-[English](./README.md) | 简体中文
+<br>
+<br>
+
+[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
+[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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)
+[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
+[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
+[![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)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)

 <img src="./img/header.png" alt="" />

@@ -24,12 +53,10 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
-
 <!-- </Main description> -->

 ## 示例
@@ -325,7 +352,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在

 来自 Knut Sveidqvist:

-> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
+> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
 > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_

--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -2,8 +2,8 @@ import { urlSnapshotTest } from '../../helpers/util';

 describe('mermaid', () => {
  describe('registerDiagram', () => {
-    it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
-      const url = 'http://localhost:9000/external-diagrams-mindmap.html';
+    it('should work on @mermaid-js/mermaid-example-diagram', () => {
+      const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
      urlSnapshotTest(url, {}, false, false);
    });
  });
--- a/cypress/platform/external-diagrams-example-diagram.html
+++ b/cypress/platform/external-diagrams-example-diagram.html
@@ -2,34 +2,8 @@
  <body>
    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
    <pre id="diagram" class="mermaid">
-mindmap
-  root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
-    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))
+example-diagram
    </pre>
-    <!-- <pre id="diagram" class="mermaid2">
-      example-diagram
-    </pre> -->

    <!-- <div id="cy"></div> -->
    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
@@ -37,11 +11,11 @@ mindmap
    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
    <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
      // import example from '../../packages/mermaid-example-diagram/src/detector';
      import mermaid from '../../packages/mermaid/src/mermaid';

-      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.registerExternalDiagrams([exampleDiagram]);
      await mermaid.initialize({ logLevel: 0 });
      await mermaid.initThrowsErrorsAsync();
      if (window.Cypress) {
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -54,13 +54,17 @@
    </style>
  </head>
  <body>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
+graph BT
+a{The cat in the hat} -- 1o --> b
+a -- 2o --> c
+a -- 3o --> d
+g --2i--> a
+d --1i--> a
+h --3i -->a
+b --> d(The dog in the hog)
+c --> d
    </pre>
    <pre id="diagram" class="mermaid2">
 flowchart-elk TB
@@ -227,7 +231,7 @@ sequenceDiagram
    Customer->>+Merchant: Receives goods or services
        </pre
    >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
  root((mindmap))
    Origins
@@ -246,6 +250,10 @@ mindmap
      Pen and paper
      Mermaid
    </pre>
+    <br />
+    <pre id="diagram" class="mermaid2">
+  example-diagram
+    </pre>

    <!-- <div id="cy"></div> -->
    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
@@ -254,17 +262,17 @@ mindmap
    <!-- <script src="./mermaid.js"></script> -->

    <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      import example from '../../packages/mermaid-example-diagram/src/detector';
      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.registerExternalDiagrams([example]);
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'dark',
+        theme: 'forest',
        startOnLoad: true,
-        logLevel: 0,
+        logLevel: 5,
        flowchart: {
          // defaultRenderer: 'elk',
          useMaxWidth: false,
--- a/cypress/platform/knsv3.html
+++ b/cypress/platform/knsv3.html
@@ -1,81 +1,93 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <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://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"
-    />
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mindmap Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <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; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
-        background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
-        background-repeat: repeat;
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>
+
  <body>
-    <div>Security check</div>
-    <pre id="diagram" class="mermaid">
-      graph TD
-        A["test"] --"<p><style> * { display : none}</style>test</p>"--> B
+    <h1>Mindmap diagram demo</h1>
+    <pre 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="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <!-- <script src="./mermaid.js"></script> -->
+    <h2>Mindmap with root wrapping text and a shape</h2>
+    <pre class="mermaid">
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+    </pre>

    <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      // import mermaid from './mermaid.esm.mjs';
      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
+
+      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
+      // await mermaid.registerExternalDiagrams([mermaidMindmap]);
+
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'default',
+        theme: 'base',
        startOnLoad: true,
        logLevel: 0,
        flowchart: {
@@ -94,10 +106,6 @@
        console.error('In parse error:');
        console.error(err);
      };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
    </script>
  </body>
 </html>
--- a/cypress/platform/sidv.html
+++ b/cypress/platform/sidv.html
@@ -65,7 +65,7 @@ graph TB
    <pre id="diagram" class="mermaid">
 flowchart-elk LR
  subgraph A
-  a -->b
+  a --> b
  end
  subgraph B
  b
@@ -246,10 +246,7 @@ sequenceDiagram
    <!-- <script src="./mermaid.js"></script> -->

    <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,5 +1,5 @@
 import mermaid2 from '../../packages/mermaid/src/mermaid';
-import mindmap from '../../packages/mermaid-mindmap/src/detector';
+import externalExample from '../../packages/mermaid-example-diagram/src/detector';

 function b64ToUtf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
@@ -44,7 +44,7 @@ const contentLoaded = async function () {
      document.getElementsByTagName('body')[0].appendChild(div);
    }

-    await mermaid2.registerExternalDiagrams([mindmap]);
+    await mermaid2.registerExternalDiagrams([externalExample]);
    mermaid2.initialize(graphObj.mermaid);
    await mermaid2.init();
    markRendered();
--- a/docs/config/8.6.0_docs.md
+++ b/docs/config/8.6.0_docs.md
@@ -8,7 +8,7 @@

 ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)

-## [CDN](https://unpkg.com/mermaid/)
+## [CDN](https://www.jsdelivr.com/package/npm/mermaid)

 With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.

--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -20,7 +20,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)

 #### Defined in

-[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
+[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)

 ## Variables

@@ -90,7 +90,7 @@ mermaid.initialize(config);

 #### Defined in

-[mermaidAPI.ts:886](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L886)
+[mermaidAPI.ts:887](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L887)

 ## Functions

@@ -121,7 +121,7 @@ Return the last node appended

 #### Defined in

-[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
+[mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)

 ---

@@ -147,7 +147,7 @@ the cleaned up svgCode

 #### Defined in

-[mermaidAPI.ts:238](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L238)
+[mermaidAPI.ts:239](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L239)

 ---

@@ -173,7 +173,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L167)
+[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)

 ---

@@ -196,7 +196,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L215)
+[mermaidAPI.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L216)

 ---

@@ -223,7 +223,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L151)
+[mermaidAPI.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)

 ---

@@ -243,7 +243,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L131)
+[mermaidAPI.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L132)

 ---

@@ -263,7 +263,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L102)
+[mermaidAPI.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L103)

 ---

@@ -289,7 +289,7 @@ Put the svgCode into an iFrame. Return the iFrame code

 #### Defined in

-[mermaidAPI.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L266)
+[mermaidAPI.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L267)

 ---

@@ -314,4 +314,4 @@ Remove any existing elements from the given document

 #### Defined in

-[mermaidAPI.ts:337](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L337)
+[mermaidAPI.ts:338](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L338)
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -12,7 +12,7 @@ Diagrams can be re-rendered/modified by modifying their descriptions.

 ### CDN

-<https://unpkg.com/mermaid/>
+<https://www.jsdelivr.com/package/npm/mermaid>

 Please note that you can switch versions through the dropdown box at the top right.

--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -31,11 +31,11 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](../config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).

 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../misc/integrations.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)

 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).

@@ -243,13 +243,13 @@ journey

 ### CDN

-    https://unpkg.com/mermaid@<version>/dist/
+    https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/

 To select a version:

 Replace `<version>` with the desired version number.

-Latest Version: <https://unpkg.com/browse/mermaid@8.8.0/>
+Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@9>

 ## Deploying Mermaid

--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -17,7 +17,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
 ## Four ways of using mermaid:

 1.  Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2.  Using [mermaid plugins](../misc/integrations.md) with programs you are familiar with.
+2.  Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with.
 3.  Calling the Mermaid JavaScript API.
 4.  Deploying Mermaid as a dependency.

@@ -85,7 +85,7 @@ and to View, <https://mermaid.live/view?gist=https://gist.github.com/sidharthv96

 ## 2. Using Mermaid Plugins:

-You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations.md).
+You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations.md).

 **This is covered in greater detail in the [Usage section](../config/usage.md)**

--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -256,14 +256,32 @@ Root

 ## Integrating with your library/website.

-Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
+
+You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:

 ```html
 <script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
-  import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
+  import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
 </script>
 ```

-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+From version 9.4.0 you can simplify this code to:
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+</script>
+```
+
+or if you prefer not using the ESM package:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
+```
+
+Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -501,19 +501,19 @@ There are two ways to apply a `classDef` style to a state:

 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:

-```text
+```txt
    class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```

 Here is an example applying the `badBadEvent` style to a state named `Crash`:

-```text
+```txt
 class Crash badBadEvent
 ```

 Here is an example applying the `movement` style to the two states `Moving` and `Crash`:

-```text
+```txt
 class Moving, Crash movement
 ```

@@ -572,7 +572,7 @@ and `badBadEvent`

 You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is

-```text
+```txt
 [state]:::[style name]
 ```

--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -459,4 +459,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
          2010 : Pinterest
 ```

-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+## Integrating with your library/website.
+
+Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
+
+You can use this method to add mermaid including the timeline diagram to a web page:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
+```
+
+Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
  "name": "mermaid-monorepo",
  "private": true,
-  "version": "9.3.0-rc1",
+  "version": "9.4.0",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
-  "packageManager": "pnpm@7.25.1",
+  "packageManager": "pnpm@7.27.0",
  "keywords": [
    "diagram",
    "markdown",
@@ -18,13 +18,13 @@
    "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
    "build:mermaid": "pnpm build:vite --mermaid",
    "build:viz": "pnpm build:mermaid --visualize",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly",
+    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
    "build:watch": "pnpm build:vite --watch",
-    "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
+    "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
    "release": "pnpm build",
    "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
+    "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
    "lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
    "cypress": "cypress run",
    "cypress:open": "cypress open",
@@ -34,7 +34,7 @@
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
    "prepublishOnly": "pnpm build && pnpm test",
-    "prepare": "concurrently \"husky install\" \"pnpm build\"",
+    "prepare": "husky install && pnpm build",
    "pre-commit": "lint-staged"
  },
  "repository": {
@@ -61,7 +61,7 @@
    "@types/eslint": "^8.4.10",
    "@types/express": "^4.17.14",
    "@types/js-yaml": "^4.0.5",
-    "@types/jsdom": "^20.0.1",
+    "@types/jsdom": "^21.0.0",
    "@types/lodash": "^4.14.188",
    "@types/mdast": "^3.0.10",
    "@types/node": "^18.11.9",
@@ -69,8 +69,9 @@
    "@types/rollup-plugin-visualizer": "^4.2.1",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
-    "@vitest/coverage-c8": "^0.27.0",
-    "@vitest/ui": "^0.27.0",
+    "@vitest/coverage-c8": "^0.28.4",
+    "@vitest/spy": "^0.28.4",
+    "@vitest/ui": "^0.28.4",
    "concurrently": "^7.5.0",
    "coveralls": "^3.1.1",
    "cypress": "^10.11.0",
@@ -94,21 +95,21 @@
    "jest": "^29.3.1",
    "jison": "^0.4.18",
    "js-yaml": "^4.1.0",
-    "jsdom": "^20.0.2",
+    "jsdom": "^21.0.0",
    "lint-staged": "^13.0.3",
    "path-browserify": "^1.0.1",
    "pnpm": "^7.15.0",
    "prettier": "^2.7.1",
    "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.0",
    "rollup-plugin-visualizer": "^5.8.3",
-    "start-server-and-test": "^1.14.0",
+    "start-server-and-test": "^1.15.4",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
-    "vite": "^3.2.3",
-    "vitest": "^0.27.1"
+    "vite": "^4.1.1",
+    "vitest": "^0.28.5"
  },
  "volta": {
-    "node": "18.13.0"
+    "node": "18.14.0"
  }
 }
--- a/packages/mermaid-example-diagram/Readme.md
+++ b/packages/mermaid-example-diagram/Readme.md
@@ -1,3 +0,0 @@
-### Do not refer this package. It is not ready.
-
-### Refer mermaid-mindmap instead.
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -1,36 +1,25 @@
 {
  "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",
+  "version": "9.3.0",
+  "description": "Example of external diagram module for MermaidJS.",
+  "module": "dist/mermaid-example-diagram.core.mjs",
+  "types": "dist/detector.d.ts",
  "type": "module",
  "exports": {
    ".": {
-      "require": "./dist/mermaid-example-diagram.min.js",
-      "import": "./dist/mermaid-example-diagram.core.mjs"
+      "import": "./dist/mermaid-example-diagram.core.mjs",
+      "types": "./dist/detector.d.ts"
    },
    "./*": "./*"
  },
  "keywords": [
    "diagram",
    "markdown",
-    "mindmap",
+    "example",
    "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",
-    "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
-    "todo-pre-commit": "lint-staged"
+    "prepublishOnly": "pnpm -w run build"
  },
  "repository": {
    "type": "git",
@@ -48,10 +37,20 @@
      "page"
    ]
  },
-  "dependencies": {},
+  "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",
+    "khroma": "^2.0.0",
+    "non-layered-tidy-tree-layout": "^2.0.2"
+  },
  "devDependencies": {
+    "@types/cytoscape": "^3.19.9",
    "concurrently": "^7.5.0",
-    "rimraf": "^3.0.2"
+    "rimraf": "^4.0.0",
+    "mermaid": "workspace:*"
  },
  "resolutions": {
    "d3": "^7.0.0"
--- a/packages/mermaid-example-diagram/src/detector.ts
+++ b/packages/mermaid-example-diagram/src/detector.ts
@@ -1,18 +1,20 @@
-// @ts-ignore: TODO Fix ts errors
-export const id = 'example-diagram';
+import type { ExternalDiagramDefinition } from 'mermaid';

-/**
- * Detector function that will be called by mermaid to determine if the diagram is this type of diagram.
- *
- * @param txt - The diagram text will be passed to the detector
- * @returns True if the diagram text matches a diagram of this type
- */
+const id = 'example-diagram';

-export const detector = (txt: string) => {
+const detector = (txt: string) => {
  return txt.match(/^\s*example-diagram/) !== null;
 };

-export const loadDiagram = async () => {
-  const { diagram } = await import('./diagram-definition');
+const loader = async () => {
+  const { diagram } = await import('./diagram-definition.js');
  return { id, diagram };
 };
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid-example-diagram/src/diagram-definition.ts
+++ b/packages/mermaid-example-diagram/src/diagram-definition.ts
@@ -12,5 +12,3 @@ export const diagram = {
  styles,
  injectUtils,
 };
-
-export { detector, id } from './detector';
--- a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
@@ -1,5 +1,17 @@
 import { parser } from './parser/exampleDiagram';
-import db from './exampleDiagramDb';
+import * as db from './exampleDiagramDb';
+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 an info graph it', function () {
  let ex;
  beforeEach(function () {
--- a/packages/mermaid-example-diagram/src/mermaidUtils.ts
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -1,4 +1,8 @@
-const warning = () => null;
+const warning = (s: string) => {
+  // Todo remove debug code
+  // eslint-disable-next-line no-console
+  console.error('Log function was called before initialization', s);
+};

 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

@@ -19,13 +23,11 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
  error: warning,
  fatal: warning,
 };
+
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
-export let commonDb: any;
-/**
- * Placeholder for the real function that will be injected by mermaid.
- */
+export let commonDb: () => object;
 // eslint-disable @typescript-eslint/no-explicit-any
 export let setupGraphViewbox: (
  graph: any,
@@ -34,25 +36,15 @@ export let setupGraphViewbox: (
  useMaxWidth: boolean
 ) => void;

-/**
- * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
- *
- * @param _log - log from mermaid/src/diagramAPI.ts
- * @param _setLogLevel - setLogLevel from mermaid/src/diagramAPI.ts
- * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts
- * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts
- * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts
- * @param _commonDb -`commonDb` from mermaid/src/diagramAPI.ts
- */
 export const injectUtils = (
  _log: Record<keyof typeof LEVELS, typeof console.log>,
-  _setLogLevel: typeof setLogLevel,
-  _getConfig: typeof getConfig,
-  _sanitizeText: typeof sanitizeText,
-  _setupGraphViewbox: typeof setupGraphViewbox,
+  _setLogLevel: any,
+  _getConfig: any,
+  _sanitizeText: any,
+  _setupGraphViewbox: any,
  _commonDb: any
 ) => {
-  _log.info('Mermaid utils injected into timeline-diagram');
+  _log.info('Mermaid utils injected');
  log.trace = _log.trace;
  log.debug = _log.debug;
  log.info = _log.info;
--- a/packages/mermaid-example-diagram/tsconfig.json
+++ b/packages/mermaid-example-diagram/tsconfig.json
@@ -1,5 +1,6 @@
 {
  "extends": "../../tsconfig.json",
+  "module": "esnext",
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
--- a/packages/mermaid-mindmap/package.json
+++ b/packages/mermaid-mindmap/package.json
@@ -1,65 +0,0 @@
-{
-  "name": "@mermaid-js/mermaid-mindmap",
-  "version": "9.3.0",
-  "description": "Mindmap diagram module for MermaidJS.",
-  "module": "dist/mermaid-mindmap.core.mjs",
-  "types": "dist/detector.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-mindmap.core.mjs",
-      "types": "./dist/detector.d.ts"
-    },
-    "./*": "./*"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "mindmap",
-    "mermaid"
-  ],
-  "scripts": {
-    "prepublishOnly": "pnpm -w run build"
-  },
-  "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",
-    "khroma": "^2.0.0",
-    "non-layered-tidy-tree-layout": "^2.0.2"
-  },
-  "devDependencies": {
-    "@types/cytoscape": "^3.19.9",
-    "concurrently": "^7.5.0",
-    "mermaid": "workspace:*",
-    "rimraf": "^3.0.2"
-  },
-  "resolutions": {
-    "d3": "^7.0.0"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ]
-}
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@@ -1,59 +0,0 @@
-const warning = (s: string) => {
-  // Todo remove debug code
-  // eslint-disable-next-line no-console
-  console.error('Log function was called before initialization', s);
-};
-
-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;
-export let commonDb: () => object;
-// 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,
-  _commonDb: 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;
-  commonDb = _commonDb;
-};
--- a/packages/mermaid-mindmap/src/types/index.d.ts
+++ b/packages/mermaid-mindmap/src/types/index.d.ts
@@ -1,7 +0,0 @@
-export {};
-
-declare global {
-  interface Window {
-    mermaid: any; // 👈️ turn off type checking
-  }
-}
--- a/packages/mermaid-mindmap/tsconfig.json
+++ b/packages/mermaid-mindmap/tsconfig.json
@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "module": "esnext",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist"
-  },
-  "include": ["./src/**/*.ts"],
-  "typeRoots": ["./src/types"]
-}
--- a/packages/mermaid/.gitignore
+++ b/packages/mermaid/.gitignore
@@ -1,2 +1,3 @@
 src/vitepress
-src/docs/config/setup
+src/docs/config/setup
+README.*
--- a/packages/mermaid/README.md
+++ b/packages/mermaid/README.md
@@ -33,7 +33,7 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-

 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)

 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.

--- a/packages/mermaid/README.zh-CN.md
+++ b/packages/mermaid/README.zh-CN.md
@@ -28,7 +28,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma

 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)

 <!-- </Main description> -->

--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "9.3.0",
+  "version": "9.4.0",
  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "main": "./dist/mermaid.min.js",
  "module": "./dist/mermaid.core.mjs",
@@ -33,7 +33,7 @@
    "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
    "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
    "release": "pnpm build",
-    "prepublishOnly": "pnpm -w run build"
+    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
  },
  "repository": {
    "type": "git",
@@ -53,27 +53,32 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "^6.0.0",
-    "d3": "^7.0.0",
+    "cytoscape": "^3.23.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.1.0",
+    "d3": "^7.4.0",
    "dagre-d3-es": "7.0.8",
+    "dayjs": "^1.11.7",
    "dompurify": "2.4.3",
    "elkjs": "^0.8.2",
    "khroma": "^2.0.0",
    "lodash-es": "^4.17.21",
-    "moment": "^2.29.4",
    "non-layered-tidy-tree-layout": "^2.0.2",
    "stylis": "^4.1.2",
    "ts-dedent": "^2.2.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "web-worker": "^1.2.0"
  },
  "devDependencies": {
+    "@types/cytoscape": "^3.19.9",
    "@types/d3": "^7.4.0",
    "@types/dompurify": "^2.4.0",
-    "@types/jsdom": "^20.0.1",
+    "@types/jsdom": "^21.0.0",
    "@types/lodash-es": "^4.17.6",
    "@types/micromatch": "^4.0.2",
    "@types/prettier": "^2.7.1",
    "@types/stylis": "^4.0.2",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "chokidar": "^3.5.3",
@@ -84,21 +89,21 @@
    "globby": "^13.1.2",
    "jison": "^0.4.18",
    "js-base64": "^3.7.2",
-    "jsdom": "^20.0.2",
+    "jsdom": "^21.0.0",
    "micromatch": "^4.0.5",
    "path-browserify": "^1.0.1",
    "prettier": "^2.7.1",
    "remark": "^14.0.2",
    "remark-frontmatter": "^4.0.1",
    "remark-gfm": "^3.0.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.0",
    "start-server-and-test": "^1.14.0",
    "typedoc": "^0.23.18",
    "typedoc-plugin-markdown": "^3.13.6",
    "typescript": "^4.8.4",
    "unist-util-flatmap": "^1.0.0",
-    "vitepress": "^1.0.0-alpha.31",
-    "vitepress-plugin-search": "^1.0.4-alpha.16"
+    "vitepress": "^1.0.0-alpha.46",
+    "vitepress-plugin-search": "^1.0.4-alpha.19"
  },
  "files": [
    "dist",
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1007,6 +1007,7 @@ const class_box = (parent, node) => {
 };

 const shapes = {
+  rhombus: question,
  question,
  rect,
  labelRect,
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -55,9 +55,10 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio

 export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
  if (detectors[key]) {
-    throw new Error(`Detector with key ${key} already exists`);
+    log.error(`Detector with key ${key} already exists`);
+  } else {
+    detectors[key] = { detector, loader };
  }
-  detectors[key] = { detector, loader };
  log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);
 };

--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -96,7 +96,10 @@ import errorStyles from '../diagrams/error/styles';
 import flowchartElk from '../diagrams/flowchart/elk/detector';
 import { registerLazyLoadedDiagrams } from './detectType';

+// Lazy loaded diagrams
 import timelineDetector from '../diagrams/timeline/detector';
+import mindmapDetector from '../diagrams/mindmap/detector';
+
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
  if (hasLoadedDiagrams) {
@@ -105,7 +108,7 @@ export const addDiagrams = () => {
  // This is added here to avoid race-conditions.
  // We could optimize the loading logic somehow.
  hasLoadedDiagrams = true;
-  registerLazyLoadedDiagrams(flowchartElk, timelineDetector);
+  registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector);

  registerDiagram(
    'error',
--- a/packages/mermaid/src/diagrams/common/dayjs.ts
+++ b/packages/mermaid/src/diagrams/common/dayjs.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import isoWeek from 'dayjs/plugin/isoWeek';
+
+dayjs.extend(isoWeek);
+dayjs.extend(duration);
+
+export default dayjs;
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,4 +1,5 @@
 /** Created by knut on 14-12-11. */
+// @ts-ignore TODO: Investigate D3 issue
 import { select } from 'd3';
 import { log } from '../../logger';
 import { getErrorMessage } from '../../utils';
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -16,7 +16,7 @@ const detector: DiagramDetector = (txt: string, config?: MermaidConfig): boolean
 };

 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
  return { id, diagram };
 };

--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -10,8 +10,9 @@ import { setupGraphViewbox } from '../../../setupGraphViewbox';
 import common, { evaluate } from '../../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../../utils';

-import ELK from 'elkjs/lib/elk.bundled.js';
-const elk = new ELK();
+let elk;
+
+const portPos = {};

 const conf = {};
 export const setConf = function (cnf) {
@@ -95,8 +96,36 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
      labelData.labelNode = vertexNode;
    }

+    const ports = [
+      {
+        id: vertex.id + '-west',
+        layoutOptions: {
+          'port.side': 'WEST',
+        },
+      },
+      {
+        id: vertex.id + '-east',
+        layoutOptions: {
+          'port.side': 'EAST',
+        },
+      },
+      {
+        id: vertex.id + '-south',
+        layoutOptions: {
+          'port.side': 'SOUTH',
+        },
+      },
+      {
+        id: vertex.id + '-north',
+        layoutOptions: {
+          'port.side': 'NORTH',
+        },
+      },
+    ];
+
    let radious = 0;
    let _shape = '';
+    let layoutOptions = {};
    // Set the shape based parameters
    switch (vertex.type) {
      case 'round':
@@ -108,6 +137,9 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
        break;
      case 'diamond':
        _shape = 'question';
+        layoutOptions = {
+          portConstraints: 'FIXED_SIDE',
+        };
        break;
      case 'hexagon':
        _shape = 'hexagon';
@@ -154,7 +186,7 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
      default:
        _shape = 'rect';
    }
-    // // Add the node
+    // Add the node
    const node = {
      labelStyle: styles.labelStyle,
      shape: _shape,
@@ -184,8 +216,10 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook

    const data = {
      id: vertex.id,
+      ports: vertex.type === 'diamond' ? ports : [],
      // labelStyle: styles.labelStyle,
      // shape: _shape,
+      layoutOptions,
      labelText: vertexText,
      labelData,
      // labels: [{ text: vertexText }],
@@ -235,6 +269,127 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
  return graph;
 };

+const getNextPosition = (position, edgeDirection, graphDirection) => {
+  const portPos = {
+    TB: {
+      in: {
+        north: 'north',
+      },
+      out: {
+        south: 'west',
+        west: 'east',
+        east: 'south',
+      },
+    },
+    LR: {
+      in: {
+        west: 'west',
+      },
+      out: {
+        east: 'south',
+        south: 'north',
+        north: 'east',
+      },
+    },
+    RL: {
+      in: {
+        east: 'east',
+      },
+      out: {
+        west: 'north',
+        north: 'south',
+        south: 'west',
+      },
+    },
+    BT: {
+      in: {
+        south: 'south',
+      },
+      out: {
+        north: 'east',
+        east: 'west',
+        west: 'north',
+      },
+    },
+  };
+  portPos.TD = portPos.TB;
+  log.info('abc88', graphDirection, edgeDirection, position);
+  return portPos[graphDirection][edgeDirection][position];
+  // return 'south';
+};
+
+const getNextPort = (node, edgeDirection, graphDirection) => {
+  log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
+  if (!portPos[node]) {
+    switch (graphDirection) {
+      case 'TB':
+      case 'TD':
+        portPos[node] = {
+          inPosition: 'north',
+          outPosition: 'south',
+        };
+        break;
+      case 'BT':
+        portPos[node] = {
+          inPosition: 'south',
+          outPosition: 'north',
+        };
+        break;
+      case 'RL':
+        portPos[node] = {
+          inPosition: 'east',
+          outPosition: 'west',
+        };
+        break;
+      case 'LR':
+        portPos[node] = {
+          inPosition: 'west',
+          outPosition: 'east',
+        };
+        break;
+    }
+  }
+  const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
+
+  if (edgeDirection === 'in') {
+    portPos[node].inPosition = getNextPosition(
+      portPos[node].inPosition,
+      edgeDirection,
+      graphDirection
+    );
+  } else {
+    portPos[node].outPosition = getNextPosition(
+      portPos[node].outPosition,
+      edgeDirection,
+      graphDirection
+    );
+  }
+  return result;
+};
+
+const getEdgeStartEndPoint = (edge, dir) => {
+  let source = edge.start;
+  let target = edge.end;
+
+  const startNode = nodeDb[source];
+  const endNode = nodeDb[target];
+
+  if (!startNode || !endNode) {
+    return { source, target };
+  }
+
+  if (startNode.type === 'diamond') {
+    source = `${source}-${getNextPort(source, 'out', dir)}`;
+  }
+
+  if (endNode.type === 'diamond') {
+    target = `${target}-${getNextPort(target, 'in', dir)}`;
+  }
+
+  // Add the edge to the graph
+  return { source, target };
+};
+
 /**
 * Add edges to graph based on parsed graph definition
 *
@@ -246,10 +401,10 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
 * @param svg
 */
 export const addEdges = function (edges, diagObj, graph, svg) {
-  // log.info('abc78 edges = ', edges);
+  log.info('abc78 edges = ', edges);
  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
  let linkIdCnt = {};
-
+  let dir = diagObj.db.getDirection();
  let defaultStyle;
  let defaultLabelStyle;

@@ -374,17 +529,19 @@ export const addEdges = function (edges, diagObj, graph, svg) {
    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;

    const labelEl = insertEdgeLabel(labelsEl, edgeData);
-    // console.log('labelEl', labelEl, edgeData.width);
+
+    // calculate start and end points of the edge
+    const { source, target } = getEdgeStartEndPoint(edge, dir);
+    log.debug('abc78 source and target', source, target);
    // Add the edge to the graph
    graph.edges.push({
      id: 'e' + edge.start + edge.end,
-      sources: [edge.start],
-      targets: [edge.end],
+      sources: [source],
+      targets: [target],
      labelEl: labelEl,
      labels: [
        {
          width: edgeData.width,
-          // width: 80,
          height: edgeData.height,
          orgWidth: edgeData.width,
          orgHeight: edgeData.height,
@@ -396,8 +553,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
        },
      ],
      edgeData,
-      // targetPort: 'PortSide.NORTH',
-      // id: cnt,
    });
  });
  return graph;
@@ -610,6 +765,10 @@ const insertChildren = (nodeArray, parentLookupDb) => {
 */

 export const draw = async function (text, id, _version, diagObj) {
+  if (!elk) {
+    const ELK = (await import('elkjs/lib/elk.bundled.js')).default;
+    elk = new ELK();
+  }
  // Add temporary render element
  diagObj.db.clear();
  nodeDb = {};
@@ -624,12 +783,15 @@ export const draw = async function (text, id, _version, diagObj) {
      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
      'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
      'elk.layered.spacing.edgeNodeBetweenLayers': '30',
+      // 'elk.layered.mergeEdges': 'true',
      'elk.direction': 'DOWN',
+      // 'elk.ports.sameLayerEdges': true,
+      // 'nodePlacement.strategy': 'SIMPLE',
    },
    children: [],
    edges: [],
  };
-  log.info('Drawing flowchart using v3 renderer');
+  log.info('Drawing flowchart using v3 renderer', elk);

  // Set the direction,
  // Fetch the default direction, use TD if none was found
@@ -731,8 +893,10 @@ export const draw = async function (text, id, _version, diagObj) {
    }
  });
  insertChildren(graph.children, parentLookupDb);
+  log.info('after layout', JSON.stringify(graph, null, 2));
  const g = await elk.layout(graph);
  drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
+  log.info('after layout', g);
  g.edges?.map((edge) => {
    insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb);
  });
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -238,6 +238,9 @@ export const setDirection = function (dir) {
  if (direction.match(/.*v/)) {
    direction = 'TB';
  }
+  if (direction === 'TD') {
+    direction = 'TB';
+  }
 };

 /**
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -1,4 +1,5 @@
-import moment from 'moment';
+import dayjs from '../common/dayjs';
+
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { log } from '../../logger';
 import * as configApi from '../../config';
@@ -166,9 +167,9 @@ const checkTaskDates = function (task, dateFormat, excludes, includes) {
  if (!excludes.length || task.manualEndTime) {
    return;
  }
-  let startTime = moment(task.startTime, dateFormat, true);
+  let startTime = dayjs(task.startTime, dateFormat, true);
  startTime.add(1, 'd');
-  let endTime = moment(task.endTime, dateFormat, true);
+  let endTime = dayjs(task.endTime, dateFormat, true);
  let renderEndTime = fixTaskDates(startTime, endTime, dateFormat, excludes, includes);
  task.endTime = endTime.toDate();
  task.renderEndTime = renderEndTime;
@@ -223,7 +224,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
  }

  // Check for actual date set
-  let mDate = moment(str, dateFormat.trim(), true);
+  let mDate = dayjs(str, dateFormat.trim(), true);
  if (mDate.isValid()) {
    return mDate.toDate();
  } else {
@@ -238,7 +239,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
 };

 /**
- * Parse a string as a moment duration.
+ * Parse a string as a dayjs duration.
 *
 * The string have to be compound by a value and a shorthand duration unit. For example `5d`
 * represents 5 days.
@@ -254,22 +255,22 @@ const getStartDate = function (prevTime, dateFormat, str) {
 * - `ms` for milliseconds
 *
 * @param {string} str - A string representing the duration.
- * @returns {moment.Duration} A moment duration, including an invalid moment for invalid input
+ * @returns {duration.Duration | undefined} A dayjs duration, including an invalid duration for invalid input
 *   string.
 */
 const parseDuration = function (str) {
  const statement = /^(\d+(?:\.\d+)?)([Mdhmswy]|ms)$/.exec(str.trim());
  if (statement !== null) {
-    return moment.duration(Number.parseFloat(statement[1]), statement[2]);
+    return dayjs.duration(Number.parseFloat(statement[1]), statement[2]);
  }
-  return moment.duration.invalid();
+  return undefined;
 };

 const getEndDate = function (prevTime, dateFormat, str, inclusive = false) {
  str = str.trim();

  // Check for actual date
-  let mDate = moment(str, dateFormat.trim(), true);
+  let mDate = dayjs(str, dateFormat.trim(), true);
  if (mDate.isValid()) {
    if (inclusive) {
      mDate.add(1, 'd');
@@ -277,10 +278,10 @@ const getEndDate = function (prevTime, dateFormat, str, inclusive = false) {
    return mDate.toDate();
  }

-  const endTime = moment(prevTime);
-  const duration = parseDuration(str);
-  if (duration.isValid()) {
-    endTime.add(duration);
+  const endTime = dayjs(prevTime);
+  const timeDuration = parseDuration(str);
+  if (timeDuration) {
+    endTime.add(timeDuration);
  }
  return endTime.toDate();
 };
@@ -346,7 +347,7 @@ const compileData = function (prevTask, dataStr) {

  if (endTimeData) {
    task.endTime = getEndDate(task.startTime, dateFormat, endTimeData, inclusiveEndDates);
-    task.manualEndTime = moment(endTimeData, 'YYYY-MM-DD', true).isValid();
+    task.manualEndTime = dayjs(endTimeData, 'YYYY-MM-DD', true).isValid();
    checkTaskDates(task, dateFormat, excludes, includes);
  }

@@ -496,7 +497,7 @@ const compileTasks = function () {
      );
      if (rawTasks[pos].endTime) {
        rawTasks[pos].processed = true;
-        rawTasks[pos].manualEndTime = moment(
+        rawTasks[pos].manualEndTime = dayjs(
          rawTasks[pos].raw.endTime.data,
          'YYYY-MM-DD',
          true
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import moment from 'moment';
+import dayjs from '../common/dayjs';
 import ganttDb from './ganttDb';
 import { convert } from '../../tests/util';

@@ -9,7 +9,7 @@ describe('when using the ganttDb', function () {
  });

  describe('when using duration', function () {
-    it.each([{ str: '1d', expected: moment.duration(1, 'd') }])(
+    it.each([{ str: '1d', expected: dayjs.duration(1, 'd') }])(
      'should %s resulting in $o duration',
      ({ str, expected }) => {
        expect(ganttDb.parseDuration(str)).toEqual(expected);
@@ -19,11 +19,11 @@ describe('when using the ganttDb', function () {
    it.each(
      convert`
      str       | expected
-      ${'1d'}   | ${moment.duration(1, 'd')}
-      ${'2w'}   | ${moment.duration(2, 'w')}
-      ${'1ms'}  | ${moment.duration(1, 'ms')}
-      ${'0.1s'} | ${moment.duration(100, 'ms')}
-      ${'1f'}   | ${moment.duration.invalid()}
+      ${'1d'}   | ${dayjs.duration(1, 'd')}
+      ${'2w'}   | ${dayjs.duration(2, 'w')}
+      ${'1ms'}  | ${dayjs.duration(1, 'ms')}
+      ${'0.1s'} | ${dayjs.duration(100, 'ms')}
+      ${'1f'}   | ${undefined}
    `
    )('should $str resulting in $expected duration', ({ str, expected }) => {
      expect(ganttDb.parseDuration(str)).toEqual(expected);
@@ -171,44 +171,44 @@ describe('when using the ganttDb', function () {

    const tasks = ganttDb.getTasks();

-    expect(tasks[0].startTime).toEqual(moment('2019-02-01', 'YYYY-MM-DD').toDate());
-    expect(tasks[0].endTime).toEqual(moment('2019-02-04', 'YYYY-MM-DD').toDate());
-    expect(tasks[0].renderEndTime).toEqual(moment('2019-02-02', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].startTime).toEqual(dayjs('2019-02-01', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].endTime).toEqual(dayjs('2019-02-04', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].renderEndTime).toEqual(dayjs('2019-02-02', 'YYYY-MM-DD').toDate());
    expect(tasks[0].id).toEqual('id1');
    expect(tasks[0].task).toEqual('test1');

-    expect(tasks[1].startTime).toEqual(moment('2019-02-04', 'YYYY-MM-DD').toDate());
-    expect(tasks[1].endTime).toEqual(moment('2019-02-07', 'YYYY-MM-DD').toDate());
-    expect(tasks[1].renderEndTime).toEqual(moment('2019-02-06', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].startTime).toEqual(dayjs('2019-02-04', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].endTime).toEqual(dayjs('2019-02-07', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].renderEndTime).toEqual(dayjs('2019-02-06', 'YYYY-MM-DD').toDate());
    expect(tasks[1].id).toEqual('id2');
    expect(tasks[1].task).toEqual('test2');

-    expect(tasks[2].startTime).toEqual(moment('2019-02-07', 'YYYY-MM-DD').toDate());
-    expect(tasks[2].endTime).toEqual(moment('2019-02-20', 'YYYY-MM-DD').toDate());
-    expect(tasks[2].renderEndTime).toEqual(moment('2019-02-20', 'YYYY-MM-DD').toDate());
+    expect(tasks[2].startTime).toEqual(dayjs('2019-02-07', 'YYYY-MM-DD').toDate());
+    expect(tasks[2].endTime).toEqual(dayjs('2019-02-20', 'YYYY-MM-DD').toDate());
+    expect(tasks[2].renderEndTime).toEqual(dayjs('2019-02-20', 'YYYY-MM-DD').toDate());
    expect(tasks[2].id).toEqual('id3');
    expect(tasks[2].task).toEqual('test3');

-    expect(tasks[3].startTime).toEqual(moment('2019-02-01', 'YYYY-MM-DD').toDate());
-    expect(tasks[3].endTime).toEqual(moment('2019-02-20', 'YYYY-MM-DD').toDate());
+    expect(tasks[3].startTime).toEqual(dayjs('2019-02-01', 'YYYY-MM-DD').toDate());
+    expect(tasks[3].endTime).toEqual(dayjs('2019-02-20', 'YYYY-MM-DD').toDate());
    expect(tasks[3].renderEndTime).toBeNull(); // Fixed end
    expect(tasks[3].id).toEqual('id4');
    expect(tasks[3].task).toEqual('test4');

-    expect(tasks[4].startTime).toEqual(moment('2019-02-20', 'YYYY-MM-DD').toDate());
-    expect(tasks[4].endTime).toEqual(moment('2019-02-21', 'YYYY-MM-DD').toDate());
-    expect(tasks[4].renderEndTime).toEqual(moment('2019-02-21', 'YYYY-MM-DD').toDate());
+    expect(tasks[4].startTime).toEqual(dayjs('2019-02-20', 'YYYY-MM-DD').toDate());
+    expect(tasks[4].endTime).toEqual(dayjs('2019-02-21', 'YYYY-MM-DD').toDate());
+    expect(tasks[4].renderEndTime).toEqual(dayjs('2019-02-21', 'YYYY-MM-DD').toDate());
    expect(tasks[4].id).toEqual('id5');
    expect(tasks[4].task).toEqual('test5');

-    expect(tasks[5].startTime).toEqual(moment('2019-02-13', 'YYYY-MM-DD').toDate());
-    expect(tasks[5].endTime).toEqual(moment('2019-02-18', 'YYYY-MM-DD').toDate());
-    expect(tasks[5].renderEndTime).toEqual(moment('2019-02-15', 'YYYY-MM-DD').toDate());
+    expect(tasks[5].startTime).toEqual(dayjs('2019-02-13', 'YYYY-MM-DD').toDate());
+    expect(tasks[5].endTime).toEqual(dayjs('2019-02-18', 'YYYY-MM-DD').toDate());
+    expect(tasks[5].renderEndTime).toEqual(dayjs('2019-02-15', 'YYYY-MM-DD').toDate());
    expect(tasks[5].id).toEqual('id6');
    expect(tasks[5].task).toEqual('test6');

-    expect(tasks[6].startTime).toEqual(moment('2019-02-18', 'YYYY-MM-DD').toDate());
-    expect(tasks[6].endTime).toEqual(moment('2019-02-19', 'YYYY-MM-DD').toDate());
+    expect(tasks[6].startTime).toEqual(dayjs('2019-02-18', 'YYYY-MM-DD').toDate());
+    expect(tasks[6].endTime).toEqual(dayjs('2019-02-19', 'YYYY-MM-DD').toDate());
    expect(tasks[6].id).toEqual('id7');
    expect(tasks[6].task).toEqual('test7');
  });
@@ -243,109 +243,103 @@ describe('when using the ganttDb', function () {
    const tasks = ganttDb.getTasks();

    // Section - A section
-    expect(tasks[0].startTime).toEqual(moment('2014-01-06', 'YYYY-MM-DD').toDate());
-    expect(tasks[0].endTime).toEqual(moment('2014-01-08', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].startTime).toEqual(dayjs('2014-01-06', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].endTime).toEqual(dayjs('2014-01-08', 'YYYY-MM-DD').toDate());
    expect(tasks[0].order).toEqual(0);
    expect(tasks[0].id).toEqual('des1');
    expect(tasks[0].task).toEqual('Completed task');

-    expect(tasks[1].startTime).toEqual(moment('2014-01-09', 'YYYY-MM-DD').toDate());
-    expect(tasks[1].endTime).toEqual(moment('2014-01-12', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].startTime).toEqual(dayjs('2014-01-09', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].endTime).toEqual(dayjs('2014-01-12', 'YYYY-MM-DD').toDate());
    expect(tasks[1].order).toEqual(1);
    expect(tasks[1].id).toEqual('des2');
    expect(tasks[1].task).toEqual('Active task');

-    expect(tasks[2].startTime).toEqual(moment('2014-01-12', 'YYYY-MM-DD').toDate());
-    expect(tasks[2].endTime).toEqual(moment('2014-01-17', 'YYYY-MM-DD').toDate());
+    expect(tasks[2].startTime).toEqual(dayjs('2014-01-12', 'YYYY-MM-DD').toDate());
+    expect(tasks[2].endTime).toEqual(dayjs('2014-01-17', 'YYYY-MM-DD').toDate());
    expect(tasks[2].order).toEqual(2);
    expect(tasks[2].id).toEqual('des3');
    expect(tasks[2].task).toEqual('Future task');

-    expect(tasks[3].startTime).toEqual(moment('2014-01-17', 'YYYY-MM-DD').toDate());
-    expect(tasks[3].endTime).toEqual(moment('2014-01-22', 'YYYY-MM-DD').toDate());
+    expect(tasks[3].startTime).toEqual(dayjs('2014-01-17', 'YYYY-MM-DD').toDate());
+    expect(tasks[3].endTime).toEqual(dayjs('2014-01-22', 'YYYY-MM-DD').toDate());
    expect(tasks[3].order).toEqual(3);
    expect(tasks[3].id).toEqual('des4');
    expect(tasks[3].task).toEqual('Future task2');

    // Section - Critical tasks
-    expect(tasks[4].startTime).toEqual(moment('2014-01-06', 'YYYY-MM-DD').toDate());
-    expect(tasks[4].endTime).toEqual(moment('2014-01-07', 'YYYY-MM-DD').toDate());
+    expect(tasks[4].startTime).toEqual(dayjs('2014-01-06', 'YYYY-MM-DD').toDate());
+    expect(tasks[4].endTime).toEqual(dayjs('2014-01-07', 'YYYY-MM-DD').toDate());
    expect(tasks[4].order).toEqual(4);
    expect(tasks[4].id).toEqual('task1');
    expect(tasks[4].task).toEqual('Completed task in the critical line');

-    expect(tasks[5].startTime).toEqual(moment('2014-01-08', 'YYYY-MM-DD').toDate());
-    expect(tasks[5].endTime).toEqual(moment('2014-01-10', 'YYYY-MM-DD').toDate());
+    expect(tasks[5].startTime).toEqual(dayjs('2014-01-08', 'YYYY-MM-DD').toDate());
+    expect(tasks[5].endTime).toEqual(dayjs('2014-01-10', 'YYYY-MM-DD').toDate());
    expect(tasks[5].order).toEqual(5);
    expect(tasks[5].id).toEqual('task2');
    expect(tasks[5].task).toEqual('Implement parser and jison');

-    expect(tasks[6].startTime).toEqual(moment('2014-01-10', 'YYYY-MM-DD').toDate());
-    expect(tasks[6].endTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
+    expect(tasks[6].startTime).toEqual(dayjs('2014-01-10', 'YYYY-MM-DD').toDate());
+    expect(tasks[6].endTime).toEqual(dayjs('2014-01-13', 'YYYY-MM-DD').toDate());
    expect(tasks[6].order).toEqual(6);
    expect(tasks[6].id).toEqual('task3');
    expect(tasks[6].task).toEqual('Create tests for parser');

-    expect(tasks[7].startTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
-    expect(tasks[7].endTime).toEqual(moment('2014-01-18', 'YYYY-MM-DD').toDate());
+    expect(tasks[7].startTime).toEqual(dayjs('2014-01-13', 'YYYY-MM-DD').toDate());
+    expect(tasks[7].endTime).toEqual(dayjs('2014-01-18', 'YYYY-MM-DD').toDate());
    expect(tasks[7].order).toEqual(7);
    expect(tasks[7].id).toEqual('task4');
    expect(tasks[7].task).toEqual('Future task in critical line');

-    expect(tasks[8].startTime).toEqual(moment('2014-01-18', 'YYYY-MM-DD').toDate());
-    expect(tasks[8].endTime).toEqual(moment('2014-01-20', 'YYYY-MM-DD').toDate());
+    expect(tasks[8].startTime).toEqual(dayjs('2014-01-18', 'YYYY-MM-DD').toDate());
+    expect(tasks[8].endTime).toEqual(dayjs('2014-01-20', 'YYYY-MM-DD').toDate());
    expect(tasks[8].order).toEqual(8);
    expect(tasks[8].id).toEqual('task5');
    expect(tasks[8].task).toEqual('Create tests for renderer');

-    expect(tasks[9].startTime).toEqual(moment('2014-01-20', 'YYYY-MM-DD').toDate());
-    expect(tasks[9].endTime).toEqual(moment('2014-01-21', 'YYYY-MM-DD').toDate());
+    expect(tasks[9].startTime).toEqual(dayjs('2014-01-20', 'YYYY-MM-DD').toDate());
+    expect(tasks[9].endTime).toEqual(dayjs('2014-01-21', 'YYYY-MM-DD').toDate());
    expect(tasks[9].order).toEqual(9);
    expect(tasks[9].id).toEqual('task6');
    expect(tasks[9].task).toEqual('Add to mermaid');

    // Section - Documentation
-    expect(tasks[10].startTime).toEqual(moment('2014-01-08', 'YYYY-MM-DD').toDate());
-    expect(tasks[10].endTime).toEqual(moment('2014-01-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[10].startTime).toEqual(dayjs('2014-01-08', 'YYYY-MM-DD').toDate());
+    expect(tasks[10].endTime).toEqual(dayjs('2014-01-11', 'YYYY-MM-DD').toDate());
    expect(tasks[10].order).toEqual(10);
    expect(tasks[10].id).toEqual('a1');
    expect(tasks[10].task).toEqual('Describe gantt syntax');

-    expect(tasks[11].startTime).toEqual(moment('2014-01-11', 'YYYY-MM-DD').toDate());
-    expect(tasks[11].endTime).toEqual(
-      moment('2014-01-11 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate()
-    );
+    expect(tasks[11].startTime).toEqual(dayjs('2014-01-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[11].endTime).toEqual(dayjs('2014-01-11 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
    expect(tasks[11].order).toEqual(11);
    expect(tasks[11].id).toEqual('task7');
    expect(tasks[11].task).toEqual('Add gantt diagram to demo page');

-    expect(tasks[12].startTime).toEqual(moment('2014-01-11', 'YYYY-MM-DD').toDate());
-    expect(tasks[12].endTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
+    expect(tasks[12].startTime).toEqual(dayjs('2014-01-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[12].endTime).toEqual(dayjs('2014-01-13', 'YYYY-MM-DD').toDate());
    expect(tasks[12].order).toEqual(12);
    expect(tasks[12].id).toEqual('doc1');
    expect(tasks[12].task).toEqual('Add another diagram to demo page');

    // Section - Last section
-    expect(tasks[13].startTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
-    expect(tasks[13].endTime).toEqual(moment('2014-01-16', 'YYYY-MM-DD').toDate());
+    expect(tasks[13].startTime).toEqual(dayjs('2014-01-13', 'YYYY-MM-DD').toDate());
+    expect(tasks[13].endTime).toEqual(dayjs('2014-01-16', 'YYYY-MM-DD').toDate());
    expect(tasks[13].order).toEqual(13);
    expect(tasks[13].id).toEqual('task8');
    expect(tasks[13].task).toEqual('Describe gantt syntax');

-    expect(tasks[14].startTime).toEqual(moment('2014-01-16', 'YYYY-MM-DD').toDate());
-    expect(tasks[14].endTime).toEqual(
-      moment('2014-01-16 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate()
-    );
+    expect(tasks[14].startTime).toEqual(dayjs('2014-01-16', 'YYYY-MM-DD').toDate());
+    expect(tasks[14].endTime).toEqual(dayjs('2014-01-16 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
    expect(tasks[14].order).toEqual(14);
    expect(tasks[14].id).toEqual('task9');
    expect(tasks[14].task).toEqual('Add gantt diagram to demo page');

    expect(tasks[15].startTime).toEqual(
-      moment('2014-01-16 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate()
-    );
-    expect(tasks[15].endTime).toEqual(
-      moment('2014-01-18 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate()
+      dayjs('2014-01-16 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate()
    );
+    expect(tasks[15].endTime).toEqual(dayjs('2014-01-18 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
    expect(tasks[15].order).toEqual(15);
    expect(tasks[15].id).toEqual('task10');
    expect(tasks[15].task).toEqual('Add another diagram to demo page');
@@ -358,14 +352,14 @@ describe('when using the ganttDb', function () {
    ganttDb.addTask('test2', 'id2,after id1,20d');
    const tasks = ganttDb.getTasks();

-    expect(tasks[0].startTime).toEqual(moment('2019-09-30', 'YYYY-MM-DD').toDate());
-    expect(tasks[0].endTime).toEqual(moment('2019-10-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].startTime).toEqual(dayjs('2019-09-30', 'YYYY-MM-DD').toDate());
+    expect(tasks[0].endTime).toEqual(dayjs('2019-10-11', 'YYYY-MM-DD').toDate());
    expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
    expect(tasks[0].id).toEqual('id1');
    expect(tasks[0].task).toEqual('test1');

-    expect(tasks[1].startTime).toEqual(moment('2019-10-11', 'YYYY-MM-DD').toDate());
-    expect(tasks[1].endTime).toEqual(moment('2019-10-31', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].startTime).toEqual(dayjs('2019-10-11', 'YYYY-MM-DD').toDate());
+    expect(tasks[1].endTime).toEqual(dayjs('2019-10-31', 'YYYY-MM-DD').toDate());
    expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
    expect(tasks[1].id).toEqual('id2');
    expect(tasks[1].task).toEqual('test2');
@@ -380,13 +374,13 @@ describe('when using the ganttDb', function () {
    });
    it('should automatically add one day to all end dates', function () {
      const tasks = ganttDb.getTasks();
-      expect(tasks[0].startTime).toEqual(moment('2019-02-01', 'YYYY-MM-DD').toDate());
-      expect(tasks[0].endTime).toEqual(moment('2019-02-02', 'YYYY-MM-DD').toDate());
+      expect(tasks[0].startTime).toEqual(dayjs('2019-02-01', 'YYYY-MM-DD').toDate());
+      expect(tasks[0].endTime).toEqual(dayjs('2019-02-02', 'YYYY-MM-DD').toDate());
      expect(tasks[0].id).toEqual('id1');
      expect(tasks[0].task).toEqual('test1');

-      expect(tasks[1].startTime).toEqual(moment('2019-02-01', 'YYYY-MM-DD').toDate());
-      expect(tasks[1].endTime).toEqual(moment('2019-02-04', 'YYYY-MM-DD').toDate());
+      expect(tasks[1].startTime).toEqual(dayjs('2019-02-01', 'YYYY-MM-DD').toDate());
+      expect(tasks[1].endTime).toEqual(dayjs('2019-02-04', 'YYYY-MM-DD').toDate());
      expect(tasks[1].renderEndTime).toBeNull(); // Fixed end
      expect(tasks[1].manualEndTime).toBeTruthy();
      expect(tasks[1].id).toEqual('id2');
--- a/packages/mermaid/src/diagrams/mindmap/detector.ts
+++ b/packages/mermaid/src/diagrams/mindmap/detector.ts
@@ -1,5 +1,4 @@
-import type { ExternalDiagramDefinition } from 'mermaid';
-
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';
 const id = 'mindmap';

 const detector = (txt: string) => {
@@ -7,7 +6,7 @@ const detector = (txt: string) => {
 };

 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
  return { id, diagram };
 };

--- a/packages/mermaid/src/diagrams/mindmap/diagram-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/diagram-definition.ts
@@ -3,12 +3,10 @@ import mindmapParser from './parser/mindmap';
 import * as mindmapDb from './mindmapDb';
 import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
-import { injectUtils } from './mermaidUtils';

 export const diagram = {
  db: mindmapDb,
  renderer: mindmapRenderer,
  parser: mindmapParser,
  styles: mindmapStyles,
-  injectUtils,
 };
--- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
@@ -1,16 +1,7 @@
 import { parser as mindmap } from './parser/mindmap';
 import * as mindmapDB from './mindmapDb';
-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);
+import { setLogLevel } from '../../diagram-api/diagramAPI';

 describe('when parsing a mindmap ', function () {
  beforeEach(function () {
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
@@ -1,5 +1,8 @@
-/** Created by knut on 15-01-14. */
-import { sanitizeText, getConfig, log } from './mermaidUtils';
+import { getConfig } from '../../config';
+import { sanitizeText as _sanitizeText } from '../../diagrams/common/common';
+import { log } from '../../logger';
+
+export const sanitizeText = (text) => _sanitizeText(text, getConfig());

 let nodes = [];
 let cnt = 0;
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -1,14 +1,12 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+import { log } from '../../logger';
+import { getConfig } from '../../config';
+import { setupGraphViewbox } from '../../setupGraphViewbox';
 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);
-
+let cytoscape;
 /**
 * @param {any} svg The svg element to draw the diagram onto
 * @param {object} mindmap The mindmap data and hierarchy
@@ -91,7 +89,14 @@ function addNodes(mindmap, cy, conf, level) {
 * @param conf
 * @param cy
 */
-function layoutMindmap(node, conf) {
+async function layoutMindmap(node, conf) {
+  if (!cytoscape) {
+    cytoscape = (await import('cytoscape')).default;
+    const coseBilkent = (await import('cytoscape-cose-bilkent')).default;
+    // Inject the layout algorithm into cytoscape
+    cytoscape.use(coseBilkent);
+  }
+
  return new Promise((resolve) => {
    // Add temporary render element
    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
--- a/packages/mermaid/src/diagrams/mindmap/styles.js
+++ b/packages/mermaid/src/diagrams/mindmap/styles.js
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
--- a/packages/mermaid/src/diagrams/pie/amonts.csv
+++ b/packages/mermaid/src/diagrams/pie/amonts.csv
@@ -0,0 +1,10 @@
+name,amounts
+Foo, 33
+Rishab, 12
+Alexis, 41
+Tom, 16
+Courtney, 59
+Christina, 38
+Jack, 21
+Mickey, 25
+Paul, 30
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -631,6 +631,9 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
 export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
  const { securityLevel, sequence } = configApi.getConfig();
  conf = sequence;
+  diagObj.db.clear();
+  // Parse the graph definition
+  diagObj.parser.parse(_text);
  // Handle root and Document for when rendering in sandbox mode
  let sandboxElement;
  if (securityLevel === 'sandbox') {
--- a/packages/mermaid/src/diagrams/timeline/detector.ts
+++ b/packages/mermaid/src/diagrams/timeline/detector.ts
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };

 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
  return { id, diagram };
 };

--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -1,17 +1,6 @@
 import mermaid, { type MermaidConfig } from 'mermaid';
-import mindmap from '@mermaid-js/mermaid-mindmap';
-// import timeline from '@mermaid-js/mermaid-timeline';
-
-const init = (async () => {
-  try {
-    await mermaid.registerExternalDiagrams([mindmap, timeline]);
-  } catch (e) {
-    console.error(e);
-  }
-})();

 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
-  await init;
  mermaid.initialize(config);
  const svg = await mermaid.renderAsync(id, code);
  return svg;
--- a/packages/mermaid/src/docs/config/8.6.0_docs.md
+++ b/packages/mermaid/src/docs/config/8.6.0_docs.md
@@ -2,7 +2,7 @@

 ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)

-## [CDN](https://unpkg.com/mermaid/)
+## [CDN](https://www.jsdelivr.com/package/npm/mermaid)

 With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.

--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -6,7 +6,7 @@ Diagrams can be re-rendered/modified by modifying their descriptions.

 ### CDN

-[https://unpkg.com/mermaid/](https://unpkg.com/mermaid/)
+[https://www.jsdelivr.com/package/npm/mermaid](https://www.jsdelivr.com/package/npm/mermaid)

 Please note that you can switch versions through the dropdown box at the top right.

--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -28,7 +28,7 @@ features:
    link: ../../config/Tutorials.html
  - title: 🧩 Integrations available!
    details: Use Mermaid with your favorite applications, check out the integrations list.
-    link: ../../misc/integrations.md
+    link: ../../ecosystem/integrations.md
  - title: 🏆 Award winning!
    details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
    link: https://osawards.com/javascript/2019
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -26,11 +26,11 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 <br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](../config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).

 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../misc/integrations.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)

 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).

@@ -55,14 +55,14 @@ In our release process we rely heavily on visual regression tests using [applito
 ### CDN

 ```
-https://unpkg.com/mermaid@<version>/dist/
+<CDN_URL>/mermaid@<version>/dist/
 ```

 To select a version:

 Replace `<version>` with the desired version number.

-Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
+Latest Version: [<CDN_URL>/mermaid@<MERMAID_VERSION>](<CDN_URL>/mermaid@<MERMAID_VERSION>)

 ## Deploying Mermaid

--- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -11,7 +11,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
 ## Four ways of using mermaid:

 1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2. Using [mermaid plugins](../misc/integrations.md) with programs you are familiar with.
+2. Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with.
 3. Calling the Mermaid JavaScript API.
 4. Deploying Mermaid as a dependency.

@@ -68,7 +68,7 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/

 ## 2. Using Mermaid Plugins:

-You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations.md).
+You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations.md).

 **This is covered in greater detail in the [Usage section](../config/usage.md)**

--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -164,14 +164,32 @@ Root

 ## Integrating with your library/website.

-Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
+
+You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:

 ```html
 <script type="module">
  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.min.mjs';
+  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
 </script>
 ```

-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+From version 9.4.0 you can simplify this code to:
+
+```html
+<script type="module">
+  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+</script>
+```
+
+or if you prefer not using the ESM package:
+
+```html
+<script src="<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
+```
+
+Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -318,19 +318,19 @@ There are two ways to apply a `classDef` style to a state:

 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:

-```text
+```txt
    class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```

 Here is an example applying the `badBadEvent` style to a state named `Crash`:

-```text
+```txt
 class Crash badBadEvent
 ```

 Here is an example applying the `movement` style to the two states `Moving` and `Crash`:

-```text
+```txt
 class Moving, Crash movement
 ```

@@ -365,7 +365,7 @@ and `badBadEvent`

 You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is

-```text
+```txt
 [state]:::[style name]
 ```

--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -291,4 +291,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
          2010 : Pinterest
 ```

-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+## Integrating with your library/website.
+
+Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
+
+You can use this method to add mermaid including the timeline diagram to a web page:
+
+```html
+<script src="<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
+```
+
+Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
--- a/packages/mermaid/src/docs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, searchForWorkspaceRoot } from 'vite';
+import { defineConfig, searchForWorkspaceRoot, PluginOption } from 'vite';
 import path from 'path';
 // @ts-ignore: still in alpha
 import { SearchPlugin } from 'vitepress-plugin-search';
@@ -13,12 +13,12 @@ export default defineConfig({
      // TODO: will be fixed in the next vitepress release.
      name: 'fix-virtual',

-      async resolveId(id) {
+      async resolveId(id: string) {
        if (id === virtualModuleId) {
          return resolvedVirtualModuleId;
        }
      },
-      async load(this, id) {
+      async load(this, id: string) {
        if (id === resolvedVirtualModuleId) {
          return `export default ${JSON.stringify({
            securityLevel: 'loose',
@@ -26,20 +26,15 @@ export default defineConfig({
          })};`;
        }
      },
-    },
+    } as PluginOption,
  ],
  resolve: {
    alias: {
      mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
-
-      '@mermaid-js/mermaid-mindmap': path.join(
+      '@mermaid-js/mermaid-example-diagram': path.join(
        __dirname,
-        '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs'
+        '../../../mermaid-example-diagram/dist/mermaid-example-diagram.esm.min.mjs'
      ), // Use this one to build
-      // '@mermaid-js/mermaid-timeline': path.join(
-      //   __dirname,
-      //   '../../../mermaid-timeline/dist/mermaid-timeline.esm.min.mjs'
-      // ),
    },
  },
  server: {
--- a/packages/mermaid/src/logger.ts
+++ b/packages/mermaid/src/logger.ts
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable no-console */
-import moment from 'moment';
+import dayjs from 'dayjs';

 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

@@ -85,6 +85,6 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
 * @returns The format with the timestamp and log level
 */
 const format = (level: Uppercase<LogLevel>): string => {
-  const time = moment().format('ss.SSS');
+  const time = dayjs().format('ss.SSS');
  return `%c${time} : ${level} : `;
 };
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -10,6 +10,7 @@
 *
 * In addition to the render function, a number of behavioral configuration options are available.
 */
+// @ts-ignore TODO: Investigate D3 issue
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 // @ts-ignore: TODO Fix ts errors
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,3 +1,5 @@
+import type {} from '@vitest/spy/dist/index';
+
 /**
 * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all
 * mocked (via vi.fn()) so you can track if they have been called, etc.
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tests/webpack/package.json
+++ b/tests/webpack/package.json
@@ -18,6 +18,6 @@
  },
  "dependencies": {
    "mermaid": "workspace:*",
-    "@mermaid-js/mermaid-mindmap": "workspace:*"
+    "@mermaid-js/mermaid-example-diagram": "workspace:*"
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -76,7 +76,7 @@
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
-    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "preserveSymlinks": true /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
Author	SHA1	Message	Date
Sidharth Vinod	e4a3e8e892	chore: Replace moment with dayjs	2023-02-18 23:37:32 +05:30
Sidharth Vinod	3c4a6a19bb	fix: Vite, D3, Vitest Types	2023-02-18 22:35:14 +05:30
Sidharth Vinod	86cfb1bb60	Skip precommit hooks on CI	2023-02-16 17:09:02 +05:30
Sidharth Vinod	b10d243995	Fix release-publish	2023-02-16 17:07:03 +05:30
Sidharth Vinod	b22978dfb2	Fix timeline and mindmap	2023-02-16 16:52:15 +05:30
Knut Sveidqvist	276f042983	Merge branch 'release/9.4.1' of github.com:mermaid-js/mermaid into release/9.4.1	2023-02-16 12:05:51 +01:00
Knut Sveidqvist	71e4f1152b	Updating integration instructions for timeline and mindmap	2023-02-16 12:05:38 +01:00
Sidharth Vinod	0a923dfe91	Remove node heap	2023-02-16 16:28:09 +05:30
Sidharth Vinod	743c636441	Revert "chore: Set node heap size" This reverts commit `8df965bd60`.	2023-02-16 16:10:20 +05:30
Sidharth Vinod	8c7043ffaf	Revert "Remove text hint" This reverts commit `ec6ef35d21`.	2023-02-16 15:27:43 +05:30
Sidharth Vinod	f81f9f7c95	Split cytoscape	2023-02-16 15:21:45 +05:30
Sidharth Vinod	ea7aaa5d56	Linear build	2023-02-16 15:09:22 +05:30
Sidharth Vinod	ec6ef35d21	Remove text hint	2023-02-16 15:07:55 +05:30
Sidharth Vinod	c815c84e1c	Fix elk import	2023-02-16 15:00:35 +05:30
Sidharth Vinod	b8315cec6c	Dynamic elk import	2023-02-16 14:42:47 +05:30
Sidharth Vinod	76fdc00b06	Remove heap option	2023-02-16 14:41:22 +05:30
Sidharth Vinod	83797eef38	elk web-worker	2023-02-16 14:21:33 +05:30
Sidharth Vinod	0db2657b7b	Test publish docs	2023-02-16 13:05:53 +05:30
Sidharth Vinod	a1a252cc29	Merge branch 'master' into release/9.4.1 * master: Update vitepress Fix links to integrations.md chore: Set node heap size	2023-02-16 13:01:10 +05:30
Sidharth Vinod	533bd7da3c	chore: Add file extension for dynamic import	2023-02-16 12:56:32 +05:30
Sidharth Vinod	037504785c	chore: Defer elk loading	2023-02-16 12:47:28 +05:30
Sidharth Vinod	62f7fb082e	Update vitepress	2023-02-16 12:47:00 +05:30
Sidharth Vinod	b89b90dbb9	Fix links to integrations.md	2023-02-16 12:35:43 +05:30
Sidharth Vinod	e9cc9f4005	chore: Set node heap size	2023-02-16 12:26:27 +05:30
Sidharth Vinod	8df965bd60	chore: Set node heap size	2023-02-16 12:21:24 +05:30
Sidharth Vinod	2b3019fb94	Set node heap size	2023-02-16 12:16:00 +05:30
Sidharth Vinod	31afd7499b	chore: Linear build	2023-02-16 12:05:41 +05:30
Knut Sveidqvist	25da0c6c8e	Merge branch 'master' into develop	2023-02-15 16:31:44 +01:00
Per Brolin	98bec36f81	Merge branch 'release/9.4.0'	2023-02-15 16:20:22 +01:00
Per Brolin	97614b8af5	Updated to 9.4.0	2023-02-15 15:54:02 +01:00
Knut Sveidqvist	343e48302e	Fix for direction issue with elk rendering	2023-02-15 15:12:52 +01:00
Per Brolin	aef989fe03	Corrected sequenceRenderer	2023-02-15 15:11:23 +01:00
Per Brolin	0c38f20281	Clearing sequence diagram before rendering	2023-02-15 14:17:46 +01:00
Knut Sveidqvist	eed427b4ac	Adding simple direction logic	2023-02-15 14:10:38 +01:00
Knut Sveidqvist	027296df68	Working version before applying direction logic	2023-02-15 13:54:33 +01:00
Sidharth Vinod	9d75665460	Fix links to integrations.md	2023-02-13 10:55:24 +05:30
Sidharth Vinod	6fcba87ee8	Merge pull request #4076 from mermaid-js/sidv/readmeLogo Add logo to readme	2023-02-13 10:49:56 +05:30
Per Brolin	a956be7bbf	Release candidate	2023-02-10 11:03:25 +01:00
Per Brolin	e0286be8d2	Corrected typo	2023-02-10 08:58:58 +01:00
Sidharth Vinod	3e9978a58c	docs: Add CDN to top links, remove changelog Co-authored-by: Alois Klink <alois@aloisklink.com>	2023-02-10 12:31:14 +05:30
Sidharth Vinod	fd8fb96ec2	chore: Copy readme before publishing	2023-02-10 12:14:58 +05:30
Sidharth Vinod	ad6a43cf81	Add logo to readme	2023-02-09 12:46:05 +05:30
Sidharth Vinod	f6d9868e35	chore: Lint fix	2023-02-09 11:34:20 +05:30
Sidharth Vinod	94d4ee3a2c	Merge pull request #4015 from JeffTrain/develop docs: minor fix on markdown	2023-02-09 11:33:28 +05:30
Sidharth Vinod	e9d2d084fd	Merge pull request #4066 from mermaid-js/renovate/actions-dependency-review-action-3.x chore(deps): update actions/dependency-review-action action to v3	2023-02-09 11:14:27 +05:30
renovate[bot]	34c98717d5	chore(deps): update actions/dependency-review-action action to v3	2023-02-09 05:44:09 +00:00
Sidharth Vinod	f22ce38ada	Merge pull request #4065 from mermaid-js/renovate/actions-configure-pages-3.x chore(deps): update actions/configure-pages action to v3	2023-02-09 11:13:54 +05:30
Sidharth Vinod	8ba33a994c	Merge pull request #4072 from mermaid-js/renovate/timonvs-pr-labeler-action-4.x chore(deps): update timonvs/pr-labeler-action action to v4	2023-02-09 11:13:15 +05:30
Sidharth Vinod	07764348eb	Merge pull request #4069 from mermaid-js/renovate/jsdom-21.x chore(deps): update dependency jsdom to v21	2023-02-09 11:13:03 +05:30
Sidharth Vinod	803c8ca45b	Merge pull request #4070 from mermaid-js/renovate/rimraf-4.x chore(deps): update dependency rimraf to v4	2023-02-09 11:12:51 +05:30
Sidharth Vinod	b69b3919bb	Merge pull request #4073 from aloisklink/chore/cache-eslint-in-lint-fix build(lint:fix): cache eslint in pnpm run lint:fix	2023-02-09 08:27:16 +05:30
renovate[bot]	886d1c15c4	chore(deps): update timonvs/pr-labeler-action action to v4	2023-02-09 00:51:38 +00:00
renovate[bot]	72e8b7fb38	chore(deps): update dependency rimraf to v4	2023-02-09 00:49:20 +00:00
renovate[bot]	3a89cc7993	chore(deps): update dependency jsdom to v21	2023-02-09 00:47:08 +00:00
renovate[bot]	bb3a48c91a	chore(deps): update actions/configure-pages action to v3	2023-02-09 00:42:44 +00:00
renovate[bot]	d45eda1c60	chore(deps): update dependency @types/uuid to v9	2023-02-09 00:41:24 +00:00
Alois Klink	4d12fb0464	build(lint:fix): cache eslint in pnpm run lint:fix Cache eslint in `pnpm run lint:fix`. This was added to the `pnpm run lint` script in `b7f9495` (build: add eslint --cache file, 2022-08-27), but we didn't add it to `pnpm run lint:fix` due to worries about cache invalidation. However, we switched to using `--cache-strategy content` in `b3e509b7` (build(lint): cache eslint with strategy content, 2023-02-05), which should avoid any caching issues. Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>	2023-02-09 00:21:19 +00:00
Sidharth Vinod	08e7bbcc13	Merge pull request #4044 from mermaid-js/renovate/all-minor-patch chore(deps): update all non-major dependencies (minor)	2023-02-09 01:36:46 +05:30
Sidharth Vinod	f83f09d8b0	Fix vitest type	2023-02-09 01:29:41 +05:30
renovate[bot]	c4eb1608b0	chore(deps): update all non-major dependencies	2023-02-08 19:30:57 +00:00
Knut Sveidqvist	74df4a7a68	Mind map coming in from the cold. A lazy loaded diagram in the same way as timeline.	2023-02-08 17:42:58 +01:00
Knut Sveidqvist	38a84a7fe0	Merge branch 'develop' into release/9.4.0	2023-02-08 14:00:02 +01:00
Knut Sveidqvist	5e864c3b9b	Merge branch 'timeline' into release/9.4.0	2023-02-08 13:58:56 +01:00
Knut Sveidqvist	b5a4cc0e17	Merge pull request #4014 from mermaid-js/timeline Timeline Diagram	2023-02-08 13:57:36 +01:00
Per Brolin	e8db9b2bd5	Merge branch 'master' of github.com:mermaid-js/mermaid	2023-01-20 09:01:48 +01:00
cnjeftia	5925d8b731	docs: minor fix on markdown in root folder	2023-01-20 11:45:11 +08:00
cnjeftia	96d5bc7695	docs: minor fix on markdown	2023-01-20 11:29:16 +08:00
Sidharth Vinod	cdba2b4ac8	Update CDN links	2022-12-20 10:56:39 +05:30
Per Brolin	f36cf5b321	Merge branch 'master' of github.com:mermaid-js/mermaid	2022-11-14 13:02:03 +01:00
Per Brolin	82ac667535	Service functions added	2022-11-14 10:03:24 +01:00