From 1e53c121aed76791250d3d582477126481e1b9a0 Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Sat, 26 Feb 2022 12:51:05 -0500 Subject: [PATCH 001/193] chore: added katex as a dependency --- package.json | 1 + yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index b05377c61..54559883b 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "dagre-d3": "^0.6.4", "dompurify": "2.3.6", "graphlib": "^2.1.8", + "katex": "^0.15.2", "khroma": "^1.4.1", "moment-mini": "^2.24.0", "stylis": "^4.0.10" diff --git a/yarn.lock b/yarn.lock index fa9a86bc6..818794fb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3626,7 +3626,7 @@ commander@^5.1.0: resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae" integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg== -commander@^8.3.0: +commander@^8.0.0, commander@^8.3.0: version "8.3.0" resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== @@ -7635,6 +7635,13 @@ jsprim@^2.0.2: json-schema "0.4.0" verror "1.10.0" +katex@^0.15.2: + version "0.15.2" + resolved "https://registry.yarnpkg.com/katex/-/katex-0.15.2.tgz#c05ece41ab497597b17abca2cecde3e4c0127f9d" + integrity sha512-FfZ/f6f8bQdLmJ3McXDNTkKenQkoXkItpW0I9bsG2wgb+8JAY5bwpXFtI8ZVrg5hc1wo1X/UIhdkVMpok46tEQ== + dependencies: + commander "^8.0.0" + khroma@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.4.1.tgz#ad6a5b6a972befc5112ce5129887a1a83af2c003" From b74674765009c684c476015be6b10ca9015240ec Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Mon, 28 Feb 2022 16:19:17 -0500 Subject: [PATCH 002/193] chore: added css-loader, sass, sass-loader, style-loader --- .webpack/webpack.config.base.js | 8 +++ package.json | 4 ++ yarn.lock | 120 +++++++++++++++++++++++++++++++- 3 files changed, 130 insertions(+), 2 deletions(-) diff --git a/.webpack/webpack.config.base.js b/.webpack/webpack.config.base.js index 055f59dfc..0c8dcf4ce 100644 --- a/.webpack/webpack.config.base.js +++ b/.webpack/webpack.config.base.js @@ -39,6 +39,14 @@ export default { test: /\.scss$/, use: ['css-to-string-loader', 'css-loader', 'sass-loader'], }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader', 'sass-loader'], + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/i, + type: 'asset/resource', + }, { test: /\.jison$/, use: { diff --git a/package.json b/package.json index 54559883b..0ec0ad938 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "babel-loader": "^8.2.2", "concurrently": "^7.0.0", "coveralls": "^3.0.2", + "css-loader": "^6.6.0", "css-to-string-loader": "^0.1.3", "cypress": "9.5.0", "documentation": "13.2.0", @@ -103,7 +104,10 @@ "path-browserify": "^1.0.1", "prettier": "^2.3.2", "prettier-plugin-jsdoc": "^0.3.30", + "sass": "^1.49.9", + "sass-loader": "^12.6.0", "start-server-and-test": "^1.12.6", + "style-loader": "^3.3.1", "terser-webpack-plugin": "^5.2.4", "webpack": "^5.53.0", "webpack-cli": "^4.7.2", diff --git a/yarn.lock b/yarn.lock index 818794fb8..fff00f09f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3380,7 +3380,7 @@ check-more-types@2.24.0, check-more-types@^2.24.0: resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA= -chokidar@^3.4.0, chokidar@^3.5.3: +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.0, chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -4009,6 +4009,20 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-loader@^6.6.0: + version "6.6.0" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.6.0.tgz#c792ad5510bd1712618b49381bd0310574fafbd3" + integrity sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg== + dependencies: + icss-utils "^5.1.0" + postcss "^8.4.5" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.0" + postcss-modules-scope "^3.0.0" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.2.0" + semver "^7.3.5" + css-to-string-loader@^0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/css-to-string-loader/-/css-to-string-loader-0.1.3.tgz#c937175f2ec783969aefe14a4fba055f7b4f9562" @@ -4016,6 +4030,11 @@ css-to-string-loader@^0.1.3: dependencies: loader-utils "^0.2.15" +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + cssom@^0.4.4: version "0.4.4" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10" @@ -6466,6 +6485,11 @@ iconv-lite@0.6: dependencies: safer-buffer ">= 2.1.2 < 3.0.0" +icss-utils@^5.0.0, icss-utils@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + identity-obj-proxy@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14" @@ -6495,6 +6519,11 @@ image-size@^1.0.0: dependencies: queue "6.0.2" +immutable@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23" + integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw== + import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -7676,6 +7705,11 @@ kleur@^3.0.3: resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w== +klona@^2.0.4: + version "2.0.5" + resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc" + integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ== + konan@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/konan/-/konan-2.1.1.tgz#eea88f05c56249b78903b952b953393900346dd1" @@ -8307,6 +8341,11 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +nanoid@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" + integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -8914,6 +8953,56 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + +postcss-modules-local-by-default@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c" + integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + +postcss-modules-scope@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06" + integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg== + dependencies: + postcss-selector-parser "^6.0.4" + +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: + version "6.0.9" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f" + integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + +postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + +postcss@^8.4.5: + version "8.4.7" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8" + integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A== + dependencies: + nanoid "^3.3.1" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -9664,6 +9753,23 @@ safe-regex@^1.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass-loader@^12.6.0: + version "12.6.0" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb" + integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA== + dependencies: + klona "^2.0.4" + neo-async "^2.6.2" + +sass@^1.49.9: + version "1.49.9" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9" + integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + saxes@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d" @@ -9929,6 +10035,11 @@ sockjs@^0.3.21: uuid "^8.3.2" websocket-driver "^0.7.4" +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map-resolve@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -10299,6 +10410,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-loader@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575" + integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ== + stylis@^4.0.10: version "4.0.13" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" @@ -10906,7 +11022,7 @@ use@^3.1.0: resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ== -util-deprecate@^1.0.1, util-deprecate@~1.0.1: +util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= From c2e8cb75bd4530a8a7fb7f71684adf9b338fc6d4 Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Mon, 28 Feb 2022 16:20:17 -0500 Subject: [PATCH 003/193] chore: added katex rendering to flowcharts v1 & 2 --- src/diagrams/flowchart/flowRenderer-v2.js | 24 ++++++++++++++++------- src/diagrams/flowchart/flowRenderer.js | 23 ++++++++++++---------- src/diagrams/flowchart/styles.js | 6 ++++++ src/mermaid.js | 1 + 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index ae58a0212..0a8e1d857 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -1,5 +1,6 @@ import graphlib from 'graphlib'; import { select, curveLinear, selectAll } from 'd3'; +import katex from 'katex'; import flowDb from './flowDb'; import flow from './parser/flow'; @@ -56,10 +57,11 @@ export const addVertices = function (vert, g, svgId, root, doc) { if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { - label: vertexText.replace( - /fa[lrsb]?:fa-[\w-]+/g, - (s) => `` - ), + label: vertexText + .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + ), }; vertexNode = addHtmlLabel(svg, node).node(); vertexNode.parentNode.removeChild(vertexNode); @@ -139,11 +141,15 @@ export const addVertices = function (vert, g, svgId, root, doc) { default: _shape = 'rect'; } + const labelText = vertexText.replace(/\$\$(.*)\$\$/g, (r, c) => + katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + ); + console.log(labelText); // Add the node g.setNode(vertex.id, { labelStyle: styles.labelStyle, shape: _shape, - labelText: vertexText, + labelText, rx: radious, ry: radious, class: classStr, @@ -164,7 +170,7 @@ export const addVertices = function (vert, g, svgId, root, doc) { log.info('setNode', { labelStyle: styles.labelStyle, shape: _shape, - labelText: vertexText, + labelText, rx: radious, ry: radious, class: classStr, @@ -309,7 +315,11 @@ export const addEdges = function (edges, g) { // edgeData.label = `${edge.text}`; // } else { edgeData.labelType = 'text'; - edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); + edgeData.label = edge.text + .replace(common.lineBreakRegex, '\n') + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + ); if (typeof edge.style === 'undefined') { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 7cc07e242..241f08faa 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -1,5 +1,6 @@ import graphlib from 'graphlib'; import { select, curveLinear, selectAll } from 'd3'; +import katex from 'katex'; import flowDb from './flowDb'; import flow from './parser/flow'; @@ -61,10 +62,11 @@ export const addVertices = function (vert, g, svgId, root, _doc) { if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { - label: vertexText.replace( - /fa[lrsb]?:fa-[\w-]+/g, - (s) => `` - ), + label: vertexText + .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + ), }; vertexNode = addHtmlLabel(svg, node).node(); vertexNode.parentNode.removeChild(vertexNode); @@ -73,7 +75,6 @@ export const addVertices = function (vert, g, svgId, root, _doc) { svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:')); const rows = vertexText.split(common.lineBreakRegex); - for (let j = 0; j < rows.length; j++) { const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan'); tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); @@ -240,10 +241,13 @@ export const addEdges = function (edges, g) { if (evaluate(getConfig().flowchart.htmlLabels)) { edgeData.labelType = 'html'; - edgeData.label = `${edge.text.replace( - /fa[lrsb]?:fa-[\w-]+/g, - (s) => `` - )}`; + edgeData.label = `${edge.text + .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex + .renderToString(c, { output: 'mathml', throwOnError: true, displayMode: true }) + .replace(/\n/g, ' ') + )}`; } else { edgeData.labelType = 'text'; edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); @@ -438,7 +442,6 @@ export const draw = function (text, id) { const svgBounds = svg.node().getBBox(); const width = svgBounds.width + padding * 2; const height = svgBounds.height + padding * 2; - configureSvgSize(svg, height, width, conf.useMaxWidth); // Ensure the viewBox includes the whole svgBounds area with extra space for padding diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.js index abaecb0b4..02d153b34 100644 --- a/src/diagrams/flowchart/styles.js +++ b/src/diagrams/flowchart/styles.js @@ -46,6 +46,12 @@ const getStyles = (options) => stroke-width: 1px; } + .node .katex path { + fill: #000; + stroke: #000; + stroke-width: 1px; + } + .node .label { text-align: center; } diff --git a/src/mermaid.js b/src/mermaid.js index 5d7a0090f..757a91e2a 100644 --- a/src/mermaid.js +++ b/src/mermaid.js @@ -5,6 +5,7 @@ import { log } from './logger'; import mermaidAPI from './mermaidAPI'; import utils from './utils'; +import 'katex/dist/katex.css'; /** * ## init From 275f2002b513a27a1f6e124306a1da52623ea0e8 Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Mon, 28 Feb 2022 16:23:35 -0500 Subject: [PATCH 004/193] chore: added katex demo --- demos/flowchart.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/demos/flowchart.html b/demos/flowchart.html index 0ab1f6481..671e0b094 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -11,6 +11,7 @@ font-family: 'Courier New', Courier, monospace !important; } +

Comparison "graph vs. flowchart"

@@ -1080,8 +1081,28 @@ style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff + +

Sample 20

+

graph

+
+ graph LR + A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$") + A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$") + B -->|"$$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4\end{alignat}$$"| D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$") + C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$") +
+ +

flowchart

+
+ flowchart LR + A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$") + A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$") + B -->|"$$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4\end{alignat}$$"| D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$") + C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$") +
+

Anchor for "link-clicked" test

From 4736e5939363a6635bd34dc1b28516809d8f4335 Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Tue, 29 Mar 2022 17:25:51 -0400 Subject: [PATCH 005/193] fix(katex): enforce html output for consistency --- src/diagrams/flowchart/flowRenderer-v2.js | 4 +++- src/diagrams/flowchart/flowRenderer.js | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 0a8e1d857..481f6cb02 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -142,7 +142,9 @@ export const addVertices = function (vert, g, svgId, root, doc) { _shape = 'rect'; } const labelText = vertexText.replace(/\$\$(.*)\$\$/g, (r, c) => - katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + katex + .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' }) + .replace(/\n/g, ' ') ); console.log(labelText); // Add the node diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 241f08faa..5300da5ad 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -65,7 +65,9 @@ export const addVertices = function (vert, g, svgId, root, _doc) { label: vertexText .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) .replace(/\$\$(.*)\$\$/g, (r, c) => - katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + katex + .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' }) + .replace(/\n/g, ' ') ), }; vertexNode = addHtmlLabel(svg, node).node(); @@ -245,7 +247,7 @@ export const addEdges = function (edges, g) { .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) .replace(/\$\$(.*)\$\$/g, (r, c) => katex - .renderToString(c, { output: 'mathml', throwOnError: true, displayMode: true }) + .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' }) .replace(/\n/g, ' ') )}`; } else { From 1db4230d356fea7b153bd76c1f5d23c459d890f4 Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Tue, 29 Mar 2022 17:37:35 -0400 Subject: [PATCH 006/193] feat(katex): fixed node sizing issues, caused by KaTeX fonts not being loaded --- package.json | 1 + src/mermaid.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- yarn.lock | 5 +++++ 3 files changed, 55 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0ec0ad938..29c16f5d2 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "dagre": "^0.8.5", "dagre-d3": "^0.6.4", "dompurify": "2.3.6", + "fontfaceobserver": "^2.1.0", "graphlib": "^2.1.8", "katex": "^0.15.2", "khroma": "^1.4.1", diff --git a/src/mermaid.js b/src/mermaid.js index 757a91e2a..91c363e90 100644 --- a/src/mermaid.js +++ b/src/mermaid.js @@ -5,6 +5,7 @@ import { log } from './logger'; import mermaidAPI from './mermaidAPI'; import utils from './utils'; +import FontFaceObserver from 'fontfaceobserver'; import 'katex/dist/katex.css'; /** @@ -172,6 +173,53 @@ const contentLoaded = function () { } }; +/** + * ##contentLoaded Callback function that is called when page is loaded. This functions attempts to + * pre-load the Katex fonts before configuring mermaid and calling init. Failure to pre-load fonts + * could cause nodes to be improperly sized. + */ +const loadKatexFont = function () { + const fontArray = [ + { name: 'KaTeX_AMS', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Caligraphic', options: { weight: 700, style: 'normal' } }, + { name: 'KaTeX_Caligraphic', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Fraktur', options: { weight: 700, style: 'normal' } }, + { name: 'KaTeX_Fraktur', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Main', options: { weight: 700, style: 'normal' } }, + { name: 'KaTeX_Main', options: { weight: 700, style: 'italic' } }, + { name: 'KaTeX_Main', options: { weight: 400, style: 'italic' } }, + { name: 'KaTeX_Main', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Math', options: { weight: 700, style: 'italic' } }, + { name: 'KaTeX_Math', options: { weight: 400, style: 'italic' } }, + { name: 'KaTeX_SansSerif', options: { weight: 700, style: 'normal' } }, + { name: 'KaTeX_SansSerif', options: { weight: 400, style: 'italic' } }, + { name: 'KaTeX_SansSerif', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Script', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Size1', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Size2', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Size3', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Size4', options: { weight: 400, style: 'normal' } }, + { name: 'KaTeX_Typewriter', options: { weight: 400, style: 'normal' } }, + ]; + + const observers = fontArray.map(function (fontObj) { + return new FontFaceObserver(fontObj.name, fontObj.options).load(); + }); + + Promise.all(observers).then( + function (fonts) { + fonts.forEach(function (font) { + log.warn(font.family + ' (weight: ' + font.weight + ') loaded successfully'); + }); + contentLoaded(); + }, + function (err) { + log.error('Some fonts failed to load: ' + err); + contentLoaded(); + } + ); +}; + if (typeof document !== 'undefined') { /*! * Wait for document loaded before starting the execution @@ -179,7 +227,7 @@ if (typeof document !== 'undefined') { window.addEventListener( 'load', function () { - contentLoaded(); + loadKatexFont(); }, false ); diff --git a/yarn.lock b/yarn.lock index fff00f09f..a8d3ebcbe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5798,6 +5798,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc" integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA== +fontfaceobserver@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991" + integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" From 825f50299ad9068e77ddb1995f528cb74ec419db Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Thu, 31 Mar 2022 13:01:10 -0400 Subject: [PATCH 007/193] feat(katex): improved handling of KaTeX errors --- src/errorRenderer.js | 117 ++++++++++++++++++++++++------------------- src/mermaidAPI.js | 2 +- 2 files changed, 67 insertions(+), 52 deletions(-) diff --git a/src/errorRenderer.js b/src/errorRenderer.js index 28a9579ad..f5a590da8 100644 --- a/src/errorRenderer.js +++ b/src/errorRenderer.js @@ -1,6 +1,7 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log } from './logger'; +import * as configApi from './config'; const conf = {}; @@ -22,71 +23,85 @@ export const setConf = function (cnf) { * * @param {string} id The text for the error * @param {string} ver The version + * @param {Error} error The caught error */ -export const draw = (id, ver) => { +export const draw = (id, ver, error = null) => { try { log.debug('Renering svg for syntax error\n'); + const cnf = configApi.getConfig(); const svg = select('#' + id); const g = svg.append('g'); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z' - ); + if (error && error.message.includes('KaTeX')) { + const title = error.message.split(': ')[0]; + const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', ''); + g.append('foreignObject') + .attr('width', 2000) + .attr('height', 500) + .append('xhtml:div') + .style('font-size', '70px') + .style('color', cnf.themeVariables.errorTextColor) + .html(`

${title}

${body}

`); + } else { + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z' + ); - g.append('text') // text label for the x axis - .attr('class', 'error-text') - .attr('x', 1240) - .attr('y', 250) - .attr('font-size', '150px') - .style('text-anchor', 'middle') - .text('Syntax error in graph'); - g.append('text') // text label for the x axis - .attr('class', 'error-text') - .attr('x', 1050) - .attr('y', 400) - .attr('font-size', '100px') - .style('text-anchor', 'middle') - .text('mermaid version ' + ver); + g.append('text') // text label for the x axis + .attr('class', 'error-text') + .attr('x', 1240) + .attr('y', 250) + .attr('font-size', '150px') + .style('text-anchor', 'middle') + .text('Syntax error in graph'); + g.append('text') // text label for the x axis + .attr('class', 'error-text') + .attr('x', 1050) + .attr('y', 400) + .attr('font-size', '100px') + .style('text-anchor', 'middle') + .text('mermaid version ' + ver); + } svg.attr('height', 100); svg.attr('width', 400); diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 06eaa3ce3..3f681e93f 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -499,7 +499,7 @@ const render = function (id, _txt, cb, container) { } } catch (e) { // errorRenderer.setConf(cnf.class); - errorRenderer.draw(id, pkg.version); + errorRenderer.draw(id, pkg.version, e); throw e; } From cc2c828e781ad638a5ce2e0284fbe29ce1ddc39e Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Sat, 2 Apr 2022 08:00:56 -0900 Subject: [PATCH 008/193] feat(katex): added cypress testing --- cypress/integration/rendering/katex.spec.js | 35 +++++++++++++++++++++ demos/flowchart.html | 33 ++++++++++++++++--- 2 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 cypress/integration/rendering/katex.spec.js diff --git a/cypress/integration/rendering/katex.spec.js b/cypress/integration/rendering/katex.spec.js new file mode 100644 index 000000000..ba99a217e --- /dev/null +++ b/cypress/integration/rendering/katex.spec.js @@ -0,0 +1,35 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util'; + +describe('Katex', () => { + it('1: should render a complex Katex flowchart no htmlLabels', () => { + imgSnapshotTest( + `graph LR + A["$$f(\\relax{x}) = \\int_{-\\infty}^\\infty \\hat{f}(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi$$"] -->|"$$\\Bigg(\\bigg(\\Big(\\big((\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a})\\big)\\Big)\\bigg)\\Bigg)$$"| B("$$1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots}}}}$$") + A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\phase{-78^\\circ}$$") + B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$") + C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")`, + { fontFamily: 'courier' } + ); + }); + it('2: should render a Katex flowchart containing the Greek alphabet', () => { + imgSnapshotTest( + `graph LR + A["$$\\alpha\\beta\\gamma\\delta\\epsilon\\zeta\\eta\\theta\\iota\\kappa\\lambda\\mu\\nu\\xi\\omicron\\pi\\rho\\sigma\\tau\\upsilon\\phi\\chi\\psi\\omega$$"] --> B["$$\\Alpha\\Beta\\Gamma\\Delta\\Epsilon\\Zeta\\Eta\\Theta\\Iota\\Kappa\\Lambda\\Mu\\Nu\\Xi\\Omicron\\Pi\\Rho\\Sigma\\Tau\\Upsilon\\Phi\\Chi\\Psi\\Omega$$"]`, + { fontFamily: 'courier' } + ); + }); + it('3: should render a Katex flowchart containing set theory symbols', () => { + imgSnapshotTest( + `graph LR + A["$$\\forall\\complement\\therefore\\emptyset\\exists\\subset\\because\\empty\\exist\\supset\\mapsto\\varnothing\\nexists\\mid\\to\\implies\\in\\land\\gets\\impliedby\\isin\\lor\\leftrightarrow\\iff\\notin\\ni\\notni\\lnot$$"] --> B["$$\\nabla\\Im\\Reals\\jmath\\partial\\image\\wp\\aleph\\Game\\weierp\\alef\\Finv\\N\\Z\\alefsym\\cnums\\natnums\\beth\\Complex\\R\\gimel\\ell\\Re\\daleth\\hbar\\real\\eth\\hslash\\reals$$"]`, + { fontFamily: 'courier' } + ); + }); + it('4: should render an error box originating from Katex', () => { + imgSnapshotTest( + `graph LR + A["$$\\shouldbeerror$$"]`, + { fontFamily: 'courier' } + ); + }); +}); diff --git a/demos/flowchart.html b/demos/flowchart.html index 671e0b094..21ecd305e 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -11,7 +11,6 @@ font-family: 'Courier New', Courier, monospace !important; } -

Comparison "graph vs. flowchart"

@@ -1083,13 +1082,12 @@

Sample 20

-

graph

graph LR A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$") A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$") - B -->|"$$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4\end{alignat}$$"| D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$") + B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$") C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
@@ -1098,10 +1096,37 @@ flowchart LR A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$") A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$") - B -->|"$$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4\end{alignat}$$"| D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$") + B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$") C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
+ +

Sample 21

+

graph

+
+ graph LR + A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"] +
+ +

flowchart

+
+ graph LR + A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"] +
+
+ +

Sample 22

+

graph

+
+ graph LR + A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"] +
+ +

flowchart

+
+ graph LR + A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"] +

Anchor for "link-clicked" test

From f3460560584a42a6bfc199b455783ff84e5483ae Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Sat, 2 Apr 2022 08:13:59 -0900 Subject: [PATCH 009/193] chore(katex): removed unused debugging code --- src/diagrams/flowchart/flowRenderer-v2.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 481f6cb02..72f265533 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -146,7 +146,6 @@ export const addVertices = function (vert, g, svgId, root, doc) { .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' }) .replace(/\n/g, ' ') ); - console.log(labelText); // Add the node g.setNode(vertex.id, { labelStyle: styles.labelStyle, From 483722fb3d4c5e610f88d7c18c14a6fb99125b58 Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Mon, 13 Feb 2023 12:52:22 -0600 Subject: [PATCH 010/193] fix(katex): fixed rendering of KaTeX errors --- .../mermaid/src/diagrams/error/errorRenderer.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index 5035266a5..c0a045768 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -29,16 +29,19 @@ export const draw = (_text: string, id: string, mermaidVersion: string, error: E const svg = select('#' + id); const g = svg.append('g'); - - if (error && error.message.includes('KaTeX')) { + console.log(error); + if (error && error.message?.includes('KaTeX')) { const title = error.message.split(': ')[0]; const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', ''); g.append('foreignObject') - .attr('width', 2000) - .attr('height', 500) + .attr('height', 100) + .attr('width', 500) .append('xhtml:div') - .style('font-size', '70px') - .html(`

${title}

${body}

`); + .style('font-size', '18px') + .style('color', '#552222') + .html(`
${title}
${body}
`); + svg.attr('height', 100); + svg.attr('width', 500); } else { g.append('path') .attr('class', 'error-icon') From 21479b2b2816c9cde305abc0ff37cbf3b8c87efd Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Mon, 13 Feb 2023 14:03:23 -0600 Subject: [PATCH 011/193] fix(katex): fixed rendering of KaTeX errors --- .../mermaid/src/diagrams/error/errorRenderer.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index 5035266a5..05abae7c7 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -29,16 +29,18 @@ export const draw = (_text: string, id: string, mermaidVersion: string, error: E const svg = select('#' + id); const g = svg.append('g'); - - if (error && error.message.includes('KaTeX')) { + if (error && error.message?.includes('KaTeX')) { const title = error.message.split(': ')[0]; const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', ''); g.append('foreignObject') - .attr('width', 2000) - .attr('height', 500) + .attr('height', 100) + .attr('width', 500) .append('xhtml:div') - .style('font-size', '70px') - .html(`

${title}

${body}

`); + .style('font-size', '18px') + .style('color', '#552222') + .html(`
${title}
${body}
`); + svg.attr('height', 100); + svg.attr('width', 500); } else { g.append('path') .attr('class', 'error-icon') From 2740edfc2b45139f342497d8ecb32edee6bb99c5 Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Mon, 13 Feb 2023 14:06:09 -0600 Subject: [PATCH 012/193] chore(katex): added katex to cSpell.json --- cSpell.json | 1 + 1 file changed, 1 insertion(+) diff --git a/cSpell.json b/cSpell.json index 6f93af103..9396f4ca8 100644 --- a/cSpell.json +++ b/cSpell.json @@ -48,6 +48,7 @@ "inkdrop", "jaoude", "jison", + "katex", "kaufmann", "khroma", "klemm", From fb5d80a7a1d8c67950cc9ce687f14b23f58d5084 Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Mon, 13 Feb 2023 15:29:32 -0600 Subject: [PATCH 013/193] fix(katex): removed extra body tag from merge --- demos/flowchart.html | 540 ++++++++++++++++++++----------------------- 1 file changed, 254 insertions(+), 286 deletions(-) diff --git a/demos/flowchart.html b/demos/flowchart.html index 036ce272c..cea036bf4 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -1,24 +1,22 @@ - - - - - Mermaid Quick Flowchart Test Page - - - - - -

Comparison "graph vs. flowchart"

-

Sample 1

-

graph

- 
+  
+    
+    
+    Mermaid Quick Flowchart Test Page
+    
+    
+  
+  
+    
Comparison "graph vs. flowchart"

+    
Sample 1

+    
graph

+    
     ---
     title: This is a complicated flow
     ---
@@ -121,10 +119,10 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -221,11 +219,11 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     

-  

+    

 
-  
Sample 2

-  
graph

-  
+    
Sample 2

+    
graph

+    
     ---
     title: What to buy
     ---
@@ -238,10 +236,10 @@
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
       accTitle: What to buy
       accDescr: Options of what to buy with Christmas money
@@ -251,11 +249,11 @@
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
   

-  

+    

 
-  
Sample 3

-  
graph

-  
+    
Sample 3

+    
graph

+    
     graph TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -264,10 +262,10 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -276,11 +274,11 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   

-  

+    

 
-  
Sample 4

-  
graph

-  
+    
Sample 4

+    
graph

+    
     graph LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -303,10 +301,10 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -329,11 +327,11 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     

-  

+    

 
-  
Sample 5

-  
graph

-  
+    
Sample 5

+    
graph

+    
     graph TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -398,10 +396,10 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -466,30 +464,30 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     

-  

+    

 
-  
Sample 6

-  
graph

-  
+    
Sample 6

+    
graph

+    
     graph TB
     subgraph One
       a1-->a2
     end
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     subgraph One
       a1-->a2
     end
     

-  

+    

 
-  
Sample 7

-  
graph

-  
+    
Sample 7

+    
graph

+    
     graph TB
     A
     B
@@ -518,10 +516,10 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     A
     B
@@ -550,11 +548,11 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     

-  

+    

 
-  
Sample 8

-  
graph

-  
+    
Sample 8

+    
graph

+    
     graph LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -569,10 +567,10 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -587,11 +585,11 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     

-  

+    

 
-  
Sample 9

-  
graph

-  
+    
Sample 9

+    
graph

+    
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
@@ -604,10 +602,10 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
@@ -620,11 +618,11 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
Sample 10

-  
graph

-  
+    
Sample 10

+    
graph

+    
     graph TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -638,10 +636,10 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -655,11 +653,11 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
Sample 11

-  
graph

-  
+    
Sample 11

+    
graph

+    
     graph LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -673,10 +671,10 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -690,11 +688,11 @@
     class A someclass;
     class C someclass;
   

-  

+    

 
-  
Sample 12

-  
graph

-  
+    
Sample 12

+    
graph

+    
     graph LR
     A[(cylindrical
shape
test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -712,10 +710,10 @@
     classDef someclass fill:#f96;
     class A someclass;
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A[(cylindrical
shape
test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -733,11 +731,11 @@
     classDef someclass fill:#f96;
     class A someclass;
   

-  

+    

 
-  
Sample 13

-  
graph

-  
+    
Sample 13

+    
graph

+    
     graph LR
     A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
     C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
@@ -749,10 +747,10 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
     C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
@@ -764,11 +762,11 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   

-  

+    

 
-  
Sample 14

-  
graph

-  
+    
Sample 14

+    
graph

+    
     graph LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
@@ -776,10 +774,10 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
@@ -787,11 +785,11 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     

-  

+    

 
-  
Sample 15

-  
graph

-  
+    
Sample 15

+    
graph

+    
     graph TB
     TITLE["Link Click Events
(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -808,10 +806,10 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     TITLE["Link Click Events
(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -828,11 +826,11 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
   

-  

+    

 
-  
Sample 16

-  
graph

-  
+    
Sample 16

+    
graph

+    
     graph LR
     A[red
text] -->|red
text| B(blue
text)
     C[/red
text/] -->|blue
text| D{blue
text}
@@ -847,10 +845,10 @@
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
   

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A[red
text] -->|red
text| B(blue
text)
     C[/red
text/] -->|blue
text| D{blue
text}
@@ -865,11 +863,11 @@
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
   

-  

+    

 
-  
Sample 17

-  
graph

-  
+    
Sample 17

+    
graph

+    
     graph TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -880,10 +878,10 @@
     class A myClass1
     class D myClass2
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -894,11 +892,11 @@
     class A myClass1
     class D myClass2
     

-  

+    

 
-  
Sample 18

-  
graph

-  
+    
Sample 18

+    
graph

+    
     graph LR
     A1[red text] -->|default style| A2[blue text]
     B1(red text) -->|default style| B2(blue text)
@@ -944,10 +942,10 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart LR
     A1[red text] <-->|default style| A2[blue text]
     B1(red text) <-->|default style| B2(blue text)
@@ -993,11 +991,11 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     

-  

+    

 
-  
Sample 19

-  
graph

-  
+    
Sample 19

+    
graph

+    
     graph TB
     A1[red text] -->|default style| A2[blue text]
     B1(red text) -->|default style| B2(blue text)
@@ -1043,10 +1041,10 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     

-  

+    

 
-  
flowchart

-  
+    
flowchart

+    
     flowchart TB
     A1[red text] <-->|default style| A2[blue text]
     B1(red text) <-->|default style| B2(blue text)
@@ -1094,92 +1092,63 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
-  

-
-  
Sample 20

-  
graph

-  
-    graph LR
-    A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
-    A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
-    B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
-    C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
-  

-  

-
-
-  
flowchart

-  
-    flowchart LR
-    A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
-    A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
-    B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
-    C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
-  

-  

-
-  
Sample 21

-  
graph

-  
-    graph LR
-    A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
-  

-  

-
-
-  
flowchart

-  
-    graph LR
-    A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
-  

-  

-
-  
Sample 22

-  
graph

-  
-    graph LR
-    A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
-  

-  

-
-
-  
flowchart

-  
-    graph LR
-    A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
-  

-  

-
-
-
-  
Anchor for "link-clicked" test

-
-  
-  
-  
-
     

-  

+    

 
-  

+    
Sample 20

+    
graph

+    
+      graph LR
+      A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
+      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
+      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
+      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
+    

+    

 
-  
+    
flowchart

+    
+      flowchart LR
+      A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
+      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
+      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
+      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
+    

+    

+
+    
Sample 21

+    
graph

+    
+      graph LR
+      A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
+    

+    

+
+    
flowchart

+    
+      graph LR
+      A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
+    

+    

+
+    
Sample 22

+    
graph

+    
+      graph LR
+      A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
+    

+    

+
+    
flowchart

+    
+      graph LR
+      A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
+    

+    

+
+    

+
+    
     graph LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -1276,9 +1245,9 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     

-  

+    

 
-  
+    
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me thinksssssx
sssssssssssssssssssuuu
tttsssssssssssssssssssssss}
@@ -1286,9 +1255,9 @@
     C -->|Two| E[iPhone]
     C -->|Three| F[Car]
     

-  

+    

 
-  
+    
     graph TD
     A[/Christmas\]
     A -->|Get money| B[\Go shopping/]
@@ -1297,9 +1266,9 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
     

-  

+    

 
-  
+    
     graph LR
     47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
     37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -1322,9 +1291,9 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     

-  

+    

 
-  
+    
     graph TD
     9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
     82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -1389,17 +1358,17 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     

-  

+    

 
-  
+    
     graph TB
     subgraph One
     a1-->a2
     end
     

-  

+    

 
-  
+    
     graph TB
     A
     B
@@ -1428,9 +1397,9 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     

-  

+    

 
-  
+    
     graph LR
     456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
     f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -1445,9 +1414,9 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     

-  

+    

 
-  
+    
     graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
@@ -1460,9 +1429,9 @@
     class A someclass;
     class C someclass;
     

-  

+    

 
-  
+    
     graph TD
     A([stadium shape test])
     A -->|Get money| B([Go shopping])
@@ -1476,9 +1445,9 @@
     class A someclass;
     class C someclass;
     

-  

+    

 
-  
+    
     graph LR
     A[[subroutine shape test]]
     A -->|Get money| B[[Go shopping]]
@@ -1492,9 +1461,9 @@
     class A someclass;
     class C someclass;
     

-  

+    

 
-  
+    
     graph LR
     A[(cylindrical
shape
test)]
     A -->|Get money| B1[(Go shopping 1)]
@@ -1512,9 +1481,9 @@
     classDef someclass fill:#f96;
     class A someclass;
     

-  

+    

 
-  
+    
     graph LR
     A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
     C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
@@ -1526,9 +1495,9 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
     

-  

+    

 
-  
+    
     graph LR
     A(( )) -->|step 1| B(( ))
     B(( )) -->|step 2| C(( ))
@@ -1536,9 +1505,9 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     

-  

+    

 
-  
+    
     graph TB
     TITLE["Link Click Events
(click the nodes below)"]
     A["link test (open in same tab)"]
@@ -1555,9 +1524,9 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
     

-  

+    

 
-  
+    
     graph LR
     A[red
text] -->|red
text| B(blue
text)
     C[/red
text/] -->|blue
text| D{blue
text}
@@ -1572,9 +1541,9 @@
     click B "index.html#link-clicked" "link test"
     click D testClick "click test"
     

-  

+    

 
-  
+    
     graph TD
     A[myClass1] --> B[default] & C[default]
     B[default] & C[default] --> D[myClass2]
@@ -1585,29 +1554,28 @@
     class A myClass1
     class D myClass2
     

-  

+    

 
-  
Anchor for "link-clicked" test

-
-  
-  
-  
-
+    
Anchor for "link-clicked" test

 
+    
+    
+    
+  
 

From bbc6eb6ee78fa02cbf1a88d352b1a27d47c4aadf Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Mon, 13 Feb 2023 16:02:49 -0600
Subject: [PATCH 014/193] chore(katex): lint:fix

---
 .../src/diagrams/error/errorRenderer.ts       |  7 ++++-
 .../src/diagrams/flowchart/flowRenderer-v2.js | 22 ++++++++++------
 .../src/diagrams/flowchart/flowRenderer.js    | 26 +++++++++----------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 05abae7c7..da3564997 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -22,7 +22,12 @@ export const setConf = function (cnf: any) {
  * @param mermaidVersion - The version
  * @param error - The caught error
  */
-export const draw = (_text: string, id: string, mermaidVersion: string, error: Error | null = null) => {
+export const draw = (
+  _text: string,
+  id: string,
+  mermaidVersion: string,
+  error: Error | null = null
+) => {
   try {
     log.debug('Renering svg for syntax error\n');
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index ebb689843..fd771e3d5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -59,12 +59,14 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
-        label: vertexText.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => ``
-        ).replace(/\$\$(.*)\$\$/g, (r, c) =>
-        katex.renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' }).replace(/\n/g, ' ').replace(//g, '')
-      ),
+        label: vertexText
+          .replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
+          .replace(/\$\$(.*)\$\$/g, (r, c) =>
+            katex
+              .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
+              .replace(/\n/g, ' ')
+              .replace(//g, '')
+          ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
       vertexNode.parentNode.removeChild(vertexNode);
@@ -147,7 +149,8 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
     const labelText = vertexText.replace(/\$\$(.*)\$\$/g, (r, c) =>
       katex
         .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-        .replace(/\n/g, ' ').replace(//g, '')
+        .replace(/\n/g, ' ')
+        .replace(//g, '')
     );
     // Add the node
     g.setNode(vertex.id, {
@@ -319,7 +322,10 @@ export const addEdges = function (edges, g, diagObj) {
     edgeData.label = edge.text
       .replace(common.lineBreakRegex, '\n')
       .replace(/\$\$(.*)\$\$/g, (r, c) =>
-        katex.renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' }).replace(/\n/g, ' ').replace(//g, '')
+        katex
+          .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
+          .replace(/\n/g, ' ')
+          .replace(//g, '')
       );
 
     if (edge.style === undefined) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 4a6f59ea4..755cc0ff5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -58,13 +58,13 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
-        label: vertexText.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => ``
-        ).replace(/\$\$(.*)\$\$/g, (r, c) =>
+        label: vertexText
+          .replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
+          .replace(/\$\$(.*)\$\$/g, (r, c) =>
             katex
               .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-              .replace(/\n/g, ' ').replace(//g, '')
+              .replace(/\n/g, ' ')
+              .replace(//g, '')
           ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
@@ -244,14 +244,14 @@ export const addEdges = function (edges, g, diagObj) {
         edgeData.labelType = 'html';
         edgeData.label = `${edge.text.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => ``
-        ).replace(/\$\$(.*)\$\$/g, (r, c) =>
-        katex
-          .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-          .replace(/\n/g, ' ').replace(//g, '')
-      )}`;
+        }">${edge.text
+          .replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
+          .replace(/\$\$(.*)\$\$/g, (r, c) =>
+            katex
+              .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
+              .replace(/\n/g, ' ')
+              .replace(//g, '')
+          )}`;
       } else {
         edgeData.labelType = 'text';
         edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');

From fdd900060ac5a2b3f74dd40cacb7a406cc632ff8 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Thu, 23 Feb 2023 15:15:00 -0600
Subject: [PATCH 015/193] chore(katex): lint:fix

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecd70d732..7552efa3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,6 @@
 
 ## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
 
-
 ### Mermaid is ESM only!
 
 We've dropped CJS support. So, you will have to update your import scripts as follows.
@@ -15,6 +14,7 @@ We've dropped CJS support. So, you will have to update your import scripts as fo
 ```
 
 You can keep using v9 by adding the `@9` in the CDN URL.
+
 ```diff
 - 
 + 

From 7dd21d85ba5f39e8161a04e2dfa4e4329a6b752c Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Thu, 23 Feb 2023 15:16:23 -0600
Subject: [PATCH 016/193] fix(katex): disabled 4th katex cypress test due to
 recent changes to error handling in develop

---
 cypress/integration/rendering/katex.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/katex.spec.js b/cypress/integration/rendering/katex.spec.js
index ba99a217e..c3b390ef0 100644
--- a/cypress/integration/rendering/katex.spec.js
+++ b/cypress/integration/rendering/katex.spec.js
@@ -25,7 +25,8 @@ describe('Katex', () => {
       { fontFamily: 'courier' }
     );
   });
-  it('4: should render an error box originating from Katex', () => {
+  // TODO: changes made to develop between Feb 13 - Feb 23 cause this test to no longer function
+  it.skip('4: should render an error box originating from Katex', () => {
     imgSnapshotTest(
       `graph LR
       A["$$\\shouldbeerror$$"]`,

From f4cb6a1927a13136c0d8856a4713a6b53ca88aa2 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Fri, 14 Apr 2023 10:58:14 +0900
Subject: [PATCH 017/193] chore(katex): fixed issues from merge

---
 .../src/diagrams/flowchart/flowRenderer-v2.js | 12 ++------
 pnpm-lock.yaml                                | 28 +++++++++++++++++--
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index b8e7efeb7..7b52c1690 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -63,14 +63,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       if (evaluate(getConfig().flowchart.htmlLabels)) {
         // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
         const node = {
-          label: vertexText
-            .replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
-            .replace(/\$\$(.*)\$\$/g, (r, c) =>
-              katex
-                .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-                .replace(/\n/g, ' ')
-                .replace(//g, '')
-            ),
+          label: vertexText,
         };
         vertexNode = addHtmlLabel(svg, node).node();
         vertexNode.parentNode.removeChild(vertexNode);
@@ -161,7 +154,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
     g.setNode(vertex.id, {
       labelStyle: styles.labelStyle,
       shape: _shape,
-      labelText: vertexText,
+      labelText,
       labelType: vertex.labelType,
       rx: radious,
       ry: radious,
@@ -329,7 +322,6 @@ export const addEdges = function (edges, g, diagObj) {
       edgeData.arrowheadStyle = 'fill: #333';
       edgeData.labelpos = 'c';
     }
-
     edgeData.labelType = edge.labelType;
     edgeData.label = edge.text
       .replace(common.lineBreakRegex, '\n')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a164f075..2d12bc1e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,6 +150,7 @@ importers:
       jison: ^0.4.18
       js-base64: ^3.7.2
       jsdom: ^21.0.0
+      katex: ^0.15.2
       khroma: ^2.0.0
       lodash-es: ^4.17.21
       micromatch: ^4.0.5
@@ -182,6 +183,7 @@ importers:
       dayjs: 1.11.7
       dompurify: 2.4.5
       elkjs: 0.8.2
+      katex: 0.15.6
       khroma: 2.0.0
       lodash-es: 4.17.21
       non-layered-tidy-tree-layout: 2.0.2
@@ -4065,7 +4067,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.4
+      follow-redirects: 1.15.2_debug@4.3.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -6646,6 +6648,28 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
+  /follow-redirects/1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: true
+
+  /follow-redirects/1.15.2_debug@4.3.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.2
+    dev: true
+
   /follow-redirects/1.15.2_debug@4.3.4:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -7195,7 +7219,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2_debug@4.3.4
+      follow-redirects: 1.15.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug

From f8a4488050781a53eb147034af9ac1dc1266746f Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 6 May 2023 11:33:23 +0900
Subject: [PATCH 018/193] feat(katex): added common functions for aiding in
 KaTeX rendering

---
 docs/config/setup/modules/defaultConfig.md    |  2 +-
 packages/mermaid/src/config.type.ts           |  1 +
 packages/mermaid/src/defaultConfig.ts         | 11 ++++
 .../mermaid/src/diagrams/common/common.ts     | 58 +++++++++++++++++++
 .../src/diagrams/flowchart/flowRenderer-v2.js | 20 ++-----
 .../src/diagrams/flowchart/flowRenderer.js    | 28 ++++-----
 6 files changed, 85 insertions(+), 35 deletions(-)

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index ad8f90248..4024b0bc9 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2115)
+[defaultConfig.ts:2126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2126)
 
 ---
 
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 545fdbbfb..622abd734 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -34,6 +34,7 @@ export interface MermaidConfig {
   dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
   fontSize?: number;
+  legacyMathML?: boolean;
 }
 
 // TODO: More configs needs to be moved in here
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 9c6d6f46e..afa2241a1 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -131,6 +131,17 @@ const config: Partial = {
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+  /**
+   * This option specifies if Mermaid can expected the dependnet to include KaTeX stylesheets for browsers
+   * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
+   * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
+   * fall back to legacy rendering for KaTeX.
+   *
+   * **Notes**:
+   *
+   * Default value: false
+   */
+  legacyMathML: false,
   /**
    * This option controls if the generated ids of nodes in the SVG are generated randomly or based
    * on a seed. If set to false, the IDs are generated based on the current date and thus are not
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 3b72e8718..f3d0eac30 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,4 +1,6 @@
 import DOMPurify from 'dompurify';
+// @ts-ignore @types/katex does not work
+import katex from 'katex';
 import { MermaidConfig } from '../../config.type.js';
 
 /**
@@ -170,6 +172,62 @@ export const parseGenericTypes = function (text: string): string {
   }
 };
 
+
+// TODO: find a better method for detecting support. This interface was added in the MathML 4 spec.
+// Firefox versions between [4,71] (0.47%) and Safari versions between [5,13.4] (0.17%) don't have this interface implemented but MathML is supported
+export const isMathMLSupported = window.MathMLElement !== undefined;
+
+export const katexRegex = /\$\$(.*)\$\$/g;
+
+/**
+ * Whether or not a text has KaTeX delimiters
+ *
+ * @param text - The text to test
+ * @returns Whether or not the text has KaTeX delimiters
+ */
+export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.length ?? 0) > 0;
+
+/**
+ * Computes the minimum dimensions needed to display a div contianing MathML
+ *
+ * @param text - The text to test
+ * @param config - Configuration for Mermaid
+ * @returns Object containing {width, height}
+ */
+export const calculateMathMLDimensions = (text: string, config: MermaidConfig) => {
+  text = renderKatex(text, config).split(lineBreakRegex).map((text) => hasKatex(text) ? renderKatex(text, config) : `
${text}
`).join('');
+  const divElem = document.createElement('div')
+  divElem.innerHTML = text;
+  divElem.id = 'katex-temp';
+  divElem.style.visibility = 'hidden';
+  divElem.style.position = 'absolute';
+  divElem.style.top = '0';
+  const body = document.querySelector('body');
+  body?.insertAdjacentElement('beforeend', divElem);
+  const dim = {width: divElem.clientWidth, height: divElem.clientHeight};
+  divElem.remove();
+  return dim;
+}
+
+/**
+ * Attempts to render and return the KaTeX portion of a string with MathML
+ *
+ * @param text - The text to test
+ * @param config - Configuration for Mermaid
+ * @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present
+ */
+export const renderKatex = (text: string, config: MermaidConfig): string => {
+  if (isMathMLSupported || (!isMathMLSupported && config.legacyMathML)) {
+    return text.replace(/\$\$(.*)\$\$/g, (r, c) =>
+      katex
+        .renderToString(c, { throwOnError: true, displayMode: true, output: isMathMLSupported ? 'mathml' : 'htmlAndMathml' })
+        .replace(/\n/g, ' ')
+        .replace(//g, '')
+    );
+  }
+  return text.replace(/\$\$(.*)\$\$/g, (r, c) => 'MathML is unsupported in this environment.');
+};
+
 export default {
   getRows,
   sanitizeText,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index a0b37e1d9..9156f7ae6 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,6 +1,5 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
-import katex from 'katex';
 
 import flowDb from './flowDb.js';
 import { getConfig } from '../../config.js';
@@ -9,7 +8,7 @@ import utils from '../../utils.js';
 import { render } from '../../dagre-wrapper/index.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger.js';
-import common, { evaluate } from '../common/common.js';
+import common, { evaluate, renderKatex } from '../common/common.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 
@@ -144,12 +143,8 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       default:
         _shape = 'rect';
     }
-    const labelText = vertexText.replace(/\$\$(.*)\$\$/g, (r, c) =>
-      katex
-        .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-        .replace(/\n/g, ' ')
-        .replace(//g, '')
-    );
+    const labelText = renderKatex(vertexText, getConfig());
+
     // Add the node
     g.setNode(vertex.id, {
       labelStyle: styles.labelStyle,
@@ -323,14 +318,7 @@ export const addEdges = function (edges, g, diagObj) {
       edgeData.labelpos = 'c';
     }
     edgeData.labelType = edge.labelType;
-    edgeData.label = edge.text
-      .replace(common.lineBreakRegex, '\n')
-      .replace(/\$\$(.*)\$\$/g, (r, c) =>
-        katex
-          .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-          .replace(/\n/g, ' ')
-          .replace(//g, '')
-      );
+    edgeData.label = renderKatex(edge.text.replace(common.lineBreakRegex, '\n')), getConfig();
 
     if (edge.style === undefined) {
       edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 2dc64ffcf..a578cb856 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -1,12 +1,11 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
-import katex from 'katex';
 import { getConfig } from '../../config.js';
 import { render as Render } from 'dagre-d3-es';
 import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger.js';
-import common, { evaluate } from '../common/common.js';
+import common, { evaluate, renderKatex } from '../common/common.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import flowChartShapes from './flowChartShapes.js';
@@ -58,14 +57,12 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
-        label: vertexText
-          .replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
-          .replace(/\$\$(.*)\$\$/g, (r, c) =>
-            katex
-              .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-              .replace(/\n/g, ' ')
-              .replace(//g, '')
-          ),
+        label: renderKatex(
+          vertexText.replace(
+            /fa[blrs]?:fa-[\w-]+/g,
+            (s) => ``
+          )
+        ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
       vertexNode.parentNode.removeChild(vertexNode);
@@ -244,14 +241,9 @@ export const addEdges = function (edges, g, diagObj) {
         edgeData.labelType = 'html';
         edgeData.label = `${edge.text
-          .replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
-          .replace(/\$\$(.*)\$\$/g, (r, c) =>
-            katex
-              .renderToString(c, { throwOnError: true, displayMode: true, output: 'mathml' })
-              .replace(/\n/g, ' ')
-              .replace(//g, '')
-          )}`;
+        }">${renderKatex(
+          edge.text.replace(/fa[blrs]?:fa-[\w-]+/g, (s) => ``)
+        )}`;
       } else {
         edgeData.labelType = 'text';
         edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');

From 4202488da044521db8b8dca09446e3aab000b924 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 6 May 2023 17:19:31 +0900
Subject: [PATCH 019/193] feat(katex): added KaTeX support to sequence diagrams

---
 demos/sequence.html                           | 257 ++++++++++--------
 .../mermaid/src/diagrams/common/common.ts     |  35 ++-
 .../src/diagrams/sequence/sequenceRenderer.ts |  52 ++--
 .../mermaid/src/diagrams/sequence/svgDraw.js  |  86 +++++-
 4 files changed, 284 insertions(+), 146 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index aa2332520..d20f8561f 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -16,134 +16,167 @@
   
     
Sequence diagram demos

     
-		sequenceDiagram
-			accTitle: test the accTitle
-			accDescr: Test a description
+      sequenceDiagram
+        accTitle: test the accTitle
+        accDescr: Test a description
 
-			participant Alice
-			participant Bob
-			participant John as John
Second Line
-			autonumber 10 10
-			rect rgb(200, 220, 100)
-			rect rgb(200, 255, 200)
+        participant Alice
+        participant Bob
+        participant John as John
Second Line
+        autonumber 10 10
+        rect rgb(200, 220, 100)
+        rect rgb(200, 255, 200)
 
-			Alice ->> Bob: Hello Bob, how are you?
-			Bob-->>John: How about you John?
-			end
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        end
 
-			Bob--x Alice: I am good thanks!
-			Bob-x John: I am good thanks!
-			Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
 
-			Bob-->Alice: Checking with John...
-			Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-			Bob-x John: Hey John - we're still waiting to know
how you're doing
-			Note over John:nowrap: John's trying hard not to break his train of thought.
-			Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-			Note over John: After a few more moments, John
finally snaps out of it.
-			end
+        Bob-->Alice: Checking with John...
+        Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+        Bob-x John: Hey John - we're still waiting to know
how you're doing
+        Note over John:nowrap: John's trying hard not to break his train of thought.
+        Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+        Note over John: After a few more moments, John
finally snaps out of it.
+        end
 
-			autonumber off
-			alt either this
-			Alice->>+John: Yes
-			John-->>-Alice: OK
-			else or this
-			autonumber
-			Alice->>John: No
-			else or this will happen
-			Alice->John: Maybe
-			end
-			autonumber 200
-			par this happens in parallel
-			Alice -->> Bob: Parallel message 1
-			and
-			Alice -->> John: Parallel message 2
-			end
-	

-    

-    
-    sequenceDiagram
-      accTitle: Sequence diagram title is here
-      accDescr: Hello friends
-
-    participant Alice
-    participant Bob
-    participant John as John
Second Line
-    rect rgb(200, 220, 100)
-    rect rgb(200, 255, 200)
-    Alice ->> Bob: Hello Bob, how are you?
-    Bob-->>John: How about you John?
-    end
-    Bob--x Alice: I am good thanks!
-    Bob-x John: I am good thanks!
-    Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
-    Bob-->Alice: Checking with John...
-    Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-    Bob-x John: Hey John - we're still waiting to know
how you're doing
-    Note over John:nowrap: John's trying hard not to break his train of thought.
-    Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-    Note over John: After a few more moments, John
finally snaps out of it.
-    end
-    alt either this
-    Alice->>John: Yes
-    else or this
-    Alice->>John: No
-    else or this will happen
-    Alice->John: Maybe
-    end
-    par this happens in parallel
-    Alice -->> Bob: Parallel message 1
-    and
-    Alice -->> John: Parallel message 2
-    end
+        autonumber off
+        alt either this
+        Alice->>+John: Yes
+        John-->>-Alice: OK
+        else or this
+        autonumber
+        Alice->>John: No
+        else or this will happen
+        Alice->John: Maybe
+        end
+        autonumber 200
+        par this happens in parallel
+        Alice -->> Bob: Parallel message 1
+        and
+        Alice -->> John: Parallel message 2
+        end
     

     

-
     
-    sequenceDiagram
-    participant 1 as multiline
using #lt;br#gt;
-    participant 2 as multiline
using #lt;br/#gt;
-    participant 3 as multiline
using #lt;br /#gt;
-    participant 4 as multiline
using #lt;br /#gt;
-    1->>2: multiline
using #lt;br#gt;
-    note right of 2: multiline
using #lt;br#gt;
-    2->>3: multiline
using #lt;br/#gt;
-    note right of 3: multiline
using #lt;br/#gt;
-    3->>4: multiline
using #lt;br /#gt;
-    note right of 4: multiline
using #lt;br /#gt;
-    4->>1: multiline
using #lt;br /#gt;
-    note right of 1: multiline
using #lt;br /#gt;
-    

-    

+      sequenceDiagram
+        accTitle: Sequence diagram title is here
+        accDescr: Hello friends
 
-    
-    sequenceDiagram
-    autonumber
-    Alice->>John: Hello John,
how are you?
-    autonumber 50 10
-    Alice->>John: John,
can you hear me?
-    John-->>Alice: Hi Alice,
I can hear you!
-    autonumber off
-    John-->>Alice: I feel great!
-    

+      participant Alice
+      participant Bob
+      participant John as John
Second Line
+      rect rgb(200, 220, 100)
+      rect rgb(200, 255, 200)
+      Alice ->> Bob: Hello Bob, how are you?
+      Bob-->>John: How about you John?
+      end
+      Bob--x Alice: I am good thanks!
+      Bob-x John: I am good thanks!
+      Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
+      Bob-->Alice: Checking with John...
+      Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+      Bob-x John: Hey John - we're still waiting to know
how you're doing
+      Note over John:nowrap: John's trying hard not to break his train of thought.
+      Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+      Note over John: After a few more moments, John
finally snaps out of it.
+      end
+      alt either this
+      Alice->>John: Yes
+      else or this
+      Alice->>John: No
+      else or this will happen
+      Alice->John: Maybe
+      end
+      par this happens in parallel
+      Alice -->> Bob: Parallel message 1
+      and
+      Alice -->> John: Parallel message 2
+      end
+      

     

 
     
       sequenceDiagram
-      box lightgreen Alice & John
-      participant A
-      participant J
-      end
-      box Another Group very very long description not wrapped
-      participant B
-      end
-      A->>J: Hello John, how are you?
-      J->>A: Great!
-      A->>B: Hello Bob, how are you ?
-      
using #lt;br#gt;
+      participant 2 as multiline
using #lt;br/#gt;
+      participant 3 as multiline
using #lt;br /#gt;
+      participant 4 as multiline
using #lt;br /#gt;
+      1->>2: multiline
using #lt;br#gt;
+      note right of 2: multiline
using #lt;br#gt;
+      2->>3: multiline
using #lt;br/#gt;
+      note right of 3: multiline
using #lt;br/#gt;
+      3->>4: multiline
using #lt;br /#gt;
+      note right of 4: multiline
using #lt;br /#gt;
+      4->>1: multiline
using #lt;br /#gt;
+      note right of 1: multiline
using #lt;br /#gt;
+      

+    

+
+    
+      sequenceDiagram
+      autonumber
+      Alice->>John: Hello John,
how are you?
+      autonumber 50 10
+      Alice->>John: John,
can you hear me?
+      John-->>Alice: Hi Alice,
I can hear you!
+      autonumber off
+      John-->>Alice: I feel great!
+      

+    

+
+    
+        sequenceDiagram
+        box lightgreen Alice & John
+        participant A
+        participant J
+        end
+        box Another Group very very long description not wrapped
+        participant B
+        end
+        A->>J: Hello John, how are you?
+        J->>A: Great!
+        A->>B: Hello Bob, how are you ?
+        

     

 
+    
+    sequenceDiagram
+    participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
+    participant 2 as $$\beta$$
+    participant 3 as $$\delta$$
+    participant 4 as $$\frac{\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}}{\frac{\text{d}}{\text{d}x}{x^2}}$$
+    1->>2: $$\sqrt{2}$$
+    note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
+    2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
+    note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
+    3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
+    note right of 4: multiline
+    4->>1: multiline
using #lt;br /#gt;
+    note right of 1: multiline
$$\frac{1}{2}$$
3rd line
+    

+    

+    
+      sequenceDiagram
+      autonumber
+      participant 1 as $$\alpha$$lex
+      participant 2 as $$\beta$$ob
+      participant 3 as $$\theta$$iffany
+      1->>2: Hello John, does  $$\frac{1}{2}+1=2$$?
+      loop $$\frac{1}{2}+1=2$$
+          2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
+      end
+      Note right of 2: $$x = \begin{cases} 1 &\text{if } \frac{1}{2}+1=2 \\ 0 &\text{if } \frac{1}{2}+1\ne2 \end{cases}$$
+      2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
+      2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
+      3-->>2: $$6x+2$$
+    

+    

+
     
-    
   
 
diff --git a/demos/index.html b/demos/index.html
index da27cdcff..0843cbabe 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -54,6 +54,9 @@
       
  • 
         
    Pie
    
       
    • 
+      
  • 
+        
    Quadrant charts
    
+      
    • 
       
  • 
         
    Requirements
    
       
    • 
diff --git a/demos/quadrantchart.html b/demos/quadrantchart.html
new file mode 100644
index 000000000..a2a60d0a1
--- /dev/null
+++ b/demos/quadrantchart.html
@@ -0,0 +1,55 @@
+
+
+  
+    
+    
+    Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
    Quadrant chart demos
    
+    
    +    %%{init: {"quadrantChart": {"quadrantPadding": 10}, "theme": "forest", "themeVariables": {"quadrant1TextFill": "blue"}} }%%
+    quadrantChart
+      x-axis Urgent --> Not Urgent
+      y-axis Not Important --> important
+      quadrant-1 Plan
+      quadrant-2 Do
+      quadrant-3 Deligate
+      quadrant-4 Delete
+    
    
+
+    
    +    %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
+    quadrantChart
+      title Analytics and Business Intelligence Platforms
+      x-axis "Completeness of Vision ❤" -->
+      y-axis Ability to Execute
+      quadrant-1 Leaders
+      quadrant-2 Challengers
+      quadrant-3 Niche
+      quadrant-4 Visionaries
+      Microsoft: [0.75, 0.75]
+      Salesforce: [0.55, 0.60]
+      IBM: [0.51, 0.40]
+      Incorta: [0.20, 0.30]
+    
    
+    
    
+
+    
+  
+
diff --git a/demos/sequence.html b/demos/sequence.html
index d20f8561f..2e71fb1f7 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -142,6 +142,27 @@
         A->>B: Hello Bob, how are you ?
         
    
+    
    
+    
    +      sequenceDiagram
+      participant Alice
+      participant Bob
+      participant John
+      par_over Section title
+        Alice ->> Bob: Message 1
    Second line
+        Bob ->> John: Message 2
+      end
+      par_over Two line
    section title
+        Note over Alice: Alice note
+        Note over Bob: Bob note
    Second line
+        Note over John: John note
+      end
+      par_over Mixed section
+        Alice ->> Bob: Message 1
+        Note left of Bob: Alice/Bob Note
+      end
+    
    
+
     
    
 
     
    @@ -176,7 +197,6 @@
       3-->>2: $$6x+2$$
     
    
     
    
-
     
+
+
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
new file mode 100644
index 000000000..19f3912a7
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -0,0 +1,26 @@
+
+
+
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 2ca53b348..7ade4bd3f 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -115,6 +115,7 @@ function sidebarSyntax() {
         { text: 'User Journey', link: '/syntax/userJourney' },
         { text: 'Gantt', link: '/syntax/gantt' },
         { text: 'Pie Chart', link: '/syntax/pie' },
+        { text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
         { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts
new file mode 100644
index 000000000..bef2c1311
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/contributors.ts
@@ -0,0 +1,148 @@
+import contributorUsernamesJson from './contributor-names.json';
+
+export interface Contributor {
+  name: string;
+  avatar: string;
+}
+
+export interface SocialEntry {
+  icon: string | { svg: string };
+  link: string;
+}
+
+export interface CoreTeam {
+  name: string;
+  // required to download avatars from GitHub
+  github: string;
+  avatar?: string;
+  twitter?: string;
+  mastodon?: string;
+  sponsor?: string;
+  website?: string;
+  linkedIn?: string;
+  title?: string;
+  org?: string;
+  desc?: string;
+  links?: SocialEntry[];
+}
+
+const contributorUsernames: string[] = contributorUsernamesJson;
+
+export const contributors = contributorUsernames.map((username) => {
+  return { username, avatar: `/user-avatars/${username}.png` };
+});
+
+const websiteSVG = {
+  svg: '',
+};
+
+const createLinks = (tm: CoreTeam): CoreTeam => {
+  tm.avatar = `/user-avatars/${tm.github}.png`;
+  tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }];
+  if (tm.mastodon) {
+    tm.links.push({ icon: 'mastodon', link: tm.mastodon });
+  }
+  if (tm.twitter) {
+    tm.links.push({ icon: 'twitter', link: `https://twitter.com/${tm.twitter}` });
+  }
+  if (tm.website) {
+    tm.links.push({ icon: websiteSVG, link: tm.website });
+  }
+  if (tm.linkedIn) {
+    tm.links.push({ icon: 'linkedin', link: `https://www.linkedin.com/in/${tm.linkedIn}` });
+  }
+  return tm;
+};
+
+const knut: CoreTeam = {
+  github: 'knsv',
+  name: 'Knut Sveidqvist',
+  title: 'Creator',
+  twitter: 'knutsveidqvist',
+  sponsor: 'https://github.com/sponsors/knsv',
+};
+
+const plainTeamMembers: CoreTeam[] = [
+  {
+    github: 'NeilCuzon',
+    name: 'Neil Cuzon',
+    title: 'Developer',
+  },
+  {
+    github: 'tylerlong',
+    name: 'Tyler Liu',
+    title: 'Developer',
+  },
+  {
+    github: 'sidharthv96',
+    name: 'Sidharth Vinod',
+    title: 'Developer',
+    twitter: 'sidv42',
+    mastodon: 'https://techhub.social/@sidv',
+    sponsor: 'https://github.com/sponsors/sidharthv96',
+    linkedIn: 'sidharth-vinod',
+    website: 'https://sidharth.dev',
+  },
+  {
+    github: 'ashishjain0512',
+    name: 'Ashish Jain',
+    title: 'Developer',
+  },
+  {
+    github: 'mmorel-35',
+    name: 'Matthieu Morel',
+    title: 'Developer',
+    linkedIn: 'matthieumorel35',
+  },
+  {
+    github: 'aloisklink',
+    name: 'Alois Klink',
+    title: 'Developer',
+    linkedIn: 'aloisklink',
+    website: 'https://aloisklink.com',
+  },
+  {
+    github: 'pbrolin47',
+    name: 'Per Brolin',
+    title: 'Developer',
+  },
+  {
+    github: 'Yash-Singh1',
+    name: 'Yash Singh',
+    title: 'Developer',
+  },
+  {
+    github: 'GDFaber',
+    name: 'Marc Faber',
+    title: 'Developer',
+    linkedIn: 'marc-faber',
+  },
+  {
+    github: 'MindaugasLaganeckas',
+    name: 'Mindaugas Laganeckas',
+    title: 'Developer',
+  },
+  {
+    github: 'jgreywolf',
+    name: 'Justin Greywolf',
+    title: 'Developer',
+  },
+  {
+    github: 'IOrlandoni',
+    name: 'Nacho Orlandoni',
+    title: 'Developer',
+  },
+  {
+    github: 'huynhicode',
+    name: 'Steph Huynh',
+    title: 'Developer',
+  },
+];
+
+const teamMembers = plainTeamMembers.map((tm) => createLinks(tm));
+teamMembers.sort(
+  (a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github)
+);
+teamMembers.unshift(createLinks(knut));
+
+export { teamMembers };
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
new file mode 100644
index 000000000..732373354
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -0,0 +1,33 @@
+import { mkdir, writeFile, readFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'url';
+
+const pathContributors = new URL('../contributor-names.json', import.meta.url);
+const getAvatarPath = (name: string) =>
+  new URL(`../../public/user-avatars/${name}.png`, import.meta.url);
+
+let contributors: string[] = [];
+
+async function download(url: string, fileName: URL) {
+  if (existsSync(fileName)) {
+    return;
+  }
+  // eslint-disable-next-line no-console
+  console.log('downloading', fileName);
+  try {
+    const image = await fetch(url);
+    await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
+  } catch {}
+}
+
+async function fetchAvatars() {
+  await mkdir(fileURLToPath(new URL('..', getAvatarPath('none'))), { recursive: true });
+  contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
+  await Promise.allSettled(
+    contributors.map((name) =>
+      download(`https://github.com/${name}.png?size=100`, getAvatarPath(name))
+    )
+  );
+}
+
+fetchAvatars();
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
new file mode 100644
index 000000000..308171c38
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -0,0 +1,39 @@
+// Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6
+
+import { writeFile } from 'node:fs/promises';
+
+const pathContributors = new URL('../contributor-names.json', import.meta.url);
+
+interface Contributor {
+  login: string;
+}
+
+async function fetchContributors() {
+  const collaborators: string[] = [];
+  let page = 1;
+  let data: Contributor[] = [];
+  do {
+    const response = await fetch(
+      `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
+      {
+        method: 'GET',
+        headers: {
+          'content-type': 'application/json',
+        },
+      }
+    );
+    data = await response.json();
+    console.log(response.status, response.statusText);
+    console.log(data);
+    collaborators.push(...data.map((i) => i.login));
+    page++;
+  } while (data.length === 100);
+  return collaborators.filter((name) => !name.includes('[bot]'));
+}
+
+async function generate() {
+  const collaborators = await fetchContributors();
+  await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8');
+}
+
+void generate();
diff --git a/packages/mermaid/src/docs/.vitepress/style/main.css b/packages/mermaid/src/docs/.vitepress/style/main.css
new file mode 100644
index 000000000..a6a31f3da
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/style/main.css
@@ -0,0 +1,77 @@
+.dark [img-light] {
+  display: none;
+}
+
+html:not(.dark) [img-dark] {
+  display: none;
+}
+
+/* Overrides */
+
+.VPSocialLink {
+  transform: scale(0.9);
+}
+
+.vp-doc th,
+.vp-doc td {
+  padding: 6px 10px;
+  border: 1px solid #8882;
+}
+
+/* h3 breaks SEO => replaced with h2 with the same size */
+.home-content h2 {
+  margin-top: 2rem;
+  font-size: 1.35rem;
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+img.resizable-img {
+  width: unset;
+  height: unset;
+}
+
+/* fix height ~ 2 lines of text: 3 or more cards per row */
+.VPTeamMembersItem.small .profile .data .affiliation {
+  min-height: 3rem;
+}
+.VPTeamMembersItem.small .profile .data .desc {
+  min-height: 3rem;
+}
+
+/* fix height ~ 3 lines of text: 4 cards per row */
+@media (min-width: 1064px) and (max-width: 1143px) {
+  .VPTeamMembersItem.small .profile .data .affiliation {
+    min-height: 4rem;
+  }
+  .VPTeamMembersItem.small .profile .data .desc {
+    min-height: 4rem;
+  }
+}
+/* fix height ~ 3 lines of text: 3 cards per row */
+@media (min-width: 815px) and (max-width: 875px) {
+  .VPTeamMembersItem.small .profile .data .affiliation {
+    min-height: 4rem;
+  }
+  .VPTeamMembersItem.small .profile .data .desc {
+    min-height: 4rem;
+  }
+}
+/* fix height ~ 3 lines of text: 2 cards per row */
+@media (max-width: 612px) {
+  .VPTeamMembersItem.small .profile .data .affiliation {
+    min-height: 4rem;
+  }
+  .VPTeamMembersItem.small .profile .data .desc {
+    min-height: 4rem;
+  }
+}
+/* fix height: one card per row */
+@media (max-width: 568px) {
+  .VPTeamMembersItem.small .profile .data .affiliation {
+    min-height: unset;
+  }
+  .VPTeamMembersItem.small .profile .data .desc {
+    min-height: unset;
+  }
+}
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 0eebb82c5..7a2b033ea 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -2,13 +2,28 @@ import DefaultTheme from 'vitepress/theme';
 import './custom.css';
 // @ts-ignore
 import Mermaid from './Mermaid.vue';
+// @ts-ignore
+import Contributors from '../components/Contributors.vue';
+// @ts-ignore
+import HomePage from '../components/HomePage.vue';
 import { getRedirect } from './redirect.js';
 
+import { h } from 'vue';
+import Theme from 'vitepress/theme';
+import '../style/main.css';
+import 'uno.css';
+
 export default {
   ...DefaultTheme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'home-features-after': () => h(HomePage),
+    });
+  },
   enhanceApp({ app, router }) {
     // register global components
     app.component('Mermaid', Mermaid);
+    app.component('Contributors', Contributors);
     router.onBeforeRouteChange = (to) => {
       try {
         const newPath = getRedirect(to);
@@ -20,4 +35,4 @@ export default {
       } catch (e) {}
     };
   },
-} as typeof DefaultTheme;
+};
diff --git a/packages/mermaid/src/docs/CHANGELOG.md b/packages/mermaid/src/docs/CHANGELOG.md
index cc725bf00..52d959744 100644
--- a/packages/mermaid/src/docs/CHANGELOG.md
+++ b/packages/mermaid/src/docs/CHANGELOG.md
@@ -40,7 +40,7 @@ It is also possible to override site-wide theme settings locally, for a specific
 
 **Following is an example:**
 
-```mmd
+```mermaid
 %%{init: {'theme':'base'}}%%
   graph TD
     a --> b
@@ -56,7 +56,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
 
 Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
 
-```mmd
+```mermaid
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
diff --git a/packages/mermaid/src/docs/config/8.6.0_docs.md b/packages/mermaid/src/docs/config/8.6.0_docs.md
index 7b470eab8..efd29bfdc 100644
--- a/packages/mermaid/src/docs/config/8.6.0_docs.md
+++ b/packages/mermaid/src/docs/config/8.6.0_docs.md
@@ -75,7 +75,7 @@ When deployed within code, init is called before the graph/diagram description.
 
 **for example**:
 
-```mmd
+```mermaid
 %%{init: {"theme": "default", "logLevel": 1 }}%%
  graph LR
   a-->b
diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md
index ac57e6d21..b1e0e6303 100644
--- a/packages/mermaid/src/docs/config/directives.md
+++ b/packages/mermaid/src/docs/config/directives.md
@@ -84,7 +84,7 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme
 
 Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
 
-```mmd
+```mermaid
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
 %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
 ...
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index 211a06af7..a072ae408 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -106,10 +106,10 @@ A `securityLevel` configuration has to first be cleared. `securityLevel` sets th
 
 Values:
 
-- **strict**: (**default**) tags in text are encoded, click functionality is disabled
-- **loose**: tags in text are allowed, click functionality is enabled
-- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
-- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
+- **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
+- **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled.
+- **loose**: HTML tags in text are allowed and click functionality is enabled.
+- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevent any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
 
 ```note
 This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
@@ -345,10 +345,10 @@ mermaid.parseError = function (err, hash) {
   displayErrorInGui(err);
 };
 
-const textFieldUpdated = function () {
+const textFieldUpdated = async function () {
   const textStr = getTextFromFormField('code');
 
-  if (mermaid.parse(textStr)) {
+  if (await mermaid.parse(textStr)) {
     reRender(textStr);
   }
 };
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 88ad08526..92529d7c7 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -141,8 +141,12 @@ They also serve as proof of concept, for the variety of things that can be built
 
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [remark.js](https://remark.js.org/)
-  - [remark-mermaid](https://github.com/temando/remark-mermaid)
+- [remark](https://remark.js.org/)
+  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
+- [rehype](https://github.com/rehypejs/rehype)
+  - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
+- [Gatsby](https://www.gatsbyjs.com/)
+  - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [jSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://www.mkdocs.org)
@@ -183,6 +187,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
+- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index 59b6607fe..dd1025d56 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -1,5 +1,6 @@
 ---
 layout: home
+sidebar: false
 
 title: Mermaid
 titleTemplate: Diagramming and charting tool
@@ -33,162 +34,3 @@ features:
     details: Mermaid Chart is a major supporter of the Mermaid project.
     link: https://www.mermaidchart.com/
 ---
-
-
-
-
    
-  
     Meet The Team 
    
-  
-
    
-
-
diff --git a/packages/mermaid/src/docs/intro/examples.md b/packages/mermaid/src/docs/intro/examples.md
index f4cb3b929..7dda288dc 100644
--- a/packages/mermaid/src/docs/intro/examples.md
+++ b/packages/mermaid/src/docs/intro/examples.md
@@ -98,3 +98,22 @@ journey
       Go downstairs: 5: Me
       Sit down: 5: Me
 ```
+
+### [Quadrant Chart](../syntax/quadrantChart.md)
+
+```mermaid-example
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+```
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index 4dd07bf3b..689b5b6df 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements
 
-## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
+## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers)
 
-3 April 2023 · 3 mins
+26 April 2023 · 11 mins
 
-Markdown Strings reduce the hassle # Starting from v10.
+Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index b835bbe35..f7ca1058e 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,17 @@
 # Blog
 
+## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers)
+
+26 April 2023 · 11 mins
+
+Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation.
+
+## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here/)
+
+3 April 2023 · 3 mins
+
+Markdown Strings reduce the hassle # Starting from v10.
+
 ## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
 
 27 March 2023 · 2 mins
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
new file mode 100644
index 000000000..aeb3d24f3
--- /dev/null
+++ b/packages/mermaid/src/docs/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "docs",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress --port 3333 --open",
+    "build": "pnpm prefetch && vitepress build",
+    "build-no-prefetch": "vitepress build",
+    "serve": "vitepress serve",
+    "preview-https": "pnpm build && serve .vitepress/dist",
+    "preview-https-no-prefetch": "pnpm build-no-prefetch && serve .vitepress/dist",
+    "prefetch": "pnpm fetch-contributors && pnpm fetch-avatars",
+    "fetch-avatars": "ts-node-esm .vitepress/scripts/fetch-avatars.ts",
+    "fetch-contributors": "ts-node-esm .vitepress/scripts/fetch-contributors.ts"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.1.0",
+    "jiti": "^1.18.2",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.1.16",
+    "@unocss/reset": "^0.52.0",
+    "@vite-pwa/vitepress": "^0.0.5",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "fast-glob": "^3.2.12",
+    "https-localhost": "^4.7.1",
+    "pathe": "^1.1.0",
+    "unocss": "^0.52.0",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.3.3",
+    "vite-plugin-pwa": "^0.15.0",
+    "vitepress": "1.0.0-beta.1",
+    "workbox-window": "^6.5.4"
+  }
+}
diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index c09c66abb..4b0cd49de 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -248,7 +248,7 @@ classE o-- classF : aggregation
 
 Relations can logically represent an N:M association:
 
-```mmd
+```mermaid
 classDiagram
     Animal <|--|> Zebra
 ```
@@ -368,7 +368,7 @@ class Color{
 
 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
 
-```mmd
+```mermaid
 classDiagram
 %% This whole line is a comment classDiagram class Shape <>
 class Shape{
@@ -434,7 +434,7 @@ classDiagram
 
 _URL Link:_
 
-```mmd
+```mermaid
 classDiagram
 class Shape
 link Shape "https://www.github.com" "This is a tooltip for a link"
@@ -444,7 +444,7 @@ click Shape2 href "https://www.github.com" "This is a tooltip for a link"
 
 _Callback:_
 
-```mmd
+```mermaid
 classDiagram
 class Shape
 callback Shape "callbackFunction" "This is a tooltip for a callback"
diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
index 7067a65d9..b7066ab3d 100644
--- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
+++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -116,7 +116,7 @@ Relationships may be classified as either _identifying_ or _non-identifying_ and
 |      to       |   _identifying_   |
 | optionally to | _non-identifying_ |
 
-```mmd
+```mermaid
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     PERSON ||--o{ NAMED-DRIVER : is
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 97cbb4fe3..a638e67d0 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -5,11 +5,11 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 # Flowcharts - Basic Syntax
 
-All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
+Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
 
-It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
-
-> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).
+```warning
+If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
+```
 
 ### A node (default)
 
@@ -39,7 +39,30 @@ flowchart LR
     id1[This is the text in the box]
 ```
 
-## Graph
+#### Unicode text
+
+Use `"` to enclose the unicode text.
+
+```mermaid-example
+flowchart LR
+    id["This ❤ Unicode"]
+```
+
+#### Markdown formatting
+
+Use double quotes and backticks "\` text \`" to enclose the markdown text.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    markdown["`This **is** _Markdown_`"]
+    newLines["`Line1
+    Line 2
+    Line 3`"]
+    markdown --> newLines
+```
+
+### Direction
 
 This statement declares the direction of the Flowchart.
 
@@ -57,15 +80,13 @@ flowchart LR
     Start --> Stop
 ```
 
-## Flowchart Orientation
-
 Possible FlowChart orientations are:
 
-- TB - top to bottom
-- TD - top-down/ same as top to bottom
-- BT - bottom to top
-- RL - right to left
-- LR - left to right
+- TB - Top to bottom
+- TD - Top-down/ same as top to bottom
+- BT - Bottom to top
+- RL - Right to left
+- LR - Left to right
 
 ## Node shapes
 
@@ -273,7 +294,7 @@ word of warning, one could go overboard with this making the flowchart harder to
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
 
-```mmd
+```mermaid
 flowchart TB
     A --> C
     A --> D
@@ -404,7 +425,7 @@ flowchart TB
     end
 ```
 
-## flowcharts
+### flowcharts
 
 With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
 
@@ -425,7 +446,7 @@ flowchart TB
     two --> c2
 ```
 
-## Direction in subgraphs
+### Direction in subgraphs
 
 With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
 
@@ -557,7 +578,7 @@ Beginner's tip—a full example using interactive links in a html context:
 
 Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
 
-```mmd
+```mermaid
 flowchart LR
 %% this is a comment A -- text --> B{node}
    A -- text --> B -- text2 --> C
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 422358d3e..cecaf52cb 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -193,7 +193,7 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
 
-```mmd
+```mermaid
 ---
 displayMode: compact
 ---
@@ -211,7 +211,7 @@ gantt
 
 Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
 
-```mmd
+```mermaid
 gantt
     title A Gantt Diagram
     %% this is a comment
diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md
new file mode 100644
index 000000000..351dd1ad1
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/quadrantChart.md
@@ -0,0 +1,142 @@
+# Quadrant Chart
+
+> A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.
+
+## Example
+
+```mermaid-example
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+```
+
+## Syntax
+
+```note
+In place of `` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
+```
+
+```note
+If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
+If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
+```
+
+```note
+For points x and y value min value is 0 and max value is 1.
+```
+
+### Title
+
+The title is a short description of the chart and it will always render on top of the chart.
+
+#### Example
+
+```
+quadrantChart
+    title This is a sample example
+```
+
+### x-axis
+
+The x-axis determine what text would be displayed in the x-axis. In x-axis there is two part **left** and **right** you can pass **both** or you can pass only **left**. The statement should start with `x-axis` then the `left axis text` followed by the delimiter `-->` then `right axis text`.
+
+#### Example
+
+1. `x-axis  --> ` both the left and right axis text will be rendered.
+2. `x-axis ` only the left axis text will be rendered.
+
+### y-axis
+
+The y-axis determine what text would be displayed in the y-axis. In y-axis there is two part **top** and **bottom** you can pass **both** or you can pass only **bottom**. The statement should start with `y-axis` then the `bottom axis text` followed by the delimiter `-->` then `top axis text`.
+
+#### Example
+
+1. `y-axis  --> ` both the bottom and top axis text will be rendered.
+2. `y-axis ` only the bottom axis text will be rendered.
+
+### Quadrants text
+
+The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.
+
+#### Example
+
+1. `quadrant-1 ` determine what text will be rendered inside the top right quadrant.
+2. `quadrant-2 ` determine what text will be rendered inside the top left quadrant.
+3. `quadrant-3 ` determine what text will be rendered inside the bottom left quadrant.
+4. `quadrant-4 ` determine what text will be rendered inside the bottom right quadrant.
+
+### Points
+
+Points are used to plot a circle inside the quadrantChart. The syntax is `: [x, y]` here x and y value is in the range 0 - 1.
+
+#### Example
+
+1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
+2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
+
+## Chart Configurations
+
+| Parameter                         | Description                                                                                       | Default value |
+| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: |
+| chartWidth                        | Width of the chart                                                                                |      500      |
+| chartHeight                       | Height of the chart                                                                               |      500      |
+| titlePadding                      | Top and Bottom padding of the title                                                               |      10       |
+| titleFontSize                     | Title font size                                                                                   |      20       |
+| quadrantPadding                   | Padding outside all the quadrants                                                                 |       5       |
+| quadrantTextTopPadding            | Quadrant text top padding when text is drawn on top ( not data points are there)                  |       5       |
+| quadrantLabelFontSize             | Quadrant text font size                                                                           |      16       |
+| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants                                                          |       1       |
+| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                             |       2       |
+| xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                             |       5       |
+| xAxisLabelFontSize                | X-axis texts font size                                                                            |      16       |
+| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom |     'top'     |
+| yAxisLabelPadding                 | Left and Right padding of y-axis text                                                             |       5       |
+| yAxisLabelFontSize                | Y-axis texts font size                                                                            |      16       |
+| yAxisPosition                     | Position of y-axis (left , right)                                                                 |    'left'     |
+| pointTextPadding                  | Padding between point and the below text                                                          |       5       |
+| pointLabelFontSize                | Point text font size                                                                              |      12       |
+| pointRadius                       | Radius of the point to be drawn                                                                   |       5       |
+
+## Chart Theme Variables
+
+| Parameter                        | Description                             |
+| -------------------------------- | --------------------------------------- |
+| quadrant1Fill                    | Fill color of the top right quadrant    |
+| quadrant2Fill                    | Fill color of the top left quadrant     |
+| quadrant3Fill                    | Fill color of the bottom left quadrant  |
+| quadrant4Fill                    | Fill color of the bottom right quadrant |
+| quadrant1TextFill                | Text color of the top right quadrant    |
+| quadrant2TextFill                | Text color of the top left quadrant     |
+| quadrant3TextFill                | Text color of the bottom left quadrant  |
+| quadrant4TextFill                | Text color of the bottom right quadrant |
+| quadrantPointFill                | Points fill color                       |
+| quadrantPointTextFill            | Points text color                       |
+| quadrantXAxisTextFill            | X-axis text color                       |
+| quadrantYAxisTextFill            | Y-axis text color                       |
+| quadrantInternalBorderStrokeFill | Quadrants inner border color            |
+| quadrantExternalBorderStrokeFill | Quadrants outer border color            |
+| quadrantTitleFill                | Title color                             |
+
+## Example on config and theme
+
+```mermaid-example
+%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
+quadrantChart
+  x-axis Urgent --> Not Urgent
+  y-axis Not Important --> important
+  quadrant-1 Plan
+  quadrant-2 Do
+  quadrant-3 Deligate
+  quadrant-4 Delete
+```
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 2b68e5de5..0d5442129 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -387,7 +387,7 @@ sequenceDiagram
 
 Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
-```mmd
+```mermaid
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     %% this is a comment
@@ -443,7 +443,7 @@ This can be configured by adding one or more link lines with the format:
 link :  @ 
 ```
 
-```mmd
+```mermaid
 sequenceDiagram
     participant Alice
     participant John
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index ddfe61c49..248146993 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -249,7 +249,7 @@ Comments can be entered within a state diagram chart, which will be ignored by t
 own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
 newline will be treated as a comment, including any diagram syntax
 
-```mmd
+```mermaid
 stateDiagram-v2
     [*] --> Still
     Still --> [*]
diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
index 63d2aa5fa..ed5f4bab9 100644
--- a/packages/mermaid/src/docs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -1,13 +1,49 @@
-import { defineConfig, type PluginOption, searchForWorkspaceRoot } from 'vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
+import type { PluginOption, Plugin } from 'vite';
 import path from 'path';
 // @ts-expect-error This package has an incorrect export map.
 import { SearchPlugin } from 'vitepress-plugin-search';
+import fs from 'fs';
+import Components from 'unplugin-vue-components/vite';
+import Unocss from 'unocss/vite';
+import { presetAttributify, presetIcons, presetUno } from 'unocss';
+import { resolve } from 'pathe';
 
 const virtualModuleId = 'virtual:mermaid-config';
 const resolvedVirtualModuleId = '\0' + virtualModuleId;
 
 export default defineConfig({
+  optimizeDeps: {
+    // vitepress is aliased with replacement `join(DIST_CLIENT_PATH, '/index')`
+    // This needs to be excluded from optimization
+    exclude: ['vitepress'],
+  },
   plugins: [
+    // @ts-ignore This package has an incorrect exports.
+    Components({
+      include: [/\.vue/, /\.md/],
+      dirs: '.vitepress/components',
+      dts: '.vitepress/components.d.ts',
+    }) as Plugin,
+    // @ts-ignore This package has an incorrect exports.
+    Unocss({
+      shortcuts: [
+        [
+          'btn',
+          'px-4 py-1 rounded inline-flex justify-center gap-2 text-white leading-30px children:mya !no-underline cursor-pointer disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
+        ],
+      ],
+      presets: [
+        presetUno({
+          dark: 'media',
+        }),
+        presetAttributify(),
+        presetIcons({
+          scale: 1.2,
+        }),
+      ],
+    }) as unknown as Plugin,
+    IncludesPlugin(),
     SearchPlugin() as PluginOption,
     {
       // TODO: will be fixed in the next vitepress release.
@@ -48,3 +84,21 @@ export default defineConfig({
     },
   },
 });
+
+function IncludesPlugin(): Plugin {
+  return {
+    name: 'include-plugin',
+    enforce: 'pre',
+    transform(code: string, id: string): string | undefined {
+      let changed = false;
+      code = code.replace(/\[@@include]\((.*?)\)/, (_: string, url: any): string => {
+        changed = true;
+        const full = resolve(id, url);
+        return fs.readFileSync(full, 'utf-8');
+      });
+      if (changed) {
+        return code;
+      }
+    },
+  } as Plugin;
+}
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 7ccf26931..bdeac9399 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -154,13 +154,7 @@ export const encodeEntities = function (text: string): string {
  * @returns
  */
 export const decodeEntities = function (text: string): string {
-  let txt = text;
-
-  txt = txt.replace(/fl°°/g, '&#');
-  txt = txt.replace(/fl°/g, '&');
-  txt = txt.replace(/¶ß/g, ';');
-
-  return txt;
+  return text.replace(/fl°°/g, '&#').replace(/fl°/g, '&').replace(/¶ß/g, ';');
 };
 
 // append !important; to each cssClass followed by a final !important, all enclosed in { }
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index a5438b562..121621775 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -1,7 +1,4 @@
-import { select } from 'd3';
 import { log } from '../logger.js';
-import { getConfig } from '../config.js';
-import { evaluate } from '../diagrams/common/common.js';
 import { decodeEntities } from '../mermaidAPI.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
 /**
@@ -19,9 +16,10 @@ function applyStyle(dom, styleFn) {
  * @param {any} node
  * @param width
  * @param classes
+ * @param addBackground
  * @returns {SVGForeignObjectElement} Node
  */
-function addHtmlSpan(element, node, width, classes) {
+function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
   // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
   // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
@@ -32,7 +30,8 @@ function addHtmlSpan(element, node, width, classes) {
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
   div.html(
-    `' +
       label +
@@ -44,6 +43,9 @@ function addHtmlSpan(element, node, width, classes) {
   div.style('white-space', 'nowrap');
   div.style('max-width', width + 'px');
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+  if (addBackground) {
+    div.attr('class', 'labelBkg');
+  }
 
   let bbox = div.node().getBoundingClientRect();
   if (bbox.width === width) {
@@ -203,21 +205,10 @@ export const createText = (
       ),
       labelStyle: style.replace('fill:', 'color:'),
     };
-    let vertexNode = addHtmlSpan(el, node, width, classes);
+    let vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground);
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text);
-    const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
-    let lastWord;
-    structuredText.forEach((line) => {
-      line.forEach((word) => {
-        if (special.includes(word.content) && lastWord) {
-          lastWord.content += word.content;
-          word.content = '';
-        }
-        lastWord = word;
-      });
-    });
     const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
     return svgLabel;
   }
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.js b/packages/mermaid/src/rendering-util/handle-markdown-text.js
index 93704b2fe..5102429d3 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.js
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.js
@@ -1,61 +1,55 @@
-import SimpleMarkdown from '@khanacademy/simple-markdown';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { dedent } from 'ts-dedent';
 
 /**
- *
- * @param markdown
+ * @param {string} markdown markdown to process
+ * @returns {string} processed markdown
  */
 function preprocessMarkdown(markdown) {
   // Replace multiple newlines with a single newline
   const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n');
   // Remove extra spaces at the beginning of each line
-  const withoutExtraSpaces = withoutMultipleNewlines.replace(/^\s+/gm, '');
+  const withoutExtraSpaces = dedent(withoutMultipleNewlines);
   return withoutExtraSpaces;
 }
 
 /**
- *
- * @param markdown
+ * @param {string} markdown markdown to split into lines
  */
 export function markdownToLines(markdown) {
   const preprocessedMarkdown = preprocessMarkdown(markdown);
-  const mdParse = SimpleMarkdown.defaultBlockParse;
-  const syntaxTree = mdParse(preprocessedMarkdown);
-
-  let lines = [[]];
+  const { children } = fromMarkdown(preprocessedMarkdown);
+  const lines = [[]];
   let currentLine = 0;
 
   /**
-   *
-   * @param node
-   * @param parentType
+   * @param {import('mdast').Content} node
+   * @param {string} [parentType]
    */
-  function processNode(node, parentType) {
+  function processNode(node, parentType = 'normal') {
     if (node.type === 'text') {
-      const textLines = node.content.split('\n');
-
+      const textLines = node.value.split('\n');
       textLines.forEach((textLine, index) => {
         if (index !== 0) {
           currentLine++;
           lines.push([]);
         }
-
-        // textLine.split(/ (?=[^!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+)/).forEach((word) => {
         textLine.split(' ').forEach((word) => {
           if (word) {
-            lines[currentLine].push({ content: word, type: parentType || 'normal' });
+            lines[currentLine].push({ content: word, type: parentType });
           }
         });
       });
-    } else if (node.type === 'strong' || node.type === 'em') {
-      node.content.forEach((contentNode) => {
+    } else if (node.type === 'strong' || node.type === 'emphasis') {
+      node.children.forEach((contentNode) => {
         processNode(contentNode, node.type);
       });
     }
   }
 
-  syntaxTree.forEach((treeNode) => {
+  children.forEach((treeNode) => {
     if (treeNode.type === 'paragraph') {
-      treeNode.content.forEach((contentNode) => {
+      treeNode.children.forEach((contentNode) => {
         processNode(contentNode);
       });
     }
@@ -65,30 +59,27 @@ export function markdownToLines(markdown) {
 }
 
 /**
- *
- * @param markdown
+ * @param {string} markdown markdown to convert to HTML
+ * @returns {string} HTML
  */
 export function markdownToHTML(markdown) {
-  const mdParse = SimpleMarkdown.defaultBlockParse;
-  const syntaxTree = mdParse(markdown);
+  const { children } = fromMarkdown(markdown);
 
   /**
-   *
-   * @param node
+   * @param {import('mdast').Content} node
    */
   function output(node) {
     if (node.type === 'text') {
-      return node.content.replace(/\n/g, '
    ');
+      return node.value.replace(/\n/g, '
    ');
     } else if (node.type === 'strong') {
-      return `${node.content.map(output).join('')}`;
-    } else if (node.type === 'em') {
-      return `${node.content.map(output).join('')}`;
+      return `${node.children.map(output).join('')}`;
+    } else if (node.type === 'emphasis') {
+      return `${node.children.map(output).join('')}`;
     } else if (node.type === 'paragraph') {
-      return `
    ${node.content.map(output).join('')}
    `;
-    } else {
-      return '';
+      return `
    ${node.children.map(output).join('')}
    `;
     }
+    return `Unsupported markdown: ${node.type}`;
   }
 
-  return syntaxTree.map(output).join('');
+  return children.map(output).join('');
 }
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
similarity index 90%
rename from packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
rename to packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
index 5e74a9956..8ae519cfa 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
@@ -1,6 +1,5 @@
-// import { test } from 'vitest';
-import { markdownToLines, markdownToHTML } from './handle-markdown-text';
-import { test } from 'vitest';
+import { markdownToLines, markdownToHTML } from './handle-markdown-text.js';
+import { test, expect } from 'vitest';
 
 test('markdownToLines - Basic test', () => {
   const input = `This is regular text
@@ -37,9 +36,9 @@ Here is a line *with an italic* section`;
       { content: 'is', type: 'normal' },
       { content: 'a', type: 'normal' },
       { content: 'line', type: 'normal' },
-      { content: 'with', type: 'em' },
-      { content: 'an', type: 'em' },
-      { content: 'italic', type: 'em' },
+      { content: 'with', type: 'emphasis' },
+      { content: 'an', type: 'emphasis' },
+      { content: 'italic', type: 'emphasis' },
       { content: 'section', type: 'normal' },
     ],
   ];
@@ -117,7 +116,6 @@ test('markdownToLines - paragraph 1', () => {
 
 test('markdownToLines - paragraph', () => {
   const input = `**Start** with
-
     a second line`;
 
   const expectedOutput = [
@@ -144,7 +142,7 @@ test('markdownToLines - Only italic formatting', () => {
       { content: 'This', type: 'normal' },
       { content: 'is', type: 'normal' },
       { content: 'an', type: 'normal' },
-      { content: 'italic', type: 'em' },
+      { content: 'italic', type: 'emphasis' },
       { content: 'test', type: 'normal' },
     ],
   ];
@@ -158,7 +156,7 @@ it('markdownToLines - Mixed formatting', () => {
 
   const expectedOutput = [
     [
-      { content: 'Italic', type: 'em' },
+      { content: 'Italic', type: 'emphasis' },
       { content: 'and', type: 'normal' },
       { content: 'bold', type: 'strong' },
       { content: 'formatting', type: 'normal' },
@@ -179,21 +177,15 @@ Word!`;
       { content: 'dog', type: 'normal' },
       { content: 'in', type: 'normal' },
       { content: 'the', type: 'strong' },
-      { content: 'hog', type: 'normal' },
-      { content: '.', type: 'normal' },
-      { content: '.', type: 'normal' },
-      { content: '.', type: 'normal' },
+      { content: 'hog...', type: 'normal' },
       { content: 'a', type: 'normal' },
-      { content: 'very', type: 'em' },
-      { content: 'long', type: 'em' },
-      { content: 'text', type: 'em' },
+      { content: 'very', type: 'emphasis' },
+      { content: 'long', type: 'emphasis' },
+      { content: 'text', type: 'emphasis' },
       { content: 'about', type: 'normal' },
       { content: 'it', type: 'normal' },
     ],
-    [
-      { content: 'Word', type: 'normal' },
-      { content: '!', type: 'normal' },
-    ],
+    [{ content: 'Word!', type: 'normal' }],
   ];
 
   const output = markdownToLines(input);
@@ -246,8 +238,16 @@ test('markdownToHTML - Only italic formatting', () => {
 
 test('markdownToHTML - Mixed formatting', () => {
   const input = `*Italic* and **bold** formatting`;
-
   const expectedOutput = `
    Italic and bold formatting
    `;
   const output = markdownToHTML(input);
   expect(output).toEqual(expectedOutput);
 });
+
+test('markdownToHTML - Unsupported formatting', () => {
+  expect(
+    markdownToHTML(`Hello
+  - l1
+  - l2
+  - l3`)
+  ).toMatchInlineSnapshot('"
    Hello
    Unsupported markdown: list"');
+});
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 6e26e12a2..ce1700d0b 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -1,4 +1,4 @@
-import { darken, lighten, adjust, invert } from 'khroma';
+import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
@@ -220,6 +220,31 @@ class Theme {
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
+    /* quadrant-graph */
+    this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
+    this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
+    this.quadrant2TextFill =
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
+    this.quadrant3TextFill =
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
+    this.quadrant4TextFill =
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
+    this.quadrantPointFill =
+      this.quadrantPointFill || isDark(this.quadrant1Fill)
+        ? lighten(this.quadrant1Fill)
+        : darken(this.quadrant1Fill);
+    this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
+    this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
+    this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
+    this.quadrantInternalBorderStrokeFill =
+      this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantExternalBorderStrokeFill =
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 7298f3a0c..fd083e513 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -1,4 +1,4 @@
-import { invert, lighten, darken, rgba, adjust } from 'khroma';
+import { invert, lighten, darken, rgba, adjust, isDark } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 
 class Theme {
@@ -226,6 +226,31 @@ class Theme {
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
+    /* quadrant-graph */
+    this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
+    this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
+    this.quadrant2TextFill =
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
+    this.quadrant3TextFill =
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
+    this.quadrant4TextFill =
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
+    this.quadrantPointFill =
+      this.quadrantPointFill || isDark(this.quadrant1Fill)
+        ? lighten(this.quadrant1Fill)
+        : darken(this.quadrant1Fill);
+    this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
+    this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
+    this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
+    this.quadrantInternalBorderStrokeFill =
+      this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantExternalBorderStrokeFill =
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
+
     /* class */
     this.classText = this.primaryTextColor;
 
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index b29e93862..3cd6bca4f 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -1,4 +1,4 @@
-import { invert, lighten, rgba, adjust, darken } from 'khroma';
+import { invert, lighten, rgba, adjust, darken, isDark } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
@@ -247,6 +247,31 @@ class Theme {
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
+    /* quadrant-graph */
+    this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
+    this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
+    this.quadrant2TextFill =
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
+    this.quadrant3TextFill =
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
+    this.quadrant4TextFill =
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
+    this.quadrantPointFill =
+      this.quadrantPointFill || isDark(this.quadrant1Fill)
+        ? lighten(this.quadrant1Fill)
+        : darken(this.quadrant1Fill);
+    this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
+    this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
+    this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
+    this.quadrantInternalBorderStrokeFill =
+      this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantExternalBorderStrokeFill =
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index dbff069b7..65797b00c 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -1,4 +1,4 @@
-import { darken, lighten, adjust, invert } from 'khroma';
+import { darken, lighten, adjust, invert, isDark } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
@@ -215,6 +215,31 @@ class Theme {
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
+    /* quadrant-graph */
+    this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
+    this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
+    this.quadrant2TextFill =
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
+    this.quadrant3TextFill =
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
+    this.quadrant4TextFill =
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
+    this.quadrantPointFill =
+      this.quadrantPointFill || isDark(this.quadrant1Fill)
+        ? lighten(this.quadrant1Fill)
+        : darken(this.quadrant1Fill);
+    this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
+    this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
+    this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
+    this.quadrantInternalBorderStrokeFill =
+      this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantExternalBorderStrokeFill =
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index bc0725276..963ce031d 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -1,4 +1,4 @@
-import { invert, darken, lighten, adjust } from 'khroma';
+import { invert, darken, lighten, adjust, isDark } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
@@ -246,6 +246,31 @@ class Theme {
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
+    /* quadrant-graph */
+    this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
+    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
+    this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
+    this.quadrant2TextFill =
+      this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
+    this.quadrant3TextFill =
+      this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
+    this.quadrant4TextFill =
+      this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
+    this.quadrantPointFill =
+      this.quadrantPointFill || isDark(this.quadrant1Fill)
+        ? lighten(this.quadrant1Fill)
+        : darken(this.quadrant1Fill);
+    this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
+    this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
+    this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
+    this.quadrantInternalBorderStrokeFill =
+      this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantExternalBorderStrokeFill =
+      this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
+    this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e779df894..48778b871 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,14 +56,14 @@ importers:
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.0.4)
       '@vitest/coverage-c8':
-        specifier: ^0.30.1
-        version: 0.30.1(vitest@0.30.1)
+        specifier: ^0.31.0
+        version: 0.31.0(vitest@0.31.0)
       '@vitest/spy':
-        specifier: ^0.30.1
-        version: 0.30.1
+        specifier: ^0.31.0
+        version: 0.31.0
       '@vitest/ui':
-        specifier: ^0.30.1
-        version: 0.30.1
+        specifier: ^0.31.0
+        version: 0.31.0(vitest@0.31.0)
       concurrently:
         specifier: ^8.0.1
         version: 8.0.1
@@ -173,17 +173,14 @@ importers:
         specifier: ^4.3.1
         version: 4.3.1(@types/node@18.16.0)
       vitest:
-        specifier: ^0.30.1
-        version: 0.30.1(@vitest/ui@0.30.1)(jsdom@21.1.1)
+        specifier: ^0.31.0
+        version: 0.31.0(@vitest/ui@0.31.0)(jsdom@21.1.1)
 
   packages/mermaid:
     dependencies:
       '@braintree/sanitize-url':
         specifier: ^6.0.2
         version: 6.0.2
-      '@khanacademy/simple-markdown':
-        specifier: ^0.9.0
-        version: 0.9.2(react-dom@16.14.0)(react@16.14.0)
       cytoscape:
         specifier: ^3.23.0
         version: 3.23.0
@@ -203,8 +200,8 @@ importers:
         specifier: ^1.11.7
         version: 1.11.7
       dompurify:
-        specifier: 3.0.2
-        version: 3.0.2
+        specifier: 3.0.3
+        version: 3.0.3
       elkjs:
         specifier: ^0.8.2
         version: 0.8.2
@@ -217,6 +214,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      mdast-util-from-markdown:
+        specifier: ^1.3.0
+        version: 1.3.0
       non-layered-tidy-tree-layout:
         specifier: ^2.0.2
         version: 2.0.2
@@ -334,10 +334,10 @@ importers:
         version: 1.0.0
       vitepress:
         specifier: ^1.0.0-alpha.72
-        version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0)
+        version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
-        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.2.47)
+        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4)
 
   packages/mermaid-example-diagram:
     dependencies:
@@ -376,6 +376,58 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
 
+  packages/mermaid/src/docs:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.1.0(vue@3.2.47)
+      jiti:
+        specifier: ^1.18.2
+        version: 1.18.2
+      vue:
+        specifier: ^3.2.47
+        version: 3.2.47
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.16
+        version: 1.1.16
+      '@unocss/reset':
+        specifier: ^0.52.0
+        version: 0.52.0
+      '@vite-pwa/vitepress':
+        specifier: ^0.0.5
+        version: 0.0.5(vite-plugin-pwa@0.15.0)
+      '@vitejs/plugin-vue':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@4.3.3)(vue@3.2.47)
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.2.12
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.0
+      unocss:
+        specifier: ^0.52.0
+        version: 0.52.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3)
+      unplugin-vue-components:
+        specifier: ^0.24.1
+        version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
+      vite:
+        specifier: ^4.3.3
+        version: 4.3.3
+      vite-plugin-pwa:
+        specifier: ^0.15.0
+        version: 0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
+      vitepress:
+        specifier: 1.0.0-beta.1
+        version: 1.0.0-beta.1(@algolia/client-search@4.14.2)
+      workbox-window:
+        specifier: ^6.5.4
+        version: 6.5.4
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -397,25 +449,25 @@ importers:
 
 packages:
 
-  /@algolia/autocomplete-core@1.7.4:
-    resolution: {integrity: sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==}
+  /@algolia/autocomplete-core@1.8.2:
+    resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==}
     dependencies:
-      '@algolia/autocomplete-shared': 1.7.4
+      '@algolia/autocomplete-shared': 1.8.2
     dev: true
 
-  /@algolia/autocomplete-preset-algolia@1.7.4(@algolia/client-search@4.14.2)(algoliasearch@4.14.2):
-    resolution: {integrity: sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==}
+  /@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2):
+    resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/autocomplete-shared': 1.7.4
+      '@algolia/autocomplete-shared': 1.8.2
       '@algolia/client-search': 4.14.2
       algoliasearch: 4.14.2
     dev: true
 
-  /@algolia/autocomplete-shared@1.7.4:
-    resolution: {integrity: sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg==}
+  /@algolia/autocomplete-shared@1.8.2:
+    resolution: {integrity: sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g==}
     dev: true
 
   /@algolia/cache-browser-local-storage@4.14.2:
@@ -508,6 +560,41 @@ packages:
       '@algolia/requester-common': 4.14.2
     dev: true
 
+  /@ampproject/remapping@2.2.1:
+    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.2
+      '@jridgewell/trace-mapping': 0.3.17
+    dev: true
+
+  /@antfu/install-pkg@0.1.1:
+    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
+  /@antfu/utils@0.5.2:
+    resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
+    dev: true
+
+  /@antfu/utils@0.7.2:
+    resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==}
+    dev: true
+
+  /@apideck/better-ajv-errors@0.3.6(ajv@8.11.0):
+    resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      ajv: '>=8'
+    dependencies:
+      ajv: 8.11.0
+      json-schema: 0.4.0
+      jsonpointer: 5.0.1
+      leven: 3.1.0
+    dev: true
+
   /@applitools/core-base@1.1.39:
     resolution: {integrity: sha512-dFAmK5AeUEfhc6uHyZJ1sZNR2RB92EXn4zj2Vq4CVl1msnfb/rTLJl2UTSZtmP7W7khss2+y/vRsnJpyKErDPg==}
     engines: {node: '>=12.13.0'}
@@ -1088,18 +1175,23 @@ packages:
       '@babel/highlight': 7.18.6
     dev: true
 
+  /@babel/compat-data@7.21.0:
+    resolution: {integrity: sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/core@7.12.3:
     resolution: {integrity: sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.19.0
-      '@babel/helper-module-transforms': 7.19.0
+      '@babel/generator': 7.21.1
+      '@babel/helper-module-transforms': 7.21.2
       '@babel/helpers': 7.19.0
-      '@babel/parser': 7.19.1
-      '@babel/template': 7.18.10
-      '@babel/traverse': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/parser': 7.21.8
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
       convert-source-map: 1.8.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -1112,94 +1204,242 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator@7.19.0:
-    resolution: {integrity: sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==}
+  /@babel/generator@7.21.1:
+    resolution: {integrity: sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
       '@jridgewell/gen-mapping': 0.3.2
+      '@jridgewell/trace-mapping': 0.3.17
       jsesc: 2.5.2
     dev: true
 
+  /@babel/helper-annotate-as-pure@7.18.6:
+    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.2
+    dev: true
+
+  /@babel/helper-builder-binary-assignment-operator-visitor@7.18.9:
+    resolution: {integrity: sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-explode-assignable-expression': 7.18.6
+      '@babel/types': 7.21.2
+    dev: true
+
+  /@babel/helper-compilation-targets@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.21.0
+      '@babel/core': 7.12.3
+      '@babel/helper-validator-option': 7.21.0
+      browserslist: 4.21.5
+      lru-cache: 5.1.1
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-create-class-features-plugin@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-member-expression-to-functions': 7.21.0
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-replace-supers': 7.20.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/helper-split-export-declaration': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-create-regexp-features-plugin@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-annotate-as-pure': 7.18.6
+      regexpu-core: 5.3.1
+    dev: true
+
+  /@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.12.3):
+    resolution: {integrity: sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==}
+    peerDependencies:
+      '@babel/core': ^7.4.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+      debug: 4.3.4
+      lodash.debounce: 4.0.8
+      resolve: 1.22.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helper-environment-visitor@7.18.9:
     resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-function-name@7.19.0:
-    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
+  /@babel/helper-explode-assignable-expression@7.18.6:
+    resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.18.10
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
+    dev: true
+
+  /@babel/helper-function-name@7.21.0:
+    resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.20.7
+      '@babel/types': 7.21.2
     dev: true
 
   /@babel/helper-hoist-variables@7.18.6:
     resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
+    dev: true
+
+  /@babel/helper-member-expression-to-functions@7.21.0:
+    resolution: {integrity: sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.2
     dev: true
 
   /@babel/helper-module-imports@7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
     dev: true
 
-  /@babel/helper-module-transforms@7.19.0:
-    resolution: {integrity: sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==}
+  /@babel/helper-module-transforms@7.21.2:
+    resolution: {integrity: sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-simple-access': 7.18.6
+      '@babel/helper-simple-access': 7.20.2
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/helper-validator-identifier': 7.19.1
-      '@babel/template': 7.18.10
-      '@babel/traverse': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/helper-plugin-utils@7.19.0:
-    resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==}
+  /@babel/helper-optimise-call-expression@7.18.6:
+    resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.2
+    dev: true
+
+  /@babel/helper-plugin-utils@7.20.2:
+    resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-simple-access@7.18.6:
-    resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
+  /@babel/helper-remap-async-to-generator@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-wrap-function': 7.20.5
+      '@babel/types': 7.21.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-replace-supers@7.20.7:
+    resolution: {integrity: sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-member-expression-to-functions': 7.21.0
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-simple-access@7.20.2:
+    resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.2
+    dev: true
+
+  /@babel/helper-skip-transparent-expression-wrappers@7.20.0:
+    resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.2
     dev: true
 
   /@babel/helper-split-export-declaration@7.18.6:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
     dev: true
 
-  /@babel/helper-string-parser@7.18.10:
-    resolution: {integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==}
+  /@babel/helper-string-parser@7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.19.1:
     resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
     engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.21.0:
+    resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-wrap-function@7.20.5:
+    resolution: {integrity: sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-function-name': 7.21.0
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@babel/helpers@7.19.0:
     resolution: {integrity: sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.18.10
-      '@babel/traverse': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1213,12 +1453,224 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser@7.19.1:
-    resolution: {integrity: sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==}
+  /@babel/parser@7.21.2:
+    resolution: {integrity: sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
+
+  /@babel/parser@7.21.8:
+    resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.21.2
+
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-remap-async-to-generator': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.12.3)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-class-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-class-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.12.3)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.21.0
+      '@babel/core': 7.12.3
+      '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-transform-parameters': 7.20.7(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.12.3)
+    dev: true
+
+  /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-class-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-private-property-in-object@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.12.3)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-regexp-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.12.3):
@@ -1227,7 +1679,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.12.3):
@@ -1236,7 +1688,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.12.3):
@@ -1245,7 +1697,45 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.12.3):
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.12.3):
+    resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.12.3):
+    resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-syntax-import-assertions@7.20.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.12.3):
@@ -1254,7 +1744,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.12.3):
@@ -1263,7 +1753,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-jsx@7.18.6(@babel/core@7.12.3):
@@ -1273,7 +1763,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.12.3):
@@ -1282,7 +1772,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.12.3):
@@ -1291,7 +1781,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.12.3):
@@ -1300,7 +1790,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.12.3):
@@ -1309,7 +1799,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.12.3):
@@ -1318,7 +1808,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.12.3):
@@ -1327,7 +1817,17 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.12.3):
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.12.3):
@@ -1337,7 +1837,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
   /@babel/plugin-syntax-typescript@7.18.6(@babel/core@7.12.3):
@@ -1347,7 +1847,471 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-arrow-functions@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-async-to-generator@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-remap-async-to-generator': 7.18.9(@babel/core@7.12.3)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-block-scoped-functions@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-block-scoping@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-classes@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.12.3)
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-replace-supers': 7.20.7
+      '@babel/helper-split-export-declaration': 7.18.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-computed-properties@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/template': 7.20.7
+    dev: true
+
+  /@babel/plugin-transform-destructuring@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-regexp-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-duplicate-keys@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-exponentiation-operator@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.9
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-for-of@7.21.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-function-name@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.12.3)
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-literals@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-member-expression-literals@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-modules-amd@7.20.11(@babel/core@7.12.3):
+    resolution: {integrity: sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-module-transforms': 7.21.2
+      '@babel/helper-plugin-utils': 7.20.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-commonjs@7.21.2(@babel/core@7.12.3):
+    resolution: {integrity: sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-module-transforms': 7.21.2
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-simple-access': 7.20.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-systemjs@7.20.11(@babel/core@7.12.3):
+    resolution: {integrity: sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-module-transforms': 7.21.2
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-validator-identifier': 7.19.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-umd@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-module-transforms': 7.21.2
+      '@babel/helper-plugin-utils': 7.20.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-named-capturing-groups-regex@7.20.5(@babel/core@7.12.3):
+    resolution: {integrity: sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-regexp-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-new-target@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-object-super@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-replace-supers': 7.20.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-parameters@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-property-literals@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-regenerator@7.20.5(@babel/core@7.12.3):
+    resolution: {integrity: sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      regenerator-transform: 0.15.1
+    dev: true
+
+  /@babel/plugin-transform-reserved-words@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-shorthand-properties@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-spread@7.20.7(@babel/core@7.12.3):
+    resolution: {integrity: sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+    dev: true
+
+  /@babel/plugin-transform-sticky-regex@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-template-literals@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-typeof-symbol@7.18.9(@babel/core@7.12.3):
+    resolution: {integrity: sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-unicode-escapes@7.18.10(@babel/core@7.12.3):
+    resolution: {integrity: sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/plugin-transform-unicode-regex@7.18.6(@babel/core@7.12.3):
+    resolution: {integrity: sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-create-regexp-features-plugin': 7.21.0(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+    dev: true
+
+  /@babel/preset-env@7.20.2(@babel/core@7.12.3):
+    resolution: {integrity: sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.21.0
+      '@babel/core': 7.12.3
+      '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.12.3)
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-validator-option': 7.21.0
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-class-static-block': 7.21.0(@babel/core@7.12.3)
+      '@babel/plugin-proposal-dynamic-import': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-proposal-json-strings': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-logical-assignment-operators': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.12.3)
+      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0(@babel/core@7.12.3)
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.12.3)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.12.3)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.12.3)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-import-assertions': 7.20.0(@babel/core@7.12.3)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.12.3)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.12.3)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.12.3)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.12.3)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.12.3)
+      '@babel/plugin-transform-arrow-functions': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-transform-async-to-generator': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-transform-block-scoped-functions': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-block-scoping': 7.21.0(@babel/core@7.12.3)
+      '@babel/plugin-transform-classes': 7.21.0(@babel/core@7.12.3)
+      '@babel/plugin-transform-computed-properties': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-transform-destructuring': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-duplicate-keys': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-transform-exponentiation-operator': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-for-of': 7.21.0(@babel/core@7.12.3)
+      '@babel/plugin-transform-function-name': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-transform-literals': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-transform-member-expression-literals': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-modules-amd': 7.20.11(@babel/core@7.12.3)
+      '@babel/plugin-transform-modules-commonjs': 7.21.2(@babel/core@7.12.3)
+      '@babel/plugin-transform-modules-systemjs': 7.20.11(@babel/core@7.12.3)
+      '@babel/plugin-transform-modules-umd': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.20.5(@babel/core@7.12.3)
+      '@babel/plugin-transform-new-target': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-object-super': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-parameters': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-transform-property-literals': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-regenerator': 7.20.5(@babel/core@7.12.3)
+      '@babel/plugin-transform-reserved-words': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-shorthand-properties': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-spread': 7.20.7(@babel/core@7.12.3)
+      '@babel/plugin-transform-sticky-regex': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-template-literals': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-transform-typeof-symbol': 7.18.9(@babel/core@7.12.3)
+      '@babel/plugin-transform-unicode-escapes': 7.18.10(@babel/core@7.12.3)
+      '@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.12.3)
+      '@babel/preset-modules': 0.1.5(@babel/core@7.12.3)
+      '@babel/types': 7.21.2
+      babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.12.3)
+      babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.12.3)
+      babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.12.3)
+      core-js-compat: 3.28.0
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/preset-modules@0.1.5(@babel/core@7.12.3):
+    resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.12.3)
+      '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.12.3)
+      '@babel/types': 7.21.2
+      esutils: 2.0.3
+    dev: true
+
+  /@babel/regjsgen@0.8.0:
+    resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
     dev: true
 
   /@babel/runtime@7.21.0:
@@ -1357,41 +2321,40 @@ packages:
       regenerator-runtime: 0.13.11
     dev: true
 
-  /@babel/template@7.18.10:
-    resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
+  /@babel/template@7.20.7:
+    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/parser': 7.21.8
+      '@babel/types': 7.21.2
     dev: true
 
-  /@babel/traverse@7.19.1:
-    resolution: {integrity: sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==}
+  /@babel/traverse@7.21.2:
+    resolution: {integrity: sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.19.0
+      '@babel/generator': 7.21.1
       '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-function-name': 7.21.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/parser': 7.21.8
+      '@babel/types': 7.21.2
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types@7.19.0:
-    resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==}
+  /@babel/types@7.21.2:
+    resolution: {integrity: sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.18.10
+      '@babel/helper-string-parser': 7.19.4
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
-    dev: true
 
   /@bcoe/v8-coverage@0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -1426,7 +2389,7 @@ packages:
       lodash.isfunction: 3.0.9
       resolve-from: 5.0.0
       resolve-global: 1.0.0
-      yargs: 17.7.1
+      yargs: 17.7.2
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -1500,8 +2463,8 @@ packages:
       '@commitlint/types': 17.4.4
       '@types/node': 18.16.0
       chalk: 4.1.2
-      cosmiconfig: 8.1.3
-      cosmiconfig-typescript-loader: 4.1.0(@types/node@18.16.0)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@5.0.4)
+      cosmiconfig: 8.0.0
+      cosmiconfig-typescript-loader: 4.1.0(@types/node@18.16.0)(cosmiconfig@8.0.0)(ts-node@10.9.1)(typescript@5.0.4)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -1587,11 +2550,11 @@ packages:
       '@cspell/dict-ada': 4.0.1
       '@cspell/dict-aws': 3.0.0
       '@cspell/dict-bash': 4.1.1
-      '@cspell/dict-companies': 3.0.9
-      '@cspell/dict-cpp': 5.0.2
+      '@cspell/dict-companies': 3.0.10
+      '@cspell/dict-cpp': 5.0.3
       '@cspell/dict-cryptocurrencies': 3.0.1
       '@cspell/dict-csharp': 4.0.2
-      '@cspell/dict-css': 4.0.5
+      '@cspell/dict-css': 4.0.6
       '@cspell/dict-dart': 2.0.2
       '@cspell/dict-django': 4.0.2
       '@cspell/dict-docker': 1.1.6
@@ -1619,12 +2582,12 @@ packages:
       '@cspell/dict-php': 4.0.1
       '@cspell/dict-powershell': 5.0.1
       '@cspell/dict-public-licenses': 2.0.2
-      '@cspell/dict-python': 4.0.3
+      '@cspell/dict-python': 4.0.4
       '@cspell/dict-r': 2.0.1
       '@cspell/dict-ruby': 5.0.0
       '@cspell/dict-rust': 4.0.1
       '@cspell/dict-scala': 5.0.0
-      '@cspell/dict-software-terms': 3.1.6
+      '@cspell/dict-software-terms': 3.1.8
       '@cspell/dict-sql': 2.1.0
       '@cspell/dict-svelte': 1.0.2
       '@cspell/dict-swift': 2.0.1
@@ -1659,12 +2622,12 @@ packages:
     resolution: {integrity: sha512-8czAa/Mh96wu2xr0RXQEGMTBUGkTvYn/Pb0o+gqOO1YW+poXGQc3gx0YPqILDryP/KCERrNvkWUJz3iGbvwC2A==}
     dev: true
 
-  /@cspell/dict-companies@3.0.9:
-    resolution: {integrity: sha512-wSkVIJjk33Sm3LhieNv9TsSvUSeP0R/h8xx06NqbMYF43w9J8hZiMHlbB3FzaSOHRpXT5eBIJBVTeFbceZdiqg==}
+  /@cspell/dict-companies@3.0.10:
+    resolution: {integrity: sha512-LgPi7t9cMc2gBL63jkx/H3LAAtM/DjgZEsnmYmGqrCPWYVmKY1Y4sH2PBaV2ocE9CypV83M0DellGiUNb0kmug==}
     dev: true
 
-  /@cspell/dict-cpp@5.0.2:
-    resolution: {integrity: sha512-Q0ZjfhrHHfm0Y1/7LMCq3Fne/bhiBeBogUw4TV1wX/1tg3m+5BtaW/7GiOzRk+rFsblVj3RFam59VJKMT3vSoQ==}
+  /@cspell/dict-cpp@5.0.3:
+    resolution: {integrity: sha512-7sx/RFsf0hB3q8chx8OHYl9Kd+g0pqA1laphwaAQ+/jPwoAreYT3kNQWbJ3bIt/rMoORetFSQxckSbaJXwwqpw==}
     dev: true
 
   /@cspell/dict-cryptocurrencies@3.0.1:
@@ -1675,8 +2638,8 @@ packages:
     resolution: {integrity: sha512-1JMofhLK+4p4KairF75D3A924m5ERMgd1GvzhwK2geuYgd2ZKuGW72gvXpIV7aGf52E3Uu1kDXxxGAiZ5uVG7g==}
     dev: true
 
-  /@cspell/dict-css@4.0.5:
-    resolution: {integrity: sha512-z5vw8nJSyKd6d3i5UmMNoVcAp0wxvs9OHWOmAeJKT9fO3tok02gK24VZhcJ0NJtiKdHQ2zRuzdfWl51wdAiY6A==}
+  /@cspell/dict-css@4.0.6:
+    resolution: {integrity: sha512-2Lo8W2ezHmGgY8cWFr4RUwnjbndna5mokpCK/DuxGILQnuajR0J31ANQOXj/8iZM2phFB93ZzMNk/0c04TDfSQ==}
     dev: true
 
   /@cspell/dict-dart@2.0.2:
@@ -1787,8 +2750,8 @@ packages:
     resolution: {integrity: sha512-baKkbs/WGEV2lCWZoL0KBPh3uiPcul5GSDwmXEBAsR5McEW52LF94/b7xWM0EmSAc/y8ODc5LnPYC7RDRLi6LQ==}
     dev: true
 
-  /@cspell/dict-python@4.0.3:
-    resolution: {integrity: sha512-tUEMEbtV5kjuiX//K1SFo4ayO6q+bY9ghqTAo3bdlraZy59MFx8KVLYHnRndVqGwM8rRwRhp9Kmb6boAnBl+Kw==}
+  /@cspell/dict-python@4.0.4:
+    resolution: {integrity: sha512-whCrxsALD66PxSbxZ++xV1HQzxpRZMiX6LXEkZlj4gWuptrzyZUdTMiI8EqVEVfyf5G4EW7HNCTz35kNL5Zl+w==}
     dev: true
 
   /@cspell/dict-r@2.0.1:
@@ -1807,8 +2770,8 @@ packages:
     resolution: {integrity: sha512-ph0twaRoV+ylui022clEO1dZ35QbeEQaKTaV2sPOsdwIokABPIiK09oWwGK9qg7jRGQwVaRPEq0Vp+IG1GpqSQ==}
     dev: true
 
-  /@cspell/dict-software-terms@3.1.6:
-    resolution: {integrity: sha512-w46+pIMRVtrDuTZXK/YxDP5NL5yVoX0ImEPO0s9WbxdyyfhzAF3sGYHBGN/50OGLHExcqe6Idb9feoRC9mCLxw==}
+  /@cspell/dict-software-terms@3.1.8:
+    resolution: {integrity: sha512-gXJWSqnr8U50wHo/tpplLaZUQBQQGOwaJFHyMhN+DVNO92setoApHQ0zSqy4KSSkfvdbgYP0nPAj0MAo9/TvOw==}
     dev: true
 
   /@cspell/dict-sql@2.1.0:
@@ -1903,10 +2866,14 @@ packages:
     resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==}
     dev: true
 
-  /@docsearch/js@3.3.3(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0):
-    resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==}
+  /@docsearch/css@3.3.5:
+    resolution: {integrity: sha512-NaXVp3I8LdmJ54fn038KHgG7HmbIzZlKS2FkVf6mKcW5bYMJovkx4947joQyZk5yubxOZ+ddHSh79y39Aevufg==}
+    dev: true
+
+  /@docsearch/js@3.3.5(@algolia/client-search@4.14.2):
+    resolution: {integrity: sha512-nZi074OCryZnzva2LNcbQkwBJIND6cvuFI4s1FIe6Ygf6n9g6B/IYUULXNx05rpoCZ+KEoEt3taROpsHBliuSw==}
     dependencies:
-      '@docsearch/react': 3.3.3(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0)
+      '@docsearch/react': 3.3.5(@algolia/client-search@4.14.2)
       preact: 10.11.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -1915,8 +2882,8 @@ packages:
       - react-dom
     dev: true
 
-  /@docsearch/react@3.3.3(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0):
-    resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==}
+  /@docsearch/react@3.3.5(@algolia/client-search@4.14.2):
+    resolution: {integrity: sha512-Zuxf4z5PZ9eIQkVCNu76v1H+KAztKItNn3rLzZa7kpBS+++TgNARITnZeUS7C1DKoAhJZFr6T/H+Lvc6h/iiYg==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
       react: '>= 16.8.0 < 19.0.0'
@@ -1929,12 +2896,10 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.7.4
-      '@algolia/autocomplete-preset-algolia': 1.7.4(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)
-      '@docsearch/css': 3.3.3
+      '@algolia/autocomplete-core': 1.8.2
+      '@algolia/autocomplete-preset-algolia': 1.8.2(@algolia/client-search@4.14.2)(algoliasearch@4.14.2)
+      '@docsearch/css': 3.3.5
       algoliasearch: 4.14.2
-      react: 16.14.0
-      react-dom: 16.14.0(react@16.14.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -2153,7 +3118,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
       eslint: 8.39.0
-      eslint-visitor-keys: 3.3.0
+      eslint-visitor-keys: 3.4.0
     dev: true
 
   /@eslint-community/regexpp@4.5.0:
@@ -2223,6 +3188,29 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/carbon@1.1.16:
+    resolution: {integrity: sha512-AD8bcnRSGA0WfcGEass2FbA0sagrUzrpFx5WchuDy3uf7yKBWumdypdQK121DH321fQDl5+zZQ26T6gC9knwUQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
+  /@iconify/utils@2.1.5:
+    resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.2
+      '@iconify/types': 2.0.0
+      debug: 4.3.4
+      kolorist: 1.7.0
+      local-pkg: 0.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@istanbuljs/load-nyc-config@1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -2358,7 +3346,7 @@ packages:
       '@jest/test-result': 29.5.0
       '@jest/transform': 29.5.0
       '@jest/types': 29.5.0
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
       '@types/node': 18.16.0
       chalk: 4.1.2
       collect-v8-coverage: 1.0.1
@@ -2392,7 +3380,7 @@ packages:
     resolution: {integrity: sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
       callsites: 3.1.0
       graceful-fs: 4.2.10
     dev: true
@@ -2423,7 +3411,7 @@ packages:
     dependencies:
       '@babel/core': 7.12.3
       '@jest/types': 29.5.0
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 2.0.0
@@ -2458,7 +3446,7 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
     dev: true
 
   /@jridgewell/resolve-uri@3.1.0:
@@ -2475,15 +3463,15 @@ packages:
     resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
     dev: true
 
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
 
-  /@jridgewell/trace-mapping@0.3.15:
-    resolution: {integrity: sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==}
+  /@jridgewell/trace-mapping@0.3.17:
+    resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
@@ -2496,17 +3484,6 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
-  /@khanacademy/simple-markdown@0.9.2(react-dom@16.14.0)(react@16.14.0):
-    resolution: {integrity: sha512-iRkSaVuUT+ho8B0aY0uLGgfS1YU84l/mSwjJTh0N0k0WzjdJUJY4+Eh56kn8whwD8QX6uNblAT0lT5ICATLtZg==}
-    peerDependencies:
-      react: 16.14.0
-      react-dom: 16.14.0
-    dependencies:
-      '@types/react': 18.0.33
-      react: 16.14.0
-      react-dom: 16.14.0(react@16.14.0)
-    dev: false
-
   /@leichtgewicht/ip-codec@2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
@@ -2568,6 +3545,48 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@rollup/plugin-babel@5.3.1(@babel/core@7.12.3)(rollup@2.79.1):
+    resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/babel__core': ^7.1.9
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      '@types/babel__core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-module-imports': 7.18.6
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.1)
+      rollup: 2.79.1
+    dev: true
+
+  /@rollup/plugin-node-resolve@11.2.1(rollup@2.79.1):
+    resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.1)
+      '@types/resolve': 1.17.1
+      builtin-modules: 3.3.0
+      deepmerge: 4.2.2
+      is-module: 1.0.0
+      resolve: 1.22.1
+      rollup: 2.79.1
+    dev: true
+
+  /@rollup/plugin-replace@2.4.2(rollup@2.79.1):
+    resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.1)
+      magic-string: 0.25.9
+      rollup: 2.79.1
+    dev: true
+
   /@rollup/plugin-typescript@11.1.0(typescript@5.0.4):
     resolution: {integrity: sha512-86flrfE+bSHB69znnTV6kVjkncs2LBMhcTCyxWgRxLyfXfQrxg4UwlAqENnjrrxnSNS/XKCDJCl8EkdFJVHOxw==}
     engines: {node: '>=14.0.0'}
@@ -2586,6 +3605,18 @@ packages:
       typescript: 5.0.4
     dev: true
 
+  /@rollup/pluginutils@3.1.0(rollup@2.79.1):
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: true
+
   /@rollup/pluginutils@5.0.2:
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -2600,6 +3631,21 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@rollup/pluginutils@5.0.2(rollup@2.79.1):
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: true
+
   /@sideway/address@4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -2635,6 +3681,15 @@ packages:
       '@sinonjs/commons': 2.0.0
     dev: true
 
+  /@surma/rollup-plugin-off-main-thread@2.2.3:
+    resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
+    dependencies:
+      ejs: 3.1.8
+      json5: 2.2.1
+      magic-string: 0.25.9
+      string.prototype.matchall: 4.0.8
+    dev: true
+
   /@szmarczak/http-timer@4.0.6:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
@@ -2671,8 +3726,8 @@ packages:
   /@types/babel__core@7.1.19:
     resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==}
     dependencies:
-      '@babel/parser': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/parser': 7.21.8
+      '@babel/types': 7.21.2
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.18.2
@@ -2681,20 +3736,20 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/parser': 7.21.8
+      '@babel/types': 7.21.2
     dev: true
 
   /@types/babel__traverse@7.18.2:
     resolution: {integrity: sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==}
     dependencies:
-      '@babel/types': 7.19.0
+      '@babel/types': 7.21.2
     dev: true
 
   /@types/body-parser@1.19.2:
@@ -2736,7 +3791,7 @@ packages:
   /@types/connect-history-api-fallback@1.3.5:
     resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
     dependencies:
-      '@types/express-serve-static-core': 4.17.33
+      '@types/express-serve-static-core': 4.17.31
       '@types/node': 18.16.0
     dev: true
 
@@ -2939,7 +3994,6 @@ packages:
     resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
     dependencies:
       '@types/ms': 0.7.31
-    dev: true
 
   /@types/dompurify@3.0.2:
     resolution: {integrity: sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==}
@@ -2961,6 +4015,10 @@ packages:
       '@types/json-schema': 7.0.11
     dev: true
 
+  /@types/estree@0.0.39:
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+    dev: true
+
   /@types/estree@0.0.51:
     resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
     dev: true
@@ -2969,6 +4027,14 @@ packages:
     resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
     dev: true
 
+  /@types/express-serve-static-core@4.17.31:
+    resolution: {integrity: sha512-DxMhY+NAsTwMMFHBTtJFNp5qiHKJ7TeqOo23zVEM9alT1Ml27Q3xcTH0xwxn7Q0BbMcVEJOs/7aQtUWupUQN3Q==}
+    dependencies:
+      '@types/node': 18.16.0
+      '@types/qs': 6.9.7
+      '@types/range-parser': 1.2.4
+    dev: true
+
   /@types/express-serve-static-core@4.17.33:
     resolution: {integrity: sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==}
     dependencies:
@@ -2981,7 +4047,7 @@ packages:
     resolution: {integrity: sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==}
     dependencies:
       '@types/body-parser': 1.19.2
-      '@types/express-serve-static-core': 4.17.33
+      '@types/express-serve-static-core': 4.17.31
       '@types/qs': 6.9.7
       '@types/serve-static': 1.15.0
     dev: true
@@ -3064,11 +4130,7 @@ packages:
   /@types/lodash-es@4.17.7:
     resolution: {integrity: sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==}
     dependencies:
-      '@types/lodash': 4.14.188
-    dev: true
-
-  /@types/lodash@4.14.188:
-    resolution: {integrity: sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w==}
+      '@types/lodash': 4.14.194
     dev: true
 
   /@types/lodash@4.14.194:
@@ -3092,7 +4154,6 @@ packages:
     resolution: {integrity: sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==}
     dependencies:
       '@types/unist': 2.0.6
-    dev: true
 
   /@types/mdurl@1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
@@ -3114,7 +4175,6 @@ packages:
 
   /@types/ms@0.7.31:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
-    dev: true
 
   /@types/node-fetch@2.6.2:
     resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
@@ -3139,10 +4199,6 @@ packages:
     resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==}
     dev: true
 
-  /@types/prop-types@15.7.5:
-    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
-    dev: false
-
   /@types/qs@6.9.7:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
     dev: true
@@ -3151,13 +4207,11 @@ packages:
     resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
     dev: true
 
-  /@types/react@18.0.33:
-    resolution: {integrity: sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==}
+  /@types/resolve@1.17.1:
+    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.2
-    dev: false
+      '@types/node': 18.16.0
+    dev: true
 
   /@types/responselike@1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
@@ -3176,10 +4230,6 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@types/scheduler@0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-    dev: false
-
   /@types/semver@7.3.12:
     resolution: {integrity: sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A==}
     dev: true
@@ -3187,7 +4237,7 @@ packages:
   /@types/serve-index@1.9.1:
     resolution: {integrity: sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==}
     dependencies:
-      '@types/express': 4.17.17
+      '@types/express': 4.17.14
     dev: true
 
   /@types/serve-static@1.15.0:
@@ -3229,7 +4279,6 @@ packages:
 
   /@types/unist@2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
-    dev: true
 
   /@types/uuid@9.0.1:
     resolution: {integrity: sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==}
@@ -3237,6 +4286,10 @@ packages:
 
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    dev: false
+
+  /@types/web-bluetooth@0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: true
 
   /@types/ws@8.5.3:
@@ -3290,7 +4343,7 @@ packages:
       grapheme-splitter: 1.0.4
       ignore: 5.2.0
       natural-compare-lite: 1.4.0
-      semver: 7.5.0
+      semver: 7.3.8
       tsutils: 3.21.0(typescript@5.0.4)
       typescript: 5.0.4
     transitivePeerDependencies:
@@ -3364,7 +4417,7 @@ packages:
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.5.0
+      semver: 7.3.8
       tsutils: 3.21.0(typescript@5.0.4)
       typescript: 5.0.4
     transitivePeerDependencies:
@@ -3385,7 +4438,7 @@ packages:
       '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4)
       eslint: 8.39.0
       eslint-scope: 5.1.1
-      semver: 7.5.0
+      semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -3399,73 +4452,286 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@vitejs/plugin-vue@4.1.0(vite@4.2.2)(vue@3.2.47):
-    resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
+  /@unocss/astro@0.52.0(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-vgEOFj+q4DY1F0kwqydbaNQjZSSYBqCV8eiE5ZpRfhQ+k0S71e7yudgYW5Np2sYBbih7v57GKnuQDwno3M6yDQ==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      '@unocss/reset': 0.52.0
+      '@unocss/vite': 0.52.0(rollup@2.79.1)(vite@4.3.3)
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
+  /@unocss/cli@0.52.0(rollup@2.79.1):
+    resolution: {integrity: sha512-IVj8IDT2M1w7mux2m7HY4/rwmfumYxaEIkpDkHGPgZcUVzXaOenNvbun1Q4oDZ2oFKytTJqGNSieavugfmlrjA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.52.0
+      '@unocss/core': 0.52.0
+      '@unocss/preset-uno': 0.52.0
+      cac: 6.7.14
+      chokidar: 3.5.3
+      colorette: 2.0.20
+      consola: 3.1.0
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      pathe: 1.1.0
+      perfect-debounce: 1.0.0
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@unocss/config@0.52.0:
+    resolution: {integrity: sha512-RbkFTAoPXPa0oXB/MuS+d0FOF4jXQHA7lm9D4zmKyrlTyPGBlzO/o4aPF9Z9tJUVjG0SRaSU3ZBQ2ZqTZK9P3Q==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.52.0
+      unconfig: 0.3.7
+    dev: true
+
+  /@unocss/core@0.52.0:
+    resolution: {integrity: sha512-MGyG1LpiVtyrHmWmXiDRnf7j+JaJua14K058FGBAhNSLaG37dG6xIfwPuVDBOqEI8EgICmNTJs1T/ImQJYWxtw==}
+    dev: true
+
+  /@unocss/extractor-arbitrary-variants@0.52.0:
+    resolution: {integrity: sha512-wJ7a9NWVywHwjWMeB8wN9PHl0fhwOcvAgmhDkyY7A9wXSazaecSMLbKrcnQe7q5bOFGvn5jyxYkk78XZqLWgyg==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/inspector@0.52.0:
+    resolution: {integrity: sha512-oGMLht4hEBypglrLeNQWy8JBTvRyX3fdrtYChZpwjYTVsVC1SdF1m0ZjaPt7YQybZ+D4DG7bVCHYqxLgAFq5jw==}
+    dependencies:
+      gzip-size: 6.0.0
+      sirv: 2.0.3
+    dev: true
+
+  /@unocss/postcss@0.52.0(postcss@8.4.23):
+    resolution: {integrity: sha512-1KzpQlcMrLV0ZSbP+pNYuvXg/1+8c2HNKHBBEbzlsXI7G+f4IJPsxtYXE3N2HVIkEjxumcMrxV8dqXhcBLQShA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      '@unocss/config': 0.52.0
+      '@unocss/core': 0.52.0
+      css-tree: 2.3.1
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      postcss: 8.4.23
+    dev: true
+
+  /@unocss/preset-attributify@0.52.0:
+    resolution: {integrity: sha512-5szz/NpviigXGCW2a1TnOhac+3akdx+zAWgHWaLJRpDzq8WuJyaNfN1603sEAyseUoTRjxq+P5fzxCrcvhPEGg==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/preset-icons@0.52.0:
+    resolution: {integrity: sha512-GSDQIBXkK6rfJHT3SvbJExLoAddj93fC5DHS4eE3a6fne/NdQhFvbkhAZ5iPr4UZmMoJQOyAkkhuWD3PMSBjqw==}
+    dependencies:
+      '@iconify/utils': 2.1.5
+      '@unocss/core': 0.52.0
+      ofetch: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/preset-mini@0.52.0:
+    resolution: {integrity: sha512-P4mQimuZ+yLba2FN3+hKA7anBvjypmEgNof/LdPhTydv138zlhDVly7KlYADISt7QPNIVaGD3U34HLKtgyfBmQ==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      '@unocss/extractor-arbitrary-variants': 0.52.0
+    dev: true
+
+  /@unocss/preset-tagify@0.52.0:
+    resolution: {integrity: sha512-J4VOZG1ooBdMS2qGqqz9C7g49WpTrB3wnnq7Ph/td2/faQpRIZm1HYgXtWVsROlGvIaZWYOSOas9aX/WLZ6I2A==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/preset-typography@0.52.0:
+    resolution: {integrity: sha512-lyMDe/vz9C18V//sieKVjIrkaiJwrY3PMPQtA8Nh233Ki+jnD6ymrEmDXKEHQeNorA2HsEqpmhS+B+g0waLjwA==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      '@unocss/preset-mini': 0.52.0
+    dev: true
+
+  /@unocss/preset-uno@0.52.0:
+    resolution: {integrity: sha512-0pZH0gUJ4hug6B0xV03VNi74GjW49UlnSjwK3xBL6la7WzrgQ+E/mD6CVKxB9Qa0Sfc9qZg8IvVuI97/msdkOA==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      '@unocss/preset-mini': 0.52.0
+      '@unocss/preset-wind': 0.52.0
+    dev: true
+
+  /@unocss/preset-web-fonts@0.52.0:
+    resolution: {integrity: sha512-JbHCKwt5KHpntE7CJMYcOaZ5c/KWIIU+96pTTRTOVM9c9ssozwS575BzWH+pD43fJ864W566gtu5R9mR03j2mg==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      ofetch: 1.0.1
+    dev: true
+
+  /@unocss/preset-wind@0.52.0:
+    resolution: {integrity: sha512-y+x+MnXYwcKvPepjK9rbCwp3yiOiXv9XOO5T9YAHdzwrpfAOTjXOAhmW3XAFz2sODoy2xliLYQXsxthyzpf/7w==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      '@unocss/preset-mini': 0.52.0
+    dev: true
+
+  /@unocss/reset@0.52.0:
+    resolution: {integrity: sha512-hRdgzpxWkDriRneLCv8cRNWBVNJ9FQVLY6jLk7C3MMaab0FH9JufdNwRw/yiqtEEhnnT2GF8IfN3HY69T01tNw==}
+    dev: true
+
+  /@unocss/scope@0.52.0:
+    resolution: {integrity: sha512-pGTBHdSWGzrcz/QnK4Dd8GUo0a1W3QbRNrIy8L0dgsI9QEBxSiAppiMMnnJZrQwUGDGy5DjkaCksOEArA28fCg==}
+    dev: true
+
+  /@unocss/transformer-attributify-jsx-babel@0.52.0:
+    resolution: {integrity: sha512-DWhIFMGpyr/H9A3nmwj0kvilx9FYtNmEnSh5k5hPnOvfgp5TDjgt5LDy63ee3JaOsSsAhiDWKwQxkrF60wcspQ==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/transformer-attributify-jsx@0.52.0:
+    resolution: {integrity: sha512-cPGIsp1GsSBBm/3ST1TM1VlWhcUf1vX9EgROpzSopRNHDp3zWFIM8OtcAuywzGpgm3wdKi0412WrNdf0ncDVtQ==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/transformer-compile-class@0.52.0:
+    resolution: {integrity: sha512-dk4Ory57Pj7QvrvPdtUsPln5RX8qgFp8ZtFDQvjHNpARz7cr5RBL7Fw3yKrcne6HQi+Bee/i715yrFHut3OXgg==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/transformer-directives@0.52.0:
+    resolution: {integrity: sha512-Epi5Lt1rMl8RgR2InlRw7ddNcUXekiZl+qEEmb2rAHPnROWMNbJB5gCxk9YzczD+8vIgmFUqacMEqEzOUZdpSQ==}
+    dependencies:
+      '@unocss/core': 0.52.0
+      css-tree: 2.3.1
+    dev: true
+
+  /@unocss/transformer-variant-group@0.52.0:
+    resolution: {integrity: sha512-r+StO8aU+O22mIa1ALuGUxiFvGZf9MLIqriOG7qbjiUOgq6shzHKUsHyxRyTG7c597eTxcs6lwr9XKkLxuEVBw==}
+    dependencies:
+      '@unocss/core': 0.52.0
+    dev: true
+
+  /@unocss/vite@0.52.0(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-Ip2Jyu7dywqEsy3EacnItE+VXB77R72mQ9oA6TyrZpov5ZKoS327kqQSzHS/lYXzZ2yomFq9EsqbKQWIEInH9Q==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.52.0
+      '@unocss/core': 0.52.0
+      '@unocss/inspector': 0.52.0
+      '@unocss/scope': 0.52.0
+      '@unocss/transformer-directives': 0.52.0
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      vite: 4.3.3
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@vite-pwa/vitepress@0.0.5(vite-plugin-pwa@0.15.0):
+    resolution: {integrity: sha512-B6xy9wxi9fen+/AnRkY2+XCrbhqh2b/TsVTka6qFQ3zJ8zHSoEUHUucYT3KHMcY5I124G0ZmPKNW+UF9Jx1k4w==}
+    peerDependencies:
+      vite-plugin-pwa: ^0.14.0
+    dependencies:
+      vite-plugin-pwa: 0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
+    dev: true
+
+  /@vitejs/plugin-vue@4.2.1(vite@4.3.3)(vue@3.2.47):
+    resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.2.2
+      vite: 4.3.3
       vue: 3.2.47
     dev: true
 
-  /@vitest/coverage-c8@0.30.1(vitest@0.30.1):
-    resolution: {integrity: sha512-/Wa3dtSuckpdngAmiCwowaEXXgJkqPrtfvrs9HTB9QoEfNbZWPu4E4cjEn4lJZb4qcGf4fxFtUA2f9DnDNAzBA==}
+  /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
+    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.3.8
+      vue: 3.3.4
+    dev: true
+
+  /@vitest/coverage-c8@0.31.0(vitest@0.31.0):
+    resolution: {integrity: sha512-h72qN1D962AO7UefQVulm9JFP5ACS7OfhCdBHioXU8f7ohH/+NTZCgAqmgcfRNHHO/8wLFxx+93YVxhodkEJVA==}
     peerDependencies:
       vitest: '>=0.30.0 <1'
     dependencies:
+      '@ampproject/remapping': 2.2.1
       c8: 7.13.0
+      magic-string: 0.30.0
       picocolors: 1.0.0
       std-env: 3.3.2
-      vitest: 0.30.1(@vitest/ui@0.30.1)(jsdom@21.1.1)
+      vitest: 0.31.0(@vitest/ui@0.31.0)(jsdom@21.1.1)
     dev: true
 
-  /@vitest/expect@0.30.1:
-    resolution: {integrity: sha512-c3kbEtN8XXJSeN81iDGq29bUzSjQhjES2WR3aColsS4lPGbivwLtas4DNUe0jD9gg/FYGIteqOenfU95EFituw==}
+  /@vitest/expect@0.31.0:
+    resolution: {integrity: sha512-Jlm8ZTyp6vMY9iz9Ny9a0BHnCG4fqBa8neCF6Pk/c/6vkUk49Ls6UBlgGAU82QnzzoaUs9E/mUhq/eq9uMOv/g==}
     dependencies:
-      '@vitest/spy': 0.30.1
-      '@vitest/utils': 0.30.1
+      '@vitest/spy': 0.31.0
+      '@vitest/utils': 0.31.0
       chai: 4.3.7
     dev: true
 
-  /@vitest/runner@0.30.1:
-    resolution: {integrity: sha512-W62kT/8i0TF1UBCNMRtRMOBWJKRnNyv9RrjIgdUryEe0wNpGZvvwPDLuzYdxvgSckzjp54DSpv1xUbv4BQ0qVA==}
+  /@vitest/runner@0.31.0:
+    resolution: {integrity: sha512-H1OE+Ly7JFeBwnpHTrKyCNm/oZgr+16N4qIlzzqSG/YRQDATBYmJb/KUn3GrZaiQQyL7GwpNHVZxSQd6juLCgw==}
     dependencies:
-      '@vitest/utils': 0.30.1
+      '@vitest/utils': 0.31.0
       concordance: 5.0.4
       p-limit: 4.0.0
       pathe: 1.1.0
     dev: true
 
-  /@vitest/snapshot@0.30.1:
-    resolution: {integrity: sha512-fJZqKrE99zo27uoZA/azgWyWbFvM1rw2APS05yB0JaLwUIg9aUtvvnBf4q7JWhEcAHmSwbrxKFgyBUga6tq9Tw==}
+  /@vitest/snapshot@0.31.0:
+    resolution: {integrity: sha512-5dTXhbHnyUMTMOujZPB0wjFjQ6q5x9c8TvAsSPUNKjp1tVU7i9pbqcKPqntyu2oXtmVxKbuHCqrOd+Ft60r4tg==}
     dependencies:
       magic-string: 0.30.0
       pathe: 1.1.0
       pretty-format: 27.5.1
     dev: true
 
-  /@vitest/spy@0.30.1:
-    resolution: {integrity: sha512-YfJeIf37GvTZe04ZKxzJfnNNuNSmTEGnla2OdL60C8od16f3zOfv9q9K0nNii0NfjDJRt/CVN/POuY5/zTS+BA==}
+  /@vitest/spy@0.31.0:
+    resolution: {integrity: sha512-IzCEQ85RN26GqjQNkYahgVLLkULOxOm5H/t364LG0JYb3Apg0PsYCHLBYGA006+SVRMWhQvHlBBCyuByAMFmkg==}
     dependencies:
       tinyspy: 2.1.0
     dev: true
 
-  /@vitest/ui@0.30.1:
-    resolution: {integrity: sha512-Izz4ElDmdvX02KImSC2nCJI6CsGo9aETbKqxli55M0rbbPPAMtF0zDcJIqgEP5V6Y+4Ysf6wvsjLbLCTnaBvKw==}
+  /@vitest/ui@0.31.0(vitest@0.31.0):
+    resolution: {integrity: sha512-Dy86l6r3/dbJposgm7w+oqb/15UWJ0lDBbEQaS1ived3+0CTaMbT8OMkUf9vNBkSL47kvBHEBnZLa5fw5i9gUQ==}
+    peerDependencies:
+      vitest: '>=0.30.1 <1'
     dependencies:
-      '@vitest/utils': 0.30.1
+      '@vitest/utils': 0.31.0
       fast-glob: 3.2.12
       fflate: 0.7.4
       flatted: 3.2.7
       pathe: 1.1.0
       picocolors: 1.0.0
       sirv: 2.0.2
+      vitest: 0.31.0(@vitest/ui@0.31.0)(jsdom@21.1.1)
     dev: true
 
-  /@vitest/utils@0.30.1:
-    resolution: {integrity: sha512-/c8Xv2zUVc+rnNt84QF0Y0zkfxnaGhp87K2dYJMLtLOIckPzuxLVzAtFCicGFdB4NeBHNzTRr1tNn7rCtQcWFA==}
+  /@vitest/utils@0.31.0:
+    resolution: {integrity: sha512-kahaRyLX7GS1urekRXN2752X4gIgOGVX4Wo8eDUGUkTWlGpXzf5ZS6N9RUUS+Re3XEE8nVGqNyxkSxF5HXlGhQ==}
     dependencies:
       concordance: 5.0.4
       loupe: 2.3.6
@@ -3475,10 +4741,18 @@ packages:
   /@vue/compiler-core@3.2.47:
     resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
     dependencies:
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.21.8
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       source-map: 0.6.1
+
+  /@vue/compiler-core@3.3.4:
+    resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
+    dependencies:
+      '@babel/parser': 7.21.8
+      '@vue/shared': 3.3.4
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
     dev: true
 
   /@vue/compiler-dom@3.2.47:
@@ -3486,12 +4760,18 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.2.47
       '@vue/shared': 3.2.47
+
+  /@vue/compiler-dom@3.3.4:
+    resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
+    dependencies:
+      '@vue/compiler-core': 3.3.4
+      '@vue/shared': 3.3.4
     dev: true
 
   /@vue/compiler-sfc@3.2.47:
     resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
     dependencies:
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.21.2
       '@vue/compiler-core': 3.2.47
       '@vue/compiler-dom': 3.2.47
       '@vue/compiler-ssr': 3.2.47
@@ -3499,8 +4779,22 @@ packages:
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.21
+      postcss: 8.4.23
       source-map: 0.6.1
+
+  /@vue/compiler-sfc@3.3.4:
+    resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
+    dependencies:
+      '@babel/parser': 7.21.8
+      '@vue/compiler-core': 3.3.4
+      '@vue/compiler-dom': 3.3.4
+      '@vue/compiler-ssr': 3.3.4
+      '@vue/reactivity-transform': 3.3.4
+      '@vue/shared': 3.3.4
+      estree-walker: 2.0.2
+      magic-string: 0.30.0
+      postcss: 8.4.23
+      source-map-js: 1.0.2
     dev: true
 
   /@vue/compiler-ssr@3.2.47:
@@ -3508,6 +4802,12 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.2.47
       '@vue/shared': 3.2.47
+
+  /@vue/compiler-ssr@3.3.4:
+    resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.3.4
+      '@vue/shared': 3.3.4
     dev: true
 
   /@vue/devtools-api@6.5.0:
@@ -3517,17 +4817,31 @@ packages:
   /@vue/reactivity-transform@3.2.47:
     resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
     dependencies:
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.21.8
       '@vue/compiler-core': 3.2.47
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       magic-string: 0.25.9
+
+  /@vue/reactivity-transform@3.3.4:
+    resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
+    dependencies:
+      '@babel/parser': 7.21.8
+      '@vue/compiler-core': 3.3.4
+      '@vue/shared': 3.3.4
+      estree-walker: 2.0.2
+      magic-string: 0.30.0
     dev: true
 
   /@vue/reactivity@3.2.47:
     resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
     dependencies:
       '@vue/shared': 3.2.47
+
+  /@vue/reactivity@3.3.4:
+    resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
+    dependencies:
+      '@vue/shared': 3.3.4
     dev: true
 
   /@vue/runtime-core@3.2.47:
@@ -3535,6 +4849,12 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.47
       '@vue/shared': 3.2.47
+
+  /@vue/runtime-core@3.3.4:
+    resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
+    dependencies:
+      '@vue/reactivity': 3.3.4
+      '@vue/shared': 3.3.4
     dev: true
 
   /@vue/runtime-dom@3.2.47:
@@ -3543,6 +4863,13 @@ packages:
       '@vue/runtime-core': 3.2.47
       '@vue/shared': 3.2.47
       csstype: 2.6.21
+
+  /@vue/runtime-dom@3.3.4:
+    resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
+    dependencies:
+      '@vue/runtime-core': 3.3.4
+      '@vue/shared': 3.3.4
+      csstype: 3.1.2
     dev: true
 
   /@vue/server-renderer@3.2.47(vue@3.2.47):
@@ -3553,35 +4880,122 @@ packages:
       '@vue/compiler-ssr': 3.2.47
       '@vue/shared': 3.2.47
       vue: 3.2.47
+
+  /@vue/server-renderer@3.3.4(vue@3.3.4):
+    resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
+    peerDependencies:
+      vue: 3.3.4
+    dependencies:
+      '@vue/compiler-ssr': 3.3.4
+      '@vue/shared': 3.3.4
+      vue: 3.3.4
     dev: true
 
   /@vue/shared@3.2.47:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
+
+  /@vue/shared@3.3.4:
+    resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
     dev: true
 
-  /@vueuse/core@10.0.2(vue@3.2.47):
-    resolution: {integrity: sha512-/UGc2cXbxbeIFLDSJyHUjI9QZ4CJJkhiJe9TbKNPSofcWmYhhUgJ+7iw9njXTKu/Xc3Z6UeXVR9fosW1+cyrnQ==}
+  /@vueuse/core@10.1.0(vue@3.2.47):
+    resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 10.0.2
-      '@vueuse/shared': 10.0.2(vue@3.2.47)
+      '@vueuse/metadata': 10.1.0
+      '@vueuse/shared': 10.1.0(vue@3.2.47)
       vue-demi: 0.14.0(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: false
+
+  /@vueuse/core@10.1.2(vue@3.3.4):
+    resolution: {integrity: sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.1.2
+      '@vueuse/shared': 10.1.2(vue@3.3.4)
+      vue-demi: 0.14.0(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
     dev: true
 
-  /@vueuse/metadata@10.0.2:
-    resolution: {integrity: sha512-APSjlABrV+Q74c+FR0kFETvcN9W2pAaT3XF3WwqWUuk4srmVxv7DY4WshZxK2KYk1+MVY0Fus6J1Hk/JXVm6Aw==}
+  /@vueuse/integrations@10.1.2(focus-trap@7.4.3)(vue@3.3.4):
+    resolution: {integrity: sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==}
+    peerDependencies:
+      async-validator: '*'
+      axios: '*'
+      change-case: '*'
+      drauu: '*'
+      focus-trap: '*'
+      fuse.js: '*'
+      idb-keyval: '*'
+      jwt-decode: '*'
+      nprogress: '*'
+      qrcode: '*'
+      sortablejs: '*'
+      universal-cookie: '*'
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      sortablejs:
+        optional: true
+      universal-cookie:
+        optional: true
+    dependencies:
+      '@vueuse/core': 10.1.2(vue@3.3.4)
+      '@vueuse/shared': 10.1.2(vue@3.3.4)
+      focus-trap: 7.4.3
+      vue-demi: 0.14.0(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
     dev: true
 
-  /@vueuse/shared@10.0.2(vue@3.2.47):
-    resolution: {integrity: sha512-7W2l6qZaFvla3zAeEVo8hNHkNRKCezJa3JjZAKv3K4KsevXobHhVNr+RHaOVNK/6ETpFmtqiK+0pMIADbHjjag==}
+  /@vueuse/metadata@10.1.0:
+    resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==}
+    dev: false
+
+  /@vueuse/metadata@10.1.2:
+    resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==}
+    dev: true
+
+  /@vueuse/shared@10.1.0(vue@3.2.47):
+    resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
     dependencies:
       vue-demi: 0.14.0(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: false
+
+  /@vueuse/shared@10.1.2(vue@3.3.4):
+    resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==}
+    dependencies:
+      vue-demi: 0.14.0(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
     dev: true
 
   /@wdio/config@7.30.0(typescript@5.0.4):
@@ -3837,12 +5251,12 @@ packages:
       acorn-walk: 8.2.0
     dev: true
 
-  /acorn-import-assertions@1.8.0(acorn@8.8.0):
+  /acorn-import-assertions@1.8.0(acorn@8.8.2):
     resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
     peerDependencies:
       acorn: ^8
     dependencies:
-      acorn: 8.8.0
+      acorn: 8.8.2
     dev: true
 
   /acorn-jsx@5.3.2(acorn@8.8.2):
@@ -3869,12 +5283,6 @@ packages:
     hasBin: true
     dev: true
 
-  /acorn@8.8.0:
-    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
-
   /acorn@8.8.2:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
     engines: {node: '>=0.4.0'}
@@ -4064,6 +5472,10 @@ packages:
       execa: 1.0.0
     dev: true
 
+  /appdata-path@1.0.0:
+    resolution: {integrity: sha512-ZbH3ezXfnT/YE3NdqduIt4lBV+H0ybvA2Qx3K76gIjQvh8gROpDFdDLpx6B1QJtW7zxisCbpTlCLhKqoR8cDBw==}
+    dev: true
+
   /arch@2.2.0:
     resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
     dev: true
@@ -4171,6 +5583,11 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
+  /available-typed-arrays@1.0.5:
+    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /avvio@7.2.5:
     resolution: {integrity: sha512-AOhBxyLVdpOad3TujtC9kL/9r3HnTkxwQ5ggOsYrvvZP1cCFvzHWJd5XxZDFuTn+IN8vkKSG5SEJrd27vCSbeA==}
     dependencies:
@@ -4221,7 +5638,7 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.20.2
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.0
@@ -4234,12 +5651,48 @@ packages:
     resolution: {integrity: sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/template': 7.18.10
-      '@babel/types': 7.19.0
+      '@babel/template': 7.20.7
+      '@babel/types': 7.21.2
       '@types/babel__core': 7.1.19
       '@types/babel__traverse': 7.18.2
     dev: true
 
+  /babel-plugin-polyfill-corejs2@0.3.3(@babel/core@7.12.3):
+    resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.21.0
+      '@babel/core': 7.12.3
+      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.12.3)
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-corejs3@0.6.0(@babel/core@7.12.3):
+    resolution: {integrity: sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.12.3)
+      core-js-compat: 3.28.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-regenerator@0.4.1(@babel/core@7.12.3):
+    resolution: {integrity: sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.12.3)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-preset-current-node-syntax@1.0.1(@babel/core@7.12.3):
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
@@ -4396,15 +5849,15 @@ packages:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
 
-  /browserslist@4.21.4:
-    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
+  /browserslist@4.21.5:
+    resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001431
+      caniuse-lite: 1.0.30001457
       electron-to-chromium: 1.4.284
-      node-releases: 2.0.6
-      update-browserslist-db: 1.0.10(browserslist@4.21.4)
+      node-releases: 2.0.10
+      update-browserslist-db: 1.0.10(browserslist@4.21.5)
     dev: true
 
   /bser@2.1.1:
@@ -4499,7 +5952,7 @@ packages:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
       function-bind: 1.1.1
-      get-intrinsic: 1.1.3
+      get-intrinsic: 1.2.0
     dev: true
 
   /callsites@3.1.0:
@@ -4536,8 +5989,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite@1.0.30001431:
-    resolution: {integrity: sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==}
+  /caniuse-lite@1.0.30001457:
+    resolution: {integrity: sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==}
     dev: true
 
   /caseless@0.12.0:
@@ -4623,7 +6076,6 @@ packages:
 
   /character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
-    dev: true
 
   /character-reference-invalid@1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
@@ -4811,6 +6263,10 @@ packages:
     resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
     dev: true
 
+  /colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    dev: true
+
   /colors@0.5.1:
     resolution: {integrity: sha512-XjsuUwpDeY98+yz959OlUK6m7mLBM+1MEG5oaenfuQnNnrQk1WvtcvFgN3FNDP3f2NmZ211t0mNEfSEN1h0eIg==}
     engines: {node: '>=0.1.90'}
@@ -4902,7 +6358,7 @@ packages:
     dev: true
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
   /concordance@5.0.4:
@@ -4932,7 +6388,7 @@ packages:
       spawn-command: 0.0.2-1
       supports-color: 8.1.1
       tree-kill: 1.2.2
-      yargs: 17.7.1
+      yargs: 17.7.2
     dev: true
 
   /configstore@5.0.1:
@@ -4952,6 +6408,10 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /consola@3.1.0:
+    resolution: {integrity: sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==}
+    dev: true
+
   /content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -5013,6 +6473,12 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /core-js-compat@3.28.0:
+    resolution: {integrity: sha512-myzPgE7QodMg4nnd3K1TDoES/nADRStM8Gpz0D6nhkwbmwEnE0ZGJgoWsvQ722FR8D7xS0n0LV556RcEicjTyg==}
+    dependencies:
+      browserslist: 4.21.5
+    dev: true
+
   /core-util-is@1.0.2:
     resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
     dev: true
@@ -5041,7 +6507,7 @@ packages:
       layout-base: 2.0.1
     dev: false
 
-  /cosmiconfig-typescript-loader@4.1.0(@types/node@18.16.0)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@5.0.4):
+  /cosmiconfig-typescript-loader@4.1.0(@types/node@18.16.0)(cosmiconfig@8.0.0)(ts-node@10.9.1)(typescript@5.0.4):
     resolution: {integrity: sha512-HbWIuR5O+XO5Oj9SZ5bzgrD4nN+rfhrm2PMb0FVx+t+XIvC45n8F0oTNnztXtspWGw0i2IzHaUWFD5LzV1JB4A==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -5051,7 +6517,7 @@ packages:
       typescript: '>=3'
     dependencies:
       '@types/node': 18.16.0
-      cosmiconfig: 8.1.3
+      cosmiconfig: 8.0.0
       ts-node: 10.9.1(@types/node@18.16.0)(typescript@5.0.4)
       typescript: 5.0.4
     dev: true
@@ -5066,16 +6532,6 @@ packages:
       path-type: 4.0.0
     dev: true
 
-  /cosmiconfig@8.1.3:
-    resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==}
-    engines: {node: '>=14'}
-    dependencies:
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-    dev: true
-
   /coveralls@3.1.1:
     resolution: {integrity: sha512-+dxnG2NHncSD1NrqbSM3dn/lE57O6Qf/koe9+I7c+wzkqRmEvcp0kgJdxKInzYzkICKkFMZsX3Vct3++tsF9ww==}
     engines: {node: '>=6'}
@@ -5252,7 +6708,7 @@ packages:
       file-entry-cache: 6.0.1
       get-stdin: 8.0.0
       imurmurhash: 0.1.4
-      semver: 7.5.0
+      semver: 7.3.8
       strip-ansi: 6.0.1
       vscode-uri: 3.0.7
     transitivePeerDependencies:
@@ -5301,11 +6757,10 @@ packages:
 
   /csstype@2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
-    dev: true
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
+    dev: true
 
   /cypress-image-snapshot@4.0.1(cypress@12.10.0)(jest@29.5.0):
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
@@ -5367,7 +6822,7 @@ packages:
       pretty-bytes: 5.6.0
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
-      semver: 7.5.0
+      semver: 7.3.8
       supports-color: 8.1.1
       tmp: 0.2.1
       untildify: 4.0.0
@@ -5750,7 +7205,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /debug@4.3.4(supports-color@8.1.1):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -5791,7 +7245,6 @@ packages:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
     dependencies:
       character-entities: 2.0.2
-    dev: true
 
   /decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
@@ -5837,6 +7290,18 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /define-properties@1.2.0:
+    resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-property-descriptors: 1.0.0
+      object-keys: 1.1.1
+    dev: true
+
+  /defu@6.1.2:
+    resolution: {integrity: sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==}
+    dev: true
+
   /degenerator@3.0.2:
     resolution: {integrity: sha512-c0mef3SNQo56t6urUU6tdQAs+ThoD0o9B9MJ8HEt7NQcGEILCRFqQb7ZbP9JAv+QF1Ky5plydhMR/IrqWDm+TQ==}
     engines: {node: '>= 6'}
@@ -5871,6 +7336,9 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
+
+  /destr@1.2.2:
+    resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
     dev: true
 
   /destroy@1.2.0:
@@ -5900,7 +7368,6 @@ packages:
   /diff@5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
-    dev: true
 
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -5953,8 +7420,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify@3.0.2:
-    resolution: {integrity: sha512-B8c6JdiEpxAKnd8Dm++QQxJL4lfuc757scZtcapj6qjTjrQzyq5iAyznLKVvK+77eYNiFblHBlt7MM0fOeqoKw==}
+  /dompurify@3.0.3:
+    resolution: {integrity: sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==}
     dev: false
 
   /domutils@3.0.1:
@@ -6000,6 +7467,14 @@ packages:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
 
+  /ejs@3.1.8:
+    resolution: {integrity: sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    dependencies:
+      jake: 10.8.5
+    dev: true
+
   /electron-to-chromium@1.4.284:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
     dev: true
@@ -6075,10 +7550,67 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
+  /es-abstract@1.21.1:
+    resolution: {integrity: sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      es-set-tostringtag: 2.0.1
+      es-to-primitive: 1.2.1
+      function-bind: 1.1.1
+      function.prototype.name: 1.1.5
+      get-intrinsic: 1.2.0
+      get-symbol-description: 1.0.0
+      globalthis: 1.0.3
+      gopd: 1.0.1
+      has: 1.0.3
+      has-property-descriptors: 1.0.0
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      internal-slot: 1.0.5
+      is-array-buffer: 3.0.1
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-typed-array: 1.1.10
+      is-weakref: 1.0.2
+      object-inspect: 1.12.3
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.4.3
+      safe-regex-test: 1.0.0
+      string.prototype.trimend: 1.0.6
+      string.prototype.trimstart: 1.0.6
+      typed-array-length: 1.0.4
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.9
+    dev: true
+
   /es-module-lexer@0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
     dev: true
 
+  /es-set-tostringtag@2.0.1:
+    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.0
+      has: 1.0.3
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /es-to-primitive@1.2.1:
+    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.0.5
+      is-symbol: 1.0.4
+    dev: true
+
   /esbuild@0.17.18:
     resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==}
     engines: {node: '>=12'}
@@ -6304,7 +7836,7 @@ packages:
       regexp-tree: 0.1.24
       regjsparser: 0.9.1
       safe-regex: 2.1.1
-      semver: 7.5.0
+      semver: 7.3.8
       strip-indent: 3.0.0
     dev: true
 
@@ -6324,11 +7856,6 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-visitor-keys@3.3.0:
-    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /eslint-visitor-keys@3.4.0:
     resolution: {integrity: sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6433,9 +7960,12 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /estree-walker@1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+    dev: true
+
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: true
 
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
@@ -6775,6 +8305,12 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /filelist@1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -6861,6 +8397,12 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
+  /focus-trap@7.4.3:
+    resolution: {integrity: sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==}
+    dependencies:
+      tabbable: 6.1.2
+    dev: true
+
   /follow-redirects@1.15.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -6883,6 +8425,12 @@ packages:
       debug: 4.3.4
     dev: true
 
+  /for-each@0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
+
   /foreground-child@2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
     engines: {node: '>=8.0.0'}
@@ -7014,6 +8562,20 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /function.prototype.name@1.1.5:
+    resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.21.1
+      functions-have-names: 1.2.3
+    dev: true
+
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: true
+
   /gensequence@5.0.2:
     resolution: {integrity: sha512-JlKEZnFc6neaeSVlkzBGGgkIoIaSxMgvdamRoPN8r3ozm2r9dusqxeKqYQ7lhzmj2UhFQP8nkyfCaiLQxiLrDA==}
     engines: {node: '>=14'}
@@ -7033,14 +8595,18 @@ packages:
     resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
     dev: true
 
-  /get-intrinsic@1.1.3:
-    resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==}
+  /get-intrinsic@1.2.0:
+    resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==}
     dependencies:
       function-bind: 1.1.1
       has: 1.0.3
       has-symbols: 1.0.3
     dev: true
 
+  /get-own-enumerable-property-symbols@3.0.2:
+    resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
+    dev: true
+
   /get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -7075,6 +8641,14 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /get-symbol-description@1.0.0:
+    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+    dev: true
+
   /get-uri@3.0.2:
     resolution: {integrity: sha512-+5s0SJbGoyiJTZZ2JTpFPLMPSch72KEqGOTvQsBqg0RBWvwhWUSYZFAtz3TPW0GXJuLBJPts1E241iHg+VRfhg==}
     engines: {node: '>= 6'}
@@ -7131,14 +8705,13 @@ packages:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
     dev: true
 
-  /glob@10.2.1:
-    resolution: {integrity: sha512-ngom3wq2UhjdbmRE/krgkD8BQyi1KZ5l+D2dVm4+Yj+jJIBp74/ZGunL6gNGc/CYuQmvUBiavWEXIotRiv5R6A==}
+  /glob@10.2.2:
+    resolution: {integrity: sha512-Xsa0BcxIC6th9UwNjZkhrMtNo/MnyRL8jGCP+uEwhA5oFOCY1f2s1/oNKY47xQ0Bg5nkjsfAEIej1VeH62bDDQ==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
     dependencies:
       foreground-child: 3.1.1
-      fs.realpath: 1.0.0
-      jackspeak: 2.0.3
+      jackspeak: 2.1.1
       minimatch: 9.0.0
       minipass: 5.0.0
       path-scurry: 1.7.0
@@ -7162,7 +8735,7 @@ packages:
       fs.realpath: 1.0.0
       inflight: 1.0.6
       inherits: 2.0.4
-      minimatch: 5.1.0
+      minimatch: 5.1.6
       once: 1.4.0
     dev: true
 
@@ -7192,6 +8765,13 @@ packages:
       type-fest: 0.20.2
     dev: true
 
+  /globalthis@1.0.3:
+    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.2.0
+    dev: true
+
   /globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
     dev: true
@@ -7227,6 +8807,12 @@ packages:
     resolution: {integrity: sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==}
     dev: true
 
+  /gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.2.0
+    dev: true
+
   /got@11.8.5:
     resolution: {integrity: sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==}
     engines: {node: '>=10.19.0'}
@@ -7252,6 +8838,13 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
+  /gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
   /handle-thing@2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: true
@@ -7295,6 +8888,10 @@ packages:
       ansi-regex: 2.1.1
     dev: true
 
+  /has-bigints@1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+    dev: true
+
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -7310,11 +8907,29 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /has-property-descriptors@1.0.0:
+    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+    dependencies:
+      get-intrinsic: 1.2.0
+    dev: true
+
+  /has-proto@1.0.1:
+    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /has-symbols@1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
     dev: true
 
+  /has-tostringtag@1.0.0:
+    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
   /has@1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
@@ -7481,6 +9096,20 @@ packages:
       resolve-alpn: 1.2.1
     dev: true
 
+  /https-localhost@4.7.1:
+    resolution: {integrity: sha512-rl+NFV0l67/0W7fZwk4LB5gS6HdhtSFLpCpf1N+KD5WQAXtPXX1QE8H0cP8VNJii18rtpTkE9eAHdUfJ0goAnQ==}
+    hasBin: true
+    dependencies:
+      appdata-path: 1.0.0
+      compression: 1.7.4
+      cors: 2.8.5
+      express: 4.18.2
+      spdy: 4.0.2
+      uglify-js: 3.17.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -7525,6 +9154,10 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
+  /idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+    dev: true
+
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -7599,6 +9232,15 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     dev: true
 
+  /internal-slot@1.0.5:
+    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.0
+      has: 1.0.3
+      side-channel: 1.0.4
+    dev: true
+
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -7638,10 +9280,24 @@ packages:
       is-decimal: 1.0.4
     dev: true
 
+  /is-array-buffer@3.0.1:
+    resolution: {integrity: sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+      is-typed-array: 1.1.10
+    dev: true
+
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-bigint@1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.2
+    dev: true
+
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -7649,6 +9305,14 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
+  /is-boolean-object@1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: true
+
   /is-buffer@2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
@@ -7661,6 +9325,11 @@ packages:
       builtin-modules: 3.3.0
     dev: true
 
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /is-ci@3.0.1:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
@@ -7674,6 +9343,13 @@ packages:
       has: 1.0.3
     dev: true
 
+  /is-date-object@1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
   /is-decimal@1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
     dev: true
@@ -7728,11 +9404,32 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
+  /is-negative-zero@2.0.2:
+    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-number-object@1.0.7:
+    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /is-obj@1.0.1:
+    resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /is-obj@2.0.0:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
     engines: {node: '>=8'}
@@ -7769,6 +9466,25 @@ packages:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
+  /is-regex@1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-regexp@1.0.0:
+    resolution: {integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-shared-array-buffer@1.0.2:
+    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
+    dependencies:
+      call-bind: 1.0.2
+    dev: true
+
   /is-stream@1.1.0:
     resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==}
     engines: {node: '>=0.10.0'}
@@ -7784,6 +9500,20 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /is-string@1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-symbol@1.0.4:
+    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
   /is-text-path@1.0.1:
     resolution: {integrity: sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==}
     engines: {node: '>=0.10.0'}
@@ -7791,6 +9521,17 @@ packages:
       text-extensions: 1.9.0
     dev: true
 
+  /is-typed-array@1.1.10:
+    resolution: {integrity: sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+    dev: true
+
   /is-typedarray@1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
     dev: true
@@ -7800,6 +9541,12 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /is-weakref@1.0.2:
+    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+    dependencies:
+      call-bind: 1.0.2
+    dev: true
+
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -7838,7 +9585,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.21.8
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.0
@@ -7882,15 +9629,26 @@ packages:
       plist: 3.0.6
     dev: true
 
-  /jackspeak@2.0.3:
-    resolution: {integrity: sha512-0Jud3OMUdMbrlr3PyUMKESq51LXVAB+a239Ywdvd+Kgxj3MaBRml/nVRxf8tQFyfthMjuRkxkv7Vg58pmIMfuQ==}
+  /jackspeak@2.1.1:
+    resolution: {integrity: sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==}
     engines: {node: '>=14'}
     dependencies:
-      cliui: 7.0.4
+      cliui: 8.0.1
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
     dev: true
 
+  /jake@10.8.5:
+    resolution: {integrity: sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      async: 3.2.4
+      chalk: 4.1.2
+      filelist: 1.0.4
+      minimatch: 3.1.2
+    dev: true
+
   /jest-changed-files@29.5.0:
     resolution: {integrity: sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7920,7 +9678,7 @@ packages:
       jest-util: 29.5.0
       p-limit: 3.1.0
       pretty-format: 29.5.0
-      pure-rand: 6.0.1
+      pure-rand: 6.0.2
       slash: 3.0.0
       stack-utils: 2.0.5
     transitivePeerDependencies:
@@ -7948,7 +9706,7 @@ packages:
       jest-util: 29.5.0
       jest-validate: 29.5.0
       prompts: 2.4.2
-      yargs: 17.7.1
+      yargs: 17.7.2
     transitivePeerDependencies:
       - '@types/node'
       - supports-color
@@ -8225,11 +9983,11 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/generator': 7.19.0
+      '@babel/generator': 7.21.1
       '@babel/plugin-syntax-jsx': 7.18.6(@babel/core@7.12.3)
       '@babel/plugin-syntax-typescript': 7.18.6(@babel/core@7.12.3)
-      '@babel/traverse': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/traverse': 7.21.2
+      '@babel/types': 7.21.2
       '@jest/expect-utils': 29.5.0
       '@jest/transform': 29.5.0
       '@jest/types': 29.5.0
@@ -8289,6 +10047,15 @@ packages:
       string-length: 4.0.2
     dev: true
 
+  /jest-worker@26.6.2:
+    resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/node': 18.16.0
+      merge-stream: 2.0.0
+      supports-color: 7.2.0
+    dev: true
+
   /jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
@@ -8352,12 +10119,16 @@ packages:
       nomnom: 1.5.2
     dev: true
 
+  /jiti@1.18.2:
+    resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
+    hasBin: true
+
   /jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
     dev: true
 
-  /joi@17.8.3:
-    resolution: {integrity: sha512-q5Fn6Tj/jR8PfrLrx4fpGH4v9qM6o+vDUfD4/3vxxyg34OmKcNqYZ1qn2mpLza96S8tL0p0rIw2gOZX+/cTg9w==}
+  /joi@17.7.1:
+    resolution: {integrity: sha512-teoLhIvWE298R6AeJywcjR4sX2hHjB3/xJX4qPjg+gTg+c0mzUDsziYlqPmLomq9gVsfaMcgPaGc7VxtD/9StA==}
     dependencies:
       '@hapi/hoek': 9.3.0
       '@hapi/topo': 5.1.0
@@ -8385,6 +10156,7 @@ packages:
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
 
   /js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -8534,6 +10306,11 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
+  /jsonpointer@5.0.1:
+    resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /jsprim@1.4.2:
     resolution: {integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==}
     engines: {node: '>=0.6.0'}
@@ -8589,6 +10366,9 @@ packages:
   /kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
+
+  /kolorist@1.7.0:
+    resolution: {integrity: sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==}
     dev: true
 
   /ky@0.30.0:
@@ -8680,7 +10460,7 @@ packages:
       object-inspect: 1.12.3
       pidtree: 0.6.0
       string-argv: 0.3.1
-      yaml: 2.2.1
+      yaml: 2.2.2
     transitivePeerDependencies:
       - enquirer
       - supports-color
@@ -8696,7 +10476,7 @@ packages:
         optional: true
     dependencies:
       cli-truncate: 2.1.0
-      colorette: 2.0.19
+      colorette: 2.0.20
       enquirer: 2.3.6
       log-update: 4.0.0
       p-map: 4.0.0
@@ -8765,6 +10545,10 @@ packages:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
 
+  /lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: true
+
   /lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
     dev: true
@@ -8793,6 +10577,10 @@ packages:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
     dev: true
 
+  /lodash.sortby@4.7.0:
+    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
+    dev: true
+
   /lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
     dev: true
@@ -8844,12 +10632,6 @@ packages:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: true
 
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-
   /loupe@2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
@@ -8874,8 +10656,8 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /lru-cache@9.1.0:
-    resolution: {integrity: sha512-qFXQEwchrZcMVen2uIDceR8Tii6kCJak5rzDStfEM0qA3YLMswaxIEZO0DhIbJ3aqaJiDjt+3crlplOb0tDtKQ==}
+  /lru-cache@9.1.1:
+    resolution: {integrity: sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A==}
     engines: {node: 14 || >=16.14}
     dev: true
 
@@ -8887,7 +10669,6 @@ packages:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
       sourcemap-codec: 1.4.8
-    dev: true
 
   /magic-string@0.30.0:
     resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
@@ -8979,8 +10760,8 @@ packages:
       - supports-color
     dev: true
 
-  /mdast-util-from-markdown@1.2.0:
-    resolution: {integrity: sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==}
+  /mdast-util-from-markdown@1.3.0:
+    resolution: {integrity: sha512-HN3W1gRIuN/ZW295c7zi7g9lVBllMgZE40RxCX37wrTPWXCWtpvOZdfnuK+1WNpvZje6XuJeI3Wnb4TJEUem+g==}
     dependencies:
       '@types/mdast': 3.0.11
       '@types/unist': 2.0.6
@@ -8996,7 +10777,6 @@ packages:
       uvu: 0.5.6
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /mdast-util-frontmatter@1.0.0:
     resolution: {integrity: sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==}
@@ -9033,7 +10813,7 @@ packages:
     dependencies:
       '@types/mdast': 3.0.11
       markdown-table: 3.0.3
-      mdast-util-from-markdown: 1.2.0
+      mdast-util-from-markdown: 1.3.0
       mdast-util-to-markdown: 1.3.0
     transitivePeerDependencies:
       - supports-color
@@ -9049,7 +10829,7 @@ packages:
   /mdast-util-gfm@2.0.1:
     resolution: {integrity: sha512-42yHBbfWIFisaAfV1eixlabbsa6q7vHeSPY+cg+BBjX51M8xhgMacqH9g6TftB/9+YkcI0ooV4ncfrJslzm/RQ==}
     dependencies:
-      mdast-util-from-markdown: 1.2.0
+      mdast-util-from-markdown: 1.3.0
       mdast-util-gfm-autolink-literal: 1.0.2
       mdast-util-gfm-footnote: 1.0.1
       mdast-util-gfm-strikethrough: 1.0.2
@@ -9078,7 +10858,6 @@ packages:
 
   /mdast-util-to-string@3.1.0:
     resolution: {integrity: sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==}
-    dev: true
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
@@ -9172,7 +10951,6 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
       uvu: 0.5.6
-    dev: true
 
   /micromark-extension-frontmatter@1.0.0:
     resolution: {integrity: sha512-EXjmRnupoX6yYuUJSQhrQ9ggK0iQtQlpi6xeJzVD5xscyAI+giqco5fdymayZhJMbIFecjnE2yz85S9NzIgQpg==}
@@ -9261,7 +11039,6 @@ packages:
       micromark-util-character: 1.1.0
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-factory-label@1.0.2:
     resolution: {integrity: sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==}
@@ -9270,14 +11047,12 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
       uvu: 0.5.6
-    dev: true
 
   /micromark-factory-space@1.0.0:
     resolution: {integrity: sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==}
     dependencies:
       micromark-util-character: 1.1.0
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-factory-title@1.0.2:
     resolution: {integrity: sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==}
@@ -9287,7 +11062,6 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
       uvu: 0.5.6
-    dev: true
 
   /micromark-factory-whitespace@1.0.0:
     resolution: {integrity: sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==}
@@ -9296,20 +11070,17 @@ packages:
       micromark-util-character: 1.1.0
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-util-character@1.1.0:
     resolution: {integrity: sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==}
     dependencies:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-util-chunked@1.0.0:
     resolution: {integrity: sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==}
     dependencies:
       micromark-util-symbol: 1.0.1
-    dev: true
 
   /micromark-util-classify-character@1.0.0:
     resolution: {integrity: sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==}
@@ -9317,20 +11088,17 @@ packages:
       micromark-util-character: 1.1.0
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-util-combine-extensions@1.0.0:
     resolution: {integrity: sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==}
     dependencies:
       micromark-util-chunked: 1.0.0
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-util-decode-numeric-character-reference@1.0.0:
     resolution: {integrity: sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==}
     dependencies:
       micromark-util-symbol: 1.0.1
-    dev: true
 
   /micromark-util-decode-string@1.0.2:
     resolution: {integrity: sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==}
@@ -9339,27 +11107,22 @@ packages:
       micromark-util-character: 1.1.0
       micromark-util-decode-numeric-character-reference: 1.0.0
       micromark-util-symbol: 1.0.1
-    dev: true
 
   /micromark-util-encode@1.0.1:
     resolution: {integrity: sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==}
-    dev: true
 
   /micromark-util-html-tag-name@1.1.0:
     resolution: {integrity: sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==}
-    dev: true
 
   /micromark-util-normalize-identifier@1.0.0:
     resolution: {integrity: sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==}
     dependencies:
       micromark-util-symbol: 1.0.1
-    dev: true
 
   /micromark-util-resolve-all@1.0.0:
     resolution: {integrity: sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==}
     dependencies:
       micromark-util-types: 1.0.2
-    dev: true
 
   /micromark-util-sanitize-uri@1.0.0:
     resolution: {integrity: sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==}
@@ -9367,7 +11130,6 @@ packages:
       micromark-util-character: 1.1.0
       micromark-util-encode: 1.0.1
       micromark-util-symbol: 1.0.1
-    dev: true
 
   /micromark-util-subtokenize@1.0.2:
     resolution: {integrity: sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==}
@@ -9376,15 +11138,12 @@ packages:
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
       uvu: 0.5.6
-    dev: true
 
   /micromark-util-symbol@1.0.1:
     resolution: {integrity: sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==}
-    dev: true
 
   /micromark-util-types@1.0.2:
     resolution: {integrity: sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==}
-    dev: true
 
   /micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
@@ -9417,7 +11176,6 @@ packages:
       uvu: 0.5.6
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -9480,8 +11238,15 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
-  /minimatch@5.1.0:
-    resolution: {integrity: sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==}
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimatch@7.4.6:
+    resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
     engines: {node: '>=10'}
     dependencies:
       brace-expansion: 2.0.1
@@ -9520,6 +11285,10 @@ packages:
     resolution: {integrity: sha512-Ly1w0nHKnlhAAh6/BF/+9NgzXfoJxaJ8nhopFhQ3NcvFJrFIL+iCg9gw9e9UMBD+XIsp/RyznJ/o5UIe5Kw+kg==}
     dev: true
 
+  /minisearch@6.1.0:
+    resolution: {integrity: sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg==}
+    dev: true
+
   /mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -9539,7 +11308,6 @@ packages:
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
-    dev: true
 
   /mrmime@1.0.1:
     resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
@@ -9552,7 +11320,6 @@ packages:
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -9566,11 +11333,10 @@ packages:
       thunky: 1.1.0
     dev: true
 
-  /nanoid@3.3.4:
-    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
+  /nanoid@3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -9606,6 +11372,10 @@ packages:
     resolution: {integrity: sha512-qN8v/s2PAJwGUtr1/hYTpNKlD6Y9rc4p8KSmJXyGdYGZsDGKXrGThikLFP9OCHFeLeEpQzPwiAtdIvBLqm//Hw==}
     dev: true
 
+  /node-fetch-native@1.1.0:
+    resolution: {integrity: sha512-nl5goFCig93JZ9FIV8GHT9xpNqXbxQUzkOmKIMKmncsBH9jhg7qKex8hirpymkBFmNQ114chEEG5lS4wgK2I+Q==}
+    dev: true
+
   /node-fetch@2.6.7:
     resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
     engines: {node: 4.x || >=6.0.0}
@@ -9652,8 +11422,8 @@ packages:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
     dev: true
 
-  /node-releases@2.0.6:
-    resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
+  /node-releases@2.0.10:
+    resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
     dev: true
 
   /nomnom@1.5.2:
@@ -9729,6 +11499,7 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /object-inspect@1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
@@ -9738,10 +11509,33 @@ packages:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
     dev: true
 
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /object.assign@4.1.4:
+    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      has-symbols: 1.0.3
+      object-keys: 1.1.1
+    dev: true
+
   /obuf@1.1.2:
     resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
     dev: true
 
+  /ofetch@1.0.1:
+    resolution: {integrity: sha512-icBz2JYfEpt+wZz1FRoGcrMigjNKjzvufE26m9+yUiacRQRHwnNlGRPiDnW4op7WX/MR6aniwS8xw8jyVelF2g==}
+    dependencies:
+      destr: 1.2.2
+      node-fetch-native: 1.1.0
+      ufo: 1.1.1
+    dev: true
+
   /on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -10044,7 +11838,7 @@ packages:
     resolution: {integrity: sha512-UkZUeDjczjYRE495+9thsgcVgsaCPkaw80slmfVFgllxY+IO8ubTsOpFVjDPROBqJdHfVPUFRHPBV/WciOVfWg==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 9.1.0
+      lru-cache: 9.1.1
       minipass: 5.0.0
     dev: true
 
@@ -10075,13 +11869,16 @@ packages:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
     dev: true
 
+  /perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+    dev: true
+
   /performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: true
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -10191,11 +11988,19 @@ packages:
     resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.4
+      nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
     dev: true
 
+  /postcss@8.4.23:
+    resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /preact@10.11.0:
     resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
     dev: true
@@ -10218,7 +12023,7 @@ packages:
     dependencies:
       binary-searching: 2.0.5
       comment-parser: 1.3.1
-      mdast-util-from-markdown: 1.2.0
+      mdast-util-from-markdown: 1.3.0
       prettier: 2.8.8
     transitivePeerDependencies:
       - supports-color
@@ -10235,6 +12040,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /pretty-bytes@6.1.0:
+    resolution: {integrity: sha512-Rk753HI8f4uivXi4ZCIYdhmG1V+WKzvRMg/X+M42a6t7D07RcmopXJMDNk6N++7Bl75URRGsb40ruvg7Hcp2wQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: true
+
   /pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -10269,13 +12079,6 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
   /proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -10337,8 +12140,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /pure-rand@6.0.1:
-    resolution: {integrity: sha512-t+x1zEHDjBwkDGY5v5ApnZ/utcd4XYDiJsaQQoptTXgUXX95sDg1elCdJghzicm7n2mbCBJ3uYWr6M22SO19rg==}
+  /pure-rand@6.0.2:
+    resolution: {integrity: sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==}
     dev: true
 
   /q@1.5.1:
@@ -10401,20 +12204,6 @@ packages:
       unpipe: 1.0.0
     dev: true
 
-  /react-dom@16.14.0(react@16.14.0):
-    resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==}
-    peerDependencies:
-      react: ^16.14.0
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      prop-types: 15.8.1
-      react: 16.14.0
-      scheduler: 0.19.1
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-
   /react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
@@ -10423,14 +12212,6 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
-  /react@16.14.0:
-    resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      prop-types: 15.8.1
-
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -10529,15 +12310,53 @@ packages:
       strip-indent: 4.0.0
     dev: true
 
+  /regenerate-unicode-properties@10.1.0:
+    resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      regenerate: 1.4.2
+    dev: true
+
+  /regenerate@1.4.2:
+    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
+    dev: true
+
   /regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
     dev: true
 
+  /regenerator-transform@0.15.1:
+    resolution: {integrity: sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+    dev: true
+
   /regexp-tree@0.1.24:
     resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
     hasBin: true
     dev: true
 
+  /regexp.prototype.flags@1.4.3:
+    resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      functions-have-names: 1.2.3
+    dev: true
+
+  /regexpu-core@5.3.1:
+    resolution: {integrity: sha512-nCOzW2V/X15XpLsK2rlgdwrysrBq+AauCn+omItIz4R1pIcmeot5zvjdmOBRLzEH/CkC6IxMJVmxDe3QcMuNVQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      '@babel/regjsgen': 0.8.0
+      regenerate: 1.4.2
+      regenerate-unicode-properties: 10.1.0
+      regjsparser: 0.9.1
+      unicode-match-property-ecmascript: 2.0.0
+      unicode-match-property-value-ecmascript: 2.1.0
+    dev: true
+
   /regjsparser@0.9.1:
     resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
     hasBin: true
@@ -10569,7 +12388,7 @@ packages:
     resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==}
     dependencies:
       '@types/mdast': 3.0.11
-      mdast-util-from-markdown: 1.2.0
+      mdast-util-from-markdown: 1.3.0
       unified: 10.1.2
     transitivePeerDependencies:
       - supports-color
@@ -10747,13 +12566,26 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      glob: 10.2.1
+      glob: 10.2.2
     dev: true
 
   /robust-predicates@3.0.1:
     resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
     dev: false
 
+  /rollup-plugin-terser@7.0.2(rollup@2.79.1):
+    resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
+    deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
+    peerDependencies:
+      rollup: ^2.0.0
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      jest-worker: 26.6.2
+      rollup: 2.79.1
+      serialize-javascript: 4.0.0
+      terser: 5.15.1
+    dev: true
+
   /rollup-plugin-visualizer@5.9.0:
     resolution: {integrity: sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==}
     engines: {node: '>=14'}
@@ -10767,7 +12599,7 @@ packages:
       open: 8.4.0
       picomatch: 2.3.1
       source-map: 0.7.4
-      yargs: 17.7.1
+      yargs: 17.7.2
     dev: true
 
   /rollup@2.79.1:
@@ -10778,8 +12610,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup@3.20.6:
-    resolution: {integrity: sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==}
+  /rollup@3.21.0:
+    resolution: {integrity: sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -10811,7 +12643,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mri: 1.2.0
-    dev: true
 
   /safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
@@ -10821,6 +12652,14 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
+  /safe-regex-test@1.0.0:
+    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+      is-regex: 1.1.4
+    dev: true
+
   /safe-regex2@2.0.0:
     resolution: {integrity: sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==}
     dependencies:
@@ -10850,12 +12689,6 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
-  /scheduler@0.19.1:
-    resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-
   /schema-utils@3.1.1:
     resolution: {integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==}
     engines: {node: '>= 10.13.0'}
@@ -10949,6 +12782,12 @@ packages:
       - supports-color
     dev: true
 
+  /serialize-javascript@4.0.0:
+    resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
   /serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
     dependencies:
@@ -11038,11 +12877,20 @@ packages:
       vscode-textmate: 8.0.0
     dev: true
 
+  /shiki@0.14.2:
+    resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==}
+    dependencies:
+      ansi-sequence-parser: 1.1.0
+      jsonc-parser: 3.2.0
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 8.0.0
+    dev: true
+
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.1.3
+      get-intrinsic: 1.2.0
       object-inspect: 1.12.2
     dev: true
 
@@ -11068,6 +12916,15 @@ packages:
       totalist: 3.0.0
     dev: true
 
+  /sirv@2.0.3:
+    resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.0
+    dev: true
+
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
@@ -11150,7 +13007,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map-support@0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
@@ -11183,17 +13039,22 @@ packages:
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map@0.7.4:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
     engines: {node: '>= 8'}
     dev: true
 
+  /source-map@0.8.0-beta.0:
+    resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      whatwg-url: 7.1.0
+    dev: true
+
   /sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
-    dev: true
 
   /spawn-command@0.0.2-1:
     resolution: {integrity: sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==}
@@ -11366,6 +13227,35 @@ packages:
       strip-ansi: 7.0.1
     dev: true
 
+  /string.prototype.matchall@4.0.8:
+    resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.21.1
+      get-intrinsic: 1.2.0
+      has-symbols: 1.0.3
+      internal-slot: 1.0.5
+      regexp.prototype.flags: 1.4.3
+      side-channel: 1.0.4
+    dev: true
+
+  /string.prototype.trimend@1.0.6:
+    resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.21.1
+    dev: true
+
+  /string.prototype.trimstart@1.0.6:
+    resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.21.1
+    dev: true
+
   /string_decoder@0.10.31:
     resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
     dev: true
@@ -11382,6 +13272,15 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
+  /stringify-object@3.3.0:
+    resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==}
+    engines: {node: '>=4'}
+    dependencies:
+      get-own-enumerable-property-symbols: 3.0.2
+      is-obj: 1.0.1
+      is-regexp: 1.0.0
+    dev: true
+
   /strip-ansi@3.0.1:
     resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
     engines: {node: '>=0.10.0'}
@@ -11408,6 +13307,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /strip-comments@2.0.1:
+    resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /strip-eof@1.0.0:
     resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
     engines: {node: '>=0.10.0'}
@@ -11495,6 +13399,10 @@ packages:
       tslib: 2.5.0
     dev: true
 
+  /tabbable@6.1.2:
+    resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==}
+    dev: true
+
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -11512,6 +13420,21 @@ packages:
       which: 2.0.2
     dev: true
 
+  /temp-dir@2.0.0:
+    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /tempy@0.6.0:
+    resolution: {integrity: sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==}
+    engines: {node: '>=10'}
+    dependencies:
+      is-stream: 2.0.1
+      temp-dir: 2.0.0
+      type-fest: 0.16.0
+      unique-string: 2.0.0
+    dev: true
+
   /term-img@4.1.0:
     resolution: {integrity: sha512-DFpBhaF5j+2f7kheKFc1ajsAUUDGOaNPpKPtiIMxlbfud6mvfFZuWGnTRpaujUa5J7yl6cIw/h6nyr4mSsENPg==}
     engines: {node: '>=8'}
@@ -11536,7 +13459,8 @@ packages:
       uglify-js:
         optional: true
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
+      esbuild: 0.17.18
       jest-worker: 27.5.1
       schema-utils: 3.1.1
       serialize-javascript: 6.0.0
@@ -11620,8 +13544,8 @@ packages:
     resolution: {integrity: sha512-iyziEiyFxX4kyxSp+MtY1oCH/lvjH3PxFN8PGCDeqcZWAJ/i+9y+nL85w99PxVzrIvew/GSkSbDYtiGVa85Afg==}
     dev: true
 
-  /tinypool@0.4.0:
-    resolution: {integrity: sha512-2ksntHOKf893wSAH4z/+JbPpi92esw8Gn9N2deXX+B0EO92hexAVI9GIZZPx7P5aYo5KULfeOSt3kMOmSOy6uA==}
+  /tinypool@0.5.0:
+    resolution: {integrity: sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -11644,7 +13568,6 @@ packages:
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -11685,6 +13608,12 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
 
+  /tr46@1.0.1:
+    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
+    dependencies:
+      punycode: 2.3.0
+    dev: true
+
   /tr46@3.0.0:
     resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
     engines: {node: '>=12'}
@@ -11747,7 +13676,7 @@ packages:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
       '@types/node': 18.16.0
-      acorn: 8.8.0
+      acorn: 8.8.2
       acorn-walk: 8.2.0
       arg: 4.1.3
       create-require: 1.1.1
@@ -11809,6 +13738,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /type-fest@0.16.0:
+    resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
+    engines: {node: '>=10'}
+    dev: true
+
   /type-fest@0.18.1:
     resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
     engines: {node: '>=10'}
@@ -11847,6 +13781,14 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /typed-array-length@1.0.4:
+    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
+    dependencies:
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      is-typed-array: 1.1.10
+    dev: true
+
   /typedarray-to-buffer@3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
     dependencies:
@@ -11905,12 +13847,51 @@ packages:
     hasBin: true
     requiresBuild: true
     dev: true
-    optional: true
+
+  /unbox-primitive@1.0.2:
+    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+    dependencies:
+      call-bind: 1.0.2
+      has-bigints: 1.0.2
+      has-symbols: 1.0.3
+      which-boxed-primitive: 1.0.2
+    dev: true
+
+  /unconfig@0.3.7:
+    resolution: {integrity: sha512-1589b7oGa8ILBYpta7TndM5mLHLzHUqBfhszeZxuUBrjO/RoQ52VGVWsS3w0C0GLNxO9RPmqkf6BmIvBApaRdA==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      defu: 6.1.2
+      jiti: 1.18.2
+    dev: true
 
   /underscore@1.1.7:
     resolution: {integrity: sha512-w4QtCHoLBXw1mjofIDoMyexaEdWGMedWNDhlWTtT1V1lCRqi65Pnoygkh6+WRdr+Bm8ldkBNkNeCsXGMlQS9HQ==}
     dev: true
 
+  /unicode-canonical-property-names-ecmascript@2.0.0:
+    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /unicode-match-property-ecmascript@2.0.0:
+    resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
+    engines: {node: '>=4'}
+    dependencies:
+      unicode-canonical-property-names-ecmascript: 2.0.0
+      unicode-property-aliases-ecmascript: 2.1.0
+    dev: true
+
+  /unicode-match-property-value-ecmascript@2.1.0:
+    resolution: {integrity: sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /unicode-property-aliases-ecmascript@2.1.0:
+    resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
+    engines: {node: '>=4'}
+    dev: true
+
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
     dependencies:
@@ -11948,7 +13929,6 @@ packages:
     resolution: {integrity: sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==}
     dependencies:
       '@types/unist': 2.0.6
-    dev: true
 
   /unist-util-visit-parents@5.1.1:
     resolution: {integrity: sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==}
@@ -11980,23 +13960,102 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
+  /unocss@0.52.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-MholrJpVLH95SwCiQzXJiimkpUXqI1HWZCZBh4jklpfSGo3eZeo62f1BpXZThmLDPLZoBsf0qqItcvB803X37A==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.52.0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.52.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/cli': 0.52.0(rollup@2.79.1)
+      '@unocss/core': 0.52.0
+      '@unocss/extractor-arbitrary-variants': 0.52.0
+      '@unocss/postcss': 0.52.0(postcss@8.4.23)
+      '@unocss/preset-attributify': 0.52.0
+      '@unocss/preset-icons': 0.52.0
+      '@unocss/preset-mini': 0.52.0
+      '@unocss/preset-tagify': 0.52.0
+      '@unocss/preset-typography': 0.52.0
+      '@unocss/preset-uno': 0.52.0
+      '@unocss/preset-web-fonts': 0.52.0
+      '@unocss/preset-wind': 0.52.0
+      '@unocss/reset': 0.52.0
+      '@unocss/transformer-attributify-jsx': 0.52.0
+      '@unocss/transformer-attributify-jsx-babel': 0.52.0
+      '@unocss/transformer-compile-class': 0.52.0
+      '@unocss/transformer-directives': 0.52.0
+      '@unocss/transformer-variant-group': 0.52.0
+      '@unocss/vite': 0.52.0(rollup@2.79.1)(vite@4.3.3)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
     dev: true
 
+  /unplugin-vue-components@0.24.1(rollup@2.79.1)(vue@3.2.47):
+    resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.2
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      minimatch: 7.4.6
+      resolve: 1.22.1
+      unplugin: 1.1.0
+      vue: 3.2.47
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
+  /unplugin@1.1.0:
+    resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==}
+    dependencies:
+      acorn: 8.8.2
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.5.0
+    dev: true
+
   /untildify@4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
     dev: true
 
-  /update-browserslist-db@1.0.10(browserslist@4.21.4):
+  /upath@1.2.0:
+    resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /update-browserslist-db@1.0.10(browserslist@4.21.5):
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.21.4
+      browserslist: 4.21.5
       escalade: 3.1.1
       picocolors: 1.0.0
     dev: true
@@ -12004,7 +14063,7 @@ packages:
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.1.1
+      punycode: 2.3.0
     dev: true
 
   /url-parse@1.5.10:
@@ -12048,7 +14107,6 @@ packages:
       diff: 5.1.0
       kleur: 4.1.5
       sade: 1.8.1
-    dev: true
 
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
@@ -12058,7 +14116,7 @@ packages:
     resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
     engines: {node: '>=10.12.0'}
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
       '@types/istanbul-lib-coverage': 2.0.4
       convert-source-map: 1.8.0
     dev: true
@@ -12100,8 +14158,8 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-node@0.30.1(@types/node@18.16.0):
-    resolution: {integrity: sha512-vTikpU/J7e6LU/8iM3dzBo8ZhEiKZEKRznEMm+mJh95XhWaPrJQraT/QsT2NWmuEf+zgAoMe64PKT7hfZ1Njmg==}
+  /vite-node@0.31.0(@types/node@18.16.0):
+    resolution: {integrity: sha512-8x1x1LNuPvE2vIvkSB7c1mApX5oqlgsxzHQesYF7l5n1gKrEmrClIiZuOFbFDQcjLsmcWSwwmrWrcGWm9Fxc/g==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
@@ -12110,7 +14168,7 @@ packages:
       mlly: 1.2.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      vite: 4.3.1(@types/node@18.16.0)
+      vite: 4.3.8(@types/node@18.16.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -12121,37 +14179,21 @@ packages:
       - terser
     dev: true
 
-  /vite@4.2.2:
-    resolution: {integrity: sha512-PcNtT5HeDxb3QaSqFYkEum8f5sCVe0R3WK20qxgIvNBZPXU/Obxs/+ubBMeE7nLWeCo2LDzv+8hRYSlcaSehig==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
+  /vite-plugin-pwa@0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4):
+    resolution: {integrity: sha512-gpmx3BeubsRIXRBkjPToOTJbo8fknNmZFQs24i0TPZyaNVa0n27YHDo0Y72amnO70WvHKGE3e1fn8SYUP7e8SA==}
     peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
+      vite: ^3.1.0 || ^4.0.0
+      workbox-build: ^6.5.4
+      workbox-window: ^6.5.4
     dependencies:
-      esbuild: 0.17.18
-      postcss: 8.4.21
-      resolve: 1.22.1
-      rollup: 3.20.6
-    optionalDependencies:
-      fsevents: 2.3.2
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      pretty-bytes: 6.1.0
+      vite: 4.3.3
+      workbox-build: 6.5.4
+      workbox-window: 6.5.4
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /vite@4.3.1(@types/node@18.16.0):
@@ -12182,12 +14224,109 @@ packages:
       '@types/node': 18.16.0
       esbuild: 0.17.18
       postcss: 8.4.21
-      rollup: 3.20.6
+      rollup: 3.21.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.2.47):
+  /vite@4.3.3:
+    resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.18
+      postcss: 8.4.23
+      rollup: 3.21.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vite@4.3.8:
+    resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.18
+      postcss: 8.4.23
+      rollup: 3.21.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vite@4.3.8(@types/node@18.16.0):
+    resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.16.0
+      esbuild: 0.17.18
+      postcss: 8.4.23
+      rollup: 3.21.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
     peerDependencies:
@@ -12200,25 +14339,25 @@ packages:
       flexsearch: 0.7.31
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0)
-      vue: 3.2.47
+      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.14.2)
+      vue: 3.3.4
     dev: true
 
-  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0):
+  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.14.2):
     resolution: {integrity: sha512-Ou7fNE/OVYLrKGQMHSTVG6AcNsdv7tm4ACrdhx93SPMzEDj8UgIb4RFa5CTTowaYf3jeDGi2EAJlzXVC+IE3dg==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.3
-      '@docsearch/js': 3.3.3(@algolia/client-search@4.14.2)(react-dom@16.14.0)(react@16.14.0)
-      '@vitejs/plugin-vue': 4.1.0(vite@4.2.2)(vue@3.2.47)
+      '@docsearch/js': 3.3.5(@algolia/client-search@4.14.2)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.0.2(vue@3.2.47)
+      '@vueuse/core': 10.1.2(vue@3.3.4)
       body-scroll-lock: 4.0.0-beta.0
       mark.js: 8.11.1
       minisearch: 6.0.1
       shiki: 0.14.1
-      vite: 4.2.2
-      vue: 3.2.47
+      vite: 4.3.8
+      vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -12233,8 +14372,50 @@ packages:
       - terser
     dev: true
 
-  /vitest@0.30.1(@vitest/ui@0.30.1)(jsdom@21.1.1):
-    resolution: {integrity: sha512-y35WTrSTlTxfMLttgQk4rHcaDkbHQwDP++SNwPb+7H8yb13Q3cu2EixrtHzF27iZ8v0XCciSsLg00RkPAzB/aA==}
+  /vitepress@1.0.0-beta.1(@algolia/client-search@4.14.2):
+    resolution: {integrity: sha512-V2yyCwQ+v9fh7rbnGDLp8M7vHa9sLElexXf/JHtBOsOwv7ed9wt1QI4WUagYgKR3TeoJT9v2s6f0UaQSne0EvQ==}
+    hasBin: true
+    dependencies:
+      '@docsearch/css': 3.3.5
+      '@docsearch/js': 3.3.5(@algolia/client-search@4.14.2)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.3.8)(vue@3.3.4)
+      '@vue/devtools-api': 6.5.0
+      '@vueuse/core': 10.1.2(vue@3.3.4)
+      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
+      body-scroll-lock: 4.0.0-beta.0
+      focus-trap: 7.4.3
+      mark.js: 8.11.1
+      minisearch: 6.1.0
+      shiki: 0.14.2
+      vite: 4.3.8
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - universal-cookie
+    dev: true
+
+  /vitest@0.31.0(@vitest/ui@0.31.0)(jsdom@21.1.1):
+    resolution: {integrity: sha512-JwWJS9p3GU9GxkG7eBSmr4Q4x4bvVBSswaCFf1PBNHiPx00obfhHRJfgHcnI0ffn+NMlIh9QGvG75FlaIBdKGA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -12267,12 +14448,12 @@ packages:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
       '@types/node': 18.16.0
-      '@vitest/expect': 0.30.1
-      '@vitest/runner': 0.30.1
-      '@vitest/snapshot': 0.30.1
-      '@vitest/spy': 0.30.1
-      '@vitest/ui': 0.30.1
-      '@vitest/utils': 0.30.1
+      '@vitest/expect': 0.31.0
+      '@vitest/runner': 0.31.0
+      '@vitest/snapshot': 0.31.0
+      '@vitest/spy': 0.31.0
+      '@vitest/ui': 0.31.0(vitest@0.31.0)
+      '@vitest/utils': 0.31.0
       acorn: 8.8.2
       acorn-walk: 8.2.0
       cac: 6.7.14
@@ -12284,13 +14465,12 @@ packages:
       magic-string: 0.30.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      source-map: 0.6.1
       std-env: 3.3.2
       strip-literal: 1.0.1
       tinybench: 2.4.0
-      tinypool: 0.4.0
-      vite: 4.3.1(@types/node@18.16.0)
-      vite-node: 0.30.1(@types/node@18.16.0)
+      tinypool: 0.5.0
+      vite: 4.3.8(@types/node@18.16.0)
+      vite-node: 0.31.0(@types/node@18.16.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -12365,6 +14545,21 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.47
+    dev: false
+
+  /vue-demi@0.14.0(vue@3.3.4):
+    resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.4
     dev: true
 
   /vue@3.2.47:
@@ -12375,6 +14570,15 @@ packages:
       '@vue/runtime-dom': 3.2.47
       '@vue/server-renderer': 3.2.47(vue@3.2.47)
       '@vue/shared': 3.2.47
+
+  /vue@3.3.4:
+    resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
+    dependencies:
+      '@vue/compiler-dom': 3.3.4
+      '@vue/compiler-sfc': 3.3.4
+      '@vue/runtime-dom': 3.3.4
+      '@vue/server-renderer': 3.3.4(vue@3.3.4)
+      '@vue/shared': 3.3.4
     dev: true
 
   /w3c-hr-time@1.0.2:
@@ -12404,7 +14608,7 @@ packages:
     hasBin: true
     dependencies:
       axios: 0.27.2(debug@4.3.4)
-      joi: 17.8.3
+      joi: 17.7.1
       lodash: 4.17.21
       minimist: 1.2.8
       rxjs: 7.8.0
@@ -12457,6 +14661,10 @@ packages:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: true
 
+  /webidl-conversions@4.0.2:
+    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+    dev: true
+
   /webidl-conversions@7.0.0:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
@@ -12504,7 +14712,7 @@ packages:
     peerDependencies:
       webpack: ^4.0.0 || ^5.0.0
     dependencies:
-      colorette: 2.0.19
+      colorette: 2.0.20
       memfs: 3.4.11
       mime-types: 2.1.35
       range-parser: 1.2.1
@@ -12574,6 +14782,10 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /webpack-virtual-modules@0.5.0:
+    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+    dev: true
+
   /webpack@5.75.0(webpack-cli@4.10.0):
     resolution: {integrity: sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==}
     engines: {node: '>=10.13.0'}
@@ -12589,9 +14801,9 @@ packages:
       '@webassemblyjs/ast': 1.11.1
       '@webassemblyjs/wasm-edit': 1.11.1
       '@webassemblyjs/wasm-parser': 1.11.1
-      acorn: 8.8.0
-      acorn-import-assertions: 1.8.0(acorn@8.8.0)
-      browserslist: 4.21.4
+      acorn: 8.8.2
+      acorn-import-assertions: 1.8.0(acorn@8.8.2)
+      browserslist: 4.21.5
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.10.0
       es-module-lexer: 0.9.3
@@ -12677,6 +14889,36 @@ packages:
       webidl-conversions: 3.0.1
     dev: true
 
+  /whatwg-url@7.1.0:
+    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
+    dependencies:
+      lodash.sortby: 4.7.0
+      tr46: 1.0.1
+      webidl-conversions: 4.0.2
+    dev: true
+
+  /which-boxed-primitive@1.0.2:
+    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+    dependencies:
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.7
+      is-string: 1.0.7
+      is-symbol: 1.0.4
+    dev: true
+
+  /which-typed-array@1.1.9:
+    resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+      is-typed-array: 1.1.10
+    dev: true
+
   /which@1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
@@ -12721,6 +14963,152 @@ packages:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
     dev: true
 
+  /workbox-background-sync@6.5.4:
+    resolution: {integrity: sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==}
+    dependencies:
+      idb: 7.1.1
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-broadcast-update@6.5.4:
+    resolution: {integrity: sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==}
+    dependencies:
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-build@6.5.4:
+    resolution: {integrity: sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0)
+      '@babel/core': 7.12.3
+      '@babel/preset-env': 7.20.2(@babel/core@7.12.3)
+      '@babel/runtime': 7.21.0
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.12.3)(rollup@2.79.1)
+      '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1)
+      '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
+      '@surma/rollup-plugin-off-main-thread': 2.2.3
+      ajv: 8.11.0
+      common-tags: 1.8.2
+      fast-json-stable-stringify: 2.1.0
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      lodash: 4.17.21
+      pretty-bytes: 5.6.0
+      rollup: 2.79.1
+      rollup-plugin-terser: 7.0.2(rollup@2.79.1)
+      source-map: 0.8.0-beta.0
+      stringify-object: 3.3.0
+      strip-comments: 2.0.1
+      tempy: 0.6.0
+      upath: 1.2.0
+      workbox-background-sync: 6.5.4
+      workbox-broadcast-update: 6.5.4
+      workbox-cacheable-response: 6.5.4
+      workbox-core: 6.5.4
+      workbox-expiration: 6.5.4
+      workbox-google-analytics: 6.5.4
+      workbox-navigation-preload: 6.5.4
+      workbox-precaching: 6.5.4
+      workbox-range-requests: 6.5.4
+      workbox-recipes: 6.5.4
+      workbox-routing: 6.5.4
+      workbox-strategies: 6.5.4
+      workbox-streams: 6.5.4
+      workbox-sw: 6.5.4
+      workbox-window: 6.5.4
+    transitivePeerDependencies:
+      - '@types/babel__core'
+      - supports-color
+    dev: true
+
+  /workbox-cacheable-response@6.5.4:
+    resolution: {integrity: sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==}
+    dependencies:
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-core@6.5.4:
+    resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==}
+    dev: true
+
+  /workbox-expiration@6.5.4:
+    resolution: {integrity: sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==}
+    dependencies:
+      idb: 7.1.1
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-google-analytics@6.5.4:
+    resolution: {integrity: sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==}
+    dependencies:
+      workbox-background-sync: 6.5.4
+      workbox-core: 6.5.4
+      workbox-routing: 6.5.4
+      workbox-strategies: 6.5.4
+    dev: true
+
+  /workbox-navigation-preload@6.5.4:
+    resolution: {integrity: sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==}
+    dependencies:
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-precaching@6.5.4:
+    resolution: {integrity: sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==}
+    dependencies:
+      workbox-core: 6.5.4
+      workbox-routing: 6.5.4
+      workbox-strategies: 6.5.4
+    dev: true
+
+  /workbox-range-requests@6.5.4:
+    resolution: {integrity: sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==}
+    dependencies:
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-recipes@6.5.4:
+    resolution: {integrity: sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==}
+    dependencies:
+      workbox-cacheable-response: 6.5.4
+      workbox-core: 6.5.4
+      workbox-expiration: 6.5.4
+      workbox-precaching: 6.5.4
+      workbox-routing: 6.5.4
+      workbox-strategies: 6.5.4
+    dev: true
+
+  /workbox-routing@6.5.4:
+    resolution: {integrity: sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==}
+    dependencies:
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-strategies@6.5.4:
+    resolution: {integrity: sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==}
+    dependencies:
+      workbox-core: 6.5.4
+    dev: true
+
+  /workbox-streams@6.5.4:
+    resolution: {integrity: sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==}
+    dependencies:
+      workbox-core: 6.5.4
+      workbox-routing: 6.5.4
+    dev: true
+
+  /workbox-sw@6.5.4:
+    resolution: {integrity: sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==}
+    dev: true
+
+  /workbox-window@6.5.4:
+    resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==}
+    dependencies:
+      '@types/trusted-types': 2.0.2
+      workbox-core: 6.5.4
+    dev: true
+
   /wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -12848,8 +15236,8 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
-  /yaml@2.2.1:
-    resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}
+  /yaml@2.2.2:
+    resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
     engines: {node: '>= 14'}
     dev: true
 
@@ -12889,8 +15277,8 @@ packages:
       yargs-parser: 21.1.1
     dev: true
 
-  /yargs@17.7.1:
-    resolution: {integrity: sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==}
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
     dependencies:
       cliui: 8.0.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 4b8be5cdc..01e9fda24 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +1,5 @@
 packages:
-  # all packages in direct subdirs of packages/
   - 'packages/*'
+  - 'packages/mermaid/src/docs'
+  - 'packages/mermaid/src/vitepress'
   - 'tests/*'

From a3930eb6296998b0539971b45b6d9ab82865a5ec Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Wed, 31 May 2023 17:37:53 +0900
Subject: [PATCH 023/193] fix(katex): resolved broken lockfile

---
 pnpm-lock.yaml | 125 ++++++++++++++++++++++++++-----------------------
 1 file changed, 66 insertions(+), 59 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d82cdc564..48778b871 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -334,7 +334,7 @@ importers:
         version: 1.0.0
       vitepress:
         specifier: ^1.0.0-alpha.72
-        version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(@types/node@18.16.0)
+        version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
         version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4)
@@ -417,13 +417,13 @@ importers:
         version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
       vite:
         specifier: ^4.3.3
-        version: 4.3.3(@types/node@18.16.0)
+        version: 4.3.3
       vite-plugin-pwa:
         specifier: ^0.15.0
         version: 0.15.0(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
       vitepress:
         specifier: 1.0.0-beta.1
-        version: 1.0.0-beta.1(@algolia/client-search@4.14.2)(@types/node@18.16.0)
+        version: 1.0.0-beta.1(@algolia/client-search@4.14.2)
       workbox-window:
         specifier: ^6.5.4
         version: 6.5.4
@@ -1281,7 +1281,7 @@ packages:
       '@babel/core': 7.12.3
       '@babel/helper-compilation-targets': 7.20.7(@babel/core@7.12.3)
       '@babel/helper-plugin-utils': 7.20.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.1
       semver: 6.3.0
@@ -2342,7 +2342,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/parser': 7.21.8
       '@babel/types': 7.21.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -3204,7 +3204,7 @@ packages:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.2
       '@iconify/types': 2.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       kolorist: 1.7.0
       local-pkg: 0.4.3
     transitivePeerDependencies:
@@ -3600,7 +3600,7 @@ packages:
       tslib:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@rollup/pluginutils': 5.0.2
       resolve: 1.22.1
       typescript: 5.0.4
     dev: true
@@ -3617,7 +3617,7 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/pluginutils@5.0.2(rollup@2.79.1):
+  /@rollup/pluginutils@5.0.2:
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3629,7 +3629,6 @@ packages:
       '@types/estree': 1.0.0
       estree-walker: 2.0.2
       picomatch: 2.3.1
-      rollup: 2.79.1
     dev: true
 
   /@rollup/pluginutils@5.0.2(rollup@2.79.1):
@@ -4637,7 +4636,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.2.12
       magic-string: 0.30.0
-      vite: 4.3.3(@types/node@18.16.0)
+      vite: 4.3.3
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -4657,7 +4656,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.3(@types/node@18.16.0)
+      vite: 4.3.3
       vue: 3.2.47
     dev: true
 
@@ -4668,7 +4667,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.8(@types/node@18.16.0)
+      vite: 4.3.8
       vue: 3.3.4
     dev: true
 
@@ -5861,17 +5860,6 @@ packages:
       update-browserslist-db: 1.0.10(browserslist@4.21.5)
     dev: true
 
-  /browserslist@4.21.5:
-    resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001457
-      electron-to-chromium: 1.4.284
-      node-releases: 2.0.10
-      update-browserslist-db: 1.0.10(browserslist@4.21.5)
-    dev: true
-
   /bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
     dependencies:
@@ -6005,10 +5993,6 @@ packages:
     resolution: {integrity: sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==}
     dev: true
 
-  /caniuse-lite@1.0.30001457:
-    resolution: {integrity: sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==}
-    dev: true
-
   /caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
     dev: true
@@ -7233,6 +7217,7 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 8.1.1
+    dev: true
 
   /decamelize-keys@1.1.0:
     resolution: {integrity: sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==}
@@ -8418,6 +8403,16 @@ packages:
       tabbable: 6.1.2
     dev: true
 
+  /follow-redirects@1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: true
+
   /follow-redirects@1.15.2(debug@4.3.4):
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -8436,12 +8431,6 @@ packages:
       is-callable: 1.2.7
     dev: true
 
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
-    dev: true
-
   /foreground-child@2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
     engines: {node: '>=8.0.0'}
@@ -8911,6 +8900,7 @@ packages:
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
+    dev: true
 
   /has-own-prop@2.0.0:
     resolution: {integrity: sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==}
@@ -11436,10 +11426,6 @@ packages:
     resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
     dev: true
 
-  /node-releases@2.0.6:
-    resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
-    dev: true
-
   /nomnom@1.5.2:
     resolution: {integrity: sha512-fiVbT7BqxiQqjlR9U3FDGOSERFCKoXVCdxV2FwZuNN7/cmJ42iQx35nUFOAFDcyvemu9Adp+IlsCGlKQYLmBKw==}
     deprecated: Package no longer supported. Contact support@npmjs.com for more info.
@@ -13394,6 +13380,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       has-flag: 4.0.0
+    dev: true
 
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -14030,7 +14017,7 @@ packages:
       '@antfu/utils': 0.7.2
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
       chokidar: 3.5.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       fast-glob: 3.2.12
       local-pkg: 0.4.3
       magic-string: 0.30.0
@@ -14062,17 +14049,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /update-browserslist-db@1.0.10(browserslist@4.21.4):
-    resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.5
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: true
-
   /update-browserslist-db@1.0.10(browserslist@4.21.5):
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
@@ -14210,10 +14186,10 @@ packages:
       workbox-build: ^6.5.4
       workbox-window: ^6.5.4
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       fast-glob: 3.2.12
       pretty-bytes: 6.1.0
-      vite: 4.3.3(@types/node@18.16.0)
+      vite: 4.3.3
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
@@ -14253,7 +14229,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.3.3(@types/node@18.16.0):
+  /vite@4.3.3:
     resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -14278,7 +14254,38 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.16.0
+      esbuild: 0.17.18
+      postcss: 8.4.23
+      rollup: 3.21.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vite@4.3.8:
+    resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
       esbuild: 0.17.18
       postcss: 8.4.23
       rollup: 3.21.0
@@ -14332,11 +14339,11 @@ packages:
       flexsearch: 0.7.31
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(@types/node@18.16.0)
+      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.14.2)
       vue: 3.3.4
     dev: true
 
-  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.14.2)(@types/node@18.16.0):
+  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.14.2):
     resolution: {integrity: sha512-Ou7fNE/OVYLrKGQMHSTVG6AcNsdv7tm4ACrdhx93SPMzEDj8UgIb4RFa5CTTowaYf3jeDGi2EAJlzXVC+IE3dg==}
     hasBin: true
     dependencies:
@@ -14349,7 +14356,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.0.1
       shiki: 0.14.1
-      vite: 4.3.8(@types/node@18.16.0)
+      vite: 4.3.8
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -14365,7 +14372,7 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.1(@algolia/client-search@4.14.2)(@types/node@18.16.0):
+  /vitepress@1.0.0-beta.1(@algolia/client-search@4.14.2):
     resolution: {integrity: sha512-V2yyCwQ+v9fh7rbnGDLp8M7vHa9sLElexXf/JHtBOsOwv7ed9wt1QI4WUagYgKR3TeoJT9v2s6f0UaQSne0EvQ==}
     hasBin: true
     dependencies:
@@ -14380,7 +14387,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.2
-      vite: 4.3.8(@types/node@18.16.0)
+      vite: 4.3.8
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -14779,7 +14786,7 @@ packages:
     resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
     dev: true
 
-  /webpack@5.75.0(esbuild@0.17.18)(webpack-cli@4.10.0):
+  /webpack@5.75.0(webpack-cli@4.10.0):
     resolution: {integrity: sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==}
     engines: {node: '>=10.13.0'}
     hasBin: true

From b193013c8487f8d1e15937c8b5224f501a0dab7f Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Wed, 31 May 2023 17:39:34 +0900
Subject: [PATCH 024/193] fix(katex): resolved removed class from demo during
 merging

---
 demos/sequence.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index 2e71fb1f7..42917743c 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -143,7 +143,7 @@
         
    
     
    
-    
    +    
           sequenceDiagram
       participant Alice
       participant Bob
@@ -196,7 +196,7 @@
       2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
       3-->>2: $$6x+2$$
     
    
-    
    
+
     
+  
+
+```
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 8fceb810b..0089438b0 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -156,6 +156,7 @@ function sidebarConfig() {
         { text: 'Mermaid API Configuration', link: '/config/setup/README' },
         { text: 'Directives', link: '/config/directives' },
         { text: 'Theming', link: '/config/theming' },
+        { text: 'Math', link: '/config/math' },
         { text: 'Accessibility', link: '/config/accessibility' },
         { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
         { text: 'Advanced usage', link: '/config/n00b-advanced' },
diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md
new file mode 100644
index 000000000..b6b4e0e47
--- /dev/null
+++ b/packages/mermaid/src/docs/config/math.md
@@ -0,0 +1,62 @@
+# Math Configuration
+
+Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
+
+## Usage
+
+To render math within a diagram, surround the mathematical expression with the `$$` delimiter.
+
+Note that at the moment, the only supported diagrams are below:
+
+### Flowcharts
+
+```mermaid
+ graph LR
+      A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
+      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
+      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
+      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
+```
+
+### Sequence
+
+```mermaid
+sequenceDiagram
+    autonumber
+    participant 1 as $$\alpha$$
+    participant 2 as $$\beta$$
+    1->>2: Solve: $$\sqrt{2+2}$$
+    2-->>1: Answer: $$2$$
+    Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
+```
+
+## Legacy Support
+
+By default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `legacyMathML` can be set in the config to fall back to CSS rendering. Note that **you must provide KaTeX's stylesheets on your own** as they do not come bundled with Mermaid.
+
+Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
+
+```html
+
+
+
+  
+    
+    
+  
+
+  
+    
+  
+
+```

From 86e1bb38eecfd4179fe9b296f111d8e53d586fb6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 5 Jul 2023 12:01:37 +0200
Subject: [PATCH 030/193] #3358 First commit with basic grammar and 1st test

---
 packages/mermaid/src/config.type.ts           |   4 +
 .../src/diagrams/blockDiagram/blockDB.ts      |  35 ++++
 .../src/diagrams/blockDiagram/blockDiagram.ts |  15 ++
 .../blockDiagram/blockDiagramDetector.ts      |  20 ++
 .../blockDiagram/blockDiagramRenderer.ts      |  63 ++++++
 .../blockDiagram/blockDiagramUtils.ts         |   8 +
 .../blockDiagram/parser/blockDiagram.jison    | 195 ++++++++++++++++++
 .../blockDiagram/parser/blockDiagram.spec.ts  |  85 ++++++++
 .../mermaid/src/docs/.vitepress/block.mmd     |  33 +++
 9 files changed, 458 insertions(+)
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDB.ts
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison
 create mode 100644 packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts
 create mode 100644 packages/mermaid/src/docs/.vitepress/block.mmd

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 138eee44f..a784b9d30 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -33,6 +33,7 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
+  blockDiagram?: BlockDiagramConfig;
   dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
   fontSize?: number;
@@ -421,6 +422,9 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
   linkColor?: SankeyLinkColor | string;
   nodeAlignment?: SankeyNodeAlignment;
 }
+export interface BlockDiagramConfig extends BaseDiagramConfig {
+  padding?: number;
+}
 
 export interface FontConfig {
   fontSize?: string | number;
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts
new file mode 100644
index 000000000..265835cd7
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts
@@ -0,0 +1,35 @@
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import {
+  setAccTitle,
+  getAccTitle,
+  getAccDescription,
+  setAccDescription,
+  setDiagramTitle,
+  getDiagramTitle,
+  clear as commonClear,
+} from '../../commonDb.js';
+
+type Block = {
+  ID: string;
+};
+
+// Array of nodes guarantees their order
+let blocks: Block[] = [];
+
+const clear = (): void => {
+  blocks = [];
+  commonClear();
+};
+
+export default {
+  getConfig: () => configApi.getConfig().blockDiagram,
+
+  getAccTitle,
+  setAccTitle,
+  getAccDescription,
+  setAccDescription,
+  getDiagramTitle,
+  setDiagramTitle,
+  clear,
+};
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts
new file mode 100644
index 000000000..c3913a7f2
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts
@@ -0,0 +1,15 @@
+import { DiagramDefinition } from '../../diagram-api/types.js';
+// @ts-ignore: jison doesn't export types
+import parser from './parser/sankey.jison';
+import db from './blockDB.js';
+import renderer from './blockDiagramRenderer.js';
+import { prepareTextForParsing } from './blockDiagramUtils.js';
+
+const originalParse = parser.parse.bind(parser);
+parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+};
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts
new file mode 100644
index 000000000..41dc91127
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts
@@ -0,0 +1,20 @@
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
+
+const id = 'sankey';
+
+const detector: DiagramDetector = (txt) => {
+  return /^\s*blockDiagram-beta/.test(txt);
+};
+
+const loader = async () => {
+  const { diagram } = await import('./blockDiagram.js');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts
new file mode 100644
index 000000000..5a2f595bc
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts
@@ -0,0 +1,63 @@
+import { Diagram } from '../../Diagram.js';
+import * as configApi from '../../config.js';
+
+import {
+  select as d3select,
+  scaleOrdinal as d3scaleOrdinal,
+  schemeTableau10 as d3schemeTableau10,
+} from 'd3';
+
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Uid } from '../../rendering-util/uid.js';
+import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+
+export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
+  // Get the config
+  const { securityLevel, sankey: conf } = configApi.getConfig();
+  const defaultSankeyConfig = configApi!.defaultConfig!.blockDiagram!;
+
+  // TODO:
+  // This code repeats for every diagram
+  // Figure out what is happening there, probably it should be separated
+  // The main thing is svg object that is a d3 wrapper for svg operations
+  //
+  let sandboxElement: any;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = d3select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? d3select(sandboxElement.nodes()[0].contentDocument.body)
+      : d3select('body');
+  // @ts-ignore TODO root.select is not callable
+  const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
+
+  // Establish svg dimensions and get width and height
+  //
+
+  // FIX: using max width prevents height from being set, is it intended?
+  // to add height directly one can use `svg.attr('height', height)`
+  //
+  // @ts-ignore TODO: svg type vs selection mismatch
+  configureSvgSize(svg, height, width, useMaxWidth);
+
+  // Prepare data for construction based on diagObj.db
+  // This must be a mutable object with `nodes` and `links` properties:
+  //
+  //    {
+  //      "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ],
+  //      "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
+  //    }
+  //
+  // @ts-ignore TODO: db type
+  const graph = diagObj.db.getGraph();
+
+  const nodeWidth = 10;
+
+  // Get color scheme for the graph
+  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
+};
+
+export default {
+  draw,
+};
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts
new file mode 100644
index 000000000..45ecf21dd
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts
@@ -0,0 +1,8 @@
+export const prepareTextForParsing = (text: string): string => {
+  const textToParse = text
+    .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
+    .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
+    .trim();
+
+  return textToParse;
+};
diff --git a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison
new file mode 100644
index 000000000..aced2c023
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison
@@ -0,0 +1,195 @@
+/** mermaid */
+
+//---------------------------------------------------------
+// We support csv format as defined here:
+// https://www.ietf.org/rfc/rfc4180.txt
+// There are some minor changes for compliance with jison
+// We also parse only 3 columns: source,target,value
+// And allow blank lines for visual purposes
+//---------------------------------------------------------
+
+%lex
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
+%x string
+%x md_string
+%x NODE
+%options easy_keword_rules
+
+
+// as per section 6.1 of RFC 2234 [2]
+COMMA \u002C
+CR \u000D
+LF \u000A
+CRLF \u000D\u000A
+
+
+%%
+
+"blockDiagram-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
+// \s*\%\%.*                                                       { yy.getLogger().info('Found comment',yytext); }
+[\s]+                                                           { yy.getLogger().info('.', yytext); /* skip all whitespace */  }
+[\n]+ {yy.getLogger().info('_', yytext);                 /* skip all whitespace */   }
+// [\n]                return 'NL';
+({CRLF}|{LF})                     { return 'NL' }
+["][`]          { this.begin("md_string");}
+[^`"]+        { return "MD_STR";}
+[`]["]          { this.popState();}
+["]                     this.begin("string");
+["]             this.popState();
+[^"]*           return "STR";
+"style"               return 'STYLE';
+"default"             return 'DEFAULT';
+"linkStyle"           return 'LINKSTYLE';
+"interpolate"         return 'INTERPOLATE';
+"classDef"            return 'CLASSDEF';
+"class"               return 'CLASS';
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+[\}]                       { this.popState(); }
+[^\}]*                     return "acc_descr_multiline_value";
+"subgraph"            return 'subgraph';
+"end"\b\s*            return 'end';
+.*direction\s+TB[^\n]*                                      return 'direction_tb';
+.*direction\s+BT[^\n]*                                      return 'direction_bt';
+.*direction\s+RL[^\n]*                                      return 'direction_rl';
+.*direction\s+LR[^\n]*                                      return 'direction_lr';
+
+// Start of nodes with shapes and description
+"-)"                   { yy.getLogger().info('Lex: -)'); this.begin('NODE');return 'NODE_D START'; }
+"(-"                   { yy.getLogger().info('Lex: (-'); this.begin('NODE');return 'NODE_DSTART';           }
+"))"                   { yy.getLogger().info('Lex: ))'); this.begin('NODE');return 'NODE_DSTART';  }
+")"                    { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART';      }
+"(("                   { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
+"{{"                   { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
+"("                    { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
+"["                    { yy.getLogger().info('Lex: ['); this.begin('NODE');return 'NODE_DSTART'; }
+"(["                   { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
+"[["                   { this.begin('NODE');return 'NODE_DSTART'; }
+"[|"                   { this.begin('NODE');return 'NODE_DSTART'; }
+"[("                   { this.begin('NODE');return 'NODE_DSTART'; }
+"((("                  { this.begin('NODE');return 'NODE_DSTART'; }
+")))"                  { this.begin('NODE');return 'NODE_DSTART'; }
+"[/"                   { this.begin('NODE');return 'NODE_DSTART'; }
+"[\\"                  { this.begin('NODE');return 'NODE_DSTART'; }
+
+
+[^\(\[\n\-\)\{\}]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+<>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
+
+// Handling of strings in node
+["][`]           { this.begin("md_string");}
+[^`"]+      { return "NODE_DESCR";}
+[`]["]      { this.popState();}
+["]              { yy.getLogger().info('Lex: Starting string');this.begin("string");}
+[^"]+          { yy.getLogger().info('Lex: NODE_DESCR:', yytext); return "NODE_DESCR";}
+["]            {this.popState();}
+
+// Node end of shape
+[\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
+[\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
+[\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
+"}}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"(-"             { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
+"-)"             { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
+"(("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"("              { this.popState();yy.getLogger().info('Lex: (');  return "NODE_DEND";  }
+"])"             { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
+"]]"             { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
+"/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
+
+// Edges
+\s*[xo<]?\-\-+[-xo>]\s*                 { yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
+\s*[xo<]?\=\=+[=xo>]\s*                 { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
+\s*[xo<]?\-?\.+\-[xo>]?\s*              { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
+\s*\~\~[\~]+\s*                         { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
+\s*[xo<]?\-\-\s*                        { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
+\s*[xo<]?\=\=\s*                        { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
+\s*[xo<]?\-\.\s*                        { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
+
+/lex
+
+%start start
+
+%% // language grammar
+
+spaceLines
+  : SPACELINE
+  | spaceLines SPACELINE
+  | spaceLines NL
+  ;
+
+seperator
+  : NL
+  {yy.getLogger().info('Rule: seperator (NL) ');}
+  | SPACE
+  {yy.getLogger().info('Rule: seperator (Space) ');}
+  | EOF
+    {yy.getLogger().info('Rule: seperator (EOF) ');}
+  ;
+
+start: BLOCK_DIAGRAM_KEY document;
+
+blockDiagram
+  : blockDiagram document  { return yy; }
+  | blockDiagram NL document  { return yy; }
+  ;
+
+stop
+  : NL {yy.getLogger().info('Stop NL ');}
+  | EOF {yy.getLogger().info('Stop EOF ');}
+  // | SPACELINE
+  | stop NL {yy.getLogger().info('Stop NL2 ');}
+  | stop EOF {yy.getLogger().info('Stop EOF2 ');}
+  ;
+
+document
+	: document statement
+	| statement
+	;
+
+link
+  : LINK
+  { yy.getLogger().info("Rule: link: ", $1); }
+  | START_LINK
+  { yy.getLogger().info("Rule: link: ", $1); }
+  ;
+
+statement
+  : nodeStatement
+//   SPACELIST node       { yy.getLogger().info('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
+// 	| SPACELIST ICON       { yy.getLogger().info('Icon: ',$2);yy.decorateNode({icon: $2}); }
+// 	| SPACELIST CLASS      { yy.decorateNode({class: $2}); }
+//   | SPACELINE { yy.getLogger().info('SPACELIST');}
+// 	|
+//    node					       { yy.getLogger().info('Node: ',$1.id);yy.addNode(0, $1.id, $1.descr, $1.type);  }
+// 	| ICON                 { yy.decorateNode({icon: $1}); }
+// 	| CLASS                { yy.decorateNode({class: $1}); }
+//   // | SPACELIST
+  | EOF
+	;
+
+nodeStatement: nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) ');}
+    |node { yy.getLogger().info('Rule: nodeStatement (node) ');}
+    ;
+
+node
+  : NODE_ID
+  { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); }
+  |NODE_ID nodeShapeNLabel
+    { yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2); }
+  // |nodeShapeNLabel seperator
+  // { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); }
+  ;
+
+nodeShapeNLabel
+  :   NODE_DSTART STR NODE_DEND
+	      { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { type: $1 + $3, descr: $2 }; }
+  ;
+
+%%
diff --git a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts
new file mode 100644
index 000000000..3c076c04f
--- /dev/null
+++ b/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts
@@ -0,0 +1,85 @@
+// @ts-ignore: jison doesn't export types
+import blockDiagram from './blockDiagram.jison';
+import db from '../blockDB.js';
+import { cleanupComments } from '../../../diagram-api/comments.js';
+import { prepareTextForParsing } from '../blockDiagramUtils.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('Sankey diagram', function () {
+  describe('when parsing an block diagram graph it should handle > ', function () {
+    beforeEach(function () {
+      blockDiagram.parser.yy = db;
+      blockDiagram.parser.yy.clear();
+      blockDiagram.parser.yy.getLogger = () => console;
+    });
+
+    it('a diagram with a node', async () => {
+      const str = `blockDiagram-beta
+          id
+      `;
+
+      blockDiagram.parse(str);
+    });
+    it('a diagram with multiple nodes', async () => {
+      const str = `blockDiagram-beta
+          id1
+          id2
+      `;
+
+      blockDiagram.parse(str);
+    });
+    it('a node with a square shape and a label', async () => {
+      const str = `blockDiagram-beta
+          id["A label"]
+          id2`;
+
+      blockDiagram.parse(str);
+    });
+    it('a diagram with multiple nodes with edges', async () => {
+      const str = `blockDiagram-beta
+          id1["first"]  -->   id2["second"]
+      `;
+
+      blockDiagram.parse(str);
+    });
+    // it('a diagram with column statements', async () => {
+    //   const str = `blockDiagram-beta
+    //       columns 1
+    //       block1["Block 1"]
+    //   `;
+
+    //   blockDiagram.parse(str);
+    // });
+    // it('a diagram with block hierarchies', async () => {
+    //   const str = `blockDiagram-beta
+    //     columns 1
+    //     block1[Block 1]
+
+    //     block
+    //       columns 2
+    //       block2[Block 2]
+    //       block3[Block 3]
+    //     end %% End the compound block
+    //   `;
+
+    //   blockDiagram.parse(str);
+    // });
+    // it('a diagram with differernt column values in different blocks', async () => {
+    //   const str = `blockDiagram-beta
+    //     columns 1
+    //     block1[Block 1]
+
+    //     block
+    //       columns 2
+    //       block2[Block 2]
+    //       block3[Block 3]
+    //     end %% End the compound block
+    //   `;
+
+    //   blockDiagram.parse(str);
+
+    //   // Todo check that the different blocks have different column values
+    // });
+  });
+});
diff --git a/packages/mermaid/src/docs/.vitepress/block.mmd b/packages/mermaid/src/docs/.vitepress/block.mmd
new file mode 100644
index 000000000..7ce628f44
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/block.mmd
@@ -0,0 +1,33 @@
+block
+  columns 3
+  Block1
+  Block2["Block 2"]
+  block
+    columns 2
+    Block2.1
+    Block2.2
+  end
+  Block3
+
+
+----
+
+block
+  columns 2
+  Block[Frontend]:vertical
+
+  block "Document management System"
+    columns 3
+    MO[Manager Operation]:vertical
+    block
+      columns 2
+        block "Security and User Manager"
+  end
+
+
+----
+block frontend:vertical
+move right
+block "Document Management System"
+move down
+

From 791e67641eafe845b243ace394749f9fc2b2602c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Fri, 7 Jul 2023 13:58:30 +0300
Subject: [PATCH 031/193] Rename BlockDiagram to Block

---
 packages/mermaid/src/config.type.ts           |  2 +-
 .../src/diagram-api/diagram-orchestration.ts  |  4 +-
 .../{blockDiagram => block}/blockDB.ts        |  2 +-
 .../blockDetector.ts}                         |  4 +-
 .../{blockDiagram => block}/blockDiagram.ts   |  6 +--
 .../blockRenderer.ts}                         |  0
 .../mermaid/src/diagrams/block/blockTypes.ts  |  5 +++
 .../blockUtils.ts}                            |  0
 .../parser/block.jison}                       |  2 +-
 .../parser/block.spec.ts}                     | 38 +++++++++----------
 10 files changed, 35 insertions(+), 28 deletions(-)
 rename packages/mermaid/src/diagrams/{blockDiagram => block}/blockDB.ts (91%)
 rename packages/mermaid/src/diagrams/{blockDiagram/blockDiagramDetector.ts => block/blockDetector.ts} (84%)
 rename packages/mermaid/src/diagrams/{blockDiagram => block}/blockDiagram.ts (68%)
 rename packages/mermaid/src/diagrams/{blockDiagram/blockDiagramRenderer.ts => block/blockRenderer.ts} (100%)
 create mode 100644 packages/mermaid/src/diagrams/block/blockTypes.ts
 rename packages/mermaid/src/diagrams/{blockDiagram/blockDiagramUtils.ts => block/blockUtils.ts} (100%)
 rename packages/mermaid/src/diagrams/{blockDiagram/parser/blockDiagram.jison => block/parser/block.jison} (98%)
 rename packages/mermaid/src/diagrams/{blockDiagram/parser/blockDiagram.spec.ts => block/parser/block.spec.ts} (68%)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index a784b9d30..fdb2450ba 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -33,7 +33,7 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
-  blockDiagram?: BlockDiagramConfig;
+  block?: BlockDiagramConfig;
   dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
   fontSize?: number;
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 9c03e27f3..470a13fa0 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -19,6 +19,7 @@ import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
+import block from '../diagrams/block/blockDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -81,6 +82,7 @@ export const addDiagrams = () => {
     state,
     journey,
     quadrantChart,
-    sankey
+    sankey,
+    block
   );
 };
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
similarity index 91%
rename from packages/mermaid/src/diagrams/blockDiagram/blockDB.ts
rename to packages/mermaid/src/diagrams/block/blockDB.ts
index 265835cd7..4cb611b17 100644
--- a/packages/mermaid/src/diagrams/blockDiagram/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -23,7 +23,7 @@ const clear = (): void => {
 };
 
 export default {
-  getConfig: () => configApi.getConfig().blockDiagram,
+  getConfig: () => configApi.getConfig().block,
 
   getAccTitle,
   setAccTitle,
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts b/packages/mermaid/src/diagrams/block/blockDetector.ts
similarity index 84%
rename from packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts
rename to packages/mermaid/src/diagrams/block/blockDetector.ts
index 41dc91127..c4da643f0 100644
--- a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramDetector.ts
+++ b/packages/mermaid/src/diagrams/block/blockDetector.ts
@@ -1,9 +1,9 @@
 import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
-const id = 'sankey';
+const id = 'block';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*blockDiagram-beta/.test(txt);
+  return /^\s*block-beta/.test(txt);
 };
 
 const loader = async () => {
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts b/packages/mermaid/src/diagrams/block/blockDiagram.ts
similarity index 68%
rename from packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts
rename to packages/mermaid/src/diagrams/block/blockDiagram.ts
index c3913a7f2..1cd619749 100644
--- a/packages/mermaid/src/diagrams/blockDiagram/blockDiagram.ts
+++ b/packages/mermaid/src/diagrams/block/blockDiagram.ts
@@ -1,9 +1,9 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: jison doesn't export types
-import parser from './parser/sankey.jison';
+import parser from './parser/blockDiagram.jison';
 import db from './blockDB.js';
-import renderer from './blockDiagramRenderer.js';
-import { prepareTextForParsing } from './blockDiagramUtils.js';
+import renderer from './blockRenderer.js';
+import { prepareTextForParsing } from './blockUtils.js';
 
 const originalParse = parser.parse.bind(parser);
 parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/blockDiagram/blockDiagramRenderer.ts
rename to packages/mermaid/src/diagrams/block/blockRenderer.ts
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
new file mode 100644
index 000000000..28e5cd167
--- /dev/null
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -0,0 +1,5 @@
+import type { DiagramDB } from '../../diagram-api/types.js';
+
+export interface BlockDB extends DiagramDB {
+  clear: () => void;
+}
diff --git a/packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts b/packages/mermaid/src/diagrams/block/blockUtils.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/blockDiagram/blockDiagramUtils.ts
rename to packages/mermaid/src/diagrams/block/blockUtils.ts
diff --git a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
similarity index 98%
rename from packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison
rename to packages/mermaid/src/diagrams/block/parser/block.jison
index aced2c023..ba58a6097 100644
--- a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -27,7 +27,7 @@ CRLF \u000D\u000A
 
 %%
 
-"blockDiagram-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
+"block-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
 // \s*\%\%.*                                                       { yy.getLogger().info('Found comment',yytext); }
 [\s]+                                                           { yy.getLogger().info('.', yytext); /* skip all whitespace */  }
 [\n]+ {yy.getLogger().info('_', yytext);                 /* skip all whitespace */   }
diff --git a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
similarity index 68%
rename from packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts
rename to packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 3c076c04f..08b36c744 100644
--- a/packages/mermaid/src/diagrams/blockDiagram/parser/blockDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -1,58 +1,58 @@
 // @ts-ignore: jison doesn't export types
-import blockDiagram from './blockDiagram.jison';
+import block from './block.jison';
 import db from '../blockDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
-import { prepareTextForParsing } from '../blockDiagramUtils.js';
+import { prepareTextForParsing } from '../blockUtils.js';
 import * as fs from 'fs';
 import * as path from 'path';
 
 describe('Sankey diagram', function () {
   describe('when parsing an block diagram graph it should handle > ', function () {
     beforeEach(function () {
-      blockDiagram.parser.yy = db;
-      blockDiagram.parser.yy.clear();
-      blockDiagram.parser.yy.getLogger = () => console;
+      block.parser.yy = db;
+      block.parser.yy.clear();
+      block.parser.yy.getLogger = () => console;
     });
 
     it('a diagram with a node', async () => {
-      const str = `blockDiagram-beta
+      const str = `block-beta
           id
       `;
 
-      blockDiagram.parse(str);
+      block.parse(str);
     });
     it('a diagram with multiple nodes', async () => {
-      const str = `blockDiagram-beta
+      const str = `block-beta
           id1
           id2
       `;
 
-      blockDiagram.parse(str);
+      block.parse(str);
     });
     it('a node with a square shape and a label', async () => {
-      const str = `blockDiagram-beta
+      const str = `block-beta
           id["A label"]
           id2`;
 
-      blockDiagram.parse(str);
+      block.parse(str);
     });
     it('a diagram with multiple nodes with edges', async () => {
-      const str = `blockDiagram-beta
+      const str = `block-beta
           id1["first"]  -->   id2["second"]
       `;
 
-      blockDiagram.parse(str);
+      block.parse(str);
     });
     // it('a diagram with column statements', async () => {
-    //   const str = `blockDiagram-beta
+    //   const str = `block-beta
     //       columns 1
     //       block1["Block 1"]
     //   `;
 
-    //   blockDiagram.parse(str);
+    //   block.parse(str);
     // });
     // it('a diagram with block hierarchies', async () => {
-    //   const str = `blockDiagram-beta
+    //   const str = `block-beta
     //     columns 1
     //     block1[Block 1]
 
@@ -63,10 +63,10 @@ describe('Sankey diagram', function () {
     //     end %% End the compound block
     //   `;
 
-    //   blockDiagram.parse(str);
+    //   block.parse(str);
     // });
     // it('a diagram with differernt column values in different blocks', async () => {
-    //   const str = `blockDiagram-beta
+    //   const str = `block-beta
     //     columns 1
     //     block1[Block 1]
 
@@ -77,7 +77,7 @@ describe('Sankey diagram', function () {
     //     end %% End the compound block
     //   `;
 
-    //   blockDiagram.parse(str);
+    //   block.parse(str);
 
     //   // Todo check that the different blocks have different column values
     // });

From fee2b244a1796bbcb07661062830160d6cc06821 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Fri, 7 Jul 2023 14:12:18 +0300
Subject: [PATCH 032/193] Small cleanup

---
 packages/mermaid/src/config.type.ts           |  6 ++--
 .../mermaid/src/diagrams/block/blockDB.ts     | 33 ++++++++++---------
 .../src/diagrams/block/blockRenderer.ts       | 11 +------
 .../mermaid/src/diagrams/block/blockTypes.ts  |  6 ++++
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index fdb2450ba..becfc90e6 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1,6 +1,7 @@
 // TODO: This was auto generated from defaultConfig. Needs to be verified.
 
 import DOMPurify from 'dompurify';
+import { BlockConfig } from './diagrams/block/blockTypes.js';
 
 export interface MermaidConfig {
   theme?: string;
@@ -33,7 +34,7 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
-  block?: BlockDiagramConfig;
+  block?: BlockConfig;
   dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
   fontSize?: number;
@@ -422,9 +423,6 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
   linkColor?: SankeyLinkColor | string;
   nodeAlignment?: SankeyNodeAlignment;
 }
-export interface BlockDiagramConfig extends BaseDiagramConfig {
-  padding?: number;
-}
 
 export interface FontConfig {
   fontSize?: string | number;
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 4cb611b17..db216160a 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -1,12 +1,14 @@
+import type { BlockDB } from './blockTypes.js';
+
 import * as configApi from '../../config.js';
-import common from '../common/common.js';
+// import common from '../common/common.js';
 import {
-  setAccTitle,
-  getAccTitle,
-  getAccDescription,
-  setAccDescription,
-  setDiagramTitle,
-  getDiagramTitle,
+  // setAccTitle,
+  // getAccTitle,
+  // getAccDescription,
+  // setAccDescription,
+  // setDiagramTitle,
+  // getDiagramTitle,
   clear as commonClear,
 } from '../../commonDb.js';
 
@@ -14,7 +16,6 @@ type Block = {
   ID: string;
 };
 
-// Array of nodes guarantees their order
 let blocks: Block[] = [];
 
 const clear = (): void => {
@@ -22,14 +23,16 @@ const clear = (): void => {
   commonClear();
 };
 
-export default {
+const db: BlockDB = {
   getConfig: () => configApi.getConfig().block,
 
-  getAccTitle,
-  setAccTitle,
-  getAccDescription,
-  setAccDescription,
-  getDiagramTitle,
-  setDiagramTitle,
+  // getAccTitle,
+  // setAccTitle,
+  // getAccDescription,
+  // setAccDescription,
+  // getDiagramTitle,
+  // setDiagramTitle,
   clear,
 };
+
+export default db;
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 5a2f595bc..cfa9cc522 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -9,18 +9,14 @@ import {
 
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
-import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-  // Get the config
-  const { securityLevel, sankey: conf } = configApi.getConfig();
-  const defaultSankeyConfig = configApi!.defaultConfig!.blockDiagram!;
-
   // TODO:
   // This code repeats for every diagram
   // Figure out what is happening there, probably it should be separated
   // The main thing is svg object that is a d3 wrapper for svg operations
   //
+  const { securityLevel } = configApi.getConfig();
   let sandboxElement: any;
   if (securityLevel === 'sandbox') {
     sandboxElement = d3select('#i' + id);
@@ -44,11 +40,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Prepare data for construction based on diagObj.db
   // This must be a mutable object with `nodes` and `links` properties:
   //
-  //    {
-  //      "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ],
-  //      "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
-  //    }
-  //
   // @ts-ignore TODO: db type
   const graph = diagObj.db.getGraph();
 
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 28e5cd167..014e6b7cb 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -1,5 +1,11 @@
 import type { DiagramDB } from '../../diagram-api/types.js';
+import type { BaseDiagramConfig } from '../../config.type.js';
+
+export interface BlockConfig extends BaseDiagramConfig {
+  padding?: number;
+}
 
 export interface BlockDB extends DiagramDB {
   clear: () => void;
+  getConfig: () => BlockConfig | undefined;
 }

From 975f36c7db44d859e873c9349f6282dc367befdc Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Fri, 7 Jul 2023 14:14:30 +0300
Subject: [PATCH 033/193] Fixed block diagram parser import

---
 packages/mermaid/src/diagrams/block/blockDiagram.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDiagram.ts b/packages/mermaid/src/diagrams/block/blockDiagram.ts
index 1cd619749..667783f49 100644
--- a/packages/mermaid/src/diagrams/block/blockDiagram.ts
+++ b/packages/mermaid/src/diagrams/block/blockDiagram.ts
@@ -1,6 +1,6 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: jison doesn't export types
-import parser from './parser/blockDiagram.jison';
+import parser from './parser/block.jison';
 import db from './blockDB.js';
 import renderer from './blockRenderer.js';
 import { prepareTextForParsing } from './blockUtils.js';

From a23f0da2a411e109047977af62961b6d3821da43 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 8 Jul 2023 08:53:29 +0900
Subject: [PATCH 034/193] docs(katex): specified minimum version

---
 docs/config/math.md                      | 2 +-
 packages/mermaid/src/docs/config/math.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/config/math.md b/docs/config/math.md
index 6b0e26f77..731ebe690 100644
--- a/docs/config/math.md
+++ b/docs/config/math.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).
 
-# Math Configuration
+# Math Configuration (v10.3+)
 
 Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 
diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md
index b6b4e0e47..868e58c5f 100644
--- a/packages/mermaid/src/docs/config/math.md
+++ b/packages/mermaid/src/docs/config/math.md
@@ -1,4 +1,4 @@
-# Math Configuration
+# Math Configuration (v10.3+)
 
 Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 

From f15e8c9edb976005930a128ed57f6a8b36eea103 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 8 Jul 2023 10:45:36 +0900
Subject: [PATCH 035/193] Merge branch 'develop' of
 https://github.com/NicolasNewman/mermaid into feature/2776_katex_math

---
 .eslintrc.cjs                                 |   12 +
 .github/ISSUE_TEMPLATE/bug_report.yml         |   11 +-
 codecov.yaml => .github/codecov.yaml          |   11 +
 .github/pr-labeler.yml                        |    7 +-
 .github/workflows/build-docs.yml              |    4 +-
 .github/workflows/build.yml                   |    3 +-
 .github/workflows/check-readme-in-sync.yml    |    2 +-
 .github/workflows/checks.yml                  |    7 +-
 .github/workflows/e2e-applitools.yml          |    2 +-
 .github/workflows/e2e.yml                     |   13 +-
 .github/workflows/lint.yml                    |   16 +-
 .../workflows/pr-labeler-config-validator.yml |   14 +-
 .github/workflows/publish-docs.yml            |    6 +-
 .github/workflows/release-preview-publish.yml |    2 +-
 .github/workflows/test.yml                    |   15 +-
 .github/workflows/update-browserlist.yml      |    2 +-
 .prettierignore                               |    6 +-
 .vite/build.ts                                |    2 +
 .vite/jsonSchemaPlugin.ts                     |  150 ++
 CITATION.cff                                  |   16 +
 README.md                                     |    4 +-
 README.zh-CN.md                               |    2 +-
 __mocks__/sankeyRenderer.js                   |   13 +
 cSpell.json                                   |   11 +
 cypress/integration/rendering/sankey.spec.ts  |  144 ++
 .../rendering/sequencediagram.spec.js         |   75 +
 demos/classchart.html                         |   23 +
 demos/index.html                              |    3 +
 demos/sankey.html                             |  108 +
 docker-compose.yml                            |   29 +-
 docs/config/Tutorials.md                      |    4 +
 docs/config/setup/modules/defaultConfig.md    |   35 +-
 docs/config/setup/modules/mermaidAPI.md       |    2 +-
 docs/config/theming.md                        |    6 +-
 docs/ecosystem/integrations.md                |   10 +-
 docs/news/announcements.md                    |    6 +-
 docs/news/blog.md                             |   12 +
 docs/syntax/flowchart.md                      |   18 +
 docs/syntax/gantt.md                          |   88 +-
 docs/syntax/sankey.md                         |  294 +++
 docs/syntax/sequenceDiagram.md                |   37 +
 docs/syntax/stateDiagram.md                   |    2 +-
 docs/syntax/timeline.md                       |   12 +-
 package.json                                  |   20 +-
 .../src/exampleDiagramDb.js                   |    1 -
 .../src/exampleDiagramRenderer.js             |    1 -
 .../src/mermaidUtils.ts                       |    2 +-
 packages/mermaid/.lintstagedrc.mjs            |    1 +
 packages/mermaid/package.json                 |   23 +-
 .../scripts/create-types-from-json-schema.mts |  252 ++
 packages/mermaid/src/accessibility.spec.ts    |  146 +-
 packages/mermaid/src/accessibility.ts         |   49 +-
 packages/mermaid/src/assignWithDepth.js       |    2 +-
 packages/mermaid/src/config.spec.js           |   56 -
 packages/mermaid/src/config.spec.ts           |   72 +
 packages/mermaid/src/config.ts                |    8 +-
 packages/mermaid/src/config.type.ts           | 1020 +++++++-
 .../mermaid/src/dagre-wrapper/GraphObjects.md |    6 +-
 packages/mermaid/src/dagre-wrapper/nodes.js   |    2 +
 packages/mermaid/src/defaultConfig.ts         | 2120 +----------------
 .../src/diagram-api/diagram-orchestration.ts  |    4 +-
 .../mermaid/src/diagram-api/diagramAPI.ts     |    5 +-
 packages/mermaid/src/diagram-api/types.ts     |    2 +
 .../mermaid/src/diagrams/class/classDb.ts     |    3 +-
 .../src/diagrams/class/classDiagram.spec.ts   |   45 +
 .../src/diagrams/class/classRenderer-v2.ts    |   79 +-
 .../src/diagrams/class/classRenderer.js       |    2 -
 .../mermaid/src/diagrams/class/classTypes.ts  |    1 +
 .../mermaid/src/diagrams/er/erRenderer.js     |    7 -
 .../mermaid/src/diagrams/flowchart/flowDb.js  |    7 +-
 .../src/diagrams/flowchart/flowRenderer.js    |    7 -
 .../flowchart/parser/flow-style.spec.js       |   16 +
 .../src/diagrams/flowchart/parser/flow.jison  |   12 +-
 .../src/diagrams/gantt/ganttRenderer.js       |    2 -
 .../src/diagrams/git/gitGraphRenderer-old.js  |    7 -
 .../src/diagrams/mindmap/mindmapRenderer.js   |    6 -
 .../mermaid/src/diagrams/pie/pieRenderer.js   |    3 -
 .../quadrant-chart/quadrantBuilder.ts         |    5 +-
 .../requirement/requirementRenderer.js        |    2 -
 .../src/diagrams/sankey/parser/energy.csv     |   99 +
 .../src/diagrams/sankey/parser/sankey.jison   |   69 +
 .../src/diagrams/sankey/parser/sankey.spec.ts |   24 +
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |   81 +
 .../src/diagrams/sankey/sankeyDetector.ts     |   20 +
 .../src/diagrams/sankey/sankeyDiagram.ts      |   15 +
 .../src/diagrams/sankey/sankeyRenderer.ts     |  205 ++
 .../src/diagrams/sankey/sankeyUtils.ts        |    8 +
 .../sequence/parser/sequenceDiagram.jison     |   12 +-
 .../src/diagrams/sequence/sequenceDb.js       |   52 +-
 .../diagrams/sequence/sequenceDiagram.spec.js |   64 +-
 .../src/diagrams/sequence/sequenceRenderer.ts |  192 +-
 .../mermaid/src/diagrams/sequence/svgDraw.js  |   64 +-
 .../src/diagrams/state/stateRenderer-v2.js    |    2 +-
 .../src/diagrams/state/stateRenderer.js       |    2 -
 .../src/diagrams/timeline/timelineRenderer.ts |    6 -
 .../diagrams/user-journey/journeyRenderer.ts  |    2 -
 packages/mermaid/src/docs.mts                 |  147 +-
 .../docs/.vitepress/components/HomePage.vue   |    8 +-
 .../mermaid/src/docs/.vitepress/config.ts     |    2 +
 .../src/docs/.vitepress/contributors.ts       |  113 +-
 .../docs/.vitepress/mermaid-markdown-all.ts   |    9 +
 .../docs/.vitepress/scripts/fetch-avatars.ts  |   15 +-
 .../.vitepress/scripts/fetch-contributors.ts  |   50 +-
 .../src/docs/.vitepress/teamMembers.ts        |  105 +
 packages/mermaid/src/docs/config/Tutorials.md |    4 +
 packages/mermaid/src/docs/config/theming.md   |    6 +-
 .../src/docs/ecosystem/integrations.md        |   10 +-
 .../mermaid/src/docs/news/announcements.md    |    6 +-
 packages/mermaid/src/docs/news/blog.md        |   12 +
 packages/mermaid/src/docs/package.json        |    5 +-
 packages/mermaid/src/docs/syntax/flowchart.md |   10 +
 packages/mermaid/src/docs/syntax/gantt.md     |   45 +-
 packages/mermaid/src/docs/syntax/sankey.md    |  182 ++
 .../src/docs/syntax/sequenceDiagram.md        |   25 +
 .../mermaid/src/docs/syntax/stateDiagram.md   |    2 +-
 packages/mermaid/src/docs/syntax/timeline.md  |    8 +-
 packages/mermaid/src/mermaidAPI.spec.ts       |   54 +-
 packages/mermaid/src/mermaidAPI.ts            |   26 +-
 packages/mermaid/src/rendering-util/uid.ts    |   18 +
 .../mermaid/src/schemas/config.schema.yaml    | 1894 +++++++++++++++
 packages/mermaid/src/styles.ts                |    9 +-
 packages/mermaid/src/tests/MockedD3.ts        |   11 +-
 pnpm-lock.yaml                                | 1452 ++++++++---
 run                                           |   81 +-
 vite.config.ts                                |    4 +-
 125 files changed, 7287 insertions(+), 3178 deletions(-)
 rename codecov.yaml => .github/codecov.yaml (56%)
 create mode 100644 .vite/jsonSchemaPlugin.ts
 create mode 100644 CITATION.cff
 create mode 100644 __mocks__/sankeyRenderer.js
 create mode 100644 cypress/integration/rendering/sankey.spec.ts
 create mode 100644 demos/sankey.html
 create mode 100644 docs/syntax/sankey.md
 create mode 100644 packages/mermaid/scripts/create-types-from-json-schema.mts
 delete mode 100644 packages/mermaid/src/config.spec.js
 create mode 100644 packages/mermaid/src/config.spec.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/energy.csv
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey.jison
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDB.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
 create mode 100644 packages/mermaid/src/docs/.vitepress/teamMembers.ts
 create mode 100644 packages/mermaid/src/docs/syntax/sankey.md
 create mode 100644 packages/mermaid/src/rendering-util/uid.ts
 create mode 100644 packages/mermaid/src/schemas/config.schema.yaml

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e6f99a8bf..cae97e586 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -38,6 +38,10 @@ module.exports = {
     'lodash',
     'unicorn',
   ],
+  ignorePatterns: [
+    // this file is automatically generated by `pnpm run --filter mermaid types:build-config`
+    'packages/mermaid/src/config.type.ts',
+  ],
   rules: {
     curly: 'error',
     'no-console': 'error',
@@ -123,6 +127,14 @@ module.exports = {
       files: ['*.{ts,tsx}'],
       plugins: ['tsdoc'],
       rules: {
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: 'TSEnumDeclaration',
+            message:
+              'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
+          },
+        ],
         'tsdoc/syntax': 'error',
       },
     },
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 1b84bfd45..2f87cd60c 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -53,8 +53,17 @@ body:
         Please fill out the info below.
         Note that you only need to fill out the relevant section
       value: |-
-        - Mermaid version: 
+        - Mermaid version:
         - Browser and Version: [Chrome, Edge, Firefox]
+  - type: textarea
+    attributes:
+      label: Suggested Solutions
+      description: >
+        If applicable, suggest solutions that could resolve the bug.
+        It would help maintainers/contributors to not waste time looking for the solution. Even pointing the line causing the bug would be great!
+      placeholder: |-
+        - Variable `parser` in file  is not initialised ...
+        - Add a new type for ...
   - type: textarea
     attributes:
       label: Additional Context
diff --git a/codecov.yaml b/.github/codecov.yaml
similarity index 56%
rename from codecov.yaml
rename to .github/codecov.yaml
index b268d6680..950edb6a9 100644
--- a/codecov.yaml
+++ b/.github/codecov.yaml
@@ -1,6 +1,17 @@
+codecov:
+  branch: develop
+
 comment:
   layout: 'reach, diff, flags, files'
   behavior: default
   require_changes: false # if true: only post the comment if coverage changes
   require_base: no # [yes :: must have a base report to post]
   require_head: yes # [yes :: must have a head report to post]
+
+coverage:
+  status:
+    project:
+      off
+      # Turing off for now as code coverage isn't stable and causes unnecessary build failures.
+      # default:
+      #   threshold: 2%
diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml
index 077cc568b..0bbd8db66 100644
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@@ -1,3 +1,4 @@
-'Type: Bug / Error': 'bug/*'
-'Type: Enhancement': 'feature/*'
-'Type: Other': 'other/*'
+'Type: Bug / Error': ['bug/*', fix/*]
+'Type: Enhancement': ['feature/*', 'feat/*']
+'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
+'Area: Documentation': ['docs/*']
diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index f3e440fce..b25ff89cc 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -2,13 +2,13 @@ name: Build Vitepress docs
 
 on:
   pull_request:
+  merge_group:
 
 permissions:
   contents: read
 
 jobs:
-  # Build job
-  build:
+  build-docs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 2a70b5901..eeb557ebb 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -2,6 +2,7 @@ name: Build
 
 on:
   push: {}
+  merge_group:
   pull_request:
     types:
       - opened
@@ -12,7 +13,7 @@ permissions:
   contents: read
 
 jobs:
-  build:
+  build-mermaid:
     runs-on: ubuntu-latest
     strategy:
       matrix:
diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml
index 13912e5b9..5a8ca319b 100644
--- a/.github/workflows/check-readme-in-sync.yml
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -14,7 +14,7 @@ permissions:
   contents: read
 
 jobs:
-  check:
+  check-readme:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 396ff4e6e..9f9f316c4 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -1,15 +1,16 @@
 on:
-  push: {}
+  push:
+  merge_group:
   pull_request:
     types:
       - opened
       - synchronize
       - ready_for_review
 
-name: Static analysis
+name: Static analysis on Test files
 
 jobs:
-  test:
+  check-tests:
     runs-on: ubuntu-latest
     name: check tests
     if: github.repository_owner == 'mermaid-js'
diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml
index 92f2f80b1..5b1943142 100644
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -19,7 +19,7 @@ env:
   USE_APPLI: ${{ secrets.APPLITOOLS_API_KEY && 'true' || '' }}
 
 jobs:
-  test:
+  e2e-applitools:
     runs-on: ubuntu-latest
     strategy:
       matrix:
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 64637c5fb..6777a1e4f 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -1,12 +1,15 @@
 name: E2E
 
-on: [push, pull_request]
+on:
+  push:
+  pull_request:
+  merge_group:
 
 permissions:
   contents: read
 
 jobs:
-  build:
+  e2e:
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -44,13 +47,15 @@ jobs:
           VITEST_COVERAGE: true
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
-        if: steps.cypress.conclusion == 'success'
+        # Run step only pushes to develop and pull_requests
+        if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:
           files: coverage/cypress/lcov.info
           flags: e2e
           name: mermaid-codecov
-          fail_ci_if_error: true
+          fail_ci_if_error: false
           verbose: true
+          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index d4bf4afe8..493bacaf7 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -1,7 +1,8 @@
 name: Lint
 
 on:
-  push: {}
+  push:
+  merge_group:
   pull_request:
     types:
       - opened
@@ -52,6 +53,19 @@ jobs:
               exit 1
           fi
 
+      - name: Verify `./src/config.type.ts` is in sync with `./src/schemas/config.schema.yaml`
+        shell: bash
+        run: |
+          if ! pnpm run --filter mermaid types:verify-config; then
+            ERROR_MESSAGE='Running `pnpm run --filter mermaid types:verify-config` failed.'
+            ERROR_MESSAGE+=' This should be fixed by running'
+            ERROR_MESSAGE+=' `pnpm run --filter mermaid types:build-config`'
+            ERROR_MESSAGE+=' on your local machine.'
+            echo "::error title=Lint failure::${ERROR_MESSAGE}"
+              # make sure to return an error exitcode so that GitHub actions shows a red-cross
+              exit 1
+          fi
+
       - name: Verify Docs
         id: verifyDocs
         working-directory: ./packages/mermaid
diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
index af5c477d6..ff5d8d0a1 100644
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -1,11 +1,15 @@
 name: Validate PR Labeler Configuration
 on:
-  push: {}
+  push:
+    paths:
+      - .github/workflows/pr-labeler-config-validator.yml
+      - .github/workflows/pr-labeler.yml
+      - .github/pr-labeler.yml
   pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
+    paths:
+      - .github/workflows/pr-labeler-config-validator.yml
+      - .github/workflows/pr-labeler.yml
+      - .github/pr-labeler.yml
 
 jobs:
   pr-labeler:
diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index b556c1b1d..f63e58750 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -19,7 +19,7 @@ concurrency:
 
 jobs:
   # Build job
-  build:
+  build-docs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -48,11 +48,11 @@ jobs:
           path: packages/mermaid/src/vitepress/.vitepress/dist
 
   # Deployment job
-  deploy:
+  deploy-docs:
     environment:
       name: github-pages
     runs-on: ubuntu-latest
-    needs: build
+    needs: build-docs
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 5f4936ab6..221e3836e 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -6,7 +6,7 @@ on:
       - 'release/**'
 
 jobs:
-  publish:
+  publish-preview:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 6bae6b71f..7c32795e8 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,12 +1,12 @@
 name: Unit Tests
 
-on: [push, pull_request]
+on: [push, pull_request, merge_group]
 
 permissions:
   contents: read
 
 jobs:
-  build:
+  unit-test:
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -43,15 +43,12 @@ jobs:
 
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
+        # Run step only pushes to develop and pull_requests
+        if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:
           files: ./coverage/vitest/lcov.info
           flags: unit
           name: mermaid-codecov
-          fail_ci_if_error: true
+          fail_ci_if_error: false
           verbose: true
-      # Coveralls is throwing 500. Disabled for now.
-      # - name: Upload Coverage to Coveralls
-      #   uses: coverallsapp/github-action@v2
-      #   with:
-      #     github-token: ${{ secrets.GITHUB_TOKEN }}
-      #     flag-name: unit
+          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml
index 4155ec988..813a400b3 100644
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -5,7 +5,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  build:
+  update-browser-list:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
diff --git a/.prettierignore b/.prettierignore
index 2ab91f93e..8a9086315 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,8 @@ coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
 stats
-packages/mermaid/src/docs/.vitepress/components.d.ts
+**/.vitepress/components.d.ts
+**/.vitepress/cache
+.nyc_output
+# Autogenerated by `pnpm run --filter mermaid types:build-config`
+packages/mermaid/src/config.type.ts
diff --git a/.vite/build.ts b/.vite/build.ts
index 85c9b7fa0..b89df9e31 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -2,6 +2,7 @@ import { build, InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
+import jsonSchemaPlugin from './jsonSchemaPlugin.js';
 import { readFileSync } from 'fs';
 import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -121,6 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     plugins: [
       jisonPlugin(),
+      jsonSchemaPlugin(), // handles `.schema.yaml` files
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts
new file mode 100644
index 000000000..671a9612e
--- /dev/null
+++ b/.vite/jsonSchemaPlugin.ts
@@ -0,0 +1,150 @@
+import { load, JSON_SCHEMA } from 'js-yaml';
+import assert from 'node:assert';
+import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+import { PluginOption } from 'vite';
+
+import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js';
+
+/**
+ * All of the keys in the mermaid config that have a mermaid diagram config.
+ */
+const MERMAID_CONFIG_DIAGRAM_KEYS = [
+  'flowchart',
+  'sequence',
+  'gantt',
+  'journey',
+  'class',
+  'state',
+  'er',
+  'pie',
+  'quadrantChart',
+  'requirement',
+  'mindmap',
+  'timeline',
+  'gitGraph',
+  'c4',
+  'sankey',
+] as const;
+
+/**
+ * Generate default values from the JSON Schema.
+ *
+ * AJV does not support nested default values yet (or default values with $ref),
+ * so we need to manually find them (this may be fixed in ajv v9).
+ *
+ * @param mermaidConfigSchema - The Mermaid JSON Schema to use.
+ * @returns The default mermaid config object.
+ */
+function generateDefaults(mermaidConfigSchema: JSONSchemaType) {
+  const ajv = new Ajv2019({
+    useDefaults: true,
+    allowUnionTypes: true,
+    strict: true,
+  });
+
+  ajv.addKeyword({
+    keyword: 'meta:enum', // used by jsonschema2md
+    errors: false,
+  });
+  ajv.addKeyword({
+    keyword: 'tsType', // used by json-schema-to-typescript
+    errors: false,
+  });
+
+  // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718
+  // (may be fixed in v9) so we need to manually use sub-schemas
+  const mermaidDefaultConfig = {};
+
+  assert.ok(mermaidConfigSchema.$defs);
+  const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig;
+
+  for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) {
+    const subSchemaRef = mermaidConfigSchema.properties[key].$ref;
+    const [root, defs, defName] = subSchemaRef.split('/');
+    assert.strictEqual(root, '#');
+    assert.strictEqual(defs, '$defs');
+    const subSchema = {
+      $schema: mermaidConfigSchema.$schema,
+      $defs: mermaidConfigSchema.$defs,
+      ...mermaidConfigSchema.$defs[defName],
+    } as JSONSchemaType;
+
+    const validate = ajv.compile(subSchema);
+
+    mermaidDefaultConfig[key] = {};
+
+    for (const required of subSchema.required ?? []) {
+      if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) {
+        mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default;
+      }
+    }
+    if (!validate(mermaidDefaultConfig[key])) {
+      throw new Error(
+        `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify(
+          validate.errors,
+          undefined,
+          2
+        )}`
+      );
+    }
+  }
+
+  const validate = ajv.compile(mermaidConfigSchema);
+
+  if (!validate(mermaidDefaultConfig)) {
+    throw new Error(
+      `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify(
+        validate.errors,
+        undefined,
+        2
+      )}`
+    );
+  }
+
+  return mermaidDefaultConfig;
+}
+
+/**
+ * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file.
+ *
+ * Use `my-example.schema.yaml?only-defaults=true` to only load the default values.
+ */
+export default function jsonSchemaPlugin(): PluginOption {
+  return {
+    name: 'json-schema-plugin',
+    transform(src: string, id: string) {
+      const idAsUrl = new URL(id, 'file:///');
+
+      if (!idAsUrl.pathname.endsWith('schema.yaml')) {
+        return;
+      }
+
+      if (idAsUrl.searchParams.get('only-defaults')) {
+        const jsonSchema = load(src, {
+          filename: idAsUrl.pathname,
+          // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+          // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+          schema: JSON_SCHEMA,
+        }) as JSONSchemaType;
+        return {
+          code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`,
+          map: null, // no source map
+        };
+      } else {
+        return {
+          code: `export default ${JSON.stringify(
+            load(src, {
+              filename: idAsUrl.pathname,
+              // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+              // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+              schema: JSON_SCHEMA,
+            }),
+            undefined,
+            2
+          )};`,
+          map: null, // provide source map if available
+        };
+      }
+    },
+  };
+}
diff --git a/CITATION.cff b/CITATION.cff
new file mode 100644
index 000000000..2f14a4b3d
--- /dev/null
+++ b/CITATION.cff
@@ -0,0 +1,16 @@
+cff-version: 1.2.0
+title: 'Mermaid: Generate diagrams from markdown-like text'
+message: >-
+  If you use this software, please cite it using the metadata from this file.
+type: software
+authors:
+  - family-names: Sveidqvist
+    given-names: Knut
+  - name: 'Contributors to Mermaid'
+repository-code: 'https://github.com/mermaid-js/mermaid'
+date-released: 2014-12-02
+url: 'https://mermaid.js.org/'
+abstract: >-
+  JavaScript based diagramming and charting tool that renders Markdown-inspired
+  text definitions to create and modify diagrams dynamically.
+license: MIT
diff --git a/README.md b/README.md
index f1df0966b..bdffbe175 100644
--- a/README.md
+++ b/README.md
@@ -386,7 +386,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to npmjs.org.
+The above command generates files into the `dist` folder and publishes them to .
 
 ## Related projects
 
@@ -402,7 +402,7 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 9af34998d..9a2e797be 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -322,7 +322,7 @@ Rel(SystemC, customerA, "Sends e-mails to")
 npm publish
 ```
 
-以上的命令会将文件打包到 `dist` 目录并发布至 npmjs.org.
+以上的命令会将文件打包到 `dist` 目录并发布至 .
 
 ## 相关项目
 
diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js
new file mode 100644
index 000000000..76324c93f
--- /dev/null
+++ b/__mocks__/sankeyRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked Sankey diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
diff --git a/cSpell.json b/cSpell.json
index 803eee3b6..c6f8cfe60 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -40,8 +40,10 @@
     "dompurify",
     "edgechromium",
     "elkjs",
+    "elle",
     "faber",
     "flatmap",
+    "foswiki",
     "ftplugin",
     "gantt",
     "gitea",
@@ -51,6 +53,7 @@
     "graphviz",
     "grav",
     "greywolf",
+    "gzipped",
     "huynh",
     "huynhicode",
     "inkdrop",
@@ -85,7 +88,10 @@
     "mkdocs",
     "mmorel",
     "mult",
+    "neurodiverse",
     "nextra",
+    "nikolay",
+    "nirname",
     "orlandoni",
     "pathe",
     "pbrolin",
@@ -99,10 +105,13 @@
     "ranksep",
     "rect",
     "rects",
+    "reda",
     "redmine",
     "rehype",
     "roledescription",
+    "rozhkov",
     "sandboxed",
+    "sankey",
     "setupgraphviewbox",
     "shiki",
     "sidharth",
@@ -117,6 +126,7 @@
     "stylis",
     "subhash-halder",
     "substate",
+    "sulais",
     "sveidqvist",
     "swimm",
     "techn",
@@ -140,6 +150,7 @@
     "vueuse",
     "xlink",
     "yash",
+    "yokozuna",
     "zenuml"
   ],
   "patterns": [
diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
new file mode 100644
index 000000000..e334b898b
--- /dev/null
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -0,0 +1,144 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Sankey Diagram', () => {
+  it('should render a simple example', () => {
+    imgSnapshotTest(
+      `
+      sankey-beta
+      
+      sourceNode,targetNode,10
+      `,
+      {}
+    );
+  });
+
+  describe('when given a linkColor', function () {
+    this.beforeAll(() => {
+      cy.wrap(
+        `sankey-beta
+      a,b,10
+      `
+      ).as('graph');
+    });
+
+    it('links should use hex color', function () {
+      renderGraph(this.graph, { sankey: { linkColor: '#636465' } });
+
+      cy.get('.link path').should((link) => {
+        expect(link.attr('stroke')).to.equal('#636465');
+      });
+    });
+
+    it('links should be the same color as source node', function () {
+      renderGraph(this.graph, { sankey: { linkColor: 'source' } });
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-1"] rect').should((node) =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('links should be the same color as target node', function () {
+      renderGraph(this.graph, { sankey: { linkColor: 'target' } });
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-2"] rect').should((node) =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('links must be gradient', function () {
+      renderGraph(this.graph, { sankey: { linkColor: 'gradient' } });
+
+      cy.get('.link path').should((link) => {
+        expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
+      });
+    });
+  });
+
+  describe('when given a nodeAlignment', function () {
+    this.beforeAll(() => {
+      cy.wrap(
+        `
+        sankey-beta
+        
+        a,b,8
+        b,c,8
+        c,d,8
+        d,e,8
+        
+        x,c,4
+        c,y,4  
+        `
+      ).as('graph');
+    });
+
+    this.afterEach(() => {
+      cy.get('.node[id="node-1"]').should((node) => {
+        expect(node.attr('x')).to.equal('0');
+      });
+      cy.get('.node[id="node-2"]').should((node) => {
+        expect(node.attr('x')).to.equal('100');
+      });
+      cy.get('.node[id="node-3"]').should((node) => {
+        expect(node.attr('x')).to.equal('200');
+      });
+      cy.get('.node[id="node-4"]').should((node) => {
+        expect(node.attr('x')).to.equal('300');
+      });
+      cy.get('.node[id="node-5"]').should((node) => {
+        expect(node.attr('x')).to.equal('400');
+      });
+    });
+
+    it('should justify nodes', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('0');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('400');
+      });
+    });
+
+    it('should align nodes left', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('0');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('300');
+      });
+    });
+
+    it('should align nodes right', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('100');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('400');
+      });
+    });
+
+    it('should center nodes', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('100');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('300');
+      });
+    });
+  });
+});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 185cc4133..7d36c1ff1 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -156,6 +156,81 @@ context('Sequence diagram', () => {
       `
     );
   });
+  it('should render a sequence diagram with basic actor creation and destruction', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice ->> Bob: Hello Bob, how are you ?
+      Bob ->> Alice: Fine, thank you. And you?
+      create participant Polo
+      Alice ->> Polo: Hi Polo!
+      create actor Ola1 as Ola
+      Polo ->> Ola1: Hiii
+      Ola1 ->> Alice: Hi too
+      destroy Ola1
+      Alice --x Ola1: Bye!
+      Alice ->> Bob: And now?
+      create participant Ola2 as Ola
+      Alice ->> Ola2: Hello again
+      destroy Alice
+      Alice --x Ola2: Bye for me!
+      destroy Bob
+      Ola2 --> Bob: The end
+      `
+    );
+  });
+  it('should render a sequence diagram with actor creation and destruction coupled with backgrounds, loops and notes', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+			accTitle: test the accTitle
+			accDescr: Test a description
+
+			participant Alice
+      participant Bob
+			autonumber 10 10
+			rect rgb(200, 220, 100)
+			rect rgb(200, 255, 200)
+
+			Alice ->> Bob: Hello Bob, how are you?
+      create participant John as John
    Second Line
+			Bob-->>John: How about you John?
+			end
+
+			Bob--x Alice: I am good thanks!
+			Bob-x John: I am good thanks!
+			Note right of John: John thinks a long
    long time, so long
    that the text does
    not fit on a row.
+
+			Bob-->Alice: Checking with John...
+			Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+			Bob-x John: Hey John - we're still waiting to know
    how you're doing
+			Note over John:nowrap: John's trying hard not to break his train of thought.
+      destroy John
+			Bob-x John: John! Cmon!
+			Note over John: After a few more moments, John
    finally snaps out of it.
+			end
+
+			autonumber off
+			alt either this
+      create actor Lola
+			Alice->>+Lola: Yes
+			Lola-->>-Alice: OK
+			else or this
+			autonumber
+			Alice->>Lola: No
+			else or this will happen
+			Alice->Lola: Maybe
+			end
+			autonumber 200
+			par this happens in parallel
+      destroy Bob
+			Alice -->> Bob: Parallel message 1
+			and
+			Alice -->> Lola: Parallel message 2
+			end
+      `
+    );
+  });
   context('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
diff --git a/demos/classchart.html b/demos/classchart.html
index b20dda2a3..508bb1066 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -154,6 +154,29 @@
     
    
     
    
 
+    
    +    classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2
+    
    
+    
    
+
     
+  
+
diff --git a/docker-compose.yml b/docker-compose.yml
index 2762f3b99..c881d0473 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,9 +1,36 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.16.0-alpine3.18
+    image: node:18.16.1-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid
+    mem_limit: '2G'
+    environment:
+      - NODE_OPTIONS=--max_old_space_size=2048
     volumes:
       - ./:/mermaid
+      - root_cache:/root/.cache
+      - root_local:/root/.local
+      - root_npm:/root/.npm
+    ports:
+      - 9000:9000
+      - 3333:3333
+  cypress:
+    image: cypress/included:12.16.0
+    stdin_open: true
+    tty: true
+    working_dir: /mermaid
+    mem_limit: '2G'
+    entrypoint: cypress
+    environment:
+      - DISPLAY
+    volumes:
+      - ./:/mermaid
+      - /tmp/.X11-unix:/tmp/.X11-unix
+    network_mode: host
+
+volumes:
+  root_cache:
+  root_local:
+  root_npm:
diff --git a/docs/config/Tutorials.md b/docs/config/Tutorials.md
index 7b1530eaa..8f6d7e1ab 100644
--- a/docs/config/Tutorials.md
+++ b/docs/config/Tutorials.md
@@ -26,6 +26,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 
 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
 
+## Mermaid with OpenAI
+
+[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
+
 ## Mermaid with HTML
 
 Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 7d21597ac..a55ec1808 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2304](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2304)
+[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
 
 ---
 
@@ -22,35 +22,12 @@
 
 • `Const` **default**: `Partial`<`MermaidConfig`>
 
-**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click
-here](8.6.0_docs.md)].**
+Default mermaid configuration options.
 
-## **What follows are config instructions for older versions**
-
-These are the default options which can be overridden with the initialization call like so:
-
-**Example 1:**
-
-```js
-mermaid.initialize({ flowchart: { htmlLabels: false } });
-```
-
-**Example 2:**
-
-```html
-
-```
-
-A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
-A description of each option follows below.
+Please see the Mermaid config JSON Schema for the default JSON values.
+Non-JSON JS default values are listed in this file, e.g. functions, or
+`undefined` (explicitly set so that `configKeys` finds them).
 
 #### Defined in
 
-[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
+[defaultConfig.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L16)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 591b6841a..72f18cace 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
+[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
 
 ## Functions
 
diff --git a/docs/config/theming.md b/docs/config/theming.md
index 580afb488..63271a39b 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -73,9 +73,9 @@ To make a custom theme, modify `themeVariables` via `init`.
 
 You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
 
-| Parameter      | Description                          | Type   | Properties                                                                                          |
-| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
-| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
+| Parameter      | Description                          | Type   | Properties                                                                          |
+| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
 
 Example of modifying `themeVariables` using the `init` directive:
 
diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 28db3afff..896a23c56 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -66,7 +66,7 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## Blogs
 
-- [Wordpress](https://wordpress.org)
+- [WordPress](https://wordpress.org)
   - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
   - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
@@ -84,7 +84,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
+  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
 ## Communication
 
@@ -104,7 +104,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [FosWiki](https://foswiki.org)
+- [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
@@ -161,6 +161,8 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [CKEditor](https://github.com/ckeditor/ckeditor5)
   - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
+- [Standard Notes](https://standardnotes.com/)
+  - [sn-mermaid](https://github.com/nienow/sn-mermaid)
 
 ## Document Generation
 
@@ -172,7 +174,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
-- [jSDoc](https://jsdoc.app/)
+- [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index a843ae419..ff67c57d0 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
 
-8 June 2023 · 7 mins
+29 June 2023 · 4 mins
 
-A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 48b669d79..6b187d406 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,18 @@
 
 # Blog
 
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
+
+29 June 2023 · 4 mins
+
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
+
+## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
+
+15 June 2023 · 12 mins
+
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
+
 ## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
 
 8 June 2023 · 7 mins
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index a47061025..92678fb6e 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -991,6 +991,24 @@ flowchart LR
     classDef someclass fill:#f96
 ```
 
+This form can be used when declaring multiple links between nodes:
+
+```mermaid-example
+flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef foobar stroke:#00f
+```
+
+```mermaid
+flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef foobar stroke:#00f
+```
+
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 091cdeabe..8e64a268a 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -25,25 +25,25 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ```mermaid
 gantt
     title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Syntax
@@ -117,17 +117,17 @@ gantt
 It is possible to set multiple dependencies separated by space:
 
 ```mermaid-example
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
+gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
 ```
 
 ```mermaid
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
+gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
 ```
 
 ### Title
@@ -146,22 +146,22 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 
 ```mermaid-example
 gantt
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ```mermaid
 gantt
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -296,29 +296,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    %% this is a comment
-    dateFormat  YYYY-MM-DD
+    %% This is a comment
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
-    dateFormat  YYYY-MM-DD
+    %% This is a comment
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Styling
@@ -440,7 +438,7 @@ Beginner's tip—a full example using interactive links in an html context:
       dateFormat  YYYY-MM-DD
 
       section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
+      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
       Print arguments         :cl2, after cl1, 3d
       Print task              :cl3, after cl2, 3d
 
diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
new file mode 100644
index 000000000..156e82f5a
--- /dev/null
+++ b/docs/syntax/sankey.md
@@ -0,0 +1,294 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
+
+# Sankey diagrams
+
+> A sankey diagram is a visualization used to depict a flow from one set of values to another.
+
+::: warning
+This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
+:::
+
+The things being connected are called nodes and the connections are called links.
+
+## Example
+
+This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
+
+```mermaid-example
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+```
+
+```mermaid
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+```
+
+## Syntax
+
+The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
+
+It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+
+- CSV must contain **3 columns only**
+- It is **allowed** to have **empty lines** without comma separators for visual purposes
+
+### Basic
+
+It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
+
+```mermaid-example
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+```
+
+```mermaid
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+```
+
+### Empty Lines
+
+CSV does not support empty lines without comma delimeters by default. But you can add them if needed:
+
+```mermaid-example
+sankey-beta
+
+Bio-conversion,Losses,26.862
+
+Bio-conversion,Solid,280.322
+
+Bio-conversion,Gas,81.144
+```
+
+```mermaid
+sankey-beta
+
+Bio-conversion,Losses,26.862
+
+Bio-conversion,Solid,280.322
+
+Bio-conversion,Gas,81.144
+```
+
+### Commas
+
+If you need to have a comma, wrap it in double quotes:
+
+```mermaid-example
+sankey-beta
+
+Pumped heat,"Heating and cooling, homes",193.026
+Pumped heat,"Heating and cooling, commercial",70.672
+```
+
+```mermaid
+sankey-beta
+
+Pumped heat,"Heating and cooling, homes",193.026
+Pumped heat,"Heating and cooling, commercial",70.672
+```
+
+### Double Quotes
+
+If you need to have double quote, put a pair of them inside quoted string:
+
+```mermaid-example
+sankey-beta
+
+Pumped heat,"Heating and cooling, ""homes""",193.026
+Pumped heat,"Heating and cooling, ""commercial""",70.672
+```
+
+```mermaid
+sankey-beta
+
+Pumped heat,"Heating and cooling, ""homes""",193.026
+Pumped heat,"Heating and cooling, ""commercial""",70.672
+```
+
+## Configuration
+
+You can customize link colors, node alignments and diagram dimensions.
+
+```html
+
+```
+
+### Links Coloring
+
+You can adjust links' color by setting `linkColor` to one of those:
+
+- `source` - link will be of a source node color
+- `target` - link will be of a target node color
+- `gradient` - link color will be smoothly transient between source and target node colors
+- hex code of color, like `#a1a1a1`
+
+### Node Alignment
+
+Graph layout can be changed by setting `nodeAlignment` to:
+
+- `justify`
+- `center`
+- `left`
+- `right`
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 26f81452d..89c232ea6 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -94,6 +94,43 @@ sequenceDiagram
     J->>A: Great!
 ```
 
+### Actor Creation and Destruction
+
+It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
+
+    create participant B
+    A --> B: Hello
+
+Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
+
+```mermaid-example
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+```
+
+```mermaid
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+```
+
 ### Grouping / Box
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index 807d6149a..4c28c82b3 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -487,7 +487,7 @@ where
 - the second _property_ is `color` and its _value_ is `white`
 - the third _property_ is `font-weight` and its _value_ is `bold`
 - the fourth _property_ is `stroke-width` and its _value_ is `2px`
-- the fifth _property_ is `stroke` and its _value_ is `yello`
+- the fifth _property_ is `stroke` and its _value_ is `yellow`
 
 ### Apply classDef styles to states
 
diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index d9915ff3e..d42a2dc7c 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -257,9 +257,11 @@ let us look at same example, where we have disabled the multiColor option.
 
 ### Customizing Color scheme
 
-You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
 In case you have more than 12 sections, the color scheme will start to repeat.
 
+If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
+
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
 
 Example:
@@ -268,9 +270,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid-example
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
+              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%
        timeline
         title History of Social Media Platform
@@ -286,9 +288,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
+              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%
        timeline
         title History of Social Media Platform
diff --git a/package.json b/package.json
index ac197712c..e21e02d14 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.2",
+  "packageManager": "pnpm@8.6.5",
   "keywords": [
     "diagram",
     "markdown",
@@ -22,7 +22,7 @@
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
-    "dev:coverage": "VITE_COVERAGE=true pnpm dev",
+    "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev",
     "release": "pnpm build",
     "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
     "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
@@ -31,7 +31,8 @@
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "e2e:coverage": "VITE_COVERAGE=true pnpm e2e",
+    "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
+    "e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e",
     "coverage:merge": "ts-node-esm scripts/coverage.ts",
     "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
     "ci": "vitest run",
@@ -77,9 +78,10 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-istanbul": "^0.32.2",
+    "@vitest/coverage-v8": "^0.32.2",
     "@vitest/spy": "^0.32.2",
     "@vitest/ui": "^0.32.2",
+    "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
@@ -91,20 +93,20 @@
     "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^43.0.7",
+    "eslint-plugin-jsdoc": "^46.0.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "express": "^4.18.2",
     "globby": "^13.1.4",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
     "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
@@ -121,7 +123,7 @@
     "vitest": "^0.32.2"
   },
   "volta": {
-    "node": "18.16.0"
+    "node": "18.16.1"
   },
   "nyc": {
     "report-dir": "coverage/cypress"
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
index a5fa88e6d..21ba9e248 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
@@ -22,7 +22,6 @@ export const setInfo = (inf) => {
   info = inf;
 };
 
-/** @returns Returns the info flag */
 export const getInfo = () => {
   return info;
 };
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
index 2c6839203..9b3854aaf 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
@@ -8,7 +8,6 @@ import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
  * @param {any} text
  * @param {any} id
  * @param {any} version
- * @param diagObj
  */
 export const draw = (text, id, version) => {
   try {
diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
index 44cc85f73..eeeca05c5 100644
--- a/packages/mermaid-example-diagram/src/mermaidUtils.ts
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const warning = (s: string) => {
   // Todo remove debug code
   // eslint-disable-next-line no-console
@@ -28,7 +29,6 @@ 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,
diff --git a/packages/mermaid/.lintstagedrc.mjs b/packages/mermaid/.lintstagedrc.mjs
index fe79ad254..955000e20 100644
--- a/packages/mermaid/.lintstagedrc.mjs
+++ b/packages/mermaid/.lintstagedrc.mjs
@@ -4,4 +4,5 @@ export default {
   'src/docs/**': ['pnpm --filter mermaid run docs:build --git'],
   'src/docs.mts': ['pnpm --filter mermaid run docs:build --git'],
   'src/(defaultConfig|config|mermaidAPI).ts': ['pnpm --filter mermaid run docs:build --git'],
+  'src/schemas/config.schema.yaml': ['pnpm --filter mermaid run types:build-config --git'],
 };
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 148bab5b6..351dba4b9 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -27,11 +27,14 @@
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
     "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
-    "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
-    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
+    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
+    "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
+    "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "release": "pnpm build",
     "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
   },
@@ -53,13 +56,16 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-scale-chromatic": "^3.0.0",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
+    "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "3.0.3",
+    "dompurify": "3.0.4",
     "elkjs": "^0.8.2",
     "katex": "^0.15.2",
     "khroma": "^2.0.0",
@@ -72,8 +78,10 @@
     "web-worker": "^1.2.0"
   },
   "devDependencies": {
+    "@adobe/jsonschema2md": "^7.1.4",
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
+    "@types/d3-sankey": "^0.12.1",
     "@types/d3-selection": "^3.0.5",
     "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
@@ -84,6 +92,7 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
+    "ajv": "^8.11.2",
     "chokidar": "^3.5.3",
     "concurrently": "^8.0.1",
     "coveralls": "^3.1.1",
@@ -93,7 +102,8 @@
     "globby": "^13.1.4",
     "jison": "^0.4.18",
     "js-base64": "^3.7.5",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
+    "json-schema-to-typescript": "^11.0.3",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.8",
@@ -106,6 +116,7 @@
     "typedoc-plugin-markdown": "^3.15.2",
     "typescript": "^5.0.4",
     "unist-util-flatmap": "^1.0.0",
+    "unist-util-visit": "^4.1.2",
     "vitepress": "^1.0.0-alpha.72",
     "vitepress-plugin-search": "^1.0.4-alpha.20"
   },
diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
new file mode 100644
index 000000000..e81ea70ff
--- /dev/null
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -0,0 +1,252 @@
+/**
+ * Script to load Mermaid Config JSON Schema from YAML and to:
+ *
+ * - Validate JSON Schema
+ *
+ * Then to generate:
+ *
+ * - config.types.ts TypeScript file
+ */
+
+/* eslint-disable no-console */
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import assert from 'node:assert';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+
+import { load, JSON_SCHEMA } from 'js-yaml';
+import { compile, type JSONSchema } from 'json-schema-to-typescript';
+
+import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+
+// Workaround for wrong AJV types, see
+// https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907
+const Ajv2019 = _Ajv2019 as unknown as typeof _Ajv2019.default;
+
+// !!! -- The config.type.js file is created by this script -- !!!
+import type { MermaidConfig } from '../src/config.type.js';
+
+// options for running the main command
+const verifyOnly = process.argv.includes('--verify');
+/** If `true`, automatically `git add` any changes (i.e. during `pnpm run pre-commit`)*/
+const git = process.argv.includes('--git');
+
+/**
+ * All of the keys in the mermaid config that have a mermaid diagram config.
+ */
+const MERMAID_CONFIG_DIAGRAM_KEYS = [
+  'flowchart',
+  'sequence',
+  'gantt',
+  'journey',
+  'class',
+  'state',
+  'er',
+  'pie',
+  'quadrantChart',
+  'requirement',
+  'mindmap',
+  'timeline',
+  'gitGraph',
+  'c4',
+  'sankey',
+];
+
+/**
+ * Loads the MermaidConfig JSON schema YAML file.
+ *
+ * @returns The loaded JSON Schema, use {@link validateSchema} to confirm it is a valid JSON Schema.
+ */
+async function loadJsonSchemaFromYaml() {
+  const configSchemaFile = join('src', 'schemas', 'config.schema.yaml');
+  const contentsYaml = await readFile(configSchemaFile, { encoding: 'utf8' });
+  const jsonSchema = load(contentsYaml, {
+    filename: configSchemaFile,
+    // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+    // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+    schema: JSON_SCHEMA,
+  });
+  return jsonSchema;
+}
+
+/**
+ * Asserts that the given value is a valid JSON Schema object.
+ *
+ * @param jsonSchema - The value to validate as JSON Schema 2019-09
+ * @throws {Error} if the given object is invalid.
+ */
+function validateSchema(jsonSchema: unknown): asserts jsonSchema is JSONSchemaType {
+  if (typeof jsonSchema !== 'object') {
+    throw new Error(`jsonSchema param is not an object: actual type is ${typeof jsonSchema}`);
+  }
+  if (jsonSchema === null) {
+    throw new Error('jsonSchema param must not be null');
+  }
+  const ajv = new Ajv2019({
+    allErrors: true,
+    allowUnionTypes: true,
+    strict: true,
+  });
+
+  ajv.addKeyword({
+    keyword: 'meta:enum', // used by jsonschema2md (in docs.mts script)
+    errors: false,
+  });
+  ajv.addKeyword({
+    keyword: 'tsType', // used by json-schema-to-typescript
+    errors: false,
+  });
+
+  ajv.compile(jsonSchema);
+}
+
+/**
+ * Generate a typescript definition from a JSON Schema using json-schema-to-typescript.
+ *
+ * @param mermaidConfigSchema - The input JSON Schema.
+ */
+async function generateTypescript(mermaidConfigSchema: JSONSchemaType) {
+  /**
+   * Replace all usages of `allOf` with `extends`.
+   *
+   * `extends` is only valid JSON Schema in very old versions of JSON Schema.
+   * However, json-schema-to-typescript creates much nicer types when using
+   * `extends`, so we should use them instead when possible.
+   *
+   * @param schema - The input schema.
+   * @returns The schema with `allOf` replaced with `extends`.
+   */
+  function replaceAllOfWithExtends(schema: JSONSchemaType>) {
+    if (schema['allOf']) {
+      const { allOf, ...schemaWithoutAllOf } = schema;
+      return {
+        ...schemaWithoutAllOf,
+        extends: allOf,
+      };
+    }
+    return schema;
+  }
+
+  /**
+   * For backwards compatibility with older Mermaid Typescript defs,
+   * we need to make all value optional instead of required.
+   *
+   * This is because the `MermaidConfig` type is used as an input, and everything is optional,
+   * since all the required values have default values.s
+   *
+   * In the future, we should make make the input to Mermaid `Partial`.
+   *
+   * @todo TODO: Remove this function when Mermaid releases a new breaking change.
+   * @param schema - The input schema.
+   * @returns The schema with all required values removed.
+   */
+  function removeRequired(schema: JSONSchemaType>) {
+    return { ...schema, required: [] };
+  }
+
+  /**
+   * This is a temporary hack to control the order the types are generated in.
+   *
+   * By default, json-schema-to-typescript outputs the $defs in the order they
+   * are used, then any unused schemas at the end.
+   *
+   * **The only purpose of this function is to make the `git diff` simpler**
+   * **We should remove this later to simplify the code**
+   *
+   * @todo TODO: Remove this function in a future PR.
+   * @param schema - The input schema.
+   * @returns The schema with all `$ref`s removed.
+   */
+  function unrefSubschemas(schema: JSONSchemaType>) {
+    return {
+      ...schema,
+      properties: Object.fromEntries(
+        Object.entries(schema.properties).map(([key, propertySchema]) => {
+          if (MERMAID_CONFIG_DIAGRAM_KEYS.includes(key)) {
+            const { $ref, ...propertySchemaWithoutRef } = propertySchema as JSONSchemaType;
+            if ($ref === undefined) {
+              throw Error(
+                `subSchema ${key} is in MERMAID_CONFIG_DIAGRAM_KEYS but does not have a $ref field`
+              );
+            }
+            const [
+              _root, // eslint-disable-line @typescript-eslint/no-unused-vars
+              _defs, // eslint-disable-line @typescript-eslint/no-unused-vars
+              defName,
+            ] = $ref.split('/');
+            return [
+              key,
+              {
+                ...propertySchemaWithoutRef,
+                tsType: defName,
+              },
+            ];
+          }
+          return [key, propertySchema];
+        })
+      ),
+    };
+  }
+
+  assert.ok(mermaidConfigSchema.$defs);
+  const modifiedSchema = {
+    ...unrefSubschemas(removeRequired(mermaidConfigSchema)),
+
+    $defs: Object.fromEntries(
+      Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => {
+        return [key, removeRequired(replaceAllOfWithExtends(subSchema))];
+      })
+    ),
+  };
+
+  const typescriptFile = await compile(
+    modifiedSchema as JSONSchema, // json-schema-to-typescript only allows JSON Schema 4 as input type
+    'MermaidConfig',
+    {
+      additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
+      unreachableDefinitions: true, // definition for FontConfig is unreachable
+    }
+  );
+
+  // TODO, should we somehow use the functions from `docs.mts` instead?
+  if (verifyOnly) {
+    const originalFile = await readFile('./src/config.type.ts', { encoding: 'utf-8' });
+    if (typescriptFile !== originalFile) {
+      console.error('❌ Error: ./src/config.type.ts will be changed.');
+      console.error("Please run 'pnpm run --filter mermaid types:build-config' to update this");
+      process.exitCode = 1;
+    } else {
+      console.log('✅ ./src/config.type.ts will be unchanged');
+    }
+  } else {
+    console.log('Writing typescript file to ./src/config.type.ts');
+    await writeFile('./src/config.type.ts', typescriptFile, { encoding: 'utf8' });
+    if (git) {
+      console.log('📧 Git: Adding ./src/config.type.ts changed');
+      await promisify(execFile)('git', ['add', './src/config.type.ts']);
+    }
+  }
+}
+
+/** Main function */
+async function main() {
+  if (verifyOnly) {
+    console.log(
+      'Verifying that ./src/config.type.ts is in sync with src/schemas/config.schema.yaml'
+    );
+  }
+
+  const configJsonSchema = await loadJsonSchemaFromYaml();
+
+  validateSchema(configJsonSchema);
+
+  // Generate types from JSON Schema
+  await generateTypescript(configJsonSchema);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 7a3ab7f10..7745e02ef 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,27 +1,24 @@
 import { MockedD3 } from './tests/MockedD3.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import { D3Element } from './mermaidAPI.js';
+import type { D3Element } from './mermaidAPI.js';
 
 describe('accessibility', () => {
-  const fauxSvgNode = new MockedD3();
+  const fauxSvgNode: MockedD3 = new MockedD3();
 
   describe('setA11yDiagramInfo', () => {
-    it('sets the svg element role to "graphics-document document"', () => {
-      // @ts-ignore  Required to easily handle the d3 select types
+    it('should set svg element role to "graphics-document document"', () => {
       const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, 'flowchart');
       expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document');
     });
 
-    it('sets the aria-roledescription to the diagram type', () => {
-      // @ts-ignore  Required to easily handle the d3 select types
+    it('should set aria-roledescription to the diagram type', () => {
       const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, 'flowchart');
       expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
     });
 
-    it('does not set the aria-roledescription if the diagram type is empty', () => {
-      // @ts-ignore  Required to easily handle the d3 select types
+    it('should not set aria-roledescription if the diagram type is empty', () => {
       const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, '');
       expect(svgAttrSpy).toHaveBeenCalledTimes(1);
@@ -32,8 +29,8 @@ describe('accessibility', () => {
   describe('addSVGa11yTitleDescription', () => {
     const givenId = 'theBaseId';
 
-    describe('with the given svg d3 object:', () => {
-      it('does nothing if there is no insert defined', () => {
+    describe('with svg d3 object', () => {
+      it('should do nothing if there is no insert defined', () => {
         const noInsertSvg = {
           attr: vi.fn(),
         };
@@ -42,26 +39,25 @@ describe('accessibility', () => {
         expect(noInsertAttrSpy).not.toHaveBeenCalled();
       });
 
-      // ----------------
-      // Convenience functions to DRY up the spec
+      // convenience functions to DRY up the spec
 
-      function expectAriaLabelledByIsTitleId(
+      function expectAriaLabelledByItTitleId(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string
-      ) {
+      ): void {
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
       }
 
-      function expectAriaDescribedByIsDescId(
+      function expectAriaDescribedByItDescId(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string
-      ) {
+      ): void {
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
@@ -69,154 +65,148 @@ describe('accessibility', () => {
 
       function a11yTitleTagInserted(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string,
         callNumber: number
-      ) {
+      ): void {
         a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title);
       }
 
       function a11yDescTagInserted(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string,
         callNumber: number
-      ) {
+      ): void {
         a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc);
       }
 
       function a11yTagInserted(
-        svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        _svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string,
         callNumber: number,
         expectedPrefix: string,
-        expectedText: string | null | undefined
-      ) {
-        const fauxInsertedD3 = new MockedD3();
-        const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
-        // @ts-ignore  Required to easily handle the d3 select types
+        expectedText: string | undefined
+      ): void {
+        const fauxInsertedD3: MockedD3 = new MockedD3();
+        const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
         const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3);
         const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text');
 
         addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
-        expect(svgInsertSpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
+        expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
         expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
         expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText);
       }
-      // ----------------
 
-      describe('given an a11y title', () => {
+      describe('with a11y title', () => {
         const a11yTitle = 'a11y title';
 
-        describe('given an a11y description', () => {
+        describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          it('sets aria-labelledby to the title id inserted as a child', () => {
-            expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('shold set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('sets aria-describedby to the description id inserted as a child', () => {
-            expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('inserts a title tag as the first child with the text set to the accTitle given', () => {
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
             a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
           });
 
-          it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
             a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
         });
 
-        describe(`no a11y description`, () => {
+        describe(`without a11y description`, () => {
           const a11yDesc = undefined;
 
-          it('sets aria-labelledby to the title id inserted as a child', () => {
-            expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('should set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('no aria-describedby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-describedby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
-          it('inserts a title tag as the first child with the text set to the accTitle given', () => {
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
             a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
 
-          it('no description tag is inserted', () => {
-            const fauxTitle = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+          it('should not insert description tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
 
-      describe('no a11y title', () => {
+      describe('without a11y title', () => {
         const a11yTitle = undefined;
 
-        describe('given an a11y description', () => {
+        describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          it('no aria-labelledby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-labelledby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
-          it('no title tag inserted', () => {
-            const fauxTitle = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          it('sets aria-describedby to the description id inserted as a child', () => {
-            expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
             a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
         });
 
-        describe('no a11y description', () => {
+        describe('without a11y description', () => {
           const a11yDesc = undefined;
 
-          it('no aria-labelledby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-labelledby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
-          it('no aria-describedby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-describedby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
-          it('no title tag inserted', () => {
-            const fauxTitle = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          it('no description tag inserted', () => {
-            const fauxDesc = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
+          it('should not insert  description tag', () => {
+            const fauxDesc: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index eba3ba9a7..69e22b301 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -1,13 +1,11 @@
 /**
- * Accessibility (a11y) functions, types, helpers
+ * Accessibility (a11y) functions, types, helpers.
+ *
  * @see https://www.w3.org/WAI/
  * @see https://www.w3.org/TR/wai-aria-1.1/
  * @see https://www.w3.org/TR/svg-aam-1.0/
- *
  */
-import { D3Element } from './mermaidAPI.js';
-
-import isEmpty from 'lodash-es/isEmpty.js';
+import type { D3Element } from './mermaidAPI.js';
 
 /**
  * SVG element role:
@@ -21,50 +19,47 @@ import isEmpty from 'lodash-es/isEmpty.js';
 const SVG_ROLE = 'graphics-document document';
 
 /**
- * Add role and aria-roledescription to the svg element
+ * Add role and aria-roledescription to the svg element.
  *
  * @param svg - d3 object that contains the SVG HTML element
  * @param diagramType - diagram name for to the aria-roledescription
  */
-export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
+export function setA11yDiagramInfo(svg: D3Element, diagramType: string) {
   svg.attr('role', SVG_ROLE);
-  if (!isEmpty(diagramType)) {
+  if (diagramType !== '') {
     svg.attr('aria-roledescription', diagramType);
   }
 }
+
 /**
  * Add an accessible title and/or description element to a chart.
  * The title is usually not displayed and the description is never displayed.
  *
- * The following charts display their title as a visual and accessibility element: gantt
+ * The following charts display their title as a visual and accessibility element: gantt.
  *
  * @param svg - d3 node to insert the a11y title and desc info
- * @param a11yTitle - a11y title. null and undefined are meaningful: means to skip it
- * @param a11yDesc - a11y description.  null and undefined are meaningful: means to skip it
+ * @param a11yTitle - a11y title. undefined or empty strings mean to skip them
+ * @param a11yDesc - a11y description. undefined or empty strings mean to skip them
  * @param baseId - id used to construct the a11y title and description id
  */
 export function addSVGa11yTitleDescription(
   svg: D3Element,
-  a11yTitle: string | null | undefined,
-  a11yDesc: string | null | undefined,
+  a11yTitle: string | undefined,
+  a11yDesc: string | undefined,
   baseId: string
-) {
+): void {
   if (svg.insert === undefined) {
     return;
   }
 
-  if (a11yTitle || a11yDesc) {
-    if (a11yDesc) {
-      const descId = 'chart-desc-' + baseId;
-      svg.attr('aria-describedby', descId);
-      svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc);
-    }
-    if (a11yTitle) {
-      const titleId = 'chart-title-' + baseId;
-      svg.attr('aria-labelledby', titleId);
-      svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle);
-    }
-  } else {
-    return;
+  if (a11yDesc) {
+    const descId = `chart-desc-${baseId}`;
+    svg.attr('aria-describedby', descId);
+    svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc);
+  }
+  if (a11yTitle) {
+    const titleId = `chart-title-${baseId}`;
+    svg.attr('aria-labelledby', titleId);
+    svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle);
   }
 }
diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.js
index 898481c30..6f2e706ab 100644
--- a/packages/mermaid/src/assignWithDepth.js
+++ b/packages/mermaid/src/assignWithDepth.js
@@ -20,7 +20,7 @@
  *   of src to dst in order.
  * @param {any} dst - The destination of the merge
  * @param {any} src - The source object(s) to merge into destination
- * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth
+ * @param {{ depth: number; clobber: boolean }} [config] - Depth: depth
  *   to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
  *   { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
  * @returns {any}
diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js
deleted file mode 100644
index 1f7fd976b..000000000
--- a/packages/mermaid/src/config.spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as configApi from './config.js';
-
-describe('when working with site config', function () {
-  beforeEach(() => {
-    // Resets the site config to default config
-    configApi.setSiteConfig({});
-  });
-  it('should set site config and config properly', function () {
-    let config_0 = { foo: 'bar', bar: 0 };
-    configApi.setSiteConfig(config_0);
-    let config_1 = configApi.getSiteConfig();
-    let config_2 = configApi.getConfig();
-    expect(config_1.foo).toEqual(config_0.foo);
-    expect(config_1.bar).toEqual(config_0.bar);
-    expect(config_1).toEqual(config_2);
-  });
-  it('should respect secure keys when applying directives', function () {
-    let config_0 = {
-      foo: 'bar',
-      bar: 'cant-be-changed',
-      secure: [...configApi.defaultConfig.secure, 'bar'],
-    };
-    configApi.setSiteConfig(config_0);
-    const directive = { foo: 'baf', bar: 'should-not-be-allowed' };
-    const cfg = configApi.updateCurrentConfig(config_0, [directive]);
-    expect(cfg.foo).toEqual(directive.foo);
-    expect(cfg.bar).toBe(config_0.bar);
-  });
-  it('should set reset config properly', function () {
-    let config_0 = { foo: 'bar', bar: 0 };
-    configApi.setSiteConfig(config_0);
-    let config_1 = { foo: 'baf' };
-    configApi.setConfig(config_1);
-    let config_2 = configApi.getConfig();
-    expect(config_2.foo).toEqual(config_1.foo);
-    configApi.reset();
-    let config_3 = configApi.getConfig();
-    expect(config_3.foo).toEqual(config_0.foo);
-    let config_4 = configApi.getSiteConfig();
-    expect(config_4.foo).toEqual(config_0.foo);
-  });
-  it('should set global reset config properly', function () {
-    let config_0 = { foo: 'bar', bar: 0 };
-    configApi.setSiteConfig(config_0);
-    let config_1 = configApi.getSiteConfig();
-    expect(config_1.foo).toEqual(config_0.foo);
-    let config_2 = configApi.getConfig();
-    expect(config_2.foo).toEqual(config_0.foo);
-    configApi.setConfig({ foobar: 'bar0' });
-    let config_3 = configApi.getConfig();
-    expect(config_3.foobar).toEqual('bar0');
-    configApi.reset();
-    let config_4 = configApi.getConfig();
-    expect(config_4.foobar).toBeUndefined();
-  });
-});
diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
new file mode 100644
index 000000000..457cb8244
--- /dev/null
+++ b/packages/mermaid/src/config.spec.ts
@@ -0,0 +1,72 @@
+import * as configApi from './config.js';
+
+describe('when working with site config', function () {
+  beforeEach(() => {
+    // Resets the site config to default config
+    configApi.setSiteConfig({});
+  });
+  it('should set site config and config properly', function () {
+    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
+    configApi.setSiteConfig(config_0);
+    const config_1 = configApi.getSiteConfig();
+    const config_2 = configApi.getConfig();
+    expect(config_1.fontFamily).toEqual(config_0.fontFamily);
+    expect(config_1.fontSize).toEqual(config_0.fontSize);
+    expect(config_1).toEqual(config_2);
+  });
+  it('should respect secure keys when applying directives', function () {
+    const config_0 = {
+      fontFamily: 'foo-font',
+      fontSize: 12345, // can't be changed
+      secure: [...configApi.defaultConfig.secure!, 'fontSize'],
+    };
+    configApi.setSiteConfig(config_0);
+    const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ };
+    const cfg = configApi.updateCurrentConfig(config_0, [directive]);
+    expect(cfg.fontFamily).toEqual(directive.fontFamily);
+    expect(cfg.fontSize).toBe(config_0.fontSize);
+  });
+  it('should allow setting partial options', function () {
+    const defaultConfig = configApi.getConfig();
+
+    configApi.setConfig({
+      quadrantChart: {
+        chartHeight: 600,
+      },
+    });
+
+    const updatedConfig = configApi.getConfig();
+
+    // deep options we didn't update should remain the same
+    expect(defaultConfig.quadrantChart!.chartWidth).toEqual(
+      updatedConfig.quadrantChart!.chartWidth
+    );
+  });
+  it('should set reset config properly', function () {
+    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
+    configApi.setSiteConfig(config_0);
+    const config_1 = { fontFamily: 'baf' };
+    configApi.setConfig(config_1);
+    const config_2 = configApi.getConfig();
+    expect(config_2.fontFamily).toEqual(config_1.fontFamily);
+    configApi.reset();
+    const config_3 = configApi.getConfig();
+    expect(config_3.fontFamily).toEqual(config_0.fontFamily);
+    const config_4 = configApi.getSiteConfig();
+    expect(config_4.fontFamily).toEqual(config_0.fontFamily);
+  });
+  it('should set global reset config properly', function () {
+    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
+    configApi.setSiteConfig(config_0);
+    const config_1 = configApi.getSiteConfig();
+    expect(config_1.fontFamily).toEqual(config_0.fontFamily);
+    const config_2 = configApi.getConfig();
+    expect(config_2.fontFamily).toEqual(config_0.fontFamily);
+    configApi.setConfig({ altFontFamily: 'bar-font' });
+    const config_3 = configApi.getConfig();
+    expect(config_3.altFontFamily).toEqual('bar-font');
+    configApi.reset();
+    const config_4 = configApi.getConfig();
+    expect(config_4.altFontFamily).toBeUndefined();
+  });
+});
diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index 838716e2f..e00663827 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -226,9 +226,11 @@ export const reset = (config = siteConfig): void => {
   updateCurrentConfig(config, directives);
 };
 
-enum ConfigWarning {
-  'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
-}
+const ConfigWarning = {
+  LAZY_LOAD_DEPRECATED:
+    'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
+} as const;
+
 type ConfigWarningStrings = keyof typeof ConfigWarning;
 const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
 const issueWarning = (warning: ConfigWarningStrings) => {
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 2ccfd2632..335e33b19 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1,22 +1,152 @@
-// TODO: This was auto generated from defaultConfig. Needs to be verified.
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
 
-import DOMPurify from 'dompurify';
+/**
+ * Configuration options to pass to the `dompurify` library.
+ */
+export type DOMPurifyConfiguration = import('dompurify').Config;
+/**
+ * JavaScript function that returns a `FontConfig`.
+ *
+ * By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight`
+ * values.
+ *
+ * For example, the font calculator called `boundaryFont` might be defined as:
+ *
+ * ```javascript
+ * boundaryFont: function () {
+ *   return {
+ *     fontFamily: this.boundaryFontFamily,
+ *     fontSize: this.boundaryFontSize,
+ *     fontWeight: this.boundaryFontWeight,
+ *   };
+ * }
+ * ```
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FontCalculator".
+ */
+export type FontCalculator = () => Partial;
+/**
+ * Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyLinkColor".
+ */
+export type SankeyLinkColor = 'source' | 'target' | 'gradient';
+/**
+ * Controls the alignment of the Sankey diagrams.
+ *
+ * See .
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyNodeAlignment".
+ */
+export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
+/**
+ * The font size to use
+ */
+export type CSSFontSize = string | number;
 
 export interface MermaidConfig {
-  theme?: string;
+  /**
+   * Theme, the CSS style sheet.
+   * You may also use `themeCSS` to override this value.
+   *
+   */
+  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
+  /**
+   * The maximum allowed size of the users text diagram
+   */
   maxTextSize?: number;
   darkMode?: boolean;
   htmlLabels?: boolean;
+  /**
+   * Specifies the font to be used in the rendered diagrams.
+   * Can be any possible CSS `font-family`.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+   *
+   */
   fontFamily?: string;
   altFontFamily?: string;
-  logLevel?: number;
-  securityLevel?: string;
+  /**
+   * This option decides the amount of logging to be used by mermaid.
+   *
+   */
+  logLevel?:
+    | number
+    | string
+    | 0
+    | 2
+    | 1
+    | 'trace'
+    | 'debug'
+    | 'info'
+    | 'warn'
+    | 'error'
+    | 'fatal'
+    | 3
+    | 4
+    | 5
+    | undefined;
+  /**
+   * Level of trust for parsed diagram
+   */
+  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
+  /**
+   * Dictates whether mermaid starts on Page load
+   */
   startOnLoad?: boolean;
+  /**
+   * Controls whether or arrow markers in html code are absolute paths or anchors.
+   * This matters if you are using base tag settings.
+   *
+   */
   arrowMarkerAbsolute?: boolean;
+  /**
+   * This option controls which `currentConfig` keys are considered secure and
+   * can only be changed via call to `mermaidAPI.initialize`.
+   * Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
+   * in the current `currentConfig`.
+   *
+   * This prevents malicious graph directives from overriding a site's default security.
+   *
+   */
   secure?: string[];
+  /**
+   * This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
+   * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
+   * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
+   * fall back to legacy rendering for KaTeX.
+   *
+   */
+  legacyMathML?: boolean;
+  /**
+   * This option controls if the generated ids of nodes in the SVG are
+   * generated randomly or based on a seed.
+   * If set to `false`, the IDs are generated based on the current date and
+   * thus are not deterministic. This is the default behavior.
+   *
+   * This matters if your files are checked into source control e.g. git and
+   * should not change unless content is changed.
+   *
+   */
   deterministicIds?: boolean;
+  /**
+   * This option is the optional seed for deterministic ids.
+   * If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
+   * You can set this attribute to base the seed on a static string.
+   *
+   */
   deterministicIDSeed?: string;
   flowchart?: FlowchartDiagramConfig;
   sequence?: SequenceDiagramConfig;
@@ -32,96 +162,342 @@ export interface MermaidConfig {
   mindmap?: MindmapDiagramConfig;
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
-  dompurifyConfig?: DOMPurify.Config;
+  sankey?: SankeyDiagramConfig;
+  dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
-  legacyMathML?: boolean;
 }
-
-// TODO: More configs needs to be moved in here
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "BaseDiagramConfig".
+ */
 export interface BaseDiagramConfig {
   useWidth?: number;
+  /**
+   * When this flag is set to `true`, the height and width is set to 100%
+   * and is then scaled with the available space.
+   * If set to `false`, the absolute space required is used.
+   *
+   */
   useMaxWidth?: boolean;
 }
-
+/**
+ * The object containing configurations specific for c4 diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "C4DiagramConfig".
+ */
 export interface C4DiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin to the right and left of the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between shapes
+   */
   c4ShapeMargin?: number;
+  /**
+   * Padding between shapes
+   */
   c4ShapePadding?: number;
+  /**
+   * Width of person boxes
+   */
   width?: number;
+  /**
+   * Height of person boxes
+   */
   height?: number;
+  /**
+   * Margin around boxes
+   */
   boxMargin?: number;
+  /**
+   * How many shapes to place in each row.
+   */
   c4ShapeInRow?: number;
   nextLinePaddingX?: number;
+  /**
+   * How many boundaries to place in each row.
+   */
   c4BoundaryInRow?: number;
+  /**
+   * This sets the font size of Person shape for the diagram
+   */
   personFontSize?: string | number;
+  /**
+   * This sets the font weight of Person shape for the diagram
+   */
   personFontFamily?: string;
+  /**
+   * This sets the font weight of Person shape for the diagram
+   */
   personFontWeight?: string | number;
+  /**
+   * This sets the font size of External Person shape for the diagram
+   */
   external_personFontSize?: string | number;
+  /**
+   * This sets the font family of External Person shape for the diagram
+   */
   external_personFontFamily?: string;
+  /**
+   * This sets the font weight of External Person shape for the diagram
+   */
   external_personFontWeight?: string | number;
+  /**
+   * This sets the font size of System shape for the diagram
+   */
   systemFontSize?: string | number;
+  /**
+   * This sets the font family of System shape for the diagram
+   */
   systemFontFamily?: string;
+  /**
+   * This sets the font weight of System shape for the diagram
+   */
   systemFontWeight?: string | number;
+  /**
+   * This sets the font size of External System shape for the diagram
+   */
   external_systemFontSize?: string | number;
+  /**
+   * This sets the font family of External System shape for the diagram
+   */
   external_systemFontFamily?: string;
+  /**
+   * This sets the font weight of External System shape for the diagram
+   */
   external_systemFontWeight?: string | number;
+  /**
+   * This sets the font size of System DB shape for the diagram
+   */
   system_dbFontSize?: string | number;
+  /**
+   * This sets the font family of System DB shape for the diagram
+   */
   system_dbFontFamily?: string;
+  /**
+   * This sets the font weight of System DB shape for the diagram
+   */
   system_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of External System DB shape for the diagram
+   */
   external_system_dbFontSize?: string | number;
+  /**
+   * This sets the font family of External System DB shape for the diagram
+   */
   external_system_dbFontFamily?: string;
+  /**
+   * This sets the font weight of External System DB shape for the diagram
+   */
   external_system_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of System Queue shape for the diagram
+   */
   system_queueFontSize?: string | number;
+  /**
+   * This sets the font family of System Queue shape for the diagram
+   */
   system_queueFontFamily?: string;
+  /**
+   * This sets the font weight of System Queue shape for the diagram
+   */
   system_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of External System Queue shape for the diagram
+   */
   external_system_queueFontSize?: string | number;
+  /**
+   * This sets the font family of External System Queue shape for the diagram
+   */
   external_system_queueFontFamily?: string;
+  /**
+   * This sets the font weight of External System Queue shape for the diagram
+   */
   external_system_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of Boundary shape for the diagram
+   */
   boundaryFontSize?: string | number;
+  /**
+   * This sets the font family of Boundary shape for the diagram
+   */
   boundaryFontFamily?: string;
+  /**
+   * This sets the font weight of Boundary shape for the diagram
+   */
   boundaryFontWeight?: string | number;
+  /**
+   * This sets the font size of Message shape for the diagram
+   */
   messageFontSize?: string | number;
+  /**
+   * This sets the font family of Message shape for the diagram
+   */
   messageFontFamily?: string;
+  /**
+   * This sets the font weight of Message shape for the diagram
+   */
   messageFontWeight?: string | number;
+  /**
+   * This sets the font size of Container shape for the diagram
+   */
   containerFontSize?: string | number;
+  /**
+   * This sets the font family of Container shape for the diagram
+   */
   containerFontFamily?: string;
+  /**
+   * This sets the font weight of Container shape for the diagram
+   */
   containerFontWeight?: string | number;
+  /**
+   * This sets the font size of External Container shape for the diagram
+   */
   external_containerFontSize?: string | number;
+  /**
+   * This sets the font family of External Container shape for the diagram
+   */
   external_containerFontFamily?: string;
+  /**
+   * This sets the font weight of External Container shape for the diagram
+   */
   external_containerFontWeight?: string | number;
+  /**
+   * This sets the font size of Container DB shape for the diagram
+   */
   container_dbFontSize?: string | number;
+  /**
+   * This sets the font family of Container DB shape for the diagram
+   */
   container_dbFontFamily?: string;
+  /**
+   * This sets the font weight of Container DB shape for the diagram
+   */
   container_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of External Container DB shape for the diagram
+   */
   external_container_dbFontSize?: string | number;
+  /**
+   * This sets the font family of External Container DB shape for the diagram
+   */
   external_container_dbFontFamily?: string;
+  /**
+   * This sets the font weight of External Container DB shape for the diagram
+   */
   external_container_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of Container Queue shape for the diagram
+   */
   container_queueFontSize?: string | number;
+  /**
+   * This sets the font family of Container Queue shape for the diagram
+   */
   container_queueFontFamily?: string;
+  /**
+   * This sets the font weight of Container Queue shape for the diagram
+   */
   container_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of External Container Queue shape for the diagram
+   */
   external_container_queueFontSize?: string | number;
+  /**
+   * This sets the font family of External Container Queue shape for the diagram
+   */
   external_container_queueFontFamily?: string;
+  /**
+   * This sets the font weight of External Container Queue shape for the diagram
+   */
   external_container_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of Component shape for the diagram
+   */
   componentFontSize?: string | number;
+  /**
+   * This sets the font family of Component shape for the diagram
+   */
   componentFontFamily?: string;
+  /**
+   * This sets the font weight of Component shape for the diagram
+   */
   componentFontWeight?: string | number;
+  /**
+   * This sets the font size of External Component shape for the diagram
+   */
   external_componentFontSize?: string | number;
+  /**
+   * This sets the font family of External Component shape for the diagram
+   */
   external_componentFontFamily?: string;
+  /**
+   * This sets the font weight of External Component shape for the diagram
+   */
   external_componentFontWeight?: string | number;
+  /**
+   * This sets the font size of Component DB shape for the diagram
+   */
   component_dbFontSize?: string | number;
+  /**
+   * This sets the font family of Component DB shape for the diagram
+   */
   component_dbFontFamily?: string;
+  /**
+   * This sets the font weight of Component DB shape for the diagram
+   */
   component_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of External Component DB shape for the diagram
+   */
   external_component_dbFontSize?: string | number;
+  /**
+   * This sets the font family of External Component DB shape for the diagram
+   */
   external_component_dbFontFamily?: string;
+  /**
+   * This sets the font weight of External Component DB shape for the diagram
+   */
   external_component_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of Component Queue shape for the diagram
+   */
   component_queueFontSize?: string | number;
+  /**
+   * This sets the font family of Component Queue shape for the diagram
+   */
   component_queueFontFamily?: string;
+  /**
+   * This sets the font weight of Component Queue shape for the diagram
+   */
   component_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of External Component Queue shape for the diagram
+   */
   external_component_queueFontSize?: string | number;
+  /**
+   * This sets the font family of External Component Queue shape for the diagram
+   */
   external_component_queueFontFamily?: string;
+  /**
+   * This sets the font weight of External Component Queue shape for the diagram
+   */
   external_component_queueFontWeight?: string | number;
+  /**
+   * This sets the auto-wrap state for the diagram
+   */
   wrap?: boolean;
+  /**
+   * This sets the auto-wrap padding for the diagram (sides only)
+   */
   wrapPadding?: number;
   person_bg_color?: string;
   person_border_color?: string;
@@ -186,8 +562,14 @@ export interface C4DiagramConfig extends BaseDiagramConfig {
   boundaryFont?: FontCalculator;
   messageFont?: FontCalculator;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "GitGraphDiagramConfig".
+ */
 export interface GitGraphDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
   diagramPadding?: number;
   nodeLabel?: NodeLabel;
@@ -196,16 +578,29 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig {
   showCommitLabel?: boolean;
   showBranches?: boolean;
   rotateCommitLabel?: boolean;
+  /**
+   * Controls whether or arrow markers in html code are absolute paths or anchors.
+   * This matters if you are using base tag settings.
+   *
+   */
   arrowMarkerAbsolute?: boolean;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "NodeLabel".
+ */
 export interface NodeLabel {
   width?: number;
   height?: number;
   x?: number;
   y?: number;
 }
-
+/**
+ * The object containing configurations specific for req diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "RequirementDiagramConfig".
+ */
 export interface RequirementDiagramConfig extends BaseDiagramConfig {
   rect_fill?: string;
   text_color?: string;
@@ -217,51 +612,163 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
   rect_padding?: number;
   line_height?: number;
 }
-
+/**
+ * The object containing configurations specific for mindmap diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "MindmapDiagramConfig".
+ */
 export interface MindmapDiagramConfig extends BaseDiagramConfig {
-  useMaxWidth: boolean;
-  padding: number;
-  maxNodeWidth: number;
+  padding?: number;
+  maxNodeWidth?: number;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "PieDiagramConfig".
+ */
 export interface PieDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Axial position of slice's label from zero at the center to 1 at the outside edges.
+   *
+   */
   textPosition?: number;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "QuadrantChartConfig".
+ */
 export interface QuadrantChartConfig extends BaseDiagramConfig {
-  chartWidth: number;
-  chartHeight: number;
-  titleFontSize: number;
-  titlePadding: number;
-  quadrantPadding: number;
-  xAxisLabelPadding: number;
-  yAxisLabelPadding: number;
-  xAxisLabelFontSize: number;
-  yAxisLabelFontSize: number;
-  quadrantLabelFontSize: number;
-  quadrantTextTopPadding: number;
-  pointTextPadding: number;
-  pointLabelFontSize: number;
-  pointRadius: number;
-  xAxisPosition: 'top' | 'bottom';
-  yAxisPosition: 'left' | 'right';
-  quadrantInternalBorderStrokeWidth: number;
-  quadrantExternalBorderStrokeWidth: number;
+  /**
+   * Width of the chart
+   */
+  chartWidth?: number;
+  /**
+   * Height of the chart
+   */
+  chartHeight?: number;
+  /**
+   * Chart title top and bottom padding
+   */
+  titleFontSize?: number;
+  /**
+   * Padding around the quadrant square
+   */
+  titlePadding?: number;
+  /**
+   * quadrant title padding from top if the quadrant is rendered on top
+   */
+  quadrantPadding?: number;
+  /**
+   * Padding around x-axis labels
+   */
+  xAxisLabelPadding?: number;
+  /**
+   * Padding around y-axis labels
+   */
+  yAxisLabelPadding?: number;
+  /**
+   * x-axis label font size
+   */
+  xAxisLabelFontSize?: number;
+  /**
+   * y-axis label font size
+   */
+  yAxisLabelFontSize?: number;
+  /**
+   * quadrant title font size
+   */
+  quadrantLabelFontSize?: number;
+  /**
+   * quadrant title padding from top if the quadrant is rendered on top
+   */
+  quadrantTextTopPadding?: number;
+  /**
+   * padding between point and point label
+   */
+  pointTextPadding?: number;
+  /**
+   * point title font size
+   */
+  pointLabelFontSize?: number;
+  /**
+   * radius of the point to be drawn
+   */
+  pointRadius?: number;
+  /**
+   * position of x-axis labels
+   */
+  xAxisPosition?: 'top' | 'bottom';
+  /**
+   * position of y-axis labels
+   */
+  yAxisPosition?: 'left' | 'right';
+  /**
+   * stroke width of edges of the box that are inside the quadrant
+   */
+  quadrantInternalBorderStrokeWidth?: number;
+  /**
+   * stroke width of edges of the box that are outside the quadrant
+   */
+  quadrantExternalBorderStrokeWidth?: number;
 }
-
+/**
+ * The object containing configurations specific for entity relationship diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "ErDiagramConfig".
+ */
 export interface ErDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
+  /**
+   * The amount of padding around the diagram as a whole so that embedded
+   * diagrams have margins, expressed in pixels.
+   *
+   */
   diagramPadding?: number;
-  layoutDirection?: string;
+  /**
+   * Directional bias for layout of entities
+   */
+  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
+  /**
+   * The minimum width of an entity box. Expressed in pixels.
+   */
   minEntityWidth?: number;
+  /**
+   * The minimum height of an entity box. Expressed in pixels.
+   */
   minEntityHeight?: number;
+  /**
+   * The minimum internal padding between text in an entity box and the enclosing box borders.
+   * Expressed in pixels.
+   *
+   */
   entityPadding?: number;
+  /**
+   * Stroke color of box edges and lines.
+   */
   stroke?: string;
+  /**
+   * Fill color of entity boxes
+   */
   fill?: string;
+  /**
+   * Font size (expressed as an integer representing a number of pixels)
+   */
   fontSize?: number;
 }
-
+/**
+ * The object containing configurations specific for entity relationship diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "StateDiagramConfig".
+ */
 export interface StateDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
   arrowMarkerAbsolute?: boolean;
   dividerMargin?: number;
@@ -273,151 +780,540 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
   forkWidth?: number;
   forkHeight?: number;
   miniPadding?: number;
+  /**
+   * Font size factor, this is used to guess the width of the edges labels
+   * before rendering by dagre layout.
+   * This might need updating if/when switching font
+   *
+   */
   fontSizeFactor?: number;
   fontSize?: number;
   labelHeight?: number;
   edgeLengthFactor?: string;
   compositTitleSize?: number;
   radius?: number;
-  defaultRenderer?: string;
+  /**
+   * Decides which rendering engine that is to be used for the rendering.
+   *
+   */
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "ClassDiagramConfig".
+ */
 export interface ClassDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
+  /**
+   * Controls whether or arrow markers in html code are absolute paths or anchors.
+   * This matters if you are using base tag settings.
+   *
+   */
   arrowMarkerAbsolute?: boolean;
   dividerMargin?: number;
   padding?: number;
   textHeight?: number;
-  defaultRenderer?: string;
+  /**
+   * Decides which rendering engine that is to be used for the rendering.
+   *
+   */
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
   nodeSpacing?: number;
   rankSpacing?: number;
+  /**
+   * The amount of padding around the diagram as a whole so that embedded
+   * diagrams have margins, expressed in pixels.
+   *
+   */
   diagramPadding?: number;
   htmlLabels?: boolean;
 }
-
+/**
+ * The object containing configurations specific for journey diagrams
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "JourneyDiagramConfig".
+ */
 export interface JourneyDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin to the right and left of the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between actors
+   */
   leftMargin?: number;
+  /**
+   * Width of actor boxes
+   */
   width?: number;
+  /**
+   * Height of actor boxes
+   */
   height?: number;
+  /**
+   * Margin around loop boxes
+   */
   boxMargin?: number;
+  /**
+   * Margin around the text in loop/alt/opt boxes
+   */
   boxTextMargin?: number;
+  /**
+   * Margin around notes
+   */
   noteMargin?: number;
+  /**
+   * Space between messages.
+   */
   messageMargin?: number;
-  messageAlign?: string;
+  /**
+   * Multiline message alignment
+   */
+  messageAlign?: string | 'left' | 'center' | 'right';
+  /**
+   * Prolongs the edge of the diagram downwards.
+   *
+   * Depending on css styling this might need adjustment.
+   *
+   */
   bottomMarginAdj?: number;
+  /**
+   * Curved Arrows become Right Angles
+   *
+   * This will display arrows that start and begin at the same node as
+   * right angles, rather than as curves.
+   *
+   */
   rightAngles?: boolean;
   taskFontSize?: string | number;
   taskFontFamily?: string;
   taskMargin?: number;
+  /**
+   * Width of activation box
+   */
   activationWidth?: number;
+  /**
+   * text placement as: tspan | fo | old only text as before
+   *
+   */
   textPlacement?: string;
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "TimelineDiagramConfig".
+ */
 export interface TimelineDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin to the right and left of the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between actors
+   */
   leftMargin?: number;
+  /**
+   * Width of actor boxes
+   */
   width?: number;
+  /**
+   * Height of actor boxes
+   */
   height?: number;
   padding?: number;
+  /**
+   * Margin around loop boxes
+   */
   boxMargin?: number;
+  /**
+   * Margin around the text in loop/alt/opt boxes
+   */
   boxTextMargin?: number;
+  /**
+   * Margin around notes
+   */
   noteMargin?: number;
+  /**
+   * Space between messages.
+   */
   messageMargin?: number;
-  messageAlign?: string;
+  /**
+   * Multiline message alignment
+   */
+  messageAlign?: string | 'left' | 'center' | 'right';
+  /**
+   * Prolongs the edge of the diagram downwards.
+   *
+   * Depending on css styling this might need adjustment.
+   *
+   */
   bottomMarginAdj?: number;
+  /**
+   * Curved Arrows become Right Angles
+   *
+   * This will display arrows that start and begin at the same node as
+   * right angles, rather than as curves.
+   *
+   */
   rightAngles?: boolean;
   taskFontSize?: string | number;
   taskFontFamily?: string;
   taskMargin?: number;
+  /**
+   * Width of activation box
+   */
   activationWidth?: number;
+  /**
+   * text placement as: tspan | fo | old only text as before
+   *
+   */
   textPlacement?: string;
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
   disableMulticolor?: boolean;
-  useMaxWidth?: boolean;
 }
-
+/**
+ * The object containing configurations specific for gantt diagrams
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "GanttDiagramConfig".
+ */
 export interface GanttDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
+  /**
+   * The height of the bars in the graph
+   */
   barHeight?: number;
+  /**
+   * The margin between the different activities in the gantt diagram
+   */
   barGap?: number;
+  /**
+   * Margin between title and gantt diagram and between axis and gantt diagram.
+   *
+   */
   topPadding?: number;
+  /**
+   * The space allocated for the section name to the right of the activities
+   *
+   */
   rightPadding?: number;
+  /**
+   * The space allocated for the section name to the left of the activities
+   *
+   */
   leftPadding?: number;
+  /**
+   * Vertical starting position of the grid lines
+   */
   gridLineStartPadding?: number;
+  /**
+   * Font size
+   */
   fontSize?: number;
+  /**
+   * Font size for sections
+   */
   sectionFontSize?: string | number;
+  /**
+   * The number of alternating section styles
+   */
   numberSectionStyles?: number;
+  /**
+   * Date/time format of the axis
+   *
+   * This might need adjustment to match your locale and preferences.
+   *
+   */
   axisFormat?: string;
+  /**
+   * axis ticks
+   *
+   * Pattern is:
+   *
+   * ```javascript
+   * /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+   * ```
+   *
+   */
   tickInterval?: string;
+  /**
+   * When this flag is set, date labels will be added to the top of the chart
+   *
+   */
   topAxis?: boolean;
-  displayMode?: string;
+  /**
+   * Controls the display mode.
+   *
+   */
+  displayMode?: string | 'compact';
 }
-
+/**
+ * The object containing configurations specific for sequence diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SequenceDiagramConfig".
+ */
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
   arrowMarkerAbsolute?: boolean;
   hideUnusedParticipants?: boolean;
+  /**
+   * Width of the activation rect
+   */
   activationWidth?: number;
+  /**
+   * Margin to the right and left of the sequence diagram
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the sequence diagram
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between actors
+   */
   actorMargin?: number;
+  /**
+   * Width of actor boxes
+   */
   width?: number;
+  /**
+   * Height of actor boxes
+   */
   height?: number;
+  /**
+   * Margin around loop boxes
+   */
   boxMargin?: number;
+  /**
+   * Margin around the text in loop/alt/opt boxes
+   */
   boxTextMargin?: number;
+  /**
+   * Margin around notes
+   */
   noteMargin?: number;
+  /**
+   * Space between messages.
+   */
   messageMargin?: number;
-  messageAlign?: string;
+  /**
+   * Multiline message alignment
+   */
+  messageAlign?: string | 'left' | 'center' | 'right';
+  /**
+   * Mirror actors under diagram
+   *
+   */
   mirrorActors?: boolean;
+  /**
+   * forces actor popup menus to always be visible (to support E2E testing).
+   *
+   */
   forceMenus?: boolean;
+  /**
+   * Prolongs the edge of the diagram downwards.
+   *
+   * Depending on css styling this might need adjustment.
+   *
+   */
   bottomMarginAdj?: number;
+  /**
+   * Curved Arrows become Right Angles
+   *
+   * This will display arrows that start and begin at the same node as
+   * right angles, rather than as curves.
+   *
+   */
   rightAngles?: boolean;
+  /**
+   * This will show the node numbers
+   */
   showSequenceNumbers?: boolean;
+  /**
+   * This sets the font size of the actor's description
+   */
   actorFontSize?: string | number;
+  /**
+   * This sets the font family of the actor's description
+   */
   actorFontFamily?: string;
+  /**
+   * This sets the font weight of the actor's description
+   */
   actorFontWeight?: string | number;
+  /**
+   * This sets the font size of actor-attached notes
+   */
   noteFontSize?: string | number;
+  /**
+   * This sets the font family of actor-attached notes
+   */
   noteFontFamily?: string;
+  /**
+   * This sets the font weight of actor-attached notes
+   */
   noteFontWeight?: string | number;
-  noteAlign?: string;
+  /**
+   * This sets the text alignment of actor-attached notes
+   */
+  noteAlign?: string | 'left' | 'center' | 'right';
+  /**
+   * This sets the font size of actor messages
+   */
   messageFontSize?: string | number;
+  /**
+   * This sets the font family of actor messages
+   */
   messageFontFamily?: string;
+  /**
+   * This sets the font weight of actor messages
+   */
   messageFontWeight?: string | number;
+  /**
+   * This sets the auto-wrap state for the diagram
+   */
   wrap?: boolean;
+  /**
+   * This sets the auto-wrap padding for the diagram (sides only)
+   */
   wrapPadding?: number;
+  /**
+   * This sets the width of the loop-box (loop, alt, opt, par)
+   */
   labelBoxWidth?: number;
+  /**
+   * This sets the height of the loop-box (loop, alt, opt, par)
+   */
   labelBoxHeight?: number;
   messageFont?: FontCalculator;
   noteFont?: FontCalculator;
   actorFont?: FontCalculator;
 }
-
+/**
+ * The object containing configurations specific for flowcharts
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FlowchartDiagramConfig".
+ */
 export interface FlowchartDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
   arrowMarkerAbsolute?: boolean;
+  /**
+   * The amount of padding around the diagram as a whole so that embedded
+   * diagrams have margins, expressed in pixels.
+   *
+   */
   diagramPadding?: number;
+  /**
+   * Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+   *
+   */
   htmlLabels?: boolean;
+  /**
+   * Defines the spacing between nodes on the same level
+   *
+   * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+   * and the vertical spacing for LR as well as RL graphs.
+   *
+   */
   nodeSpacing?: number;
+  /**
+   * Defines the spacing between nodes on different levels
+   *
+   * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+   * and the vertical spacing for LR as well as RL graphs.
+   *
+   */
   rankSpacing?: number;
-  curve?: string;
+  /**
+   * Defines how mermaid renders curves for flowcharts.
+   *
+   */
+  curve?: string | 'basis' | 'linear' | 'cardinal';
+  /**
+   * Represents the padding between the labels and the shape
+   *
+   * **Only used in new experimental rendering.**
+   *
+   */
   padding?: number;
-  defaultRenderer?: string;
+  /**
+   * Decides which rendering engine that is to be used for the rendering.
+   *
+   */
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  /**
+   * Width of nodes where text is wrapped.
+   *
+   * When using markdown strings the text ius wrapped automatically, this
+   * value sets the max width of a text before it continues on a new line.
+   *
+   */
   wrappingWidth?: number;
 }
-
+/**
+ * The object containing configurations specific for sankey diagrams.
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyDiagramConfig".
+ */
+export interface SankeyDiagramConfig extends BaseDiagramConfig {
+  width?: number;
+  height?: number;
+  /**
+   * The color of the links in the sankey diagram.
+   *
+   */
+  linkColor?: SankeyLinkColor | string;
+  /**
+   * Controls the alignment of the Sankey diagrams.
+   *
+   * See .
+   *
+   */
+  nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
+  useMaxWidth?: boolean;
+}
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FontConfig".
+ */
 export interface FontConfig {
-  fontSize?: string | number;
+  fontSize?: CSSFontSize;
+  /**
+   * The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.
+   */
   fontFamily?: string;
+  /**
+   * The font weight to use.
+   */
   fontWeight?: string | number;
 }
-
-export type FontCalculator = () => Partial;
-
-export {};
diff --git a/packages/mermaid/src/dagre-wrapper/GraphObjects.md b/packages/mermaid/src/dagre-wrapper/GraphObjects.md
index 184fc5137..840ddf824 100644
--- a/packages/mermaid/src/dagre-wrapper/GraphObjects.md
+++ b/packages/mermaid/src/dagre-wrapper/GraphObjects.md
@@ -1,6 +1,6 @@
 # Cluster handling
 
-Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
+Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few workarounds.
 
 In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
 
@@ -73,7 +73,7 @@ Sample object:
 }
 ```
 
-This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
+This is set by the renderer of the diagram and insert the data that the wrapper needs for rendering.
 
 | property   | description                                                                                      |
 | ---------- | ------------------------------------------------------------------------------------------------ |
@@ -114,7 +114,7 @@ Required edgeData for proper rendering:
 | label      | overlap between label and labelText?                                 |
 | labelPos   |                                                                      |
 | labelType  | overlap between label and labelText?                                 |
-| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
+| thickness  | Sets the thickness of the edge. Can be \['normal', 'thick'\]         |
 | pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
 
 # Markers
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index b842fa9a5..410703f6c 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -602,6 +602,8 @@ const doublecircle = async (parent, node) => {
   const outerCircle = circleGroup.insert('circle');
   const innerCircle = circleGroup.insert('circle');
 
+  circleGroup.attr('class', node.class);
+
   // center the circle around its coordinate
   outerCircle
     .attr('style', node.style)
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 4d59fa009..62b361cff 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1,570 +1,29 @@
 import theme from './themes/index.js';
-import { MermaidConfig } from './config.type.js';
+import { type MermaidConfig } from './config.type.js';
+
+// Uses our custom Vite jsonSchemaPlugin to load only the default values from
+// our JSON Schema
+// @ts-expect-error This file is automatically generated via a custom Vite plugin
+import defaultConfigJson from './schemas/config.schema.yaml?only-defaults=true';
+
 /**
- * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
- * here](8.6.0_docs.md)].**
+ * Default mermaid configuration options.
  *
- * ## **What follows are config instructions for older versions**
- *
- * These are the default options which can be overridden with the initialization call like so:
- *
- * **Example 1:**
- *
- * ```js
- * mermaid.initialize({ flowchart:{ htmlLabels: false } });
- * ```
- *
- * **Example 2:**
- *
- * ```html
- * 
- * ```
- *
- * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
- * A description of each option follows below.
+ * Please see the Mermaid config JSON Schema for the default JSON values.
+ * Non-JSON JS default values are listed in this file, e.g. functions, or
+ * `undefined` (explicitly set so that `configKeys` finds them).
  */
 const config: Partial = {
-  /**
-   * Theme , the CSS style sheet
-   *
-   * | Parameter | Description     | Type   | Required | Values                                         |
-   * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
-   * | theme     | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
-   *
-   * **Notes:** To disable any pre-defined mermaid theme, use "null".
-   *
-   * @example
-   *
-   * ```js
-   * {
-   *   "theme": "forest",
-   *   "themeCSS": ".node rect { fill: red; }"
-   * }
-   * ```
-   */
-  theme: 'default',
-  themeVariables: theme['default'].getThemeVariables(),
-  themeCSS: undefined,
-  /* **maxTextSize** - The maximum allowed size of the users text diagram */
-  maxTextSize: 50000,
-  darkMode: false,
-
-  /**
-   * | Parameter  | Description                                            | Type   | Required | Values                      |
-   * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
-   * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
-   *
-   * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
-   */
-  fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
-
-  /**
-   * | Parameter | Description                                           | Type             | Required | Values                                        |
-   * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
-   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
-   *
-   * **Notes:**
-   *
-   * - Trace: 0
-   * - Debug: 1
-   * - Info: 2
-   * - Warn: 3
-   * - Error: 4
-   * - Fatal: 5 (default)
-   */
-  logLevel: 5,
-
-  /**
-   * | Parameter     | Description                       | Type   | Required | Values                                     |
-   * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-   * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
-   *
-   * **Notes**:
-   *
-   * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
-   * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click
-   *   functionality is enabled.
-   * - **loose**: HTML tags in text are allowed and click functionality is enabled.
-   * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This
-   *   prevent any JavaScript from running in the context. This may hinder interactive functionality
-   *   of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
-   */
-  securityLevel: 'strict',
-
-  /**
-   * | Parameter   | Description                                  | Type    | Required | Values      |
-   * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |
-   * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
-   *
-   * **Notes:** Default value: true
-   */
-  startOnLoad: true,
-
-  /**
-   * | Parameter           | Description                                                                  | Type    | Required | Values      |
-   * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
-   * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |
-   *
-   * **Notes**:
-   *
-   * This matters if you are using base tag settings.
-   *
-   * Default value: false
-   */
-  arrowMarkerAbsolute: false,
-
-  /**
-   * This option controls which currentConfig keys are considered _secure_ and can only be changed
-   * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
-   * `secure` keys in the current currentConfig. This prevents malicious graph directives from
-   * overriding a site's default security.
-   *
-   * **Notes**:
-   *
-   * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
-   */
-  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  /**
-   * This option specifies if Mermaid can expected the dependent to include KaTeX stylesheets for browsers
-   * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
-   * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
-   * fall back to legacy rendering for KaTeX.
-   *
-   * **Notes**:
-   *
-   * Default value: false
-   */
-  legacyMathML: false,
-  /**
-   * This option controls if the generated ids of nodes in the SVG are generated randomly or based
-   * on a seed. If set to false, the IDs are generated based on the current date and thus are not
-   * deterministic. This is the default behavior.
-   *
-   * **Notes**:
-   *
-   * This matters if your files are checked into source control e.g. git and should not change unless
-   * content is changed.
-   *
-   * Default value: false
-   */
-  deterministicIds: false,
-
-  /**
-   * This option is the optional seed for deterministic ids. if set to undefined but
-   * deterministicIds is true, a simple number iterator is used. You can set this attribute to base
-   * the seed on a static string.
-   */
+  ...defaultConfigJson,
+  // Set, even though they're `undefined` so that `configKeys` finds these keys
+  // TODO: Should we replace these with `null` so that they can go in the JSON Schema?
   deterministicIDSeed: undefined,
+  themeCSS: undefined,
 
-  /** The object containing configurations specific for flowcharts */
-  flowchart: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the flowchart     | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 8
-     */
-    diagramPadding: 8,
-
-    /**
-     * | Parameter  | Description                                                                                  | Type    | Required | Values      |
-     * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true.
-     */
-    htmlLabels: true,
-
-    /**
-     * | Parameter   | Description                                         | Type    | Required | Values              |
-     * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |
-     * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |
-     *
-     * **Notes:**
-     *
-     * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the
-     * vertical spacing for LR as well as RL graphs.**
-     *
-     * Default value: 50
-     */
-    nodeSpacing: 50,
-
-    /**
-     * | Parameter   | Description                                           | Type    | Required | Values              |
-     * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |
-     * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |
-     *
-     * **Notes**:
-     *
-     * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal
-     * spacing for LR as well as RL graphs.
-     *
-     * Default value 50
-     */
-    rankSpacing: 50,
-
-    /**
-     * | Parameter | Description                                        | Type   | Required | Values                        |
-     * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
-     * | curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
-     *
-     * **Notes:**
-     *
-     * Default Value: 'basis'
-     */
-    curve: 'basis',
-    // Only used in new experimental rendering
-    // represents the padding between the labels and the shape
-    padding: 15,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper, elk |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
-     * elkjs
-     *
-     * Default value: 'dagre-wrapper'
-     */
-    defaultRenderer: 'dagre-wrapper',
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
-     *
-     * **Notes:**
-     *
-     * When using markdown strings the text ius wrapped automatically, this
-     * value sets the max width of a text before it continues on a new line.
-     * Default value: 'dagre-wrapper'
-     */
-    wrappingWidth: 200,
-  },
-
-  /** The object containing configurations specific for sequence diagrams */
+  // add non-JSON default config values
+  themeVariables: theme['default'].getThemeVariables(),
   sequence: {
-    hideUnusedParticipants: false,
-    /**
-     * | Parameter       | Description                  | Type    | Required | Values             |
-     * | --------------- | ---------------------------- | ------- | -------- | ------------------ |
-     * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value :10
-     */
-    activationWidth: 10,
-
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                       | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    actorMargin: 50,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 65,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description            | Type    | Required | Values             |
-     * | ------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type   | Required | Values                    |
-     * | ------------ | --------------------------- | ------ | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter    | Description                 | Type    | Required | Values      |
-     * | ------------ | --------------------------- | ------- | -------- | ----------- |
-     * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true
-     */
-    mirrorActors: true,
-
-    /**
-     * | Parameter  | Description                                                             | Type    | Required | Values      |
-     * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |
-     *
-     * **Notes:**
-     *
-     * Default value: false.
-     */
-    forceMenus: false,
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                          | Type    | Required | Values      |
-     * | ----------- | ------------------------------------ | ------- | -------- | ----------- |
-     * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curve
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-
-    /**
-     * | Parameter           | Description                     | Type    | Required | Values      |
-     * | ------------------- | ------------------------------- | ------- | -------- | ----------- |
-     * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: false
-     */
-    showSequenceNumbers: false,
-
-    /**
-     * | Parameter     | Description                                        | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | actorFontSize | This sets the font size of the actor's description | Integer | Require  | Any Positive Value |
-     *
-     * **Notes:** **Default value 14**..
-     */
-    actorFontSize: 14,
-
-    /**
-     * | Parameter       | Description                                          | Type   | Required | Values                      |
-     * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: "'Open Sans", sans-serif'
-     */
-    actorFontFamily: '"Open Sans", sans-serif',
-
-    /**
-     * This sets the font weight of the actor's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    actorFontWeight: 400,
-
-    /**
-     * | Parameter    | Description                                     | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 14
-     */
-    noteFontSize: 14,
-
-    /**
-     * | Parameter      | Description                                        | Type   | Required | Values                      |
-     * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif'
-     */
-    noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the note's description
-     *
-     * **Notes:** Default value: 400
-     */
-    noteFontWeight: 400,
-
-    /**
-     * | Parameter | Description                                          | Type   | Required | Values                    |
-     * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
-     * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    noteAlign: 'center',
-
-    /**
-     * | Parameter       | Description                               | Type    | Required | Values              |
-     * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
-     * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
-     *
-     * **Notes:** Default value: 16
-     */
-    messageFontSize: 16,
-
-    /**
-     * | Parameter         | Description                                 | Type   | Required | Values                      |
-     * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
-     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif'
-     */
-    messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the message's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    messageFontWeight: 400,
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: false.
-     */
-    wrap: false,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
-    /**
-     * This sets the width of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 50.
-     */
-    labelBoxWidth: 50,
-
-    /**
-     * This sets the height of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 20.
-     */
-    labelBoxHeight: 20,
-
+    ...defaultConfigJson.sequence,
     messageFont: function () {
       return {
         fontFamily: this.messageFontFamily,
@@ -587,1476 +46,14 @@ const config: Partial = {
       };
     },
   },
-
-  /** The object containing configurations specific for gantt diagrams */
   gantt: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter | Description                         | Type    | Required | Values             |
-     * | --------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    barHeight: 20,
-
-    /**
-     * | Parameter | Description                                                      | Type    | Required | Values             |
-     * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | barGap    | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    barGap: 4,
-
-    /**
-     * | Parameter  | Description                                                                | Type    | Required | Values             |
-     * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    topPadding: 50,
-
-    /**
-     * | Parameter    | Description                                                             | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    rightPadding: 75,
-
-    /**
-     * | Parameter   | Description                                                            | Type    | Required | Values             |
-     * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    leftPadding: 75,
-
-    /**
-     * | Parameter            | Description                                  | Type    | Required | Values             |
-     * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    gridLineStartPadding: 35,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values             |
-     * | --------- | ----------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font size   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    fontSize: 11,
-
-    /**
-     * | Parameter       | Description            | Type    | Required | Values             |
-     * | --------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    sectionFontSize: 11,
-
-    /**
-     * | Parameter           | Description                              | Type    | Required | Values             |
-     * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-     * | numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    numberSectionStyles: 4,
-
-    /**
-     * | Parameter   | Description               | Type   | Required | Values    |
-     * | ----------- | ------------------------- | ------ | -------- | --------- |
-     * | displayMode | Controls the display mode | string | 4        | 'compact' |
-     *
-     * **Notes**:
-     *
-     * - **compact**: Enables displaying multiple tasks on the same row.
-     */
-    displayMode: '',
-
-    /**
-     * | Parameter  | Description                  | Type | Required | Values           |
-     * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
-     * | axisFormat | Date/time format of the axis | 3    | Required | Date in yy-mm-dd |
-     *
-     * **Notes:**
-     *
-     * This might need adjustment to match your locale and preferences
-     *
-     * Default value: '%Y-%m-%d'.
-     */
-    axisFormat: '%Y-%m-%d',
-
-    /**
-     * | Parameter    | Description | Type   | Required | Values  |
-     * | ------------ | ------------| ------ | -------- | ------- |
-     * | tickInterval | axis ticks  | string | Optional | string  |
-     *
-     * **Notes:**
-     *
-     * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
-     *
-     * Default value: undefined
-     */
+    ...defaultConfigJson.gantt,
     tickInterval: undefined,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values      |
-     * | --------- | ----------- | ------- | -------- | ----------- |
-     * | topAxis   | See notes   | Boolean | 4        | True, False |
-     *
-     * **Notes:** when this flag is set date labels will be added to the top of the chart
-     *
-     * **Default value false**.
-     */
-    topAxis: false,
-
-    useWidth: undefined,
+    useWidth: undefined, // can probably be removed since `configKeys` already includes this
   },
-
-  /** The object containing configurations specific for journey diagrams */
-  journey: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-  },
-  /** The object containing configurations specific for timeline diagrams */
-  timeline: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-    disableMulticolor: false,
-  },
-  class: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    arrowMarkerAbsolute: false,
-    dividerMargin: 10,
-    padding: 5,
-    textHeight: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes**:
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-  state: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    dividerMargin: 10,
-    sizeUnit: 5,
-    padding: 8,
-    textHeight: 10,
-    titleShift: -15,
-    noteMargin: 10,
-    forkWidth: 70,
-    forkHeight: 7,
-    // Used
-    miniPadding: 2,
-    // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
-    // layout. This might need updating if/when switching font
-    fontSizeFactor: 5.02,
-    fontSize: 24,
-    labelHeight: 16,
-    edgeLengthFactor: '20',
-    compositTitleSize: 35,
-    radius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-
-  /** The object containing configurations specific for entity relationship diagrams */
-  er: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the diagram       | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 20
-     */
-    diagramPadding: 20,
-
-    /**
-     * | Parameter       | Description                              | Type   | Required | Values                 |
-     * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |
-     * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" |
-     *
-     * **Notes:**
-     *
-     * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
-     *
-     * T = top, B = bottom, L = left, and R = right.
-     *
-     * Default value: 'TB'
-     */
-    layoutDirection: 'TB',
-
-    /**
-     * | Parameter      | Description                        | Type    | Required | Values             |
-     * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels. Default value: 100
-     */
-    minEntityWidth: 100,
-
-    /**
-     * | Parameter       | Description                         | Type    | Required | Values             |
-     * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityHeight | The minimum height of an entity box | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels Default value: 75
-     */
-    minEntityHeight: 75,
-
-    /**
-     * | Parameter     | Description                                                  | Type    | Required | Values             |
-     * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
-     * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The minimum internal padding between text in an entity box and the enclosing box borders,
-     * expressed in pixels.
-     *
-     * Default value: 15
-     */
-    entityPadding: 15,
-
-    /**
-     * | Parameter | Description                         | Type   | Required | Values               |
-     * | --------- | ----------------------------------- | ------ | -------- | -------------------- |
-     * | stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'gray'
-     */
-    stroke: 'gray',
-
-    /**
-     * | Parameter | Description                | Type   | Required | Values               |
-     * | --------- | -------------------------- | ------ | -------- | -------------------- |
-     * | fill      | Fill color of entity boxes | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'honeydew'
-     */
-    fill: 'honeydew',
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Font size (expressed as an integer representing a number of pixels) Default value: 12
-     */
-    fontSize: 12,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for pie diagrams */
-  pie: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description                                                                      | Type    | Required | Values              |
-     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
-     *
-     * **Notes:** Default value: 0.75
-     */
-    textPosition: 0.75,
-  },
-
-  quadrantChart: {
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartWidth      | Width of the chart                 | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartWidth: 500,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartHeight     | Height of the chart                | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartHeight: 500,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titlePadding       | Chart title top and bottom padding | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 10
-     */
-    titlePadding: 10,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titleFontSize      | Chart title font size              | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 20
-     */
-    titleFontSize: 20,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantPadding | Padding around the quadrant square | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantPadding: 5,
-    /**
-     * | Parameter              | Description                                                                | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top         | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantTextTopPadding: 5,
-    /**
-     * | Parameter             | Description                        | Type    | Required | Values              |
-     * | ------------------    | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantLabelFontSize | quadrant title font size           | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    quadrantLabelFontSize: 16,
-    /**
-     * | Parameter                         | Description                                                   | Type    | Required | Values              |
-     * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 1
-     */
-    quadrantInternalBorderStrokeWidth: 1,
-    /**
-     * | Parameter                         | Description                                                    | Type    | Required | Values              |
-     * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 2
-     */
-    quadrantExternalBorderStrokeWidth: 2,
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelPadding | Padding around x-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    xAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelFontSize | x-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    xAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisPosition | position of x-axis labels       | string  | Optional | 'top' or 'bottom'   |
-     *
-     * **Notes:**
-     * Default value: top
-     */
-    xAxisPosition: 'top',
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelPadding | Padding around y-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    yAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelFontSize | y-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    yAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisPosition | position of y-axis labels       | string  | Optional | 'left' or 'right'   |
-     *
-     * **Notes:**
-     * Default value: left
-     */
-    yAxisPosition: 'left',
-    /**
-     * | Parameter              | Description                            | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | padding between point and point label  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointTextPadding: 5,
-    /**
-     * | Parameter              | Description            | Type    | Required | Values              |
-     * | ---------------------- | ---------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | point title font size  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 12
-     */
-    pointLabelFontSize: 12,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | pointRadius   | radius of the point to be drawn | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointRadius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for req diagrams */
-  requirement: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    rect_fill: '#f9f9f9',
-    text_color: '#333',
-    rect_border_size: '0.5px',
-    rect_border_color: '#bbb',
-    rect_min_width: 200,
-    rect_min_height: 200,
-    fontSize: 14,
-    rect_padding: 10,
-    line_height: 20,
-  },
-  gitGraph: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the Git diagram   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    diagramPadding: 8,
-    nodeLabel: {
-      width: 75,
-      height: 100,
-      x: -25,
-      y: 0,
-    },
-    mainBranchName: 'main',
-    mainBranchOrder: 0,
-    showCommitLabel: true,
-    showBranches: true,
-    rotateCommitLabel: true,
-  },
-
-  /** The object containing configurations specific for c4 diagrams */
   c4: {
+    ...defaultConfigJson.c4,
     useWidth: undefined,
-
-    /**
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                 | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter     | Description           | Type    | Required | Values             |
-     * | ------------- | --------------------- | ------- | -------- | ------------------ |
-     * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    c4ShapeMargin: 50,
-
-    /**
-     * | Parameter      | Description            | Type    | Required | Values             |
-     * | -------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    c4ShapePadding: 20,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 216
-     */
-    width: 216,
-
-    /**
-     * | Parameter | Description            | Type    | Required | Values             |
-     * | --------- | ---------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 60
-     */
-    height: 60,
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description | Type    | Required | Values             |
-     * | ------------ | ----------- | ------- | -------- | ------------------ |
-     * | c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many shapes to place in each row.
-     *
-     * Default value: 4
-     */
-    c4ShapeInRow: 4,
-
-    nextLinePaddingX: 0,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values             |
-     * | --------------- | ----------- | ------- | -------- | ------------------ |
-     * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many boundaries to place in each row.
-     *
-     * Default value: 2
-     */
-    c4BoundaryInRow: 2,
-
-    /**
-     * This sets the font size of Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    personFontSize: 14,
-    /**
-     * This sets the font family of Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_personFontSize: 14,
-    /**
-     * This sets the font family of External Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    systemFontSize: 14,
-    /**
-     * This sets the font family of System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_systemFontSize: 14,
-    /**
-     * This sets the font family of External System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_dbFontSize: 14,
-    /**
-     * This sets the font family of System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_dbFontSize: 14,
-    /**
-     * This sets the font family of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_queueFontSize: 14,
-    /**
-     * This sets the font family of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_queueFontSize: 14,
-    /**
-     * This sets the font family of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    boundaryFontSize: 14,
-    /**
-     * This sets the font family of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    boundaryFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    boundaryFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Message shape for the diagram
-     *
-     * **Notes:** Default value: 12.
-     */
-    messageFontSize: 12,
-    /**
-     * This sets the font family of Message shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    messageFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Message shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    messageFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    containerFontSize: 14,
-    /**
-     * This sets the font family of Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_containerFontSize: 14,
-    /**
-     * This sets the font family of External Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_dbFontSize: 14,
-    /**
-     * This sets the font family of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_dbFontSize: 14,
-    /**
-     * This sets the font family of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_queueFontSize: 14,
-    /**
-     * This sets the font family of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_queueFontSize: 14,
-    /**
-     * This sets the font family of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    componentFontSize: 14,
-    /**
-     * This sets the font family of Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_componentFontSize: 14,
-    /**
-     * This sets the font family of External Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_dbFontSize: 14,
-    /**
-     * This sets the font family of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_dbFontSize: 14,
-    /**
-     * This sets the font family of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_queueFontSize: 14,
-    /**
-     * This sets the font family of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_queueFontSize: 14,
-    /**
-     * This sets the font family of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: true.
-     */
-    wrap: true,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
     personFont: function () {
       return {
         fontFamily: this.personFontFamily,
@@ -2232,65 +229,30 @@ const config: Partial = {
         fontWeight: this.messageFontWeight,
       };
     },
-
-    // ' Colors
-    // ' ##################################
-    person_bg_color: '#08427B',
-    person_border_color: '#073B6F',
-    external_person_bg_color: '#686868',
-    external_person_border_color: '#8A8A8A',
-    system_bg_color: '#1168BD',
-    system_border_color: '#3C7FC0',
-    system_db_bg_color: '#1168BD',
-    system_db_border_color: '#3C7FC0',
-    system_queue_bg_color: '#1168BD',
-    system_queue_border_color: '#3C7FC0',
-    external_system_bg_color: '#999999',
-    external_system_border_color: '#8A8A8A',
-    external_system_db_bg_color: '#999999',
-    external_system_db_border_color: '#8A8A8A',
-    external_system_queue_bg_color: '#999999',
-    external_system_queue_border_color: '#8A8A8A',
-    container_bg_color: '#438DD5',
-    container_border_color: '#3C7FC0',
-    container_db_bg_color: '#438DD5',
-    container_db_border_color: '#3C7FC0',
-    container_queue_bg_color: '#438DD5',
-    container_queue_border_color: '#3C7FC0',
-    external_container_bg_color: '#B3B3B3',
-    external_container_border_color: '#A6A6A6',
-    external_container_db_bg_color: '#B3B3B3',
-    external_container_db_border_color: '#A6A6A6',
-    external_container_queue_bg_color: '#B3B3B3',
-    external_container_queue_border_color: '#A6A6A6',
-    component_bg_color: '#85BBF0',
-    component_border_color: '#78A8D8',
-    component_db_bg_color: '#85BBF0',
-    component_db_border_color: '#78A8D8',
-    component_queue_bg_color: '#85BBF0',
-    component_queue_border_color: '#78A8D8',
-    external_component_bg_color: '#CCCCCC',
-    external_component_border_color: '#BFBFBF',
-    external_component_db_bg_color: '#CCCCCC',
-    external_component_db_border_color: '#BFBFBF',
-    external_component_queue_bg_color: '#CCCCCC',
-    external_component_queue_border_color: '#BFBFBF',
   },
-  mindmap: {
-    useMaxWidth: true,
-    padding: 10,
-    maxNodeWidth: 200,
+  pie: {
+    ...defaultConfigJson.pie,
+    useWidth: undefined,
+  },
+  requirement: {
+    ...defaultConfigJson.requirement,
+    useWidth: undefined,
+  },
+  gitGraph: {
+    ...defaultConfigJson.gitGraph,
+    // TODO: This is a temporary override for `gitGraph`, since every other
+    //       diagram does have `useMaxWidth`, but instead sets it to `true`.
+    //       Should we set this to `true` instead?
+    useMaxWidth: false,
+  },
+  sankey: {
+    ...defaultConfigJson.sankey,
+    // this is false, unlike every other diagram (other than gitGraph)
+    // TODO: can we make this default to `true` instead?
+    useMaxWidth: false,
   },
-  fontSize: 16,
 };
 
-if (config.class) {
-  config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-if (config.gitGraph) {
-  config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-
 const keyify = (obj: any, prefix = ''): string[] =>
   Object.keys(obj).reduce((res: string[], el): string[] => {
     if (Array.isArray(obj[el])) {
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 0253be45d..9c03e27f3 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -18,6 +18,7 @@ import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
+import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -79,6 +80,7 @@ export const addDiagrams = () => {
     stateV2,
     state,
     journey,
-    quadrantChart
+    quadrantChart,
+    sankey
   );
 };
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 457dd673b..7e89d9cd7 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -7,7 +7,6 @@ import { addStylesForDiagram } from '../styles.js';
 import { DiagramDefinition, DiagramDetector } from './types.js';
 import * as _commonDb from '../commonDb.js';
 import { parseDirective as _parseDirective } from '../directiveUtils.js';
-import isEmpty from 'lodash-es/isEmpty.js';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
@@ -51,9 +50,7 @@ export const registerDiagram = (
   if (detector) {
     addDetector(id, detector);
   }
-  if (!isEmpty(diagram.styles)) {
-    addStylesForDiagram(id, diagram.styles);
-  }
+  addStylesForDiagram(id, diagram.styles);
 
   if (diagram.injectUtils) {
     diagram.injectUtils(
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 265af6587..3b8d00456 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -82,3 +82,5 @@ export type ParseDirectiveDefinition = (statement: string, context: string, type
 export type HTML = d3.Selection;
 
 export type SVG = d3.Selection;
+
+export type DiagramStylesProvider = (options?: any) => string;
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 11a1eb37d..7b74aa819 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -448,9 +448,8 @@ const getNamespaces = function (): NamespaceMap {
 export const addClassesToNamespace = function (id: string, classNames: string[]) {
   if (namespaces[id] !== undefined) {
     classNames.map((className) => {
+      classes[className].parent = id;
       namespaces[id].classes[className] = classes[className];
-      delete classes[className];
-      classCounter--;
     });
   }
 };
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index a43ed2fcd..2182e8c34 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -1373,9 +1373,54 @@ class Class2
       parser.parse(str);
 
       const testNamespace = parser.yy.getNamespace('Namespace1');
+      const testClasses = parser.yy.getClasses();
       expect(Object.keys(testNamespace.classes).length).toBe(2);
       expect(Object.keys(testNamespace.children).length).toBe(0);
       expect(testNamespace.classes['Class1'].id).toBe('Class1');
+      expect(Object.keys(testClasses).length).toBe(2);
+    });
+
+    it('should add relations between classes of different namespaces', function () {
+      const str = `classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2`;
+
+      parser.parse(str);
+      const testNamespaceA = parser.yy.getNamespace('A');
+      const testNamespaceB = parser.yy.getNamespace('B');
+      const testClasses = parser.yy.getClasses();
+      const testRelations = parser.yy.getRelations();
+      expect(Object.keys(testNamespaceA.classes).length).toBe(2);
+      expect(testNamespaceA.classes['A1'].members[0]).toBe('+foo : string');
+      expect(testNamespaceA.classes['A2'].members[0]).toBe('+bar : int');
+      expect(Object.keys(testNamespaceB.classes).length).toBe(2);
+      expect(testNamespaceB.classes['B1'].members[0]).toBe('+foo : bool');
+      expect(testNamespaceB.classes['B2'].members[0]).toBe('+bar : float');
+      expect(Object.keys(testClasses).length).toBe(4);
+      expect(testClasses['A1'].parent).toBe('A');
+      expect(testClasses['A2'].parent).toBe('A');
+      expect(testClasses['B1'].parent).toBe('B');
+      expect(testClasses['B2'].parent).toBe('B');
+      expect(testRelations[0].id1).toBe('A1');
+      expect(testRelations[0].id2).toBe('B1');
+      expect(testRelations[1].id1).toBe('A2');
+      expect(testRelations[1].id2).toBe('B2');
     });
   });
 
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index e0cfea641..6197fe8ac 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -93,52 +93,51 @@ export const addClasses = function (
   log.info(classes);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
-    const vertex = classes[id];
+  keys
+    .filter((id) => classes[id].parent == parent)
+    .forEach(function (id) {
+      const vertex = classes[id];
 
-    /**
-     * Variable for storing the classes for the vertex
-     */
-    let cssClassStr = '';
-    if (vertex.cssClasses.length > 0) {
-      cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
-    }
+      /**
+       * Variable for storing the classes for the vertex
+       */
+      const cssClassStr = vertex.cssClasses.join(' ');
 
-    const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
+      const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
 
-    // Use vertex id as text in the box if no text is provided by the graph definition
-    const vertexText = vertex.label ?? vertex.id;
-    const radius = 0;
-    const shape = 'class_box';
+      // Use vertex id as text in the box if no text is provided by the graph definition
+      const vertexText = vertex.label ?? vertex.id;
+      const radius = 0;
+      const shape = 'class_box';
 
-    // Add the node
-    const node = {
-      labelStyle: styles.labelStyle,
-      shape: shape,
-      labelText: sanitizeText(vertexText),
-      classData: vertex,
-      rx: radius,
-      ry: radius,
-      class: cssClassStr,
-      style: styles.style,
-      id: vertex.id,
-      domId: vertex.domId,
-      tooltip: diagObj.db.getTooltip(vertex.id, parent) || '',
-      haveCallback: vertex.haveCallback,
-      link: vertex.link,
-      width: vertex.type === 'group' ? 500 : undefined,
-      type: vertex.type,
-      // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
-      padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
-    };
-    g.setNode(vertex.id, node);
+      // Add the node
+      const node = {
+        labelStyle: styles.labelStyle,
+        shape: shape,
+        labelText: sanitizeText(vertexText),
+        classData: vertex,
+        rx: radius,
+        ry: radius,
+        class: cssClassStr,
+        style: styles.style,
+        id: vertex.id,
+        domId: vertex.domId,
+        tooltip: diagObj.db.getTooltip(vertex.id, parent) || '',
+        haveCallback: vertex.haveCallback,
+        link: vertex.link,
+        width: vertex.type === 'group' ? 500 : undefined,
+        type: vertex.type,
+        // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
+        padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
+      };
+      g.setNode(vertex.id, node);
 
-    if (parent) {
-      g.setParent(vertex.id, parent);
-    }
+      if (parent) {
+        g.setParent(vertex.id, parent);
+      }
 
-    log.info('setNode', node);
-  });
+      log.info('setNode', node);
+    });
 };
 
 /**
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 3774f7b8c..58def16c2 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -141,8 +141,6 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id, _version, diagObj) {
   const conf = getConfig().class;
   idCache = {};
-  // diagObj.db.clear();
-  // diagObj.parser.parse(text);
 
   log.info('Rendering diagram ' + text);
 
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index cf6f20f0b..f3b8dc8cf 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -7,6 +7,7 @@ export interface ClassNode {
   members: string[];
   annotations: string[];
   domId: string;
+  parent?: string;
   link?: string;
   linkTarget?: string;
   haveCallback?: boolean;
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 93e22732a..63fb05633 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -568,13 +568,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   // const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // Parse the text to populate erDb
-  // try {
-  //   parser.parse(text);
-  // } catch (err) {
-  //   log.debug('Parsing failed');
-  // }
-
   // Get a reference to the svg node that contains the text
   const svg = root.select(`[id='${id}']`);
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index ceb933e85..ea8fa71d2 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -342,7 +342,10 @@ export const setLink = function (ids, linkStr, target) {
   setClass(ids, 'clickable');
 };
 export const getTooltip = function (id) {
-  return tooltips[id];
+  if (tooltips.hasOwnProperty(id)) {
+    return tooltips[id];
+  }
+  return undefined;
 };
 
 /**
@@ -443,7 +446,7 @@ export const clear = function (ver = 'gen-1') {
   subGraphs = [];
   subGraphLookup = {};
   subCount = 0;
-  tooltips = [];
+  tooltips = {};
   firstGraphFlag = true;
   version = ver;
   commonClear();
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 01742c2e1..84c281594 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -312,13 +312,6 @@ export const draw = async function (text, id, _version, diagObj) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // Parse the graph definition
-  try {
-    diagObj.parser.parse(text);
-  } catch (err) {
-    log.debug('Parsing failed');
-  }
-
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
   if (dir === undefined) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index e05c48627..3feaa2469 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -338,4 +338,20 @@ describe('[Style] when parsing', () => {
 
     expect(edges[0].type).toBe('arrow_point');
   });
+
+  it('should handle multiple vertices with style', function () {
+    const res = flow.parser.parse(`
+    graph TD
+      classDef C1 stroke-dasharray:4
+      classDef C2 stroke-dasharray:6
+      A & B:::C1 & D:::C1 --> E:::C2
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+
+    expect(vert['A'].classes.length).toBe(0);
+    expect(vert['B'].classes[0]).toBe('C1');
+    expect(vert['D'].classes[0]).toBe('C1');
+    expect(vert['E'].classes[0]).toBe('C2');
+  });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 51427118f..70fb49162 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -359,7 +359,7 @@ statement
 
 separator: NEWLINE | SEMI | EOF ;
 
-
+ 
 verticeStatement: verticeStatement link node
         { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
     |  verticeStatement link node spaceList
@@ -368,12 +368,16 @@ verticeStatement: verticeStatement link node
     |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
     ;
 
-node: vertex
+node: styledVertex
         { /* console.warn('nod', $1); */ $$ = [$1];}
-    | node spaceList AMP spaceList vertex
+    | node spaceList AMP spaceList styledVertex
         { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
+    ;
+
+styledVertex: vertex
+        { /* console.warn('nod', $1); */ $$ = $1;}
     | vertex STYLE_SEPARATOR idString
-        {$$ = [$1];yy.setClass($1,$3)}
+        {$$ = $1;yy.setClass($1,$3)}
     ;
 
 vertex:  idString SQS text SQE
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index ff16fef7c..215a4df29 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -59,8 +59,6 @@ let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
 
-  // diagObj.db.clear();
-  // parser.parse(text);
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
index b8cff72ec..a3b05ad79 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
@@ -1,7 +1,6 @@
 import { curveBasis, line, select } from 'd3';
 
 import db from './gitGraphAst.js';
-import gitGraphParser from './parser/gitGraph.js';
 import { logger } from '../../logger.js';
 import { interpolateToCurve } from '../../utils.js';
 
@@ -328,13 +327,7 @@ function renderLines(svg, commit, direction, branchColor = 0) {
 
 export const draw = function (txt, id, ver) {
   try {
-    const parser = gitGraphParser.parser;
-    parser.yy = db;
-    parser.yy.clear();
-
     logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
-    // Parse the graph definition
-    parser.parse(txt + '\n');
 
     config = Object.assign(config, apiConfig, db.getOptions());
     logger.debug('effective options', config);
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index 01d675d83..7e741657b 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -167,14 +167,8 @@ function positionNodes(cy) {
 export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
-  // console.log('Config: ', conf);
   conf.htmlLabels = false;
 
-  // This is done only for throwing the error if the text is not valid.
-  diagObj.db.clear();
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
   log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
 
   const securityLevel = getConfig().securityLevel;
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 1ee34e192..d4242c087 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -33,9 +33,6 @@ export const draw = (txt, id, _version, diagObj) => {
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
     // Parse the Pie Chart definition
-    diagObj.db.clear();
-    diagObj.parser.parse(txt);
-    log.debug('Parsed info diagram');
     const elem = doc.getElementById(id);
     width = elem.parentElement.offsetWidth;
 
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
index 8168551ad..9c1162762 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
@@ -1,7 +1,7 @@
 // @ts-ignore: TODO Fix ts errors
 import { scaleLinear } from 'd3';
 import { log } from '../../logger.js';
-import { QuadrantChartConfig } from '../../config.type.js';
+import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js';
 import defaultConfig from '../../defaultConfig.js';
 import { getThemeVariables } from '../../themes/theme-default.js';
 
@@ -71,7 +71,8 @@ export interface quadrantBuilderData {
   points: QuadrantPointInputType[];
 }
 
-export interface QuadrantBuilderConfig extends QuadrantChartConfig {
+export interface QuadrantBuilderConfig
+  extends Required> {
   showXAxis: boolean;
   showYAxis: boolean;
   showTitle: boolean;
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index b88f5c203..49b782865 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -306,8 +306,6 @@ const elementString = (str) => {
 
 export const draw = (text, id, _version, diagObj) => {
   conf = getConfig().requirement;
-  diagObj.db.clear();
-  diagObj.parser.parse(text);
 
   const securityLevel = conf.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
new file mode 100644
index 000000000..d9a8fac9a
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -0,0 +1,99 @@
+%% There are leading and trailing spaces, do not crop
+    Agricultural 'waste',Bio-conversion,124.729   
+%% line with a comment
+
+%% Normal line
+Bio-conversion,Liquid,0.597
+
+%% Line with unquoted sankey keyword
+sankey,target,10
+
+%% Quoted sankey keyword
+"sankey",target,10
+
+%% Another normal line
+Bio-conversion,Losses,26.862
+
+%% Line with integer amount
+Bio-conversion,Solid,280
+
+%% Some blank lines in the middle of CSV
+
+
+%% Another normal line
+Bio-conversion,Gas,81.144
+
+%% Quoted line
+"Biofuel imports",Liquid,35
+
+%% Quoted line with escaped quotes inside
+"""Biomass imports""",Solid,35
+
+%% Lines containing commas inside
+%% Quoted and unquoted values should be equal in terms of graph
+"District heating","Heating and cooling, commercial",22.505
+District heating,"Heating and cooling, homes",46.184
+
+%% A bunch of lines, normal CSV
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+"""Wave""",Electricity grid,19.013
+"""Wind""",Electricity grid,289.366
+
+%% lines at the end, do not remove
+
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
new file mode 100644
index 000000000..b11f8a87b
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -0,0 +1,69 @@
+/** mermaid */
+
+//---------------------------------------------------------
+// We support csv format as defined here:
+// https://www.ietf.org/rfc/rfc4180.txt
+// There are some minor changes for compliance with jison
+// We also parse only 3 columns: source,target,value
+// And allow blank lines for visual purposes
+//---------------------------------------------------------
+
+%lex
+
+%options case-insensitive
+%options easy_keword_rules
+
+%x escaped_text
+%x csv
+
+// as per section 6.1 of RFC 2234 [2]
+COMMA \u002C
+CR \u000D 
+LF \u000A
+CRLF \u000D\u000A
+ESCAPED_QUOTE \u0022
+DQUOTE \u0022
+TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
+
+%%
+
+"sankey-beta"                         { this.pushState('csv'); return 'SANKEY'; }
+<>                           { return 'EOF' } // match end of file
+({CRLF}|{LF})                     { return 'NEWLINE' }
+{COMMA}                           { return 'COMMA' }
+{DQUOTE}                          { this.pushState('escaped_text'); return 'DQUOTE'; }
+{TEXTDATA}*                       { return 'NON_ESCAPED_TEXT' } 
+{DQUOTE}(?!{DQUOTE}) {this.popState('escaped_text'); return 'DQUOTE'; } // unescaped DQUOTE closes string
+({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT'; }
+
+/lex
+
+%start start
+
+%% // language grammar
+
+start: SANKEY NEWLINE csv opt_eof;
+
+csv: record csv_tail;
+csv_tail: NEWLINE csv | ;
+opt_eof: EOF | ;
+
+record
+  : field\[source] COMMA field\[target] COMMA field\[value] {
+      const source = yy.findOrCreateNode($source.trim().replaceAll('""', '"'));
+      const target = yy.findOrCreateNode($target.trim().replaceAll('""', '"'));
+      const value = parseFloat($value.trim());
+      yy.addLink(source,target,value);
+    } // parse only 3 fields, this is not part of CSV standard
+  ;
+
+field
+  : escaped { $$=$escaped; }
+  | non_escaped { $$=$non_escaped; }
+  ;
+
+escaped: DQUOTE ESCAPED_TEXT DQUOTE { $$=$ESCAPED_TEXT; };
+
+non_escaped: NON_ESCAPED_TEXT { $$=$NON_ESCAPED_TEXT; };
+
+
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
new file mode 100644
index 000000000..4517ca01f
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -0,0 +1,24 @@
+// @ts-ignore: jison doesn't export types
+import sankey from './sankey.jison';
+import db from '../sankeyDB.js';
+import { cleanupComments } from '../../../diagram-api/comments.js';
+import { prepareTextForParsing } from '../sankeyUtils.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('Sankey diagram', function () {
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
+      sankey.parser.yy = db;
+      sankey.parser.yy.clear();
+    });
+
+    it('parses csv', async () => {
+      const csv = path.resolve(__dirname, './energy.csv');
+      const data = fs.readFileSync(csv, 'utf8');
+      const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
+
+      sankey.parser.parse(graphDefinition);
+    });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
new file mode 100644
index 000000000..1921e1b85
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -0,0 +1,81 @@
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import {
+  setAccTitle,
+  getAccTitle,
+  getAccDescription,
+  setAccDescription,
+  setDiagramTitle,
+  getDiagramTitle,
+  clear as commonClear,
+} from '../../commonDb.js';
+
+// Sankey diagram represented by nodes and links between those nodes
+let links: SankeyLink[] = [];
+// Array of nodes guarantees their order
+let nodes: SankeyNode[] = [];
+// We also have to track nodes uniqueness (by ID)
+let nodesMap: Record = {};
+
+const clear = (): void => {
+  links = [];
+  nodes = [];
+  nodesMap = {};
+  commonClear();
+};
+
+class SankeyLink {
+  constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {}
+}
+
+/**
+ * @param source - Node where the link starts
+ * @param target - Node where the link ends
+ * @param value - number, float or integer, describes the amount to be passed
+ */
+const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
+  links.push(new SankeyLink(source, target, value));
+};
+
+class SankeyNode {
+  constructor(public ID: string) {}
+}
+
+const findOrCreateNode = (ID: string): SankeyNode => {
+  ID = common.sanitizeText(ID, configApi.getConfig());
+
+  if (!nodesMap[ID]) {
+    nodesMap[ID] = new SankeyNode(ID);
+    nodes.push(nodesMap[ID]);
+  }
+  return nodesMap[ID];
+};
+
+const getNodes = () => nodes;
+const getLinks = () => links;
+
+const getGraph = () => ({
+  nodes: nodes.map((node) => ({ id: node.ID })),
+  links: links.map((link) => ({
+    source: link.source.ID,
+    target: link.target.ID,
+    value: link.value,
+  })),
+});
+
+export default {
+  nodesMap,
+  getConfig: () => configApi.getConfig().sankey,
+  getNodes,
+  getLinks,
+  getGraph,
+  addLink,
+  findOrCreateNode,
+  getAccTitle,
+  setAccTitle,
+  getAccDescription,
+  setAccDescription,
+  getDiagramTitle,
+  setDiagramTitle,
+  clear,
+};
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
new file mode 100644
index 000000000..73c4d1428
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
@@ -0,0 +1,20 @@
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
+
+const id = 'sankey';
+
+const detector: DiagramDetector = (txt) => {
+  return /^\s*sankey-beta/.test(txt);
+};
+
+const loader = async () => {
+  const { diagram } = await import('./sankeyDiagram.js');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
new file mode 100644
index 000000000..d5b62122e
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -0,0 +1,15 @@
+import { DiagramDefinition } from '../../diagram-api/types.js';
+// @ts-ignore: jison doesn't export types
+import parser from './parser/sankey.jison';
+import db from './sankeyDB.js';
+import renderer from './sankeyRenderer.js';
+import { prepareTextForParsing } from './sankeyUtils.js';
+
+const originalParse = parser.parse.bind(parser);
+parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+};
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
new file mode 100644
index 000000000..a9ee698e9
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -0,0 +1,205 @@
+import { Diagram } from '../../Diagram.js';
+import * as configApi from '../../config.js';
+
+import {
+  select as d3select,
+  scaleOrdinal as d3scaleOrdinal,
+  schemeTableau10 as d3schemeTableau10,
+} from 'd3';
+
+import {
+  sankey as d3Sankey,
+  sankeyLinkHorizontal as d3SankeyLinkHorizontal,
+  sankeyLeft as d3SankeyLeft,
+  sankeyRight as d3SankeyRight,
+  sankeyCenter as d3SankeyCenter,
+  sankeyJustify as d3SankeyJustify,
+  SankeyNode as d3SankeyNode,
+} from 'd3-sankey';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Uid } from '../../rendering-util/uid.js';
+import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+
+// Map config options to alignment functions
+const alignmentsMap: Record<
+  SankeyNodeAlignment,
+  (node: d3SankeyNode, n: number) => number
+> = {
+  left: d3SankeyLeft,
+  right: d3SankeyRight,
+  center: d3SankeyCenter,
+  justify: d3SankeyJustify,
+};
+
+/**
+ * Draws Sankey diagram.
+ *
+ * @param text - The text of the diagram
+ * @param id - The id of the diagram which will be used as a DOM element id¨
+ * @param _version - Mermaid version from package.json
+ * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
+ */
+export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
+  // Get Sankey config
+  const { securityLevel, sankey: conf } = configApi.getConfig();
+  const defaultSankeyConfig = configApi!.defaultConfig!.sankey!;
+
+  // TODO:
+  // This code repeats for every diagram
+  // Figure out what is happening there, probably it should be separated
+  // The main thing is svg object that is a d3 wrapper for svg operations
+  //
+  let sandboxElement: any;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = d3select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? d3select(sandboxElement.nodes()[0].contentDocument.body)
+      : d3select('body');
+  // @ts-ignore TODO root.select is not callable
+  const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
+
+  // Establish svg dimensions and get width and height
+  //
+  const width = conf?.width || defaultSankeyConfig.width!;
+  const height = conf?.height || defaultSankeyConfig.width!;
+  const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!;
+  const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!;
+
+  // FIX: using max width prevents height from being set, is it intended?
+  // to add height directly one can use `svg.attr('height', height)`
+  //
+  // @ts-ignore TODO: svg type vs selection mismatch
+  configureSvgSize(svg, height, width, useMaxWidth);
+
+  // Prepare data for construction based on diagObj.db
+  // This must be a mutable object with `nodes` and `links` properties:
+  //
+  //    {
+  //      "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ],
+  //      "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
+  //    }
+  //
+  // @ts-ignore TODO: db should be coerced to sankey DB type
+  const graph = diagObj.db.getGraph();
+
+  // Get alignment function
+  const nodeAlign = alignmentsMap[nodeAlignment];
+
+  // Construct and configure a Sankey generator
+  // That will be a function that calculates nodes and links dimensions
+  //
+  const nodeWidth = 10;
+  const sankey = d3Sankey()
+    .nodeId((d: any) => d.id) // we use 'id' property to identify node
+    .nodeWidth(nodeWidth)
+    .nodePadding(10)
+    .nodeAlign(nodeAlign)
+    .extent([
+      [0, 0],
+      [width, height],
+    ]);
+
+  // Compute the Sankey layout: calculate nodes and links positions
+  // Our `graph` object will be mutated by this and enriched with other properties
+  //
+  sankey(graph);
+
+  // Get color scheme for the graph
+  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
+
+  // Create rectangles for nodes
+  svg
+    .append('g')
+    .attr('class', 'nodes')
+    .selectAll('.node')
+    .data(graph.nodes)
+    .join('g')
+    .attr('class', 'node')
+    .attr('id', (d: any) => (d.uid = Uid.next('node-')).id)
+    .attr('transform', function (d: any) {
+      return 'translate(' + d.x0 + ',' + d.y0 + ')';
+    })
+    .attr('x', (d: any) => d.x0)
+    .attr('y', (d: any) => d.y0)
+    .append('rect')
+    .attr('height', (d: any) => {
+      return d.y1 - d.y0;
+    })
+    .attr('width', (d: any) => d.x1 - d.x0)
+    .attr('fill', (d: any) => colorScheme(d.id));
+
+  // Create labels for nodes
+  svg
+    .append('g')
+    .attr('class', 'node-labels')
+    .attr('font-family', 'sans-serif')
+    .attr('font-size', 14)
+    .selectAll('text')
+    .data(graph.nodes)
+    .join('text')
+    .attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
+    .attr('y', (d: any) => (d.y1 + d.y0) / 2)
+    .attr('dy', '0.35em')
+    .attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
+    .text((d: any) => d.id);
+
+  // Creates the paths that represent the links.
+  const link = svg
+    .append('g')
+    .attr('class', 'links')
+    .attr('fill', 'none')
+    .attr('stroke-opacity', 0.5)
+    .selectAll('.link')
+    .data(graph.links)
+    .join('g')
+    .attr('class', 'link')
+    .style('mix-blend-mode', 'multiply');
+
+  const linkColor = conf?.linkColor || 'gradient';
+
+  if (linkColor === 'gradient') {
+    const gradient = link
+      .append('linearGradient')
+      .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id)
+      .attr('gradientUnits', 'userSpaceOnUse')
+      .attr('x1', (d: any) => d.source.x1)
+      .attr('x2', (d: any) => d.target.x0);
+
+    gradient
+      .append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', (d: any) => colorScheme(d.source.id));
+
+    gradient
+      .append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', (d: any) => colorScheme(d.target.id));
+  }
+
+  let coloring: any;
+  switch (linkColor) {
+    case 'gradient':
+      coloring = (d: any) => d.uid;
+      break;
+    case 'source':
+      coloring = (d: any) => colorScheme(d.source.id);
+      break;
+    case 'target':
+      coloring = (d: any) => colorScheme(d.target.id);
+      break;
+    default:
+      coloring = linkColor;
+  }
+
+  link
+    .append('path')
+    .attr('d', d3SankeyLinkHorizontal())
+    .attr('stroke', coloring)
+    .attr('stroke-width', (d: any) => Math.max(1, d.width));
+};
+
+export default {
+  draw,
+};
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
new file mode 100644
index 000000000..45ecf21dd
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -0,0 +1,8 @@
+export const prepareTextForParsing = (text: string): string => {
+  const textToParse = text
+    .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
+    .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
+    .trim();
+
+  return textToParse;
+};
diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
index 074cd5975..04f0de20e 100644
--- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -38,6 +38,8 @@
 "box"															{ this.begin('LINE'); return 'box'; }
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
+"create"                                                        return 'create';
+"destroy"                                                       { this.begin('ID'); return 'destroy'; }
 [^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 "as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 (?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
@@ -138,6 +140,7 @@ directive
 
 statement
 	: participant_statement
+	| 'create' participant_statement {$2.type='createParticipant'; $$=$2;}
 	| 'box' restOfLine box_section end
 	{
 		$3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) });
@@ -234,10 +237,11 @@ else_sections
 	;
 
 participant_statement
-	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
-	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
+	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant' actor 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant';$$=$2;}
+	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant_actor' actor 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
+	| 'destroy' actor 'NEWLINE' {$2.type='destroyParticipant'; $$=$2;}
 	;
 
 note_statement
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index 89869b64f..b5d68fb9f 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -14,12 +14,16 @@ import {
 
 let prevActor = undefined;
 let actors = {};
+let createdActors = {};
+let destroyedActors = {};
 let boxes = [];
 let messages = [];
 const notes = [];
 let sequenceNumbersEnabled = false;
 let wrapEnabled;
 let currentBox = undefined;
+let lastCreated = undefined;
+let lastDestroyed = undefined;
 
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
@@ -165,6 +169,12 @@ export const getBoxes = function () {
 export const getActors = function () {
   return actors;
 };
+export const getCreatedActors = function () {
+  return createdActors;
+};
+export const getDestroyedActors = function () {
+  return destroyedActors;
+};
 export const getActor = function (id) {
   return actors[id];
 };
@@ -194,6 +204,8 @@ export const autoWrap = () => {
 
 export const clear = function () {
   actors = {};
+  createdActors = {};
+  destroyedActors = {};
   boxes = [];
   messages = [];
   sequenceNumbersEnabled = false;
@@ -459,10 +471,21 @@ export const apply = function (param) {
         });
         break;
       case 'addParticipant':
-        addActor(param.actor, param.actor, param.description, 'participant');
+        addActor(param.actor, param.actor, param.description, param.draw);
         break;
-      case 'addActor':
-        addActor(param.actor, param.actor, param.description, 'actor');
+      case 'createParticipant':
+        if (actors[param.actor]) {
+          throw new Error(
+            "It is not possible to have actors with the same id, even if one is destroyed before the next is created. Use 'AS' aliases to simulate the behavior"
+          );
+        }
+        lastCreated = param.actor;
+        addActor(param.actor, param.actor, param.description, param.draw);
+        createdActors[param.actor] = messages.length;
+        break;
+      case 'destroyParticipant':
+        lastDestroyed = param.actor;
+        destroyedActors[param.actor] = messages.length;
         break;
       case 'activeStart':
         addSignal(param.actor, undefined, undefined, param.signalType);
@@ -486,6 +509,27 @@ export const apply = function (param) {
         addDetails(param.actor, param.text);
         break;
       case 'addMessage':
+        if (lastCreated) {
+          if (param.to !== lastCreated) {
+            throw new Error(
+              'The created participant ' +
+                lastCreated +
+                ' does not have an associated creating message after its declaration. Please check the sequence diagram.'
+            );
+          } else {
+            lastCreated = undefined;
+          }
+        } else if (lastDestroyed) {
+          if (param.to !== lastDestroyed && param.from !== lastDestroyed) {
+            throw new Error(
+              'The destroyed participant ' +
+                lastDestroyed +
+                ' does not have an associated destroying message after its declaration. Please check the sequence diagram.'
+            );
+          } else {
+            lastDestroyed = undefined;
+          }
+        }
         addSignal(param.from, param.to, param.msg, param.signalType);
         break;
       case 'boxStart':
@@ -566,6 +610,8 @@ export default {
   showSequenceNumbers,
   getMessages,
   getActors,
+  getCreatedActors,
+  getDestroyedActors,
   getActor,
   getActorKeys,
   getActorProperty,
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index f77ba3162..e88fbde1a 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -1404,6 +1404,62 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
     expect(boxes[0].actorKeys).toEqual(['a', 'b']);
     expect(boxes[0].fill).toEqual('Aqua');
   });
+
+  it('should handle simple actor creation', async () => {
+    const str = `
+  sequenceDiagram
+  participant a as Alice
+  a ->>b: Hello Bob?
+  create participant c
+  b-->>c: Hello c!
+  c ->> b: Hello b?
+  create actor d as Donald
+  a ->> d: Hello Donald?
+  `;
+    await mermaidAPI.parse(str);
+    const actors = diagram.db.getActors();
+    const createdActors = diagram.db.getCreatedActors();
+    expect(actors['c'].name).toEqual('c');
+    expect(actors['c'].description).toEqual('c');
+    expect(actors['c'].type).toEqual('participant');
+    expect(createdActors['c']).toEqual(1);
+    expect(actors['d'].name).toEqual('d');
+    expect(actors['d'].description).toEqual('Donald');
+    expect(actors['d'].type).toEqual('actor');
+    expect(createdActors['d']).toEqual(3);
+  });
+  it('should handle simple actor destruction', async () => {
+    const str = `
+  sequenceDiagram
+  participant a as Alice
+  a ->>b: Hello Bob?
+  destroy a
+  b-->>a: Hello Alice!
+  b ->> c: Where is Alice?
+  destroy c
+  b ->> c: Where are you?
+  `;
+    await mermaidAPI.parse(str);
+    const destroyedActors = diagram.db.getDestroyedActors();
+    expect(destroyedActors['a']).toEqual(1);
+    expect(destroyedActors['c']).toEqual(3);
+  });
+  it('should handle the creation and destruction of the same actor', async () => {
+    const str = `
+  sequenceDiagram
+  a ->>b: Hello Bob?
+  create participant c
+  b ->>c: Hello c!
+  c ->> b: Hello b?
+  destroy c
+  b ->> c : Bye c !
+  `;
+    await mermaidAPI.parse(str);
+    const createdActors = diagram.db.getCreatedActors();
+    const destroyedActors = diagram.db.getDestroyedActors();
+    expect(createdActors['c']).toEqual(1);
+    expect(destroyedActors['c']).toEqual(3);
+  });
 });
 describe('when checking the bounds in a sequenceDiagram', function () {
   beforeAll(() => {
@@ -1973,7 +2029,9 @@ participant Alice`;
       expect(bounds.startx).toBe(0);
       expect(bounds.starty).toBe(0);
       expect(bounds.stopx).toBe(conf.width);
-      expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height + conf.boxMargin);
+      expect(bounds.stopy).toBe(
+        models.lastActor().stopy + models.lastActor().height + conf.boxMargin
+      );
     });
   });
 });
@@ -2025,7 +2083,7 @@ participant Alice
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopy).toBe(
-      models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin
+      models.lastActor().stopy + models.lastActor().height + mermaid.sequence.boxMargin
     );
   });
   it('should handle one actor, when logLevel is 3 (dfg0)', async () => {
@@ -2045,7 +2103,7 @@ participant Alice
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopy).toBe(
-      models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin
+      models.lastActor().stopy + models.lastActor().height + mermaid.sequence.boxMargin
     );
   });
   it('should hide sequence numbers when autonumber is removed when autonumber is enabled', async () => {
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 57d55fd2f..e21872d57 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck TODO: fix file
 import { select, selectAll } from 'd3';
-import svgDraw, { drawKatex, drawText, fixLifeLineHeights } from './svgDraw.js';
+import svgDraw, { drawKatex, ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
 import { log } from '../../logger.js';
 import common, { calculateMathMLDimensions, hasKatex } from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon';
@@ -485,29 +485,19 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
   }
 };
 
-export const drawActors = async function (
+const addActorRenderingData = async function (
   diagram,
   actors,
+  createdActors,
   actorKeys,
   verticalPos,
-  configuration,
   messages,
   isFooter
 ) {
-  if (configuration.hideUnusedParticipants === true) {
-    const newActors = new Set();
-    messages.forEach((message) => {
-      newActors.add(message.from);
-      newActors.add(message.to);
-    });
-    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
-  }
-
-  // Draw the actors
   let prevWidth = 0;
   let prevMargin = 0;
-  let maxHeight = 0;
   let prevBox = undefined;
+  let maxHeight = 0;
 
   for (const actorKey of actorKeys) {
     const actor = actors[actorKey];
@@ -535,12 +525,16 @@ export const drawActors = async function (
     actor.height = common.getMax(actor.height || conf.height, conf.height);
     actor.margin = actor.margin || conf.actorMargin;
 
-    actor.x = prevWidth + prevMargin;
-    actor.y = bounds.getVerticalPos();
+    maxHeight = common.getMax(maxHeight, actor.height);
+
+    // if the actor is created by a message, widen margin
+    if (createdActors[actor.name]) {
+      prevMargin += actor.width / 2;
+    }
+
+    actor.x = prevWidth + prevMargin;
+    actor.starty = bounds.getVerticalPos();
 
-    // Draw the box with the attached line
-    const height = await svgDraw.drawActor(diagram, actor, conf, isFooter);
-    maxHeight = common.getMax(maxHeight, height);
     bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);
 
     prevWidth += actor.width + prevMargin;
@@ -561,6 +555,28 @@ export const drawActors = async function (
   bounds.bumpVerticalPos(maxHeight);
 };
 
+export const drawActors = async function (diagram, actors, actorKeys, isFooter) {
+  if (!isFooter) {
+    for (const actorKey of actorKeys) {
+      const actor = actors[actorKey];
+      // Draw the box with the attached line
+      await svgDraw.drawActor(diagram, actor, conf, false);
+    }
+  } else {
+    let maxHeight = 0;
+    bounds.bumpVerticalPos(conf.boxMargin * 2);
+    for (const actorKey of actorKeys) {
+      const actor = actors[actorKey];
+      if (!actor.stopy) {
+        actor.stopy = bounds.getVerticalPos();
+      }
+      const height = await svgDraw.drawActor(diagram, actor, conf, true);
+      maxHeight = common.getMax(maxHeight, height);
+    }
+    bounds.bumpVerticalPos(maxHeight + conf.boxMargin);
+  }
+};
+
 export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
   let maxHeight = 0;
   let maxWidth = 0;
@@ -640,6 +656,95 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
   bounds.bumpVerticalPos(heightAdjust);
 }
 
+/**
+ * Adjust the msgModel and the actor for the rendering in case the latter is created or destroyed by the msg
+ * @param msg - the potentially creating or destroying message
+ * @param msgModel - the model associated with the message
+ * @param lineStartY - the y position of the message line
+ * @param index - the index of the current actor under consideration
+ * @param actors - the array of all actors
+ * @param createdActors - the array of actors created in the diagram
+ * @param destroyedActors - the array of actors destroyed in the diagram
+ */
+function adjustCreatedDestroyedData(
+  msg,
+  msgModel,
+  lineStartY,
+  index,
+  actors,
+  createdActors,
+  destroyedActors
+) {
+  function receiverAdjustment(actor, adjustment) {
+    if (actor.x < actors[msg.from].x) {
+      bounds.insert(
+        msgModel.stopx - adjustment,
+        msgModel.starty,
+        msgModel.startx,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.stopx = msgModel.stopx + adjustment;
+    } else {
+      bounds.insert(
+        msgModel.startx,
+        msgModel.starty,
+        msgModel.stopx + adjustment,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.stopx = msgModel.stopx - adjustment;
+    }
+  }
+
+  function senderAdjustment(actor, adjustment) {
+    if (actor.x < actors[msg.to].x) {
+      bounds.insert(
+        msgModel.startx - adjustment,
+        msgModel.starty,
+        msgModel.stopx,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.startx = msgModel.startx + adjustment;
+    } else {
+      bounds.insert(
+        msgModel.stopx,
+        msgModel.starty,
+        msgModel.startx + adjustment,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.startx = msgModel.startx - adjustment;
+    }
+  }
+
+  // if it is a create message
+  if (createdActors[msg.to] == index) {
+    const actor = actors[msg.to];
+    const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3;
+    receiverAdjustment(actor, adjustment);
+    actor.starty = lineStartY - actor.height / 2;
+    bounds.bumpVerticalPos(actor.height / 2);
+  }
+  // if it is a destroy sender message
+  else if (destroyedActors[msg.from] == index) {
+    const actor = actors[msg.from];
+    if (conf.mirrorActors) {
+      const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 : actor.width / 2;
+      senderAdjustment(actor, adjustment);
+    }
+    actor.stopy = lineStartY - actor.height / 2;
+    bounds.bumpVerticalPos(actor.height / 2);
+  }
+  // if it is a destroy receiver message
+  else if (destroyedActors[msg.to] == index) {
+    const actor = actors[msg.to];
+    if (conf.mirrorActors) {
+      const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3;
+      receiverAdjustment(actor, adjustment);
+    }
+    actor.stopy = lineStartY - actor.height / 2;
+    bounds.bumpVerticalPos(actor.height / 2);
+  }
+}
+
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
  *
@@ -673,8 +778,10 @@ export const draw = async function (_text: string, id: string, _version: string,
 
   // Fetch data from the parsing
   const actors = diagObj.db.getActors();
+  const createdActors = diagObj.db.getCreatedActors();
+  const destroyedActors = diagObj.db.getDestroyedActors();
   const boxes = diagObj.db.getBoxes();
-  const actorKeys = diagObj.db.getActorKeys();
+  let actorKeys = diagObj.db.getActorKeys();
   const messages = diagObj.db.getMessages();
   const title = diagObj.db.getDiagramTitle();
   const hasBoxes = diagObj.db.hasAtLeastOneBox();
@@ -693,7 +800,16 @@ export const draw = async function (_text: string, id: string, _version: string,
     }
   }
 
-  await drawActors(diagram, actors, actorKeys, 0, conf, messages, false);
+  if (conf.hideUnusedParticipants === true) {
+    const newActors = new Set();
+    messages.forEach((message) => {
+      newActors.add(message.from);
+      newActors.add(message.to);
+    });
+    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
+  }
+
+  await addActorRenderingData(diagram, actors, createdActors, actorKeys, 0, messages, false);
   const loopWidths = await calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
 
   // The arrow head definition is attached to the svg once
@@ -727,6 +843,8 @@ export const draw = async function (_text: string, id: string, _version: string,
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
   const messagesToDraw = [];
+  const backgrounds = [];
+  let index = 0;
   for (const msg of messages) {
     let loopModel, noteModel, msgModel;
 
@@ -764,7 +882,7 @@ export const draw = async function (_text: string, id: string, _version: string,
         break;
       case diagObj.db.LINETYPE.RECT_END:
         loopModel = bounds.endLoop();
-        svgDraw.drawBackgroundRect(diagram, loopModel);
+        backgrounds.push(loopModel);
         bounds.models.addLoop(loopModel);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         break;
@@ -883,13 +1001,20 @@ export const draw = async function (_text: string, id: string, _version: string,
         break;
       default:
         try {
-          // lastMsg = msg
-          bounds.resetVerticalPos();
           msgModel = msg.msgModel;
           msgModel.starty = bounds.getVerticalPos();
           msgModel.sequenceIndex = sequenceIndex;
           msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
           const lineStartY = await boundMessage(diagram, msgModel);
+          adjustCreatedDestroyedData(
+            msg,
+            msgModel,
+            lineStartY,
+            index,
+            actors,
+            createdActors,
+            destroyedActors
+          );
           messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
           bounds.models.addMessage(msgModel);
         } catch (e) {
@@ -912,19 +1037,21 @@ export const draw = async function (_text: string, id: string, _version: string,
     ) {
       sequenceIndex = sequenceIndex + sequenceIndexStep;
     }
+    index++;
   }
 
+  log.debug('createdActors', createdActors);
+  log.debug('destroyedActors', destroyedActors);
+
+  await drawActors(diagram, actors, actorKeys, false);
   for (const e of messagesToDraw) {
     await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj);
   }
-
   if (conf.mirrorActors) {
-    // Draw actors below diagram
-    bounds.bumpVerticalPos(conf.boxMargin * 2);
-    await drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true);
-    bounds.bumpVerticalPos(conf.boxMargin);
-    fixLifeLineHeights(diagram, bounds.getVerticalPos());
+    await drawActors(diagram, actors, actorKeys, true);
   }
+  backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
+  fixLifeLineHeights(diagram, actors, actorKeys, conf);
 
   for (const box of bounds.models.boxes) {
     box.height = bounds.getVerticalPos() - box.y;
@@ -946,11 +1073,6 @@ export const draw = async function (_text: string, id: string, _version: string,
 
   const { bounds: box } = bounds.getBounds();
 
-  // Adjust line height of actor lines now that the height of the diagram is known
-  log.debug('For line height fix Querying: #' + id + ' .actor-line');
-  const actorLines = selectAll('#' + id + ' .actor-line');
-  actorLines.attr('y2', box.stopy);
-
   // Make sure the height of the diagram supports long menus.
   let boxHeight = box.stopy - box.starty;
   if (boxHeight < requiredBoxSize.maxHeight) {
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 2f0cf2000..30bfb0a90 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -5,6 +5,8 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
 
+export const ACTOR_TYPE_WIDTH = 18 * 2;
+
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
 };
@@ -336,14 +338,19 @@ export const drawLabel = function (elem, txtObject) {
 
 let actorCnt = -1;
 
-export const fixLifeLineHeights = (diagram, bounds) => {
-  if (!diagram.selectAll) {
+export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => {
+  if (!diagram.select) {
     return;
   }
-  diagram
-    .selectAll('.actor-line')
-    .attr('class', '200')
-    .attr('y2', bounds - 55);
+  actorKeys.forEach((actorKey) => {
+    const actor = actors[actorKey];
+    const actorDOM = diagram.select('#actor' + actor.actorCnt);
+    if (!conf.mirrorActors && actor.stopy) {
+      actorDOM.attr('y2', actor.stopy + actor.height / 2);
+    } else if (conf.mirrorActors) {
+      actorDOM.attr('y2', actor.stopy);
+    }
+  });
 };
 
 /**
@@ -355,10 +362,11 @@ export const fixLifeLineHeights = (diagram, bounds) => {
  * @param {boolean} isFooter - If the actor is the footer one
  */
 const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
+  const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
-  const centerY = actor.y + 5;
+  const centerY = actorY + 5;
 
-  const boxpluslineGroup = elem.append('g');
+  const boxpluslineGroup = elem.append('g').lower();
   var g = boxpluslineGroup;
 
   if (!isFooter) {
@@ -370,6 +378,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
       .attr('x2', center)
       .attr('y2', 2000)
       .attr('class', 'actor-line')
+      .attr('class', '200')
       .attr('stroke-width', '0.5px')
       .attr('stroke', '#999');
 
@@ -390,7 +399,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
     rect.fill = '#eaeaea';
   }
   rect.x = actor.x;
-  rect.y = actor.y;
+  rect.y = actorY;
   rect.width = actor.width;
   rect.height = actor.height;
   rect.class = cssclass;
@@ -430,8 +439,12 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
 };
 
 const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
+  const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
-  const centerY = actor.y + 80;
+  const centerY = actorY + 80;
+
+  elem.lower();
+
   if (!isFooter) {
     actorCnt++;
     elem
@@ -442,15 +455,18 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
       .attr('x2', center)
       .attr('y2', 2000)
       .attr('class', 'actor-line')
+      .attr('class', '200')
       .attr('stroke-width', '0.5px')
       .attr('stroke', '#999');
+
+    actor.actorCnt = actorCnt;
   }
   const actElem = elem.append('g');
   actElem.attr('class', 'actor-man');
 
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;
-  rect.y = actor.y;
+  rect.y = actorY;
   rect.fill = '#eaeaea';
   rect.width = actor.width;
   rect.height = actor.height;
@@ -462,33 +478,33 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
     .append('line')
     .attr('id', 'actor-man-torso' + actorCnt)
     .attr('x1', center)
-    .attr('y1', actor.y + 25)
+    .attr('y1', actorY + 25)
     .attr('x2', center)
-    .attr('y2', actor.y + 45);
+    .attr('y2', actorY + 45);
 
   actElem
     .append('line')
     .attr('id', 'actor-man-arms' + actorCnt)
-    .attr('x1', center - 18)
-    .attr('y1', actor.y + 33)
-    .attr('x2', center + 18)
-    .attr('y2', actor.y + 33);
+    .attr('x1', center - ACTOR_TYPE_WIDTH / 2)
+    .attr('y1', actorY + 33)
+    .attr('x2', center + ACTOR_TYPE_WIDTH / 2)
+    .attr('y2', actorY + 33);
   actElem
     .append('line')
-    .attr('x1', center - 18)
-    .attr('y1', actor.y + 60)
+    .attr('x1', center - ACTOR_TYPE_WIDTH / 2)
+    .attr('y1', actorY + 60)
     .attr('x2', center)
-    .attr('y2', actor.y + 45);
+    .attr('y2', actorY + 45);
   actElem
     .append('line')
     .attr('x1', center)
-    .attr('y1', actor.y + 45)
-    .attr('x2', center + 16)
-    .attr('y2', actor.y + 60);
+    .attr('y1', actorY + 45)
+    .attr('x2', center + ACTOR_TYPE_WIDTH / 2 - 2)
+    .attr('y2', actorY + 60);
 
   const circle = actElem.append('circle');
   circle.attr('cx', actor.x + actor.width / 2);
-  circle.attr('cy', actor.y + 10);
+  circle.attr('cy', actorY + 10);
   circle.attr('r', 15);
   circle.attr('width', actor.width);
   circle.attr('height', actor.height);
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 20ae0d112..592cb43cc 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -358,7 +358,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) =
  * Look through all of the documents (docs) in the parsedItems
  * Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
  * @param {object[]} parsedItem - the parsed statement item to look through
- * @param [defaultDir=DEFAULT_NESTED_DOC_DIR] - the direction to use if none is found
+ * @param [defaultDir] - the direction to use if none is found
  * @returns {string}
  */
 const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 74913a748..689d7a0e5 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -57,8 +57,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // diagObj.db.clear();
-  // parser.parse(text);
   log.debug('Rendering diagram ' + text);
 
   // Fetch the default direction, use TD if none was found
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 17460bac2..d44174fe4 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -30,12 +30,6 @@ export const draw = function (text: string, id: string, version: string, diagObj
   // @ts-expect-error - wrong config?
   const LEFT_MARGIN = conf.leftMargin ?? 50;
 
-  //2. Clear the diagram db before parsing
-  diagObj.db.clear?.();
-
-  //3. Parse the diagram text
-  diagObj.parser.parse(text + '\n');
-
   log.debug('timeline', diagObj.db);
 
   const securityLevel = conf.securityLevel;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 9ea880f69..28c83f19d 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -49,8 +49,6 @@ const conf = getConfig().journey;
 const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().journey;
-  diagObj.db.clear();
-  diagObj.parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 64c77254d..356cd3cd1 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync }
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
-import type { Code, Root } from 'mdast';
+import type { Code, ListItem, Root, Text } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
@@ -44,6 +44,7 @@ import chokidar from 'chokidar';
 import mm from 'micromatch';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';
+import { visit } from 'unist-util-visit';
 
 const MERMAID_MAJOR_VERSION = (
   JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
@@ -122,7 +123,7 @@ const changeToFinalDocDir = (file: string): string => {
 const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => {
   const changeMsg = wasCopied ? LOGMSG_TRANSFORMED : LOGMSG_TO_BE_TRANSFORMED;
   let logMsg: string;
-  logMsg = `  File ${changeMsg}: ${filename}`;
+  logMsg = `  File ${changeMsg}: ${filename.replace(FINAL_DOCS_DIR, SOURCE_DOCS_DIR)}`;
   if (wasCopied) {
     logMsg += LOGMSG_COPIED;
   }
@@ -150,6 +151,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
   }
 
   filesTransformed.add(fileInFinalDocDir);
+
   if (doCopy) {
     writeFileSync(fileInFinalDocDir, newBuffer);
   }
@@ -321,6 +323,123 @@ const transformMarkdown = (file: string) => {
   copyTransformedContents(file, !verifyOnly, formatted);
 };
 
+import { load, JSON_SCHEMA } from 'js-yaml';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js';
+
+/**
+ * Transforms the given JSON Schema into Markdown documentation
+ */
+async function transormJsonSchema(file: string) {
+  const yamlContents = readSyncedUTF8file(file);
+  const jsonSchema = load(yamlContents, {
+    filename: file,
+    // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+    // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+    schema: JSON_SCHEMA,
+  });
+
+  /** Location of the `schema.yaml` files */
+  const SCHEMA_INPUT_DIR = 'src/schemas/';
+  /**
+   * Location to store the generated `schema.json` file for the website
+   *
+   * Because Vitepress doesn't handle bundling `.json` files properly, we need
+   * to instead place it into a `public/` subdirectory.
+   */
+  const SCHEMA_OUTPUT_DIR = 'src/docs/public/schemas/';
+  const VITEPRESS_PUBLIC_DIR = 'src/docs/public';
+  /**
+   * Location to store the generated Schema Markdown docs.
+   * Links to JSON Schemas should automatically be rewritten to point to
+   * `SCHEMA_OUTPUT_DIR`.
+   */
+  const SCHEMA_MARKDOWN_OUTPUT_DIR = join('src', 'docs', 'config', 'schema-docs');
+
+  // write .schema.json files
+  const jsonFileName = file
+    .replace('.schema.yaml', '.schema.json')
+    .replace(SCHEMA_INPUT_DIR, SCHEMA_OUTPUT_DIR);
+  copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2));
+
+  const schemas = traverseSchemas([schemaLoader()(jsonFileName, jsonSchema)]);
+
+  // ignore output of this function
+  // for some reason, without calling this function, we get some broken links
+  // this is probably a bug in @adobe/jsonschema2md
+  jsonSchemaReadmeBuilder({ readme: true })(schemas);
+
+  // write Markdown files
+  const markdownFiles = buildMarkdownFromSchema({
+    header: true,
+    // links,
+    includeProperties: ['tsType'], // Custom TypeScript type
+    exampleFormat: 'json',
+    // skipProperties,
+    /**
+     * Automatically rewrite schema paths passed to `schemaLoader`
+     * (e.g. src/docs/schemas/config.schema.json)
+     * to relative links (e.g. /schemas/config.schema.json)
+     *
+     * See https://vitepress.vuejs.org/guide/asset-handling
+     *
+     * @param origin - Original schema path (relative to this script).
+     * @returns New absolute Vitepress path to schema
+     */
+    rewritelinks: (origin: string) => {
+      return `/${relative(VITEPRESS_PUBLIC_DIR, origin)}`;
+    },
+  })(schemas);
+
+  for (const [name, markdownAst] of Object.entries(markdownFiles)) {
+    /*
+     * Converts list entries of shape '- tsType: () => Partial'
+     * into '- tsType: `() => Partial`' (e.g. escaping with back-ticks),
+     * as otherwise VitePress doesn't like the  bit.
+     */
+    visit(markdownAst as Root, 'listItem', (listEntry: ListItem) => {
+      let listText: Text;
+      const blockItem = listEntry.children[0];
+      if (blockItem.type === 'paragraph' && blockItem.children[0].type === 'text') {
+        listText = blockItem.children[0];
+      } // @ts-expect-error: MD AST output from @adobe/jsonschema2md is technically wrong
+      else if (blockItem.type === 'text') {
+        listText = blockItem;
+      } else {
+        return; // skip
+      }
+
+      if (listText.value.startsWith('tsType: ')) {
+        listText.value = listText.value.replace(/tsType: (.*)/g, 'tsType: `$1`');
+      }
+    });
+
+    const transformed = remark()
+      .use(remarkGfm)
+      .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown
+      .use(transformMarkdownAst, {
+        // mermaid project specific plugin
+        originalFilename: file,
+        addAutogeneratedWarning: !noHeader,
+        removeYAML: !noHeader,
+      })
+      .stringify(markdownAst as Root);
+
+    const formatted = prettier.format(transformed, {
+      parser: 'markdown',
+      ...prettierConfig,
+    });
+    const newFileName = join(SCHEMA_MARKDOWN_OUTPUT_DIR, `${name}.md`);
+    copyTransformedContents(newFileName, !verifyOnly, formatted);
+  }
+}
+
 /**
  * Transform an HTML file and write the transformed file to the directory for published
  * documentation
@@ -362,15 +481,15 @@ const transformHtml = (filename: string) => {
 };
 
 const getGlobs = (globs: string[]): string[] => {
-  globs.push(
-    '!**/dist',
-    '!**/redirect.spec.ts',
-    '!**/landing',
-    '!**/node_modules',
-    '!**/user-avatars'
-  );
+  globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**');
   if (!vitepress) {
-    globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json');
+    globs.push(
+      '!**/.vitepress/**',
+      '!**/vite.config.ts',
+      '!src/docs/index.md',
+      '!**/package.json',
+      '!**/user-avatars/**'
+    );
   }
   return globs;
 };
@@ -388,6 +507,14 @@ const main = async () => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const action = verifyOnly ? 'Verifying' : 'Transforming';
 
+  if (vitepress) {
+    console.log(`${action} 1 .schema.yaml file`);
+    await transormJsonSchema('src/schemas/config.schema.yaml');
+  } else {
+    // skip because this creates so many Markdown files that it lags git
+    console.log('Skipping 1 .schema.yaml file');
+  }
+
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   console.log(`${action} ${mdFiles.length} markdown files...`);
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 19f3912a7..b6998f249 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,8 +16,12 @@ import { teamMembers } from '../contributors';
           
    
             
             
    
-            Join the community and
-            get involved!
+            Join the community
+            and get involved!
           
    
         
       
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 0089438b0..6dabf5cf9 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -138,6 +138,7 @@ function sidebarSyntax() {
         { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
+        { text: 'Sankey 🔥', link: '/syntax/sankey' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },
@@ -154,6 +155,7 @@ function sidebarConfig() {
         { text: 'Tutorials', link: '/config/Tutorials' },
         { text: 'API-Usage', link: '/config/usage' },
         { text: 'Mermaid API Configuration', link: '/config/setup/README' },
+        { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' },
         { text: 'Directives', link: '/config/directives' },
         { text: 'Theming', link: '/config/theming' },
         { text: 'Math', link: '/config/math' },
diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts
index bef2c1311..93eeee2e2 100644
--- a/packages/mermaid/src/docs/.vitepress/contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/contributors.ts
@@ -1,30 +1,5 @@
 import contributorUsernamesJson from './contributor-names.json';
-
-export interface Contributor {
-  name: string;
-  avatar: string;
-}
-
-export interface SocialEntry {
-  icon: string | { svg: string };
-  link: string;
-}
-
-export interface CoreTeam {
-  name: string;
-  // required to download avatars from GitHub
-  github: string;
-  avatar?: string;
-  twitter?: string;
-  mastodon?: string;
-  sponsor?: string;
-  website?: string;
-  linkedIn?: string;
-  title?: string;
-  org?: string;
-  desc?: string;
-  links?: SocialEntry[];
-}
+import { CoreTeam, knut, plainTeamMembers } from './teamMembers.js';
 
 const contributorUsernames: string[] = contributorUsernamesJson;
 
@@ -38,6 +13,7 @@ const websiteSVG = {
 
 const createLinks = (tm: CoreTeam): CoreTeam => {
   tm.avatar = `/user-avatars/${tm.github}.png`;
+  tm.title = tm.title ?? 'Developer';
   tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }];
   if (tm.mastodon) {
     tm.links.push({ icon: 'mastodon', link: tm.mastodon });
@@ -54,91 +30,6 @@ const createLinks = (tm: CoreTeam): CoreTeam => {
   return tm;
 };
 
-const knut: CoreTeam = {
-  github: 'knsv',
-  name: 'Knut Sveidqvist',
-  title: 'Creator',
-  twitter: 'knutsveidqvist',
-  sponsor: 'https://github.com/sponsors/knsv',
-};
-
-const plainTeamMembers: CoreTeam[] = [
-  {
-    github: 'NeilCuzon',
-    name: 'Neil Cuzon',
-    title: 'Developer',
-  },
-  {
-    github: 'tylerlong',
-    name: 'Tyler Liu',
-    title: 'Developer',
-  },
-  {
-    github: 'sidharthv96',
-    name: 'Sidharth Vinod',
-    title: 'Developer',
-    twitter: 'sidv42',
-    mastodon: 'https://techhub.social/@sidv',
-    sponsor: 'https://github.com/sponsors/sidharthv96',
-    linkedIn: 'sidharth-vinod',
-    website: 'https://sidharth.dev',
-  },
-  {
-    github: 'ashishjain0512',
-    name: 'Ashish Jain',
-    title: 'Developer',
-  },
-  {
-    github: 'mmorel-35',
-    name: 'Matthieu Morel',
-    title: 'Developer',
-    linkedIn: 'matthieumorel35',
-  },
-  {
-    github: 'aloisklink',
-    name: 'Alois Klink',
-    title: 'Developer',
-    linkedIn: 'aloisklink',
-    website: 'https://aloisklink.com',
-  },
-  {
-    github: 'pbrolin47',
-    name: 'Per Brolin',
-    title: 'Developer',
-  },
-  {
-    github: 'Yash-Singh1',
-    name: 'Yash Singh',
-    title: 'Developer',
-  },
-  {
-    github: 'GDFaber',
-    name: 'Marc Faber',
-    title: 'Developer',
-    linkedIn: 'marc-faber',
-  },
-  {
-    github: 'MindaugasLaganeckas',
-    name: 'Mindaugas Laganeckas',
-    title: 'Developer',
-  },
-  {
-    github: 'jgreywolf',
-    name: 'Justin Greywolf',
-    title: 'Developer',
-  },
-  {
-    github: 'IOrlandoni',
-    name: 'Nacho Orlandoni',
-    title: 'Developer',
-  },
-  {
-    github: 'huynhicode',
-    name: 'Steph Huynh',
-    title: 'Developer',
-  },
-];
-
 const teamMembers = plainTeamMembers.map((tm) => createLinks(tm));
 teamMembers.sort(
   (a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github)
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 14340462c..30f044d98 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -54,6 +54,15 @@ const MermaidExample = async (md: MarkdownRenderer) => {
       return `
    NOTE
    ${token.content}}
    `;
     }
 
+    if (token.info.trim() === 'regexp') {
+      // shiki doesn't yet support regexp code blocks, but the javascript
+      // one still makes RegExes look good
+      token.info = 'javascript';
+      // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block
+      token.content = `/${token.content.trimEnd()}/\n`;
+      return defaultRenderer(tokens, index, options, env, slf);
+    }
+
     if (token.info.trim() === 'jison') {
       return `
    
       
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
index bbea31bc1..cd78be782 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -18,7 +18,11 @@ async function download(url: string, fileName: URL) {
     const image = await fetch(url);
     await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
   } catch (error) {
-    console.error(error);
+    console.error('failed to load', url, error);
+    // Exit the build process if we are in CI
+    if (process.env.CI) {
+      throw error;
+    }
   }
 }
 
@@ -26,10 +30,13 @@ async function fetchAvatars() {
   await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), {
     recursive: true,
   });
+
   contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
-  for (const name of contributors) {
-    await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
-  }
+  let avatars = contributors.map((name) => {
+    download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
+  });
+
+  await Promise.allSettled(avatars);
 }
 
 fetchAvatars();
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
index fd5409d0f..da7621b29 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -1,6 +1,8 @@
 // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6
 
 import { writeFile } from 'node:fs/promises';
+import { knut, plainTeamMembers } from '../teamMembers.js';
+import { existsSync } from 'node:fs';
 
 const pathContributors = new URL('../contributor-names.json', import.meta.url);
 
@@ -10,28 +12,40 @@ interface Contributor {
 
 async function fetchContributors() {
   const collaborators: string[] = [];
-  let page = 1;
-  let data: Contributor[] = [];
-  do {
-    const response = await fetch(
-      `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
-      {
-        method: 'GET',
-        headers: {
-          'content-type': 'application/json',
-        },
-      }
-    );
-    data = await response.json();
-    collaborators.push(...data.map((i) => i.login));
-    console.log(`Fetched page ${page}`);
-    page++;
-  } while (data.length === 100);
+  try {
+    let page = 1;
+    let data: Contributor[] = [];
+    do {
+      const response = await fetch(
+        `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
+        {
+          method: 'GET',
+          headers: {
+            'content-type': 'application/json',
+          },
+        }
+      );
+      data = await response.json();
+      collaborators.push(...data.map((i) => i.login));
+      console.log(`Fetched page ${page}`);
+      page++;
+    } while (data.length === 100);
+  } catch (e) {
+    /* contributors fetching failure must not hinder docs development */
+  }
   return collaborators.filter((name) => !name.includes('[bot]'));
 }
 
 async function generate() {
-  const collaborators = await fetchContributors();
+  if (existsSync(pathContributors)) {
+    // Only fetch contributors once, when running locally.
+    // In CI, the file won't exist, so it'll fetch every time as expected.
+    return;
+  }
+  // Will fetch all contributors only in CI to speed up local development.
+  const collaborators = process.env.CI
+    ? await fetchContributors()
+    : [knut, ...plainTeamMembers].map((m) => m.github);
   await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8');
 }
 
diff --git a/packages/mermaid/src/docs/.vitepress/teamMembers.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
new file mode 100644
index 000000000..d95f49ed8
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
@@ -0,0 +1,105 @@
+export interface Contributor {
+  name: string;
+  avatar: string;
+}
+
+export interface SocialEntry {
+  icon: string | { svg: string };
+  link: string;
+}
+
+export interface CoreTeam {
+  name: string;
+  // required to download avatars from GitHub
+  github: string;
+  avatar?: string;
+  twitter?: string;
+  mastodon?: string;
+  sponsor?: string;
+  website?: string;
+  linkedIn?: string;
+  title?: string;
+  org?: string;
+  desc?: string;
+  links?: SocialEntry[];
+}
+
+export const knut: CoreTeam = {
+  github: 'knsv',
+  name: 'Knut Sveidqvist',
+  title: 'Creator',
+  twitter: 'knutsveidqvist',
+  sponsor: 'https://github.com/sponsors/knsv',
+};
+
+export const plainTeamMembers: CoreTeam[] = [
+  {
+    github: 'NeilCuzon',
+    name: 'Neil Cuzon',
+  },
+  {
+    github: 'tylerlong',
+    name: 'Tyler Liu',
+  },
+  {
+    github: 'sidharthv96',
+    name: 'Sidharth Vinod',
+    twitter: 'sidv42',
+    mastodon: 'https://techhub.social/@sidv',
+    sponsor: 'https://github.com/sponsors/sidharthv96',
+    linkedIn: 'sidharth-vinod',
+    website: 'https://sidharth.dev',
+  },
+  {
+    github: 'ashishjain0512',
+    name: 'Ashish Jain',
+  },
+  {
+    github: 'mmorel-35',
+    name: 'Matthieu Morel',
+    linkedIn: 'matthieumorel35',
+  },
+  {
+    github: 'aloisklink',
+    name: 'Alois Klink',
+    linkedIn: 'aloisklink',
+    website: 'https://aloisklink.com',
+  },
+  {
+    github: 'pbrolin47',
+    name: 'Per Brolin',
+  },
+  {
+    github: 'Yash-Singh1',
+    name: 'Yash Singh',
+  },
+  {
+    github: 'GDFaber',
+    name: 'Marc Faber',
+    linkedIn: 'marc-faber',
+  },
+  {
+    github: 'MindaugasLaganeckas',
+    name: 'Mindaugas Laganeckas',
+  },
+  {
+    github: 'jgreywolf',
+    name: 'Justin Greywolf',
+  },
+  {
+    github: 'IOrlandoni',
+    name: 'Nacho Orlandoni',
+  },
+  {
+    github: 'huynhicode',
+    name: 'Steph Huynh',
+  },
+  {
+    github: 'Yokozuna59',
+    name: 'Reda Al Sulais',
+  },
+  {
+    github: 'nirname',
+    name: 'Nikolay Rozhkov',
+  },
+];
diff --git a/packages/mermaid/src/docs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md
index 875f15245..c6db9dacf 100644
--- a/packages/mermaid/src/docs/config/Tutorials.md
+++ b/packages/mermaid/src/docs/config/Tutorials.md
@@ -20,6 +20,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 
 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
 
+## Mermaid with OpenAI
+
+[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
+
 ## Mermaid with HTML
 
 Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 0e4571d15..0e0853283 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -55,9 +55,9 @@ To make a custom theme, modify `themeVariables` via `init`.
 
 You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
 
-| Parameter      | Description                          | Type   | Properties                                                                                          |
-| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
-| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
+| Parameter      | Description                          | Type   | Properties                                                                          |
+| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
 
 Example of modifying `themeVariables` using the `init` directive:
 
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index be229a8aa..e64cf1a13 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -60,7 +60,7 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## Blogs
 
-- [Wordpress](https://wordpress.org)
+- [WordPress](https://wordpress.org)
   - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
   - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
@@ -78,7 +78,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
+  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
 ## Communication
 
@@ -98,7 +98,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [FosWiki](https://foswiki.org)
+- [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
@@ -155,6 +155,8 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [CKEditor](https://github.com/ckeditor/ckeditor5)
   - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
+- [Standard Notes](https://standardnotes.com/)
+  - [sn-mermaid](https://github.com/nienow/sn-mermaid)
 
 ## Document Generation
 
@@ -166,7 +168,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
-- [jSDoc](https://jsdoc.app/)
+- [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index b752d3d57..b8d0669ec 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements
 
-## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
 
-8 June 2023 · 7 mins
+29 June 2023 · 4 mins
 
-A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index e62a327b4..b536cb87e 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,17 @@
 # Blog
 
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
+
+29 June 2023 · 4 mins
+
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
+
+## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
+
+15 June 2023 · 12 mins
+
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
+
 ## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
 
 8 June 2023 · 7 mins
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 63d06fd21..4529a7622 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "vitepress --port 3333 --open",
+    "dev:docker": "vitepress --port 3333 --host",
     "build": "pnpm prefetch && vitepress build",
     "build-no-prefetch": "vitepress build",
     "serve": "vitepress serve",
@@ -30,7 +31,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.3",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-beta.2",
-    "workbox-window": "^6.5.4"
+    "vitepress": "1.0.0-beta.5",
+    "workbox-window": "^7.0.0"
   }
 }
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 80cb242d6..2e3d78c30 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -676,6 +676,16 @@ flowchart LR
     classDef someclass fill:#f96
 ```
 
+This form can be used when declaring multiple links between nodes:
+
+```mermaid-example
+flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef foobar stroke:#00f
+```
+
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index cecaf52cb..710b39e52 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -19,13 +19,13 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Syntax
@@ -66,10 +66,10 @@ gantt
 It is possible to set multiple dependencies separated by space:
 
 ```mermaid-example
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
+gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
 ```
 
 ### Title
@@ -88,12 +88,12 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 
 ```mermaid-example
 gantt
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -214,15 +214,14 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
-    dateFormat  YYYY-MM-DD
+    %% This is a comment
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Styling
@@ -350,7 +349,7 @@ Beginner's tip—a full example using interactive links in an html context:
       dateFormat  YYYY-MM-DD
 
       section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
+      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
       Print arguments         :cl2, after cl1, 3d
       Print task              :cl3, after cl2, 3d
 
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
new file mode 100644
index 000000000..914c7024b
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -0,0 +1,182 @@
+# Sankey diagrams
+
+> A sankey diagram is a visualization used to depict a flow from one set of values to another.
+
+::: warning
+This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
+:::
+
+The things being connected are called nodes and the connections are called links.
+
+## Example
+
+This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
+
+```mermaid-example
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+```
+
+## Syntax
+
+The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
+
+It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+
+- CSV must contain **3 columns only**
+- It is **allowed** to have **empty lines** without comma separators for visual purposes
+
+### Basic
+
+It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
+
+```mermaid-example
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+```
+
+### Empty Lines
+
+CSV does not support empty lines without comma delimeters by default. But you can add them if needed:
+
+```mermaid-example
+sankey-beta
+
+Bio-conversion,Losses,26.862
+
+Bio-conversion,Solid,280.322
+
+Bio-conversion,Gas,81.144
+```
+
+### Commas
+
+If you need to have a comma, wrap it in double quotes:
+
+```mermaid-example
+sankey-beta
+
+Pumped heat,"Heating and cooling, homes",193.026
+Pumped heat,"Heating and cooling, commercial",70.672
+```
+
+### Double Quotes
+
+If you need to have double quote, put a pair of them inside quoted string:
+
+```mermaid-example
+sankey-beta
+
+Pumped heat,"Heating and cooling, ""homes""",193.026
+Pumped heat,"Heating and cooling, ""commercial""",70.672
+```
+
+## Configuration
+
+You can customize link colors, node alignments and diagram dimensions.
+
+```html
+
+```
+
+### Links Coloring
+
+You can adjust links' color by setting `linkColor` to one of those:
+
+- `source` - link will be of a source node color
+- `target` - link will be of a target node color
+- `gradient` - link color will be smoothly transient between source and target node colors
+- hex code of color, like `#a1a1a1`
+
+### Node Alignment
+
+Graph layout can be changed by setting `nodeAlignment` to:
+
+- `justify`
+- `center`
+- `left`
+- `right`
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 0d5442129..e061a192e 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -58,6 +58,31 @@ sequenceDiagram
     J->>A: Great!
 ```
 
+### Actor Creation and Destruction
+
+It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
+
+```
+create participant B
+A --> B: Hello
+```
+
+Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
+
+```mermaid-example
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+```
+
 ### Grouping / Box
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index 248146993..f35796b13 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -304,7 +304,7 @@ where
 - the second _property_ is `color` and its _value_ is `white`
 - the third _property_ is `font-weight` and its _value_ is `bold`
 - the fourth _property_ is `stroke-width` and its _value_ is `2px`
-- the fifth _property_ is `stroke` and its _value_ is `yello`
+- the fifth _property_ is `stroke` and its _value_ is `yellow`
 
 ### Apply classDef styles to states
 
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index c9bc9161e..201ab6b16 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -172,9 +172,11 @@ let us look at same example, where we have disabled the multiColor option.
 
 ### Customizing Color scheme
 
-You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
 In case you have more than 12 sections, the color scheme will start to repeat.
 
+If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
+
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
 
 Example:
@@ -183,9 +185,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid-example
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
+              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%
        timeline
         title History of Social Media Platform
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 11c16827b..0f4e61499 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -733,59 +733,7 @@ describe('mermaidAPI', () => {
           const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
           const expectedDiagramType = testedDiagram.expectedType;
 
-          it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
-            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
-            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
-            await mermaidAPI.render(id, diagramText);
-            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
-              expect.anything(),
-              expectedDiagramType
-            );
-            expect(a11yTitleDesc_spy).toHaveBeenCalled();
-          });
-        });
-      });
-    });
-  });
-
-  describe('render', () => {
-    // Be sure to add async before each test (anonymous) method
-
-    // These are more like integration tests right now because nothing is mocked.
-    // But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel.
-
-    // render(id, text, cb?, svgContainingElement?)
-
-    // Test all diagram types.  Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
-    // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
-    const diagramTypesAndExpectations = [
-      { textDiagramType: 'C4Context', expectedType: 'c4' },
-      { textDiagramType: 'classDiagram', expectedType: 'classDiagram' },
-      { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
-      { textDiagramType: 'erDiagram', expectedType: 'er' },
-      { textDiagramType: 'graph', expectedType: 'flowchart-v2' },
-      { textDiagramType: 'flowchart', expectedType: 'flowchart-v2' },
-      { textDiagramType: 'gitGraph', expectedType: 'gitGraph' },
-      { textDiagramType: 'gantt', expectedType: 'gantt' },
-      { textDiagramType: 'journey', expectedType: 'journey' },
-      { textDiagramType: 'pie', expectedType: 'pie' },
-      { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
-      { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
-      { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
-    ];
-
-    describe('accessibility', () => {
-      const id = 'mermaid-fauxId';
-      const a11yTitle = 'a11y title';
-      const a11yDescr = 'a11y description';
-
-      diagramTypesAndExpectations.forEach((testedDiagram) => {
-        describe(`${testedDiagram.textDiagramType}`, () => {
-          const diagramType = testedDiagram.textDiagramType;
-          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
-          const expectedDiagramType = testedDiagram.expectedType;
-
-          it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
+          it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
             const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
             const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
             await mermaidAPI.render(id, diagramText);
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 45f686e1f..68bf394a7 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -478,7 +478,7 @@ const render = async function (
 
   // Get the temporary div element containing the svg
   const element = root.select(enclosingDivID_selector).node();
-  const graphType = diag.type;
+  const diagramType = diag.type;
 
   // -------------------------------------------------------------------------------
   // Create and insert the styles (user styles, theme styles, config styles)
@@ -486,11 +486,11 @@ const render = async function (
   // Insert an element into svg. This is where we put the styles
   const svg = element.firstChild;
   const firstChild = svg.firstChild;
-  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
+  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(diagramType)
     ? diag.renderer.getClasses(text, diag)
     : {};
 
-  const rules = createUserStyles(config, graphType, diagramClassDefs, idSelector);
+  const rules = createUserStyles(config, diagramType, diagramClassDefs, idSelector);
 
   const style1 = document.createElement('style');
   style1.innerHTML = rules;
@@ -507,9 +507,9 @@ const render = async function (
 
   // This is the d3 node for the svg element
   const svgNode = root.select(`${enclosingDivID_selector} svg`);
-  const a11yTitle = diag.db.getAccTitle?.();
-  const a11yDescr = diag.db.getAccDescription?.();
-  addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr);
+  const a11yTitle: string | undefined = diag.db.getAccTitle?.();
+  const a11yDescr: string | undefined = diag.db.getAccDescription?.();
+  addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr);
 
   // -------------------------------------------------------------------------------
   // Clean up SVG code
@@ -586,14 +586,18 @@ function initialize(options: MermaidConfig = {}) {
 /**
  * Add accessibility (a11y) information to the diagram.
  *
+ * @param diagramType - diagram type
+ * @param svgNode - d3 node to insert the a11y title and desc info
+ * @param a11yTitle - a11y title
+ * @param a11yDescr - a11y description
  */
 function addA11yInfo(
-  graphType: string,
+  diagramType: string,
   svgNode: D3Element,
-  a11yTitle: string | undefined,
-  a11yDescr: string | undefined
-) {
-  setA11yDiagramInfo(svgNode, graphType);
+  a11yTitle?: string,
+  a11yDescr?: string
+): void {
+  setA11yDiagramInfo(svgNode, diagramType);
   addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
 }
 
diff --git a/packages/mermaid/src/rendering-util/uid.ts b/packages/mermaid/src/rendering-util/uid.ts
new file mode 100644
index 000000000..9f581faa7
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/uid.ts
@@ -0,0 +1,18 @@
+export class Uid {
+  private static count = 0;
+  id: string;
+  href: string;
+
+  public static next(name: string): Uid {
+    return new Uid(name + ++Uid.count);
+  }
+
+  constructor(id: string) {
+    this.id = id;
+    this.href = `#${id}`;
+  }
+
+  toString(): string {
+    return 'url(' + this.href + ')';
+  }
+}
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
new file mode 100644
index 000000000..4e1c2c80f
--- /dev/null
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -0,0 +1,1894 @@
+# Used for VS Code's YAML plugin to automatically error on invalid types
+# yaml-language-server: $schema=https://json-schema.org/draft/2019-09/schema
+
+# This file defines the MermaidConfig JSON Schema as a YAML file.
+#
+# From this file, the following things can be generated:
+#   - `scripts/create-types-from-json-schema.mjs`
+#     Used to generate the `src/config.type.ts` TypeScript types for MermaidConfig
+#     with the `json-schema-to-typescript` NPM package.
+#   - `.vite/jsonSchemaPlugin.ts`
+#     Used to generate the default values from the `default` keys in this
+#     JSON Schema using the `ajv` NPM package.
+#     Non-JSON values, like functions or `undefined`, still need to be manually
+#     set in `src/defaultConfig.ts`)
+#   - `src/docs.mts`
+#     Used to genereate Markdown documentation for this JSON Schema by using
+#     the `@adobe/jsonschema2md` NPM package.
+
+# Useful things to know when editting this file
+# - Use the `|` character for multi-line strings
+# - Use `meta:enum` to document enum values (from jsonschema2md)
+# - Use `tsType` to override the TypeScript type (from json-schema-to-typescript)
+# - If adding a new object to `MermaidConfig` (e.g. a new diagram type),
+#   you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts`
+#   to get the docs/default values to generate properly.
+$id: https://mermaid-js.github.io/schemas/config.schema.json
+$schema: https://json-schema.org/draft/2019-09/schema
+title: Mermaid Config
+type: object
+additionalProperties: false
+required:
+  - fontFamily
+  - logLevel
+  - securityLevel
+  - startOnLoad
+  - arrowMarkerAbsolute
+  - flowchart
+  - sequence
+  - gantt
+  - journey
+  - class
+  - state
+  - er
+  - pie
+  - quadrantChart
+  - requirement
+  - mindmap
+  - gitGraph
+  - c4
+  - sankey
+properties:
+  theme:
+    description: |
+      Theme, the CSS style sheet.
+      You may also use `themeCSS` to override this value.
+    type: string
+    enum:
+      - default
+      - forest
+      - dark
+      - neutral
+      - 'null' # should this be a `null`-type?
+    meta:enum:
+      'null': Can be set to disable any pre-defined mermaid theme
+    default: 'default'
+    # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+    tsType: 'string | "default" | "forest" | "dark" | "neutral" | "null"'
+  themeVariables:
+    tsType: any
+  themeCSS:
+    type: string
+  maxTextSize:
+    description: The maximum allowed size of the users text diagram
+    type: number
+    default: 50000
+  darkMode:
+    type: boolean
+    default: false
+  htmlLabels:
+    type: boolean # maybe unused, seems to be copied in each diagram config
+  fontFamily:
+    description: |
+      Specifies the font to be used in the rendered diagrams.
+      Can be any possible CSS `font-family`.
+      See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+    type: string
+    default: '"trebuchet ms", verdana, arial, sans-serif;'
+  altFontFamily:
+    # TODO: seems to be unused, except for in tests
+    type: string
+  logLevel:
+    description: |
+      This option decides the amount of logging to be used by mermaid.
+    type:
+      - string
+      - number
+    enum:
+      - trace
+      - 0
+      - debug
+      - 1
+      - info
+      - 2
+      - warn
+      - 3
+      - error
+      - 4
+      - fatal
+      - 5
+    meta:enum:
+      trace: Equivalent to 0
+      debug: Equivalent to 1
+      info: Equivalent to 2
+      warn: Equivalent to 3
+      error: Equivalent to 4
+      fatal: Equivalent to 5 (default)
+    default: 5
+    # Allow any number or string for typescript backwards compatibility (fix in Mermaid v10)
+    tsType: 'number | string | 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5 | undefined'
+  securityLevel:
+    description: Level of trust for parsed diagram
+    type: string
+    enum:
+      - strict
+      - loose
+      - antiscript
+      - sandbox
+    meta:enum:
+      strict: (**default**) HTML tags in the text are encoded and click functionality is disabled.
+      antiscript: HTML tags in text are allowed (only script elements are removed), and click functionality is enabled.
+      loose: HTML tags in text are allowed and click functionality is enabled.
+      sandbox: |
+        With this security level, all rendering takes place in a sandboxed iframe.
+        This prevent any JavaScript from running in the context.
+        This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, or links to other tabs or targets, etc.
+    default: strict
+    # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+    tsType: 'string | "strict" | "loose" | "antiscript" | "sandbox" | undefined'
+  startOnLoad:
+    description: Dictates whether mermaid starts on Page load
+    type: boolean
+    default: true
+  arrowMarkerAbsolute:
+    &arrowMarkerAbsolute # YAML anchor, can be used later with `*arrowMarkerAbsolute`
+    description: |
+      Controls whether or arrow markers in html code are absolute paths or anchors.
+      This matters if you are using base tag settings.
+    type: boolean
+    default: false
+  secure:
+    description: |
+      This option controls which `currentConfig` keys are considered secure and
+      can only be changed via call to `mermaidAPI.initialize`.
+      Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
+      in the current `currentConfig`.
+
+      This prevents malicious graph directives from overriding a site's default security.
+    default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+    type: array
+    items:
+      type: string
+    uniqueItems: false # Should be enabled, but it may be a breaking change from the old config
+  legacyMathML:
+    description: |
+      This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
+      without their own MathML implementation. If this option is disabled and MathML is not supported, the math
+      equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
+      fall back to legacy rendering for KaTeX.
+    type: boolean
+    default: false
+  deterministicIds:
+    description: |
+      This option controls if the generated ids of nodes in the SVG are
+      generated randomly or based on a seed.
+      If set to `false`, the IDs are generated based on the current date and
+      thus are not deterministic. This is the default behavior.
+
+      This matters if your files are checked into source control e.g. git and
+      should not change unless content is changed.
+    type: boolean
+    default: false
+  deterministicIDSeed:
+    description: |
+      This option is the optional seed for deterministic ids.
+      If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
+      You can set this attribute to base the seed on a static string.
+    type: string
+  flowchart:
+    $ref: '#/$defs/FlowchartDiagramConfig'
+  sequence:
+    $ref: '#/$defs/SequenceDiagramConfig'
+  gantt:
+    $ref: '#/$defs/GanttDiagramConfig'
+  journey:
+    $ref: '#/$defs/JourneyDiagramConfig'
+  timeline:
+    $ref: '#/$defs/TimelineDiagramConfig'
+  class:
+    $ref: '#/$defs/ClassDiagramConfig'
+  state:
+    $ref: '#/$defs/StateDiagramConfig'
+  er:
+    $ref: '#/$defs/ErDiagramConfig'
+  pie:
+    $ref: '#/$defs/PieDiagramConfig'
+  quadrantChart:
+    $ref: '#/$defs/QuadrantChartConfig'
+  requirement:
+    $ref: '#/$defs/RequirementDiagramConfig'
+  mindmap:
+    $ref: '#/$defs/MindmapDiagramConfig'
+  gitGraph:
+    $ref: '#/$defs/GitGraphDiagramConfig'
+  c4:
+    $ref: '#/$defs/C4DiagramConfig'
+  sankey:
+    $ref: '#/$defs/SankeyDiagramConfig'
+  dompurifyConfig:
+    title: DOM Purify Configuration
+    description: Configuration options to pass to the `dompurify` library.
+    type: object
+    tsType: "import('dompurify').Config"
+  wrap:
+    type: boolean
+  fontSize:
+    type: number
+    default: 16
+
+$defs: # JSON Schema definition (maybe we should move these to a seperate file)
+  BaseDiagramConfig:
+    # TODO: More config needs to be moved here
+    title: Base Diagram Config
+    type: object
+    properties:
+      useWidth:
+        type: number
+      useMaxWidth:
+        description: |
+          When this flag is set to `true`, the height and width is set to 100%
+          and is then scaled with the available space.
+          If set to `false`, the absolute space required is used.
+        type: boolean
+        default: true
+  C4DiagramConfig:
+    title: C4 Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for c4 diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - diagramMarginX
+      - diagramMarginY
+      - c4ShapeMargin
+      - c4ShapePadding
+      - width
+      - height
+      - boxMargin
+      - useMaxWidth
+      - c4ShapeInRow
+      - c4BoundaryInRow
+    properties:
+      diagramMarginX:
+        description: |
+          Margin to the right and left of the c4 diagram, must be a positive value.
+        type: integer
+        default: 50
+        minimum: 0
+      diagramMarginY:
+        description: |
+          Margin to the over and under the c4 diagram, must be a positive value.
+        type: integer
+        default: 10
+        minimum: 0
+      c4ShapeMargin:
+        description: Margin between shapes
+        type: integer
+        default: 50
+        minimum: 0
+      c4ShapePadding:
+        description: Padding between shapes
+        type: integer
+        default: 20
+        minimum: 0
+      width:
+        description: Width of person boxes
+        type: integer
+        default: 216
+        minimum: 0
+      height:
+        description: Height of person boxes
+        type: integer
+        default: 60
+        minimum: 0
+      boxMargin:
+        description: Margin around boxes
+        type: integer
+        default: 10
+        minimum: 0
+      c4ShapeInRow:
+        description: How many shapes to place in each row.
+        type: integer
+        default: 4
+        minimum: 0
+      nextLinePaddingX:
+        # TODO: add description
+        type: number
+        default: 0
+      c4BoundaryInRow:
+        description: How many boundaries to place in each row.
+        type: integer
+        default: 2
+        minimum: 0
+
+      # --------------------------------------------------------------------- #
+      # Default font values
+      # --------------------------------------------------------------------- #
+      personFontSize:
+        description: This sets the font size of Person shape for the diagram
+        type: &fontSizeType ['string', 'number'] # YAML anchor
+        default: 14
+      personFontFamily:
+        description: This sets the font weight of Person shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      personFontWeight:
+        description: This sets the font weight of Person shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_personFontSize:
+        description: This sets the font size of External Person shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_personFontFamily:
+        description: This sets the font family of External Person shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_personFontWeight:
+        description: This sets the font weight of External Person shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      systemFontSize:
+        description: This sets the font size of System shape for the diagram
+        type: *fontSizeType
+        default: 14
+      systemFontFamily:
+        description: This sets the font family of System shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      systemFontWeight:
+        description: This sets the font weight of System shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_systemFontSize:
+        description: This sets the font size of External System shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_systemFontFamily:
+        description: This sets the font family of External System shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_systemFontWeight:
+        description: This sets the font weight of External System shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      system_dbFontSize:
+        description: This sets the font size of System DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      system_dbFontFamily:
+        description: This sets the font family of System DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      system_dbFontWeight:
+        description: This sets the font weight of System DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_system_dbFontSize:
+        description: This sets the font size of External System DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_system_dbFontFamily:
+        description: This sets the font family of External System DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_system_dbFontWeight:
+        description: This sets the font weight of External System DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      system_queueFontSize:
+        description: This sets the font size of System Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      system_queueFontFamily:
+        description: This sets the font family of System Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      system_queueFontWeight:
+        description: This sets the font weight of System Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_system_queueFontSize:
+        description: This sets the font size of External System Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_system_queueFontFamily:
+        description: This sets the font family of External System Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_system_queueFontWeight:
+        description: This sets the font weight of External System Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      boundaryFontSize:
+        description: This sets the font size of Boundary shape for the diagram
+        type: *fontSizeType
+        default: 14
+      boundaryFontFamily:
+        description: This sets the font family of Boundary shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      boundaryFontWeight:
+        description: This sets the font weight of Boundary shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      messageFontSize:
+        description: This sets the font size of Message shape for the diagram
+        type: *fontSizeType
+        default: 12
+      messageFontFamily:
+        description: This sets the font family of Message shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      messageFontWeight:
+        description: This sets the font weight of Message shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      containerFontSize:
+        description: This sets the font size of Container shape for the diagram
+        type: *fontSizeType
+        default: 14
+      containerFontFamily:
+        description: This sets the font family of Container shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      containerFontWeight:
+        description: This sets the font weight of Container shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_containerFontSize:
+        description: This sets the font size of External Container shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_containerFontFamily:
+        description: This sets the font family of External Container shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_containerFontWeight:
+        description: This sets the font weight of External Container shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      container_dbFontSize:
+        description: This sets the font size of Container DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      container_dbFontFamily:
+        description: This sets the font family of Container DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      container_dbFontWeight:
+        description: This sets the font weight of Container DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_container_dbFontSize:
+        description: This sets the font size of External Container DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_container_dbFontFamily:
+        description: This sets the font family of External Container DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_container_dbFontWeight:
+        description: This sets the font weight of External Container DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      container_queueFontSize:
+        description: This sets the font size of Container Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      container_queueFontFamily:
+        description: This sets the font family of Container Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      container_queueFontWeight:
+        description: This sets the font weight of Container Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_container_queueFontSize:
+        description: This sets the font size of External Container Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_container_queueFontFamily:
+        description: This sets the font family of External Container Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_container_queueFontWeight:
+        description: This sets the font weight of External Container Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      componentFontSize:
+        description: This sets the font size of Component shape for the diagram
+        type: *fontSizeType
+        default: 14
+      componentFontFamily:
+        description: This sets the font family of Component shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      componentFontWeight:
+        description: This sets the font weight of Component shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_componentFontSize:
+        description: This sets the font size of External Component shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_componentFontFamily:
+        description: This sets the font family of External Component shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_componentFontWeight:
+        description: This sets the font weight of External Component shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      component_dbFontSize:
+        description: This sets the font size of Component DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      component_dbFontFamily:
+        description: This sets the font family of Component DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      component_dbFontWeight:
+        description: This sets the font weight of Component DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_component_dbFontSize:
+        description: This sets the font size of External Component DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_component_dbFontFamily:
+        description: This sets the font family of External Component DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_component_dbFontWeight:
+        description: This sets the font weight of External Component DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      component_queueFontSize:
+        description: This sets the font size of Component Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      component_queueFontFamily:
+        description: This sets the font family of Component Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      component_queueFontWeight:
+        description: This sets the font weight of Component Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_component_queueFontSize:
+        description: This sets the font size of External Component Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_component_queueFontFamily:
+        description: This sets the font family of External Component Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_component_queueFontWeight:
+        description: This sets the font weight of External Component Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      wrap:
+        description: This sets the auto-wrap state for the diagram
+        type: boolean
+        default: true
+      wrapPadding:
+        description: This sets the auto-wrap padding for the diagram (sides only)
+        type: number
+        default: 10
+
+      # --------------------------------------------------------------------- #
+      # Colors
+      # --------------------------------------------------------------------- #
+      person_bg_color:
+        type: string
+        default: '#08427B'
+      person_border_color:
+        type: string
+        default: '#073B6F'
+      external_person_bg_color:
+        type: string
+        default: '#686868'
+      external_person_border_color:
+        type: string
+        default: '#8A8A8A'
+      system_bg_color:
+        type: string
+        default: '#1168BD'
+      system_border_color:
+        type: string
+        default: '#3C7FC0'
+      system_db_bg_color:
+        type: string
+        default: '#1168BD'
+      system_db_border_color:
+        type: string
+        default: '#3C7FC0'
+      system_queue_bg_color:
+        type: string
+        default: '#1168BD'
+      system_queue_border_color:
+        type: string
+        default: '#3C7FC0'
+      external_system_bg_color:
+        type: string
+        default: '#999999'
+      external_system_border_color:
+        type: string
+        default: '#8A8A8A'
+      external_system_db_bg_color:
+        type: string
+        default: '#999999'
+      external_system_db_border_color:
+        type: string
+        default: '#8A8A8A'
+      external_system_queue_bg_color:
+        type: string
+        default: '#999999'
+      external_system_queue_border_color:
+        type: string
+        default: '#8A8A8A'
+      container_bg_color:
+        type: string
+        default: '#438DD5'
+      container_border_color:
+        type: string
+        default: '#3C7FC0'
+      container_db_bg_color:
+        type: string
+        default: '#438DD5'
+      container_db_border_color:
+        type: string
+        default: '#3C7FC0'
+      container_queue_bg_color:
+        type: string
+        default: '#438DD5'
+      container_queue_border_color:
+        type: string
+        default: '#3C7FC0'
+      external_container_bg_color:
+        type: string
+        default: '#B3B3B3'
+      external_container_border_color:
+        type: string
+        default: '#A6A6A6'
+      external_container_db_bg_color:
+        type: string
+        default: '#B3B3B3'
+      external_container_db_border_color:
+        type: string
+        default: '#A6A6A6'
+      external_container_queue_bg_color:
+        type: string
+        default: '#B3B3B3'
+      external_container_queue_border_color:
+        type: string
+        default: '#A6A6A6'
+      component_bg_color:
+        type: string
+        default: '#85BBF0'
+      component_border_color:
+        type: string
+        default: '#78A8D8'
+      component_db_bg_color:
+        type: string
+        default: '#85BBF0'
+      component_db_border_color:
+        type: string
+        default: '#78A8D8'
+      component_queue_bg_color:
+        type: string
+        default: '#85BBF0'
+      component_queue_border_color:
+        type: string
+        default: '#78A8D8'
+      external_component_bg_color:
+        type: string
+        default: '#CCCCCC'
+      external_component_border_color:
+        type: string
+        default: '#BFBFBF'
+      external_component_db_bg_color:
+        type: string
+        default: '#CCCCCC'
+      external_component_db_border_color:
+        type: string
+        default: '#BFBFBF'
+      external_component_queue_bg_color:
+        type: string
+        default: '#CCCCCC'
+      external_component_queue_border_color:
+        type: string
+        default: '#BFBFBF'
+
+      # Font Calculators
+      # By default, these all return the values from this configuration.
+      personFont: { '$ref': '#/$defs/FontCalculator' }
+      external_personFont: { '$ref': '#/$defs/FontCalculator' }
+      systemFont: { '$ref': '#/$defs/FontCalculator' }
+      external_systemFont: { '$ref': '#/$defs/FontCalculator' }
+      system_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      external_system_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      system_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      external_system_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      containerFont: { '$ref': '#/$defs/FontCalculator' }
+      external_containerFont: { '$ref': '#/$defs/FontCalculator' }
+      container_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      external_container_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      container_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      external_container_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      componentFont: { '$ref': '#/$defs/FontCalculator' }
+      external_componentFont: { '$ref': '#/$defs/FontCalculator' }
+      component_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      external_component_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      component_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      external_component_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      boundaryFont: { '$ref': '#/$defs/FontCalculator' }
+      messageFont: { '$ref': '#/$defs/FontCalculator' }
+
+  GitGraphDiagramConfig:
+    title: Git Graph Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+    properties:
+      titleTopMargin:
+        # TODO: I've removed the `Git` part from this description, so that I
+        # could $ref: "#/$defs/GitGraphDiagramConfig/properties/titleTopMargin"
+        # this field in other diagrams
+        description: Margin top for the text over the diagram
+        type: integer
+        default: 25
+        minimum: 0
+      diagramPadding:
+        type: number
+        default: 8
+      nodeLabel:
+        allOf: [{ $ref: '#/$defs/NodeLabel' }]
+        type: object
+        default:
+          width: 75
+          height: 100
+          x: -25
+          y: 0
+      mainBranchName:
+        type: string
+        default: 'main'
+      mainBranchOrder:
+        type: number
+        default: 0
+      showCommitLabel:
+        type: boolean
+        default: true
+      showBranches:
+        type: boolean
+        default: true
+      rotateCommitLabel:
+        type: boolean
+        default: true
+      # YAML anchor reference, don't use $ref since ajv doesn't load defaults
+      arrowMarkerAbsolute: *arrowMarkerAbsolute
+
+  NodeLabel:
+    title: Node Label
+    type: object
+    properties:
+      width:
+        type: number
+      height:
+        type: number
+      x:
+        type: number
+      y:
+        type: number
+
+  RequirementDiagramConfig:
+    title: Requirement Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for req diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - useMaxWidth
+    properties:
+      rect_fill:
+        type: string
+        default: '#f9f9f9'
+      text_color:
+        type: string
+        default: '#333'
+      rect_border_size:
+        type: string
+        default: '0.5px'
+      rect_border_color:
+        type: string
+        default: '#bbb'
+      rect_min_width:
+        type: number
+        default: 200
+      rect_min_height:
+        type: number
+        default: 200
+      fontSize:
+        type: number # TODO, should this be `type: *fontSizeType` (aka string too)
+        default: 14
+      rect_padding:
+        type: number
+        default: 10
+      line_height:
+        type: number
+        default: 20
+
+  MindmapDiagramConfig:
+    title: Mindmap Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for mindmap diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - useMaxWidth
+      - padding
+      - maxNodeWidth
+    properties:
+      padding:
+        type: number
+        default: 10
+      maxNodeWidth:
+        type: number
+        default: 200
+
+  PieDiagramConfig:
+    title: Pie Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    properties:
+      textPosition:
+        type: number
+        minimum: 0
+        maximum: 1
+        description: |
+          Axial position of slice's label from zero at the center to 1 at the outside edges.
+        default: 0.75
+
+  QuadrantChartConfig:
+    title: Quadrant Chart Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - chartWidth
+      - chartHeight
+      - titleFontSize
+      - titlePadding
+      - quadrantPadding
+      - xAxisLabelPadding
+      - yAxisLabelPadding
+      - xAxisLabelFontSize
+      - yAxisLabelFontSize
+      - quadrantLabelFontSize
+      - quadrantTextTopPadding
+      - pointTextPadding
+      - pointLabelFontSize
+      - pointRadius
+      - xAxisPosition
+      - yAxisPosition
+      - quadrantInternalBorderStrokeWidth
+      - quadrantExternalBorderStrokeWidth
+      - useMaxWidth
+    properties:
+      chartWidth:
+        description: Width of the chart
+        type: number
+        minimum: 0
+        default: 500
+      chartHeight:
+        description: Height of the chart
+        type: number
+        minimum: 0
+        default: 500
+      titleFontSize:
+        description: Chart title top and bottom padding
+        type: number
+        minimum: 0
+        default: 20
+      titlePadding:
+        description: Padding around the quadrant square
+        type: number
+        minimum: 0
+        default: 10
+      quadrantPadding:
+        description: quadrant title padding from top if the quadrant is rendered on top
+        type: number
+        minimum: 0
+        default: 5
+      xAxisLabelPadding:
+        description: Padding around x-axis labels
+        type: number
+        minimum: 0
+        default: 5
+      yAxisLabelPadding:
+        description: Padding around y-axis labels
+        type: number
+        minimum: 0
+        default: 5
+      xAxisLabelFontSize:
+        description: x-axis label font size
+        type: number
+        minimum: 0
+        default: 16
+      yAxisLabelFontSize:
+        description: y-axis label font size
+        type: number
+        minimum: 0
+        default: 16
+      quadrantLabelFontSize:
+        description: quadrant title font size
+        type: number
+        minimum: 0
+        default: 16
+      quadrantTextTopPadding:
+        description: quadrant title padding from top if the quadrant is rendered on top
+        type: number
+        minimum: 0
+        default: 5
+      pointTextPadding:
+        description: padding between point and point label
+        type: number
+        minimum: 0
+        default: 5
+      pointLabelFontSize:
+        description: point title font size
+        type: number
+        minimum: 0
+        default: 12
+      pointRadius:
+        description: radius of the point to be drawn
+        type: number
+        minimum: 0
+        default: 5
+      xAxisPosition:
+        description: position of x-axis labels
+        type: string
+        enum:
+          - top
+          - bottom
+        default: top
+      yAxisPosition:
+        description: position of y-axis labels
+        type: string
+        enum:
+          - left
+          - right
+        default: left
+      quadrantInternalBorderStrokeWidth:
+        description: stroke width of edges of the box that are inside the quadrant
+        type: number
+        minimum: 0
+        default: 1
+      quadrantExternalBorderStrokeWidth:
+        description: stroke width of edges of the box that are outside the quadrant
+        type: number
+        minimum: 0
+        default: 2
+
+  ErDiagramConfig:
+    title: Er Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for entity relationship diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - diagramPadding
+      - layoutDirection
+      - minEntityWidth
+      - minEntityHeight
+      - entityPadding
+      - stroke
+      - fill
+      # TODO: fontSize is the only property that is not required, is this correct?
+      - useMaxWidth
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      diagramPadding:
+        description: |
+          The amount of padding around the diagram as a whole so that embedded
+          diagrams have margins, expressed in pixels.
+        type: integer
+        default: 20
+        minimum: 0
+      layoutDirection:
+        description: Directional bias for layout of entities
+        type: string
+        enum: ['TB', 'BT', 'LR', 'RL']
+        meta:enum:
+          TB: Top-Bottom
+          BT: Bottom-Top
+          LR: Left-Right
+          RL: Right to Left
+        default: TB
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "TB" | "BT" | "LR" | "RL"'
+      minEntityWidth:
+        description: The minimum width of an entity box. Expressed in pixels.
+        type: integer
+        default: 100
+        minimum: 0
+      minEntityHeight:
+        description: The minimum height of an entity box. Expressed in pixels.
+        type: integer
+        default: 75
+        minimum: 0
+      entityPadding:
+        description: |
+          The minimum internal padding between text in an entity box and the enclosing box borders.
+          Expressed in pixels.
+        type: integer
+        default: 15
+        minimum: 0
+      stroke:
+        description: Stroke color of box edges and lines.
+        type: string
+        default: gray
+      fill:
+        description: Fill color of entity boxes
+        type: string
+        default: honeydew
+      fontSize:
+        description: Font size (expressed as an integer representing a number of pixels)
+        type: integer
+        default: 12
+        minimum: 0
+
+  StateDiagramConfig:
+    title: State Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for entity relationship diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - useMaxWidth
+      - defaultRenderer
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      arrowMarkerAbsolute:
+        # TODO: use $ref: '#/properties/arrowMarkerAbsolute' to copy main setting
+        type: boolean
+      dividerMargin:
+        type: number
+        default: 10
+      sizeUnit:
+        type: number
+        default: 5
+      padding:
+        type: number
+        default: 8
+      textHeight:
+        type: number
+        default: 10
+      titleShift:
+        type: number
+        default: -15
+      noteMargin:
+        type: number
+        default: 10
+      forkWidth:
+        type: number
+        default: 70
+      forkHeight:
+        type: number
+        default: 7
+      # Used
+      miniPadding:
+        type: number
+        default: 2
+      fontSizeFactor:
+        description: |
+          Font size factor, this is used to guess the width of the edges labels
+          before rendering by dagre layout.
+          This might need updating if/when switching font
+        type: number
+        default: 5.02
+      fontSize:
+        type: number
+        default: 24
+      labelHeight:
+        type: number
+        default: 16
+      edgeLengthFactor:
+        type: string
+        default: '20'
+      compositTitleSize:
+        type: number
+        default: 35
+      radius:
+        type: number
+        default: 5
+      defaultRenderer:
+        description: |
+          Decides which rendering engine that is to be used for the rendering.
+        type: string
+        enum:
+          - dagre-d3
+          - dagre-wrapper
+          - elk
+        # todo, check this, old docs said dagre-d3 even though value was dagre-wrapper
+        default: dagre-wrapper
+        meta:enum:
+          dagre-d3: The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library.
+          dagre-wrapper: wrapper for dagre implemented in mermaid
+          elk: Layout using [elkjs](https://github.com/kieler/elkjs)
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "dagre-d3" | "dagre-wrapper" | "elk"'
+
+  ClassDiagramConfig:
+    title: Class Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - useMaxWidth
+      - defaultRenderer
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      # YAML anchor reference, don't use $ref since ajv doesn't load defaults
+      arrowMarkerAbsolute: *arrowMarkerAbsolute
+      dividerMargin:
+        type: number
+        default: 10
+      padding:
+        type: number
+        default: 5
+      textHeight:
+        type: number
+        default: 10
+      defaultRenderer:
+        $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer'
+        default: dagre-wrapper
+      nodeSpacing:
+        type: integer
+        minimum: 0
+        # should the default value be 50?
+        # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L258
+      rankSpacing:
+        type: integer
+        minimum: 0
+        # should the default value be 50?
+        # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L259
+      diagramPadding:
+        $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding'
+      htmlLabels:
+        type: boolean
+        default: false
+
+  JourneyDiagramConfig:
+    title: Journey Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: |
+      The object containing configurations specific for journey diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - diagramMarginX
+      - diagramMarginY
+      - leftMargin
+      - width
+      - height
+      - boxMargin
+      - boxTextMargin
+      - noteMargin
+      - messageMargin
+      - messageAlign
+      - bottomMarginAdj
+      - useMaxWidth
+      - rightAngles
+    properties:
+      diagramMarginX:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
+        default: 50
+      diagramMarginY:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY'
+        default: 10
+      leftMargin:
+        description: Margin between actors
+        type: integer
+        default: 150
+        minimum: 0
+      width:
+        description: Width of actor boxes
+        type: integer
+        default: 150
+        minimum: 0
+      height:
+        description: Height of actor boxes
+        type: integer
+        default: 50
+        minimum: 0
+      boxMargin:
+        description: Margin around loop boxes
+        type: integer
+        default: 10
+        minimum: 0
+      boxTextMargin:
+        description: Margin around the text in loop/alt/opt boxes
+        type: integer
+        default: 5
+        minimum: 0
+      noteMargin:
+        description: Margin around notes
+        type: integer
+        default: 10
+        minimum: 0
+      messageMargin:
+        description: Space between messages.
+        type: integer
+        default: 35
+        minimum: 0
+      messageAlign:
+        description: Multiline message alignment
+        type: string
+        enum:
+          - left
+          - center
+          - right
+        default: center
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "left" | "center" | "right"'
+      bottomMarginAdj:
+        description: |
+          Prolongs the edge of the diagram downwards.
+
+          Depending on css styling this might need adjustment.
+        type: integer
+        default: 1
+        minimum: 0
+      rightAngles:
+        description: |
+          Curved Arrows become Right Angles
+
+          This will display arrows that start and begin at the same node as
+          right angles, rather than as curves.
+        type: boolean
+        default: false
+      taskFontSize:
+        type: *fontSizeType
+        default: 14
+      taskFontFamily:
+        type: string
+        default: '"Open Sans", sans-serif'
+      taskMargin:
+        type: number
+        default: 50
+      activationWidth:
+        description: Width of activation box
+        type: number
+        default: 10
+      textPlacement:
+        description: |
+          text placement as: tspan | fo | old only text as before
+        type: string
+        # TODO, should this be an enum?
+        default: fo
+      actorColours:
+        type: array
+        items:
+          type: string
+        default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0']
+      sectionFills:
+        type: array
+        items:
+          type: string
+        default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B']
+      sectionColours:
+        type: array
+        items:
+          type: string
+        default: ['#fff']
+
+  TimelineDiagramConfig:
+    # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c
+    title: Timeline Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - diagramMarginX
+      - diagramMarginY
+      - leftMargin
+      - width
+      - height
+      - boxMargin
+      - boxTextMargin
+      - noteMargin
+      - messageMargin
+      - messageAlign
+      - bottomMarginAdj
+      - useMaxWidth
+    properties:
+      diagramMarginX:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
+        default: 50
+      diagramMarginY:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY'
+        default: 10
+      leftMargin:
+        description: Margin between actors
+        type: integer
+        default: 150
+        minimum: 0
+      width:
+        description: Width of actor boxes
+        type: integer
+        default: 150
+        minimum: 0
+      height:
+        description: Height of actor boxes
+        type: integer
+        default: 50
+        minimum: 0
+      padding:
+        type: number
+        # should the default value be 50?
+        # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts#L237
+      boxMargin:
+        description: Margin around loop boxes
+        type: integer
+        default: 10
+        minimum: 0
+      boxTextMargin:
+        description: Margin around the text in loop/alt/opt boxes
+        type: integer
+        default: 5
+        minimum: 0
+      noteMargin:
+        description: Margin around notes
+        type: integer
+        default: 10
+        minimum: 0
+      messageMargin:
+        description: Space between messages.
+        type: integer
+        default: 35
+        minimum: 0
+      messageAlign:
+        description: Multiline message alignment
+        type: string
+        enum:
+          - left
+          - center
+          - right
+        default: center
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "left" | "center" | "right"'
+      bottomMarginAdj:
+        description: |
+          Prolongs the edge of the diagram downwards.
+
+          Depending on css styling this might need adjustment.
+        type: integer
+        default: 1
+        minimum: 0
+      rightAngles:
+        description: |
+          Curved Arrows become Right Angles
+
+          This will display arrows that start and begin at the same node as
+          right angles, rather than as curves.
+        type: boolean
+        default: false
+      taskFontSize:
+        type: *fontSizeType
+        default: 14
+      taskFontFamily:
+        type: string
+        default: '"Open Sans", sans-serif'
+      taskMargin:
+        type: number
+        default: 50
+      activationWidth:
+        description: Width of activation box
+        type: number
+        default: 10
+      textPlacement:
+        description: |
+          text placement as: tspan | fo | old only text as before
+        type: string
+        # TODO, should this be an enum?
+        default: fo
+      actorColours:
+        type: array
+        items:
+          type: string
+        default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0']
+      sectionFills:
+        type: array
+        items:
+          type: string
+        default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B']
+      sectionColours:
+        type: array
+        items:
+          type: string
+        default: ['#fff']
+      disableMulticolor:
+        # added by https://github.com/mermaid-js/mermaid/commit/652a42fe1aed7911a781a84716940a973b995639
+        type: boolean
+        default: false
+
+  GanttDiagramConfig:
+    title: Gantt Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: |
+      The object containing configurations specific for gantt diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - barHeight
+      - topPadding
+      - rightPadding
+      - leftPadding
+      - gridLineStartPadding
+      - fontSize
+      - sectionFontSize
+      - numberSectionStyles
+      - axisFormat
+      - useMaxWidth
+      - topAxis
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      barHeight:
+        description: The height of the bars in the graph
+        type: integer
+        default: 20
+        minimum: 0
+      barGap:
+        description: The margin between the different activities in the gantt diagram
+        type: integer
+        default: 4
+        minimum: 0
+      topPadding:
+        description: |
+          Margin between title and gantt diagram and between axis and gantt diagram.
+        type: integer
+        default: 50
+        minimum: 0
+      rightPadding:
+        description: |
+          The space allocated for the section name to the right of the activities
+        type: integer
+        default: 75
+        minimum: 0
+      leftPadding:
+        description: |
+          The space allocated for the section name to the left of the activities
+        type: integer
+        default: 75
+        minimum: 0
+      gridLineStartPadding:
+        description: Vertical starting position of the grid lines
+        type: integer
+        default: 35
+        minimum: 0
+      fontSize:
+        description: Font size
+        type: integer
+        default: 11
+        minimum: 0
+      sectionFontSize:
+        description: Font size for sections
+        type: integer
+        # TODO: typescript type for this also allows strings, but the docs say only integers
+        tsType: 'string | number'
+        default: 11
+        minimum: 0
+      numberSectionStyles:
+        description: The number of alternating section styles
+        type: integer
+        default: 4
+        minimum: 0
+      axisFormat:
+        description: |
+          Date/time format of the axis
+
+          This might need adjustment to match your locale and preferences.
+        type: string
+        default: '%Y-%m-%d'
+      tickInterval:
+        description: |
+          axis ticks
+
+          Pattern is:
+
+          ```javascript
+          /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+          ```
+        type: string
+        pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$
+      topAxis:
+        description: |
+          When this flag is set, date labels will be added to the top of the chart
+        type: boolean
+        default: false
+      displayMode:
+        description: |
+          Controls the display mode.
+        type: string
+        enum:
+          - ''
+          - compact
+        meta:enum:
+          compact: Enables displaying multiple tasks on the same row.
+        default: ''
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "compact"'
+
+  SequenceDiagramConfig:
+    title: Sequence Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for sequence diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - activationWidth
+      - diagramMarginX
+      - diagramMarginY
+      - actorMargin
+      - width
+      - height
+      - boxMargin
+      - boxTextMargin
+      - noteMargin
+      - messageMargin
+      - messageAlign
+      - mirrorActors
+      - forceMenus
+      - bottomMarginAdj
+      - useMaxWidth
+      - rightAngles
+      - showSequenceNumbers
+      - actorFontSize
+      - actorFontFamily
+      - actorFontWeight
+      - noteFontSize
+      - noteFontFamily
+      - noteFontWeight
+      - noteAlign
+      - messageFontSize
+      - messageFontFamily
+      - messageFontWeight
+    properties:
+      arrowMarkerAbsolute:
+        type: boolean # TODO, is this actually used here (it has no default value but was in types)
+      hideUnusedParticipants:
+        type: boolean
+        default: false
+      activationWidth:
+        description: Width of the activation rect
+        type: integer
+        default: 10
+        minimum: 0
+      diagramMarginX:
+        description: Margin to the right and left of the sequence diagram
+        type: integer
+        default: 50
+        minimum: 0
+      diagramMarginY:
+        description: Margin to the over and under the sequence diagram
+        type: integer
+        default: 10
+        minimum: 0
+      actorMargin:
+        description: Margin between actors
+        type: integer
+        default: 50
+        minimum: 0
+      width:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/width'
+        default: 150
+      height:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/height'
+        default: 65
+      boxMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/boxMargin'
+        default: 10
+      boxTextMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/boxTextMargin'
+        default: 5
+      noteMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/noteMargin'
+        default: 10
+      messageMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/messageMargin'
+        default: 35
+      messageAlign:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/messageAlign'
+        default: center
+      mirrorActors:
+        description: |
+          Mirror actors under diagram
+        type: boolean
+        default: true
+      forceMenus:
+        description: |
+          forces actor popup menus to always be visible (to support E2E testing).
+        type: boolean
+        default: false
+      bottomMarginAdj:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/bottomMarginAdj'
+        default: 1
+      rightAngles:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/rightAngles'
+        default: false
+      showSequenceNumbers:
+        description: This will show the node numbers
+        type: boolean
+        default: false
+      actorFontSize:
+        description: This sets the font size of the actor's description
+        type: *fontSizeType
+        default: 14
+      actorFontFamily:
+        description: This sets the font family of the actor's description
+        type: string
+        default: '"Open Sans", sans-serif'
+      actorFontWeight:
+        description: This sets the font weight of the actor's description
+        type: ['string', 'number']
+        default: 400
+
+      noteFontSize:
+        description: This sets the font size of actor-attached notes
+        type: *fontSizeType
+        default: 14
+      noteFontFamily:
+        description: This sets the font family of actor-attached notes
+        type: string
+        default: '"trebuchet ms", verdana, arial, sans-serif'
+      noteFontWeight:
+        description: This sets the font weight of actor-attached notes
+        type: ['string', 'number']
+        default: 400
+      noteAlign:
+        description: This sets the text alignment of actor-attached notes
+        type: string
+        enum: ['left', 'center', 'right']
+        default: 'center'
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "left" | "center" | "right"'
+
+      messageFontSize:
+        description: This sets the font size of actor messages
+        type: *fontSizeType
+        default: 16
+      messageFontFamily:
+        description: This sets the font family of actor messages
+        type: string
+        default: '"trebuchet ms", verdana, arial, sans-serif'
+      messageFontWeight:
+        description: This sets the font weight of actor messages
+        type: ['string', 'number']
+        default: 400
+
+      wrap:
+        description: This sets the auto-wrap state for the diagram
+        type: boolean
+        default: false # different from C4 Diagram
+      wrapPadding:
+        $ref: '#/$defs/C4DiagramConfig/properties/wrapPadding'
+        default: 10
+      labelBoxWidth:
+        description: This sets the width of the loop-box (loop, alt, opt, par)
+        type: number
+        default: 50
+      labelBoxHeight:
+        description: This sets the height of the loop-box (loop, alt, opt, par)
+        type: number
+        default: 20
+      messageFont: { '$ref': '#/$defs/FontCalculator' }
+      noteFont: { '$ref': '#/$defs/FontCalculator' }
+      actorFont: { '$ref': '#/$defs/FontCalculator' }
+
+  FlowchartDiagramConfig:
+    title: Flowchart Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for flowcharts
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - diagramPadding
+      - htmlLabels
+      - nodeSpacing
+      - rankSpacing
+      - curve
+      - useMaxWidth
+      - defaultRenderer
+      - wrappingWidth
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      arrowMarkerAbsolute:
+        type: boolean # TODO, is this actually used here (it has no default value but was in types)
+      diagramPadding:
+        $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding'
+        default: 8
+      htmlLabels:
+        description: |
+          Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+        type: boolean
+        default: true
+      nodeSpacing:
+        description: |
+          Defines the spacing between nodes on the same level
+
+          Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+          and the vertical spacing for LR as well as RL graphs.
+        type: integer
+        default: 50
+        minimum: 0
+      rankSpacing:
+        description: |
+          Defines the spacing between nodes on different levels
+
+          Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+          and the vertical spacing for LR as well as RL graphs.
+        type: integer
+        default: 50
+        minimum: 0
+      curve:
+        description: |
+          Defines how mermaid renders curves for flowcharts.
+        type: string
+        enum: ['basis', 'linear', 'cardinal']
+        default: 'basis'
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "basis" | "linear" | "cardinal"'
+      padding:
+        description: |
+          Represents the padding between the labels and the shape
+
+          **Only used in new experimental rendering.**
+        type: number
+        default: 15
+      defaultRenderer:
+        $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer'
+        default: dagre-wrapper
+      wrappingWidth:
+        description: |
+          Width of nodes where text is wrapped.
+
+          When using markdown strings the text ius wrapped automatically, this
+          value sets the max width of a text before it continues on a new line.
+        type: number
+        default: 200
+
+  SankeyLinkColor:
+    description: |
+      Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.
+    type: string
+    enum:
+      - source
+      - target
+      - gradient
+    meta:enum:
+      source: Use the source of sankey link for the color of the link.
+      target: Use the target of sankey link for the color of the link.
+      gradient: Use a gradient of the source and target for the color of the link.
+    default: gradient
+
+  SankeyNodeAlignment:
+    description: |
+      Controls the alignment of the Sankey diagrams.
+
+      See .
+    type: string
+    enum:
+      - left
+      - right
+      - center
+      - justify
+    meta:enum:
+      left: Align all inputs to the left.
+      right: Align all outputs to the right.
+      center: Like `left`, except that nodes without any incoming links are moved as right as possible.
+      justify: Like `left`, except that nodes without any outgoing links are moved to the far right.
+    default: justify
+
+  SankeyDiagramConfig:
+    title: Sankey Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for sankey diagrams.
+    type: object
+    unevaluatedProperties: false
+    properties:
+      width:
+        type: number
+        default: 600
+      height:
+        type: number
+        default: 400
+      linkColor:
+        description: |
+          The color of the links in the sankey diagram.
+        anyOf:
+          - $ref: '#/$defs/SankeyLinkColor'
+          - description: An arbtirary [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
+            type: string
+        default: gradient
+      nodeAlignment:
+        $ref: '#/$defs/SankeyNodeAlignment'
+        default: justify
+      useMaxWidth:
+        default: false
+
+  FontCalculator:
+    title: Font Calculator
+    description: |
+      JavaScript function that returns a `FontConfig`.
+
+      By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight`
+      values.
+
+      For example, the font calculator called `boundaryFont` might be defined as:
+
+      ```javascript
+      boundaryFont: function () {
+        return {
+          fontFamily: this.boundaryFontFamily,
+          fontSize: this.boundaryFontSize,
+          fontWeight: this.boundaryFontWeight,
+        };
+      }
+      ```
+    tsType: '() => Partial'
+
+  FontConfig:
+    title: Font Config
+    type: object
+    additionalProperties: false
+    properties:
+      fontSize:
+        title: CSS Font Size
+        description: The font size to use
+        type: *fontSizeType
+        default: 14
+      fontFamily:
+        description: The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.
+        type: string
+        default: '"Open Sans", sans-serif'
+      fontWeight:
+        description: The font weight to use.
+        type: ['string', 'number']
+        default: normal
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index a6e752475..fde079450 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,7 +1,8 @@
 import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
 import { log } from './logger.js';
+import type { DiagramStylesProvider } from './diagram-api/types.js';
 
-const themes: Record = {};
+const themes: Record = {};
 
 const getStyles = (
   type: string,
@@ -73,8 +74,10 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (type: string, diagramTheme: unknown): void => {
-  themes[type] = diagramTheme;
+export const addStylesForDiagram = (type: string, diagramTheme?: DiagramStylesProvider): void => {
+  if (diagramTheme !== undefined) {
+    themes[type] = diagramTheme;
+  }
 };
 
 export default getStyles;
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index 6d8d721e0..c5e080ba3 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,5 +1,3 @@
-import type {} from '@vitest/spy/dist/index.js';
-
 /**
  * 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.
@@ -7,9 +5,8 @@ import type {} from '@vitest/spy/dist/index.js';
  * Note that node() returns a HTML Element with tag 'svg'. It is an empty element (no innerHTML, no children, etc).
  * This potentially allows testing of mermaidAPI render().
  */
-
 export class MockedD3 {
-  public attribs = new Map();
+  public attribs = new Map();
   public id: string | undefined = '';
   _children: MockedD3[] = [];
 
@@ -72,9 +69,9 @@ export class MockedD3 {
     return newMock;
   };
 
-  attr(attrName: string): null | undefined | string | number;
-  // attr(attrName: string, attrValue: string): MockedD3;
-  attr(attrName: string, attrValue?: string): null | undefined | string | number | MockedD3 {
+  attr(attrName: string): undefined | string;
+  attr(attrName: string, attrValue: string): MockedD3;
+  attr(attrName: string, attrValue?: string): undefined | string | MockedD3 {
     if (arguments.length === 1) {
       return this.attribs.get(attrName);
     } else {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e6420982..cdad35f45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.1.3)
-      '@vitest/coverage-istanbul':
+      '@vitest/coverage-v8':
         specifier: ^0.32.2
         version: 0.32.2(vitest@0.32.2)
       '@vitest/spy':
@@ -67,6 +67,9 @@ importers:
       '@vitest/ui':
         specifier: ^0.32.2
         version: 0.32.2(vitest@0.32.2)
+      ajv:
+        specifier: ^8.12.0
+        version: 8.12.0
       concurrently:
         specifier: ^8.0.1
         version: 8.0.1
@@ -101,8 +104,8 @@ importers:
         specifier: ^27.2.1
         version: 27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0)(jest@29.5.0)(typescript@5.1.3)
       eslint-plugin-jsdoc:
-        specifier: ^43.0.7
-        version: 43.0.7(eslint@8.39.0)
+        specifier: ^46.0.0
+        version: 46.0.0(eslint@8.39.0)
       eslint-plugin-json:
         specifier: ^3.1.0
         version: 3.1.0
@@ -119,8 +122,8 @@ importers:
         specifier: ^0.2.17
         version: 0.2.17
       eslint-plugin-unicorn:
-        specifier: ^46.0.0
-        version: 46.0.0(eslint@8.39.0)
+        specifier: ^47.0.0
+        version: 47.0.0(eslint@8.39.0)
       express:
         specifier: ^4.18.2
         version: 4.18.2
@@ -140,8 +143,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       jsdom:
-        specifier: ^21.1.1
-        version: 21.1.1
+        specifier: ^22.0.0
+        version: 22.0.0
       lint-staged:
         specifier: ^13.2.1
         version: 13.2.1
@@ -183,13 +186,19 @@ importers:
         version: 4.1.0(vite@4.3.9)
       vitest:
         specifier: ^0.32.2
-        version: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1)
+        version: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
 
   packages/mermaid:
     dependencies:
       '@braintree/sanitize-url':
         specifier: ^6.0.2
         version: 6.0.2
+      '@types/d3-scale':
+        specifier: ^4.0.3
+        version: 4.0.3
+      '@types/d3-scale-chromatic':
+        specifier: ^3.0.0
+        version: 3.0.0
       cytoscape:
         specifier: ^3.23.0
         version: 3.23.0
@@ -202,6 +211,9 @@ importers:
       d3:
         specifier: ^7.4.0
         version: 7.8.2
+      d3-sankey:
+        specifier: ^0.12.3
+        version: 0.12.3
       dagre-d3-es:
         specifier: 7.0.10
         version: 7.0.10
@@ -209,8 +221,8 @@ importers:
         specifier: ^1.11.7
         version: 1.11.7
       dompurify:
-        specifier: 3.0.3
-        version: 3.0.3
+        specifier: 3.0.4
+        version: 3.0.4
       elkjs:
         specifier: ^0.8.2
         version: 0.8.2
@@ -242,12 +254,18 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
     devDependencies:
+      '@adobe/jsonschema2md':
+        specifier: ^7.1.4
+        version: 7.1.4
       '@types/cytoscape':
         specifier: ^3.19.9
         version: 3.19.9
       '@types/d3':
         specifier: ^7.4.0
         version: 7.4.0
+      '@types/d3-sankey':
+        specifier: ^0.12.1
+        version: 0.12.1
       '@types/d3-selection':
         specifier: ^3.0.5
         version: 3.0.5
@@ -278,6 +296,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.0.4)
+      ajv:
+        specifier: ^8.11.2
+        version: 8.12.0
       chokidar:
         specifier: ^3.5.3
         version: 3.5.3
@@ -306,8 +327,11 @@ importers:
         specifier: ^3.7.5
         version: 3.7.5
       jsdom:
-        specifier: ^21.1.1
-        version: 21.1.1
+        specifier: ^22.0.0
+        version: 22.0.0
+      json-schema-to-typescript:
+        specifier: ^11.0.3
+        version: 11.0.3
       micromatch:
         specifier: ^4.0.5
         version: 4.0.5
@@ -344,6 +368,9 @@ importers:
       unist-util-flatmap:
         specifier: ^1.0.0
         version: 1.0.0
+      unist-util-visit:
+        specifier: ^4.1.2
+        version: 4.1.2
       vitepress:
         specifier: ^1.0.0-alpha.72
         version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)
@@ -418,7 +445,7 @@ importers:
         version: 0.53.3
       '@vite-pwa/vitepress':
         specifier: ^0.2.0
-        version: 0.2.0(vite-plugin-pwa@0.16.4)
+        version: 0.2.0(vite-plugin-pwa@0.16.0)
       '@vitejs/plugin-vue':
         specifier: ^4.2.1
         version: 4.2.1(vite@4.3.3)(vue@3.2.47)
@@ -433,7 +460,7 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.53.0
-        version: 0.53.3(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3)
+        version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3)
       unplugin-vue-components:
         specifier: ^0.25.0
         version: 0.25.1(rollup@2.79.1)(vue@3.2.47)
@@ -442,13 +469,65 @@ importers:
         version: 4.3.3
       vite-plugin-pwa:
         specifier: ^0.16.0
-        version: 0.16.4(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4)
+        version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
+      vitepress:
+        specifier: 1.0.0-beta.5
+        version: 1.0.0-beta.5(@algolia/client-search@4.14.2)(search-insights@2.6.0)
+      workbox-window:
+        specifier: ^7.0.0
+        version: 7.0.0
+
+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.2.1(vue@3.3.4)
+      jiti:
+        specifier: ^1.18.2
+        version: 1.18.2
+      vue:
+        specifier: ^3.2.47
+        version: 3.3.4
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.16
+        version: 1.1.16
+      '@unocss/reset':
+        specifier: ^0.53.0
+        version: 0.53.3
+      '@vite-pwa/vitepress':
+        specifier: ^0.2.0
+        version: 0.2.0(vite-plugin-pwa@0.16.0)
+      '@vitejs/plugin-vue':
+        specifier: ^4.2.1
+        version: 4.2.3(vite@4.3.9)(vue@3.3.4)
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.2.12
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.1
+      unocss:
+        specifier: ^0.53.0
+        version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.9)
+      unplugin-vue-components:
+        specifier: ^0.25.0
+        version: 0.25.1(rollup@2.79.1)(vue@3.3.4)
+      vite:
+        specifier: ^4.3.3
+        version: 4.3.9
+      vite-plugin-pwa:
+        specifier: ^0.16.0
+        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.6.1)
       vitepress:
         specifier: 1.0.0-beta.2
         version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(search-insights@2.6.0)
       workbox-window:
         specifier: ^6.5.4
-        version: 6.5.4
+        version: 6.6.1
 
   tests/webpack:
     dependencies:
@@ -471,6 +550,43 @@ importers:
 
 packages:
 
+  /@adobe/helix-log@6.0.0:
+    resolution: {integrity: sha512-+9gpf49sFDmZLV3gtjY+RmEUistqYJdVWpiqlRYpxE59x5bHFzYf93dZ7fljSTBtZdVq8lm97HxrTUloh5HvRg==}
+    dependencies:
+      big.js: 6.2.1
+      colorette: 2.0.20
+      ferrum: 1.9.4
+      phin: 3.7.0
+      polka: 0.5.2
+    dev: true
+
+  /@adobe/jsonschema2md@7.1.4:
+    resolution: {integrity: sha512-sqzH/G+2oNZi5ltwbl0hGJacGTDpXv7uUykzh+LD/DNfOIjUq577b1HbES/JP5yWcp4YkX4I3V5Kxltewr0BUg==}
+    engines: {node: '>= 14.0.0'}
+    hasBin: true
+    dependencies:
+      '@adobe/helix-log': 6.0.0
+      '@types/json-schema': 7.0.11
+      '@types/mdast': 3.0.11
+      es2015-i18n-tag: 1.6.1
+      ferrum: 1.9.4
+      fs-extra: 11.0.0
+      github-slugger: 2.0.0
+      js-yaml: 4.1.0
+      json-schema: 0.4.0
+      mdast-builder: 1.1.1
+      mdast-util-to-string: 3.1.0
+      readdirp: 3.6.0
+      remark-gfm: 3.0.1
+      remark-parse: 10.0.1
+      remark-stringify: 10.0.2
+      unified: 10.1.2
+      unist-util-inspect: 7.0.1
+      yargs: 17.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@algolia/autocomplete-core@1.8.2:
     resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==}
     dependencies:
@@ -650,13 +766,13 @@ packages:
     resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==}
     dev: true
 
-  /@apideck/better-ajv-errors@0.3.6(ajv@8.11.0):
+  /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0):
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
     peerDependencies:
       ajv: '>=8'
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       json-schema: 0.4.0
       jsonpointer: 5.0.1
       leven: 3.1.0
@@ -877,7 +993,7 @@ packages:
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.2
+      nwsapi: 2.2.5
       parse5: 6.0.1
       saxes: 5.0.1
       symbol-tree: 3.2.4
@@ -1013,6 +1129,11 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
+  /@arr/every@1.0.1:
+    resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==}
+    engines: {node: '>=4'}
+    dev: true
+
   /@babel/code-frame@7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -1298,13 +1419,6 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser@7.21.2:
-    resolution: {integrity: sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.21.2
-
   /@babel/parser@7.21.8:
     resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==}
     engines: {node: '>=6.0.0'}
@@ -2201,6 +2315,15 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@bcherny/json-schema-ref-parser@9.0.9:
+    resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==}
+    dependencies:
+      '@jsdevtools/ono': 7.1.3
+      '@types/json-schema': 7.0.11
+      call-me-maybe: 1.0.2
+      js-yaml: 4.1.0
+    dev: true
+
   /@bcoe/v8-coverage@0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
@@ -2252,7 +2375,7 @@ packages:
     engines: {node: '>=v14'}
     dependencies:
       '@commitlint/types': 17.4.4
-      ajv: 8.11.0
+      ajv: 8.12.0
     dev: true
 
   /@commitlint/ensure@17.4.4:
@@ -2831,9 +2954,9 @@ packages:
       - search-insights
     dev: true
 
-  /@es-joy/jsdoccomment@0.37.1:
-    resolution: {integrity: sha512-5vxWJ1gEkEF0yRd0O+uK6dHJf7adrxwQSX8PuRiPfFSAbNLnY0ZJfXaZucoz14Jj2N11xn2DnlEPwWRpYpvRjg==}
-    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20}
+  /@es-joy/jsdoccomment@0.39.4:
+    resolution: {integrity: sha512-Jvw915fjqQct445+yron7Dufix9A+m9j1fCJYlCo1FWlRvTxa3pjJelxdSTdaLWcTwRU6vbL+NYjO4YuNIS5Qg==}
+    engines: {node: '>=16'}
     dependencies:
       comment-parser: 1.3.1
       esquery: 1.5.0
@@ -2849,6 +2972,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm64@0.18.11:
+    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-arm64@0.18.6:
     resolution: {integrity: sha512-pL0Ci8P9q1sWbtPx8CXbc8JvPvvYdJJQ+LO09PLFsbz3aYNdFBGWJjiHU+CaObO4Ames+GOFpXRAJZS2L3ZK/A==}
     engines: {node: '>=12'}
@@ -2867,6 +2999,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm@0.18.11:
+    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-arm@0.18.6:
     resolution: {integrity: sha512-J3lwhDSXBBppSzm/LC1uZ8yKSIpExc+5T8MxrYD9KNVZG81FOAu2VF2gXi/6A/LwDDQQ+b6DpQbYlo3VwxFepQ==}
     engines: {node: '>=12'}
@@ -2885,6 +3026,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-x64@0.18.11:
+    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-x64@0.18.6:
     resolution: {integrity: sha512-hE2vZxOlJ05aY28lUpB0y0RokngtZtcUB+TVl9vnLEnY0z/8BicSvrkThg5/iI1rbf8TwXrbr2heEjl9fLf+EA==}
     engines: {node: '>=12'}
@@ -2903,6 +3053,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-arm64@0.18.11:
+    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-arm64@0.18.6:
     resolution: {integrity: sha512-/tuyl4R+QhhoROQtuQj9E/yfJtZNdv2HKaHwYhhHGQDN1Teziem2Kh7BWQMumfiY7Lu9g5rO7scWdGE4OsQ6MQ==}
     engines: {node: '>=12'}
@@ -2921,6 +3080,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-x64@0.18.11:
+    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-x64@0.18.6:
     resolution: {integrity: sha512-L7IQga2pDT+14Ti8HZwsVfbCjuKP4U213T3tuPggOzyK/p4KaUJxQFXJgfUFHKzU0zOXx8QcYRYZf0hSQtppkw==}
     engines: {node: '>=12'}
@@ -2939,6 +3107,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-arm64@0.18.11:
+    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-arm64@0.18.6:
     resolution: {integrity: sha512-bq10jFv42V20Kk77NvmO+WEZaLHBKuXcvEowixnBOMkaBgS7kQaqTc77ZJDbsUpXU3KKNLQFZctfaeINmeTsZA==}
     engines: {node: '>=12'}
@@ -2957,6 +3134,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-x64@0.18.11:
+    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-x64@0.18.6:
     resolution: {integrity: sha512-HbDLlkDZqUMBQaiday0pJzB6/8Xx/10dI3xRebJBReOEeDSeS+7GzTtW9h8ZnfB7/wBCqvtAjGtWQLTNPbR2+g==}
     engines: {node: '>=12'}
@@ -2975,6 +3161,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm64@0.18.11:
+    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm64@0.18.6:
     resolution: {integrity: sha512-NMY9yg/88MskEZH2s4i6biz/3av+M8xY5ua4HE7CCz5DBz542cr7REe317+v7oKjnYBCijHpkzo5vU85bkXQmQ==}
     engines: {node: '>=12'}
@@ -2993,6 +3188,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm@0.18.11:
+    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm@0.18.6:
     resolution: {integrity: sha512-C+5kb6rgsGMmvIdUI7v1PPgC98A6BMv233e97aXZ5AE03iMdlILFD/20HlHrOi0x2CzbspXn9HOnlE4/Ijn5Kw==}
     engines: {node: '>=12'}
@@ -3011,6 +3215,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ia32@0.18.11:
+    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ia32@0.18.6:
     resolution: {integrity: sha512-AXazA0ljvQEp7cA9jscABNXsjodKbEcqPcAE3rDzKN82Vb3lYOq6INd+HOCA7hk8IegEyHW4T72Z7QGIhyCQEA==}
     engines: {node: '>=12'}
@@ -3029,6 +3242,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-loong64@0.18.11:
+    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-loong64@0.18.6:
     resolution: {integrity: sha512-JjBf7TwY7ldcPgHYt9UcrjZB03+WZqg/jSwMAfzOzM5ZG+tu5umUqzy5ugH/crGI4eoDIhSOTDp1NL3Uo/05Fw==}
     engines: {node: '>=12'}
@@ -3047,6 +3269,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-mips64el@0.18.11:
+    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-mips64el@0.18.6:
     resolution: {integrity: sha512-kATNsslryVxcH1sO3KP2nnyUWtZZVkgyhAUnyTVVa0OQQ9pmDRjTpHaE+2EQHoCM5wt/uav2edrAUqbwn3tkKQ==}
     engines: {node: '>=12'}
@@ -3065,6 +3296,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ppc64@0.18.11:
+    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ppc64@0.18.6:
     resolution: {integrity: sha512-B+wTKz+8pi7mcWXFQV0LA79dJ+qhiut5uK9q0omoKnq8yRIwQJwfg3/vclXoqqcX89Ri5Y5538V0Se2v5qlcLA==}
     engines: {node: '>=12'}
@@ -3083,6 +3323,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-riscv64@0.18.11:
+    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-riscv64@0.18.6:
     resolution: {integrity: sha512-h44RBLVXFUSjvhOfseE+5UxQ/r9LVeqK2S8JziJKOm9W7SePYRPDyn7MhzhNCCFPkcjIy+soCxfhlJXHXXCR0A==}
     engines: {node: '>=12'}
@@ -3101,6 +3350,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-s390x@0.18.11:
+    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-s390x@0.18.6:
     resolution: {integrity: sha512-FlYpyr2Xc2AUePoAbc84NRV+mj7xpsISeQ36HGf9etrY5rTBEA+IU9HzWVmw5mDFtC62EQxzkLRj8h5Hq85yOQ==}
     engines: {node: '>=12'}
@@ -3119,6 +3377,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-x64@0.18.11:
+    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-x64@0.18.6:
     resolution: {integrity: sha512-Mc4EUSYwzLci77u0Kao6ajB2WbTe5fNc7+lHwS3a+vJISC/oprwURezUYu1SdWAYoczbsyOvKAJwuNftoAdjjg==}
     engines: {node: '>=12'}
@@ -3137,6 +3404,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/netbsd-x64@0.18.11:
+    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/netbsd-x64@0.18.6:
     resolution: {integrity: sha512-3hgZlp7NqIM5lNG3fpdhBI5rUnPmdahraSmwAi+YX/bp7iZ7mpTv2NkypGs/XngdMtpzljICxnUG3uPfqLFd3w==}
     engines: {node: '>=12'}
@@ -3155,6 +3431,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/openbsd-x64@0.18.11:
+    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/openbsd-x64@0.18.6:
     resolution: {integrity: sha512-aEWTdZQHtSRROlDYn7ygB8yAqtnall/UnmoVIJVqccKitkAWVVSYocQUWrBOxLEFk8XdlRouVrLZe6WXszyviA==}
     engines: {node: '>=12'}
@@ -3173,6 +3458,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/sunos-x64@0.18.11:
+    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/sunos-x64@0.18.6:
     resolution: {integrity: sha512-uxk/5yAGpjKZUHOECtI9W+9IcLjKj+2m0qf+RG7f7eRBHr8wP6wsr3XbNbgtOD1qSpPapd6R2ZfSeXTkCcAo5g==}
     engines: {node: '>=12'}
@@ -3191,6 +3485,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-arm64@0.18.11:
+    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-arm64@0.18.6:
     resolution: {integrity: sha512-oXlXGS9zvNCGoAT/tLHAsFKrIKye1JaIIP0anCdpaI+Dc10ftaNZcqfLzEwyhdzFAYInXYH4V7kEdH4hPyo9GA==}
     engines: {node: '>=12'}
@@ -3209,6 +3512,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-ia32@0.18.11:
+    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-ia32@0.18.6:
     resolution: {integrity: sha512-qh7IcAHUvvmMBmoIG+V+BbE9ZWSR0ohF51e5g8JZvU08kZF58uDFL5tHs0eoYz31H6Finv17te3W3QB042GqVA==}
     engines: {node: '>=12'}
@@ -3227,6 +3539,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-x64@0.18.11:
+    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-x64@0.18.6:
     resolution: {integrity: sha512-9UDwkz7Wlm4N9jnv+4NL7F8vxLhSZfEkRArz2gD33HesAFfMLGIGNVXRoIHtWNw8feKsnGly9Hq1EUuRkWl0zA==}
     engines: {node: '>=12'}
@@ -3489,7 +3810,7 @@ packages:
       slash: 3.0.0
       string-length: 4.0.2
       strip-ansi: 6.0.1
-      v8-to-istanbul: 9.0.1
+      v8-to-istanbul: 9.1.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3604,6 +3925,10 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /@jsdevtools/ono@7.1.3:
+    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
+    dev: true
+
   /@leichtgewicht/ip-codec@2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
@@ -3658,6 +3983,10 @@ packages:
       tslib: 2.5.0
     dev: true
 
+  /@polka/url@0.5.0:
+    resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==}
+    dev: true
+
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
@@ -4010,6 +4339,10 @@ packages:
       '@types/d3-color': 3.1.0
     dev: true
 
+  /@types/d3-path@1.0.9:
+    resolution: {integrity: sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==}
+    dev: true
+
   /@types/d3-path@3.0.0:
     resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
     dev: true
@@ -4026,20 +4359,30 @@ packages:
     resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==}
     dev: true
 
-  /@types/d3-scale-chromatic@3.0.0:
-    resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
+  /@types/d3-sankey@0.12.1:
+    resolution: {integrity: sha512-10X6l6lXB42udBNX9/fDN+kJuooifSMk7+x4U9815eobavldqis4wDdFQUQjMazh+qlzsUZsGzXKxfWFUVt+3w==}
+    dependencies:
+      '@types/d3-shape': 1.3.8
     dev: true
 
-  /@types/d3-scale@4.0.2:
-    resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==}
+  /@types/d3-scale-chromatic@3.0.0:
+    resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
+
+  /@types/d3-scale@4.0.3:
+    resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==}
     dependencies:
       '@types/d3-time': 3.0.0
-    dev: true
 
   /@types/d3-selection@3.0.5:
     resolution: {integrity: sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==}
     dev: true
 
+  /@types/d3-shape@1.3.8:
+    resolution: {integrity: sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==}
+    dependencies:
+      '@types/d3-path': 1.0.9
+    dev: true
+
   /@types/d3-shape@3.1.0:
     resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
     dependencies:
@@ -4052,7 +4395,6 @@ packages:
 
   /@types/d3-time@3.0.0:
     resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
-    dev: true
 
   /@types/d3-timer@3.0.0:
     resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
@@ -4095,7 +4437,7 @@ packages:
       '@types/d3-polygon': 3.0.0
       '@types/d3-quadtree': 3.0.2
       '@types/d3-random': 3.0.1
-      '@types/d3-scale': 4.0.2
+      '@types/d3-scale': 4.0.3
       '@types/d3-scale-chromatic': 3.0.0
       '@types/d3-selection': 3.0.5
       '@types/d3-shape': 3.1.0
@@ -4185,6 +4527,13 @@ packages:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: true
 
+  /@types/glob@7.2.0:
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.16.0
+    dev: true
+
   /@types/graceful-fs@4.1.5:
     resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
     dependencies:
@@ -4285,6 +4634,10 @@ packages:
     resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==}
     dev: true
 
+  /@types/minimatch@5.1.2:
+    resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
+    dev: true
+
   /@types/minimist@1.2.2:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
@@ -4405,7 +4758,6 @@ packages:
 
   /@types/web-bluetooth@0.0.17:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
-    dev: true
 
   /@types/ws@8.5.3:
     resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==}
@@ -4676,27 +5028,38 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@unocss/astro@0.53.3(rollup@2.79.1)(vite@4.3.3):
-    resolution: {integrity: sha512-25OuQOnfgbWVlIOFvWzx/xJbIn0+HhDZMeFDrNyGjT3v73zr4/6oOltru+Vv4sBzkUCgG89im6kNGJ679EzMCA==}
+  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
     dependencies:
-      '@unocss/core': 0.53.3
-      '@unocss/reset': 0.53.3
-      '@unocss/vite': 0.53.3(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/core': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3)
     transitivePeerDependencies:
       - rollup
       - vite
     dev: true
 
-  /@unocss/cli@0.53.3(rollup@2.79.1):
-    resolution: {integrity: sha512-pM+vp48f58xEuBHaW3Nwp/Pq4qWHgmlUzd4qM8LNqyKkPRMkt6NrzlJ1iy8Oy3AKa0dnG0csMg+LXXhHEUDlaA==}
+  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
+    dependencies:
+      '@unocss/core': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
+  /@unocss/cli@0.53.0(rollup@2.79.1):
+    resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.3
-      '@unocss/core': 0.53.3
-      '@unocss/preset-uno': 0.53.3
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
+      '@unocss/preset-uno': 0.53.0
       cac: 6.7.14
       chokidar: 3.5.3
       colorette: 2.0.20
@@ -4709,154 +5072,158 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/config@0.53.3:
-    resolution: {integrity: sha512-72sP17B09ZT/PBJMeFGN1U5y0VhC9sBHTcIQ3GgsRxRnmCRZyzyyRyp9jwBkLRCqWfaKyWgELz1opnWGBhegFw==}
+  /@unocss/config@0.53.0:
+    resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
       unconfig: 0.3.9
     dev: true
 
-  /@unocss/core@0.53.3:
-    resolution: {integrity: sha512-28xxgZZBaGeDUULoNrpmSP4ZtNn41b2NlBnOe2ta+TnA4F0R5v8bW0w8CxHoYGiHS8mbCq4Aw1ReNlqVhfar8Q==}
+  /@unocss/core@0.53.0:
+    resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==}
     dev: true
 
-  /@unocss/extractor-arbitrary-variants@0.53.3:
-    resolution: {integrity: sha512-EyCwebLU4WDDNlrN3BbN9mjCszyRAwn0kP2YVOsCcj6IJD0Y3AjzWPoToTPP6jSN4nRk0iZd/8TrN2sqUHrn4w==}
+  /@unocss/extractor-arbitrary-variants@0.53.0:
+    resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/inspector@0.53.3:
-    resolution: {integrity: sha512-EPWBOA5nsI92EjRkPdulNu0DLEURWTRVl7IkAPpgwzSU/ahr1cNuByySpyw+wof1dtyxLxlJEj/Mvz5ExVOltg==}
+  /@unocss/inspector@0.53.0:
+    resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==}
     dependencies:
       gzip-size: 6.0.0
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.53.3(postcss@8.4.23):
-    resolution: {integrity: sha512-+uOK8bIzfziY3a7GXB2xI7pFx/aW+F/pigpq+LS0IkF+ZDKGD5mf9Jmo2zrcQ2wujw8ayDRFG66ByaIItjIpWw==}
+  /@unocss/postcss@0.53.0(postcss@8.4.24):
+    resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
-      '@unocss/config': 0.53.3
-      '@unocss/core': 0.53.3
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
       css-tree: 2.3.1
       fast-glob: 3.2.12
       magic-string: 0.30.0
-      postcss: 8.4.23
+      postcss: 8.4.24
     dev: true
 
-  /@unocss/preset-attributify@0.53.3:
-    resolution: {integrity: sha512-JWDJVldpmdybKzqJtS1UTKqF0nkYjtJKf0ptt3TclHfRYe6khinfvmy5lN1yTob0qolR/kO8S8DApDmB+qXMLg==}
+  /@unocss/preset-attributify@0.53.0:
+    resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/preset-icons@0.53.3:
-    resolution: {integrity: sha512-V+XIE9qFqZmEa9wrI16nR6OG7zwo6HEj7M6OewQNG1tzije6RVCg5QbU9Mhxgr1vC5qhyY+DaSAYQJKIWh7OQw==}
+  /@unocss/preset-icons@0.53.0:
+    resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==}
     dependencies:
       '@iconify/utils': 2.1.7
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
       ofetch: 1.1.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini@0.53.3:
-    resolution: {integrity: sha512-Sr61c/UPCD4OjWSXE+30FxXJHMdzh/Zc8Ow6RzlT+fqUBYyNw3WpXwRW3Goxnxl98FvK2vb+cZGTxVRlezO8Pw==}
+  /@unocss/preset-mini@0.53.0:
+    resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==}
     dependencies:
-      '@unocss/core': 0.53.3
-      '@unocss/extractor-arbitrary-variants': 0.53.3
+      '@unocss/core': 0.53.0
+      '@unocss/extractor-arbitrary-variants': 0.53.0
     dev: true
 
-  /@unocss/preset-tagify@0.53.3:
-    resolution: {integrity: sha512-sIbbMp1ZITJ6Tp7RITDQ6vxOZkx61rNwVSPhTh1HXS8V50GSUBBQe9Fv/kDWYuGjmL1Y5Gq2/VkCB8Zp68co/g==}
+  /@unocss/preset-tagify@0.53.0:
+    resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/preset-typography@0.53.3:
-    resolution: {integrity: sha512-XSv3+nIttJHIuZzpki5mWZx2BGBlUG8j7KQfWJkbCOO+jI3VNwxORFtTEKi5aDMkJM+V63UX8xlF8WRPJcbG1Q==}
+  /@unocss/preset-typography@0.53.0:
+    resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==}
     dependencies:
-      '@unocss/core': 0.53.3
-      '@unocss/preset-mini': 0.53.3
+      '@unocss/core': 0.53.0
+      '@unocss/preset-mini': 0.53.0
     dev: true
 
-  /@unocss/preset-uno@0.53.3:
-    resolution: {integrity: sha512-Yh0TOx5cTtqSQMrgxr0ze5kIEaBYs/W6WuX63h+0s18pe4ojG07bh6JKRpndf5scBxJ+oZxulQ6hulu6hOCEZg==}
+  /@unocss/preset-uno@0.53.0:
+    resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==}
     dependencies:
-      '@unocss/core': 0.53.3
-      '@unocss/preset-mini': 0.53.3
-      '@unocss/preset-wind': 0.53.3
+      '@unocss/core': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+      '@unocss/preset-wind': 0.53.0
     dev: true
 
-  /@unocss/preset-web-fonts@0.53.3:
-    resolution: {integrity: sha512-P17xcbhx4F+J1HQWrfbslqIibslF/o8iQg+94DYRxaZRg7a+uAKwYIOUCKiPxGXz88r4/QBYhXpsvjoHv4VZ+A==}
+  /@unocss/preset-web-fonts@0.53.0:
+    resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
       ofetch: 1.1.1
     dev: true
 
-  /@unocss/preset-wind@0.53.3:
-    resolution: {integrity: sha512-WHy2dEmj41x3RYinkRvxdz6C1B9fAV2Wck7xboFRXu9jJYERFCfajNcQSuCiGZ0zr+Ml94G6e7xYZ2xWCzMlLA==}
+  /@unocss/preset-wind@0.53.0:
+    resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==}
     dependencies:
-      '@unocss/core': 0.53.3
-      '@unocss/preset-mini': 0.53.3
+      '@unocss/core': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+    dev: true
+
+  /@unocss/reset@0.53.0:
+    resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==}
     dev: true
 
   /@unocss/reset@0.53.3:
     resolution: {integrity: sha512-DilchevgPVH7Kiiwg/yU8xV6admL/FeV1rwf5sFBEd4THiQSasQXYiqE0e9RyOAF4bJA4c3ZGE9x0cb8T37Fwg==}
     dev: true
 
-  /@unocss/scope@0.53.3:
-    resolution: {integrity: sha512-i41vTORGTLYmT6HKi6mpv2OLf5ewUvWP2w52ISrRGw8oatl0QQKyLk/vGwt9z06/Xy5QStDYoFt1QRc9tLnzBQ==}
+  /@unocss/scope@0.53.0:
+    resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==}
     dev: true
 
-  /@unocss/transformer-attributify-jsx-babel@0.53.3:
-    resolution: {integrity: sha512-k0G1lMyuZNKQ7MU21uGlq8OPR+gMA17zJv9nNum83umQpNutaIPgrOwcQv/3wItlYgEF7A24u83GOxspWaFauQ==}
+  /@unocss/transformer-attributify-jsx-babel@0.53.0:
+    resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.53.3:
-    resolution: {integrity: sha512-aTFpg9DAAuVSeaEF40SNsnEpK/42MaXdwfdF+xInYCLnqTx0NX/Uh0afZGY/FDgJe9yDEFrkFZ9yCd1W4RjQYQ==}
+  /@unocss/transformer-attributify-jsx@0.53.0:
+    resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/transformer-compile-class@0.53.3:
-    resolution: {integrity: sha512-j/NbGk/BBxSRaMzMYQy0zlojCw8ToPi7IpRMfAYP5oOpswk73vOROVnLXKyALrQUaBlAS5XK4Ui/iY3Bv5C5Xg==}
+  /@unocss/transformer-compile-class@0.53.0:
+    resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/transformer-directives@0.53.3:
-    resolution: {integrity: sha512-FIPdg8z3OMHEDu9RqbCFcl+84HaELDWKU1ecYTvZQkLzdpugCJfqls4FUg0gPwwzKJbJze2hSqECpWSFk883oA==}
+  /@unocss/transformer-directives@0.53.0:
+    resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
       css-tree: 2.3.1
     dev: true
 
-  /@unocss/transformer-variant-group@0.53.3:
-    resolution: {integrity: sha512-0yzV6sVkxwRmhf1wp3F8Vt+dxFaVYZ1wlyUqQVDjlupjvBoMWvARkGQwMaif2h9E/Qb/NTZRs91fbE2g+qBg+A==}
+  /@unocss/transformer-variant-group@0.53.0:
+    resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==}
     dependencies:
-      '@unocss/core': 0.53.3
+      '@unocss/core': 0.53.0
     dev: true
 
-  /@unocss/vite@0.53.3(rollup@2.79.1)(vite@4.3.3):
-    resolution: {integrity: sha512-XuSzw142Ex4YEQdoLmCf3/aqF+9qzN5ymqVHVdsrk2GE9jNlg8H7eF6G16xpZS39mJJY+cKdwtzuAKRYvoSd5g==}
+  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.3
-      '@unocss/core': 0.53.3
-      '@unocss/inspector': 0.53.3
-      '@unocss/scope': 0.53.3
-      '@unocss/transformer-directives': 0.53.3
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
+      '@unocss/inspector': 0.53.0
+      '@unocss/scope': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
       chokidar: 3.5.3
       fast-glob: 3.2.12
       magic-string: 0.30.0
@@ -4865,12 +5232,32 @@ packages:
       - rollup
     dev: true
 
-  /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.4):
+  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
+      '@unocss/inspector': 0.53.0
+      '@unocss/scope': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      vite: 4.3.9
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
       vite-plugin-pwa: '>=0.16.3 <1'
     dependencies:
-      vite-plugin-pwa: 0.16.4(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4)
+      vite-plugin-pwa: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
     dev: true
 
   /@vitejs/plugin-vue@4.2.1(vite@4.3.3)(vue@3.2.47):
@@ -4906,18 +5293,34 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitest/coverage-istanbul@0.32.2(vitest@0.32.2):
-    resolution: {integrity: sha512-B5VSvfzwTsDt9HjFmQ4sZ2tQHivmHJpAoG/BJwNNQeBtSCSdY1L6tfCjwZLo7ryOmZEDA3ck/DAmHCUZqa+MWA==}
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4):
+    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.4.0-beta.3
+      vue: 3.3.4
+    dev: true
+
+  /@vitest/coverage-v8@0.32.2(vitest@0.32.2):
+    resolution: {integrity: sha512-/+V3nB3fyeuuSeKxCfi6XmWjDIxpky7AWSkGVfaMjAk7di8igBwRsThLjultwIZdTDH1RAxpjmCXEfSqsMFZOA==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
     dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@bcoe/v8-coverage': 0.2.3
       istanbul-lib-coverage: 3.2.0
-      istanbul-lib-instrument: 5.2.1
       istanbul-lib-report: 3.0.0
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
+      magic-string: 0.30.0
+      picocolors: 1.0.0
+      std-env: 3.3.2
       test-exclude: 6.0.0
-      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1)
+      v8-to-istanbul: 9.1.0
+      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4962,10 +5365,10 @@ packages:
       fast-glob: 3.2.12
       fflate: 0.7.4
       flatted: 3.2.7
-      pathe: 1.1.0
+      pathe: 1.1.1
       picocolors: 1.0.0
       sirv: 2.0.3
-      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1)
+      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
     dev: true
 
   /@vitest/utils@0.32.2:
@@ -5018,7 +5421,7 @@ packages:
   /@vue/compiler-sfc@3.2.47:
     resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
     dependencies:
-      '@babel/parser': 7.21.2
+      '@babel/parser': 7.21.8
       '@vue/compiler-core': 3.2.47
       '@vue/compiler-dom': 3.2.47
       '@vue/compiler-ssr': 3.2.47
@@ -5026,7 +5429,7 @@ packages:
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.23
+      postcss: 8.4.24
       source-map: 0.6.1
 
   /@vue/compiler-sfc@3.3.4:
@@ -5040,7 +5443,7 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.0
-      postcss: 8.4.23
+      postcss: 8.4.24
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.2.47:
@@ -5154,14 +5557,25 @@ packages:
       '@types/web-bluetooth': 0.0.17
       '@vueuse/metadata': 10.1.2
       '@vueuse/shared': 10.1.2(vue@3.3.4)
-      vue-demi: 0.14.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/integrations@10.1.2(focus-trap@7.4.3)(vue@3.3.4):
-    resolution: {integrity: sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==}
+  /@vueuse/core@10.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.2.1
+      '@vueuse/shared': 10.2.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4):
+    resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -5201,10 +5615,10 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/shared': 10.1.2(vue@3.3.4)
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/shared': 10.2.1(vue@3.3.4)
       focus-trap: 7.4.3
-      vue-demi: 0.14.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5218,10 +5632,13 @@ packages:
     resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==}
     dev: true
 
+  /@vueuse/metadata@10.2.1:
+    resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
+
   /@vueuse/shared@10.1.0(vue@3.2.47):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
     dependencies:
-      vue-demi: 0.14.0(vue@3.2.47)
+      vue-demi: 0.14.5(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5230,12 +5647,20 @@ packages:
   /@vueuse/shared@10.1.2(vue@3.3.4):
     resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==}
     dependencies:
-      vue-demi: 0.14.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
+  /@vueuse/shared@10.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /@wdio/config@7.30.0(typescript@5.1.3):
     resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==}
     engines: {node: '>=12.0.0'}
@@ -5506,13 +5931,6 @@ packages:
       acorn-walk: 7.2.0
     dev: true
 
-  /acorn-globals@7.0.1:
-    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
-    dependencies:
-      acorn: 8.8.2
-      acorn-walk: 8.2.0
-    dev: true
-
   /acorn-import-assertions@1.8.0(acorn@8.8.2):
     resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
     peerDependencies:
@@ -5576,7 +5994,7 @@ packages:
       indent-string: 5.0.0
     dev: true
 
-  /ajv-formats@2.1.1(ajv@8.11.0):
+  /ajv-formats@2.1.1(ajv@8.12.0):
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
       ajv: ^8.0.0
@@ -5584,7 +6002,7 @@ packages:
       ajv:
         optional: true
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
     dev: true
 
   /ajv-keywords@3.5.2(ajv@6.12.6):
@@ -5595,12 +6013,12 @@ packages:
       ajv: 6.12.6
     dev: true
 
-  /ajv-keywords@5.1.0(ajv@8.11.0):
+  /ajv-keywords@5.1.0(ajv@8.12.0):
     resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
     peerDependencies:
       ajv: ^8.8.2
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       fast-deep-equal: 3.1.3
     dev: true
 
@@ -5613,8 +6031,8 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /ajv@8.11.0:
-    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
+  /ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
     dependencies:
       fast-deep-equal: 3.1.3
       json-schema-traverse: 1.0.0
@@ -5726,7 +6144,6 @@ packages:
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
 
   /anymatch@3.1.2:
     resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
@@ -6025,6 +6442,10 @@ packages:
       tweetnacl: 0.14.5
     dev: true
 
+  /big.js@6.2.1:
+    resolution: {integrity: sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==}
+    dev: true
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -6233,6 +6654,10 @@ packages:
       get-intrinsic: 1.2.0
     dev: true
 
+  /call-me-maybe@1.0.2:
+    resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==}
+    dev: true
+
   /callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -6284,6 +6709,10 @@ packages:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
     dev: true
 
+  /centra@2.6.0:
+    resolution: {integrity: sha512-dgh+YleemrT8u85QL11Z6tYhegAs3MMxsaWAq/oXeAmYJ7VxL3SI9TZtnfaEvNDMAPolj25FXIb3S+HCI4wQaQ==}
+    dev: true
+
   /chai@4.3.7:
     resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
     engines: {node: '>=4'}
@@ -6397,6 +6826,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /ci-info@3.8.0:
+    resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /cjs-module-lexer@1.2.2:
     resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==}
     dev: true
@@ -6447,6 +6881,17 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /cli-color@2.0.3:
+    resolution: {integrity: sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-iterator: 2.0.3
+      memoizee: 0.4.15
+      timers-ext: 0.1.7
+    dev: true
+
   /cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -6667,7 +7112,7 @@ packages:
       js-string-escape: 1.0.1
       lodash: 4.17.21
       md5-hex: 3.0.1
-      semver: 7.5.0
+      semver: 7.5.3
       well-known-symbols: 2.0.0
     dev: true
 
@@ -7063,6 +7508,10 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /cuint@0.2.2:
+    resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
+    dev: true
+
   /cypress-image-snapshot@4.0.1(cypress@12.10.0)(jest@29.5.0):
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
@@ -7156,6 +7605,12 @@ packages:
       lodash: 4.17.21
     dev: false
 
+  /d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
   /d3-array@3.2.0:
     resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==}
     engines: {node: '>=12'}
@@ -7273,6 +7728,10 @@ packages:
       d3-color: 3.1.0
     dev: false
 
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: false
+
   /d3-path@3.0.1:
     resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==}
     engines: {node: '>=12'}
@@ -7293,6 +7752,13 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+    dev: false
+
   /d3-scale-chromatic@3.0.0:
     resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==}
     engines: {node: '>=12'}
@@ -7317,6 +7783,12 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: false
+
   /d3-shape@3.1.0:
     resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
     engines: {node: '>=12'}
@@ -7404,6 +7876,13 @@ packages:
       d3-zoom: 3.0.0
     dev: false
 
+  /d@1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
+    dependencies:
+      es5-ext: 0.10.62
+      type: 1.2.0
+    dev: true
+
   /dagre-d3-es@7.0.10:
     resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==}
     dependencies:
@@ -7734,8 +8213,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify@3.0.3:
-    resolution: {integrity: sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==}
+  /dompurify@3.0.4:
+    resolution: {integrity: sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==}
     dev: false
 
   /domutils@3.0.1:
@@ -7925,10 +8404,49 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es2015-i18n-tag@1.6.1:
+    resolution: {integrity: sha512-MYoh9p+JTkgnzBh0MEBON6xUyzdmwT6wzsmmFJvZujGSXiI2kM+3XvFl6+AcIO2eeL6VWgtX9szSiDTMwDxyYA==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /es5-ext@0.10.62:
+    resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+      next-tick: 1.1.0
+    dev: true
+
   /es6-error@4.1.1:
     resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
     dev: true
 
+  /es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-symbol: 3.1.3
+    dev: true
+
+  /es6-symbol@3.1.3:
+    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+    dependencies:
+      d: 1.0.1
+      ext: 1.7.0
+    dev: true
+
+  /es6-weak-map@2.0.3:
+    resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+    dev: true
+
   /esbuild@0.17.18:
     resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==}
     engines: {node: '>=12'}
@@ -7959,6 +8477,36 @@ packages:
       '@esbuild/win32-x64': 0.17.18
     dev: true
 
+  /esbuild@0.18.11:
+    resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.11
+      '@esbuild/android-arm64': 0.18.11
+      '@esbuild/android-x64': 0.18.11
+      '@esbuild/darwin-arm64': 0.18.11
+      '@esbuild/darwin-x64': 0.18.11
+      '@esbuild/freebsd-arm64': 0.18.11
+      '@esbuild/freebsd-x64': 0.18.11
+      '@esbuild/linux-arm': 0.18.11
+      '@esbuild/linux-arm64': 0.18.11
+      '@esbuild/linux-ia32': 0.18.11
+      '@esbuild/linux-loong64': 0.18.11
+      '@esbuild/linux-mips64el': 0.18.11
+      '@esbuild/linux-ppc64': 0.18.11
+      '@esbuild/linux-riscv64': 0.18.11
+      '@esbuild/linux-s390x': 0.18.11
+      '@esbuild/linux-x64': 0.18.11
+      '@esbuild/netbsd-x64': 0.18.11
+      '@esbuild/openbsd-x64': 0.18.11
+      '@esbuild/sunos-x64': 0.18.11
+      '@esbuild/win32-arm64': 0.18.11
+      '@esbuild/win32-ia32': 0.18.11
+      '@esbuild/win32-x64': 0.18.11
+    dev: true
+
   /esbuild@0.18.6:
     resolution: {integrity: sha512-5QgxWaAhU/tPBpvkxUmnFv2YINHuZzjbk0LeUUnC2i3aJHjfi5yR49lgKgF7cb98bclOp/kans8M5TGbGFfJlQ==}
     engines: {node: '>=12'}
@@ -8089,20 +8637,20 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc@43.0.7(eslint@8.39.0):
-    resolution: {integrity: sha512-32Sx5I9VzO/bqbtslCu3L1GHIPo+QEliwqwjWq+qzbUv76wrkH6ifUEE0EbkuNEn+cHlSIOrg/IJ1PGNN72QZA==}
-    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20}
+  /eslint-plugin-jsdoc@46.0.0(eslint@8.39.0):
+    resolution: {integrity: sha512-xmB5WleBcPCFYlrFfdjrcfSKOJBLwyGmKa+i+fVqlIHp8g5aAoeQpBGugUzToFtQgd4hNZYlfIcP7QSxC9NYWQ==}
+    engines: {node: '>=16'}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      '@es-joy/jsdoccomment': 0.37.1
+      '@es-joy/jsdoccomment': 0.39.4
       are-docs-informative: 0.0.2
       comment-parser: 1.3.1
       debug: 4.3.4
       escape-string-regexp: 4.0.0
       eslint: 8.39.0
       esquery: 1.5.0
-      semver: 7.5.0
+      semver: 7.5.3
       spdx-expression-parse: 3.0.1
     transitivePeerDependencies:
       - supports-color
@@ -8150,28 +8698,28 @@ packages:
       '@microsoft/tsdoc-config': 0.16.2
     dev: true
 
-  /eslint-plugin-unicorn@46.0.0(eslint@8.39.0):
-    resolution: {integrity: sha512-j07WkC+PFZwk8J33LYp6JMoHa1lXc1u6R45pbSAipjpfpb7KIGr17VE2D685zCxR5VL4cjrl65kTJflziQWMDA==}
-    engines: {node: '>=14.18'}
+  /eslint-plugin-unicorn@47.0.0(eslint@8.39.0):
+    resolution: {integrity: sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==}
+    engines: {node: '>=16'}
     peerDependencies:
-      eslint: '>=8.28.0'
+      eslint: '>=8.38.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.19.1
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
-      ci-info: 3.6.2
+      ci-info: 3.8.0
       clean-regexp: 1.0.0
       eslint: 8.39.0
       esquery: 1.5.0
       indent-string: 4.0.0
-      is-builtin-module: 3.2.0
+      is-builtin-module: 3.2.1
       jsesc: 3.0.2
       lodash: 4.17.21
       pluralize: 8.0.0
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.24
-      regjsparser: 0.9.1
+      regjsparser: 0.10.0
       safe-regex: 2.1.1
-      semver: 7.3.8
+      semver: 7.5.3
       strip-indent: 3.0.0
     dev: true
 
@@ -8323,6 +8871,13 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+    dev: true
+
   /event-stream@3.3.4:
     resolution: {integrity: sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==}
     dependencies:
@@ -8471,6 +9026,12 @@ packages:
       - supports-color
     dev: true
 
+  /ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: true
+
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -8555,6 +9116,10 @@ packages:
     engines: {node: '>= 4.9.1'}
     dev: true
 
+  /fastestsmallesttextencoderdecoder@1.0.22:
+    resolution: {integrity: sha512-Pb8d48e+oIuY4MaM64Cd7OW1gt4nxCHs7/ddPPZ/Ic3sg8yVGM7O9wDvZ7us6ScaUupzM+pfBolwtYhN1IxBIw==}
+    dev: true
+
   /fastify-plugin@3.0.1:
     resolution: {integrity: sha512-qKcDXmuZadJqdTm6vlCqioEbyewF60b/0LOFCcYN1B6BIZGlYJumWWOYs70SFYLDAH4YqdE1cxH/RKMG7rFxgA==}
     dev: true
@@ -8576,7 +9141,7 @@ packages:
       proxy-addr: 2.0.7
       rfdc: 1.3.0
       secure-json-parse: 2.7.0
-      semver: 7.5.0
+      semver: 7.5.3
       tiny-lru: 8.0.2
     transitivePeerDependencies:
       - supports-color
@@ -8612,6 +9177,14 @@ packages:
       pend: 1.2.0
     dev: true
 
+  /ferrum@1.9.4:
+    resolution: {integrity: sha512-ooNerLoIht/dK4CQJux93z/hnt9JysrXniJCI3r6YRgmHeXC57EJ8XaTCT1Gm8LfhIAeWxyJA0O7d/W3pqDYRg==}
+    dependencies:
+      fastestsmallesttextencoderdecoder: 1.0.22
+      lodash.isplainobject: 4.0.6
+      xxhashjs: 0.2.2
+    dev: true
+
   /fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
@@ -8844,6 +9417,15 @@ packages:
     resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
     dev: true
 
+  /fs-extra@11.0.0:
+    resolution: {integrity: sha512-4YxRvMi4P5C3WQTvdRfrv5UVqbISpqjORFQAW5QPiKAauaxNCwrEdIi6pG3tDFhKKpMen+enEhHIzB/tvIO+/w==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs-extra@11.1.1:
     resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
     engines: {node: '>=14.14'}
@@ -9000,6 +9582,10 @@ packages:
       through2: 4.0.2
     dev: true
 
+  /github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+    dev: true
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -9012,6 +9598,16 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
+  /glob-promise@4.2.2(glob@7.2.3):
+    resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      glob: ^7.1.6
+    dependencies:
+      '@types/glob': 7.2.0
+      glob: 7.2.3
+    dev: true
+
   /glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
     dev: true
@@ -9023,7 +9619,7 @@ packages:
     dependencies:
       foreground-child: 3.1.1
       jackspeak: 2.1.1
-      minimatch: 9.0.0
+      minimatch: 9.0.1
       minipass: 5.0.0
       path-scurry: 1.7.0
     dev: true
@@ -9576,6 +10172,10 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: false
+
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -9648,8 +10248,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /is-builtin-module@3.2.0:
-    resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
     dependencies:
       builtin-modules: 3.3.0
@@ -9664,7 +10264,7 @@ packages:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.6.2
+      ci-info: 3.8.0
     dev: true
 
   /is-core-module@2.10.0:
@@ -9798,6 +10398,10 @@ packages:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
+  /is-promise@2.2.2:
+    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
+    dev: true
+
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -10100,7 +10704,7 @@ packages:
       '@types/node': 18.16.0
       babel-jest: 29.5.0(@babel/core@7.12.3)
       chalk: 4.1.2
-      ci-info: 3.6.2
+      ci-info: 3.8.0
       deepmerge: 4.2.2
       glob: 7.2.3
       graceful-fs: 4.2.10
@@ -10373,7 +10977,7 @@ packages:
       jest-util: 29.5.0
       natural-compare: 1.4.0
       pretty-format: 29.5.0
-      semver: 7.5.0
+      semver: 7.5.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10385,7 +10989,7 @@ packages:
       '@jest/types': 29.5.0
       '@types/node': 18.16.0
       chalk: 4.1.2
-      ci-info: 3.6.2
+      ci-info: 3.8.0
       graceful-fs: 4.2.10
       picomatch: 2.3.1
     dev: true
@@ -10551,9 +11155,9 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /jsdom@21.1.1:
-    resolution: {integrity: sha512-Jjgdmw48RKcdAIQyUD1UdBh2ecH7VqwaXPN3ehoZN6MqgVbMn+lRm1aAT1AsdJRAJpwfa4IpwgzySn61h2qu3w==}
-    engines: {node: '>=14'}
+  /jsdom@22.0.0:
+    resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==}
+    engines: {node: '>=16'}
     peerDependencies:
       canvas: ^2.5.0
     peerDependenciesMeta:
@@ -10561,19 +11165,16 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.2
-      acorn-globals: 7.0.1
       cssstyle: 3.0.0
       data-urls: 4.0.0
       decimal.js: 10.4.3
       domexception: 4.0.0
-      escodegen: 2.0.0
       form-data: 4.0.0
       html-encoding-sniffer: 3.0.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.2
+      nwsapi: 2.2.5
       parse5: 7.1.2
       rrweb-cssom: 0.6.0
       saxes: 6.0.0
@@ -10617,6 +11218,27 @@ packages:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
     dev: true
 
+  /json-schema-to-typescript@11.0.3:
+    resolution: {integrity: sha512-EaEE9Y4VZ8b9jW5zce5a9L3+p4C9AqgIRHbNVDJahfMnoKzcd4sDb98BLxLdQhJEuRAXyKLg4H66NKm80W8ilg==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      '@bcherny/json-schema-ref-parser': 9.0.9
+      '@types/json-schema': 7.0.11
+      '@types/lodash': 4.14.194
+      '@types/prettier': 2.7.2
+      cli-color: 2.0.3
+      get-stdin: 8.0.0
+      glob: 7.2.3
+      glob-promise: 4.2.2(glob@7.2.3)
+      is-glob: 4.0.3
+      lodash: 4.17.21
+      minimist: 1.2.8
+      mkdirp: 1.0.4
+      mz: 2.7.0
+      prettier: 2.8.8
+    dev: true
+
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
@@ -10791,7 +11413,7 @@ packages:
   /light-my-request@4.12.0:
     resolution: {integrity: sha512-0y+9VIfJEsPVzK5ArSIJ8Dkxp8QMP7/aCuxCUtG/tr9a2NoOf/snATE/OUc05XUplJCEnRh6gTkH7xh9POt1DQ==}
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       cookie: 0.5.0
       process-warning: 1.0.0
       set-cookie-parser: 2.6.0
@@ -10863,7 +11485,7 @@ packages:
         optional: true
     dependencies:
       cli-truncate: 2.1.0
-      colorette: 2.0.19
+      colorette: 2.0.20
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.3.0
@@ -11032,6 +11654,12 @@ packages:
     engines: {node: 14 || >=16.14}
     dev: true
 
+  /lru-queue@0.1.0:
+    resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==}
+    dependencies:
+      es5-ext: 0.10.62
+    dev: true
+
   /lunr@2.3.9:
     resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
     dev: true
@@ -11102,6 +11730,13 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
+  /matchit@1.1.0:
+    resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@arr/every': 1.0.1
+    dev: true
+
   /md5-hex@3.0.1:
     resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==}
     engines: {node: '>=8'}
@@ -11109,6 +11744,12 @@ packages:
       blueimp-md5: 2.19.0
     dev: true
 
+  /mdast-builder@1.1.1:
+    resolution: {integrity: sha512-a3KBk/LmYD6wKsWi8WJrGU/rXR4yuF4Men0JO0z6dSZCm5FrXXWTRDjqK0vGSqa+1M6p9edeuypZAZAzSehTUw==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /mdast-util-find-and-replace@2.2.1:
     resolution: {integrity: sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==}
     dependencies:
@@ -11217,7 +11858,7 @@ packages:
       longest-streak: 3.0.1
       mdast-util-to-string: 3.1.0
       micromark-util-decode-string: 1.0.2
-      unist-util-visit: 4.1.1
+      unist-util-visit: 4.1.2
       zwitch: 2.0.2
     dev: true
 
@@ -11248,6 +11889,19 @@ packages:
       fs-monkey: 1.0.3
     dev: true
 
+  /memoizee@0.4.15:
+    resolution: {integrity: sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-weak-map: 2.0.3
+      event-emitter: 0.3.5
+      is-promise: 2.2.2
+      lru-queue: 0.1.0
+      next-tick: 1.1.0
+      timers-ext: 0.1.7
+    dev: true
+
   /meow@10.1.5:
     resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -11662,6 +12316,12 @@ packages:
       minimist: 1.2.8
     dev: true
 
+  /mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
   /mlly@1.2.0:
     resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
     dependencies:
@@ -11705,7 +12365,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: false
 
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
@@ -11733,6 +12392,10 @@ packages:
     resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
     dev: true
 
+  /next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: true
+
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
@@ -11842,8 +12505,8 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.10.0
-      semver: 7.5.0
+      is-core-module: 2.12.1
+      semver: 7.5.3
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -11877,8 +12540,8 @@ packages:
       path-key: 4.0.0
     dev: true
 
-  /nwsapi@2.2.2:
-    resolution: {integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==}
+  /nwsapi@2.2.5:
+    resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==}
     dev: true
 
   /nyc@15.1.0:
@@ -11930,10 +12593,6 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
-  /object-inspect@1.12.2:
-    resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
-    dev: true
-
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
     dev: true
@@ -12302,6 +12961,13 @@ packages:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: true
 
+  /phin@3.7.0:
+    resolution: {integrity: sha512-DqnVNrpYhKGBZppNKprD+UJylMeEKOZxHgPB+ZP6mGzf3uA2uox4Ep9tUm+rUc8WLIdHT3HcAE4X8fhwQA9JKg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      centra: 2.6.0
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -12430,29 +13096,36 @@ packages:
     hasBin: true
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.23):
+  /polka@0.5.2:
+    resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==}
+    dependencies:
+      '@polka/url': 0.5.0
+      trouter: 2.0.1
+    dev: true
+
+  /postcss-import@15.1.0(postcss@8.4.24):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.23
+      postcss: 8.4.24
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.23):
+  /postcss-js@4.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.23
+      postcss: 8.4.24
     dev: false
 
-  /postcss-load-config@4.0.1(postcss@8.4.23):
+  /postcss-load-config@4.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -12465,17 +13138,17 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.23
+      postcss: 8.4.24
       yaml: 2.2.2
     dev: false
 
-  /postcss-nested@6.0.1(postcss@8.4.23):
+  /postcss-nested@6.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.23
+      postcss: 8.4.24
       postcss-selector-parser: 6.0.13
     dev: false
 
@@ -12499,6 +13172,14 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.24:
+    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /preact@10.11.0:
     resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
     dev: true
@@ -12624,11 +13305,6 @@ packages:
       once: 1.4.0
     dev: true
 
-  /punycode@2.1.1:
-    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
-    engines: {node: '>=6'}
-    dev: true
-
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -12798,7 +13474,7 @@ packages:
     resolution: {integrity: sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==}
     engines: {node: '>= 0.10'}
     dependencies:
-      resolve: 1.22.1
+      resolve: 1.22.2
     dev: true
 
   /redent@3.0.0:
@@ -12864,6 +13540,13 @@ packages:
       unicode-match-property-value-ecmascript: 2.1.0
     dev: true
 
+  /regjsparser@0.10.0:
+    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
   /regjsparser@0.9.1:
     resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
     hasBin: true
@@ -13019,7 +13702,7 @@ packages:
   /resolve@1.19.0:
     resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
     dependencies:
-      is-core-module: 2.10.0
+      is-core-module: 2.12.1
       path-parse: 1.0.7
     dev: true
 
@@ -13143,6 +13826,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup@3.26.0:
+    resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
     dev: true
@@ -13232,9 +13923,9 @@ packages:
     engines: {node: '>= 12.13.0'}
     dependencies:
       '@types/json-schema': 7.0.11
-      ajv: 8.11.0
-      ajv-formats: 2.1.1(ajv@8.11.0)
-      ajv-keywords: 5.1.0(ajv@8.11.0)
+      ajv: 8.12.0
+      ajv-formats: 2.1.1(ajv@8.12.0)
+      ajv-keywords: 5.1.0(ajv@8.12.0)
     dev: true
 
   /search-insights@2.6.0:
@@ -13287,8 +13978,8 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /semver@7.5.0:
-    resolution: {integrity: sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==}
+  /semver@7.5.3:
+    resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -13415,8 +14106,8 @@ packages:
       vscode-textmate: 8.0.0
     dev: true
 
-  /shiki@0.14.2:
-    resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==}
+  /shiki@0.14.3:
+    resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==}
     dependencies:
       ansi-sequence-parser: 1.1.0
       jsonc-parser: 3.2.0
@@ -13429,7 +14120,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       get-intrinsic: 1.2.0
-      object-inspect: 1.12.2
+      object-inspect: 1.12.3
     dev: true
 
   /siginfo@2.0.0:
@@ -13966,11 +14657,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.23
-      postcss-import: 15.1.0(postcss@8.4.23)
-      postcss-js: 4.0.1(postcss@8.4.23)
-      postcss-load-config: 4.0.1(postcss@8.4.23)
-      postcss-nested: 6.0.1(postcss@8.4.23)
+      postcss: 8.4.24
+      postcss-import: 15.1.0(postcss@8.4.24)
+      postcss-js: 4.0.1(postcss@8.4.24)
+      postcss-load-config: 4.0.1(postcss@8.4.24)
+      postcss-nested: 6.0.1(postcss@8.4.24)
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
       resolve: 1.22.2
@@ -14103,13 +14794,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: false
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: false
 
   /thread-stream@2.3.0:
     resolution: {integrity: sha512-kaDqm1DET9pp3NXwR8382WHbnpXnRkN9xGN9dQt3B2+dmXiW8X1SOwmFOxAErEQ47ObhZ96J6yhZNXuyCOL7KA==}
@@ -14148,6 +14837,13 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /timers-ext@0.1.7:
+    resolution: {integrity: sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==}
+    dependencies:
+      es5-ext: 0.10.62
+      next-tick: 1.1.0
+    dev: true
+
   /tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
     dependencies:
@@ -14210,7 +14906,7 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.1.1
+      punycode: 2.3.0
     dev: true
 
   /tough-cookie@4.1.2:
@@ -14218,7 +14914,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.1.1
+      punycode: 2.3.0
       universalify: 0.2.0
       url-parse: 1.5.10
     dev: true
@@ -14270,6 +14966,13 @@ packages:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
     dev: true
 
+  /trouter@2.0.1:
+    resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      matchit: 1.1.0
+    dev: true
+
   /ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
@@ -14418,6 +15121,14 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /type@1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
+    dev: true
+
+  /type@2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: true
+
   /typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
     dependencies:
@@ -14558,6 +15269,12 @@ packages:
     resolution: {integrity: sha512-IG32jcKJlhARCYT2LsYPJWdoXYkzz3ESAdl1aa2hn9Auh+cgUmU6wgkII4yCc/1GgeWibRdELdCZh/p3QKQ1dQ==}
     dev: true
 
+  /unist-util-inspect@7.0.1:
+    resolution: {integrity: sha512-gEPeSrsYXus8012VJ00p9uZC8D0iogtLLiHlBgvS61hU22KNKduQhMKezJm83viHlLf3TYS2y9SDEFglWPDMKw==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /unist-util-is@5.1.1:
     resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
     dev: true
@@ -14580,8 +15297,8 @@ packages:
       unist-util-is: 5.1.1
     dev: true
 
-  /unist-util-visit@4.1.1:
-    resolution: {integrity: sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==}
+  /unist-util-visit@4.1.2:
+    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:
       '@types/unist': 2.0.6
       unist-util-is: 5.1.1
@@ -14603,35 +15320,71 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.53.3(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3):
-    resolution: {integrity: sha512-kZx3GFOczE7uS2zUecmvW1kM0MTPdVtQIMcXC5XYoPfr2Ho6G1p75eGAXmaL7jaompSo+WHsK4HrSC756nbfgg==}
+  /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.53.3
+      '@unocss/webpack': 0.53.0
     peerDependenciesMeta:
       '@unocss/webpack':
         optional: true
     dependencies:
-      '@unocss/astro': 0.53.3(rollup@2.79.1)(vite@4.3.3)
-      '@unocss/cli': 0.53.3(rollup@2.79.1)
-      '@unocss/core': 0.53.3
-      '@unocss/extractor-arbitrary-variants': 0.53.3
-      '@unocss/postcss': 0.53.3(postcss@8.4.23)
-      '@unocss/preset-attributify': 0.53.3
-      '@unocss/preset-icons': 0.53.3
-      '@unocss/preset-mini': 0.53.3
-      '@unocss/preset-tagify': 0.53.3
-      '@unocss/preset-typography': 0.53.3
-      '@unocss/preset-uno': 0.53.3
-      '@unocss/preset-web-fonts': 0.53.3
-      '@unocss/preset-wind': 0.53.3
-      '@unocss/reset': 0.53.3
-      '@unocss/transformer-attributify-jsx': 0.53.3
-      '@unocss/transformer-attributify-jsx-babel': 0.53.3
-      '@unocss/transformer-compile-class': 0.53.3
-      '@unocss/transformer-directives': 0.53.3
-      '@unocss/transformer-variant-group': 0.53.3
-      '@unocss/vite': 0.53.3(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/cli': 0.53.0(rollup@2.79.1)
+      '@unocss/core': 0.53.0
+      '@unocss/extractor-arbitrary-variants': 0.53.0
+      '@unocss/postcss': 0.53.0(postcss@8.4.24)
+      '@unocss/preset-attributify': 0.53.0
+      '@unocss/preset-icons': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+      '@unocss/preset-tagify': 0.53.0
+      '@unocss/preset-typography': 0.53.0
+      '@unocss/preset-uno': 0.53.0
+      '@unocss/preset-web-fonts': 0.53.0
+      '@unocss/preset-wind': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/transformer-attributify-jsx': 0.53.0
+      '@unocss/transformer-attributify-jsx-babel': 0.53.0
+      '@unocss/transformer-compile-class': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      '@unocss/transformer-variant-group': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
+  /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.53.0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+      '@unocss/cli': 0.53.0(rollup@2.79.1)
+      '@unocss/core': 0.53.0
+      '@unocss/extractor-arbitrary-variants': 0.53.0
+      '@unocss/postcss': 0.53.0(postcss@8.4.24)
+      '@unocss/preset-attributify': 0.53.0
+      '@unocss/preset-icons': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+      '@unocss/preset-tagify': 0.53.0
+      '@unocss/preset-typography': 0.53.0
+      '@unocss/preset-uno': 0.53.0
+      '@unocss/preset-web-fonts': 0.53.0
+      '@unocss/preset-wind': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/transformer-attributify-jsx': 0.53.0
+      '@unocss/transformer-attributify-jsx-babel': 0.53.0
+      '@unocss/transformer-compile-class': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      '@unocss/transformer-variant-group': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -14673,6 +15426,35 @@ packages:
       - supports-color
     dev: true
 
+  /unplugin-vue-components@0.25.1(rollup@2.79.1)(vue@3.3.4):
+    resolution: {integrity: sha512-kzS2ZHVMaGU2XEO2keYQcMjNZkanDSGDdY96uQT9EPe+wqSZwwgbFfKVJ5ti0+8rGAcKHColwKUvctBhq2LJ3A==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.4
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      minimatch: 9.0.1
+      resolve: 1.22.2
+      unplugin: 1.3.1
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /unplugin@1.3.1:
     resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
     dependencies:
@@ -14754,8 +15536,8 @@ packages:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
     dev: true
 
-  /v8-to-istanbul@9.0.1:
-    resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
+  /v8-to-istanbul@9.1.0:
+    resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==}
     engines: {node: '>=10.12.0'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.17
@@ -14835,8 +15617,8 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.4(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4):
-    resolution: {integrity: sha512-lmwHFIs9zI2H9bXJld/zVTbCqCQHZ9WrpyDMqosICDV0FVnCJwniX1NMDB79HGTIZzOQkY4gSZaVTJTw6maz/Q==}
+  /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0):
+    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0
@@ -14848,7 +15630,25 @@ packages:
       pretty-bytes: 6.1.0
       vite: 4.3.3
       workbox-build: 7.0.0
-      workbox-window: 6.5.4
+      workbox-window: 7.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.6.1):
+    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0
+      workbox-build: ^7.0.0
+      workbox-window: ^7.0.0
+    dependencies:
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      pretty-bytes: 6.1.0
+      vite: 4.3.9
+      workbox-build: 7.0.0
+      workbox-window: 6.6.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -14910,9 +15710,10 @@ packages:
       terser:
         optional: true
     dependencies:
+      '@types/node': 18.16.0
       esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
+      postcss: 8.4.24
+      rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -14943,8 +15744,8 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
+      postcss: 8.4.24
+      rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -14982,6 +15783,41 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite@4.4.0-beta.3:
+    resolution: {integrity: sha512-IC/thYTvArOFRJ4qvvudnu4KKZOVc+gduS3I9OfC5SbP/Rf4kkP7z6Of2QpKeOSVqwIK24khW6VOUmVD/0yzSQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.18.11
+      postcss: 8.4.24
+      rollup: 3.26.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15036,13 +15872,13 @@ packages:
       '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
       '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4)
       body-scroll-lock: 4.0.0-beta.0
       focus-trap: 7.4.3
       mark.js: 8.11.1
       minisearch: 6.1.0
-      shiki: 0.14.2
+      shiki: 0.14.3
       vite: 4.3.9
       vue: 3.3.4
     transitivePeerDependencies:
@@ -15071,7 +15907,51 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1):
+  /vitepress@1.0.0-beta.5(@algolia/client-search@4.14.2)(search-insights@2.6.0):
+    resolution: {integrity: sha512-/RjqqRsSEKkzF6HhK5e5Ij+bZ7ETb9jNCRRgIMm10gJ+ZLC3D1OqkE465lEqCeJUgt2HZ6jmWjDqIBfrJSpv7w==}
+    hasBin: true
+    dependencies:
+      '@docsearch/css': 3.5.1
+      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4)
+      '@vue/devtools-api': 6.5.0
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4)
+      body-scroll-lock: 4.0.0-beta.0
+      focus-trap: 7.4.3
+      mark.js: 8.11.1
+      minisearch: 6.1.0
+      shiki: 0.14.3
+      vite: 4.4.0-beta.3
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - universal-cookie
+    dev: true
+
+  /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0):
     resolution: {integrity: sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -15117,10 +15997,10 @@ packages:
       chai: 4.3.7
       concordance: 5.0.4
       debug: 4.3.4
-      jsdom: 21.1.1
+      jsdom: 22.0.0
       local-pkg: 0.4.3
       magic-string: 0.30.0
-      pathe: 1.1.0
+      pathe: 1.1.1
       picocolors: 1.0.0
       std-env: 3.3.2
       strip-literal: 1.0.1
@@ -15195,8 +16075,23 @@ packages:
       vue: 3.2.47
     dev: false
 
-  /vue-demi@0.14.0(vue@3.3.4):
-    resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==}
+  /vue-demi@0.14.5(vue@3.2.47):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
+  /vue-demi@0.14.5(vue@3.3.4):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -15208,7 +16103,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
-    dev: true
 
   /vue@3.2.47:
     resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
@@ -15685,7 +16579,7 @@ packages:
     resolution: {integrity: sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==}
     engines: {node: '>=16.0.0'}
     dependencies:
-      '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0)
+      '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
       '@babel/core': 7.12.3
       '@babel/preset-env': 7.20.2(@babel/core@7.12.3)
       '@babel/runtime': 7.21.0
@@ -15693,7 +16587,7 @@ packages:
       '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
-      ajv: 8.11.0
+      ajv: 8.12.0
       common-tags: 1.8.2
       fast-json-stable-stringify: 2.1.0
       fs-extra: 9.1.0
@@ -15733,8 +16627,9 @@ packages:
       workbox-core: 7.0.0
     dev: true
 
-  /workbox-core@6.5.4:
-    resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==}
+  /workbox-core@6.6.1:
+    resolution: {integrity: sha512-ZrGBXjjaJLqzVothoE12qTbVnOAjFrHDXpZe7coCb6q65qI/59rDLwuFMO4PcZ7jcbxY+0+NhUVztzR/CbjEFw==}
+    deprecated: this package has been deprecated
     dev: true
 
   /workbox-core@7.0.0:
@@ -15811,11 +16706,12 @@ packages:
     resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==}
     dev: true
 
-  /workbox-window@6.5.4:
-    resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==}
+  /workbox-window@6.6.1:
+    resolution: {integrity: sha512-wil4nwOY58nTdCvif/KEZjQ2NP8uk3gGeRNy2jPBbzypU4BT4D9L8xiwbmDBpZlSgJd2xsT9FvSNU0gsxV51JQ==}
+    deprecated: this package has been deprecated
     dependencies:
       '@types/trusted-types': 2.0.2
-      workbox-core: 6.5.4
+      workbox-core: 6.6.1
     dev: true
 
   /workbox-window@7.0.0:
@@ -15934,6 +16830,12 @@ packages:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
     dev: true
 
+  /xxhashjs@0.2.2:
+    resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
+    dependencies:
+      cuint: 0.2.2
+    dev: true
+
   /y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
     dev: true
diff --git a/run b/run
index 6afe76eee..cc169e209 100755
--- a/run
+++ b/run
@@ -1,40 +1,93 @@
 #!/bin/bash
 RUN="docker-compose run --rm"
+
+ansi()          { echo -e "\e[${1}m${*:2}\e[0m"; }
+bold()          { ansi 1 "$@"; }
+# italic()        { ansi 3 "$@"; }
+underline()     { ansi 4 "$@"; }
+# strikethrough() { ansi 9 "$@"; }
+# red()           { ansi 31 "$@"; }
+
+name=$(basename $0)
 command=$1
 args=${@:2}
 
 case $command in
 
 sh)
-$RUN mermaid sh $args
+$RUN mermaid sh -c "npx $args" 
 ;;
 
-install)
-$RUN mermaid sh -c "npx pnpm install"
+pnpm)
+$RUN mermaid sh -c "npx pnpm $args"
 ;;
 
-test)
-$RUN mermaid sh -c "npx pnpm test"
+dev)
+$RUN --service-ports mermaid sh -c "npx pnpm run dev"
 ;;
 
-lint)
-$RUN mermaid sh -c "npx pnpm -w run lint:fix"
+docs:dev)
+$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker"
+;;
+
+cypress)
+$RUN cypress $args
 ;;
 
 help)
+
+# Alignment of help message must be as it is, it will be nice looking when printed
+usage=$(
 cat <
Date: Sat, 8 Jul 2023 10:49:34 +0900
Subject: [PATCH 036/193] docs(katex): version set to MERMAID_RELEASE_VERSION

---
 docs/config/math.md                      | 2 +-
 packages/mermaid/src/docs/config/math.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/config/math.md b/docs/config/math.md
index 731ebe690..049c55730 100644
--- a/docs/config/math.md
+++ b/docs/config/math.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).
 
-# Math Configuration (v10.3+)
+# Math Configuration (v\+)
 
 Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 
diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md
index 868e58c5f..d72320040 100644
--- a/packages/mermaid/src/docs/config/math.md
+++ b/packages/mermaid/src/docs/config/math.md
@@ -1,4 +1,4 @@
-# Math Configuration (v10.3+)
+# Math Configuration (v+)
 
 Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 

From 67cbdb41f770a2035d2ded96c0f6094c661ef09b Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 8 Jul 2023 11:04:35 +0900
Subject: [PATCH 037/193] fix(katex): resolved legacyMathML config issues from
 previous merge

---
 packages/mermaid/src/config.type.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 9be24e030..f7ff8b272 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -122,6 +122,13 @@ export interface MermaidConfig {
    *
    */
   secure?: string[];
+  /**
+   * This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
+   * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
+   * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
+   * fall back to legacy rendering for KaTeX.
+   */
+  legacyMathML?: boolean;
   /**
    * This option controls if the generated ids of nodes in the SVG are
    * generated randomly or based on a seed.

From 22a7234b54e63939bb7ea35654d3a6172d506fce Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 8 Jul 2023 11:10:59 +0900
Subject: [PATCH 038/193] chore(katex): generated types

---
 packages/mermaid/src/config.type.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index f7ff8b272..335e33b19 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -127,6 +127,7 @@ export interface MermaidConfig {
    * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
    * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
    * fall back to legacy rendering for KaTeX.
+   *
    */
   legacyMathML?: boolean;
   /**

From 6518e1300f3b92fe4e1a00065f601fc222f99122 Mon Sep 17 00:00:00 2001
From: Nicolas Newman 
Date: Sat, 8 Jul 2023 11:39:37 +0900
Subject: [PATCH 039/193] Update sequence.html

---
 demos/sequence.html | 125 ++++++++++++++++++++++----------------------
 1 file changed, 63 insertions(+), 62 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index 784dce322..e2b7b6d0e 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -16,50 +16,50 @@
   
     
    Sequence diagram demos
    
     
    -      sequenceDiagram
-        accTitle: test the accTitle
-        accDescr: Test a description
+    sequenceDiagram
+      accTitle: test the accTitle
+      accDescr: Test a description
 
-        participant Alice
-        participant Bob
-        participant John as John
    Second Line
-        autonumber 10 10
-        rect rgb(200, 220, 100)
-        rect rgb(200, 255, 200)
+      participant Alice
+      participant Bob
+      participant John as John
    Second Line
+      autonumber 10 10
+      rect rgb(200, 220, 100)
+      rect rgb(200, 255, 200)
 
-        Alice ->> Bob: Hello Bob, how are you?
-        Bob-->>John: How about you John?
-        end
+      Alice ->> Bob: Hello Bob, how are you?
+      Bob-->>John: How about you John?
+      end
 
-        Bob--x Alice: I am good thanks!
-        Bob-x John: I am good thanks!
-        Note right of John: John thinks a long
    long time, so long
    that the text does
    not fit on a row.
+      Bob--x Alice: I am good thanks!
+      Bob-x John: I am good thanks!
+      Note right of John: John thinks a long
    long time, so long
    that the text does
    not fit on a row.
 
-        Bob-->Alice: Checking with John...
-        Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-        Bob-x John: Hey John - we're still waiting to know
    how you're doing
-        Note over John:nowrap: John's trying hard not to break his train of thought.
-        Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-        Note over John: After a few more moments, John
    finally snaps out of it.
-        end
+      Bob-->Alice: Checking with John...
+      Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+      Bob-x John: Hey John - we're still waiting to know
    how you're doing
+      Note over John:nowrap: John's trying hard not to break his train of thought.
+      Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+      Note over John: After a few more moments, John
    finally snaps out of it.
+      end
 
-        autonumber off
-        alt either this
-        Alice->>+John: Yes
-        John-->>-Alice: OK
-        else or this
-        autonumber
-        Alice->>John: No
-        else or this will happen
-        Alice->John: Maybe
-        end
-        autonumber 200
-        par this happens in parallel
-        Alice -->> Bob: Parallel message 1
-        and
-        Alice -->> John: Parallel message 2
-        end
-    
    
+      autonumber off
+      alt either this
+      Alice->>+John: Yes
+      John-->>-Alice: OK
+      else or this
+      autonumber
+      Alice->>John: No
+      else or this will happen
+      Alice->John: Maybe
+      end
+      autonumber 200
+      par this happens in parallel
+      Alice -->> Bob: Parallel message 1
+      and
+      Alice -->> John: Parallel message 2
+      end
+  
    
     
    
     
         sequenceDiagram
@@ -100,32 +100,32 @@
     
    
 
     
    -      sequenceDiagram
-      participant 1 as multiline
    using #lt;br#gt;
-      participant 2 as multiline
    using #lt;br/#gt;
-      participant 3 as multiline
    using #lt;br /#gt;
-      participant 4 as multiline
    using #lt;br /#gt;
-      1->>2: multiline
    using #lt;br#gt;
-      note right of 2: multiline
    using #lt;br#gt;
-      2->>3: multiline
    using #lt;br/#gt;
-      note right of 3: multiline
    using #lt;br/#gt;
-      3->>4: multiline
    using #lt;br /#gt;
-      note right of 4: multiline
    using #lt;br /#gt;
-      4->>1: multiline
    using #lt;br /#gt;
-      note right of 1: multiline
    using #lt;br /#gt;
-      
    
+    sequenceDiagram
+    participant 1 as multiline
    using #lt;br#gt;
+    participant 2 as multiline
    using #lt;br/#gt;
+    participant 3 as multiline
    using #lt;br /#gt;
+    participant 4 as multiline
    using #lt;br /#gt;
+    1->>2: multiline
    using #lt;br#gt;
+    note right of 2: multiline
    using #lt;br#gt;
+    2->>3: multiline
    using #lt;br/#gt;
+    note right of 3: multiline
    using #lt;br/#gt;
+    3->>4: multiline
    using #lt;br /#gt;
+    note right of 4: multiline
    using #lt;br /#gt;
+    4->>1: multiline
    using #lt;br /#gt;
+    note right of 1: multiline
    using #lt;br /#gt;
+    
    
     
    
 
     
    -      sequenceDiagram
-      autonumber
-      Alice->>John: Hello John,
    how are you?
-      autonumber 50 10
-      Alice->>John: John,
    can you hear me?
-      John-->>Alice: Hi Alice,
    I can hear you!
-      autonumber off
-      John-->>Alice: I feel great!
-      
    
+    sequenceDiagram
+    autonumber
+    Alice->>John: Hello John,
    how are you?
+    autonumber 50 10
+    Alice->>John: John,
    can you hear me?
+    John-->>Alice: Hi Alice,
    I can hear you!
+    autonumber off
+    John-->>Alice: I feel great!
+    
    
     
    
 
     
    @@ -143,6 +143,7 @@
         
    
     
    
+    
     
           sequenceDiagram
       participant Alice

From c2f60568cfb9f2ff29c158ba72136a1b2ad85332 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Sat, 8 Jul 2023 11:49:41 +0900
Subject: [PATCH 040/193] chore(katex): lint-fix

---
 demos/sequence.html                 |  2 +-
 packages/mermaid/src/config.type.ts | 48 ++++++++++++++---------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index e2b7b6d0e..e76a217f9 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -143,7 +143,7 @@
         
    
     
    
-    
+
     
           sequenceDiagram
       participant Alice
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 335e33b19..78a7eff58 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -8,7 +8,7 @@
 /**
  * Configuration options to pass to the `dompurify` library.
  */
-export type DOMPurifyConfiguration = import('dompurify').Config;
+export type DOMPurifyConfiguration = import("dompurify").Config;
 /**
  * JavaScript function that returns a `FontConfig`.
  *
@@ -39,7 +39,7 @@ export type FontCalculator = () => Partial;
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "SankeyLinkColor".
  */
-export type SankeyLinkColor = 'source' | 'target' | 'gradient';
+export type SankeyLinkColor = "source" | "target" | "gradient";
 /**
  * Controls the alignment of the Sankey diagrams.
  *
@@ -49,7 +49,7 @@ export type SankeyLinkColor = 'source' | 'target' | 'gradient';
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "SankeyNodeAlignment".
  */
-export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
+export type SankeyNodeAlignment = "left" | "right" | "center" | "justify";
 /**
  * The font size to use
  */
@@ -61,7 +61,7 @@ export interface MermaidConfig {
    * You may also use `themeCSS` to override this value.
    *
    */
-  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
+  theme?: string | "default" | "forest" | "dark" | "neutral" | "null";
   themeVariables?: any;
   themeCSS?: string;
   /**
@@ -88,12 +88,12 @@ export interface MermaidConfig {
     | 0
     | 2
     | 1
-    | 'trace'
-    | 'debug'
-    | 'info'
-    | 'warn'
-    | 'error'
-    | 'fatal'
+    | "trace"
+    | "debug"
+    | "info"
+    | "warn"
+    | "error"
+    | "fatal"
     | 3
     | 4
     | 5
@@ -101,7 +101,7 @@ export interface MermaidConfig {
   /**
    * Level of trust for parsed diagram
    */
-  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
+  securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined;
   /**
    * Dictates whether mermaid starts on Page load
    */
@@ -697,11 +697,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
   /**
    * position of x-axis labels
    */
-  xAxisPosition?: 'top' | 'bottom';
+  xAxisPosition?: "top" | "bottom";
   /**
    * position of y-axis labels
    */
-  yAxisPosition?: 'left' | 'right';
+  yAxisPosition?: "left" | "right";
   /**
    * stroke width of edges of the box that are inside the quadrant
    */
@@ -731,7 +731,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
   /**
    * Directional bias for layout of entities
    */
-  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
+  layoutDirection?: string | "TB" | "BT" | "LR" | "RL";
   /**
    * The minimum width of an entity box. Expressed in pixels.
    */
@@ -796,7 +796,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
@@ -820,7 +820,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
   nodeSpacing?: number;
   rankSpacing?: number;
   /**
@@ -880,7 +880,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: string | "left" | "center" | "right";
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -959,7 +959,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: string | "left" | "center" | "right";
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -1070,7 +1070,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * Controls the display mode.
    *
    */
-  displayMode?: string | 'compact';
+  displayMode?: string | "compact";
 }
 /**
  * The object containing configurations specific for sequence diagrams
@@ -1124,7 +1124,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: string | "left" | "center" | "right";
   /**
    * Mirror actors under diagram
    *
@@ -1181,7 +1181,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * This sets the text alignment of actor-attached notes
    */
-  noteAlign?: string | 'left' | 'center' | 'right';
+  noteAlign?: string | "left" | "center" | "right";
   /**
    * This sets the font size of actor messages
    */
@@ -1257,7 +1257,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Defines how mermaid renders curves for flowcharts.
    *
    */
-  curve?: string | 'basis' | 'linear' | 'cardinal';
+  curve?: string | "basis" | "linear" | "cardinal";
   /**
    * Represents the padding between the labels and the shape
    *
@@ -1269,7 +1269,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
   /**
    * Width of nodes where text is wrapped.
    *
@@ -1299,7 +1299,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
    * See .
    *
    */
-  nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
+  nodeAlignment?: "left" | "right" | "center" | "justify";
   useMaxWidth?: boolean;
 }
 /**

From c10f76580fa7919a5f259b4c8a3587697ecf124d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Sun, 9 Jul 2023 12:28:14 +0200
Subject: [PATCH 041/193] Adding some more tests

---
 .../src/diagrams/block/parser/block.spec.ts   | 188 +++++++++++++++---
 1 file changed, 156 insertions(+), 32 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 08b36c744..4713b57c0 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -28,7 +28,19 @@ describe('Sankey diagram', function () {
       `;
 
       block.parse(str);
+      // Todo: DB check that the we have two nodes and that the root block has two columns
     });
+    it('a diagram with multiple nodes', async () => {
+      const str = `block-beta
+          id1
+          id2
+          id3
+      `;
+
+      block.parse(str);
+      // Todo: DB check that the we have two nodes and that the root block has three columns
+    });
+
     it('a node with a square shape and a label', async () => {
       const str = `block-beta
           id["A label"]
@@ -43,43 +55,155 @@ describe('Sankey diagram', function () {
 
       block.parse(str);
     });
-    // it('a diagram with column statements', async () => {
-    //   const str = `block-beta
-    //       columns 1
-    //       block1["Block 1"]
-    //   `;
+    it.skip('a diagram with column statements', async () => {
+      const str = `block-beta
+          columns 1
+          block1["Block 1"]
+      `;
 
-    //   block.parse(str);
-    // });
-    // it('a diagram with block hierarchies', async () => {
-    //   const str = `block-beta
-    //     columns 1
-    //     block1[Block 1]
+      block.parse(str);
+      // Todo: DB check that the we have one block and that the root block has one column
+    });
 
-    //     block
-    //       columns 2
-    //       block2[Block 2]
-    //       block3[Block 3]
-    //     end %% End the compound block
-    //   `;
+    it.skip('blocks next to each other', async () => {
+      const str = `block-beta
+        block
+          columns 2
+          block1["Block 1"]
+          block2["Block 2"]
+        `;
 
-    //   block.parse(str);
-    // });
-    // it('a diagram with differernt column values in different blocks', async () => {
-    //   const str = `block-beta
-    //     columns 1
-    //     block1[Block 1]
+      block.parse(str);
 
-    //     block
-    //       columns 2
-    //       block2[Block 2]
-    //       block3[Block 3]
-    //     end %% End the compound block
-    //   `;
+      // Todo: DB check that the we have two blocks and that the root block has two columns
+    });
 
-    //   block.parse(str);
+    it.skip('blocks on top of each other', async () => {
+      const str = `block-beta
+        block
+          columns 1
+          block1["Block 1"]
+          block2["Block 2"]
+        `;
 
-    //   // Todo check that the different blocks have different column values
-    // });
+      block.parse(str);
+
+      // Todo: DB check that the we have two blocks and that the root block has one column
+    });
+
+    it.skip('compound blocks', async () => {
+      const str = `block
+          block
+            columns 2
+            block2["Block 2"]
+            block3["Block 3"]
+          end %% End the compound block
+        `;
+
+      block.parse(str);
+    });
+    it.skip('compound blocks with title', async () => {
+      const str = `block
+          block compoundBlock["Compound block"]
+            columns 1
+            block2["Block 1"]
+          end
+        `;
+
+      block.parse(str);
+    });
+    it.skip('blocks mixed with compound blocks', async () => {
+      const str = `block
+          columns 1
+          block1["Block 1"]
+
+          block
+            columns 2
+            block2["Block 2"]
+            block3["Block 3"]
+          end %% End the compound block
+        `;
+
+      block.parse(str);
+    });
+
+    it.skip('Arrow blocks', async () => {
+      const str = `block
+        columns 3
+        block1["Block 1"]
+        blockArrow
+        block2["Block 2"]`;
+
+      block.parse(str);
+    });
+    it.skip('Arrow blocks with multiple points', async () => {
+      const str = `block-beta
+        columns 1
+        A
+        blockArrow(1,3)
+        block
+          columns 3
+            B
+            C
+            D
+        end`;
+
+      block.parse(str);
+    });
+    it.skip('blocks with different widths', async () => {
+      const str = `block-beta
+        columns 3
+        one["One Slot"]
+        two["Two slots"]:2
+        `;
+
+      block.parse(str);
+    });
+    it.skip('empty blocks', async () => {
+      const str = `block-beta
+        columns 3
+        space
+        middle["In the middle"]
+        `;
+
+      block.parse(str);
+    });
+    it.skip('classDef statements applied to a block', async () => {
+      const str = `block-beta
+        classDef black color:#ffffff, fill:#000000;
+
+        mc["Memcache"]:::black
+        `;
+
+      block.parse(str);
+    });
+    it.skip('classDef statements applied to a block with a width', async () => {
+      const str = `block-beta
+        classDef black color:#ffffff, fill:#000000;
+        columns 2
+        mc["Memcache"]:2::black
+        `;
+
+      block.parse(str);
+    });
+
+    it.skip('classDef statements', async () => {
+      const str = `block-beta
+        classDef black color:#ffffff, fill:#000000;
+
+        block DataServices["Data Services"]
+          columns H
+          block Relational
+            mssql["Microsoft SQL
    Server"]
+          end
+          block Tabular
+            columns 3
+            gds["Google Data Store"]:1
+            mc["Memcache"]:2:::black
+          end
+        end`;
+
+      block.parse(str);
+    });
   });
 });

From d165e8a642bf11426f99adaab20a770d2dcca62f Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Mon, 10 Jul 2023 23:33:11 +0300
Subject: [PATCH 042/193] Started block diag db development

---
 demos/block.html                              | 93 +++++++++++++++++++
 demos/index.html                              |  3 +
 .../mermaid/src/diagrams/block/blockDB.ts     | 46 ++++++++-
 .../src/diagrams/block/blockDiagram.ts        |  8 +-
 .../src/diagrams/block/blockRenderer.ts       | 22 ++---
 .../mermaid/src/diagrams/block/blockTypes.ts  |  6 --
 .../src/diagrams/block/parser/block.jison     | 46 ++++-----
 .../src/diagrams/block/parser/block.spec.ts   |  2 +-
 8 files changed, 174 insertions(+), 52 deletions(-)
 create mode 100644 demos/block.html

diff --git a/demos/block.html b/demos/block.html
new file mode 100644
index 000000000..141d13970
--- /dev/null
+++ b/demos/block.html
@@ -0,0 +1,93 @@
+
+
+  
+    
+    
+    States Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
    Block diagram demos
    
+    
    TCI IP
    
+    
    +      block-beta
+
+      block TCP_IP["TCP/IP"]
+    
    
+
+
+
+    
+  
+
diff --git a/demos/index.html b/demos/index.html
index 24c4fbf3b..113d67433 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -78,6 +78,9 @@
       
  • 
         
    Sankey
    
       
    • 
+      
  • 
+        
    Layered Blocks
    
+      
    • 
     
   
 
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index db216160a..de332e19b 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -1,4 +1,6 @@
-import type { BlockDB } from './blockTypes.js';
+// import type { BlockDB } from './blockTypes.js';
+import type { DiagramDB } from '../../diagram-api/types.js';
+import { BlockConfig } from './blockTypes.js';
 
 import * as configApi from '../../config.js';
 // import common from '../common/common.js';
@@ -12,20 +14,54 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 
-type Block = {
+export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0?
+
+interface Block {
   ID: string;
-};
+  label?: string;
+  parent?: Block;
+  children?: Block[];
+  columns: number | TBlockColumnsDefaultValue;
+}
+
+interface Link {
+  source: Block;
+  target: Block;
+}
 
 let blocks: Block[] = [];
+let links: Link[] = [];
 
 const clear = (): void => {
   blocks = [];
   commonClear();
 };
 
+type IAddBlock = (block: Block) => Block;
+const addBlock: IAddBlock = (block: Block): Block => {
+  blocks.push(block);
+  return block;
+};
+
+type IAddLink = (link: Link) => Link;
+const addLink: IAddLink = (link: Link): Link => {
+  links.push(link);
+  return link;
+};
+
+export interface BlockDB extends DiagramDB {
+  clear: () => void;
+  getConfig: () => BlockConfig | undefined;
+  addBlock: IAddBlock;
+  addLink: IAddLink;
+  getLogger: () => Console;
+}
+
 const db: BlockDB = {
   getConfig: () => configApi.getConfig().block,
-
+  addBlock: addBlock,
+  addLink: addLink,
+  getLogger: () => console, // TODO: remove
   // getAccTitle,
   // setAccTitle,
   // getAccDescription,
@@ -35,4 +71,4 @@ const db: BlockDB = {
   clear,
 };
 
-export default db;
\ No newline at end of file
+export default db;
diff --git a/packages/mermaid/src/diagrams/block/blockDiagram.ts b/packages/mermaid/src/diagrams/block/blockDiagram.ts
index 667783f49..e098360f4 100644
--- a/packages/mermaid/src/diagrams/block/blockDiagram.ts
+++ b/packages/mermaid/src/diagrams/block/blockDiagram.ts
@@ -3,10 +3,12 @@ import { DiagramDefinition } from '../../diagram-api/types.js';
 import parser from './parser/block.jison';
 import db from './blockDB.js';
 import renderer from './blockRenderer.js';
-import { prepareTextForParsing } from './blockUtils.js';
 
-const originalParse = parser.parse.bind(parser);
-parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+// TODO: do we need this?
+// import { prepareTextForParsing } from './blockUtils.js';
+// const originalParse = parser.parse.bind(parser);
+// parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+// parser.yy.getLogger = () => console;
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index cfa9cc522..8896b272d 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -11,11 +11,6 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
 
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-  // TODO:
-  // This code repeats for every diagram
-  // Figure out what is happening there, probably it should be separated
-  // The main thing is svg object that is a d3 wrapper for svg operations
-  //
   const { securityLevel } = configApi.getConfig();
   let sandboxElement: any;
   if (securityLevel === 'sandbox') {
@@ -25,28 +20,27 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     securityLevel === 'sandbox'
       ? d3select(sandboxElement.nodes()[0].contentDocument.body)
       : d3select('body');
+
   // @ts-ignore TODO root.select is not callable
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
   // Establish svg dimensions and get width and height
-  //
-
-  // FIX: using max width prevents height from being set, is it intended?
-  // to add height directly one can use `svg.attr('height', height)`
-  //
-  // @ts-ignore TODO: svg type vs selection mismatch
+  //  
+  const height = 400;
+  const width = 600;
+  const useMaxWidth = false;
   configureSvgSize(svg, height, width, useMaxWidth);
 
   // Prepare data for construction based on diagObj.db
   // This must be a mutable object with `nodes` and `links` properties:
   //
   // @ts-ignore TODO: db type
-  const graph = diagObj.db.getGraph();
+  // const graph = diagObj.db.getGraph();
 
-  const nodeWidth = 10;
+  // const nodeWidth = 10;
 
   // Get color scheme for the graph
-  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
+  // const colorScheme = d3scaleOrdinal(d3schemeTableau10);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 014e6b7cb..c190c5779 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -1,11 +1,5 @@
-import type { DiagramDB } from '../../diagram-api/types.js';
 import type { BaseDiagramConfig } from '../../config.type.js';
 
 export interface BlockConfig extends BaseDiagramConfig {
   padding?: number;
 }
-
-export interface BlockDB extends DiagramDB {
-  clear: () => void;
-  getConfig: () => BlockConfig | undefined;
-}
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index ba58a6097..687085939 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -33,10 +33,10 @@ CRLF \u000D\u000A
 [\n]+ {yy.getLogger().info('_', yytext);                 /* skip all whitespace */   }
 // [\n]                return 'NL';
 ({CRLF}|{LF})                     { return 'NL' }
-["][`]          { this.begin("md_string");}
+["][`]          { this.pushState("md_string");}
 [^`"]+        { return "MD_STR";}
 [`]["]          { this.popState();}
-["]                     this.begin("string");
+["]                     this.pushState("string");
 ["]             this.popState();
 [^"]*           return "STR";
 "style"               return 'STYLE';
@@ -45,11 +45,11 @@ CRLF \u000D\u000A
 "interpolate"         return 'INTERPOLATE';
 "classDef"            return 'CLASSDEF';
 "class"               return 'CLASS';
-accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+accTitle\s*":"\s*                                               { this.pushState("acc_title");return 'acc_title'; }
 (?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
-accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+accDescr\s*":"\s*                                               { this.pushState("acc_descr");return 'acc_descr'; }
 (?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
-accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+accDescr\s*"{"\s*                                { this.pushState("acc_descr_multiline");}
 [\}]                       { this.popState(); }
 [^\}]*                     return "acc_descr_multiline_value";
 "subgraph"            return 'subgraph';
@@ -60,32 +60,32 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 .*direction\s+LR[^\n]*                                      return 'direction_lr';
 
 // Start of nodes with shapes and description
-"-)"                   { yy.getLogger().info('Lex: -)'); this.begin('NODE');return 'NODE_D START'; }
-"(-"                   { yy.getLogger().info('Lex: (-'); this.begin('NODE');return 'NODE_DSTART';           }
-"))"                   { yy.getLogger().info('Lex: ))'); this.begin('NODE');return 'NODE_DSTART';  }
-")"                    { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART';      }
-"(("                   { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
-"{{"                   { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
-"("                    { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
-"["                    { yy.getLogger().info('Lex: ['); this.begin('NODE');return 'NODE_DSTART'; }
-"(["                   { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; }
-"[["                   { this.begin('NODE');return 'NODE_DSTART'; }
-"[|"                   { this.begin('NODE');return 'NODE_DSTART'; }
-"[("                   { this.begin('NODE');return 'NODE_DSTART'; }
-"((("                  { this.begin('NODE');return 'NODE_DSTART'; }
-")))"                  { this.begin('NODE');return 'NODE_DSTART'; }
-"[/"                   { this.begin('NODE');return 'NODE_DSTART'; }
-"[\\"                  { this.begin('NODE');return 'NODE_DSTART'; }
+"-)"                   { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_D START'; }
+"(-"                   { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART';           }
+"))"                   { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
+")"                    { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART';      }
+"(("                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"{{"                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"("                    { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"["                    { yy.getLogger().info('Lex: ['); this.pushState('NODE');return 'NODE_DSTART'; }
+"(["                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"[["                   { this.pushState('NODE');return 'NODE_DSTART'; }
+"[|"                   { this.pushState('NODE');return 'NODE_DSTART'; }
+"[("                   { this.pushState('NODE');return 'NODE_DSTART'; }
+"((("                  { this.pushState('NODE');return 'NODE_DSTART'; }
+")))"                  { this.pushState('NODE');return 'NODE_DSTART'; }
+"[/"                   { this.pushState('NODE');return 'NODE_DSTART'; }
+"[\\"                  { this.pushState('NODE');return 'NODE_DSTART'; }
 
 
 [^\(\[\n\-\)\{\}]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
 <>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
 
 // Handling of strings in node
-["][`]           { this.begin("md_string");}
+["][`]           { this.pushState("md_string");}
 [^`"]+      { return "NODE_DESCR";}
 [`]["]      { this.popState();}
-["]              { yy.getLogger().info('Lex: Starting string');this.begin("string");}
+["]              { yy.getLogger().info('Lex: Starting string');this.pushState("string");}
 [^"]+          { yy.getLogger().info('Lex: NODE_DESCR:', yytext); return "NODE_DESCR";}
 ["]            {this.popState();}
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 4713b57c0..2c575aeba 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -6,7 +6,7 @@ import { prepareTextForParsing } from '../blockUtils.js';
 import * as fs from 'fs';
 import * as path from 'path';
 
-describe('Sankey diagram', function () {
+describe('Block diagram', function () {
   describe('when parsing an block diagram graph it should handle > ', function () {
     beforeEach(function () {
       block.parser.yy = db;

From e251baa61c50d429f1a2d17ba67f04f8bfebf5f0 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov 
Date: Tue, 11 Jul 2023 02:51:10 +0300
Subject: [PATCH 043/193] Started layout and rendering

---
 demos/block.html                              |  10 +-
 .../mermaid/src/diagrams/block/blockDB.ts     |  37 ++++--
 .../src/diagrams/block/blockRenderer.ts       | 115 +++++++++++++++++-
 3 files changed, 150 insertions(+), 12 deletions(-)

diff --git a/demos/block.html b/demos/block.html
index 141d13970..3e8769ecc 100644
--- a/demos/block.html
+++ b/demos/block.html
@@ -18,14 +18,18 @@
     
           block-beta
 
-      block TCP_IP["TCP/IP"]
     
    
- Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]    
    
     
     flowchart RL
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index a0c97fc0f..bec5c33c3 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -1,6 +1,6 @@
 // import type { BlockDB } from './blockTypes.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
-import { BlockConfig } from './blockTypes.js';
+import { BlockConfig, BlockType, Block, Link } from './blockTypes.js';
 
 import * as configApi from '../../config.js';
 // import common from '../common/common.js';
@@ -13,47 +13,78 @@ import {
   // getDiagramTitle,
   clear as commonClear,
 } from '../../commonDb.js';
+import { log } from '../../logger.js';
 
 // export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0?
 
+// Initialize the node database for simple lookups
+let nodeDatabase: Record = {};
+const blockDatabase: Record = {};
+
+// Function to get a node by its ID
+export const getNodeById = (id: string): Node | undefined => {
+  return nodeDatabase[id];
+};
+
 // TODO: Convert to generic TreeNode type? Convert to class?
-export interface Block {
-  ID: string;
-  label?: string;
-  parent?: Block;
-  children?: Block[];
-  columns?: number; // | TBlockColumnsDefaultValue;
-}
 
-export interface Link {
-  source: Block;
-  target: Block;
-}
-
-let rootBlocks: Block[] = [];
+let rootBlock = { ID: 'root', children: [] as Block[], columns: -1 };
 let blocks: Block[] = [];
 const links: Link[] = [];
-let rootBlock = { ID: 'root', children: [], columns: -1 } as Block;
-let currentBlock: Block | undefined;
+// let rootBlock = { ID: 'root', children: [], columns: -1 } as Block;
+let currentBlock = rootBlock;
 
 const clear = (): void => {
-  rootBlocks = [];
-  blocks = [];
+  log.info('Clear called');
+  // rootBlocks = [];
+  blocks = [] as Block[];
   commonClear();
   rootBlock = { ID: 'root', children: [], columns: -1 };
   currentBlock = rootBlock;
+  nodeDatabase = {};
+  blockDatabase[rootBlock.ID] = rootBlock;
 };
 
-type IAddBlock = (block: Block) => Block;
-const addBlock: IAddBlock = (block: Block, parent?: Block): Block => {
-  if (parent) {
-    parent.children ??= [];
-    parent.children.push(block);
-  } else {
-    rootBlocks.push(block);
+// type IAddBlock = (block: Block) => Block;
+// const addBlock: IAddBlock = (block: Block, parent?: Block): Block => {
+//   log.info('addBlock', block, parent);
+//   if (parent) {
+//     parent.children ??= [];
+//     parent.children.push(block);
+//   } else {
+//     rootBlock.children.push(block);
+//   }
+//   blocks.push(block);
+//   return block;
+// };
+
+type ITypeStr2Type = (typeStr: string) => BlockType;
+export function typeStr2Type(typeStr: string) {
+  // TODO: add all types
+  switch (typeStr) {
+    case '[]':
+      return 'square';
+    case '()':
+      return 'round';
+    default:
+      return 'square';
   }
-  blocks.push(block);
-  return block;
+}
+
+type IAddBlock = (id: string, label: string, type: BlockType) => Block;
+// Function to add a node to the database
+export const addBlock = (id: string, _label?: string, type?: BlockType) => {
+  log.info('addNode called:', id, _label, type);
+  const label = _label || id;
+  const node: Block = {
+    ID: id,
+    label,
+    type: type || 'square',
+  };
+  blockDatabase[node.ID] = node;
+  currentBlock.children ??= [];
+  currentBlock.children.push(node);
+  return node;
 };
 
 type IAddLink = (link: Link) => Link;
@@ -84,16 +115,21 @@ const getBlock = (id: string, blocks: Block[]): Block | undefined => {
 
 type IGetColumns = (blockID: string) => number;
 const getColumns = (blockID: string): number => {
-  const blocks = [rootBlock];
-  const block = getBlock(blockID, blocks);
+  const block = blockDatabase[blockID];
   if (!block) {
     return -1;
   }
-  return block.columns || -1;
+  if (block.columns) {
+    return block.columns;
+  }
+  if (!block.children) {
+    return -1;
+  }
+  return block.children.length;
 };
 
 type IGetBlocks = () => Block[];
-const getBlocks: IGetBlocks = () => blocks;
+const getBlocks: IGetBlocks = () => rootBlock.children || [];
 
 type IGetLinks = () => Link[];
 const getLinks: IGetLinks = () => links;
@@ -111,12 +147,14 @@ export interface BlockDB extends DiagramDB {
   getLinks: IGetLinks;
   setColumns: ISetColumns;
   getColumns: IGetColumns;
+  typeStr2Type: ITypeStr2Type;
 }
 
 const db: BlockDB = {
   getConfig: () => configApi.getConfig().block,
   addBlock: addBlock,
   addLink: addLink,
+  typeStr2Type: typeStr2Type,
   getLogger, // TODO: remove
   getBlocks,
   getLinks,
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index c190c5779..b373d6b9c 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -3,3 +3,36 @@ import type { BaseDiagramConfig } from '../../config.type.js';
 export interface BlockConfig extends BaseDiagramConfig {
   padding?: number;
 }
+
+export type BlockType =
+  | 'round'
+  | 'square'
+  | 'diamond'
+  | 'hexagon'
+  | 'odd'
+  | 'lean_right'
+  | 'lean_left'
+  | 'trapezoid'
+  | 'inv_trapezoid'
+  | 'odd_right'
+  | 'circle'
+  | 'ellipse'
+  | 'stadium'
+  | 'subroutine'
+  | 'cylinder'
+  | 'group'
+  | 'doublecircle';
+
+export interface Block {
+  ID: string;
+  label?: string;
+  parent?: Block;
+  type?: BlockType;
+  children?: Block[];
+  columns?: number; // | TBlockColumnsDefaultValue;
+}
+
+export interface Link {
+  source: Block;
+  target: Block;
+}
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index afd645d96..9422d8ee3 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -64,7 +64,7 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 
 // Start of nodes with shapes and description
 "-)"                   { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_D START'; }
-"(-"                   { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART';           }
+"(-"                   { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
 "))"                   { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
 ")"                    { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART';      }
 "(("                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
@@ -177,8 +177,8 @@ statement
 	;
 
 nodeStatement
-  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) ');}
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1);}
+  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); yy.addBlock($1.id);}
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); yy.addBlock($1.id, $1.label, yy.typeStr2Type($1)); }
   ;
 
 columnsStatement
@@ -192,16 +192,16 @@ blockStatement
 
 node
   : NODE_ID
-  { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); }
+  { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
   |NODE_ID nodeShapeNLabel
-    { yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2); }
+    { yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2); $$ = { id: $1, label: $2.label, typeStr: $2.typeStr };}
   // |nodeShapeNLabel seperator
   // { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); }
   ;
 
 nodeShapeNLabel
   :   NODE_DSTART STR NODE_DEND
-	      { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { type: $1 + $3, descr: $2 }; }
+	      { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; }
   ;
 
 %%
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 75cd76b82..ded6db468 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -3,8 +3,7 @@ import block from './block.jison';
 import db from '../blockDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
 import { prepareTextForParsing } from '../blockUtils.js';
-import * as fs from 'fs';
-import * as path from 'path';
+import { setConfig } from '../../../config.js';
 
 describe('Block diagram', function () {
   describe('when parsing an block diagram graph it should handle > ', function () {
@@ -20,6 +19,22 @@ describe('Block diagram', function () {
       `;
 
       block.parse(str);
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
+      expect(blocks[0].ID).toBe('id');
+      expect(blocks[0].label).toBe('id');
+    });
+    it('a node with a square shape and a label', async () => {
+      const str = `block-beta
+          id["A label"]
+          `;
+
+      block.parse(str);
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
+      expect(blocks[0].ID).toBe('id');
+      expect(blocks[0].label).toBe('A label');
+      expect(blocks[0].type).toBe('square');
     });
     it('a diagram with multiple nodes', async () => {
       const str = `block-beta
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
index 3852c4f92..8d0aec789 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
@@ -1,7 +1,7 @@
 import flowDb from '../flowDb.js';
 import flow from './flow.jison';
-import { setConfig } from '../../../config.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',

From aa7f5a83879df60ff2316149ae80f179cac20d97 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 1 Sep 2023 14:06:13 +0200
Subject: [PATCH 046/193] before refactoring

---
 .../mermaid/src/diagrams/block/blockDB.ts     | 65 +++++++++++-----
 .../mermaid/src/diagrams/block/blockTypes.ts  |  7 +-
 .../src/diagrams/block/parser/block.jison     | 15 ++--
 .../src/diagrams/block/parser/block.spec.ts   | 76 ++++++++++++++++++-
 4 files changed, 132 insertions(+), 31 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index bec5c33c3..2ef204430 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -21,17 +21,19 @@ import { log } from '../../logger.js';
 let nodeDatabase: Record = {};
 const blockDatabase: Record = {};
 
-// Function to get a node by its ID
-export const getNodeById = (id: string): Node | undefined => {
-  return nodeDatabase[id];
+// Function to get a node by its id
+type IGetNodeById = (id: string) => Block | undefined;
+export const getNodeById = (id: string): Block | undefined => {
+  console.log(id, nodeDatabase);
+  return blockDatabase[id];
 };
 
 // TODO: Convert to generic TreeNode type? Convert to class?
 
-let rootBlock = { ID: 'root', children: [] as Block[], columns: -1 };
+let rootBlock = { id: 'root', children: [] as Block[], columns: -1 };
 let blocks: Block[] = [];
 const links: Link[] = [];
-// let rootBlock = { ID: 'root', children: [], columns: -1 } as Block;
+// let rootBlock = { id: 'root', children: [], columns: -1 } as Block;
 let currentBlock = rootBlock;
 
 const clear = (): void => {
@@ -39,10 +41,10 @@ const clear = (): void => {
   // rootBlocks = [];
   blocks = [] as Block[];
   commonClear();
-  rootBlock = { ID: 'root', children: [], columns: -1 };
+  rootBlock = { id: 'root', children: [], columns: -1 };
   currentBlock = rootBlock;
   nodeDatabase = {};
-  blockDatabase[rootBlock.ID] = rootBlock;
+  blockDatabase[rootBlock.id] = rootBlock;
 };
 
 // type IAddBlock = (block: Block) => Block;
@@ -71,22 +73,39 @@ export function typeStr2Type(typeStr: string) {
   }
 }
 
-type IAddBlock = (id: string, label: string, type: BlockType) => Block;
+let cnt = 0;
+export const generateId = () => {
+  cnt++;
+  return 'id-' + Math.random().toString(36).substr(2, 12) + '-' + cnt;
+};
+
+type IAddBlock = (_id: string, label: string, type: BlockType) => Block;
 // Function to add a node to the database
-export const addBlock = (id: string, _label?: string, type?: BlockType) => {
-  log.info('addNode called:', id, _label, type);
+export const addBlock = (_id: string, _label?: string, type?: BlockType) => {
+  let id = _id;
+  if (!_id) {
+    id = generateId();
+  }
   const label = _label || id;
   const node: Block = {
-    ID: id,
+    id: id,
     label,
     type: type || 'square',
+    children: [],
   };
-  blockDatabase[node.ID] = node;
-  currentBlock.children ??= [];
-  currentBlock.children.push(node);
+  blockDatabase[node.id] = node;
+  // currentBlock.children ??= [];
+  // currentBlock.children.push(node);
+  // console.log('currentBlock', currentBlock.children, nodeDatabase);
+  console.log('addNode called:', id, label, type, node);
   return node;
 };
 
+type ISetHierarchy = (block: Block[]) => void;
+const setHierarchy = (block: Block[]): void => {
+  blocks = block;
+};
+
 type IAddLink = (link: Link) => Link;
 const addLink: IAddLink = (link: Link): Link => {
   links.push(link);
@@ -101,7 +120,7 @@ const setColumns = (columnsStr: string): void => {
 
 const getBlock = (id: string, blocks: Block[]): Block | undefined => {
   for (const block of blocks) {
-    if (block.ID === id) {
+    if (block.id === id) {
       return block;
     }
     if (block.children) {
@@ -113,9 +132,9 @@ const getBlock = (id: string, blocks: Block[]): Block | undefined => {
   }
 };
 
-type IGetColumns = (blockID: string) => number;
-const getColumns = (blockID: string): number => {
-  const block = blockDatabase[blockID];
+type IGetColumns = (blockid: string) => number;
+const getColumns = (blockid: string): number => {
+  const block = blockDatabase[blockid];
   if (!block) {
     return -1;
   }
@@ -129,7 +148,11 @@ const getColumns = (blockID: string): number => {
 };
 
 type IGetBlocks = () => Block[];
-const getBlocks: IGetBlocks = () => rootBlock.children || [];
+const getBlocks: IGetBlocks = () => {
+  // console.log('Block in test', rootBlock.children || []);
+  console.log('Block in test', blocks, blocks[0].id);
+  return blocks || [];
+};
 
 type IGetLinks = () => Link[];
 const getLinks: IGetLinks = () => links;
@@ -148,6 +171,8 @@ export interface BlockDB extends DiagramDB {
   setColumns: ISetColumns;
   getColumns: IGetColumns;
   typeStr2Type: ITypeStr2Type;
+  setHierarchy: ISetHierarchy;
+  getNodeById: IGetNodeById;
 }
 
 const db: BlockDB = {
@@ -158,6 +183,8 @@ const db: BlockDB = {
   getLogger, // TODO: remove
   getBlocks,
   getLinks,
+  setHierarchy,
+  getNodeById,
   // getAccTitle,
   // setAccTitle,
   // getAccDescription,
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index b373d6b9c..4afbe4351 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -21,14 +21,15 @@ export type BlockType =
   | 'subroutine'
   | 'cylinder'
   | 'group'
-  | 'doublecircle';
+  | 'doublecircle'
+  | 'composite';
 
 export interface Block {
-  ID: string;
+  id: string;
   label?: string;
   parent?: Block;
   type?: BlockType;
-  children?: Block[];
+  children: Block[];
   columns?: number; // | TBlockColumnsDefaultValue;
 }
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 9422d8ee3..309dbfdea 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -137,7 +137,9 @@ seperator
     {yy.getLogger().info('Rule: seperator (EOF) ');}
   ;
 
-start: BLOCK_DIAGRAM_KEY document EOF;
+start: BLOCK_DIAGRAM_KEY document EOF
+  {console.log('This is the hierarchy ', JSON.stringify($2, null, 2)); yy.setHierarchy($2); }
+  ;
 
 
 stop
@@ -148,9 +150,10 @@ stop
   | stop EOF {yy.getLogger().info('Stop EOF2 ');}
   ;
 
+//array of statements
 document
-	: statement { yy.getLogger().info("Rule: statement: ", $1);}
-	| statement document { yy.getLogger().info("Rule: document statement: ", $1);}
+	: statement { yy.getLogger().info("Rule: statement: ", $1); $$ = [$1]; }
+	| statement document { yy.getLogger().info("Rule: document statement: ", $1, $2); $$ = [$1].concat($2); }
 	;
 
 link
@@ -177,8 +180,8 @@ statement
 	;
 
 nodeStatement
-  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); yy.addBlock($1.id);}
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); yy.addBlock($1.id, $1.label, yy.typeStr2Type($1)); }
+  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); yy.addBlock($1.id); $$ = {id: $1.id}; }
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); yy.addBlock($1.id, $1.label, yy.typeStr2Type($1)); $$ = {id: $1.id}; }
   ;
 
 columnsStatement
@@ -186,7 +189,7 @@ columnsStatement
   ;
 
 blockStatement
-  : block document end { yy.getLogger().info('Rule: blockStatement : ', $1); }
+  : block document end { console.log('Rule: blockStatement : ', $1, $2, $3); const block = yy.addBlock(undefined, undefined, 'composite'); $$ = { id: block.id, children: $2 }; }
   ;
 
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index ded6db468..584a817b5 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -43,7 +43,14 @@ describe('Block diagram', function () {
       `;
 
       block.parse(str);
-      // Todo: DB check that the we have two nodes and that the root block has two columns
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(2);
+      expect(blocks[0].ID).toBe('id1');
+      expect(blocks[0].label).toBe('id1');
+      expect(blocks[0].type).toBe('square');
+      expect(blocks[1].ID).toBe('id2');
+      expect(blocks[1].label).toBe('id2');
+      expect(blocks[1].type).toBe('square');
     });
     it('a diagram with multiple nodes', async () => {
       const str = `block-beta
@@ -53,7 +60,17 @@ describe('Block diagram', function () {
       `;
 
       block.parse(str);
-      // Todo: DB check that the we have two nodes and that the root block has three columns
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(3);
+      expect(blocks[0].ID).toBe('id1');
+      expect(blocks[0].label).toBe('id1');
+      expect(blocks[0].type).toBe('square');
+      expect(blocks[1].ID).toBe('id2');
+      expect(blocks[1].label).toBe('id2');
+      expect(blocks[1].type).toBe('square');
+      expect(blocks[2].ID).toBe('id3');
+      expect(blocks[2].label).toBe('id3');
+      expect(blocks[2].type).toBe('square');
     });
 
     it('a node with a square shape and a label', async () => {
@@ -62,6 +79,14 @@ describe('Block diagram', function () {
           id2`;
 
       block.parse(str);
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(2);
+      expect(blocks[0].ID).toBe('id');
+      expect(blocks[0].label).toBe('A label');
+      expect(blocks[0].type).toBe('square');
+      expect(blocks[1].ID).toBe('id2');
+      expect(blocks[1].label).toBe('id2');
+      expect(blocks[1].type).toBe('square');
     });
     it('a diagram with multiple nodes with edges', async () => {
       const str = `block-beta
@@ -124,14 +149,59 @@ describe('Block diagram', function () {
       // Todo: DB check that the we have two blocks and that the root block has one column
     });
 
-    it('compound blocks', async () => {
+    it('compound blocks 2', async () => {
       const str = `block-beta
           block
             aBlock["Block"]
+            bBlock["Block"]
           end
         `;
 
       block.parse(str);
+      const blocks = db.getBlocks();
+      console.log('blocks', blocks);
+      expect(blocks.length).toBe(1);
+      expect(blocks[0].children.length).toBe(2);
+      expect(blocks[0].id).toBe('id');
+      expect(blocks[0].label).toBe('A label');
+      expect(blocks[0].type).toBe('square');
+      // expect(blocks[1].ID).toBe('id2');
+      // expect(blocks[1].label).toBe('id2');
+      // expect(blocks[1].type).toBe('square');
+    });
+    it.only('compound blocks', async () => {
+      const str = `block-beta
+          block
+            aBlock["ABlock"]
+            block
+              bBlock["BBlock"]
+            end
+          end
+        `;
+
+      block.parse(str);
+      const blocks = db.getBlocks();
+
+      const aBlockPos = blocks[0].children[0];
+      const bBlockPos = blocks[0].children[1].children[0];
+
+      const root = db.getNodeById(blocks[0].id);
+      expect(blocks.length).toBe(1);
+      expect(blocks[0].id).not.toBe(undefined);
+      expect(root?.label).toBe(blocks[0].id);
+      expect(blocks[0].children.length).toBe(2);
+      expect(root?.type).toBe('composite');
+
+      const aBlock = db.getNodeById(aBlockPos.id);
+      console.log('aBlock', aBlock);
+      expect(aBlock?.label).toBe('ABlock');
+      expect(aBlock?.type).toBe('square');
+
+      const bBlock = db.getNodeById(bBlockPos.id);
+
+      expect(bBlock.id).toBe('bBlock');
+      expect(bBlock.label).toBe('BBlock');
+      expect(bBlock.type).toBe('square');
     });
     it.skip('compound blocks with title', async () => {
       const str = `block

From 8a55b212a227c970fda4030d5e94e668dc9d17ad Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 1 Sep 2023 15:33:38 +0200
Subject: [PATCH 047/193] Saving data from compound blocks

---
 .../mermaid/src/diagrams/block/blockDB.ts     | 68 ++++++++--------
 .../mermaid/src/diagrams/block/blockTypes.ts  |  3 +-
 .../src/diagrams/block/parser/block.jison     | 10 +--
 .../src/diagrams/block/parser/block.spec.ts   | 77 +++++++++++--------
 4 files changed, 85 insertions(+), 73 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 2ef204430..9717bc348 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -18,48 +18,46 @@ import { log } from '../../logger.js';
 // export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0?
 
 // Initialize the node database for simple lookups
-let nodeDatabase: Record = {};
-const blockDatabase: Record = {};
+let blockDatabase: Record = {};
+
+const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
+  for (const block of blockList) {
+    if (block.type === 'column-setting') {
+      const columns = block.columns || -1;
+      parent.columns = columns;
+    } else {
+      if (!block.label) {
+        block.label = block.id;
+      }
+      blockDatabase[block.id] = block;
+
+      if (block.children) {
+        populateBlockDatabase(block.children, block);
+      }
+    }
+  }
+};
 
 // Function to get a node by its id
 type IGetNodeById = (id: string) => Block | undefined;
-export const getNodeById = (id: string): Block | undefined => {
-  console.log(id, nodeDatabase);
+export const getBlockById = (id: string): Block | undefined => {
   return blockDatabase[id];
 };
 
 // TODO: Convert to generic TreeNode type? Convert to class?
 
-let rootBlock = { id: 'root', children: [] as Block[], columns: -1 };
 let blocks: Block[] = [];
 const links: Link[] = [];
-// let rootBlock = { id: 'root', children: [], columns: -1 } as Block;
-let currentBlock = rootBlock;
+let rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
 
 const clear = (): void => {
   log.info('Clear called');
-  // rootBlocks = [];
-  blocks = [] as Block[];
   commonClear();
-  rootBlock = { id: 'root', children: [], columns: -1 };
-  currentBlock = rootBlock;
-  nodeDatabase = {};
-  blockDatabase[rootBlock.id] = rootBlock;
+  rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
+  blockDatabase = { root: rootBlock };
+  blocks = [] as Block[];
 };
 
-// type IAddBlock = (block: Block) => Block;
-// const addBlock: IAddBlock = (block: Block, parent?: Block): Block => {
-//   log.info('addBlock', block, parent);
-//   if (parent) {
-//     parent.children ??= [];
-//     parent.children.push(block);
-//   } else {
-//     rootBlock.children.push(block);
-//   }
-//   blocks.push(block);
-//   return block;
-// };
-
 type ITypeStr2Type = (typeStr: string) => BlockType;
 export function typeStr2Type(typeStr: string) {
   // TODO: add all types
@@ -74,6 +72,7 @@ export function typeStr2Type(typeStr: string) {
 }
 
 let cnt = 0;
+type IGenerateId = () => string;
 export const generateId = () => {
   cnt++;
   return 'id-' + Math.random().toString(36).substr(2, 12) + '-' + cnt;
@@ -96,13 +95,15 @@ export const addBlock = (_id: string, _label?: string, type?: BlockType) => {
   blockDatabase[node.id] = node;
   // currentBlock.children ??= [];
   // currentBlock.children.push(node);
-  // console.log('currentBlock', currentBlock.children, nodeDatabase);
-  console.log('addNode called:', id, label, type, node);
+  // log.info('currentBlock', currentBlock.children, nodeDatabase);
+  log.info('addNode called:', id, label, type, node);
   return node;
 };
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
+  populateBlockDatabase(block, rootBlock);
+  log.info('blockdb', JSON.stringify(blockDatabase, null, 2));
   blocks = block;
 };
 
@@ -115,7 +116,6 @@ const addLink: IAddLink = (link: Link): Link => {
 type ISetColumns = (columnsStr: string) => void;
 const setColumns = (columnsStr: string): void => {
   const columns = columnsStr === 'auto' ? -1 : parseInt(columnsStr);
-  currentBlock!.columns = columns;
 };
 
 const getBlock = (id: string, blocks: Block[]): Block | undefined => {
@@ -149,8 +149,8 @@ const getColumns = (blockid: string): number => {
 
 type IGetBlocks = () => Block[];
 const getBlocks: IGetBlocks = () => {
-  // console.log('Block in test', rootBlock.children || []);
-  console.log('Block in test', blocks, blocks[0].id);
+  // log.info('Block in test', rootBlock.children || []);
+  log.info('Block in test', blocks, blocks[0].id);
   return blocks || [];
 };
 
@@ -172,7 +172,8 @@ export interface BlockDB extends DiagramDB {
   getColumns: IGetColumns;
   typeStr2Type: ITypeStr2Type;
   setHierarchy: ISetHierarchy;
-  getNodeById: IGetNodeById;
+  getBlockById: IGetNodeById;
+  generateId: IGenerateId;
 }
 
 const db: BlockDB = {
@@ -184,7 +185,7 @@ const db: BlockDB = {
   getBlocks,
   getLinks,
   setHierarchy,
-  getNodeById,
+  getBlockById,
   // getAccTitle,
   // setAccTitle,
   // getAccDescription,
@@ -194,6 +195,7 @@ const db: BlockDB = {
   setColumns,
   getColumns,
   clear,
+  generateId,
 };
 
 export default db;
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 4afbe4351..a695b4ec7 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -22,7 +22,8 @@ export type BlockType =
   | 'cylinder'
   | 'group'
   | 'doublecircle'
-  | 'composite';
+  | 'composite'
+  | 'column-setting';
 
 export interface Block {
   id: string;
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 309dbfdea..829ccd300 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -138,7 +138,7 @@ seperator
   ;
 
 start: BLOCK_DIAGRAM_KEY document EOF
-  {console.log('This is the hierarchy ', JSON.stringify($2, null, 2)); yy.setHierarchy($2); }
+  {yy.getLogger().info('This is the hierarchy ', JSON.stringify($2, null, 2)); yy.setHierarchy($2); }
   ;
 
 
@@ -180,16 +180,16 @@ statement
 	;
 
 nodeStatement
-  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); yy.addBlock($1.id); $$ = {id: $1.id}; }
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); yy.addBlock($1.id, $1.label, yy.typeStr2Type($1)); $$ = {id: $1.id}; }
+  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); $$ = {id: $1.id}; }
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1)}; }
   ;
 
 columnsStatement
-  : COLUMNS { yy.getLogger().info("COLUMNS: ", $1);yy.setColumns($1); }
+  : COLUMNS { yy.getLogger().info("COLUMNS: ", $1); $$ = {type: 'column-setting', columns: $1 === 'auto'?-1:parseInt($1) } }
   ;
 
 blockStatement
-  : block document end { console.log('Rule: blockStatement : ', $1, $2, $3); const block = yy.addBlock(undefined, undefined, 'composite'); $$ = { id: block.id, children: $2 }; }
+  : block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:id, children: $2 }; }
   ;
 
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 584a817b5..eea9bb65b 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -21,7 +21,7 @@ describe('Block diagram', function () {
       block.parse(str);
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(1);
-      expect(blocks[0].ID).toBe('id');
+      expect(blocks[0].id).toBe('id');
       expect(blocks[0].label).toBe('id');
     });
     it('a node with a square shape and a label', async () => {
@@ -32,7 +32,7 @@ describe('Block diagram', function () {
       block.parse(str);
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(1);
-      expect(blocks[0].ID).toBe('id');
+      expect(blocks[0].id).toBe('id');
       expect(blocks[0].label).toBe('A label');
       expect(blocks[0].type).toBe('square');
     });
@@ -45,10 +45,10 @@ describe('Block diagram', function () {
       block.parse(str);
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(2);
-      expect(blocks[0].ID).toBe('id1');
+      expect(blocks[0].id).toBe('id1');
       expect(blocks[0].label).toBe('id1');
       expect(blocks[0].type).toBe('square');
-      expect(blocks[1].ID).toBe('id2');
+      expect(blocks[1].id).toBe('id2');
       expect(blocks[1].label).toBe('id2');
       expect(blocks[1].type).toBe('square');
     });
@@ -62,13 +62,13 @@ describe('Block diagram', function () {
       block.parse(str);
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(3);
-      expect(blocks[0].ID).toBe('id1');
+      expect(blocks[0].id).toBe('id1');
       expect(blocks[0].label).toBe('id1');
       expect(blocks[0].type).toBe('square');
-      expect(blocks[1].ID).toBe('id2');
+      expect(blocks[1].id).toBe('id2');
       expect(blocks[1].label).toBe('id2');
       expect(blocks[1].type).toBe('square');
-      expect(blocks[2].ID).toBe('id3');
+      expect(blocks[2].id).toBe('id3');
       expect(blocks[2].label).toBe('id3');
       expect(blocks[2].type).toBe('square');
     });
@@ -81,10 +81,10 @@ describe('Block diagram', function () {
       block.parse(str);
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(2);
-      expect(blocks[0].ID).toBe('id');
+      expect(blocks[0].id).toBe('id');
       expect(blocks[0].label).toBe('A label');
       expect(blocks[0].type).toBe('square');
-      expect(blocks[1].ID).toBe('id2');
+      expect(blocks[1].id).toBe('id2');
       expect(blocks[1].label).toBe('id2');
       expect(blocks[1].type).toBe('square');
     });
@@ -152,24 +152,32 @@ describe('Block diagram', function () {
     it('compound blocks 2', async () => {
       const str = `block-beta
           block
-            aBlock["Block"]
-            bBlock["Block"]
+            aBlock["ABlock"]
+            bBlock["BBlock"]
           end
         `;
 
       block.parse(str);
       const blocks = db.getBlocks();
-      console.log('blocks', blocks);
       expect(blocks.length).toBe(1);
+
       expect(blocks[0].children.length).toBe(2);
-      expect(blocks[0].id).toBe('id');
-      expect(blocks[0].label).toBe('A label');
-      expect(blocks[0].type).toBe('square');
-      // expect(blocks[1].ID).toBe('id2');
-      // expect(blocks[1].label).toBe('id2');
-      // expect(blocks[1].type).toBe('square');
+      expect(blocks[0].id).not.toBe(undefined);
+      expect(blocks[0].label).toBe(blocks[0].id);
+      expect(blocks[0].type).toBe('composite');
+
+      const aBlock = blocks[0].children[0];
+
+      expect(aBlock.id).not.toBe(aBlock);
+      expect(aBlock.label).toBe('ABlock');
+      expect(aBlock.type).toBe('square');
+
+      const bBlock = blocks[0].children[1];
+      expect(bBlock.id).not.toBe(bBlock);
+      expect(bBlock.label).toBe('BBlock');
+      expect(bBlock.type).toBe('square');
     });
-    it.only('compound blocks', async () => {
+    it('compound blocks of compound blocks', async () => {
       const str = `block-beta
           block
             aBlock["ABlock"]
@@ -182,29 +190,30 @@ describe('Block diagram', function () {
       block.parse(str);
       const blocks = db.getBlocks();
 
-      const aBlockPos = blocks[0].children[0];
-      const bBlockPos = blocks[0].children[1].children[0];
+      const aBlock = blocks[0].children[0];
+      const secondComposite = blocks[0].children[1];
+      const bBlock = blocks[0].children[1].children[0];
 
-      const root = db.getNodeById(blocks[0].id);
-      expect(blocks.length).toBe(1);
-      expect(blocks[0].id).not.toBe(undefined);
-      expect(root?.label).toBe(blocks[0].id);
       expect(blocks[0].children.length).toBe(2);
-      expect(root?.type).toBe('composite');
+      expect(blocks[0].id).not.toBe(undefined);
+      expect(blocks[0].label).toBe(blocks[0].id);
+      expect(blocks[0].type).toBe('composite');
 
-      const aBlock = db.getNodeById(aBlockPos.id);
-      console.log('aBlock', aBlock);
-      expect(aBlock?.label).toBe('ABlock');
-      expect(aBlock?.type).toBe('square');
+      expect(secondComposite.children.length).toBe(1);
+      expect(secondComposite.id).not.toBe(undefined);
+      expect(secondComposite.label).toBe(secondComposite.id);
+      expect(secondComposite.type).toBe('composite');
 
-      const bBlock = db.getNodeById(bBlockPos.id);
+      expect(aBlock.id).not.toBe(aBlock);
+      expect(aBlock.label).toBe('ABlock');
+      expect(aBlock.type).toBe('square');
 
-      expect(bBlock.id).toBe('bBlock');
+      expect(bBlock.id).not.toBe(bBlock);
       expect(bBlock.label).toBe('BBlock');
       expect(bBlock.type).toBe('square');
     });
-    it.skip('compound blocks with title', async () => {
-      const str = `block
+    it('compound blocks with title', async () => {
+      const str = `block-beta
           block compoundBlock["Compound block"]
             columns 1
             block2["Block 1"]

From e52de6c27982fd8b1cedb8e2c00fb137e0081ed9 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 1 Sep 2023 15:40:49 +0200
Subject: [PATCH 048/193] Some cleanup

---
 .../mermaid/src/diagrams/block/blockDB.ts     | 58 -------------------
 1 file changed, 58 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 9717bc348..b0a7c20c1 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -15,8 +15,6 @@ import {
 } from '../../commonDb.js';
 import { log } from '../../logger.js';
 
-// export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0?
-
 // Initialize the node database for simple lookups
 let blockDatabase: Record = {};
 
@@ -38,14 +36,6 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
   }
 };
 
-// Function to get a node by its id
-type IGetNodeById = (id: string) => Block | undefined;
-export const getBlockById = (id: string): Block | undefined => {
-  return blockDatabase[id];
-};
-
-// TODO: Convert to generic TreeNode type? Convert to class?
-
 let blocks: Block[] = [];
 const links: Link[] = [];
 let rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
@@ -78,28 +68,6 @@ export const generateId = () => {
   return 'id-' + Math.random().toString(36).substr(2, 12) + '-' + cnt;
 };
 
-type IAddBlock = (_id: string, label: string, type: BlockType) => Block;
-// Function to add a node to the database
-export const addBlock = (_id: string, _label?: string, type?: BlockType) => {
-  let id = _id;
-  if (!_id) {
-    id = generateId();
-  }
-  const label = _label || id;
-  const node: Block = {
-    id: id,
-    label,
-    type: type || 'square',
-    children: [],
-  };
-  blockDatabase[node.id] = node;
-  // currentBlock.children ??= [];
-  // currentBlock.children.push(node);
-  // log.info('currentBlock', currentBlock.children, nodeDatabase);
-  log.info('addNode called:', id, label, type, node);
-  return node;
-};
-
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
   populateBlockDatabase(block, rootBlock);
@@ -113,25 +81,6 @@ const addLink: IAddLink = (link: Link): Link => {
   return link;
 };
 
-type ISetColumns = (columnsStr: string) => void;
-const setColumns = (columnsStr: string): void => {
-  const columns = columnsStr === 'auto' ? -1 : parseInt(columnsStr);
-};
-
-const getBlock = (id: string, blocks: Block[]): Block | undefined => {
-  for (const block of blocks) {
-    if (block.id === id) {
-      return block;
-    }
-    if (block.children) {
-      const foundBlock = getBlock(id, block.children);
-      if (foundBlock) {
-        return foundBlock;
-      }
-    }
-  }
-};
-
 type IGetColumns = (blockid: string) => number;
 const getColumns = (blockid: string): number => {
   const block = blockDatabase[blockid];
@@ -149,7 +98,6 @@ const getColumns = (blockid: string): number => {
 
 type IGetBlocks = () => Block[];
 const getBlocks: IGetBlocks = () => {
-  // log.info('Block in test', rootBlock.children || []);
   log.info('Block in test', blocks, blocks[0].id);
   return blocks || [];
 };
@@ -163,36 +111,30 @@ const getLogger: IGetLogger = () => console;
 export interface BlockDB extends DiagramDB {
   clear: () => void;
   getConfig: () => BlockConfig | undefined;
-  addBlock: IAddBlock;
   addLink: IAddLink;
   getLogger: IGetLogger;
   getBlocks: IGetBlocks;
   getLinks: IGetLinks;
-  setColumns: ISetColumns;
   getColumns: IGetColumns;
   typeStr2Type: ITypeStr2Type;
   setHierarchy: ISetHierarchy;
-  getBlockById: IGetNodeById;
   generateId: IGenerateId;
 }
 
 const db: BlockDB = {
   getConfig: () => configApi.getConfig().block,
-  addBlock: addBlock,
   addLink: addLink,
   typeStr2Type: typeStr2Type,
   getLogger, // TODO: remove
   getBlocks,
   getLinks,
   setHierarchy,
-  getBlockById,
   // getAccTitle,
   // setAccTitle,
   // getAccDescription,
   // setAccDescription,
   // getDiagramTitle,
   // setDiagramTitle,
-  setColumns,
   getColumns,
   clear,
   generateId,

From 5f1cfc7519031f92ccdbca3dde85736a979a08bc Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 1 Sep 2023 16:22:23 +0200
Subject: [PATCH 049/193] Support for compound blocks with id, title and type

---
 .../mermaid/src/diagrams/block/blockDB.ts     |  7 ++++++-
 .../mermaid/src/diagrams/block/blockTypes.ts  |  4 ++--
 .../src/diagrams/block/parser/block.jison     |  6 ++++--
 .../src/diagrams/block/parser/block.spec.ts   | 19 +++++++++++++++++--
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index b0a7c20c1..7c90ad2db 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -19,6 +19,7 @@ import { log } from '../../logger.js';
 let blockDatabase: Record = {};
 
 const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
+  const children = [];
   for (const block of blockList) {
     if (block.type === 'column-setting') {
       const columns = block.columns || -1;
@@ -32,8 +33,12 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
       if (block.children) {
         populateBlockDatabase(block.children, block);
       }
+      if (block.type !== 'column-setting') {
+        children.push(block);
+      }
     }
   }
+  parent.children = children;
 };
 
 let blocks: Block[] = [];
@@ -71,7 +76,7 @@ export const generateId = () => {
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
   populateBlockDatabase(block, rootBlock);
-  log.info('blockdb', JSON.stringify(blockDatabase, null, 2));
+  log.debug('The hierarchy', JSON.stringify(block, null, 2));
   blocks = block;
 };
 
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index a695b4ec7..aca83f421 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -5,6 +5,7 @@ export interface BlockConfig extends BaseDiagramConfig {
 }
 
 export type BlockType =
+  | 'column-setting'
   | 'round'
   | 'square'
   | 'diamond'
@@ -22,8 +23,7 @@ export type BlockType =
   | 'cylinder'
   | 'group'
   | 'doublecircle'
-  | 'composite'
-  | 'column-setting';
+  | 'composite';
 
 export interface Block {
   id: string;
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 829ccd300..9cc220ff4 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -29,6 +29,7 @@ CRLF \u000D\u000A
 "block-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
 "block"\s+            { yy.getLogger().info('Found space-block'); return 'block';}
 "block"\n+            { yy.getLogger().info('Found nl-block'); return 'block';}
+"block:"            { yy.getLogger().info('Found space-block'); return 'id-block';}
 // \s*\%\%.*                                                       { yy.getLogger().info('Found comment',yytext); }
 [\s]+                                                           { yy.getLogger().info('.', yytext); /* skip all whitespace */  }
 [\n]+ {yy.getLogger().info('_', yytext);                 /* skip all whitespace */   }
@@ -138,7 +139,7 @@ seperator
   ;
 
 start: BLOCK_DIAGRAM_KEY document EOF
-  {yy.getLogger().info('This is the hierarchy ', JSON.stringify($2, null, 2)); yy.setHierarchy($2); }
+  { yy.setHierarchy($2); }
   ;
 
 
@@ -189,7 +190,8 @@ columnsStatement
   ;
 
 blockStatement
-  : block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:id, children: $2 }; }
+  : id-block nodeStatement document end { yy.getLogger().info('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, children: $3 }; }
+  | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:id, children: $2 }; }
   ;
 
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index eea9bb65b..adb814be2 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -214,13 +214,28 @@ describe('Block diagram', function () {
     });
     it('compound blocks with title', async () => {
       const str = `block-beta
-          block compoundBlock["Compound block"]
+          block:compoundBlock["Compound block"]
             columns 1
-            block2["Block 1"]
+            block2["Block 2"]
           end
         `;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
+
+      const compoundBlock = blocks[0];
+      const block2 = compoundBlock.children[0];
+
+      expect(compoundBlock.children.length).toBe(1);
+      expect(compoundBlock.id).toBe('compoundBlock');
+      expect(compoundBlock.label).toBe('Compound block');
+      expect(compoundBlock.type).toBe('square');
+
+      expect(block2.id).toBe('block2');
+      expect(block2.label).toBe('Block 2');
+      expect(block2.type).toBe('square');
     });
     it.skip('blocks mixed with compound blocks', async () => {
       const str = `block

From 1e864a508d7f030b79e9bf58667354057694b1fc Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Tue, 5 Sep 2023 11:13:27 +0200
Subject: [PATCH 050/193] Rendering, tmp commit before refactoring

---
 cypress/platform/knsv2.html                   |  24 +-
 packages/mermaid/src/dagre-wrapper/nodes.js   |  16 +-
 .../mermaid/src/diagrams/block/blockDB.ts     |  14 +
 .../src/diagrams/block/blockDiagram.ts        |   2 +
 .../src/diagrams/block/blockRenderer.ts       | 126 +++---
 .../mermaid/src/diagrams/block/blockTypes.ts  |   7 +
 packages/mermaid/src/diagrams/block/layout.ts | 108 +++++
 .../src/diagrams/block/renderHelpers.ts       | 270 ++++++++++++
 packages/mermaid/src/diagrams/block/styles.ts | 144 +++++++
 .../flowchart/swimlane/swimlaneRenderer.js    | 400 ++++++++++++++++++
 10 files changed, 1033 insertions(+), 78 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/block/layout.ts
 create mode 100644 packages/mermaid/src/diagrams/block/renderHelpers.ts
 create mode 100644 packages/mermaid/src/diagrams/block/styles.ts
 create mode 100644 packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index e19d53ae4..4609331dd 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -24,6 +24,9 @@
       h1 {
         color: grey;
       }
+      .mermaid {
+        border: 1px solid #ddd;
+      }
       .mermaid2 {
         display: none;
       }
@@ -59,16 +62,17 @@
   
     
     block-beta
-          id
    
+  id1("Wide 1")
+  id2("2")
+  id3("3")
+  id4("A final one")
+
+    
    
     
     flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
+    id
     
    
-    
    +    
     flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
@@ -93,11 +97,11 @@ flowchart LR
         way`"]
   
    
-    
    +    
           classDiagram-v2
         note "I love this diagram!\nDo you love it?"
     
    
-    
    +    
         stateDiagram-v2
     State1: The state with a note with minus - and plus + in it
     note left of State1
@@ -142,7 +146,7 @@ mindmap
       शान्तिः سلام  和平 `"]
 
     
    
-    
    +    
     %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 6c6733358..e6a9d982a 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1037,14 +1037,14 @@ export const positionNode = (node) => {
   const padding = 8;
   const diff = node.diff || 0;
   if (node.clusterNode) {
-    el.attr(
-      'transform',
-      'translate(' +
-        (node.x + diff - node.width / 2) +
-        ', ' +
-        (node.y - node.height / 2 - padding) +
-        ')'
-    );
+      el.attr(
+        'transform',
+        'translate(' +
+          (node.x + diff - node.width / 2) +
+          ', ' +
+          (node.y - node.height / 2 - padding) +
+          ')'
+      );
   } else {
     el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
   }
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 7c90ad2db..039353830 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -106,6 +106,16 @@ const getBlocks: IGetBlocks = () => {
   log.info('Block in test', blocks, blocks[0].id);
   return blocks || [];
 };
+type IGetBlock = (id: string) => Block | undefined;
+const getBlock: IGetBlock = (id: string) => {
+  log.info('Block in test', blocks, blocks[0].id);
+  return blockDatabase[id];
+};
+type ISetBlock = (block: Block) => void;
+const setBlock: ISetBlock = (block: Block) => {
+  log.info('Block in test', blocks, blocks[0].id);
+  blockDatabase[block.id] = block;
+};
 
 type IGetLinks = () => Link[];
 const getLinks: IGetLinks = () => links;
@@ -119,6 +129,8 @@ export interface BlockDB extends DiagramDB {
   addLink: IAddLink;
   getLogger: IGetLogger;
   getBlocks: IGetBlocks;
+  getBlock: IGetBlock;
+  setBlock: ISetBlock;
   getLinks: IGetLinks;
   getColumns: IGetColumns;
   typeStr2Type: ITypeStr2Type;
@@ -134,6 +146,8 @@ const db: BlockDB = {
   getBlocks,
   getLinks,
   setHierarchy,
+  getBlock,
+  setBlock,
   // getAccTitle,
   // setAccTitle,
   // getAccDescription,
diff --git a/packages/mermaid/src/diagrams/block/blockDiagram.ts b/packages/mermaid/src/diagrams/block/blockDiagram.ts
index e098360f4..b3071cb0b 100644
--- a/packages/mermaid/src/diagrams/block/blockDiagram.ts
+++ b/packages/mermaid/src/diagrams/block/blockDiagram.ts
@@ -2,6 +2,7 @@ import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: jison doesn't export types
 import parser from './parser/block.jison';
 import db from './blockDB.js';
+import flowStyles from './styles.js';
 import renderer from './blockRenderer.js';
 
 // TODO: do we need this?
@@ -14,4 +15,5 @@ export const diagram: DiagramDefinition = {
   parser,
   db,
   renderer,
+  styles: flowStyles,
 };
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 84acdaf3f..0dac714d4 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -1,20 +1,30 @@
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
-
+import { calculateBlockSizes } from './renderHelpers.js';
+import { layout } from './layout.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,
   schemeTableau10 as d3schemeTableau10,
+  ContainerElement,
 } from 'd3';
 
-import { BlockDB, Block } from './blockDB.js';
+import { BlockDB } from './blockDB.js';
+import type { Block } from './blockTypes.js';
 
 // import { diagram as BlockDiagram } from './blockDiagram.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
 
-export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-  const { securityLevel } = configApi.getConfig();
+export const draw = async function (
+  text: string,
+  id: string,
+  _version: string,
+  diagObj: Diagram
+): Promise {
+  const { securityLevel, flowchart: conf } = configApi.getConfig();
+  const db = diagObj.db as BlockDB;
   let sandboxElement: any;
   if (securityLevel === 'sandbox') {
     sandboxElement = d3select('#i' + id);
@@ -27,12 +37,23 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // @ts-ignore TODO root.select is not callable
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
+  const bl = db.getBlocks();
+
+  const nodes = svg.insert('g').attr('class', 'block');
+  await calculateBlockSizes(nodes, bl, db);
+  const bounds = layout(db);
+
+  console.log('Here', bl);
+
   // Establish svg dimensions and get width and height
-  //  
-  const height = 400;
-  const width = 600;
+  //
+  // const bounds = nodes.node().getBoundingClientRect();
+  const height = bounds.height;
+  const width = bounds.width;
   const useMaxWidth = false;
   configureSvgSize(svg, height, width, useMaxWidth);
+  console.log('Here Bounds', bounds);
+  svg.attr('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);
 
   // Prepare data for construction based on diagObj.db
   // This must be a mutable object with `nodes` and `links` properties:
@@ -53,107 +74,92 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   const blocks: LayedBlock[] = [
     {
-      ID: "ApplicationLayer",
-      label: "Application Layer",
+      ID: 'ApplicationLayer',
+      label: 'Application Layer',
       x: 0,
       y: 0,
       children: [
         {
-          ID: "UserInterface",
-          label: "User Interface (WPF, HTML5/CSS3, Swing)",
+          ID: 'UserInterface',
+          label: 'User Interface (WPF, HTML5/CSS3, Swing)',
           x: 0,
-          y: 50,    
-        }
+          y: 50,
+        },
       ],
     },
     {
-      ID: "PresentationLayer",
-      label: "Presentation Layer",
+      ID: 'PresentationLayer',
+      label: 'Presentation Layer',
       x: 0,
       y: 50,
       children: [
         {
-          ID: "Smack",
-          label: "J2SE Mobil App (Smack)"
+          ID: 'Smack',
+          label: 'J2SE Mobil App (Smack)',
         },
         {
-          ID: "JsJAC",
-          label: "Java Script Browser App (JsJAC)",
+          ID: 'JsJAC',
+          label: 'Java Script Browser App (JsJAC)',
         },
         {
-          ID: "babelim",
-          label: ".NET Windows App (Babel-im)",
+          ID: 'babelim',
+          label: '.NET Windows App (Babel-im)',
         },
-      ]
+      ],
     },
     {
-      ID: "SessionLayer",
-      label: "Session Layer",
+      ID: 'SessionLayer',
+      label: 'Session Layer',
       x: 0,
       y: 100,
       children: [
         {
-          ID: "XMPP",
-          label: "XMPP Component"
+          ID: 'XMPP',
+          label: 'XMPP Component',
         },
         {
           children: [
             {
-              ID: "Authentication",
-              label: "Authentication",
+              ID: 'Authentication',
+              label: 'Authentication',
             },
             {
-              ID: "Authorization",
-              label: "Authorization",
+              ID: 'Authorization',
+              label: 'Authorization',
             },
-          ]
+          ],
         },
         {
-          ID: "LDAP",
-          label: "LDAP, DB, POP",
+          ID: 'LDAP',
+          label: 'LDAP, DB, POP',
         },
-      ]
+      ],
     },
     {
-      ID: "NetworkLayer",
-      label: "Network Layer",
+      ID: 'NetworkLayer',
+      label: 'Network Layer',
       x: 0,
       y: 150,
       children: [
-        { ID: "HTTP", label: "HTTP" },
-        { ID: "SOCK", label: "SOCK" },
-      ]
+        { ID: 'HTTP', label: 'HTTP' },
+        { ID: 'SOCK', label: 'SOCK' },
+      ],
     },
     {
-      ID: "DataLayer",
-      label: "Data Layer",
+      ID: 'DataLayer',
+      label: 'Data Layer',
       x: 0,
       y: 200,
       children: [
-        { ID: "XMPP", label: "XMPP" },
-        { ID: "BDB", label: "Business DB" },
-        { ID: "AD", label: "Active Directory" },
-      ]
+        { ID: 'XMPP', label: 'XMPP' },
+        { ID: 'BDB', label: 'Business DB' },
+        { ID: 'AD', label: 'Active Directory' },
+      ],
     },
   ];
 
   // Get color scheme for the graph
   const colorScheme = d3scaleOrdinal(d3schemeTableau10);
-
-  svg
-    .append('g')
-    .attr('class', 'block')
-    .selectAll('.block')
-    .data(blocks)
-    .join('rect')
-    .attr('x', (d: any) => d.x || 0)
-    .attr('y', (d: any) => d.y || 0)
-    .attr('class', 'block')
-    .attr('stroke', 'black')
-    .attr('height', (d: any) => 50)
-    .attr('width', (d: any) => 100)
-    .attr('fill', (d: any) => colorScheme(d.ID));
-
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index aca83f421..5a4431c0a 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -31,6 +31,13 @@ export interface Block {
   parent?: Block;
   type?: BlockType;
   children: Block[];
+  size?: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+  };
+  node?: any;
   columns?: number; // | TBlockColumnsDefaultValue;
 }
 
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
new file mode 100644
index 000000000..65b99c154
--- /dev/null
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -0,0 +1,108 @@
+import { BlockDB } from './blockDB.js';
+import type { Block } from './blockTypes.js';
+
+function layoutBLock(block: Block, db: BlockDB) {
+  if (block.children) {
+    for (const child of block.children) {
+      layoutBLock(child, db);
+    }
+    // find max width of children
+    let maxWidth = 0;
+    let maxHeight = 0;
+    for (const child of block.children) {
+      const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
+      if (width > maxWidth) {
+        maxWidth = width;
+      }
+      if (height > maxHeight) {
+        maxHeight = height;
+      }
+    }
+
+    // set width of block to max width of children
+    for (const child of block.children) {
+      if (child.size) {
+        child.size.width = maxWidth;
+        child.size.height = maxHeight;
+      }
+    }
+
+    // Position items
+    let x = 0;
+    let y = 0;
+    const padding = 10;
+    for (const child of block.children) {
+      if (child.size) {
+        child.size.x = x;
+        child.size.y = y;
+        x += maxWidth + padding;
+      }
+    }
+  }
+}
+
+function positionBlock(block: Block, db: BlockDB) {
+  console.log('Here Positioning', block?.size?.node);
+  // const o = db.getBlock(block.id);
+  // const node;
+  if (block?.size?.node) {
+    const node = block?.size?.node;
+    const size = block?.size;
+    console.log('Here as well', node);
+    if (node) {
+      node.attr(
+        'transform',
+        'translate(' + (size.x - size.width / 2) + ', ' + (size.y - size.height / 2) + ')'
+      );
+    }
+  }
+  if (block.children) {
+    for (const child of block.children) {
+      positionBlock(child, db);
+    }
+  }
+}
+let minX = 0;
+let minY = 0;
+let maxX = 0;
+let maxY = 0;
+
+function findBounds(block: Block) {
+  if (block.size) {
+    const { x, y, width, height } = block.size;
+    console.log('Here', minX, minY, x, y, width, height);
+    if (x - width < minX) {
+      minX = x - width;
+    }
+    if (y - height < minY) {
+      minY = y - height;
+    }
+    if (x > maxX) {
+      maxX = x;
+    }
+    if (y > maxY) {
+      maxY = y;
+    }
+  }
+  if (block.children) {
+    for (const child of block.children) {
+      findBounds(child);
+    }
+  }
+}
+
+export function layout(db: BlockDB) {
+  const blocks = db.getBlocks();
+  const root = { id: 'root', type: 'composite', children: blocks } as Block;
+  layoutBLock(root, db);
+  positionBlock(root, db);
+
+  minX = 0;
+  minY = 0;
+  maxX = 0;
+  maxY = 0;
+  findBounds(root);
+  const height = maxY - minY;
+  const width = maxX - minX;
+  return { x: minX, y: minY, width, height };
+}
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
new file mode 100644
index 000000000..34d8baa05
--- /dev/null
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -0,0 +1,270 @@
+import { getStylesFromArray } from '../../utils.js';
+import { insertNode } from '../../dagre-wrapper/nodes.js';
+import { getConfig } from '../../config.js';
+import { ContainerElement } from 'd3';
+import type { Block } from './blockTypes.js';
+import { BlockDB } from './blockDB.js';
+
+function getNodeFromBlock(block: Block, db: BlockDB) {
+  const vertex = block;
+
+  /**
+   * Variable for storing the classes for the vertex
+   *
+   * @type {string}
+   */
+  let classStr = 'default';
+  if ((vertex?.classes?.length || []) > 0) {
+    classStr = vertex.classes.join(' ');
+  }
+  classStr = classStr + ' flowchart-label';
+
+  // We create a SVG label, either by delegating to addHtmlLabel or manually
+  let vertexNode;
+  const labelData = { width: 0, height: 0 };
+
+  let radious = 0;
+  let _shape = '';
+  let layoutOptions = {};
+  // Set the shape based parameters
+  switch (vertex.type) {
+    case 'round':
+      radious = 5;
+      _shape = 'rect';
+      break;
+    case 'square':
+      _shape = 'rect';
+      break;
+    case 'diamond':
+      _shape = 'question';
+      layoutOptions = {
+        portConstraints: 'FIXED_SIDE',
+      };
+      break;
+    case 'hexagon':
+      _shape = 'hexagon';
+      break;
+    case 'odd':
+      _shape = 'rect_left_inv_arrow';
+      break;
+    case 'lean_right':
+      _shape = 'lean_right';
+      break;
+    case 'lean_left':
+      _shape = 'lean_left';
+      break;
+    case 'trapezoid':
+      _shape = 'trapezoid';
+      break;
+    case 'inv_trapezoid':
+      _shape = 'inv_trapezoid';
+      break;
+    case 'odd_right':
+      _shape = 'rect_left_inv_arrow';
+      break;
+    case 'circle':
+      _shape = 'circle';
+      break;
+    case 'ellipse':
+      _shape = 'ellipse';
+      break;
+    case 'stadium':
+      _shape = 'stadium';
+      break;
+    case 'subroutine':
+      _shape = 'subroutine';
+      break;
+    case 'cylinder':
+      _shape = 'cylinder';
+      break;
+    case 'group':
+      _shape = 'rect';
+      break;
+    case 'doublecircle':
+      _shape = 'doublecircle';
+      break;
+    default:
+      _shape = 'rect';
+  }
+
+  // const styles = getStylesFromArray(vertex.styles);
+  const styles = getStylesFromArray([]);
+
+  // Use vertex id as text in the box if no text is provided by the graph definition
+  const vertexText = vertex.label;
+
+  // Add the node
+  const node = {
+    labelStyle: styles.labelStyle,
+    shape: _shape,
+    labelText: vertexText,
+    // labelType: vertex.labelType,
+    rx: radious,
+    ry: radious,
+    class: classStr,
+    style: styles.style,
+    id: vertex.id,
+    // link: vertex.link,
+    // linkTarget: vertex.linkTarget,
+    // tooltip: diagObj.db.getTooltip(vertex.id) || '',
+    // domId: diagObj.db.lookUpDomId(vertex.id),
+    // haveCallback: vertex.haveCallback,
+    // width: vertex.type === 'group' ? 500 : undefined,
+    // dir: vertex.dir,
+    type: vertex.type,
+    // props: vertex.props,
+    padding: getConfig()?.flowchart?.padding || 0,
+  };
+  return node;
+}
+
+async function calculateBlockSize(elem: any, block: any, db: any) {
+  console.log('Here befoire 3');
+  const node = getNodeFromBlock(block, db);
+  if (node.type === 'group') return;
+
+  // Add the element to the DOM to size it
+  const nodeEl = await insertNode(elem, node);
+  const boundingBox = nodeEl.node().getBBox();
+  const obj = db.getBlock(node.id);
+  console.log('Here el', nodeEl);
+  obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
+  db.setBlock(obj);
+  // nodeEl.remove();
+}
+
+export async function calculateBlockSizes(elem: ContainerElement, blocks: Block[], db: BlockDB) {
+  console.log('Here before 2');
+  for (const block of blocks) {
+    await calculateBlockSize(elem, block, db);
+    if (block.children) {
+      await calculateBlockSizes(elem, block.children, db);
+    }
+  }
+}
+export async function insertBlockPositioned(elem: any, block: any, db: any) {
+  const vertex = block;
+
+  /**
+   * Variable for storing the classes for the vertex
+   *
+   * @type {string}
+   */
+  let classStr = 'default';
+  if ((vertex?.classes?.length || []) > 0) {
+    classStr = vertex.classes.join(' ');
+  }
+  classStr = classStr + ' flowchart-label';
+
+  // We create a SVG label, either by delegating to addHtmlLabel or manually
+  let vertexNode;
+  const labelData = { width: 0, height: 0 };
+
+  let radious = 0;
+  let _shape = '';
+  let layoutOptions = {};
+  // Set the shape based parameters
+  switch (vertex.type) {
+    case 'round':
+      radious = 5;
+      _shape = 'rect';
+      break;
+    case 'square':
+      _shape = 'rect';
+      break;
+    case 'diamond':
+      _shape = 'question';
+      layoutOptions = {
+        portConstraints: 'FIXED_SIDE',
+      };
+      break;
+    case 'hexagon':
+      _shape = 'hexagon';
+      break;
+    case 'odd':
+      _shape = 'rect_left_inv_arrow';
+      break;
+    case 'lean_right':
+      _shape = 'lean_right';
+      break;
+    case 'lean_left':
+      _shape = 'lean_left';
+      break;
+    case 'trapezoid':
+      _shape = 'trapezoid';
+      break;
+    case 'inv_trapezoid':
+      _shape = 'inv_trapezoid';
+      break;
+    case 'odd_right':
+      _shape = 'rect_left_inv_arrow';
+      break;
+    case 'circle':
+      _shape = 'circle';
+      break;
+    case 'ellipse':
+      _shape = 'ellipse';
+      break;
+    case 'stadium':
+      _shape = 'stadium';
+      break;
+    case 'subroutine':
+      _shape = 'subroutine';
+      break;
+    case 'cylinder':
+      _shape = 'cylinder';
+      break;
+    case 'group':
+      _shape = 'rect';
+      break;
+    case 'doublecircle':
+      _shape = 'doublecircle';
+      break;
+    default:
+      _shape = 'rect';
+  }
+
+  // const styles = getStylesFromArray(vertex.styles);
+  const styles = getStylesFromArray([]);
+
+  // Use vertex id as text in the box if no text is provided by the graph definition
+  const vertexText = vertex.label;
+
+  // Add the node
+  const node = {
+    labelStyle: styles.labelStyle,
+    shape: _shape,
+    labelText: vertexText,
+    labelType: vertex.labelType,
+    rx: radious,
+    ry: radious,
+    class: classStr,
+    style: styles.style,
+    id: vertex.id,
+    link: vertex.link,
+    linkTarget: vertex.linkTarget,
+    // tooltip: diagObj.db.getTooltip(vertex.id) || '',
+    // domId: diagObj.db.lookUpDomId(vertex.id),
+    haveCallback: vertex.haveCallback,
+    width: vertex.width,
+    height: vertex.height,
+    dir: vertex.dir,
+    type: vertex.type,
+    props: vertex.props,
+    padding: getConfig()?.flowchart?.padding || 0,
+  };
+  let boundingBox;
+  let nodeEl;
+
+  // Add the element to the DOM
+  if (node.type !== 'group') {
+    nodeEl = await insertNode(elem, node, vertex.dir);
+    // nodeEl.remove();
+    boundingBox = nodeEl.node().getBBox();
+    if (node.id) {
+      const obj = db.getBlock(node.id);
+      obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
+      db.setBlock(obj);
+    }
+  }
+}
diff --git a/packages/mermaid/src/diagrams/block/styles.ts b/packages/mermaid/src/diagrams/block/styles.ts
new file mode 100644
index 000000000..a4af4f128
--- /dev/null
+++ b/packages/mermaid/src/diagrams/block/styles.ts
@@ -0,0 +1,144 @@
+// import khroma from 'khroma';
+import * as khroma from 'khroma';
+
+/** Returns the styles given options */
+export interface FlowChartStyleOptions {
+  arrowheadColor: string;
+  border2: string;
+  clusterBkg: string;
+  clusterBorder: string;
+  edgeLabelBackground: string;
+  fontFamily: string;
+  lineColor: string;
+  mainBkg: string;
+  nodeBorder: string;
+  nodeTextColor: string;
+  tertiaryColor: string;
+  textColor: string;
+  titleColor: string;
+}
+
+const fade = (color: string, opacity: number) => {
+  // @ts-ignore TODO: incorrect types from khroma
+  const channel = khroma.channel;
+
+  const r = channel(color, 'r');
+  const g = channel(color, 'g');
+  const b = channel(color, 'b');
+
+  // @ts-ignore incorrect types from khroma
+  return khroma.rgba(r, g, b, opacity);
+};
+
+const getStyles = (options: FlowChartStyleOptions) =>
+  `.label {
+    font-family: ${options.fontFamily};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+  .cluster-label text {
+    fill: ${options.titleColor};
+  }
+  .cluster-label span,p {
+    color: ${options.titleColor};
+  }
+
+  .label text,span,p {
+    fill: ${options.nodeTextColor || options.textColor};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+  // .flowchart-label .text-outer-tspan {
+  //   text-anchor: middle;
+  // }
+  // .flowchart-label .text-inner-tspan {
+  //   text-anchor: start;
+  // }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 2.0px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.5;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
+    }
+    text-align: center;
+  }
+
+  /* For html labels only */
+  .labelBkg {
+    background-color: ${fade(options.edgeLabelBackground, 0.5)};
+    // background-color:
+  }
+
+  .cluster rect {
+    fill: ${options.clusterBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  .cluster span,p {
+    color: ${options.titleColor};
+  }
+  /* .cluster div {
+    color: ${options.titleColor};
+  } */
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: ${options.fontFamily};
+    font-size: 12px;
+    background: ${options.tertiaryColor};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .flowchartTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }
+`;
+
+export default getStyles;
diff --git a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
new file mode 100644
index 000000000..5b7d5976f
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
@@ -0,0 +1,400 @@
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
+import { select, curveLinear, selectAll } from 'd3';
+import { swimlaneLayout } from './swimlane-layout.js';
+import { insertNode } from '../../../dagre-wrapper/nodes.js';
+import flowDb from '../flowDb.js';
+import { getConfig } from '../../../config.js';
+import { getStylesFromArray } from '../../../utils.js';
+import setupGraph, { addEdges, addVertices } from './setup-graph.js';
+import { render } from '../../../dagre-wrapper/index.js';
+import { log } from '../../../logger.js';
+import { setupGraphViewbox } from '../../../setupGraphViewbox.js';
+import common, { evaluate } from '../../common/common.js';
+import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
+import { insertEdge, positionEdgeLabel } from '../../../dagre-wrapper/edges.js';
+import {
+  clear as clearGraphlib,
+  clusterDb,
+  adjustClustersAndEdges,
+  findNonClusterChild,
+  sortNodesByHierarchy,
+} from '../../../dagre-wrapper/mermaid-graphlib.js';
+
+const conf = {};
+export const setConf = function (cnf) {
+  const keys = Object.keys(cnf);
+  for (const key of keys) {
+    conf[key] = cnf[key];
+  }
+};
+
+/**
+ *
+ * @param element
+ * @param graph
+ * @param layout
+ * @param elem
+ * @param conf
+ */
+async function swimlaneRender(layout, vert, elem, g, id, conf) {
+  let max;
+  // draw nodes from layout.graph to element
+  const nodes = layout.graph.nodes();
+
+  // lanes are the swimlanes
+  const lanes = layout.lanes;
+
+  const nodesElements = elem.insert('g').attr('class', 'nodes');
+  // for each node, draw a rect, with a child text inside as label
+  for (const node of nodes) {
+    const nodeFromLayout = layout.graph.node(node);
+    const vertex = vert[node];
+    //Initialise the node
+    /**
+     * Variable for storing the classes for the vertex
+     *
+     * @type {string}
+     */
+    let classStr = 'default';
+    if (vertex.classes.length > 0) {
+      classStr = vertex.classes.join(' ');
+    }
+    classStr = classStr + ' swimlane-label';
+    const styles = getStylesFromArray(vertex.styles);
+
+    // Use vertex id as text in the box if no text is provided by the graph definition
+    let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
+
+    // We create a SVG label, either by delegating to addHtmlLabel or manually
+    let vertexNode;
+    log.info('vertex', vertex, vertex.labelType);
+    if (vertex.labelType === 'markdown') {
+      log.info('vertex', vertex, vertex.labelType);
+    } else {
+      if (evaluate(getConfig().flowchart.htmlLabels)) {
+        // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
+        const node = {
+          label: vertexText.replace(
+            /fa[blrs]?:fa-[\w-]+/g,
+            (s) => ``
+          ),
+        };
+        vertexNode = addHtmlLabel(elem, node).node();
+        vertexNode.parentNode.removeChild(vertexNode);
+      } else {
+        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
+
+        const rows = vertexText.split(common.lineBreakRegex);
+
+        for (const row of rows) {
+          const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+          tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+          tspan.setAttribute('dy', '1em');
+          tspan.setAttribute('x', '1');
+          tspan.textContent = row;
+          svgLabel.appendChild(tspan);
+        }
+        vertexNode = svgLabel;
+      }
+    }
+
+    let radious = 0;
+    let _shape = '';
+    // Set the shape based parameters
+    switch (vertex.type) {
+      case 'round':
+        radious = 5;
+        _shape = 'rect';
+        break;
+      case 'square':
+        _shape = 'rect';
+        break;
+      case 'diamond':
+        _shape = 'question';
+        break;
+      case 'hexagon':
+        _shape = 'hexagon';
+        break;
+      case 'odd':
+        _shape = 'rect_left_inv_arrow';
+        break;
+      case 'lean_right':
+        _shape = 'lean_right';
+        break;
+      case 'lean_left':
+        _shape = 'lean_left';
+        break;
+      case 'trapezoid':
+        _shape = 'trapezoid';
+        break;
+      case 'inv_trapezoid':
+        _shape = 'inv_trapezoid';
+        break;
+      case 'odd_right':
+        _shape = 'rect_left_inv_arrow';
+        break;
+      case 'circle':
+        _shape = 'circle';
+        break;
+      case 'ellipse':
+        _shape = 'ellipse';
+        break;
+      case 'stadium':
+        _shape = 'stadium';
+        break;
+      case 'subroutine':
+        _shape = 'subroutine';
+        break;
+      case 'cylinder':
+        _shape = 'cylinder';
+        break;
+      case 'group':
+        _shape = 'rect';
+        break;
+      case 'doublecircle':
+        _shape = 'doublecircle';
+        break;
+      default:
+        _shape = 'rect';
+    }
+    // Add the node
+    let nodeObj = {
+      labelStyle: styles.labelStyle,
+      shape: _shape,
+      labelText: vertexText,
+      labelType: vertex.labelType,
+      rx: radious,
+      ry: radious,
+      class: classStr,
+      style: styles.style,
+      id: vertex.id,
+      link: vertex.link,
+      linkTarget: vertex.linkTarget,
+      // tooltip: diagObj.db.getTooltip(vertex.id) || '',
+      // domId: diagObj.db.lookUpDomId(vertex.id),
+      haveCallback: vertex.haveCallback,
+      width: vertex.type === 'group' ? 500 : undefined,
+      dir: vertex.dir,
+      type: vertex.type,
+      props: vertex.props,
+      padding: getConfig().flowchart.padding,
+      x: nodeFromLayout.x,
+      y: nodeFromLayout.y,
+    };
+
+    let boundingBox;
+    let nodeEl;
+
+    // Add the element to the DOM
+
+    nodeEl = await insertNode(nodesElements, nodeObj, vertex.dir);
+    boundingBox = nodeEl.node().getBBox();
+    nodeEl.attr('transform', `translate(${nodeObj.x}, ${nodeObj.y / 2})`);
+  }
+
+  return elem;
+}
+
+/**
+ * Returns the all the styles from classDef statements in the graph definition.
+ *
+ * @param text
+ * @param diagObj
+ * @returns {object} ClassDef styles
+ */
+export const getClasses = function (text, diagObj) {
+  log.info('Extracting classes');
+  diagObj.db.clear();
+  try {
+    // Parse the graph definition
+    diagObj.parse(text);
+    return diagObj.db.getClasses();
+  } catch (e) {
+    return;
+  }
+};
+
+/**
+ * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
+ * @param text
+ * @param id
+ */
+
+export const draw = async function (text, id, _version, diagObj) {
+  log.info('Drawing flowchart');
+  diagObj.db.clear();
+  flowDb.setGen('gen-2');
+  // Parse the graph definition
+  diagObj.parser.parse(text);
+
+  const { securityLevel, flowchart: conf } = getConfig();
+
+  // Handle root and document for when rendering in sandbox mode
+  let sandboxElement;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? select(sandboxElement.nodes()[0].contentDocument.body)
+      : select('body');
+  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+
+  // create g as a graphlib graph using setupGraph from setup-graph.js
+  const g = setupGraph(diagObj, id, root, doc);
+
+  let subG;
+  const subGraphs = diagObj.db.getSubGraphs();
+  log.info('Subgraphs - ', subGraphs);
+  for (let i = subGraphs.length - 1; i >= 0; i--) {
+    subG = subGraphs[i];
+    log.info('Subgraph - ', subG);
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      'group',
+      undefined,
+      subG.classes,
+      subG.dir
+    );
+  }
+
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
+  const vert = diagObj.db.getVertices();
+
+  const edges = diagObj.db.getEdges();
+
+  log.info('Edges', edges);
+
+  const svg = root.select('#' + id);
+
+  svg.append('g');
+
+  // Run the renderer. This is what draws the final graph.
+  // const element = root.select('#' + id + ' g');
+  console.log('diagObj', diagObj);
+  console.log('subGraphs', diagObj.db.getSubGraphs());
+  const layout = swimlaneLayout(g, diagObj);
+  console.log('custom layout', layout);
+
+  // draw lanes as vertical lines
+  const lanesElements = svg.insert('g').attr('class', 'lanes');
+
+  let laneCount = 0;
+
+  for (const lane of layout.lanes) {
+    laneCount++;
+
+    //draw lane header as rectangle with lane title centered in it
+    const laneHeader = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+
+    // Set attributes for the rectangle
+    laneHeader.setAttribute('x', lane.x); // x-coordinate of the top-left corner
+    laneHeader.setAttribute('y', -50); // y-coordinate of the top-left corner
+    laneHeader.setAttribute('width', lane.width); // width of the rectangle
+    laneHeader.setAttribute('height', '50'); // height of the rectangle
+    if (laneCount % 2 == 0) {
+      //set light blue color for even lanes
+      laneHeader.setAttribute('fill', 'blue'); // fill color of the rectangle
+    } else {
+      //set white color odd lanes
+      laneHeader.setAttribute('fill', 'grey'); // fill color of the rectangle
+    }
+
+    laneHeader.setAttribute('stroke', 'black'); // color of the stroke/border
+    laneHeader.setAttribute('stroke-width', '2'); // width of the stroke/border
+
+    // Append the rectangle to the SVG element
+    lanesElements.node().appendChild(laneHeader);
+
+    //draw lane title
+    const laneTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
+    // Set attributes for the rectangle
+    laneTitle.setAttribute('x', lane.x + lane.width / 2); // x-coordinate of the top-left corner
+    laneTitle.setAttribute('y', -50 + 50 / 2); // y-coordinate of the top-left corner
+    laneTitle.setAttribute('width', lane.width); // width of the rectangle
+    laneTitle.setAttribute('height', '50'); // height of the rectangle
+    laneTitle.setAttribute('fill', 'white'); // fill color of the rectangle
+    laneTitle.setAttribute('stroke-width', '1'); // width of the stroke/border
+    laneTitle.setAttribute('text-anchor', 'middle'); // width of the stroke/border
+    laneTitle.setAttribute('alignment-baseline', 'middle'); // width of the stroke/border
+    laneTitle.setAttribute('font-size', '20'); // width of the stroke/border
+    laneTitle.textContent = lane.title;
+
+    // Append the rectangle to the SVG element
+    lanesElements.node().appendChild(laneTitle);
+
+    //draw lane
+
+    // Create a  element
+    const rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+
+    // Set attributes for the rectangle
+    rectangle.setAttribute('x', lane.x); // x-coordinate of the top-left corner
+    rectangle.setAttribute('y', 0); // y-coordinate of the top-left corner
+    rectangle.setAttribute('width', lane.width); // width of the rectangle
+    rectangle.setAttribute('height', '500'); // height of the rectangle
+
+    if (laneCount % 2 == 0) {
+      //set light blue color for even lanes
+      rectangle.setAttribute('fill', 'lightblue'); // fill color of the rectangle
+    } else {
+      //set white color odd lanes
+      rectangle.setAttribute('fill', '#ffffff'); // fill color of the rectangle
+    }
+
+    rectangle.setAttribute('stroke', 'black'); // color of the stroke/border
+    rectangle.setAttribute('stroke-width', '2'); // width of the stroke/border
+
+    // Append the rectangle to the SVG element
+    lanesElements.node().appendChild(rectangle);
+  }
+
+  // append lanesElements to elem
+  svg.node().appendChild(lanesElements.node());
+
+  // add lane headers
+  const laneHeaders = svg.insert('g').attr('class', 'laneHeaders');
+
+  addEdges(edges, g, diagObj);
+
+  g.edges().forEach(function (e) {
+    const edge = g.edge(e);
+    log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
+    const edgePaths = svg.insert('g').attr('class', 'edgePaths');
+    //create edge points based on start and end node
+
+    //get start node x, y coordinates
+    const sourceNode = layout.graph.node(e.v);
+    //get end node x, y coordinates
+    sourceNode.x = sourceNode.x;
+    sourceNode.y = sourceNode.y;
+
+    const targetNode = layout.graph.node(e.w);
+    targetNode.x = targetNode.x;
+    targetNode.y = targetNode.y;
+
+    edge.points = [];
+    edge.points.push({ x: sourceNode.x, y: sourceNode.y / 2 });
+    edge.points.push({ x: targetNode.x, y: targetNode.y / 2 });
+
+    const paths = insertEdge(edgePaths, e, edge, clusterDb, 'flowchart', g);
+    //positionEdgeLabel(edge, paths);
+  });
+  await swimlaneRender(layout, vert, svg, g, id, conf);
+
+  // utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
+  setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
+};
+
+export default {
+  setConf,
+  addVertices,
+  addEdges,
+  getClasses,
+  draw,
+};

From ccdb8035012b221317d3804c54f3354c0517989d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Tue, 5 Sep 2023 15:15:08 +0200
Subject: [PATCH 051/193] Rendering, interim

---
 packages/mermaid/src/dagre-wrapper/nodes.js   |  28 +--
 .../mermaid/src/dagre-wrapper/shapes/util.js  |   3 +
 .../mermaid/src/diagrams/block/blockDB.ts     |   3 -
 .../src/diagrams/block/blockRenderer.ts       |   7 +-
 packages/mermaid/src/diagrams/block/layout.ts |   5 -
 .../src/diagrams/block/renderHelpers.ts       | 175 ++++--------------
 6 files changed, 61 insertions(+), 160 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index e6a9d982a..e9324171b 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -323,8 +323,12 @@ const rect = async (parent, node) => {
 
   // const totalWidth = bbox.width + node.padding * 2;
   // const totalHeight = bbox.height + node.padding * 2;
-  const totalWidth = bbox.width + node.padding;
-  const totalHeight = bbox.height + node.padding;
+  const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
+  const totalHeight = node.positioned ? node.height : bbox.height + node.padding;
+  const x = node.positioned ? node.x - node.width / 2 - halfPadding : -bbox.width / 2 - halfPadding;
+  const y = node.positioned
+    ? node.y - node.height / 2 - halfPadding
+    : -bbox.height / 2 - halfPadding;
   rect
     .attr('class', 'basic label-container')
     .attr('style', node.style)
@@ -332,8 +336,8 @@ const rect = async (parent, node) => {
     .attr('ry', node.ry)
     // .attr('x', -bbox.width / 2 - node.padding)
     // .attr('y', -bbox.height / 2 - node.padding)
-    .attr('x', -bbox.width / 2 - halfPadding)
-    .attr('y', -bbox.height / 2 - halfPadding)
+    .attr('x', x)
+    .attr('y', y)
     .attr('width', totalWidth)
     .attr('height', totalHeight);
 
@@ -1037,14 +1041,14 @@ export const positionNode = (node) => {
   const padding = 8;
   const diff = node.diff || 0;
   if (node.clusterNode) {
-      el.attr(
-        'transform',
-        'translate(' +
-          (node.x + diff - node.width / 2) +
-          ', ' +
-          (node.y - node.height / 2 - padding) +
-          ')'
-      );
+    el.attr(
+      'transform',
+      'translate(' +
+        (node.x + diff - node.width / 2) +
+        ', ' +
+        (node.y - node.height / 2 - padding) +
+        ')'
+    );
   } else {
     el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
   }
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 3eaedb4b9..2230547ff 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -113,6 +113,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
     label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
   }
   label.insert('rect', ':first-child');
+  // if (node.positioned) {
+  //   shapeSvg.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+  // }
   return { shapeSvg, bbox, halfPadding, label };
 };
 
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 039353830..84c653605 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -103,17 +103,14 @@ const getColumns = (blockid: string): number => {
 
 type IGetBlocks = () => Block[];
 const getBlocks: IGetBlocks = () => {
-  log.info('Block in test', blocks, blocks[0].id);
   return blocks || [];
 };
 type IGetBlock = (id: string) => Block | undefined;
 const getBlock: IGetBlock = (id: string) => {
-  log.info('Block in test', blocks, blocks[0].id);
   return blockDatabase[id];
 };
 type ISetBlock = (block: Block) => void;
 const setBlock: ISetBlock = (block: Block) => {
-  log.info('Block in test', blocks, blocks[0].id);
   blockDatabase[block.id] = block;
 };
 
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 0dac714d4..932537786 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -1,6 +1,6 @@
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
-import { calculateBlockSizes } from './renderHelpers.js';
+import { calculateBlockSizes, insertBlocks } from './renderHelpers.js';
 import { layout } from './layout.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import {
@@ -42,14 +42,15 @@ export const draw = async function (
   const nodes = svg.insert('g').attr('class', 'block');
   await calculateBlockSizes(nodes, bl, db);
   const bounds = layout(db);
+  await insertBlocks(nodes, bl, db);
 
   console.log('Here', bl);
 
   // Establish svg dimensions and get width and height
   //
   // const bounds = nodes.node().getBoundingClientRect();
-  const height = bounds.height;
-  const width = bounds.width;
+  const height = bounds.height + 600;
+  const width = bounds.width + 699;
   const useMaxWidth = false;
   configureSvgSize(svg, height, width, useMaxWidth);
   console.log('Here Bounds', bounds);
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 65b99c154..2d6100229 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -42,13 +42,9 @@ function layoutBLock(block: Block, db: BlockDB) {
 }
 
 function positionBlock(block: Block, db: BlockDB) {
-  console.log('Here Positioning', block?.size?.node);
-  // const o = db.getBlock(block.id);
-  // const node;
   if (block?.size?.node) {
     const node = block?.size?.node;
     const size = block?.size;
-    console.log('Here as well', node);
     if (node) {
       node.attr(
         'transform',
@@ -70,7 +66,6 @@ let maxY = 0;
 function findBounds(block: Block) {
   if (block.size) {
     const { x, y, width, height } = block.size;
-    console.log('Here', minX, minY, x, y, width, height);
     if (x - width < minX) {
       minX = x - width;
     }
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 34d8baa05..1b29b4536 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -5,7 +5,7 @@ import { ContainerElement } from 'd3';
 import type { Block } from './blockTypes.js';
 import { BlockDB } from './blockDB.js';
 
-function getNodeFromBlock(block: Block, db: BlockDB) {
+function getNodeFromBlock(block: Block, db: BlockDB, positioned: boolean = false) {
   const vertex = block;
 
   /**
@@ -93,6 +93,7 @@ function getNodeFromBlock(block: Block, db: BlockDB) {
   // Use vertex id as text in the box if no text is provided by the graph definition
   const vertexText = vertex.label;
 
+  const bounds = vertex.size || { width: 0, height: 0, x: 0, y: 0 };
   // Add the node
   const node = {
     labelStyle: styles.labelStyle,
@@ -111,160 +112,60 @@ function getNodeFromBlock(block: Block, db: BlockDB) {
     // haveCallback: vertex.haveCallback,
     // width: vertex.type === 'group' ? 500 : undefined,
     // dir: vertex.dir,
+    width: bounds.width,
+    height: bounds.height,
+    x: bounds.x,
+    y: bounds.y,
+    positioned,
     type: vertex.type,
     // props: vertex.props,
     padding: getConfig()?.flowchart?.padding || 0,
   };
   return node;
 }
-
+type IOperation = (elem: any, block: any, db: any) => Promise;
 async function calculateBlockSize(elem: any, block: any, db: any) {
-  console.log('Here befoire 3');
-  const node = getNodeFromBlock(block, db);
+  const node = getNodeFromBlock(block, db, false);
   if (node.type === 'group') return;
 
   // Add the element to the DOM to size it
   const nodeEl = await insertNode(elem, node);
   const boundingBox = nodeEl.node().getBBox();
   const obj = db.getBlock(node.id);
-  console.log('Here el', nodeEl);
   obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
+  console.log('Here boundsíng', boundingBox.width);
   db.setBlock(obj);
-  // nodeEl.remove();
+  nodeEl.remove();
+}
+
+export async function insertBlockPositioned(elem: any, block: any, db: any) {
+  console.log('Here insertBlockPositioned');
+  const node = getNodeFromBlock(block, db, true);
+  if (node.type === 'group') return;
+
+  // Add the element to the DOM to size it
+  const obj = db.getBlock(node.id);
+  const nodeEl = await insertNode(elem, node);
+}
+
+export async function performOperations(
+  elem: ContainerElement,
+  blocks: Block[],
+  db: BlockDB,
+  operation: IOperation
+) {
+  for (const block of blocks) {
+    await operation(elem, block, db);
+    if (block.children) {
+      await performOperations(elem, block.children, db, operation);
+    }
+  }
 }
 
 export async function calculateBlockSizes(elem: ContainerElement, blocks: Block[], db: BlockDB) {
-  console.log('Here before 2');
-  for (const block of blocks) {
-    await calculateBlockSize(elem, block, db);
-    if (block.children) {
-      await calculateBlockSizes(elem, block.children, db);
-    }
-  }
+  await performOperations(elem, blocks, db, calculateBlockSize);
 }
-export async function insertBlockPositioned(elem: any, block: any, db: any) {
-  const vertex = block;
 
-  /**
-   * Variable for storing the classes for the vertex
-   *
-   * @type {string}
-   */
-  let classStr = 'default';
-  if ((vertex?.classes?.length || []) > 0) {
-    classStr = vertex.classes.join(' ');
-  }
-  classStr = classStr + ' flowchart-label';
-
-  // We create a SVG label, either by delegating to addHtmlLabel or manually
-  let vertexNode;
-  const labelData = { width: 0, height: 0 };
-
-  let radious = 0;
-  let _shape = '';
-  let layoutOptions = {};
-  // Set the shape based parameters
-  switch (vertex.type) {
-    case 'round':
-      radious = 5;
-      _shape = 'rect';
-      break;
-    case 'square':
-      _shape = 'rect';
-      break;
-    case 'diamond':
-      _shape = 'question';
-      layoutOptions = {
-        portConstraints: 'FIXED_SIDE',
-      };
-      break;
-    case 'hexagon':
-      _shape = 'hexagon';
-      break;
-    case 'odd':
-      _shape = 'rect_left_inv_arrow';
-      break;
-    case 'lean_right':
-      _shape = 'lean_right';
-      break;
-    case 'lean_left':
-      _shape = 'lean_left';
-      break;
-    case 'trapezoid':
-      _shape = 'trapezoid';
-      break;
-    case 'inv_trapezoid':
-      _shape = 'inv_trapezoid';
-      break;
-    case 'odd_right':
-      _shape = 'rect_left_inv_arrow';
-      break;
-    case 'circle':
-      _shape = 'circle';
-      break;
-    case 'ellipse':
-      _shape = 'ellipse';
-      break;
-    case 'stadium':
-      _shape = 'stadium';
-      break;
-    case 'subroutine':
-      _shape = 'subroutine';
-      break;
-    case 'cylinder':
-      _shape = 'cylinder';
-      break;
-    case 'group':
-      _shape = 'rect';
-      break;
-    case 'doublecircle':
-      _shape = 'doublecircle';
-      break;
-    default:
-      _shape = 'rect';
-  }
-
-  // const styles = getStylesFromArray(vertex.styles);
-  const styles = getStylesFromArray([]);
-
-  // Use vertex id as text in the box if no text is provided by the graph definition
-  const vertexText = vertex.label;
-
-  // Add the node
-  const node = {
-    labelStyle: styles.labelStyle,
-    shape: _shape,
-    labelText: vertexText,
-    labelType: vertex.labelType,
-    rx: radious,
-    ry: radious,
-    class: classStr,
-    style: styles.style,
-    id: vertex.id,
-    link: vertex.link,
-    linkTarget: vertex.linkTarget,
-    // tooltip: diagObj.db.getTooltip(vertex.id) || '',
-    // domId: diagObj.db.lookUpDomId(vertex.id),
-    haveCallback: vertex.haveCallback,
-    width: vertex.width,
-    height: vertex.height,
-    dir: vertex.dir,
-    type: vertex.type,
-    props: vertex.props,
-    padding: getConfig()?.flowchart?.padding || 0,
-  };
-  let boundingBox;
-  let nodeEl;
-
-  // Add the element to the DOM
-  if (node.type !== 'group') {
-    nodeEl = await insertNode(elem, node, vertex.dir);
-    // nodeEl.remove();
-    boundingBox = nodeEl.node().getBBox();
-    if (node.id) {
-      const obj = db.getBlock(node.id);
-      obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
-      db.setBlock(obj);
-    }
-  }
+export async function insertBlocks(elem: ContainerElement, blocks: Block[], db: BlockDB) {
+  await performOperations(elem, blocks, db, insertBlockPositioned);
 }

From 836d3a87beb2b585fad9ac6e5b90f835fb876222 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 14 Sep 2023 10:11:43 +0200
Subject: [PATCH 052/193] WIP

---
 cypress/platform/knsv2.html                   | 12 ++-
 packages/mermaid/src/dagre-wrapper/nodes.js   | 98 +++++++++----------
 .../src/diagrams/block/blockRenderer.ts       | 22 +++--
 packages/mermaid/src/diagrams/block/layout.ts | 19 ++--
 .../src/diagrams/block/renderHelpers.ts       |  3 +-
 5 files changed, 84 insertions(+), 70 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 4609331dd..36afc1d03 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -26,6 +26,8 @@
       }
       .mermaid {
         border: 1px solid #ddd;
+        margin: 10px;
+        background: pink;
       }
       .mermaid2 {
         display: none;
@@ -38,6 +40,7 @@
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
+        border: 1px solid red;
       }
       .malware {
         position: fixed;
@@ -62,10 +65,13 @@
   
     
     block-beta
-  id1("Wide 1")
+  %% id1("Wide 1")
   id2("2")
-  id3("3")
-  id4("A final one")
+  block
+      id3
+      id4
+  end
+  %% id4("A final one")
 
     
    
     
    diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index e9324171b..9e57fb2b0 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -27,7 +27,7 @@ const question = async (parent, node) => {
   questionElem.attr('style', node.style);
   updateNodeBounds(node, questionElem);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     log.warn('Intersect called');
     return intersect.polygon(node, points, point);
   };
@@ -52,7 +52,7 @@ const choice = (parent, node) => {
   const choice = shapeSvg.insert('polygon', ':first-child').attr(
     'points',
     points
-      .map(function (d) {
+      .map(function(d) {
         return d.x + ',' + d.y;
       })
       .join(' ')
@@ -62,7 +62,7 @@ const choice = (parent, node) => {
   node.width = 28;
   node.height = 28;
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.circle(node, 14, point);
   };
 
@@ -89,7 +89,7 @@ const hexagon = async (parent, node) => {
   hex.attr('style', node.style);
   updateNodeBounds(node, hex);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -115,7 +115,7 @@ const rect_left_inv_arrow = async (parent, node) => {
   node.width = w + h;
   node.height = h;
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -138,7 +138,7 @@ const lean_right = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -161,7 +161,7 @@ const lean_left = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -184,7 +184,7 @@ const trapezoid = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -207,7 +207,7 @@ const inv_trapezoid = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -231,7 +231,7 @@ const rect_right_inv_arrow = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -281,7 +281,7 @@ const cylinder = async (parent, node) => {
 
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     const pos = intersect.rect(node, point);
     const x = pos.x - node.x;
 
@@ -325,17 +325,13 @@ const rect = async (parent, node) => {
   // const totalHeight = bbox.height + node.padding * 2;
   const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
   const totalHeight = node.positioned ? node.height : bbox.height + node.padding;
-  const x = node.positioned ? node.x - node.width / 2 - halfPadding : -bbox.width / 2 - halfPadding;
-  const y = node.positioned
-    ? node.y - node.height / 2 - halfPadding
-    : -bbox.height / 2 - halfPadding;
+  const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;
+  const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;
   rect
     .attr('class', 'basic label-container')
     .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
-    // .attr('x', -bbox.width / 2 - node.padding)
-    // .attr('y', -bbox.height / 2 - node.padding)
     .attr('x', x)
     .attr('y', y)
     .attr('width', totalWidth)
@@ -354,7 +350,7 @@ const rect = async (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.rect(node, point);
   };
 
@@ -387,7 +383,7 @@ const labelRect = async (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.rect(node, point);
   };
 
@@ -499,20 +495,20 @@ const rectWithTitle = (parent, node) => {
   select(descr).attr(
     'transform',
     'translate( ' +
-      // (titleBox.width - bbox.width) / 2 +
-      (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
-      ', ' +
-      (titleBox.height + halfPadding + 5) +
-      ')'
+    // (titleBox.width - bbox.width) / 2 +
+    (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
+    ', ' +
+    (titleBox.height + halfPadding + 5) +
+    ')'
   );
   select(text).attr(
     'transform',
     'translate( ' +
-      // (titleBox.width - bbox.width) / 2 +
-      (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
-      ', ' +
-      0 +
-      ')'
+    // (titleBox.width - bbox.width) / 2 +
+    (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
+    ', ' +
+    0 +
+    ')'
   );
   // Get the size of the label
 
@@ -541,7 +537,7 @@ const rectWithTitle = (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.rect(node, point);
   };
 
@@ -567,7 +563,7 @@ const stadium = async (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.rect(node, point);
   };
 
@@ -591,7 +587,7 @@ const circle = async (parent, node) => {
 
   updateNodeBounds(node, circle);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);
     return intersect.circle(node, bbox.width / 2 + halfPadding, point);
   };
@@ -629,7 +625,7 @@ const doublecircle = async (parent, node) => {
 
   updateNodeBounds(node, outerCircle);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);
     return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);
   };
@@ -659,7 +655,7 @@ const subroutine = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -678,7 +674,7 @@ const start = (parent, node) => {
 
   updateNodeBounds(node, circle);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.circle(node, 7, point);
   };
 
@@ -710,7 +706,7 @@ const forkJoin = (parent, node, dir) => {
   updateNodeBounds(node, shape);
   node.height = node.height + node.padding / 2;
   node.width = node.width + node.padding / 2;
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.rect(node, point);
   };
 
@@ -731,7 +727,7 @@ const end = (parent, node) => {
 
   updateNodeBounds(node, circle);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.circle(node, 7, point);
   };
 
@@ -896,10 +892,10 @@ const class_box = (parent, node) => {
   select(classTitleLabel).attr(
     'transform',
     'translate( ' +
-      ((-1 * maxWidth) / 2 + diffX) +
-      ', ' +
-      ((-1 * maxHeight) / 2 + verticalPos) +
-      ')'
+    ((-1 * maxWidth) / 2 + diffX) +
+    ', ' +
+    ((-1 * maxHeight) / 2 + verticalPos) +
+    ')'
   );
   verticalPos += classTitleBBox.height + rowPadding;
 
@@ -916,10 +912,10 @@ const class_box = (parent, node) => {
     select(lbl).attr(
       'transform',
       'translate( ' +
-        -maxWidth / 2 +
-        ', ' +
-        ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
-        ')'
+      -maxWidth / 2 +
+      ', ' +
+      ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
+      ')'
     );
     //get the height of the bounding box of each member if exists
     const memberBBox = lbl?.getBBox();
@@ -954,7 +950,7 @@ const class_box = (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function (point) {
+  node.intersect = function(point) {
     return intersect.rect(node, point);
   };
 
@@ -1030,8 +1026,8 @@ export const clear = () => {
 };
 
 export const positionNode = (node) => {
+  console.log('Node id = ', node.id);
   const el = nodeElems[node.id];
-
   log.trace(
     'Transforming node',
     node.diff,
@@ -1044,10 +1040,10 @@ export const positionNode = (node) => {
     el.attr(
       'transform',
       'translate(' +
-        (node.x + diff - node.width / 2) +
-        ', ' +
-        (node.y - node.height / 2 - padding) +
-        ')'
+      (node.x + diff - node.width / 2) +
+      ', ' +
+      (node.y - node.height / 2 - padding) +
+      ')'
     );
   } else {
     el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 932537786..a8bf1fe49 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -16,6 +16,7 @@ import type { Block } from './blockTypes.js';
 // import { diagram as BlockDiagram } from './blockDiagram.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
+import { pad } from 'lodash';
 
 export const draw = async function (
   text: string,
@@ -42,19 +43,28 @@ export const draw = async function (
   const nodes = svg.insert('g').attr('class', 'block');
   await calculateBlockSizes(nodes, bl, db);
   const bounds = layout(db);
+  console.log('Here blocks', bl);
   await insertBlocks(nodes, bl, db);
 
-  console.log('Here', bl);
+  // console.log('Here', bl);
 
   // Establish svg dimensions and get width and height
   //
-  // const bounds = nodes.node().getBoundingClientRect();
-  const height = bounds.height + 600;
-  const width = bounds.width + 699;
+  // const bounds2 = nodes.node().getBoundingClientRect();
+  const bounds2 = bounds;
+  const padding = 10;
+  // Why, oh why ????
+  const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
+  const height = bounds2.height + magicFactor + 10;
+  const width = bounds2.width + 10;
   const useMaxWidth = false;
   configureSvgSize(svg, height, width, useMaxWidth);
-  console.log('Here Bounds', bounds);
-  svg.attr('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);
+  console.log('Here Bounds', bounds, bounds2);
+  svg.attr(
+    'viewBox',
+    `${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
+  );
+  // svg.attr('viewBox', `${-200} ${-200} ${400} ${400}`);
 
   // Prepare data for construction based on diagObj.db
   // This must be a mutable object with `nodes` and `links` properties:
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 2d6100229..b745ce1b9 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -66,17 +66,17 @@ let maxY = 0;
 function findBounds(block: Block) {
   if (block.size) {
     const { x, y, width, height } = block.size;
-    if (x - width < minX) {
-      minX = x - width;
+    if (x - width / 2 < minX) {
+      minX = x - width / 2;
     }
-    if (y - height < minY) {
-      minY = y - height;
+    if (y - height / 2 < minY) {
+      minY = y - height / 2;
     }
-    if (x > maxX) {
-      maxX = x;
+    if (x + width / 2 > maxX) {
+      maxX = x + width / 2;
     }
-    if (y > maxY) {
-      maxY = y;
+    if (y + height / 2 > maxY) {
+      maxY = y + height / 2;
     }
   }
   if (block.children) {
@@ -90,13 +90,14 @@ export function layout(db: BlockDB) {
   const blocks = db.getBlocks();
   const root = { id: 'root', type: 'composite', children: blocks } as Block;
   layoutBLock(root, db);
-  positionBlock(root, db);
+  // positionBlock(root, db);
 
   minX = 0;
   minY = 0;
   maxX = 0;
   maxY = 0;
   findBounds(root);
+  console.log('Here maxX', maxX);
   const height = maxY - minY;
   const width = maxX - minX;
   return { x: minX, y: minY, width, height };
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 1b29b4536..cb7833050 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -1,5 +1,5 @@
 import { getStylesFromArray } from '../../utils.js';
-import { insertNode } from '../../dagre-wrapper/nodes.js';
+import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
 import { getConfig } from '../../config.js';
 import { ContainerElement } from 'd3';
 import type { Block } from './blockTypes.js';
@@ -146,6 +146,7 @@ export async function insertBlockPositioned(elem: any, block: any, db: any) {
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
   const nodeEl = await insertNode(elem, node);
+  positionNode(node);
 }
 
 export async function performOperations(

From b4e32542e8ad26a39605603051302f0adf6a679d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Tue, 3 Oct 2023 12:56:47 +0200
Subject: [PATCH 053/193] #3358 Recursive positioning

---
 cypress/platform/knsv2.html                   | 10 +++-
 .../mermaid/src/diagrams/block/blockDB.ts     |  6 ++-
 packages/mermaid/src/diagrams/block/layout.ts | 50 ++++++++++++-------
 .../src/diagrams/block/parser/block.jison     |  2 +-
 .../src/diagrams/block/renderHelpers.ts       | 11 ++--
 5 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 36afc1d03..786ee2692 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -68,11 +68,19 @@ block-beta
   %% id1("Wide 1")
   id2("2")
   block
-      id3
+      id3["I am a wide one"]
       id4
   end
   %% id4("A final one")
 
+    
    
+    
    +block-beta
+
+      id3["I am a wide one"]
+      id4
+
+
     
    
     
     flowchart RL
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 84c653605..50af7965f 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -26,7 +26,11 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
       parent.columns = columns;
     } else {
       if (!block.label) {
-        block.label = block.id;
+        if (block.type === 'composite') {
+          block.label = 'x';
+        } else {
+          block.label = block.id;
+        }
       }
       blockDatabase[block.id] = block;
 
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index b745ce1b9..e008d7882 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -1,10 +1,12 @@
 import { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
 
-function layoutBLock(block: Block, db: BlockDB) {
+function calcBlockSizes(block: Block, db: BlockDB) {
+  let totalWidth = 0;
+  let totalHeight = 0;
   if (block.children) {
     for (const child of block.children) {
-      layoutBLock(child, db);
+      calcBlockSizes(child, db);
     }
     // find max width of children
     let maxWidth = 0;
@@ -27,9 +29,9 @@ function layoutBLock(block: Block, db: BlockDB) {
       }
     }
 
-    // Position items
+    // Position items relative to self
     let x = 0;
-    let y = 0;
+    const y = 0;
     const padding = 10;
     for (const child of block.children) {
       if (child.size) {
@@ -37,26 +39,38 @@ function layoutBLock(block: Block, db: BlockDB) {
         child.size.y = y;
         x += maxWidth + padding;
       }
+      if (x > totalWidth) {
+        totalWidth = x;
+      }
+      if (y > totalHeight) {
+        totalHeight = y;
+      }
     }
   }
+  if (block.children?.length > 0) {
+    block.size = { width: totalWidth, height: totalHeight, x: 0, y: 0 };
+  }
+  console.log('layoutBlock (done)', block);
 }
 
-function positionBlock(block: Block, db: BlockDB) {
-  if (block?.size?.node) {
-    const node = block?.size?.node;
-    const size = block?.size;
-    if (node) {
-      node.attr(
-        'transform',
-        'translate(' + (size.x - size.width / 2) + ', ' + (size.y - size.height / 2) + ')'
-      );
-    }
+function positionBlock(parent: Block, block: Block, db: BlockDB) {
+  console.log('layout position block', parent.id, parent?.size?.x, block.id, block?.size?.x);
+  let x = 0;
+  let y = 0;
+  if (parent) {
+    x = parent?.size?.x || 0;
+    y = parent?.size?.y || 0;
+  }
+  if (block.size) {
+    block.size.x = block.size.x + x - block.size.width / 2;
+    block.size.y = block.size.y + y;
   }
   if (block.children) {
     for (const child of block.children) {
-      positionBlock(child, db);
+      positionBlock(block, child, db);
     }
   }
+  // console.log('layout position block', block);
 }
 let minX = 0;
 let minY = 0;
@@ -89,8 +103,10 @@ function findBounds(block: Block) {
 export function layout(db: BlockDB) {
   const blocks = db.getBlocks();
   const root = { id: 'root', type: 'composite', children: blocks } as Block;
-  layoutBLock(root, db);
-  // positionBlock(root, db);
+  calcBlockSizes(root, db);
+  console.log('layout getBlocks', db.getBlocks());
+  // Position blocks relative to parents
+  positionBlock(root, root, db);
 
   minX = 0;
   minY = 0;
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 9cc220ff4..32b7c28e2 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -191,7 +191,7 @@ columnsStatement
 
 blockStatement
   : id-block nodeStatement document end { yy.getLogger().info('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, children: $3 }; }
-  | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:id, children: $2 }; }
+  | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
   ;
 
 
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index cb7833050..a17cda607 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -5,7 +5,7 @@ import { ContainerElement } from 'd3';
 import type { Block } from './blockTypes.js';
 import { BlockDB } from './blockDB.js';
 
-function getNodeFromBlock(block: Block, db: BlockDB, positioned: boolean = false) {
+function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   const vertex = block;
 
   /**
@@ -126,7 +126,9 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned: boolean = false
 type IOperation = (elem: any, block: any, db: any) => Promise;
 async function calculateBlockSize(elem: any, block: any, db: any) {
   const node = getNodeFromBlock(block, db, false);
-  if (node.type === 'group') return;
+  if (node.type === 'group') {
+    return;
+  }
 
   // Add the element to the DOM to size it
   const nodeEl = await insertNode(elem, node);
@@ -141,8 +143,9 @@ async function calculateBlockSize(elem: any, block: any, db: any) {
 export async function insertBlockPositioned(elem: any, block: any, db: any) {
   console.log('Here insertBlockPositioned');
   const node = getNodeFromBlock(block, db, true);
-  if (node.type === 'group') return;
-
+  // if (node.type === 'composite') {
+  //   return;
+  // }
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
   const nodeEl = await insertNode(elem, node);

From f00871a6b467b9a77cf794924378a0656d3858d8 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Tue, 3 Oct 2023 14:19:08 +0200
Subject: [PATCH 054/193] #3358 Recursive positioning

---
 cypress/platform/knsv2.html                   |  11 +-
 packages/mermaid/src/dagre-wrapper/nodes.js   | 137 +++++++++----
 .../mermaid/src/diagrams/block/blockDB.ts     |   2 +-
 packages/mermaid/src/diagrams/block/layout.ts |  40 ++--
 .../src/diagrams/block/renderHelpers.ts       |   5 +
 packages/mermaid/src/diagrams/block/styles.ts |  10 +-
 ....timestamp-1696335530501-05072b5e79635.mjs | 190 ++++++++++++++++++
 7 files changed, 326 insertions(+), 69 deletions(-)
 create mode 100644 vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 786ee2692..6e69533eb 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -69,12 +69,15 @@ block-beta
   id2("2")
   block
       id3["I am a wide one"]
-      id4
+      block
+        id44("A final one")
+        id45("B final one")
+      end
   end
-  %% id4("A final one")
+  id4("Another final one")
 
     
    
-    
    +    
     block-beta
 
       id3["I am a wide one"]
@@ -84,7 +87,9 @@ block-beta
     
    
     
     flowchart RL
+  subgraph "`one`"
     id
+  end
     
    
     
     flowchart RL
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 9e57fb2b0..b95265f31 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -27,7 +27,7 @@ const question = async (parent, node) => {
   questionElem.attr('style', node.style);
   updateNodeBounds(node, questionElem);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     log.warn('Intersect called');
     return intersect.polygon(node, points, point);
   };
@@ -52,7 +52,7 @@ const choice = (parent, node) => {
   const choice = shapeSvg.insert('polygon', ':first-child').attr(
     'points',
     points
-      .map(function(d) {
+      .map(function (d) {
         return d.x + ',' + d.y;
       })
       .join(' ')
@@ -62,7 +62,7 @@ const choice = (parent, node) => {
   node.width = 28;
   node.height = 28;
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.circle(node, 14, point);
   };
 
@@ -89,7 +89,7 @@ const hexagon = async (parent, node) => {
   hex.attr('style', node.style);
   updateNodeBounds(node, hex);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -115,7 +115,7 @@ const rect_left_inv_arrow = async (parent, node) => {
   node.width = w + h;
   node.height = h;
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -138,7 +138,7 @@ const lean_right = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -161,7 +161,7 @@ const lean_left = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -184,7 +184,7 @@ const trapezoid = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -207,7 +207,7 @@ const inv_trapezoid = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -231,7 +231,7 @@ const rect_right_inv_arrow = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -281,7 +281,7 @@ const cylinder = async (parent, node) => {
 
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     const pos = intersect.rect(node, point);
     const x = pos.x - node.x;
 
@@ -350,7 +350,55 @@ const rect = async (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};
+
+const composite = async (parent, node) => {
+  console.log('This got called');
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    'node ' + node.classes,
+    true
+  );
+
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  // const totalWidth = bbox.width + node.padding * 2;
+  // const totalHeight = bbox.height + node.padding * 2;
+  const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
+  const totalHeight = node.positioned ? node.height : bbox.height + node.padding;
+  const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;
+  const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;
+  rect
+    .attr('class', 'basic cluster composite label-container')
+    .attr('style', node.style)
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', x)
+    .attr('y', y)
+    .attr('width', totalWidth)
+    .attr('height', totalHeight);
+
+  if (node.props) {
+    const propKeys = new Set(Object.keys(node.props));
+    if (node.props.borders) {
+      applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
+      propKeys.delete('borders');
+    }
+    propKeys.forEach((propKey) => {
+      log.warn(`Unknown node property ${propKey}`);
+    });
+  }
+
+  updateNodeBounds(node, rect);
+
+  node.intersect = function (point) {
     return intersect.rect(node, point);
   };
 
@@ -383,7 +431,7 @@ const labelRect = async (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.rect(node, point);
   };
 
@@ -495,20 +543,20 @@ const rectWithTitle = (parent, node) => {
   select(descr).attr(
     'transform',
     'translate( ' +
-    // (titleBox.width - bbox.width) / 2 +
-    (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
-    ', ' +
-    (titleBox.height + halfPadding + 5) +
-    ')'
+      // (titleBox.width - bbox.width) / 2 +
+      (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
+      ', ' +
+      (titleBox.height + halfPadding + 5) +
+      ')'
   );
   select(text).attr(
     'transform',
     'translate( ' +
-    // (titleBox.width - bbox.width) / 2 +
-    (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
-    ', ' +
-    0 +
-    ')'
+      // (titleBox.width - bbox.width) / 2 +
+      (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
+      ', ' +
+      0 +
+      ')'
   );
   // Get the size of the label
 
@@ -537,7 +585,7 @@ const rectWithTitle = (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.rect(node, point);
   };
 
@@ -563,7 +611,7 @@ const stadium = async (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.rect(node, point);
   };
 
@@ -587,7 +635,7 @@ const circle = async (parent, node) => {
 
   updateNodeBounds(node, circle);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);
     return intersect.circle(node, bbox.width / 2 + halfPadding, point);
   };
@@ -625,7 +673,7 @@ const doublecircle = async (parent, node) => {
 
   updateNodeBounds(node, outerCircle);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);
     return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);
   };
@@ -655,7 +703,7 @@ const subroutine = async (parent, node) => {
   el.attr('style', node.style);
   updateNodeBounds(node, el);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.polygon(node, points, point);
   };
 
@@ -674,7 +722,7 @@ const start = (parent, node) => {
 
   updateNodeBounds(node, circle);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.circle(node, 7, point);
   };
 
@@ -706,7 +754,7 @@ const forkJoin = (parent, node, dir) => {
   updateNodeBounds(node, shape);
   node.height = node.height + node.padding / 2;
   node.width = node.width + node.padding / 2;
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.rect(node, point);
   };
 
@@ -727,7 +775,7 @@ const end = (parent, node) => {
 
   updateNodeBounds(node, circle);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.circle(node, 7, point);
   };
 
@@ -892,10 +940,10 @@ const class_box = (parent, node) => {
   select(classTitleLabel).attr(
     'transform',
     'translate( ' +
-    ((-1 * maxWidth) / 2 + diffX) +
-    ', ' +
-    ((-1 * maxHeight) / 2 + verticalPos) +
-    ')'
+      ((-1 * maxWidth) / 2 + diffX) +
+      ', ' +
+      ((-1 * maxHeight) / 2 + verticalPos) +
+      ')'
   );
   verticalPos += classTitleBBox.height + rowPadding;
 
@@ -912,10 +960,10 @@ const class_box = (parent, node) => {
     select(lbl).attr(
       'transform',
       'translate( ' +
-      -maxWidth / 2 +
-      ', ' +
-      ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
-      ')'
+        -maxWidth / 2 +
+        ', ' +
+        ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
+        ')'
     );
     //get the height of the bounding box of each member if exists
     const memberBBox = lbl?.getBBox();
@@ -950,7 +998,7 @@ const class_box = (parent, node) => {
 
   updateNodeBounds(node, rect);
 
-  node.intersect = function(point) {
+  node.intersect = function (point) {
     return intersect.rect(node, point);
   };
 
@@ -959,6 +1007,7 @@ const class_box = (parent, node) => {
 
 const shapes = {
   rhombus: question,
+  composite,
   question,
   rect,
   labelRect,
@@ -1040,10 +1089,10 @@ export const positionNode = (node) => {
     el.attr(
       'transform',
       'translate(' +
-      (node.x + diff - node.width / 2) +
-      ', ' +
-      (node.y - node.height / 2 - padding) +
-      ')'
+        (node.x + diff - node.width / 2) +
+        ', ' +
+        (node.y - node.height / 2 - padding) +
+        ')'
     );
   } else {
     el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 50af7965f..2dce9e323 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -27,7 +27,7 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
     } else {
       if (!block.label) {
         if (block.type === 'composite') {
-          block.label = 'x';
+          block.label = '';
         } else {
           block.label = block.id;
         }
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index e008d7882..8756646ef 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -2,15 +2,17 @@ import { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
 
 function calcBlockSizes(block: Block, db: BlockDB) {
-  let totalWidth = 0;
-  let totalHeight = 0;
+  const totalWidth = 0;
+  const totalHeight = 0;
+  let maxWidth = 0;
+  let maxHeight = 0;
+  const padding = 20;
+
   if (block.children) {
     for (const child of block.children) {
       calcBlockSizes(child, db);
     }
     // find max width of children
-    let maxWidth = 0;
-    let maxHeight = 0;
     for (const child of block.children) {
       const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
       if (width > maxWidth) {
@@ -30,39 +32,41 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     }
 
     // Position items relative to self
-    let x = 0;
+    let x = -padding / 2;
     const y = 0;
-    const padding = 10;
+
+    let accumulatedPaddingX = 0;
     for (const child of block.children) {
       if (child.size) {
         child.size.x = x;
         child.size.y = y;
         x += maxWidth + padding;
       }
-      if (x > totalWidth) {
-        totalWidth = x;
-      }
-      if (y > totalHeight) {
-        totalHeight = y;
-      }
+      accumulatedPaddingX += padding;
     }
   }
   if (block.children?.length > 0) {
-    block.size = { width: totalWidth, height: totalHeight, x: 0, y: 0 };
+    const numChildren = block.children.length;
+    block.size = {
+      width: numChildren * (maxWidth + padding) + padding,
+      height: totalHeight + 4 * padding,
+      x: 0,
+      y: 0,
+    };
   }
   console.log('layoutBlock (done)', block);
 }
 
 function positionBlock(parent: Block, block: Block, db: BlockDB) {
   console.log('layout position block', parent.id, parent?.size?.x, block.id, block?.size?.x);
-  let x = 0;
+  let parentX = 0;
   let y = 0;
   if (parent) {
-    x = parent?.size?.x || 0;
+    parentX = parent?.size?.x || 0;
     y = parent?.size?.y || 0;
   }
-  if (block.size) {
-    block.size.x = block.size.x + x - block.size.width / 2;
+  if (block.size && block.id !== 'root') {
+    block.size.x = parentX + block.size.x + -block.size.width / 2;
     block.size.y = block.size.y + y;
   }
   if (block.children) {
@@ -104,9 +108,9 @@ export function layout(db: BlockDB) {
   const blocks = db.getBlocks();
   const root = { id: 'root', type: 'composite', children: blocks } as Block;
   calcBlockSizes(root, db);
-  console.log('layout getBlocks', db.getBlocks());
   // Position blocks relative to parents
   positionBlock(root, root, db);
+  console.log('getBlocks', JSON.stringify(db.getBlocks(), null, 2));
 
   minX = 0;
   minY = 0;
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index a17cda607..5bbe279e7 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -26,12 +26,17 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   let radious = 0;
   let _shape = '';
   let layoutOptions = {};
+  console.log('This is the type:', vertex.type);
   // Set the shape based parameters
   switch (vertex.type) {
     case 'round':
       radious = 5;
       _shape = 'rect';
       break;
+    case 'composite':
+      radious = 4;
+      _shape = 'composite';
+      break;
     case 'square':
       _shape = 'rect';
       break;
diff --git a/packages/mermaid/src/diagrams/block/styles.ts b/packages/mermaid/src/diagrams/block/styles.ts
index a4af4f128..e1194f0d1 100644
--- a/packages/mermaid/src/diagrams/block/styles.ts
+++ b/packages/mermaid/src/diagrams/block/styles.ts
@@ -42,6 +42,8 @@ const getStyles = (options: FlowChartStyleOptions) =>
     color: ${options.titleColor};
   }
 
+
+
   .label text,span,p {
     fill: ${options.nodeTextColor || options.textColor};
     color: ${options.nodeTextColor || options.textColor};
@@ -103,9 +105,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
     // background-color:
   }
 
-  .cluster rect {
-    fill: ${options.clusterBkg};
-    stroke: ${options.clusterBorder};
+  .node .cluster {
+    // fill: ${fade(options.mainBkg, 0.5)};
+    fill: ${fade(options.clusterBkg, 0.5)};
+    stroke: ${fade(options.clusterBorder, 0.2)};
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
     stroke-width: 1px;
   }
 
diff --git a/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs b/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
new file mode 100644
index 000000000..e020937df
--- /dev/null
+++ b/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
@@ -0,0 +1,190 @@
+// .vite/jisonTransformer.ts
+import jison from "file:///Users/knsv/source/git/mermaid/node_modules/.pnpm/jison@0.4.18/node_modules/jison/lib/jison.js";
+var transformJison = (src) => {
+  const parser = new jison.Generator(src, {
+    moduleType: "js",
+    "token-stack": true
+  });
+  const source = parser.generate({ moduleMain: "() => {}" });
+  const exporter = `
+	parser.parser = parser;
+	export { parser };
+	export default parser;
+	`;
+  return `${source} ${exporter}`;
+};
+
+// .vite/jisonPlugin.ts
+var fileRegex = /\.(jison)$/;
+function jison2() {
+  return {
+    name: "jison",
+    transform(src, id) {
+      if (fileRegex.test(id)) {
+        return {
+          code: transformJison(src),
+          map: null
+          // provide source map if available
+        };
+      }
+    }
+  };
+}
+
+// .vite/jsonSchemaPlugin.ts
+import { load, JSON_SCHEMA } from "file:///Users/knsv/source/git/mermaid/node_modules/.pnpm/js-yaml@4.1.0/node_modules/js-yaml/dist/js-yaml.mjs";
+import assert from "node:assert";
+import Ajv2019 from "file:///Users/knsv/source/git/mermaid/node_modules/.pnpm/ajv@8.12.0/node_modules/ajv/dist/2019.js";
+var MERMAID_CONFIG_DIAGRAM_KEYS = [
+  "flowchart",
+  "sequence",
+  "gantt",
+  "journey",
+  "class",
+  "state",
+  "er",
+  "pie",
+  "quadrantChart",
+  "requirement",
+  "mindmap",
+  "timeline",
+  "gitGraph",
+  "c4",
+  "sankey"
+];
+function generateDefaults(mermaidConfigSchema) {
+  const ajv = new Ajv2019({
+    useDefaults: true,
+    allowUnionTypes: true,
+    strict: true
+  });
+  ajv.addKeyword({
+    keyword: "meta:enum",
+    // used by jsonschema2md
+    errors: false
+  });
+  ajv.addKeyword({
+    keyword: "tsType",
+    // used by json-schema-to-typescript
+    errors: false
+  });
+  const mermaidDefaultConfig = {};
+  assert.ok(mermaidConfigSchema.$defs);
+  const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig;
+  for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) {
+    const subSchemaRef = mermaidConfigSchema.properties[key].$ref;
+    const [root, defs, defName] = subSchemaRef.split("/");
+    assert.strictEqual(root, "#");
+    assert.strictEqual(defs, "$defs");
+    const subSchema = {
+      $schema: mermaidConfigSchema.$schema,
+      $defs: mermaidConfigSchema.$defs,
+      ...mermaidConfigSchema.$defs[defName]
+    };
+    const validate2 = ajv.compile(subSchema);
+    mermaidDefaultConfig[key] = {};
+    for (const required of subSchema.required ?? []) {
+      if (subSchema.properties[required] === void 0 && baseDiagramConfig.properties[required]) {
+        mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default;
+      }
+    }
+    if (!validate2(mermaidDefaultConfig[key])) {
+      throw new Error(
+        `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify(
+          validate2.errors,
+          void 0,
+          2
+        )}`
+      );
+    }
+  }
+  const validate = ajv.compile(mermaidConfigSchema);
+  if (!validate(mermaidDefaultConfig)) {
+    throw new Error(
+      `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify(
+        validate.errors,
+        void 0,
+        2
+      )}`
+    );
+  }
+  return mermaidDefaultConfig;
+}
+function jsonSchemaPlugin() {
+  return {
+    name: "json-schema-plugin",
+    transform(src, id) {
+      const idAsUrl = new URL(id, "file:///");
+      if (!idAsUrl.pathname.endsWith("schema.yaml")) {
+        return;
+      }
+      if (idAsUrl.searchParams.get("only-defaults")) {
+        const jsonSchema = load(src, {
+          filename: idAsUrl.pathname,
+          // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+          // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+          schema: JSON_SCHEMA
+        });
+        return {
+          code: `export default ${JSON.stringify(generateDefaults(jsonSchema), void 0, 2)};`,
+          map: null
+          // no source map
+        };
+      } else {
+        return {
+          code: `export default ${JSON.stringify(
+            load(src, {
+              filename: idAsUrl.pathname,
+              // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+              // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+              schema: JSON_SCHEMA
+            }),
+            void 0,
+            2
+          )};`,
+          map: null
+          // provide source map if available
+        };
+      }
+    }
+  };
+}
+
+// vite.config.ts
+import typescript from "file:///Users/knsv/source/git/mermaid/node_modules/.pnpm/@rollup+plugin-typescript@11.1.1_typescript@5.1.3/node_modules/@rollup/plugin-typescript/dist/es/index.js";
+import { defineConfig } from "file:///Users/knsv/source/git/mermaid/node_modules/.pnpm/vitest@0.33.0_@vitest+ui@0.33.0_jsdom@22.0.0/node_modules/vitest/dist/config.js";
+var vite_config_default = defineConfig({
+  resolve: {
+    extensions: [".js"]
+  },
+  plugins: [
+    jison2(),
+    jsonSchemaPlugin(),
+    // handles .schema.yaml JSON Schema files
+    // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+    typescript({ compilerOptions: { declaration: false } })
+  ],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    // TODO: should we move this to a mermaid-core package?
+    setupFiles: ["packages/mermaid/src/tests/setup.ts"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html", "lcov"],
+      reportsDirectory: "./coverage/vitest",
+      exclude: ["**/node_modules/**", "**/tests/**", "**/__mocks__/**"]
+    }
+  },
+  build: {
+    /** If you set esmExternals to true, this plugins assumes that
+     all external dependencies are ES modules */
+    commonjsOptions: {
+      esmExternals: true
+    }
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLnZpdGUvamlzb25UcmFuc2Zvcm1lci50cyIsICIudml0ZS9qaXNvblBsdWdpbi50cyIsICIudml0ZS9qc29uU2NoZW1hUGx1Z2luLnRzIiwgInZpdGUuY29uZmlnLnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2tuc3Yvc291cmNlL2dpdC9tZXJtYWlkLy52aXRlXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMva25zdi9zb3VyY2UvZ2l0L21lcm1haWQvLnZpdGUvamlzb25UcmFuc2Zvcm1lci50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMva25zdi9zb3VyY2UvZ2l0L21lcm1haWQvLnZpdGUvamlzb25UcmFuc2Zvcm1lci50c1wiO2ltcG9ydCBqaXNvbiBmcm9tICdqaXNvbic7XG5cbmV4cG9ydCBjb25zdCB0cmFuc2Zvcm1KaXNvbiA9IChzcmM6IHN0cmluZyk6IHN0cmluZyA9PiB7XG4gIGNvbnN0IHBhcnNlciA9IG5ldyBqaXNvbi5HZW5lcmF0b3Ioc3JjLCB7XG4gICAgbW9kdWxlVHlwZTogJ2pzJyxcbiAgICAndG9rZW4tc3RhY2snOiB0cnVlLFxuICB9KTtcbiAgY29uc3Qgc291cmNlID0gcGFyc2VyLmdlbmVyYXRlKHsgbW9kdWxlTWFpbjogJygpID0+IHt9JyB9KTtcbiAgY29uc3QgZXhwb3J0ZXIgPSBgXG5cdHBhcnNlci5wYXJzZXIgPSBwYXJzZXI7XG5cdGV4cG9ydCB7IHBhcnNlciB9O1xuXHRleHBvcnQgZGVmYXVsdCBwYXJzZXI7XG5cdGA7XG4gIHJldHVybiBgJHtzb3VyY2V9ICR7ZXhwb3J0ZXJ9YDtcbn07XG4iLCAiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9rbnN2L3NvdXJjZS9naXQvbWVybWFpZC8udml0ZVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2tuc3Yvc291cmNlL2dpdC9tZXJtYWlkLy52aXRlL2ppc29uUGx1Z2luLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9rbnN2L3NvdXJjZS9naXQvbWVybWFpZC8udml0ZS9qaXNvblBsdWdpbi50c1wiO2ltcG9ydCB7IHRyYW5zZm9ybUppc29uIH0gZnJvbSAnLi9qaXNvblRyYW5zZm9ybWVyLmpzJztcbmNvbnN0IGZpbGVSZWdleCA9IC9cXC4oamlzb24pJC87XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIGppc29uKCkge1xuICByZXR1cm4ge1xuICAgIG5hbWU6ICdqaXNvbicsXG5cbiAgICB0cmFuc2Zvcm0oc3JjOiBzdHJpbmcsIGlkOiBzdHJpbmcpIHtcbiAgICAgIGlmIChmaWxlUmVnZXgudGVzdChpZCkpIHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICBjb2RlOiB0cmFuc2Zvcm1KaXNvbihzcmMpLFxuICAgICAgICAgIG1hcDogbnVsbCwgLy8gcHJvdmlkZSBzb3VyY2UgbWFwIGlmIGF2YWlsYWJsZVxuICAgICAgICB9O1xuICAgICAgfVxuICAgIH0sXG4gIH07XG59XG4iLCAiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9rbnN2L3NvdXJjZS9naXQvbWVybWFpZC8udml0ZVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2tuc3Yvc291cmNlL2dpdC9tZXJtYWlkLy52aXRlL2pzb25TY2hlbWFQbHVnaW4udHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2tuc3Yvc291cmNlL2dpdC9tZXJtYWlkLy52aXRlL2pzb25TY2hlbWFQbHVnaW4udHNcIjtpbXBvcnQgeyBsb2FkLCBKU09OX1NDSEVNQSB9IGZyb20gJ2pzLXlhbWwnO1xuaW1wb3J0IGFzc2VydCBmcm9tICdub2RlOmFzc2VydCc7XG5pbXBvcnQgQWp2MjAxOSwgeyB0eXBlIEpTT05TY2hlbWFUeXBlIH0gZnJvbSAnYWp2L2Rpc3QvMjAxOS5qcyc7XG5pbXBvcnQgeyBQbHVnaW5PcHRpb24gfSBmcm9tICd2aXRlJztcblxuaW1wb3J0IHR5cGUgeyBNZXJtYWlkQ29uZmlnLCBCYXNlRGlhZ3JhbUNvbmZpZyB9IGZyb20gJy4uL3BhY2thZ2VzL21lcm1haWQvc3JjL2NvbmZpZy50eXBlLmpzJztcblxuLyoqXG4gKiBBbGwgb2YgdGhlIGtleXMgaW4gdGhlIG1lcm1haWQgY29uZmlnIHRoYXQgaGF2ZSBhIG1lcm1haWQgZGlhZ3JhbSBjb25maWcuXG4gKi9cbmNvbnN0IE1FUk1BSURfQ09ORklHX0RJQUdSQU1fS0VZUyA9IFtcbiAgJ2Zsb3djaGFydCcsXG4gICdzZXF1ZW5jZScsXG4gICdnYW50dCcsXG4gICdqb3VybmV5JyxcbiAgJ2NsYXNzJyxcbiAgJ3N0YXRlJyxcbiAgJ2VyJyxcbiAgJ3BpZScsXG4gICdxdWFkcmFudENoYXJ0JyxcbiAgJ3JlcXVpcmVtZW50JyxcbiAgJ21pbmRtYXAnLFxuICAndGltZWxpbmUnLFxuICAnZ2l0R3JhcGgnLFxuICAnYzQnLFxuICAnc2Fua2V5Jyxcbl0gYXMgY29uc3Q7XG5cbi8qKlxuICogR2VuZXJhdGUgZGVmYXVsdCB2YWx1ZXMgZnJvbSB0aGUgSlNPTiBTY2hlbWEuXG4gKlxuICogQUpWIGRvZXMgbm90IHN1cHBvcnQgbmVzdGVkIGRlZmF1bHQgdmFsdWVzIHlldCAob3IgZGVmYXVsdCB2YWx1ZXMgd2l0aCAkcmVmKSxcbiAqIHNvIHdlIG5lZWQgdG8gbWFudWFsbHkgZmluZCB0aGVtICh0aGlzIG1heSBiZSBmaXhlZCBpbiBhanYgdjkpLlxuICpcbiAqIEBwYXJhbSBtZXJtYWlkQ29uZmlnU2NoZW1hIC0gVGhlIE1lcm1haWQgSlNPTiBTY2hlbWEgdG8gdXNlLlxuICogQHJldHVybnMgVGhlIGRlZmF1bHQgbWVybWFpZCBjb25maWcgb2JqZWN0LlxuICovXG5mdW5jdGlvbiBnZW5lcmF0ZURlZmF1bHRzKG1lcm1haWRDb25maWdTY2hlbWE6IEpTT05TY2hlbWFUeXBlPE1lcm1haWRDb25maWc+KSB7XG4gIGNvbnN0IGFqdiA9IG5ldyBBanYyMDE5KHtcbiAgICB1c2VEZWZhdWx0czogdHJ1ZSxcbiAgICBhbGxvd1VuaW9uVHlwZXM6IHRydWUsXG4gICAgc3RyaWN0OiB0cnVlLFxuICB9KTtcblxuICBhanYuYWRkS2V5d29yZCh7XG4gICAga2V5d29yZDogJ21ldGE6ZW51bScsIC8vIHVzZWQgYnkganNvbnNjaGVtYTJtZFxuICAgIGVycm9yczogZmFsc2UsXG4gIH0pO1xuICBhanYuYWRkS2V5d29yZCh7XG4gICAga2V5d29yZDogJ3RzVHlwZScsIC8vIHVzZWQgYnkganNvbi1zY2hlbWEtdG8tdHlwZXNjcmlwdFxuICAgIGVycm9yczogZmFsc2UsXG4gIH0pO1xuXG4gIC8vIGFqdiBjdXJyZW50bHkgZG9lc24ndCBzdXBwb3J0IG5lc3RlZCBkZWZhdWx0IHZhbHVlcywgc2VlIGh0dHBzOi8vZ2l0aHViLmNvbS9hanYtdmFsaWRhdG9yL2Fqdi9pc3N1ZXMvMTcxOFxuICAvLyAobWF5IGJlIGZpeGVkIGluIHY5KSBzbyB3ZSBuZWVkIHRvIG1hbnVhbGx5IHVzZSBzdWItc2NoZW1hc1xuICBjb25zdCBtZXJtYWlkRGVmYXVsdENvbmZpZyA9IHt9O1xuXG4gIGFzc2VydC5vayhtZXJtYWlkQ29uZmlnU2NoZW1hLiRkZWZzKTtcbiAgY29uc3QgYmFzZURpYWdyYW1Db25maWcgPSBtZXJtYWlkQ29uZmlnU2NoZW1hLiRkZWZzLkJhc2VEaWFncmFtQ29uZmlnO1xuXG4gIGZvciAoY29uc3Qga2V5IG9mIE1FUk1BSURfQ09ORklHX0RJQUdSQU1fS0VZUykge1xuICAgIGNvbnN0IHN1YlNjaGVtYVJlZiA9IG1lcm1haWRDb25maWdTY2hlbWEucHJvcGVydGllc1trZXldLiRyZWY7XG4gICAgY29uc3QgW3Jvb3QsIGRlZnMsIGRlZk5hbWVdID0gc3ViU2NoZW1hUmVmLnNwbGl0KCcvJyk7XG4gICAgYXNzZXJ0LnN0cmljdEVxdWFsKHJvb3QsICcjJyk7XG4gICAgYXNzZXJ0LnN0cmljdEVxdWFsKGRlZnMsICckZGVmcycpO1xuICAgIGNvbnN0IHN1YlNjaGVtYSA9IHtcbiAgICAgICRzY2hlbWE6IG1lcm1haWRDb25maWdTY2hlbWEuJHNjaGVtYSxcbiAgICAgICRkZWZzOiBtZXJtYWlkQ29uZmlnU2NoZW1hLiRkZWZzLFxuICAgICAgLi4ubWVybWFpZENvbmZpZ1NjaGVtYS4kZGVmc1tkZWZOYW1lXSxcbiAgICB9IGFzIEpTT05TY2hlbWFUeXBlPEJhc2VEaWFncmFtQ29uZmlnPjtcblxuICAgIGNvbnN0IHZhbGlkYXRlID0gYWp2LmNvbXBpbGUoc3ViU2NoZW1hKTtcblxuICAgIG1lcm1haWREZWZhdWx0Q29uZmlnW2tleV0gPSB7fTtcblxuICAgIGZvciAoY29uc3QgcmVxdWlyZWQgb2Ygc3ViU2NoZW1hLnJlcXVpcmVkID8/IFtdKSB7XG4gICAgICBpZiAoc3ViU2NoZW1hLnByb3BlcnRpZXNbcmVxdWlyZWRdID09PSB1bmRlZmluZWQgJiYgYmFzZURpYWdyYW1Db25maWcucHJvcGVydGllc1tyZXF1aXJlZF0pIHtcbiAgICAgICAgbWVybWFpZERlZmF1bHRDb25maWdba2V5XVtyZXF1aXJlZF0gPSBiYXNlRGlhZ3JhbUNvbmZpZy5wcm9wZXJ0aWVzW3JlcXVpcmVkXS5kZWZhdWx0O1xuICAgICAgfVxuICAgIH1cbiAgICBpZiAoIXZhbGlkYXRlKG1lcm1haWREZWZhdWx0Q29uZmlnW2tleV0pKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoXG4gICAgICAgIGBzY2hlbWEgZm9yIHN1YmNvbmZpZyAke2tleX0gZG9lcyBub3QgaGF2ZSB2YWxpZCBkZWZhdWx0cyEgRXJyb3JzIHdlcmUgJHtKU09OLnN0cmluZ2lmeShcbiAgICAgICAgICB2YWxpZGF0ZS5lcnJvcnMsXG4gICAgICAgICAgdW5kZWZpbmVkLFxuICAgICAgICAgIDJcbiAgICAgICAgKX1gXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIGNvbnN0IHZhbGlkYXRlID0gYWp2LmNvbXBpbGUobWVybWFpZENvbmZpZ1NjaGVtYSk7XG5cbiAgaWYgKCF2YWxpZGF0ZShtZXJtYWlkRGVmYXVsdENvbmZpZykpIHtcbiAgICB0aHJvdyBuZXcgRXJyb3IoXG4gICAgICBgTWVybWFpZCBjb25maWcgSlNPTiBTY2hlbWEgZG9lcyBub3QgaGF2ZSB2YWxpZCBkZWZhdWx0cyEgRXJyb3JzIHdlcmUgJHtKU09OLnN0cmluZ2lmeShcbiAgICAgICAgdmFsaWRhdGUuZXJyb3JzLFxuICAgICAgICB1bmRlZmluZWQsXG4gICAgICAgIDJcbiAgICAgICl9YFxuICAgICk7XG4gIH1cblxuICByZXR1cm4gbWVybWFpZERlZmF1bHRDb25maWc7XG59XG5cbi8qKlxuICogVml0ZSBwbHVnaW4gdGhhdCBoYW5kbGVzIEpTT04gU2NoZW1hcyBzYXZlZCBhcyBhIGAuc2NoZW1hLnlhbWxgIGZpbGUuXG4gKlxuICogVXNlIGBteS1leGFtcGxlLnNjaGVtYS55YW1sP29ubHktZGVmYXVsdHM9dHJ1ZWAgdG8gb25seSBsb2FkIHRoZSBkZWZhdWx0IHZhbHVlcy5cbiAqL1xuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24ganNvblNjaGVtYVBsdWdpbigpOiBQbHVnaW5PcHRpb24ge1xuICByZXR1cm4ge1xuICAgIG5hbWU6ICdqc29uLXNjaGVtYS1wbHVnaW4nLFxuICAgIHRyYW5zZm9ybShzcmM6IHN0cmluZywgaWQ6IHN0cmluZykge1xuICAgICAgY29uc3QgaWRBc1VybCA9IG5ldyBVUkwoaWQsICdmaWxlOi8vLycpO1xuXG4gICAgICBpZiAoIWlkQXNVcmwucGF0aG5hbWUuZW5kc1dpdGgoJ3NjaGVtYS55YW1sJykpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAoaWRBc1VybC5zZWFyY2hQYXJhbXMuZ2V0KCdvbmx5LWRlZmF1bHRzJykpIHtcbiAgICAgICAgY29uc3QganNvblNjaGVtYSA9IGxvYWQoc3JjLCB7XG4gICAgICAgICAgZmlsZW5hbWU6IGlkQXNVcmwucGF0aG5hbWUsXG4gICAgICAgICAgLy8gb25seSBhbGxvdyBKU09OIHR5cGVzIGluIG91ciBZQU1MIGRvYyAod2lsbCBwcm9iYWJseSBiZSBkZWZhdWx0IGluIFlBTUwgMS4zKVxuICAgICAgICAgIC8vIGUuZy4gYHRydWVgIHdpbGwgYmUgcGFyc2VkIGEgYm9vbGVhbiBgdHJ1ZWAsIGBUcnVlYCB3aWxsIGJlIHBhcnNlZCBhcyBzdHJpbmcgYFwiVHJ1ZVwiYC5cbiAgICAgICAgICBzY2hlbWE6IEpTT05fU0NIRU1BLFxuICAgICAgICB9KSBhcyBKU09OU2NoZW1hVHlwZTxNZXJtYWlkQ29uZmlnPjtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICBjb2RlOiBgZXhwb3J0IGRlZmF1bHQgJHtKU09OLnN0cmluZ2lmeShnZW5lcmF0ZURlZmF1bHRzKGpzb25TY2hlbWEpLCB1bmRlZmluZWQsIDIpfTtgLFxuICAgICAgICAgIG1hcDogbnVsbCwgLy8gbm8gc291cmNlIG1hcFxuICAgICAgICB9O1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICBjb2RlOiBgZXhwb3J0IGRlZmF1bHQgJHtKU09OLnN0cmluZ2lmeShcbiAgICAgICAgICAgIGxvYWQoc3JjLCB7XG4gICAgICAgICAgICAgIGZpbGVuYW1lOiBpZEFzVXJsLnBhdGhuYW1lLFxuICAgICAgICAgICAgICAvLyBvbmx5IGFsbG93IEpTT04gdHlwZXMgaW4gb3VyIFlBTUwgZG9jICh3aWxsIHByb2JhYmx5IGJlIGRlZmF1bHQgaW4gWUFNTCAxLjMpXG4gICAgICAgICAgICAgIC8vIGUuZy4gYHRydWVgIHdpbGwgYmUgcGFyc2VkIGEgYm9vbGVhbiBgdHJ1ZWAsIGBUcnVlYCB3aWxsIGJlIHBhcnNlZCBhcyBzdHJpbmcgYFwiVHJ1ZVwiYC5cbiAgICAgICAgICAgICAgc2NoZW1hOiBKU09OX1NDSEVNQSxcbiAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgdW5kZWZpbmVkLFxuICAgICAgICAgICAgMlxuICAgICAgICAgICl9O2AsXG4gICAgICAgICAgbWFwOiBudWxsLCAvLyBwcm92aWRlIHNvdXJjZSBtYXAgaWYgYXZhaWxhYmxlXG4gICAgICAgIH07XG4gICAgICB9XG4gICAgfSxcbiAgfTtcbn1cbiIsICJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2tuc3Yvc291cmNlL2dpdC9tZXJtYWlkXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMva25zdi9zb3VyY2UvZ2l0L21lcm1haWQvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2tuc3Yvc291cmNlL2dpdC9tZXJtYWlkL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IGppc29uIGZyb20gJy4vLnZpdGUvamlzb25QbHVnaW4uanMnO1xuaW1wb3J0IGpzb25TY2hlbWFQbHVnaW4gZnJvbSAnLi8udml0ZS9qc29uU2NoZW1hUGx1Z2luLmpzJztcbmltcG9ydCB0eXBlc2NyaXB0IGZyb20gJ0Byb2xsdXAvcGx1Z2luLXR5cGVzY3JpcHQnO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZXN0L2NvbmZpZyc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHJlc29sdmU6IHtcbiAgICBleHRlbnNpb25zOiBbJy5qcyddLFxuICB9LFxuICBwbHVnaW5zOiBbXG4gICAgamlzb24oKSxcbiAgICBqc29uU2NoZW1hUGx1Z2luKCksIC8vIGhhbmRsZXMgLnNjaGVtYS55YW1sIEpTT04gU2NoZW1hIGZpbGVzXG4gICAgLy8gQHRzLWV4cGVjdC1lcnJvciBBY2NvcmRpbmcgdG8gdGhlIHR5cGUgZGVmaW5pdGlvbnMsIHJvbGx1cCBwbHVnaW5zIGFyZSBpbmNvbXBhdGlibGUgd2l0aCB2aXRlXG4gICAgdHlwZXNjcmlwdCh7IGNvbXBpbGVyT3B0aW9uczogeyBkZWNsYXJhdGlvbjogZmFsc2UgfSB9KSxcbiAgXSxcbiAgdGVzdDoge1xuICAgIGVudmlyb25tZW50OiAnanNkb20nLFxuICAgIGdsb2JhbHM6IHRydWUsXG4gICAgLy8gVE9ETzogc2hvdWxkIHdlIG1vdmUgdGhpcyB0byBhIG1lcm1haWQtY29yZSBwYWNrYWdlP1xuICAgIHNldHVwRmlsZXM6IFsncGFja2FnZXMvbWVybWFpZC9zcmMvdGVzdHMvc2V0dXAudHMnXSxcbiAgICBjb3ZlcmFnZToge1xuICAgICAgcHJvdmlkZXI6ICd2OCcsXG4gICAgICByZXBvcnRlcjogWyd0ZXh0JywgJ2pzb24nLCAnaHRtbCcsICdsY292J10sXG4gICAgICByZXBvcnRzRGlyZWN0b3J5OiAnLi9jb3ZlcmFnZS92aXRlc3QnLFxuICAgICAgZXhjbHVkZTogWycqKi9ub2RlX21vZHVsZXMvKionLCAnKiovdGVzdHMvKionLCAnKiovX19tb2Nrc19fLyoqJ10sXG4gICAgfSxcbiAgfSxcbiAgYnVpbGQ6IHtcbiAgICAvKiogSWYgeW91IHNldCBlc21FeHRlcm5hbHMgdG8gdHJ1ZSwgdGhpcyBwbHVnaW5zIGFzc3VtZXMgdGhhdFxuICAgICBhbGwgZXh0ZXJuYWwgZGVwZW5kZW5jaWVzIGFyZSBFUyBtb2R1bGVzICovXG5cbiAgICBjb21tb25qc09wdGlvbnM6IHtcbiAgICAgIGVzbUV4dGVybmFsczogdHJ1ZSxcbiAgICB9LFxuICB9LFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdTLE9BQU8sV0FBVztBQUVuVCxJQUFNLGlCQUFpQixDQUFDLFFBQXdCO0FBQ3JELFFBQU0sU0FBUyxJQUFJLE1BQU0sVUFBVSxLQUFLO0FBQUEsSUFDdEMsWUFBWTtBQUFBLElBQ1osZUFBZTtBQUFBLEVBQ2pCLENBQUM7QUFDRCxRQUFNLFNBQVMsT0FBTyxTQUFTLEVBQUUsWUFBWSxXQUFXLENBQUM7QUFDekQsUUFBTSxXQUFXO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFLakIsU0FBTyxHQUFHLFVBQVU7QUFDdEI7OztBQ2JBLElBQU0sWUFBWTtBQUVILFNBQVJBLFNBQXlCO0FBQzlCLFNBQU87QUFBQSxJQUNMLE1BQU07QUFBQSxJQUVOLFVBQVUsS0FBYSxJQUFZO0FBQ2pDLFVBQUksVUFBVSxLQUFLLEVBQUUsR0FBRztBQUN0QixlQUFPO0FBQUEsVUFDTCxNQUFNLGVBQWUsR0FBRztBQUFBLFVBQ3hCLEtBQUs7QUFBQTtBQUFBLFFBQ1A7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRjs7O0FDaEJ3UyxTQUFTLE1BQU0sbUJBQW1CO0FBQzFVLE9BQU8sWUFBWTtBQUNuQixPQUFPLGFBQXNDO0FBUTdDLElBQU0sOEJBQThCO0FBQUEsRUFDbEM7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUNGO0FBV0EsU0FBUyxpQkFBaUIscUJBQW9EO0FBQzVFLFFBQU0sTUFBTSxJQUFJLFFBQVE7QUFBQSxJQUN0QixhQUFhO0FBQUEsSUFDYixpQkFBaUI7QUFBQSxJQUNqQixRQUFRO0FBQUEsRUFDVixDQUFDO0FBRUQsTUFBSSxXQUFXO0FBQUEsSUFDYixTQUFTO0FBQUE7QUFBQSxJQUNULFFBQVE7QUFBQSxFQUNWLENBQUM7QUFDRCxNQUFJLFdBQVc7QUFBQSxJQUNiLFNBQVM7QUFBQTtBQUFBLElBQ1QsUUFBUTtBQUFBLEVBQ1YsQ0FBQztBQUlELFFBQU0sdUJBQXVCLENBQUM7QUFFOUIsU0FBTyxHQUFHLG9CQUFvQixLQUFLO0FBQ25DLFFBQU0sb0JBQW9CLG9CQUFvQixNQUFNO0FBRXBELGFBQVcsT0FBTyw2QkFBNkI7QUFDN0MsVUFBTSxlQUFlLG9CQUFvQixXQUFXLEdBQUcsRUFBRTtBQUN6RCxVQUFNLENBQUMsTUFBTSxNQUFNLE9BQU8sSUFBSSxhQUFhLE1BQU0sR0FBRztBQUNwRCxXQUFPLFlBQVksTUFBTSxHQUFHO0FBQzVCLFdBQU8sWUFBWSxNQUFNLE9BQU87QUFDaEMsVUFBTSxZQUFZO0FBQUEsTUFDaEIsU0FBUyxvQkFBb0I7QUFBQSxNQUM3QixPQUFPLG9CQUFvQjtBQUFBLE1BQzNCLEdBQUcsb0JBQW9CLE1BQU0sT0FBTztBQUFBLElBQ3RDO0FBRUEsVUFBTUMsWUFBVyxJQUFJLFFBQVEsU0FBUztBQUV0Qyx5QkFBcUIsR0FBRyxJQUFJLENBQUM7QUFFN0IsZUFBVyxZQUFZLFVBQVUsWUFBWSxDQUFDLEdBQUc7QUFDL0MsVUFBSSxVQUFVLFdBQVcsUUFBUSxNQUFNLFVBQWEsa0JBQWtCLFdBQVcsUUFBUSxHQUFHO0FBQzFGLDZCQUFxQixHQUFHLEVBQUUsUUFBUSxJQUFJLGtCQUFrQixXQUFXLFFBQVEsRUFBRTtBQUFBLE1BQy9FO0FBQUEsSUFDRjtBQUNBLFFBQUksQ0FBQ0EsVUFBUyxxQkFBcUIsR0FBRyxDQUFDLEdBQUc7QUFDeEMsWUFBTSxJQUFJO0FBQUEsUUFDUix3QkFBd0IsaURBQWlELEtBQUs7QUFBQSxVQUM1RUEsVUFBUztBQUFBLFVBQ1Q7QUFBQSxVQUNBO0FBQUEsUUFDRjtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUVBLFFBQU0sV0FBVyxJQUFJLFFBQVEsbUJBQW1CO0FBRWhELE1BQUksQ0FBQyxTQUFTLG9CQUFvQixHQUFHO0FBQ25DLFVBQU0sSUFBSTtBQUFBLE1BQ1Isd0VBQXdFLEtBQUs7QUFBQSxRQUMzRSxTQUFTO0FBQUEsUUFDVDtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFFQSxTQUFPO0FBQ1Q7QUFPZSxTQUFSLG1CQUFrRDtBQUN2RCxTQUFPO0FBQUEsSUFDTCxNQUFNO0FBQUEsSUFDTixVQUFVLEtBQWEsSUFBWTtBQUNqQyxZQUFNLFVBQVUsSUFBSSxJQUFJLElBQUksVUFBVTtBQUV0QyxVQUFJLENBQUMsUUFBUSxTQUFTLFNBQVMsYUFBYSxHQUFHO0FBQzdDO0FBQUEsTUFDRjtBQUVBLFVBQUksUUFBUSxhQUFhLElBQUksZUFBZSxHQUFHO0FBQzdDLGNBQU0sYUFBYSxLQUFLLEtBQUs7QUFBQSxVQUMzQixVQUFVLFFBQVE7QUFBQTtBQUFBO0FBQUEsVUFHbEIsUUFBUTtBQUFBLFFBQ1YsQ0FBQztBQUNELGVBQU87QUFBQSxVQUNMLE1BQU0sa0JBQWtCLEtBQUssVUFBVSxpQkFBaUIsVUFBVSxHQUFHLFFBQVcsQ0FBQztBQUFBLFVBQ2pGLEtBQUs7QUFBQTtBQUFBLFFBQ1A7QUFBQSxNQUNGLE9BQU87QUFDTCxlQUFPO0FBQUEsVUFDTCxNQUFNLGtCQUFrQixLQUFLO0FBQUEsWUFDM0IsS0FBSyxLQUFLO0FBQUEsY0FDUixVQUFVLFFBQVE7QUFBQTtBQUFBO0FBQUEsY0FHbEIsUUFBUTtBQUFBLFlBQ1YsQ0FBQztBQUFBLFlBQ0Q7QUFBQSxZQUNBO0FBQUEsVUFDRjtBQUFBLFVBQ0EsS0FBSztBQUFBO0FBQUEsUUFDUDtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGOzs7QUNuSkEsT0FBTyxnQkFBZ0I7QUFDdkIsU0FBUyxvQkFBb0I7QUFFN0IsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUztBQUFBLElBQ1AsWUFBWSxDQUFDLEtBQUs7QUFBQSxFQUNwQjtBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1BDLE9BQU07QUFBQSxJQUNOLGlCQUFpQjtBQUFBO0FBQUE7QUFBQSxJQUVqQixXQUFXLEVBQUUsaUJBQWlCLEVBQUUsYUFBYSxNQUFNLEVBQUUsQ0FBQztBQUFBLEVBQ3hEO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixhQUFhO0FBQUEsSUFDYixTQUFTO0FBQUE7QUFBQSxJQUVULFlBQVksQ0FBQyxxQ0FBcUM7QUFBQSxJQUNsRCxVQUFVO0FBQUEsTUFDUixVQUFVO0FBQUEsTUFDVixVQUFVLENBQUMsUUFBUSxRQUFRLFFBQVEsTUFBTTtBQUFBLE1BQ3pDLGtCQUFrQjtBQUFBLE1BQ2xCLFNBQVMsQ0FBQyxzQkFBc0IsZUFBZSxpQkFBaUI7QUFBQSxJQUNsRTtBQUFBLEVBQ0Y7QUFBQSxFQUNBLE9BQU87QUFBQTtBQUFBO0FBQUEsSUFJTCxpQkFBaUI7QUFBQSxNQUNmLGNBQWM7QUFBQSxJQUNoQjtBQUFBLEVBQ0Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogWyJqaXNvbiIsICJ2YWxpZGF0ZSIsICJqaXNvbiJdCn0K

From c8d155c455d95e28ee55b4a9913a8a9125f49139 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Tue, 3 Oct 2023 20:12:33 +0200
Subject: [PATCH 055/193] #3358 Recursive positioning

---
 cypress/platform/knsv2.html                   |  27 +++-
 packages/mermaid/src/diagrams/block/layout.ts | 116 +++++++++++++++---
 2 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 6e69533eb..205db1c78 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,8 +65,8 @@
   
     
     block-beta
-  %% id1("Wide 1")
-  id2("2")
+  id1("Wide 1")
+  %%id2("2")
   block
       id3["I am a wide one"]
       block
@@ -79,9 +79,26 @@ block-beta
     
    
     
     block-beta
-
-      id3["I am a wide one"]
-      id4
+  id1
+  block
+  id2
+  end
+    
    
+    
    +block-beta
+  id1["Hello"]
+  block
+    id2["to"]
+    id3["the"]
+    id4["World"]
+  end
+    
    
+    
    +block-beta
+  block
+    id2["I am a wide one"]
+    id1
+  end
 
 
     
    
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 8756646ef..31810693b 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -1,12 +1,14 @@
 import { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
 
+const padding = 10;
+
 function calcBlockSizes(block: Block, db: BlockDB) {
+  console.log('calculateSize (start)', block.id, block?.size?.x, block?.size?.width);
   const totalWidth = 0;
   const totalHeight = 0;
   let maxWidth = 0;
   let maxHeight = 0;
-  const padding = 20;
 
   if (block.children) {
     for (const child of block.children) {
@@ -15,6 +17,7 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     // find max width of children
     for (const child of block.children) {
       const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
+      // console.log('APA', child.id, width, height, x, y);
       if (width > maxWidth) {
         maxWidth = width;
       }
@@ -28,22 +31,24 @@ function calcBlockSizes(block: Block, db: BlockDB) {
       if (child.size) {
         child.size.width = maxWidth;
         child.size.height = maxHeight;
+        child.size.x = 0;
+        child.size.y = 0;
       }
     }
 
-    // Position items relative to self
-    let x = -padding / 2;
-    const y = 0;
+    // // Position items relative to self
+    // let x = -padding / 2;
+    // const y = 0;
 
-    let accumulatedPaddingX = 0;
-    for (const child of block.children) {
-      if (child.size) {
-        child.size.x = x;
-        child.size.y = y;
-        x += maxWidth + padding;
-      }
-      accumulatedPaddingX += padding;
-    }
+    // let accumulatedPaddingX = 0;
+    // for (const child of block.children) {
+    //   if (child.size) {
+    //     child.size.x = x;
+    //     child.size.y = y;
+    //     x += maxWidth + padding;
+    //   }
+    //   accumulatedPaddingX += padding;
+    // }
   }
   if (block.children?.length > 0) {
     const numChildren = block.children.length;
@@ -54,19 +59,88 @@ function calcBlockSizes(block: Block, db: BlockDB) {
       y: 0,
     };
   }
-  console.log('layoutBlock (done)', block);
+  console.log('calculateSize APA (done)', block.id, block.size.x, block.size.width);
+}
+
+function layoutBlocks(block: Block, db: BlockDB) {
+  console.log('layout blocks (block)', block.id, 'x:', block.size.x, 'width:', block.size.width);
+  if (
+    block.children && // find max width of children
+    block.children.length > 0
+  ) {
+    const width = block?.children[0]?.size?.width || 0;
+    const widthOfChildren = block.children.length * width + (block.children.length - 1) * padding;
+    let posX = (block?.size?.x || 0) - widthOfChildren / 2;
+    const posY = 0;
+    const parentX = block?.size?.x || 0 - block.children.length;
+    const parentWidth = block?.size?.width || 0;
+
+    console.log('widthOfChildren', widthOfChildren, 'posX', posX, 'parentX', parentX);
+
+    // let first = true;
+    for (const child of block.children) {
+      console.log(
+        'layout blocks (child)',
+        child.id,
+        'x:',
+        child?.size?.x,
+        'width:',
+        child?.size?.width,
+        'posX:',
+        posX,
+        block?.size?.x,
+        widthOfChildren / 2,
+        widthOfChildren / 2
+      );
+
+      if (!child.size) {
+        continue;
+      }
+      const { width, height } = child.size;
+      child.size.x = posX + width / 2;
+      posX += width + padding;
+      child.size.y = posY;
+      // posY += height + padding;
+      if (child.children) {
+        layoutBlocks(child, db);
+      }
+    }
+  }
 }
 
 function positionBlock(parent: Block, block: Block, db: BlockDB) {
-  console.log('layout position block', parent.id, parent?.size?.x, block.id, block?.size?.x);
+  console.log(
+    'layout position block',
+    parent.id,
+    parent?.size?.x,
+    block.id,
+    block?.size?.x,
+    'width:',
+    block?.size?.width
+  );
   let parentX = 0;
+  let parentWidth = 0;
   let y = 0;
-  if (parent) {
+  if (parent.id !== 'root') {
     parentX = parent?.size?.x || 0;
+    parentWidth = parent?.size?.width || 0;
     y = parent?.size?.y || 0;
   }
   if (block.size && block.id !== 'root') {
-    block.size.x = parentX + block.size.x + -block.size.width / 2;
+    console.log(
+      'layout position block (calc)',
+      'x:',
+      parentX,
+      parentWidth / 2,
+      block.id,
+      'x:',
+      block.size.x,
+      block.size.width
+    );
+    // block.size.x = parentX + block.size.x + -block.size.width / 2;
+    block.size.x =
+      parentX < 0 ? parentX + block.size.x : parentX + block.size.x + -block.size.width / 2;
+    // block.size.x = parentX - parentWidth + Math.abs(block.size.x) / 2;
     block.size.y = block.size.y + y;
   }
   if (block.children) {
@@ -82,10 +156,11 @@ let maxX = 0;
 let maxY = 0;
 
 function findBounds(block: Block) {
-  if (block.size) {
+  if (block.size && block.id !== 'root') {
     const { x, y, width, height } = block.size;
     if (x - width / 2 < minX) {
       minX = x - width / 2;
+      // console.log('Here APA minX', block.id, x, width, minX);
     }
     if (y - height / 2 < minY) {
       minY = y - height / 2;
@@ -108,8 +183,9 @@ export function layout(db: BlockDB) {
   const blocks = db.getBlocks();
   const root = { id: 'root', type: 'composite', children: blocks } as Block;
   calcBlockSizes(root, db);
+  layoutBlocks(root, db);
   // Position blocks relative to parents
-  positionBlock(root, root, db);
+  // positionBlock(root, root, db);
   console.log('getBlocks', JSON.stringify(db.getBlocks(), null, 2));
 
   minX = 0;
@@ -117,7 +193,7 @@ export function layout(db: BlockDB) {
   maxX = 0;
   maxY = 0;
   findBounds(root);
-  console.log('Here maxX', maxX);
+  // console.log('Here maxX', minX, '--', maxX);
   const height = maxY - minY;
   const width = maxX - minX;
   return { x: minX, y: minY, width, height };

From da79b371fe1d45a36637dec21d2ab3781079b6d8 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 4 Oct 2023 10:44:29 +0200
Subject: [PATCH 056/193] #3358 Recursive positioning paddings

---
 cypress/platform/knsv2.html                   | 7 ++++++-
 packages/mermaid/src/diagrams/block/layout.ts | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 205db1c78..fb68469a5 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -77,6 +77,7 @@ block-beta
   id4("Another final one")
 
     
    
+
     
     block-beta
   id1
@@ -88,17 +89,21 @@ block-beta
 block-beta
   id1["Hello"]
   block
+    columns 2
     id2["to"]
     id3["the"]
     id4["World"]
+    id5["World"]
   end
     
    
-    
    +    
     block-beta
+  columns 2
   block
     id2["I am a wide one"]
     id1
   end
+  id[Next row]
 
 
     
    
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 31810693b..9c9b1bd7e 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -54,7 +54,7 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     const numChildren = block.children.length;
     block.size = {
       width: numChildren * (maxWidth + padding) + padding,
-      height: totalHeight + 4 * padding,
+      height: maxHeight + 2 * padding,
       x: 0,
       y: 0,
     };

From e6906563a430ebd2f83846f87cdf100ceae11b23 Mon Sep 17 00:00:00 2001
From: NicolasNewman 
Date: Wed, 11 Oct 2023 11:10:56 -0500
Subject: [PATCH 057/193] refactor(katex): resolved linting errors

---
 packages/mermaid/src/diagrams/error/errorRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index a52745782..d7b02bf5d 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -2,7 +2,7 @@ import { log } from '../../logger.js';
 import type { Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { Diagram } from '../../Diagram.js';
+import type { Diagram } from '../../Diagram.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.

From a641fd51e8c06ba313dd4272ea6a799b9ed0f49a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Sun, 15 Oct 2023 22:21:25 +0200
Subject: [PATCH 058/193] #3358 Adding support for column statements

---
 cypress/platform/knsv2.html                   |  59 +++--
 .../mermaid/src/diagrams/block/blockDB.ts     |  13 +-
 .../src/diagrams/block/blockRenderer.ts       | 119 ++--------
 .../mermaid/src/diagrams/block/blockTypes.ts  |   1 +
 .../mermaid/src/diagrams/block/layout.spec.ts |  13 ++
 packages/mermaid/src/diagrams/block/layout.ts | 203 ++++++++++++------
 .../src/diagrams/block/renderHelpers.ts       |  23 +-
 7 files changed, 223 insertions(+), 208 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/block/layout.spec.ts

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fb68469a5..0325eb659 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,27 +65,62 @@
   
     
     block-beta
-  id1("Wide 1")
-  %%id2("2")
   block
-      id3["I am a wide one"]
-      block
-        id44("A final one")
-        id45("B final one")
-      end
+  columns 1
+    id1
+    id2
+    id3("Wider then")
   end
-  id4("Another final one")
-
+  id4
     
    
 
-    
    +    
    +block-beta
+  block
+  columns 1
+  block
+    columns 3
+    id1
+    id2
+    id2.1
+    %%id2.2
+  end
+  id48
+  end
+  id3
+%%  id3
+%%  id4
+  %% block
+    %% columns 2
+    %% id2
+    %% id3
+  %% end
+    
    
+    
    +block-beta
+  block
+    columns 1
+    id1
+    id2
+    %%id2.1
+  end
+  id3
+%%  id3
+%%  id4
+  %% block
+    %% columns 2
+    %% id2
+    %% id3
+  %% end
+    
    
+    
     block-beta
   id1
   block
   id2
   end
     
    
-    
    +    
     block-beta
   id1["Hello"]
   block
@@ -96,7 +131,7 @@ block-beta
     id5["World"]
   end
     
    
-    
    +    
     block-beta
   columns 2
   block
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 2dce9e323..f9578a4e7 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -1,9 +1,8 @@
 // import type { BlockDB } from './blockTypes.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
-import { BlockConfig, BlockType, Block, Link } from './blockTypes.js';
+import type { BlockConfig, BlockType, Block, Link } from './blockTypes.js';
 
 import * as configApi from '../../config.js';
-// import common from '../common/common.js';
 import {
   // setAccTitle,
   // getAccTitle,
@@ -37,9 +36,8 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
       if (block.children) {
         populateBlockDatabase(block.children, block);
       }
-      if (block.type !== 'column-setting') {
-        children.push(block);
-      }
+
+      children.push(block);
     }
   }
   parent.children = children;
@@ -79,9 +77,10 @@ export const generateId = () => {
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
+  rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  log.debug('The hierarchy', JSON.stringify(block, null, 2));
-  blocks = block;
+  log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
+  blocks = rootBlock.children;
 };
 
 type IAddLink = (link: Link) => Link;
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index a8bf1fe49..2b691358c 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -7,16 +7,14 @@ import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,
   schemeTableau10 as d3schemeTableau10,
-  ContainerElement,
 } from 'd3';
+import { log } from '../../logger.js';
 
 import { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
 
 // import { diagram as BlockDiagram } from './blockDiagram.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { Uid } from '../../rendering-util/uid.js';
-import { pad } from 'lodash';
 
 export const draw = async function (
   text: string,
@@ -43,27 +41,28 @@ export const draw = async function (
   const nodes = svg.insert('g').attr('class', 'block');
   await calculateBlockSizes(nodes, bl, db);
   const bounds = layout(db);
-  console.log('Here blocks', bl);
+  log.debug('Here blocks', bl);
   await insertBlocks(nodes, bl, db);
 
-  // console.log('Here', bl);
+  // log.debug('Here', bl);
 
   // Establish svg dimensions and get width and height
   //
   // const bounds2 = nodes.node().getBoundingClientRect();
-  const bounds2 = bounds;
-  const padding = 10;
   // Why, oh why ????
-  const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
-  const height = bounds2.height + magicFactor + 10;
-  const width = bounds2.width + 10;
-  const useMaxWidth = false;
-  configureSvgSize(svg, height, width, useMaxWidth);
-  console.log('Here Bounds', bounds, bounds2);
-  svg.attr(
-    'viewBox',
-    `${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
-  );
+  if (bounds) {
+    const bounds2 = bounds;
+    const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
+    const height = bounds2.height + magicFactor + 10;
+    const width = bounds2.width + 10;
+    const useMaxWidth = false;
+    configureSvgSize(svg, height, width, useMaxWidth);
+    log.debug('Here Bounds', bounds, bounds2);
+    svg.attr(
+      'viewBox',
+      `${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
+    );
+  }
   // svg.attr('viewBox', `${-200} ${-200} ${400} ${400}`);
 
   // Prepare data for construction based on diagObj.db
@@ -83,92 +82,6 @@ export const draw = async function (
     y?: number;
   }
 
-  const blocks: LayedBlock[] = [
-    {
-      ID: 'ApplicationLayer',
-      label: 'Application Layer',
-      x: 0,
-      y: 0,
-      children: [
-        {
-          ID: 'UserInterface',
-          label: 'User Interface (WPF, HTML5/CSS3, Swing)',
-          x: 0,
-          y: 50,
-        },
-      ],
-    },
-    {
-      ID: 'PresentationLayer',
-      label: 'Presentation Layer',
-      x: 0,
-      y: 50,
-      children: [
-        {
-          ID: 'Smack',
-          label: 'J2SE Mobil App (Smack)',
-        },
-        {
-          ID: 'JsJAC',
-          label: 'Java Script Browser App (JsJAC)',
-        },
-        {
-          ID: 'babelim',
-          label: '.NET Windows App (Babel-im)',
-        },
-      ],
-    },
-    {
-      ID: 'SessionLayer',
-      label: 'Session Layer',
-      x: 0,
-      y: 100,
-      children: [
-        {
-          ID: 'XMPP',
-          label: 'XMPP Component',
-        },
-        {
-          children: [
-            {
-              ID: 'Authentication',
-              label: 'Authentication',
-            },
-            {
-              ID: 'Authorization',
-              label: 'Authorization',
-            },
-          ],
-        },
-        {
-          ID: 'LDAP',
-          label: 'LDAP, DB, POP',
-        },
-      ],
-    },
-    {
-      ID: 'NetworkLayer',
-      label: 'Network Layer',
-      x: 0,
-      y: 150,
-      children: [
-        { ID: 'HTTP', label: 'HTTP' },
-        { ID: 'SOCK', label: 'SOCK' },
-      ],
-    },
-    {
-      ID: 'DataLayer',
-      label: 'Data Layer',
-      x: 0,
-      y: 200,
-      children: [
-        { ID: 'XMPP', label: 'XMPP' },
-        { ID: 'BDB', label: 'Business DB' },
-        { ID: 'AD', label: 'Active Directory' },
-      ],
-    },
-  ];
-
   // Get color scheme for the graph
   const colorScheme = d3scaleOrdinal(d3schemeTableau10);
 };
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 5a4431c0a..f26d83fcc 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -39,6 +39,7 @@ export interface Block {
   };
   node?: any;
   columns?: number; // | TBlockColumnsDefaultValue;
+  classes?: string[];
 }
 
 export interface Link {
diff --git a/packages/mermaid/src/diagrams/block/layout.spec.ts b/packages/mermaid/src/diagrams/block/layout.spec.ts
new file mode 100644
index 000000000..1de79c880
--- /dev/null
+++ b/packages/mermaid/src/diagrams/block/layout.spec.ts
@@ -0,0 +1,13 @@
+// @ts-ignore: jison doesn't export types
+import { calculateBlockPosition } from './layout.js';
+
+describe('Layout', function () {
+  it('It shoud calulatepositions correctly', () => {
+    expect(calculateBlockPosition(2, 0)).toEqual({ px: 0, py: 0 });
+    expect(calculateBlockPosition(2, 1)).toEqual({ px: 1, py: 0 });
+    expect(calculateBlockPosition(2, 2)).toEqual({ px: 0, py: 1 });
+    expect(calculateBlockPosition(2, 3)).toEqual({ px: 1, py: 1 });
+    expect(calculateBlockPosition(2, 4)).toEqual({ px: 0, py: 2 });
+    expect(calculateBlockPosition(1, 3)).toEqual({ px: 0, py: 2 });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 9c9b1bd7e..741445806 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -1,10 +1,41 @@
 import { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
+import { log } from '../../logger.js';
+const padding = 8;
 
-const padding = 10;
+interface BlockPosition {
+  px: number;
+  py: number;
+}
+
+export function calculateBlockPosition(columns: number, position: number): BlockPosition {
+  // Ensure that columns is a positive integer
+  if (columns === 0 || !Number.isInteger(columns)) {
+    throw new Error('Columns must be an integer !== 0.');
+  }
+
+  // Ensure that position is a non-negative integer
+  if (position < 0 || !Number.isInteger(position)) {
+    throw new Error('Position must be a non-negative integer.');
+  }
+
+  if (columns < 0) {
+    // Auto coulumns is set
+    return { px: position, py: 0 };
+  }
+  if (columns === 1) {
+    // Auto coulumns is set
+    return { px: 0, py: position };
+  }
+  // Calculate posX and posY
+  const px = position % columns;
+  const py = Math.floor(position / columns);
+
+  return { px, py };
+}
 
 function calcBlockSizes(block: Block, db: BlockDB) {
-  console.log('calculateSize (start)', block.id, block?.size?.x, block?.size?.width);
+  log.debug('calculateSize (start)', block.id, block?.size?.x, block?.size?.width);
   const totalWidth = 0;
   const totalHeight = 0;
   let maxWidth = 0;
@@ -17,7 +48,7 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     // find max width of children
     for (const child of block.children) {
       const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
-      // console.log('APA', child.id, width, height, x, y);
+      // log.debug('APA', child.id, width, height, x, y);
       if (width > maxWidth) {
         maxWidth = width;
       }
@@ -51,105 +82,133 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     // }
   }
   if (block.children?.length > 0) {
+    const columns = block.columns || -1;
+    const numItems = block.children.length;
+
+    // The width and height in number blocks
+    let xSize = block.children?.length;
+    if (columns > 0 && columns < numItems) {
+      xSize = columns;
+    }
+    const ySize = Math.ceil(numItems / xSize);
+
+    log.debug(
+      '(calc)',
+      block.id,
+      'xSize',
+      xSize,
+      'ySize',
+      ySize,
+      'columns',
+      columns,
+      block.children.length
+    );
+
     const numChildren = block.children.length;
     block.size = {
-      width: numChildren * (maxWidth + padding) + padding,
-      height: maxHeight + 2 * padding,
+      // width: numChildren * (maxWidth + padding) + padding,
+      width: xSize * (maxWidth + padding) + padding,
+      // height: maxHeight + 2 * padding,
+      height: ySize * (maxHeight + padding) + padding,
       x: 0,
       y: 0,
     };
   }
-  console.log('calculateSize APA (done)', block.id, block.size.x, block.size.width);
+  log.debug('calculateSize APA (done)', block.id, block?.size?.x, block?.size?.width);
 }
 
 function layoutBlocks(block: Block, db: BlockDB) {
-  console.log('layout blocks (block)', block.id, 'x:', block.size.x, 'width:', block.size.width);
+  log.debug(
+    'layout blocks (=>layoutBlocks)',
+    block.id,
+    'x:',
+    block?.size?.x,
+    'width:',
+    block?.size?.width
+  );
+  const columns = block.columns || -1;
+  log.debug('layoutBlocks columns', block.id, '=>', columns);
   if (
     block.children && // find max width of children
     block.children.length > 0
   ) {
     const width = block?.children[0]?.size?.width || 0;
     const widthOfChildren = block.children.length * width + (block.children.length - 1) * padding;
-    let posX = (block?.size?.x || 0) - widthOfChildren / 2;
-    const posY = 0;
-    const parentX = block?.size?.x || 0 - block.children.length;
-    const parentWidth = block?.size?.width || 0;
 
-    console.log('widthOfChildren', widthOfChildren, 'posX', posX, 'parentX', parentX);
+    log.debug('widthOfChildren', widthOfChildren, 'posX');
 
     // let first = true;
+    let columnPos = -1;
     for (const child of block.children) {
-      console.log(
-        'layout blocks (child)',
-        child.id,
-        'x:',
-        child?.size?.x,
-        'width:',
-        child?.size?.width,
-        'posX:',
-        posX,
-        block?.size?.x,
-        widthOfChildren / 2,
-        widthOfChildren / 2
-      );
+      columnPos++;
+
+      // log.debug(
+      //   'layout blocks (child)',
+      //   child.id,
+      //   'x:',
+      //   child?.size?.x,
+      //   'width:',
+      //   child?.size?.width,
+      //   'posX:',
+      //   posX,
+      //   block?.size?.x,
+      //   widthOfChildren / 2,
+      //   widthOfChildren / 2
+      // );
 
       if (!child.size) {
         continue;
       }
       const { width, height } = child.size;
-      child.size.x = posX + width / 2;
-      posX += width + padding;
-      child.size.y = posY;
+      const { px, py } = calculateBlockPosition(columns, columnPos);
+      log.debug(
+        'layout blocks (child) px, py (',
+        block?.size?.x,
+        ',',
+        block?.size?.y,
+        ')',
+        'parent:',
+        block.id,
+        width / 2,
+        padding
+      );
+      if (block.size) {
+        child.size.x =
+          block.size.x - block.size.width / 2 + px * (width + padding) + width / 2 + padding;
+        // child.size.x = px * (width + padding) - block.size.width / 2;
+        // posX += width + padding;
+        // child.size.y = py * (height + padding) + height / 2 + padding;
+        child.size.y =
+          block.size.y - block.size.height / 2 + py * (height + padding) + height / 2 + padding;
+
+        log.debug(
+          'layout blocks (calc) px, py',
+          'id:',
+          child.id,
+          '=>',
+          'x:',
+          child.size.x,
+          'y:',
+          child.size.y
+        );
+      }
+
       // posY += height + padding;
       if (child.children) {
         layoutBlocks(child, db);
       }
     }
   }
-}
-
-function positionBlock(parent: Block, block: Block, db: BlockDB) {
-  console.log(
-    'layout position block',
-    parent.id,
-    parent?.size?.x,
+  log.debug(
+    'layout blocks (<==layoutBlocks)',
     block.id,
+    'x:',
     block?.size?.x,
     'width:',
     block?.size?.width
   );
-  let parentX = 0;
-  let parentWidth = 0;
-  let y = 0;
-  if (parent.id !== 'root') {
-    parentX = parent?.size?.x || 0;
-    parentWidth = parent?.size?.width || 0;
-    y = parent?.size?.y || 0;
-  }
-  if (block.size && block.id !== 'root') {
-    console.log(
-      'layout position block (calc)',
-      'x:',
-      parentX,
-      parentWidth / 2,
-      block.id,
-      'x:',
-      block.size.x,
-      block.size.width
-    );
-    // block.size.x = parentX + block.size.x + -block.size.width / 2;
-    block.size.x =
-      parentX < 0 ? parentX + block.size.x : parentX + block.size.x + -block.size.width / 2;
-    // block.size.x = parentX - parentWidth + Math.abs(block.size.x) / 2;
-    block.size.y = block.size.y + y;
-  }
-  if (block.children) {
-    for (const child of block.children) {
-      positionBlock(block, child, db);
-    }
-  }
-  // console.log('layout position block', block);
 }
+
 let minX = 0;
 let minY = 0;
 let maxX = 0;
@@ -160,7 +219,7 @@ function findBounds(block: Block) {
     const { x, y, width, height } = block.size;
     if (x - width / 2 < minX) {
       minX = x - width / 2;
-      // console.log('Here APA minX', block.id, x, width, minX);
+      // log.debug('Here APA minX', block.id, x, width, minX);
     }
     if (y - height / 2 < minY) {
       minY = y - height / 2;
@@ -180,20 +239,22 @@ function findBounds(block: Block) {
 }
 
 export function layout(db: BlockDB) {
-  const blocks = db.getBlocks();
-  const root = { id: 'root', type: 'composite', children: blocks } as Block;
+  const root = db.getBlock('root');
+  if (!root) {
+    return;
+  }
   calcBlockSizes(root, db);
   layoutBlocks(root, db);
   // Position blocks relative to parents
   // positionBlock(root, root, db);
-  console.log('getBlocks', JSON.stringify(db.getBlocks(), null, 2));
+  log.debug('getBlocks', JSON.stringify(root, null, 2));
 
   minX = 0;
   minY = 0;
   maxX = 0;
   maxY = 0;
   findBounds(root);
-  // console.log('Here maxX', minX, '--', maxX);
+  // log.debug('Here maxX', minX, '--', maxX);
   const height = maxY - minY;
   const width = maxX - minX;
   return { x: minX, y: minY, width, height };
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 5bbe279e7..04832d97f 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -5,28 +5,23 @@ import { ContainerElement } from 'd3';
 import type { Block } from './blockTypes.js';
 import { BlockDB } from './blockDB.js';
 
+interface Node {
+  classes: string;
+}
+
 function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   const vertex = block;
 
-  /**
-   * Variable for storing the classes for the vertex
-   *
-   * @type {string}
-   */
   let classStr = 'default';
-  if ((vertex?.classes?.length || []) > 0) {
-    classStr = vertex.classes.join(' ');
+  if ((vertex?.classes?.length || 0) > 0) {
+    classStr = (vertex?.classes || []).join(' ');
   }
   classStr = classStr + ' flowchart-label';
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
-  let vertexNode;
-  const labelData = { width: 0, height: 0 };
-
   let radious = 0;
   let _shape = '';
   let layoutOptions = {};
-  console.log('This is the type:', vertex.type);
   // Set the shape based parameters
   switch (vertex.type) {
     case 'round':
@@ -140,20 +135,18 @@ async function calculateBlockSize(elem: any, block: any, db: any) {
   const boundingBox = nodeEl.node().getBBox();
   const obj = db.getBlock(node.id);
   obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
-  console.log('Here boundsíng', boundingBox.width);
   db.setBlock(obj);
   nodeEl.remove();
 }
 
 export async function insertBlockPositioned(elem: any, block: any, db: any) {
-  console.log('Here insertBlockPositioned');
   const node = getNodeFromBlock(block, db, true);
   // if (node.type === 'composite') {
   //   return;
   // }
   // Add the element to the DOM to size it
-  const obj = db.getBlock(node.id);
-  const nodeEl = await insertNode(elem, node);
+  // const obj = db.getBlock(node.id);
+  // const nodeEl = await insertNode(elem, node);
   positionNode(node);
 }
 

From 74a9e86e747de8ebf93a149428a806a442dc746f Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Sun, 15 Oct 2023 22:55:29 +0200
Subject: [PATCH 059/193] #3358 Putting the elements back in

---
 packages/mermaid/src/diagrams/block/renderHelpers.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 04832d97f..7c1f7c6f9 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -145,8 +145,8 @@ export async function insertBlockPositioned(elem: any, block: any, db: any) {
   //   return;
   // }
   // Add the element to the DOM to size it
-  // const obj = db.getBlock(node.id);
-  // const nodeEl = await insertNode(elem, node);
+  const obj = db.getBlock(node.id);
+  const nodeEl = await insertNode(elem, node);
   positionNode(node);
 }
 

From 5619f8771bd40db0f07045b47345d717a5b87b00 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Oct 2023 12:13:49 +0200
Subject: [PATCH 060/193] #3358 Adding support for space blocks and different
 shapes

---
 cypress/platform/knsv2.html | 49 +++++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 0325eb659..6d5c9846b 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -27,7 +27,6 @@
       .mermaid {
         border: 1px solid #ddd;
         margin: 10px;
-        background: pink;
       }
       .mermaid2 {
         display: none;
@@ -40,7 +39,7 @@
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
-        border: 1px solid red;
+        border: 2px solid rgb(131, 142, 205);
       }
       .malware {
         position: fixed;
@@ -63,29 +62,53 @@
     
   
   
-    
    +    
     block-beta
   block
+    id3("Wider then")
+  end
+    
    
+    
    +block-beta
+    columns 3
+    space:2
+    id1("Wider then")
+    space:9
+    space
+    id2{{"Wider then"}}
+    space
+    id3("Wider then")
+    space
+    space
+    
    
+    
    +block-beta
   columns 1
+  block
     id1
     id2
-    id3("Wider then")
+    block
+      columns 1
+      id3("Wider then")
+      id5(("id5"))
+    end
   end
   id4
     
    
 
     
     block-beta
-  block
   columns 1
   block
-    columns 3
-    id1
-    id2
-    id2.1
-    %%id2.2
-  end
-  id48
+    columns 1
+    block
+      columns 3
+      id1
+      id2
+      id2.1(("XYZ"))
+      %%id2.2
+    end
+    id48
   end
   id3
 %%  id3
@@ -124,7 +147,7 @@ block-beta
 block-beta
   id1["Hello"]
   block
-    columns 2
+    columns 3
     id2["to"]
     id3["the"]
     id4["World"]

From f3f25c7874d879b7d607d63abef481e8c1b591fc Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 20 Oct 2023 12:30:25 +0200
Subject: [PATCH 061/193] #3358 Adding support for space blocks and different
 shapes

---
 packages/mermaid/src/dagre-wrapper/nodes.js   |  2 -
 .../mermaid/src/diagrams/block/blockDB.ts     | 38 ++++++++++++++++++-
 packages/mermaid/src/diagrams/block/layout.ts |  3 --
 .../src/diagrams/block/parser/block.jison     | 10 ++++-
 .../src/diagrams/block/parser/block.spec.ts   | 10 ++---
 .../src/diagrams/block/renderHelpers.ts       | 18 ++++++---
 6 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index b95265f31..78bcfea99 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -358,7 +358,6 @@ const rect = async (parent, node) => {
 };
 
 const composite = async (parent, node) => {
-  console.log('This got called');
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
@@ -1075,7 +1074,6 @@ export const clear = () => {
 };
 
 export const positionNode = (node) => {
-  console.log('Node id = ', node.id);
   const el = nodeElems[node.id];
   log.trace(
     'Transforming node',
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index f9578a4e7..6b787009d 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -13,6 +13,7 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 import { log } from '../../logger.js';
+import clone from 'lodash-es/clone.js';
 
 // Initialize the node database for simple lookups
 let blockDatabase: Record = {};
@@ -37,7 +38,16 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
         populateBlockDatabase(block.children, block);
       }
 
-      children.push(block);
+      if (block.type === 'space') {
+        for (let j = 0; j < block.width; j++) {
+          const newBlock = clone(block);
+          newBlock.id = newBlock.id + '-' + j;
+          blockDatabase[newBlock.id] = newBlock;
+          children.push(newBlock);
+        }
+      } else {
+        children.push(block);
+      }
     }
   }
   parent.children = children;
@@ -57,12 +67,38 @@ const clear = (): void => {
 
 type ITypeStr2Type = (typeStr: string) => BlockType;
 export function typeStr2Type(typeStr: string) {
+  log.debug('typeStr2Type', typeStr);
   // TODO: add all types
   switch (typeStr) {
     case '[]':
       return 'square';
     case '()':
+      log.debug('we have a round');
       return 'round';
+    case '(())':
+      return 'circle';
+    case '>]':
+      return 'rect_left_inv_arrow';
+    case '{}':
+      return 'question';
+    case '{{}}':
+      return 'hexagon';
+    case '([])':
+      return 'stadium';
+    case '[[]]':
+      return 'subroutine';
+    case '[()]':
+      return 'cylinder';
+    case '((()))':
+      return 'doublecircle';
+    case '[//]':
+      return 'lean_right';
+    case '[\\\\]':
+      return 'lean_left';
+    case '[/\\]':
+      return 'trapezoid';
+    case '[\\/]':
+      return 'inv_trapezoid';
     default:
       return 'square';
   }
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 741445806..f9a6cd3f9 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -104,11 +104,8 @@ function calcBlockSizes(block: Block, db: BlockDB) {
       block.children.length
     );
 
-    const numChildren = block.children.length;
     block.size = {
-      // width: numChildren * (maxWidth + padding) + padding,
       width: xSize * (maxWidth + padding) + padding,
-      // height: maxHeight + 2 * padding,
       height: ySize * (maxHeight + padding) + padding,
       x: 0,
       y: 0,
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 32b7c28e2..b2975b610 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -13,6 +13,7 @@
 %x acc_descr
 %x acc_descr_multiline
 %x string
+%x space
 %x md_string
 %x NODE
 
@@ -43,6 +44,9 @@ CRLF \u000D\u000A
 ["]                     this.pushState("string");
 ["]             this.popState();
 [^"]*           return "STR";
+space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
+space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
+[^"]*           return "STR";
 "style"               return 'STYLE';
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
@@ -64,7 +68,7 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 .*direction\s+LR[^\n]*                                      return 'direction_lr';
 
 // Start of nodes with shapes and description
-"-)"                   { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_D START'; }
+"-)"                   { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
 "(-"                   { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
 "))"                   { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
 ")"                    { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART';      }
@@ -167,6 +171,8 @@ link
 statement
   : nodeStatement
   | columnsStatement
+  | SPACE_BLOCK
+    { const num=parseInt($1); const spaceId = yy.generateId(); $$ = { id: spaceId, type:'space', label:'', width: num, children: [] }}
   | blockStatement
 //   SPACELIST node       { yy.getLogger().info('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
 // 	| SPACELIST ICON       { yy.getLogger().info('Icon: ',$2);yy.decorateNode({icon: $2}); }
@@ -182,7 +188,7 @@ statement
 
 nodeStatement
   : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); $$ = {id: $1.id}; }
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1)}; }
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr)}; }
   ;
 
 columnsStatement
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index adb814be2..bf32afc5e 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -163,7 +163,7 @@ describe('Block diagram', function () {
 
       expect(blocks[0].children.length).toBe(2);
       expect(blocks[0].id).not.toBe(undefined);
-      expect(blocks[0].label).toBe(blocks[0].id);
+      expect(blocks[0].label).toBe('');
       expect(blocks[0].type).toBe('composite');
 
       const aBlock = blocks[0].children[0];
@@ -196,12 +196,12 @@ describe('Block diagram', function () {
 
       expect(blocks[0].children.length).toBe(2);
       expect(blocks[0].id).not.toBe(undefined);
-      expect(blocks[0].label).toBe(blocks[0].id);
+      expect(blocks[0].label).toBe('');
       expect(blocks[0].type).toBe('composite');
 
       expect(secondComposite.children.length).toBe(1);
       expect(secondComposite.id).not.toBe(undefined);
-      expect(secondComposite.label).toBe(secondComposite.id);
+      expect(secondComposite.label).toBe('');
       expect(secondComposite.type).toBe('composite');
 
       expect(aBlock.id).not.toBe(aBlock);
@@ -284,7 +284,7 @@ describe('Block diagram', function () {
 
       block.parse(str);
     });
-    it.skip('empty blocks', async () => {
+    it('empty blocks', async () => {
       const str = `block-beta
         columns 3
         space
@@ -308,7 +308,7 @@ describe('Block diagram', function () {
         columns 2
         mc["Memcache"]:2::black
         `;
-
+      const apa = 'apan hopar i träden';
       block.parse(str);
     });
 
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 7c1f7c6f9..78cce974c 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -22,15 +22,21 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   let radious = 0;
   let _shape = '';
   let layoutOptions = {};
+  let padding;
   // Set the shape based parameters
   switch (vertex.type) {
     case 'round':
       radious = 5;
       _shape = 'rect';
       break;
+    // case 'composite-subgraph':
+    //   radious = 0;
+    //   _shape = 'composite';
+    //   break;
     case 'composite':
-      radious = 4;
+      radious = 0;
       _shape = 'composite';
+      padding = 0;
       break;
     case 'square':
       _shape = 'rect';
@@ -119,7 +125,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     positioned,
     type: vertex.type,
     // props: vertex.props,
-    padding: getConfig()?.flowchart?.padding || 0,
+    padding: padding ?? (getConfig()?.flowchart?.padding || 0),
   };
   return node;
 }
@@ -139,15 +145,17 @@ async function calculateBlockSize(elem: any, block: any, db: any) {
   nodeEl.remove();
 }
 
-export async function insertBlockPositioned(elem: any, block: any, db: any) {
+export async function insertBlockPositioned(elem: any, block: Block, db: any) {
   const node = getNodeFromBlock(block, db, true);
   // if (node.type === 'composite') {
   //   return;
   // }
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
-  const nodeEl = await insertNode(elem, node);
-  positionNode(node);
+  if (obj.type !== 'space') {
+    const nodeEl = await insertNode(elem, node);
+    positionNode(node);
+  }
 }
 
 export async function performOperations(

From 7198fe55a9312f12fdf810b9538585fe5f0d8d49 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 26 Oct 2023 22:01:44 +0200
Subject: [PATCH 062/193] Parsing of block arrows with directions, creating a
 dedicated new node for this.

---
 cypress/platform/knsv2.html                   | 29 +++++----
 packages/mermaid/src/dagre-wrapper/nodes.js   | 27 ++++++++
 .../mermaid/src/diagrams/block/blockDB.ts     |  2 +
 .../mermaid/src/diagrams/block/blockTypes.ts  |  3 +
 .../src/diagrams/block/parser/block.jison     | 61 +++++++++++--------
 .../src/diagrams/block/renderHelpers.ts       |  3 +
 6 files changed, 84 insertions(+), 41 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 6d5c9846b..315c33b21 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -62,24 +62,23 @@
     
   
   
-    
    -block-beta
-  block
-    id3("Wider then")
-  end
-    
    
     
    +block-beta
+      blockArrowId<["Label"]>(right, down)
+    
    
+    
     block-beta
     columns 3
-    space:2
-    id1("Wider then")
-    space:9
-    space
-    id2{{"Wider then"}}
-    space
-    id3("Wider then")
-    space
-    space
+    space:3
+    ida idb idc
+    id1  id2
+      blockArrowId<["Label"]>(right)
+      blockArrowId2<["Label"]>(left)
+      blockArrowId3<["Label"]>(up)
+      blockArrowId4<["Label"]>(down)
+      blockArrowId5<["Label"]>(x)
+      blockArrowId6<["Label"]>(y)
+      blockArrowId6<["Label"]>(x, down)
     
    
     
     block-beta
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 78bcfea99..41578f584 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -95,6 +95,32 @@ const hexagon = async (parent, node) => {
 
   return shapeSvg;
 };
+const block_arrow = async (parent, node) => {
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+
+  const f = 2;
+  const h = bbox.height + node.padding;
+  const m = h / f;
+  const w = bbox.width + 2 * m + node.padding;
+  const points = [
+    { x: m, y: 0 },
+    { x: w - m, y: 0 },
+    { x: w, y: -h / 2 },
+    { x: w - m, y: -h },
+    { x: m, y: -h },
+    { x: 0, y: -h / 2 },
+  ];
+
+  const hex = insertPolygonShape(shapeSvg, w, h, points);
+  hex.attr('style', node.style);
+  updateNodeBounds(node, hex);
+
+  node.intersect = function (point) {
+    return intersect.polygon(node, points, point);
+  };
+
+  return shapeSvg;
+};
 
 const rect_left_inv_arrow = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
@@ -1016,6 +1042,7 @@ const shapes = {
   doublecircle,
   stadium,
   hexagon,
+  block_arrow,
   rect_left_inv_arrow,
   lean_right,
   lean_left,
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 6b787009d..a3ef97e24 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -99,6 +99,8 @@ export function typeStr2Type(typeStr: string) {
       return 'trapezoid';
     case '[\\/]':
       return 'inv_trapezoid';
+    case '<[]>':
+      return 'block_arrow';
     default:
       return 'square';
   }
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index f26d83fcc..001cd7bda 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -7,6 +7,8 @@ export interface BlockConfig extends BaseDiagramConfig {
 export type BlockType =
   | 'column-setting'
   | 'round'
+  | 'block_arrow'
+  | 'space'
   | 'square'
   | 'diamond'
   | 'hexagon'
@@ -40,6 +42,7 @@ export interface Block {
   node?: any;
   columns?: number; // | TBlockColumnsDefaultValue;
   classes?: string[];
+  directions?: string[];
 }
 
 export interface Link {
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index b2975b610..91d26faf3 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -16,6 +16,8 @@
 %x space
 %x md_string
 %x NODE
+%x BLOCK_ARROW
+%x ARROW_DIR
 
 
 // as per section 6.1 of RFC 2234 [2]
@@ -42,11 +44,10 @@ CRLF \u000D\u000A
 [^`"]+        { return "MD_STR";}
 [`]["]          { this.popState();}
 ["]                     this.pushState("string");
-["]             this.popState();
-[^"]*           return "STR";
+["]             { log.debug('LEX: POPPING STR:', yytext);this.popState();}
+[^"]*           { log.debug('LEX: STR ebd:', yytext); return "STR";}
 space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
 space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
-[^"]*           return "STR";
 "style"               return 'STYLE';
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
@@ -68,15 +69,15 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 .*direction\s+LR[^\n]*                                      return 'direction_lr';
 
 // Start of nodes with shapes and description
-"-)"                   { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
-"(-"                   { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
-"))"                   { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
-")"                    { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART';      }
-"(("                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"{{"                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"("                    { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"["                    { yy.getLogger().info('Lex: ['); this.pushState('NODE');return 'NODE_DSTART'; }
-"(["                   { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"-)"                   { yy.getLogger().info('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
+"(-"                   { yy.getLogger().info('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
+"))"                   { yy.getLogger().info('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
+")"                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART';      }
+"(("                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"{{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"("                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"["                    { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
+"(["                   { yy.getLogger().info('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
 "[["                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[|"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[("                   { this.pushState('NODE');return 'NODE_DSTART'; }
@@ -85,19 +86,23 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 "[/"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[\\"                  { this.pushState('NODE');return 'NODE_DSTART'; }
 
+"<["                   { this.pushState('BLOCK_ARROW');log.debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
 
-[^\(\[\n\-\)\{\}]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+[^\(\[\n\-\)\{\}\s\<]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
 <>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
 
 // Handling of strings in node
+["][`]           { this.pushState("md_string");}
 ["][`]           { this.pushState("md_string");}
 [^`"]+      { return "NODE_DESCR";}
 [`]["]      { this.popState();}
 ["]              { yy.getLogger().info('Lex: Starting string');this.pushState("string");}
-[^"]+          { yy.getLogger().info('Lex: NODE_DESCR:', yytext); return "NODE_DESCR";}
-["]            {this.popState();}
+["]              { yy.getLogger().info('LEX ARR: Starting string');this.pushState("string");}
+[^"]+          { log.debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
+["]            {log.debug('LEX POPPING');this.popState();}
 
 // Node end of shape
+\]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
 [\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
 [\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
 [\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
@@ -111,6 +116,15 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 "/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
 ")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
 
+"]>"\s*"("       { log.debug('Lex: =>BAE');  this.pushState('ARROW_DIR');  }
+","?right\s*           { log.debug('Lex (right): dir:',yytext);return "DIR"; }
+","?left\s*            { log.debug('Lex (left):',yytext);return "DIR"; }
+","?x\s*               { log.debug('Lex (x):',yytext); return "DIR"; }
+","?y\s*               { log.debug('Lex (y):',yytext); return "DIR"; }
+","?up\s*              { log.debug('Lex (up):',yytext); return "DIR"; }
+","?\s*down\s*     { yytext = yytext.replace(/^,\s*/, ''); log.debug('Lex (down):',yytext); return "DIR"; }
+")"\s*             { yytext=']>';log.debug('Lex (ARROW_DIR end):',yytext);this.popState();this.popState();return "BLOCK_ARROW_END"; }
+
 // Edges
 \s*[xo<]?\-\-+[-xo>]\s*                 { yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
 \s*[xo<]?\=\=+[=xo>]\s*                 { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
@@ -174,16 +188,6 @@ statement
   | SPACE_BLOCK
     { const num=parseInt($1); const spaceId = yy.generateId(); $$ = { id: spaceId, type:'space', label:'', width: num, children: [] }}
   | blockStatement
-//   SPACELIST node       { yy.getLogger().info('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
-// 	| SPACELIST ICON       { yy.getLogger().info('Icon: ',$2);yy.decorateNode({icon: $2}); }
-// 	| SPACELIST CLASS      { yy.decorateNode({class: $2}); }
-//   | SPACELINE { yy.getLogger().info('SPACELIST');}
-// 	|
-//    node					       { yy.getLogger().info('Node: ',$1.id);yy.addNode(0, $1.id, $1.descr, $1.type);  }
-// 	| ICON                 { yy.decorateNode({icon: $1}); }
-// 	| CLASS                { yy.decorateNode({class: $1}); }
-//   // | SPACELIST
-
 	;
 
 nodeStatement
@@ -200,7 +204,6 @@ blockStatement
   | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
   ;
 
-
 node
   : NODE_ID
   { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
@@ -210,9 +213,15 @@ node
   // { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); }
   ;
 
+dirList: DIR { yy.getLogger().info("Rule: dirList: ", $1); $$ = [$1]; }
+  | DIR dirList { yy.getLogger().info("Rule: dirList: ", $1, $2); $$ = [$1].concat($2); }
+  ;
+
 nodeShapeNLabel
   :   NODE_DSTART STR NODE_DEND
 	      { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; }
+	|    BLOCK_ARROW_START STR dirList BLOCK_ARROW_END
+    	      { yy.getLogger().info("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, $3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
   ;
 
 %%
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 78cce974c..142de0c5c 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -50,6 +50,9 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     case 'hexagon':
       _shape = 'hexagon';
       break;
+    case 'block_arrow':
+      _shape = 'block_arrow';
+      break;
     case 'odd':
       _shape = 'rect_left_inv_arrow';
       break;

From 03c59adaede3cc0ce5dac3d81683fe5820a90cc6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 26 Oct 2023 22:02:16 +0200
Subject: [PATCH 063/193] Parsing of block arrows with directions, creating a
 dedicated new node for this.

---
 packages/mermaid/src/diagrams/block/blockDB.ts    | 6 +++---
 packages/mermaid/src/diagrams/block/blockTypes.ts | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index a3ef97e24..3cc9ec11d 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -22,8 +22,7 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
   const children = [];
   for (const block of blockList) {
     if (block.type === 'column-setting') {
-      const columns = block.columns || -1;
-      parent.columns = columns;
+      parent.columns = block.columns || -1;
     } else {
       if (!block.label) {
         if (block.type === 'composite') {
@@ -39,7 +38,8 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
       }
 
       if (block.type === 'space') {
-        for (let j = 0; j < block.width; j++) {
+        const w = block.width || 1;
+        for (let j = 0; j < w; j++) {
           const newBlock = clone(block);
           newBlock.id = newBlock.id + '-' + j;
           blockDatabase[newBlock.id] = newBlock;
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 001cd7bda..a65e5db32 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -17,6 +17,7 @@ export type BlockType =
   | 'lean_left'
   | 'trapezoid'
   | 'inv_trapezoid'
+  | 'rect_left_inv_arrow'
   | 'odd_right'
   | 'circle'
   | 'ellipse'
@@ -28,6 +29,7 @@ export type BlockType =
   | 'composite';
 
 export interface Block {
+  width?: number;
   id: string;
   label?: string;
   parent?: Block;

From df858dc7b61272621a4f4c9c4fc3c1f2d146c500 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 20 Nov 2023 14:00:25 +0100
Subject: [PATCH 064/193] #3358 Adding arrows to syntax

---
 cypress/platform/knsv2.html                   |  10 +-
 .../src/dagre-wrapper/blockArrowHelper.js     | 218 ++++++++++++++++++
 packages/mermaid/src/dagre-wrapper/nodes.js   |  35 ++-
 .../mermaid/src/diagrams/block/blockDB.ts     |   8 +-
 .../src/diagrams/block/parser/block.jison     |  49 ++--
 .../src/diagrams/block/renderHelpers.ts       |   1 +
 .../src/diagrams/flowchart/flowRenderer-v2.js |   4 +-
 .../src/diagrams/flowchart/parser/flow.jison  |   8 +-
 8 files changed, 290 insertions(+), 43 deletions(-)
 create mode 100644 packages/mermaid/src/dagre-wrapper/blockArrowHelper.js

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 315c33b21..ab5c0aa3c 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -62,9 +62,17 @@
     
   
   
+    
    +block-beta
+      columns 3
+      space blockArrowId1<["down"]>(down) space
+      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
+      space blockArrowId5<["up"]>(up) space
+      blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
+    
    
     
     block-beta
-      blockArrowId<["Label"]>(right, down)
+      A("APA") --> B("GORILLA")
     
    
     
     block-beta
diff --git a/packages/mermaid/src/dagre-wrapper/blockArrowHelper.js b/packages/mermaid/src/dagre-wrapper/blockArrowHelper.js
new file mode 100644
index 000000000..60ff77a57
--- /dev/null
+++ b/packages/mermaid/src/dagre-wrapper/blockArrowHelper.js
@@ -0,0 +1,218 @@
+const expandAndDeduplicateDirections = (directions) => {
+  const uniqueDirections = new Set();
+
+  for (const direction of directions) {
+    switch (direction) {
+      case 'x':
+        uniqueDirections.add('right');
+        uniqueDirections.add('left');
+        break;
+      case 'y':
+        uniqueDirections.add('up');
+        uniqueDirections.add('down');
+        break;
+      default:
+        uniqueDirections.add(direction);
+        break;
+    }
+  }
+
+  return uniqueDirections;
+};
+export const getArrowPoints = (directions, bbox, node) => {
+  const ud = expandAndDeduplicateDirections(directions);
+
+  // console.log('block_arrow abc123', node.id, node.directions, ud);
+
+  const f = 2;
+  const h = bbox.height + 2 * node.padding;
+  const m = h / f;
+  const w = bbox.width + 2 * m + node.padding;
+  const p = node.padding / 2;
+
+  let points = [];
+
+  if (ud.has('right') && ud.has('left') && ud.has('up') && ud.has('down')) {
+    // SQUARE
+    points = [
+      // Bottom
+      { x: 0, y: 0 },
+      { x: m, y: 0 },
+      { x: w / 2, y: 2 * p },
+      { x: w - m, y: 0 },
+      { x: w, y: 0 },
+
+      // Right
+      { x: w, y: -h / 3 },
+      { x: w + 2 * p, y: -h / 2 },
+      { x: w, y: (-2 * h) / 3 },
+      { x: w, y: -h },
+
+      // Top
+      { x: w - m, y: -h },
+      { x: w / 2, y: -h - 2 * p },
+      { x: m, y: -h },
+
+      // Left
+      { x: 0, y: -h },
+      { x: 0, y: (-2 * h) / 3 },
+      { x: -2 * p, y: -h / 2 },
+      { x: 0, y: -h / 3 },
+    ];
+  } else if (ud.has('right') && ud.has('left') && ud.has('up')) {
+    // RECTANGLE_VERTICAL (Top Open)
+    points = [
+      { x: m, y: 0 },
+      { x: w - m, y: 0 },
+      { x: w, y: -h / 2 },
+      { x: w - m, y: -h },
+      { x: m, y: -h },
+      { x: 0, y: -h / 2 },
+    ];
+  } else if (ud.has('right') && ud.has('left') && ud.has('down')) {
+    // RECTANGLE_VERTICAL (Bottom Open)
+    points = [
+      { x: 0, y: 0 },
+      { x: m, y: -h },
+      { x: w - m, y: -h },
+      { x: w, y: 0 },
+    ];
+  } else if (ud.has('right') && ud.has('up') && ud.has('down')) {
+    // RECTANGLE_HORIZONTAL (Right Open)
+    points = [
+      { x: 0, y: 0 },
+      { x: w, y: -m },
+      { x: w, y: -h + m },
+      { x: 0, y: -h },
+    ];
+  } else if (ud.has('left') && ud.has('up') && ud.has('down')) {
+    // RECTANGLE_HORIZONTAL (Left Open)
+    points = [
+      { x: w, y: 0 },
+      { x: 0, y: -m },
+      { x: 0, y: -h + m },
+      { x: w, y: -h },
+    ];
+  } else if (ud.has('right') && ud.has('left')) {
+    // HORIZONTAL_LINE
+    points = [
+      { x: m, y: 0 },
+      { x: m, y: -p },
+      { x: w - m, y: -p },
+      { x: w - m, y: 0 },
+      { x: w, y: -h / 2 },
+      { x: w - m, y: -h },
+      { x: w - m, y: -h + p },
+      { x: m, y: -h + p },
+      { x: m, y: -h },
+      { x: 0, y: -h / 2 },
+    ];
+  } else if (ud.has('up') && ud.has('down')) {
+    // VERTICAL_LINE
+    points = [
+      // Bottom center
+      { x: w / 2, y: 0 },
+      // Left pont of bottom arrow
+      { x: 0, y: -p },
+      { x: m, y: -p },
+      // Left top over vertical section
+      { x: m, y: -h + p },
+      { x: 0, y: -h + p },
+      // Top of arrow
+      { x: w / 2, y: -h },
+      { x: w, y: -h + p },
+      // Top of right vertical bar
+      { x: w - m, y: -h + p },
+      { x: w - m, y: -p },
+      { x: w, y: -p },
+    ];
+  } else if (ud.has('right') && ud.has('up')) {
+    // ANGLE_RT
+    points = [
+      { x: 0, y: 0 },
+      { x: w, y: -m },
+      { x: 0, y: -h },
+    ];
+  } else if (ud.has('right') && ud.has('down')) {
+    // ANGLE_RB
+    points = [
+      { x: 0, y: 0 },
+      { x: w, y: 0 },
+      { x: 0, y: -h },
+    ];
+  } else if (ud.has('left') && ud.has('up')) {
+    // ANGLE_LT
+    points = [
+      { x: w, y: 0 },
+      { x: 0, y: -m },
+      { x: w, y: -h },
+    ];
+  } else if (ud.has('left') && ud.has('down')) {
+    // ANGLE_LB
+    points = [
+      { x: w, y: 0 },
+      { x: 0, y: 0 },
+      { x: w, y: -h },
+    ];
+  } else if (ud.has('right')) {
+    // ARROW_RIGHT
+    points = [
+      { x: m, y: -p },
+      { x: m, y: -p },
+      { x: w - m, y: -p },
+      { x: w - m, y: 0 },
+      { x: w, y: -h / 2 },
+      { x: w - m, y: -h },
+      { x: w - m, y: -h + p },
+      // top left corner of arrow
+      { x: m, y: -h + p },
+      { x: m, y: -h + p },
+    ];
+  } else if (ud.has('left')) {
+    // ARROW_LEFT
+    points = [
+      { x: m, y: 0 },
+      { x: m, y: -p },
+      // Two points, the right corners
+      { x: w - m, y: -p },
+      { x: w - m, y: -h + p },
+      { x: m, y: -h + p },
+      { x: m, y: -h },
+      { x: 0, y: -h / 2 },
+    ];
+  } else if (ud.has('up')) {
+    // ARROW_TOP
+    points = [
+      // Bottom center
+      { x: m, y: -p },
+      // Left top over vertical section
+      { x: m, y: -h + p },
+      { x: 0, y: -h + p },
+      // Top of arrow
+      { x: w / 2, y: -h },
+      { x: w, y: -h + p },
+      // Top of right vertical bar
+      { x: w - m, y: -h + p },
+      { x: w - m, y: -p },
+    ];
+  } else if (ud.has('down')) {
+    // ARROW_BOTTOM
+    points = [
+      // Bottom center
+      { x: w / 2, y: 0 },
+      // Left pont of bottom arrow
+      { x: 0, y: -p },
+      { x: m, y: -p },
+      // Left top over vertical section
+      { x: m, y: -h + p },
+      { x: w - m, y: -h + p },
+      { x: w - m, y: -p },
+      { x: w, y: -p },
+    ];
+  } else {
+    // POINT
+    points = [{ x: 0, y: 0 }];
+  }
+
+  return points;
+};
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 41578f584..afe1b3a3f 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -7,6 +7,7 @@ import createLabel from './createLabel.js';
 import note from './shapes/note.js';
 import { parseMember } from '../diagrams/class/svgDraw.js';
 import { evaluate } from '../diagrams/common/common.js';
+import { getArrowPoints } from './blockArrowHelper.js';
 
 const question = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
@@ -14,6 +15,7 @@ const question = async (parent, node) => {
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
   const s = w + h;
+
   const points = [
     { x: s / 2, y: 0 },
     { x: s, y: -s / 2 },
@@ -95,21 +97,33 @@ const hexagon = async (parent, node) => {
 
   return shapeSvg;
 };
+
 const block_arrow = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const f = 2;
-  const h = bbox.height + node.padding;
+  const h = bbox.height + 2 * node.padding;
   const m = h / f;
   const w = bbox.width + 2 * m + node.padding;
-  const points = [
-    { x: m, y: 0 },
-    { x: w - m, y: 0 },
-    { x: w, y: -h / 2 },
-    { x: w - m, y: -h },
-    { x: m, y: -h },
-    { x: 0, y: -h / 2 },
-  ];
+
+  const p = node.padding / 2;
+  //
+  // const points = [
+  //   { x: m, y: 0 },
+  //   { x: m, y: -p },
+  //   { x: w - m, y: -p },
+  //   { x: w - m, y: 0 },
+  //   // Right point
+  //   { x: w, y: -h / 2 },
+  //   // Point moving left and up from right point
+  //   { x: w - m, y: -h },
+  //   { x: w - m, y: -h + p },
+  //   { x: m, y: -h + p },
+  //   { x: m, y: -h },
+  //   { x: 0, y: -h / 2 },
+  // ];
+
+  const points = getArrowPoints(node.directions, bbox, node);
 
   const hex = insertPolygonShape(shapeSvg, w, h, points);
   hex.attr('style', node.style);
@@ -1085,6 +1099,9 @@ export const insertNode = async (elem, node, dir) => {
   if (node.class) {
     el.attr('class', 'node default ' + node.class);
   }
+  // MC Special
+  newEl.attr('data-node', 'true');
+  newEl.attr('data-id', node.id);
 
   nodeElems[node.id] = newEl;
 
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 3cc9ec11d..86f0b78bb 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -66,9 +66,8 @@ const clear = (): void => {
 };
 
 type ITypeStr2Type = (typeStr: string) => BlockType;
-export function typeStr2Type(typeStr: string) {
+export function typeStr2Type(typeStr: string): BlockType {
   log.debug('typeStr2Type', typeStr);
-  // TODO: add all types
   switch (typeStr) {
     case '[]':
       return 'square';
@@ -80,7 +79,7 @@ export function typeStr2Type(typeStr: string) {
     case '>]':
       return 'rect_left_inv_arrow';
     case '{}':
-      return 'question';
+      return 'diamond';
     case '{{}}':
       return 'hexagon';
     case '([])':
@@ -115,9 +114,10 @@ export const generateId = () => {
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
+  // log.debug('The hierarchy', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
+  // log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
   blocks = rootBlock.children;
 };
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 91d26faf3..448ce0f41 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -44,8 +44,8 @@ CRLF \u000D\u000A
 [^`"]+        { return "MD_STR";}
 [`]["]          { this.popState();}
 ["]                     this.pushState("string");
-["]             { log.debug('LEX: POPPING STR:', yytext);this.popState();}
-[^"]*           { log.debug('LEX: STR ebd:', yytext); return "STR";}
+["]             { yy.getLogger().debug('LEX: POPPING STR:', yytext);this.popState();}
+[^"]*           { yy.getLogger().debug('LEX: STR ebd:', yytext); return "STR";}
 space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
 space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
 "style"               return 'STYLE';
@@ -86,7 +86,7 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 "[/"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[\\"                  { this.pushState('NODE');return 'NODE_DSTART'; }
 
-"<["                   { this.pushState('BLOCK_ARROW');log.debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
+"<["                   { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
 
 [^\(\[\n\-\)\{\}\s\<]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
 <>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
@@ -98,8 +98,8 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 [`]["]      { this.popState();}
 ["]              { yy.getLogger().info('Lex: Starting string');this.pushState("string");}
 ["]              { yy.getLogger().info('LEX ARR: Starting string');this.pushState("string");}
-[^"]+          { log.debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
-["]            {log.debug('LEX POPPING');this.popState();}
+[^"]+          { yy.getLogger().debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
+["]            {yy.getLogger().debug('LEX POPPING');this.popState();}
 
 // Node end of shape
 \]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
@@ -116,14 +116,14 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 "/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
 ")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
 
-"]>"\s*"("       { log.debug('Lex: =>BAE');  this.pushState('ARROW_DIR');  }
-","?right\s*           { log.debug('Lex (right): dir:',yytext);return "DIR"; }
-","?left\s*            { log.debug('Lex (left):',yytext);return "DIR"; }
-","?x\s*               { log.debug('Lex (x):',yytext); return "DIR"; }
-","?y\s*               { log.debug('Lex (y):',yytext); return "DIR"; }
-","?up\s*              { log.debug('Lex (up):',yytext); return "DIR"; }
-","?\s*down\s*     { yytext = yytext.replace(/^,\s*/, ''); log.debug('Lex (down):',yytext); return "DIR"; }
-")"\s*             { yytext=']>';log.debug('Lex (ARROW_DIR end):',yytext);this.popState();this.popState();return "BLOCK_ARROW_END"; }
+"]>"\s*"("       { yy.getLogger().debug('Lex: =>BAE');  this.pushState('ARROW_DIR');  }
+","?\s*right\s*           { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (right): dir:',yytext);return "DIR"; }
+","?\s*left\s*            { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (left):',yytext);return "DIR"; }
+","?\s*x\s*               { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (x):',yytext); return "DIR"; }
+","?\s*y\s*               { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (y):',yytext); return "DIR"; }
+","?\s*up\s*              { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (up):',yytext); return "DIR"; }
+","?\s*down\s*     { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (down):',yytext); return "DIR"; }
+")"\s*             { yytext=']>';yy.getLogger().debug('Lex (ARROW_DIR end):',yytext);this.popState();this.popState();return "BLOCK_ARROW_END"; }
 
 // Edges
 \s*[xo<]?\-\-+[-xo>]\s*                 { yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
@@ -157,7 +157,7 @@ seperator
   ;
 
 start: BLOCK_DIAGRAM_KEY document EOF
-  { yy.setHierarchy($2); }
+  { yy.getLogger().info("Rule: hierarchy: ", $2); yy.setHierarchy($2); }
   ;
 
 
@@ -171,8 +171,8 @@ stop
 
 //array of statements
 document
-	: statement { yy.getLogger().info("Rule: statement: ", $1); $$ = [$1]; }
-	| statement document { yy.getLogger().info("Rule: document statement: ", $1, $2); $$ = [$1].concat($2); }
+	: statement { yy.getLogger().info("Rule: statement: ", $1); typeof $1.length === 'number'?$$ = $1:$$ = [$1]; }
+	| statement document { yy.getLogger().info("Rule: statement #2: ", $1); $$ = [$1].concat($2); }
 	;
 
 link
@@ -191,12 +191,12 @@ statement
 	;
 
 nodeStatement
-  : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); $$ = {id: $1.id}; }
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr)}; }
+  : nodeStatement link node { yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3); $$ = [{id: $1.id, label: $1.label, type:$1.type, directions: $1.directions}, {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}]; }
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions}; }
   ;
 
 columnsStatement
-  : COLUMNS { yy.getLogger().info("COLUMNS: ", $1); $$ = {type: 'column-setting', columns: $1 === 'auto'?-1:parseInt($1) } }
+  : COLUMNS { yy.getLogger().info('APA123', this? this:'na'); yy.getLogger().info("COLUMNS: ", $1); $$ = {type: 'column-setting', columns: $1 === 'auto'?-1:parseInt($1) } }
   ;
 
 blockStatement
@@ -207,10 +207,11 @@ blockStatement
 node
   : NODE_ID
   { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
-  |NODE_ID nodeShapeNLabel
-    { yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2); $$ = { id: $1, label: $2.label, typeStr: $2.typeStr };}
-  // |nodeShapeNLabel seperator
-  // { yy.getLogger().info("Rule: node (nodeShapeNLabel seperator): ", $1, $2, $3); }
+  | NODE_ID nodeShapeNLabel
+  {
+    yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2);
+    $$ = { id: $1, label: $2.label, typeStr: $2.typeStr, directions: $2.directions };
+  }
   ;
 
 dirList: DIR { yy.getLogger().info("Rule: dirList: ", $1); $$ = [$1]; }
@@ -221,7 +222,7 @@ nodeShapeNLabel
   :   NODE_DSTART STR NODE_DEND
 	      { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; }
 	|    BLOCK_ARROW_START STR dirList BLOCK_ARROW_END
-    	      { yy.getLogger().info("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, $3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
+    	      { yy.getLogger().info("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, " #3:",$3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
   ;
 
 %%
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 142de0c5c..125cd2997 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -114,6 +114,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     class: classStr,
     style: styles.style,
     id: vertex.id,
+    directions: vertex.directions,
     // link: vertex.link,
     // linkTarget: vertex.linkTarget,
     // tooltip: diagObj.db.getTooltip(vertex.id) || '',
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 23f94942c..a887511d5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -360,8 +360,10 @@ export const getClasses = function (text, diagObj) {
  *
  * @param text
  * @param id
+ * @param _version
+ * @param diagObj
  */
-
+// [MermaidChart: 33a97b35-1f95-4ce9-81b5-3038669bc170]
 export const draw = async function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
   diagObj.db.clear();
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 70fb49162..1957b4555 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -332,7 +332,7 @@ spaceList
 
 statement
     : verticeStatement separator
-    { /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
+    { $$=$1.nodes}
     | styleStatement separator
     {$$=[];}
     | linkStyleStatement separator
@@ -359,9 +359,9 @@ statement
 
 separator: NEWLINE | SEMI | EOF ;
 
- 
+
 verticeStatement: verticeStatement link node
-        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+        {/* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
     |  verticeStatement link node spaceList
         { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
     |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
@@ -377,7 +377,7 @@ node: styledVertex
 styledVertex: vertex
         { /* console.warn('nod', $1); */ $$ = $1;}
     | vertex STYLE_SEPARATOR idString
-        {$$ = $1;yy.setClass($1,$3)}
+        { $$ = $1;yy.setClass($1,$3)}
     ;
 
 vertex:  idString SQS text SQE

From 0d98e6ca533a8b1a59ee29e81c673e5d6b3e3259 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 00:17:53 +0530
Subject: [PATCH 065/193] refactor: Revert type change for renderer

---
 packages/mermaid/src/Diagram.ts               |   2 +-
 packages/mermaid/src/diagram-api/types.ts     |   3 +-
 .../src/diagrams/error/errorRenderer.ts       | 116 +++++++++---------
 packages/mermaid/src/mermaidAPI.ts            |   2 +-
 4 files changed, 61 insertions(+), 62 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 8c98d00c6..2b5ae8992 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -58,7 +58,7 @@ export class Diagram {
   }
 
   async render(id: string, version: string) {
-    await this.renderer.draw(this.text, id, version, this, null);
+    await this.renderer.draw(this.text, id, version, this);
   }
 
   getParser() {
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index d237f00f0..58d98107e 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -100,8 +100,7 @@ export type DrawDefinition = (
   text: string,
   id: string,
   version: string,
-  diagramObject: Diagram,
-  error: Error | null,
+  diagramObject: Diagram
 ) => void | Promise;
 
 export interface ParserDefinition {
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index d7b02bf5d..c9efa1054 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -17,14 +17,12 @@ export const draw = (
   id: string,
   version: string,
   _diagramObject: Diagram,
-  error: Error | null = null
+  error?: Error
 ) => {
   log.debug('renering svg for syntax error\n');
-
   const svg: SVG = selectSvgElement(id);
-
   const g: Group = svg.append('g');
-  if (error && error.message?.includes('KaTeX')) {
+  if (error?.message?.includes('KaTeX')) {
     const title = error.message.split(': ')[0];
     const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', '');
     g.append('foreignObject')
@@ -36,67 +34,69 @@ export const draw = (
       .html(`
    ${title}
    ${body}
    `);
     svg.attr('height', 100);
     svg.attr('width', 500);
-  } else {
-    svg.attr('viewBox', '0 0 2412 512');
-    configureSvgSize(svg, 100, 512, true);
+    svg.attr('viewBox', '0 0 500 100');
+    return;
+  }
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
-      );
+  svg.attr('viewBox', '0 0 2412 512');
+  configureSvgSize(svg, 100, 512, true);
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
+    );
 
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1440)
-      .attr('y', 250)
-      .attr('font-size', '150px')
-      .style('text-anchor', 'middle')
-      .text('Syntax error in text');
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1250)
-      .attr('y', 400)
-      .attr('font-size', '100px')
-      .style('text-anchor', 'middle')
-      .text(`mermaid version ${version}`);
-    }
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
+    );
+
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1440)
+    .attr('y', 250)
+    .attr('font-size', '150px')
+    .style('text-anchor', 'middle')
+    .text('Syntax error in text');
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1250)
+    .attr('y', 400)
+    .attr('font-size', '100px')
+    .style('text-anchor', 'middle')
+    .text(`mermaid version ${version}`);
 };
 
 export const renderer = { draw };
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index ff238bc7f..a027ad797 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -435,7 +435,7 @@ const render = async function (
   // -------------------------------------------------------------------------------
   // Draw the diagram with the renderer
   try {
-    await diag.renderer.draw(text, id, version, diag, null);
+    await diag.renderer.draw(text, id, version, diag);
   } catch (e: any) {
     errorRenderer.draw(text, id, version, diag, e);
     throw e;

From 70b948fd178d33ea9c3d2364fc4b8c94e1f39fe4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 00:36:21 +0530
Subject: [PATCH 066/193] refactor: Optimize renderKatex

---
 cSpell.json                                   |  1 +
 packages/mermaid/package.json                 |  1 +
 .../mermaid/src/diagrams/common/common.ts     | 50 ++++++++++---------
 pnpm-lock.yaml                                |  7 +++
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index d79d7950e..88d2553ee 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -80,6 +80,7 @@
     "logmsg",
     "lucida",
     "markdownish",
+    "mathml",
     "matthieu",
     "matthieumorel",
     "mdast",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 7a2194d77..db92e5793 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -91,6 +91,7 @@
     "@types/d3-shape": "^3.1.1",
     "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
+    "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
     "@types/prettier": "^2.7.2",
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 84133f563..3fd5806c2 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -318,33 +318,37 @@ export const calculateMathMLDimensions = async (text: string, config: MermaidCon
  * @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present
  */
 export const renderKatex = async (text: string, config: MermaidConfig): Promise => {
-  if (hasKatex(text) && (isMathMLSupported() || config.legacyMathML)) {
-    // @ts-ignore @types/katex does not work
-    const katex = (await import('katex')).default;
-    return text
-      .split(lineBreakRegex)
-      .map((line) =>
-        hasKatex(line)
-          ? `
+  if (!hasKatex(text)) {
+    return text;
+  }
+
+  if (!isMathMLSupported() && !config.legacyMathML) {
+    return text.replace(katexRegex, 'MathML is unsupported in this environment.');
+  }
+
+  const { default: katex } = await import('katex');
+  return text
+    .split(lineBreakRegex)
+    .map((line) =>
+      hasKatex(line)
+        ? `
             
    
               ${line}
             
    
           `
-          : `
    ${line}
    `
-      )
-      .join('')
-      .replace(katexRegex, (r, c) =>
-        katex
-          .renderToString(c, {
-            throwOnError: true,
-            displayMode: true,
-            output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml',
-          })
-          .replace(/\n/g, ' ')
-          .replace(//g, '')
-      );
-  }
-  return text.replace(katexRegex, 'MathML is unsupported in this environment.');
+        : `
    ${line}
    `
+    )
+    .join('')
+    .replace(katexRegex, (_, c) =>
+      katex
+        .renderToString(c, {
+          throwOnError: true,
+          displayMode: true,
+          output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml',
+        })
+        .replace(/\n/g, ' ')
+        .replace(//g, '')
+    );
 };
 
 export default {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff3ddf0b5..38ec0c9a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -279,6 +279,9 @@ importers:
       '@types/jsdom':
         specifier: ^21.1.1
         version: 21.1.1
+      '@types/katex':
+        specifier: ^0.16.7
+        version: 0.16.7
       '@types/lodash-es':
         specifier: ^4.17.7
         version: 4.17.7
@@ -4944,6 +4947,10 @@ packages:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
 
+  /@types/katex@0.16.7:
+    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
+    dev: true
+
   /@types/keyv@3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
     dependencies:

From 1d86cf01ad81596789650cca21d86762af05187a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 00:37:25 +0530
Subject: [PATCH 067/193] refactor: Cleanup error renderer

---
 packages/mermaid/src/diagrams/error/errorRenderer.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index c9efa1054..778206139 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -2,10 +2,9 @@ import { log } from '../../logger.js';
 import type { Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { Diagram } from '../../Diagram.js';
 
 /**
- * Draws a an info picture in the tag with id: id based on the graph definition in text.
+ * Draws an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param _text - Mermaid graph definition.
  * @param id - The text for the error
@@ -16,15 +15,15 @@ export const draw = (
   _text: string,
   id: string,
   version: string,
-  _diagramObject: Diagram,
+  _diagramObject: unknown,
   error?: Error
 ) => {
-  log.debug('renering svg for syntax error\n');
+  log.debug('rendering svg for syntax error\n');
   const svg: SVG = selectSvgElement(id);
   const g: Group = svg.append('g');
   if (error?.message?.includes('KaTeX')) {
     const title = error.message.split(': ')[0];
-    const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', '');
+    const body = error.message.slice(title.length + 2).replace('KaTeX parse ', '');
     g.append('foreignObject')
       .attr('height', 100)
       .attr('width', 500)

From 886eda92a99d97e59e703e99e3e9d62fb5685a25 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 00:40:45 +0530
Subject: [PATCH 068/193] chore: await drawActors

---
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 5dd7c74b7..50e549384 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -839,7 +839,7 @@ export const draw = async function (_text: string, id: string, _version: string,
   log.debug('createdActors', createdActors);
   log.debug('destroyedActors', destroyedActors);
 
-  drawActors(diagram, actors, actorKeys, false);
+  await drawActors(diagram, actors, actorKeys, false);
 
   // Draw the messages/signals
   let sequenceIndex = 1;

From 85774b7e46c47ffde6de4d25bc59b68204855e46 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 01:04:12 +0530
Subject: [PATCH 069/193] chore: Fix configAPI

---
 .../mermaid/src/diagrams/sequence/sequenceRenderer.ts     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 50e549384..2ed2e1cdb 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -317,7 +317,7 @@ async function boundMessage(_diagram, msgModel): number {
   const lines = common.splitBreaks(message).length;
   const isKatexMsg = hasKatex(message);
   const textDims = isKatexMsg
-    ? await calculateMathMLDimensions(message, configApi.getConfig())
+    ? await calculateMathMLDimensions(message, getConfig())
     : utils.calculateTextDimensions(message, messageFont(conf));
 
   if (!isKatexMsg) {
@@ -1160,7 +1160,7 @@ async function getMaxMessageWidthPerActor(
         ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
         : msg.message;
       const messageDimensions = hasKatex(wrappedMessage)
-        ? await calculateMathMLDimensions(msg.message, configApi.getConfig())
+        ? await calculateMathMLDimensions(msg.message, getConfig())
         : utils.calculateTextDimensions(wrappedMessage, textFont);
       const messageWidth = messageDimensions.width + 2 * conf.wrapPadding;
 
@@ -1273,7 +1273,7 @@ async function calculateActorMargins(
       );
     }
     const actDims = hasKatex(actor.description)
-      ? await calculateMathMLDimensions(actor.description, configApi.getConfig())
+      ? await calculateMathMLDimensions(actor.description, getConfig())
       : utils.calculateTextDimensions(actor.description, actorFont(conf));
 
     actor.width = actor.wrap
@@ -1339,7 +1339,7 @@ const buildNoteModel = async function (msg, actors, diagObj) {
   const shouldWrap = msg.wrap && msg.message;
 
   let textDimensions: { width: number; height: number; lineHeight?: number } = hasKatex(msg.message)
-    ? await calculateMathMLDimensions(msg.message, configApi.getConfig())
+    ? await calculateMathMLDimensions(msg.message, getConfig())
     : utils.calculateTextDimensions(
         shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
         noteFont(conf)

From a9818b40b686b3e60f87f8531a64b15520e5d39c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 01:27:54 +0530
Subject: [PATCH 070/193] chore: Remove special case error handling

---
 .../src/diagrams/error/errorRenderer.ts       | 24 +------------------
 packages/mermaid/src/mermaidAPI.ts            |  4 ++--
 2 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 778206139..1b3622c6d 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -9,33 +9,11 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
  * @param _text - Mermaid graph definition.
  * @param id - The text for the error
  * @param version - The version
- * @param error - The caught error
  */
-export const draw = (
-  _text: string,
-  id: string,
-  version: string,
-  _diagramObject: unknown,
-  error?: Error
-) => {
+export const draw = (_text: string, id: string, version: string) => {
   log.debug('rendering svg for syntax error\n');
   const svg: SVG = selectSvgElement(id);
   const g: Group = svg.append('g');
-  if (error?.message?.includes('KaTeX')) {
-    const title = error.message.split(': ')[0];
-    const body = error.message.slice(title.length + 2).replace('KaTeX parse ', '');
-    g.append('foreignObject')
-      .attr('height', 100)
-      .attr('width', 500)
-      .append('xhtml:div')
-      .style('font-size', '18px')
-      .style('color', '#552222')
-      .html(`
    ${title}
    ${body}
    `);
-    svg.attr('height', 100);
-    svg.attr('width', 500);
-    svg.attr('viewBox', '0 0 500 100');
-    return;
-  }
 
   svg.attr('viewBox', '0 0 2412 512');
   configureSvgSize(svg, 100, 512, true);
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index a027ad797..65310d4fa 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -436,8 +436,8 @@ const render = async function (
   // Draw the diagram with the renderer
   try {
     await diag.renderer.draw(text, id, version, diag);
-  } catch (e: any) {
-    errorRenderer.draw(text, id, version, diag, e);
+  } catch (e) {
+    errorRenderer.draw(text, id, version);
     throw e;
   }
 

From 22f83f16149106c648e23eccd78757d5a5cd24b4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 7 Dec 2023 09:57:02 +0530
Subject: [PATCH 071/193] fix: Sequence actor rendering

---
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 2ed2e1cdb..a3ca266a5 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1045,7 +1045,6 @@ export const draw = async function (_text: string, id: string, _version: string,
   log.debug('createdActors', createdActors);
   log.debug('destroyedActors', destroyedActors);
 
-  await drawActors(diagram, actors, actorKeys, false);
   for (const e of messagesToDraw) {
     await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj);
   }

From d91934b21963b45a672eaacbc473fe3b2c467372 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 10 Dec 2023 22:38:50 +0530
Subject: [PATCH 072/193] comment out skipped test

---
 cypress/integration/rendering/katex.spec.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/cypress/integration/rendering/katex.spec.js b/cypress/integration/rendering/katex.spec.js
index c3b390ef0..fb1d13392 100644
--- a/cypress/integration/rendering/katex.spec.js
+++ b/cypress/integration/rendering/katex.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Katex', () => {
   it('1: should render a complex Katex flowchart no htmlLabels', () => {
@@ -26,11 +26,11 @@ describe('Katex', () => {
     );
   });
   // TODO: changes made to develop between Feb 13 - Feb 23 cause this test to no longer function
-  it.skip('4: should render an error box originating from Katex', () => {
-    imgSnapshotTest(
-      `graph LR
-      A["$$\\shouldbeerror$$"]`,
-      { fontFamily: 'courier' }
-    );
-  });
+  // it.skip('4: should render an error box originating from Katex', () => {
+  //   imgSnapshotTest(
+  //     `graph LR
+  //     A["$$\\shouldBeError$$"]`,
+  //     { fontFamily: 'courier' }
+  //   );
+  // });
 });

From 2ed4469029874a3750d3962ee37731e1c2d6b39e Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 4 Jan 2024 14:15:30 +0100
Subject: [PATCH 073/193] #3358 Adding arrows to rendering

---
 cypress/platform/knsv2.html                   | 12 ++--
 packages/mermaid/src/dagre-wrapper/edges.js   |  3 +-
 .../mermaid/src/diagrams/block/blockDB.ts     | 69 +++++++++++++++++--
 .../src/diagrams/block/blockRenderer.ts       | 14 +++-
 .../mermaid/src/diagrams/block/blockTypes.ts  |  8 +++
 .../src/diagrams/block/parser/block.jison     | 11 ++-
 .../src/diagrams/block/renderHelpers.ts       | 68 ++++++++++++++++++
 7 files changed, 169 insertions(+), 16 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index ab5c0aa3c..80512993a 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -72,7 +72,10 @@ block-beta
     
    
     
     block-beta
-      A("APA") --> B("GORILLA")
+      columns 3
+      A space space:3 B("GORILLA")
+      A("APA") --o B
+
     
    
     
     block-beta
@@ -144,11 +147,8 @@ block-beta
   %% end
     
    
     
    -block-beta
-  id1
-  block
-  id2
-  end
+      flowchart LR
+      a1 -- apa --> b1
     
    
     
     block-beta
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 1581658b0..656390329 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -371,11 +371,12 @@ const cutPathAtIntersect = (_points, boundryNode) => {
 //(edgePaths, e, edge, clusterDb, diagramtype, graph)
 export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph) {
   let points = edge.points;
+  log.info('abc88 InsertEdge: edge=', edge, 'e=', e);
   let pointsHasChanged = false;
   const tail = graph.node(e.v);
   var head = graph.node(e.w);
+  log.info('abc88 InsertEdge (head & tail): ', head, tail);
 
-  log.info('abc88 InsertEdge: ', edge);
   if (head.intersect && tail.intersect) {
     points = points.slice(1, edge.points.length - 1);
     points.unshift(tail.intersect(points[0]));
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 86f0b78bb..f5876849e 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -17,12 +17,21 @@ import clone from 'lodash-es/clone.js';
 
 // Initialize the node database for simple lookups
 let blockDatabase: Record = {};
-
+let edgeList: Block[] = [];
+let edgeCount: Record = {};
 const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
   const children = [];
   for (const block of blockList) {
     if (block.type === 'column-setting') {
       parent.columns = block.columns || -1;
+    } else if (block.type === 'edge') {
+      if (edgeCount[block.id]) {
+        edgeCount[block.id]++;
+      } else {
+        edgeCount[block.id] = 1;
+      }
+      block.id = edgeCount[block.id] + '-' + block.id;
+      edgeList.push(block);
     } else {
       if (!block.label) {
         if (block.type === 'composite') {
@@ -31,7 +40,18 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
           block.label = block.id;
         }
       }
-      blockDatabase[block.id] = block;
+      const newBlock = !blockDatabase[block.id];
+      if (newBlock) {
+        blockDatabase[block.id] = block;
+      } else {
+        // Add newer relevant data to aggregated node
+        if (block.type !== 'na') {
+          blockDatabase[block.id].type = block.type;
+        }
+        if (block.label !== block.id) {
+          blockDatabase[block.id].label = block.label;
+        }
+      }
 
       if (block.children) {
         populateBlockDatabase(block.children, block);
@@ -46,7 +66,9 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
           children.push(newBlock);
         }
       } else {
-        children.push(block);
+        if (newBlock) {
+          children.push(block);
+        }
       }
     }
   }
@@ -63,6 +85,9 @@ const clear = (): void => {
   rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
   blockDatabase = { root: rootBlock };
   blocks = [] as Block[];
+
+  edgeList = [];
+  edgeCount = {};
 };
 
 type ITypeStr2Type = (typeStr: string) => BlockType;
@@ -101,7 +126,29 @@ export function typeStr2Type(typeStr: string): BlockType {
     case '<[]>':
       return 'block_arrow';
     default:
-      return 'square';
+      return 'na';
+  }
+}
+
+type IEdgeTypeStr2Type = (typeStr: string) => string;
+export function edgeTypeStr2Type(typeStr: string): string {
+  log.debug('typeStr2Type', typeStr);
+  switch (typeStr) {
+    case '==':
+      return 'thick';
+    default:
+      return 'normal';
+  }
+}
+type IEdgeStrToEdgeDataType = (typeStr: string) => string;
+export function edgeStrToEdgeData(typeStr: string): string {
+  switch (typeStr.trim()) {
+    case '--x':
+      return 'arrow_cross';
+    case '--o':
+      return 'arrow_circle';
+    default:
+      return 'arrow_point';
   }
 }
 
@@ -114,10 +161,10 @@ export const generateId = () => {
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
-  // log.debug('The hierarchy', JSON.stringify(block, null, 2));
+  log.debug('The hierarchy', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  // log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
+  log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
   blocks = rootBlock.children;
 };
 
@@ -146,6 +193,10 @@ type IGetBlocks = () => Block[];
 const getBlocks: IGetBlocks = () => {
   return blocks || [];
 };
+type IGetEdges = () => Block[];
+const getEdges: IGetEdges = () => {
+  return edgeList;
+};
 type IGetBlock = (id: string) => Block | undefined;
 const getBlock: IGetBlock = (id: string) => {
   return blockDatabase[id];
@@ -166,12 +217,15 @@ export interface BlockDB extends DiagramDB {
   getConfig: () => BlockConfig | undefined;
   addLink: IAddLink;
   getLogger: IGetLogger;
+  getEdges: IGetEdges;
   getBlocks: IGetBlocks;
   getBlock: IGetBlock;
   setBlock: ISetBlock;
   getLinks: IGetLinks;
   getColumns: IGetColumns;
   typeStr2Type: ITypeStr2Type;
+  edgeTypeStr2Type: IEdgeTypeStr2Type;
+  edgeStrToEdgeData: IEdgeStrToEdgeDataType;
   setHierarchy: ISetHierarchy;
   generateId: IGenerateId;
 }
@@ -180,8 +234,11 @@ const db: BlockDB = {
   getConfig: () => configApi.getConfig().block,
   addLink: addLink,
   typeStr2Type: typeStr2Type,
+  edgeTypeStr2Type: edgeTypeStr2Type,
+  edgeStrToEdgeData,
   getLogger, // TODO: remove
   getBlocks,
+  getEdges,
   getLinks,
   setHierarchy,
   getBlock,
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 2b691358c..991adda3f 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -1,8 +1,9 @@
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
-import { calculateBlockSizes, insertBlocks } from './renderHelpers.js';
+import { calculateBlockSizes, insertBlocks, insertEdges } from './renderHelpers.js';
 import { layout } from './layout.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import insertMarkers from '../../dagre-wrapper/markers.js';
 import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,
@@ -36,13 +37,22 @@ export const draw = async function (
   // @ts-ignore TODO root.select is not callable
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
+  // Define the supported markers for the diagram
+  const markers = ['point', 'circle', 'cross'];
+
+  // Add the marker definitions to the svg as marker tags
+  // insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute);
+  insertMarkers(svg, markers, diagObj.type, true);
+
   const bl = db.getBlocks();
+  const edges = db.getEdges();
 
   const nodes = svg.insert('g').attr('class', 'block');
   await calculateBlockSizes(nodes, bl, db);
   const bounds = layout(db);
-  log.debug('Here blocks', bl);
+  // log.debug('Here be blocks', bl);
   await insertBlocks(nodes, bl, db);
+  await insertEdges(nodes, edges, bl, db);
 
   // log.debug('Here', bl);
 
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index a65e5db32..4be03d959 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -5,7 +5,9 @@ export interface BlockConfig extends BaseDiagramConfig {
 }
 
 export type BlockType =
+  | 'na'
   | 'column-setting'
+  | 'edge'
   | 'round'
   | 'block_arrow'
   | 'space'
@@ -29,9 +31,15 @@ export type BlockType =
   | 'composite';
 
 export interface Block {
+  // When the block have the type edge, the start and end are the id of the source and target blocks
+  start?: string;
+  end?: string;
+  arrowTypeEnd?: string;
+  arrowTypeStart?: string;
   width?: number;
   id: string;
   label?: string;
+  intersect?: any;
   parent?: Block;
   type?: BlockType;
   children: Block[];
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 448ce0f41..d5e0ff828 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -191,10 +191,19 @@ statement
 	;
 
 nodeStatement
-  : nodeStatement link node { yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3); $$ = [{id: $1.id, label: $1.label, type:$1.type, directions: $1.directions}, {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}]; }
+  : nodeStatement link node {
+    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr =>',$2);
+    const edgeData = yy.edgeStrToEdgeData($2)
+    $$ = [
+      {id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},
+      {id: $1.id + '-' + $3.id, start: $1.id, end: $3.id, label: $3.label, type: 'edge', directions: $3.directions, arrowTypeEnd: edgeData, arrowTypeStart: 'arrow_open' },
+      {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
+      ];
+    }
   | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions}; }
   ;
 
+
 columnsStatement
   : COLUMNS { yy.getLogger().info('APA123', this? this:'na'); yy.getLogger().info("COLUMNS: ", $1); $$ = {type: 'column-setting', columns: $1 === 'auto'?-1:parseInt($1) } }
   ;
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 125cd2997..73933426d 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -1,5 +1,7 @@
 import { getStylesFromArray } from '../../utils.js';
 import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
+import { insertEdge } from '../../dagre-wrapper/edges.js';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { getConfig } from '../../config.js';
 import { ContainerElement } from 'd3';
 import type { Block } from './blockTypes.js';
@@ -127,6 +129,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     x: bounds.x,
     y: bounds.y,
     positioned,
+    intersect: undefined,
     type: vertex.type,
     // props: vertex.props,
     padding: padding ?? (getConfig()?.flowchart?.padding || 0),
@@ -158,6 +161,7 @@ export async function insertBlockPositioned(elem: any, block: Block, db: any) {
   const obj = db.getBlock(node.id);
   if (obj.type !== 'space') {
     const nodeEl = await insertNode(elem, node);
+    block.intersect = node?.intersect;
     positionNode(node);
   }
 }
@@ -183,3 +187,67 @@ export async function calculateBlockSizes(elem: ContainerElement, blocks: Block[
 export async function insertBlocks(elem: ContainerElement, blocks: Block[], db: BlockDB) {
   await performOperations(elem, blocks, db, insertBlockPositioned);
 }
+
+export async function insertEdges(
+  elem: ContainerElement,
+  edges: Block[],
+  blocks: Block[],
+  db: BlockDB
+) {
+  const g = new graphlib.Graph({
+    multigraph: true,
+    compound: true,
+  });
+  g.setGraph({
+    rankdir: 'TB',
+    nodesep: 10,
+    ranksep: 10,
+    marginx: 8,
+    marginy: 8,
+  });
+
+  for (const block of blocks) {
+    if (block.size) {
+      g.setNode(block.id, {
+        width: block.size.width,
+        height: block.size.height,
+        intersect: block.intersect,
+      });
+    }
+  }
+
+  // log.debug('abc88 edges', edges);
+  for (const edge of edges) {
+    // elem, e, edge, clusterDb, diagramType, graph;
+    if (edge.start && edge.end) {
+      const startBlock = db.getBlock(edge.start);
+      const endBlock = db.getBlock(edge.end);
+
+      if (startBlock?.size && endBlock?.size) {
+        const start = startBlock.size;
+        const end = endBlock.size;
+        const points = [
+          { x: start.x, y: start.y },
+          { x: start.x + (end.x - start.x) / 2, y: start.y + (end.y - start.y) / 2 },
+          { x: end.x, y: end.y },
+        ];
+        // edge.points = points;
+        await insertEdge(
+          elem,
+          { v: edge.start, w: edge.end, name: edge.id },
+          {
+            ...edge,
+            // arrowHead: 'normal',
+            arrowTypeEnd: edge.arrowTypeEnd,
+            arrowTypeStart: edge.arrowTypeStart,
+            points,
+            classes: 'edge-thickness-normal edge-pattern-solid flowchart-link LS-a1 LE-b1',
+          },
+          undefined,
+          'block',
+          g
+        );
+      }
+    }
+  }
+}

From d0eca268ad854ceb0fe736c1144cf73f876c4fe4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 4 Jan 2024 16:05:19 +0100
Subject: [PATCH 074/193] #3358 Multiple arrows

---
 cypress/platform/knsv2.html                   | 37 ++++++++++++++++++-
 packages/mermaid/src/dagre-wrapper/edges.js   |  6 ++-
 .../mermaid/src/diagrams/block/blockDB.ts     | 27 ++++++++++++--
 .../src/diagrams/block/blockRenderer.ts       |  3 +-
 .../src/diagrams/block/parser/block.jison     | 22 +++++++----
 .../src/diagrams/block/renderHelpers.ts       |  8 +++-
 6 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 80512993a..cefce1fb8 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -73,8 +73,41 @@ block-beta
     
     block-beta
       columns 3
-      A space space:3 B("GORILLA")
-      A("APA") --o B
+      A
+      space
+      block
+        E
+        F
+      end
+      E --> A
+    
    
+    
    +block-beta
+      columns 3
+      C space A space B
+      B --> A
+      B --> C
+      block
+        D
+        E
+      end
+      E --> A
+    
    
+    
    +block-beta
+      columns 2
+      C A B
+      block
+        D
+        E
+      end
+    
    
+    
    +block-beta
+      columns 2
+      A B C D
+      A --o B
+      A --> C
 
     
    
     
    diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 656390329..8a71cc594 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -375,9 +375,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   let pointsHasChanged = false;
   const tail = graph.node(e.v);
   var head = graph.node(e.w);
-  log.info('abc88 InsertEdge (head & tail): ', head, tail);
+  log.info('abc88 InsertEdge (head & tail): ', e.v, head, ' --- ', e.w, tail);
 
-  if (head.intersect && tail.intersect) {
+  if (head?.intersect && tail?.intersect) {
     points = points.slice(1, edge.points.length - 1);
     points.unshift(tail.intersect(points[0]));
     log.info(
@@ -387,6 +387,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
       head.intersect(points[points.length - 1])
     );
     points.push(head.intersect(points[points.length - 1]));
+  } else {
+    log.info('abc88 No intersect');
   }
   if (edge.toCluster) {
     log.info('to cluster abc88', clusterDb[edge.toCluster]);
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index f5876849e..c3861feab 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -19,7 +19,9 @@ import clone from 'lodash-es/clone.js';
 let blockDatabase: Record = {};
 let edgeList: Block[] = [];
 let edgeCount: Record = {};
-const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
+
+const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
+  const blockList = _blockList.flat();
   const children = [];
   for (const block of blockList) {
     if (block.type === 'column-setting') {
@@ -161,10 +163,10 @@ export const generateId = () => {
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
-  log.debug('The hierarchy', JSON.stringify(block, null, 2));
+  log.debug('The document from parsing', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
+  log.debug('The document after popuplation', JSON.stringify(rootBlock, null, 2));
   blocks = rootBlock.children;
 };
 
@@ -190,6 +192,23 @@ const getColumns = (blockid: string): number => {
 };
 
 type IGetBlocks = () => Block[];
+/**
+ * Returns all the blocks as a flat array
+ * @returns
+ */
+const getBlocksFlat: IGetBlocks = () => {
+  const result: Block[] = [];
+  console.log('abc88 getBlocksFlat', blockDatabase);
+  const keys = Object.keys(blockDatabase);
+  for (const key of keys) {
+    result.push(blockDatabase[key]);
+  }
+  return result;
+};
+/**
+ * Returns the the hirarchy of blocks
+ * @returns
+ */
 const getBlocks: IGetBlocks = () => {
   return blocks || [];
 };
@@ -218,6 +237,7 @@ export interface BlockDB extends DiagramDB {
   addLink: IAddLink;
   getLogger: IGetLogger;
   getEdges: IGetEdges;
+  getBlocksFlat: IGetBlocks;
   getBlocks: IGetBlocks;
   getBlock: IGetBlock;
   setBlock: ISetBlock;
@@ -237,6 +257,7 @@ const db: BlockDB = {
   edgeTypeStr2Type: edgeTypeStr2Type,
   edgeStrToEdgeData,
   getLogger, // TODO: remove
+  getBlocksFlat,
   getBlocks,
   getEdges,
   getLinks,
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 991adda3f..77e9cd939 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -45,6 +45,7 @@ export const draw = async function (
   insertMarkers(svg, markers, diagObj.type, true);
 
   const bl = db.getBlocks();
+  const blArr = db.getBlocksFlat();
   const edges = db.getEdges();
 
   const nodes = svg.insert('g').attr('class', 'block');
@@ -52,7 +53,7 @@ export const draw = async function (
   const bounds = layout(db);
   // log.debug('Here be blocks', bl);
   await insertBlocks(nodes, bl, db);
-  await insertEdges(nodes, edges, bl, db);
+  await insertEdges(nodes, edges, blArr, db);
 
   // log.debug('Here', bl);
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index d5e0ff828..579639d06 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -18,6 +18,7 @@
 %x NODE
 %x BLOCK_ARROW
 %x ARROW_DIR
+%x LLABEL
 
 
 // as per section 6.1 of RFC 2234 [2]
@@ -45,7 +46,7 @@ CRLF \u000D\u000A
 [`]["]          { this.popState();}
 ["]                     this.pushState("string");
 ["]             { yy.getLogger().debug('LEX: POPPING STR:', yytext);this.popState();}
-[^"]*           { yy.getLogger().debug('LEX: STR ebd:', yytext); return "STR";}
+[^"]*           { yy.getLogger().debug('LEX: STR end:', yytext); return "STR";}
 space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
 space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
 "style"               return 'STYLE';
@@ -130,9 +131,14 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 \s*[xo<]?\=\=+[=xo>]\s*                 { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
 \s*[xo<]?\-?\.+\-[xo>]?\s*              { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
 \s*\~\~[\~]+\s*                         { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
-\s*[xo<]?\-\-\s*                        { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
-\s*[xo<]?\=\=\s*                        { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
-\s*[xo<]?\-\.\s*                        { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
+\s*[xo<]?\-\-\s*                        { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
+\s*[xo<]?\=\=\s*                        { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
+\s*[xo<]?\-\.\s*                        { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
+["][`]           { this.pushState("md_string");}
+["]              { yy.getLogger().info('Lex: Starting string');this.pushState("string"); return "LINK_LABEL";}
+\s*[xo<]?\-\-+[-xo>]\s*                 { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
+\s*[xo<]?\=\=+[=xo>]\s*                 { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
+\s*[xo<]?\-?\.+\-[xo>]?\s*              { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
 
 /lex
 
@@ -177,9 +183,9 @@ document
 
 link
   : LINK
-  { yy.getLogger().info("Rule: link: ", $1); }
-  | START_LINK
-  { yy.getLogger().info("Rule: link: ", $1); }
+  { yy.getLogger().info("Rule: link: ", $1, yytext); }
+  | START_LINK LINK_LABEL STR LINK
+  { yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$=$4; }
   ;
 
 statement
@@ -192,7 +198,7 @@ statement
 
 nodeStatement
   : nodeStatement link node {
-    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr =>',$2);
+    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2);
     const edgeData = yy.edgeStrToEdgeData($2)
     $$ = [
       {id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 73933426d..a6daa7651 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -134,6 +134,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     // props: vertex.props,
     padding: padding ?? (getConfig()?.flowchart?.padding || 0),
   };
+  console.log('abc88 return node', vertex.id, node);
   return node;
 }
 type IOperation = (elem: any, block: any, db: any) => Promise;
@@ -208,6 +209,7 @@ export async function insertEdges(
 
   for (const block of blocks) {
     if (block.size) {
+      console.log('abc88 block', block, block.id);
       g.setNode(block.id, {
         width: block.size.width,
         height: block.size.height,
@@ -216,12 +218,16 @@ export async function insertEdges(
     }
   }
 
-  // log.debug('abc88 edges', edges);
+  console.log('abc88 edges', edges);
   for (const edge of edges) {
     // elem, e, edge, clusterDb, diagramType, graph;
     if (edge.start && edge.end) {
       const startBlock = db.getBlock(edge.start);
+      const startBlock2 = g.node(edge.start);
       const endBlock = db.getBlock(edge.end);
+      const endBlock2 = g.node(edge.end);
+      console.log('abc88 startBlock', startBlock2);
+      console.log('abc88 endBlock', endBlock2);
 
       if (startBlock?.size && endBlock?.size) {
         const start = startBlock.size;

From 72135c294ebdc2b009e3b7f63800f1d524b28eb0 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 4 Jan 2024 16:28:13 +0100
Subject: [PATCH 075/193] #3358 Edge labels

---
 cypress/platform/knsv2.html                        |  2 +-
 .../mermaid/src/diagrams/block/parser/block.jison  | 10 +++++-----
 .../mermaid/src/diagrams/block/renderHelpers.ts    | 14 ++++++++++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index cefce1fb8..82381d3cf 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -79,7 +79,7 @@ block-beta
         E
         F
       end
-      E --> A
+      E -- "apa" --> A
     
    
     
     block-beta
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 579639d06..13932abd1 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -183,9 +183,9 @@ document
 
 link
   : LINK
-  { yy.getLogger().info("Rule: link: ", $1, yytext); }
+  { yy.getLogger().info("Rule: link: ", $1, yytext); $$={edgeTypeStr: $1, label:''}; }
   | START_LINK LINK_LABEL STR LINK
-  { yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$=$4; }
+  { yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$={edgeTypeStr: $4, label:$3}; }
   ;
 
 statement
@@ -198,11 +198,11 @@ statement
 
 nodeStatement
   : nodeStatement link node {
-    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2);
-    const edgeData = yy.edgeStrToEdgeData($2)
+    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2.edgeTypeStr);
+    const edgeData = yy.edgeStrToEdgeData($2.edgeTypeStr)
     $$ = [
       {id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},
-      {id: $1.id + '-' + $3.id, start: $1.id, end: $3.id, label: $3.label, type: 'edge', directions: $3.directions, arrowTypeEnd: edgeData, arrowTypeStart: 'arrow_open' },
+      {id: $1.id + '-' + $3.id, start: $1.id, end: $3.id, label: $2.label, type: 'edge', directions: $3.directions, arrowTypeEnd: edgeData, arrowTypeStart: 'arrow_open' },
       {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
       ];
     }
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index a6daa7651..107139ff6 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -1,6 +1,6 @@
 import { getStylesFromArray } from '../../utils.js';
 import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
-import { insertEdge } from '../../dagre-wrapper/edges.js';
+import { insertEdge, insertEdgeLabel } from '../../dagre-wrapper/edges.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { getConfig } from '../../config.js';
 import { ContainerElement } from 'd3';
@@ -243,7 +243,6 @@ export async function insertEdges(
           { v: edge.start, w: edge.end, name: edge.id },
           {
             ...edge,
-            // arrowHead: 'normal',
             arrowTypeEnd: edge.arrowTypeEnd,
             arrowTypeStart: edge.arrowTypeStart,
             points,
@@ -253,6 +252,17 @@ export async function insertEdges(
           'block',
           g
         );
+        if (edge.label) {
+          await insertEdgeLabel(elem, {
+            ...edge,
+            label: edge.label,
+            labelStyle: 'stroke: #333; stroke-width: 1.5px;fill:none;',
+            arrowTypeEnd: edge.arrowTypeEnd,
+            arrowTypeStart: edge.arrowTypeStart,
+            points,
+            classes: 'edge-thickness-normal edge-pattern-solid flowchart-link LS-a1 LE-b1',
+          });
+        }
       }
     }
   }

From 275e01acba557addbf2d863bf963946f1ee512e9 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 5 Jan 2024 15:13:15 +0100
Subject: [PATCH 076/193] #3358 Adding support for classDef and class
 statements

---
 cypress/platform/knsv2.html                   |  19 ++-
 .../mermaid/src/diagrams/block/blockDB.ts     | 118 +++++++++++++++++-
 .../src/diagrams/block/blockRenderer.ts       |  17 +++
 .../mermaid/src/diagrams/block/blockTypes.ts  |  10 ++
 .../src/diagrams/block/parser/block.jison     |  35 +++++-
 .../src/diagrams/block/renderHelpers.ts       |   2 +
 .../src/diagrams/flowchart/flowRenderer-v2.js |   2 +-
 packages/mermaid/src/mermaidAPI.ts            |   3 +
 8 files changed, 200 insertions(+), 6 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 82381d3cf..a6553304c 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -73,6 +73,22 @@ block-beta
     
     block-beta
       columns 3
+      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+      A
+      B
+      class A green
+    
    
+    
    +stateDiagram-v2
+      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+      A
+      class A green
+
+    
    
+    
    +block-beta
+      columns 3
+      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
       A
       space
       block
@@ -80,6 +96,7 @@ block-beta
         F
       end
       E -- "apa" --> A
+
     
    
     
     block-beta
@@ -538,7 +555,7 @@ mindmap
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'forest',
+        theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index c3861feab..4a3a6a146 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -1,6 +1,6 @@
 // import type { BlockDB } from './blockTypes.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
-import type { BlockConfig, BlockType, Block, Link } from './blockTypes.js';
+import type { BlockConfig, BlockType, Block, Link, ClassDef } from './blockTypes.js';
 
 import * as configApi from '../../config.js';
 import {
@@ -20,10 +20,112 @@ let blockDatabase: Record = {};
 let edgeList: Block[] = [];
 let edgeCount: Record = {};
 
+const COLOR_KEYWORD = 'color';
+const FILL_KEYWORD = 'fill';
+const BG_FILL = 'bgFill';
+const STYLECLASS_SEP = ',';
+
+let classes = {} as Record;
+
+/**
+ * Called when the parser comes across a (style) class definition
+ * @example classDef my-style fill:#f96;
+ *
+ * @param {string} id - the id of this (style) class
+ * @param  {string | null} styleAttributes - the string with 1 or more style attributes (each separated by a comma)
+ */
+export const addStyleClass = function (id: string, styleAttributes = '') {
+  // create a new style class object with this id
+  if (classes[id] === undefined) {
+    classes[id] = { id: id, styles: [], textStyles: [] }; // This is a classDef
+  }
+  const foundClass = classes[id];
+  if (styleAttributes !== undefined && styleAttributes !== null) {
+    styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
+      // remove any trailing ;
+      const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim();
+
+      // replace some style keywords
+      if (attrib.match(COLOR_KEYWORD)) {
+        const newStyle1 = fixedAttrib.replace(FILL_KEYWORD, BG_FILL);
+        const newStyle2 = newStyle1.replace(COLOR_KEYWORD, FILL_KEYWORD);
+        foundClass.textStyles.push(newStyle2);
+      }
+      foundClass.styles.push(fixedAttrib);
+    });
+  }
+};
+
+/**
+ * Add a (style) class or css class to a state with the given id.
+ * If the state isn't already in the list of known states, add it.
+ * Might be called by parser when a style class or CSS class should be applied to a state
+ *
+ * @param {string | string[]} itemIds The id or a list of ids of the item(s) to apply the css class to
+ * @param {string} cssClassName CSS class name
+ */
+export const setCssClass = function (itemIds: string, cssClassName: string) {
+  console.log('abc88 setCssClass enter', itemIds, cssClassName);
+  itemIds.split(',').forEach(function (id: string) {
+    let foundBlock = blockDatabase[id];
+    if (foundBlock === undefined) {
+      const trimmedId = id.trim();
+      blockDatabase[trimmedId] = { id: trimmedId, type: 'na', children: [] } as Block;
+      foundBlock = blockDatabase[trimmedId];
+    }
+    if (!foundBlock.classes) {
+      foundBlock.classes = [];
+    }
+    foundBlock.classes.push(cssClassName);
+    console.log('abc88 setCssClass', foundBlock);
+  });
+};
+
+// /**
+//  * Add a style to a state with the given id.
+//  * @example style stateId fill:#f9f,stroke:#333,stroke-width:4px
+//  *   where 'style' is the keyword
+//  *   stateId is the id of a state
+//  *   the rest of the string is the styleText (all of the attributes to be applied to the state)
+//  *
+//  * @param itemId The id of item to apply the style to
+//  * @param styleText - the text of the attributes for the style
+//  */
+// export const setStyle = function (itemId, styleText) {
+//   const item = getState(itemId);
+//   if (item !== undefined) {
+//     item.textStyles.push(styleText);
+//   }
+// };
+
+// /**
+//  * Add a text style to a state with the given id
+//  *
+//  * @param itemId The id of item to apply the css class to
+//  * @param cssClassName CSS class name
+//  */
+// export const setTextStyle = function (itemId, cssClassName) {
+//   const item = getState(itemId);
+//   if (item !== undefined) {
+//     item.textStyles.push(cssClassName);
+//   }
+// };
+
 const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
   const blockList = _blockList.flat();
   const children = [];
   for (const block of blockList) {
+    if (block.type === 'classDef') {
+      console.log('abc88 classDef', block);
+      addStyleClass(block.id, block.css);
+      continue;
+    }
+    if (block.type === 'applyClass') {
+      console.log('abc88 applyClass', block);
+      // addStyleClass(block.id, block.css);
+      setCssClass(block.id, block.styleClass);
+      continue;
+    }
     if (block.type === 'column-setting') {
       parent.columns = block.columns || -1;
     } else if (block.type === 'edge') {
@@ -87,6 +189,7 @@ const clear = (): void => {
   rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
   blockDatabase = { root: rootBlock };
   blocks = [] as Block[];
+  classes = {} as Record;
 
   edgeList = [];
   edgeCount = {};
@@ -166,7 +269,7 @@ const setHierarchy = (block: Block[]): void => {
   log.debug('The document from parsing', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  log.debug('The document after popuplation', JSON.stringify(rootBlock, null, 2));
+  log.debug('abc88 The document after popuplation', JSON.stringify(rootBlock, null, 2));
   blocks = rootBlock.children;
 };
 
@@ -231,6 +334,15 @@ const getLinks: IGetLinks = () => links;
 type IGetLogger = () => Console;
 const getLogger: IGetLogger = () => console;
 
+type IGetClasses = () => Record;
+/**
+ * Return all of the style classes
+ * @returns {{} | any | classes}
+ */
+export const getClasses = function () {
+  console.log('abc88 block db getClasses', classes);
+  return classes;
+};
 export interface BlockDB extends DiagramDB {
   clear: () => void;
   getConfig: () => BlockConfig | undefined;
@@ -243,6 +355,7 @@ export interface BlockDB extends DiagramDB {
   setBlock: ISetBlock;
   getLinks: IGetLinks;
   getColumns: IGetColumns;
+  getClasses: IGetClasses;
   typeStr2Type: ITypeStr2Type;
   edgeTypeStr2Type: IEdgeTypeStr2Type;
   edgeStrToEdgeData: IEdgeStrToEdgeDataType;
@@ -271,6 +384,7 @@ const db: BlockDB = {
   // getDiagramTitle,
   // setDiagramTitle,
   getColumns,
+  getClasses,
   clear,
   generateId,
 };
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 77e9cd939..69f0eefb0 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -17,6 +17,22 @@ import type { Block } from './blockTypes.js';
 // import { diagram as BlockDiagram } from './blockDiagram.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 
+/**
+ * Returns the all the styles from classDef statements in the graph definition.
+ *
+ * @param text
+ * @param diagObj
+ * @returns {object} ClassDef styles
+ */
+export const getClasses = function (text: any, diagObj: any) {
+  log.info('abc88 Extracting classes', diagObj.db.getClasses());
+  try {
+    return diagObj.db.getClasses();
+  } catch (e) {
+    return;
+  }
+};
+
 export const draw = async function (
   text: string,
   id: string,
@@ -99,4 +115,5 @@ export const draw = async function (
 
 export default {
   draw,
+  getClasses,
 };
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 4be03d959..241ad3934 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -28,6 +28,8 @@ export type BlockType =
   | 'cylinder'
   | 'group'
   | 'doublecircle'
+  | 'classDef'
+  | 'applyClass'
   | 'composite';
 
 export interface Block {
@@ -53,9 +55,17 @@ export interface Block {
   columns?: number; // | TBlockColumnsDefaultValue;
   classes?: string[];
   directions?: string[];
+  css?: string;
+  styleClass?: string;
 }
 
 export interface Link {
   source: Block;
   target: Block;
 }
+
+export interface ClassDef {
+  id: string;
+  textStyles: string[];
+  styles: string[];
+}
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 13932abd1..9228a3b8a 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -19,6 +19,10 @@
 %x BLOCK_ARROW
 %x ARROW_DIR
 %x LLABEL
+%x CLASS
+%x CLASS_STYLE
+%x CLASSDEF
+%x CLASSDEFID
 
 
 // as per section 6.1 of RFC 2234 [2]
@@ -53,8 +57,16 @@ space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yyte
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
 "interpolate"         return 'INTERPOLATE';
-"classDef"            return 'CLASSDEF';
-"class"               return 'CLASS';
+
+"classDef"\s+   { this.pushState('CLASSDEF'); return 'classDef'; }
+DEFAULT\s+            { this.popState(); this.pushState('CLASSDEFID'); return 'DEFAULT_CLASSDEF_ID' }
+\w+\s+                { this.popState(); this.pushState('CLASSDEFID'); return 'CLASSDEF_ID' }
+[^\n]*              { this.popState(); return 'CLASSDEF_STYLEOPTS' }
+
+"class"\s+      { this.pushState('CLASS'); return 'class'; }
+(\w+)+((","\s*\w+)*)     { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
+[^\n]*             { this.popState(); return 'STYLECLASS' }
+
 accTitle\s*":"\s*                                               { this.pushState("acc_title");return 'acc_title'; }
 (?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.pushState("acc_descr");return 'acc_descr'; }
@@ -194,6 +206,8 @@ statement
   | SPACE_BLOCK
     { const num=parseInt($1); const spaceId = yy.generateId(); $$ = { id: spaceId, type:'space', label:'', width: num, children: [] }}
   | blockStatement
+  | classDefStatement
+  | cssClassStatement
 	;
 
 nodeStatement
@@ -240,4 +254,21 @@ nodeShapeNLabel
     	      { yy.getLogger().info("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, " #3:",$3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
   ;
 
+
+classDefStatement
+  : classDef CLASSDEF_ID CLASSDEF_STYLEOPTS {
+      $$ = { type: 'classDef', id: $2.trim(), css: $3.trim() };
+      }
+  | classDef DEFAULT CLASSDEF_STYLEOPTS {
+      $$ = { type: 'classDef', id: $2.trim(), css: $3.trim() };
+      }
+  ;
+
+cssClassStatement
+    : class CLASSENTITY_IDS STYLECLASS {
+        //console.log('apply class: id(s): ',$2, '  style class: ', $3);
+        $$={ type: 'applyClass', id: $2.trim(), styleClass: $3.trim() };
+        }
+    ;
+
 %%
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 107139ff6..ebe88efdc 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -16,8 +16,10 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
 
   let classStr = 'default';
   if ((vertex?.classes?.length || 0) > 0) {
+    console.log('abc88 vertex.classes', block.id, vertex?.classes);
     classStr = (vertex?.classes || []).join(' ');
   }
+  console.log('abc88 vertex.classes done');
   classStr = classStr + ' flowchart-label';
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index a887511d5..7c964b4e7 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -363,7 +363,7 @@ export const getClasses = function (text, diagObj) {
  * @param _version
  * @param diagObj
  */
-// [MermaidChart: 33a97b35-1f95-4ce9-81b5-3038669bc170]
+
 export const draw = async function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
   diagObj.db.clear();
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 4d8d95290..467f60c4e 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -39,6 +39,7 @@ const CLASSDEF_DIAGRAMS = [
   'flowchart-elk',
   'stateDiagram',
   'stateDiagram-v2',
+  'block',
 ];
 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
@@ -203,6 +204,8 @@ export const createCssStyles = (
     cssStyles += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
   }
 
+  console.log('abc88 expr check', !isEmpty(classDefs), classDefs);
+
   // classDefs defined in the diagram text
   if (!isEmpty(classDefs) && CLASSDEF_DIAGRAMS.includes(graphType)) {
     const htmlLabels = config.htmlLabels || config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?

From 818cb2fd7665e9cc3b305bfe17de737f1b55ff16 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 5 Jan 2024 20:56:57 +0100
Subject: [PATCH 077/193] #3358 Adding support for style statements

---
 cypress/platform/knsv2.html                   | 38 ++++++++++++++-----
 .../mermaid/src/diagrams/block/blockDB.ts     | 27 +++++++++++--
 .../mermaid/src/diagrams/block/blockTypes.ts  |  2 +
 .../src/diagrams/block/parser/block.jison     | 15 +++++++-
 .../src/diagrams/block/renderHelpers.ts       |  9 ++---
 .../src/diagrams/flowchart/flowRenderer-v2.js |  2 +-
 packages/mermaid/src/mermaidAPI.ts            |  1 -
 7 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index a6553304c..5dc87325c 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -72,18 +72,38 @@ block-beta
     
    
     
     block-beta
-      columns 3
+columns 3
+  space Browser space
+  space:3
+
+    A
+    B
+    C
+
+    space:3
+    space
+    db{{"This is the text in the box"}}
+
       classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      A
-      B
-      class A green
-    
    
-    
    -stateDiagram-v2
-      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      A
+      style B fill:#f9F,stroke:#333,stroke-width:4px
       class A green
 
+      Browser --> A
+      Browser --> B
+      Browser --> C
+      A --> db
+      B --> db
+      C--> db
+
+      block
+        D
+        E
+      end
+    
    
+    
    +flowchart
+      B
+      style B fill:#f9F,stroke:#333,stroke-width:4px
     
    
     
     block-beta
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 4a3a6a146..4ee5343fa 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -56,6 +56,20 @@ export const addStyleClass = function (id: string, styleAttributes = '') {
   }
 };
 
+/**
+ * Called when the parser comes across a (style) class definition
+ * @example classDef my-style fill:#f96;
+ *
+ * @param {string} id - the id of this (style) class
+ * @param  {string | null} styles - the string with 1 or more style attributes (each separated by a comma)
+ */
+export const addStyle2Node = function (id: string, styles = '') {
+  let foundBlock = blockDatabase[id];
+  if (styles !== undefined && styles !== null) {
+    foundBlock.styles = styles.split(STYLECLASS_SEP);
+  }
+};
+
 /**
  * Add a (style) class or css class to a state with the given id.
  * If the state isn't already in the list of known states, add it.
@@ -116,14 +130,21 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
   const children = [];
   for (const block of blockList) {
     if (block.type === 'classDef') {
-      console.log('abc88 classDef', block);
+      // console.log('abc88 classDef', block);
       addStyleClass(block.id, block.css);
       continue;
     }
     if (block.type === 'applyClass') {
-      console.log('abc88 applyClass', block);
+      // console.log('abc88 applyClass', block);
       // addStyleClass(block.id, block.css);
-      setCssClass(block.id, block.styleClass);
+      setCssClass(block.id, block?.styleClass || '');
+      continue;
+    }
+    if (block.type === 'applyStyles') {
+      console.log('abc88 applyStyles', block);
+      addStyle2Node(block.id, block.styles);
+      // addStyleClass(block.id, block.css);
+      // setCssClass(block.id, block.styles);
       continue;
     }
     if (block.type === 'column-setting') {
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index 241ad3934..0cee35e44 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -30,6 +30,7 @@ export type BlockType =
   | 'doublecircle'
   | 'classDef'
   | 'applyClass'
+  | 'applyStyles'
   | 'composite';
 
 export interface Block {
@@ -57,6 +58,7 @@ export interface Block {
   directions?: string[];
   css?: string;
   styleClass?: string;
+  styles?: string[];
 }
 
 export interface Link {
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 9228a3b8a..86faa1d84 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -23,6 +23,8 @@
 %x CLASS_STYLE
 %x CLASSDEF
 %x CLASSDEFID
+%x STYLE_STMNT
+%x STYLE_DEFINITION
 
 
 // as per section 6.1 of RFC 2234 [2]
@@ -53,7 +55,6 @@ CRLF \u000D\u000A
 [^"]*           { yy.getLogger().debug('LEX: STR end:', yytext); return "STR";}
 space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
 space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
-"style"               return 'STYLE';
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
 "interpolate"         return 'INTERPOLATE';
@@ -67,6 +68,10 @@ space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yyte
 (\w+)+((","\s*\w+)*)     { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
 [^\n]*             { this.popState(); return 'STYLECLASS' }
 
+"style"\s+      { this.pushState('STYLE_STMNT'); return 'style'; }
+(\w+)+((","\s*\w+)*)     { this.popState(); this.pushState('STYLE_DEFINITION'); return 'STYLE_ENTITY_IDS' }
+[^\n]*             { this.popState(); return 'STYLE_DEFINITION_DATA' }
+
 accTitle\s*":"\s*                                               { this.pushState("acc_title");return 'acc_title'; }
 (?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.pushState("acc_descr");return 'acc_descr'; }
@@ -208,6 +213,7 @@ statement
   | blockStatement
   | classDefStatement
   | cssClassStatement
+  | styleStatement
 	;
 
 nodeStatement
@@ -271,4 +277,11 @@ cssClassStatement
         }
     ;
 
+styleStatement
+    : style STYLE_ENTITY_IDS STYLE_DEFINITION_DATA {
+        console.log('abc88 apply class: id(s): ',$2, '  style class: ', $3);
+        $$={ type: 'applyStyles', id: $2.trim(), styles: $3.trim() };
+        }
+    ;
+
 %%
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index ebe88efdc..130f031ca 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -16,10 +16,9 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
 
   let classStr = 'default';
   if ((vertex?.classes?.length || 0) > 0) {
-    console.log('abc88 vertex.classes', block.id, vertex?.classes);
     classStr = (vertex?.classes || []).join(' ');
   }
-  console.log('abc88 vertex.classes done');
+  console.log('abc88 vertex.classes styles', block.id, vertex?.styles);
   classStr = classStr + ' flowchart-label';
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
@@ -100,8 +99,8 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
       _shape = 'rect';
   }
 
-  // const styles = getStylesFromArray(vertex.styles);
-  const styles = getStylesFromArray([]);
+  const styles = getStylesFromArray(vertex?.styles || '');
+  // const styles = getStylesFromArray([]);
 
   // Use vertex id as text in the box if no text is provided by the graph definition
   const vertexText = vertex.label;
@@ -116,7 +115,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     rx: radious,
     ry: radious,
     class: classStr,
-    style: styles.style,
+    style: styles.style, // + 'fill:#9f9;stroke:#333;stroke-width:4px;',
     id: vertex.id,
     directions: vertex.directions,
     // link: vertex.link,
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 7c964b4e7..6f219f166 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -169,7 +169,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       padding: getConfig().flowchart.padding,
     });
 
-    log.info('setNode', {
+    log.info('abc88 setNode', {
       labelStyle: styles.labelStyle,
       labelType: vertex.labelType,
       shape: _shape,
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 467f60c4e..80837fd34 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -513,7 +513,6 @@ const render = async function (
   const a11yTitle: string | undefined = diag.db.getAccTitle?.();
   const a11yDescr: string | undefined = diag.db.getAccDescription?.();
   addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr);
-
   // -------------------------------------------------------------------------------
   // Clean up SVG code
   root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);

From 809c4501645d5e553bd32b102b5417ff2adb406d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 8 Jan 2024 11:49:34 +0100
Subject: [PATCH 078/193] #3358 Support for adding tests and fixed issues for
 some shapes

---
 cypress/integration/rendering/block.spec.ts   | 304 ++++++++++++++++++
 cypress/platform/knsv2.html                   | 187 ++---------
 .../src/diagrams/block/parser/block.jison     |  45 +--
 .../src/diagrams/block/renderHelpers.ts       |   2 +-
 4 files changed, 355 insertions(+), 183 deletions(-)
 create mode 100644 cypress/integration/rendering/block.spec.ts

diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
new file mode 100644
index 000000000..d43c8db10
--- /dev/null
+++ b/cypress/integration/rendering/block.spec.ts
@@ -0,0 +1,304 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Block diagram', () => {
+  it('BL1: should calculate the block widths', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 2
+  block
+    id2["I am a wide one"]
+    id1
+  end
+  id["Next row"]
+      `,
+      {}
+    );
+  });
+
+  it('BL2: should handle colums statement in sub-blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+  id1["Hello"]
+  block
+    columns 3
+    id2["to"]
+    id3["the"]
+    id4["World"]
+    id5["World"]
+  end
+      `,
+      {}
+    );
+  });
+
+  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+  block
+    columns 1
+    id1
+    id2
+    id2.1
+  end
+  id3
+  id4
+      `,
+      {}
+    );
+  });
+
+  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 1
+  block
+    columns 1
+    block
+      columns 3
+      id1
+      id2
+      id2.1(("XYZ"))
+    end
+    id48
+  end
+  id3
+      `,
+      {}
+    );
+  });
+
+  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 1
+  block
+    id1
+    id2
+    block
+      columns 1
+      id3("Wider then")
+      id5(("id5"))
+    end
+  end
+  id4
+      `,
+      {}
+    );
+  });
+
+  it('BL6: should handle block arrows and spece statements', () => {
+    imgSnapshotTest(
+      `block-beta
+    columns 3
+    space:3
+    ida idb idc
+    id1  id2
+      blockArrowId<["Label"]>(right)
+      blockArrowId2<["Label"]>(left)
+      blockArrowId3<["Label"]>(up)
+      blockArrowId4<["Label"]>(down)
+      blockArrowId5<["Label"]>(x)
+      blockArrowId6<["Label"]>(y)
+      blockArrowId6<["Label"]>(x, down)
+      `,
+      {}
+    );
+  });
+
+  it('BL7: should handle different types of edges', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      A space:5
+      A --o B
+      A --> C
+      A --x D
+      `,
+      {}
+    );
+  });
+
+  it('BL8: should handle sub-blocks without columns statements', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 2
+      C A B
+      block
+        D
+        E
+      end
+      `,
+      {}
+    );
+  });
+
+  it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      B space
+      block
+        D
+      end
+      D --> B
+      `,
+      {}
+    );
+  });
+
+  it('BL10: should handle edges from composite blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      B space
+      block BL
+        D
+      end
+      BL --> B
+      `,
+      {}
+    );
+  });
+
+  it('BL11: should handle edges to composite blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      B space
+      block BL
+        D
+      end
+      B --> BL
+      `,
+      {}
+    );
+  });
+
+  it('BL12: edges should handle labels', () => {
+    imgSnapshotTest(
+      `block-beta
+      A
+      space
+      A -- "apa" --> E
+      `,
+      {}
+    );
+  });
+
+  it('BL13: should handle block arrows in different directions', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      space blockArrowId1<["down"]>(down) space
+      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
+      space blockArrowId5<["up"]>(up) space
+      blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
+      `,
+      {}
+    );
+  });
+
+  it('BL14: should style statements and class statements', () => {
+    imgSnapshotTest(
+      `block-beta
+    A
+    B
+    classDef blue fill:#66f,stroke:#333,stroke-width:2px;
+    class A blue
+    style B fill:#f9F,stroke:#333,stroke-width:4px
+      `,
+      {}
+    );
+  });
+
+  it('BL15: width alignment - D and E should share available space', () => {
+    imgSnapshotTest(
+      `block-beta
+  block
+    D
+    E
+  end
+  db("This is the text in the box")
+      `,
+      {}
+    );
+  });
+
+  it('BL16: width alignment - C should be as wide as the composite block', () => {
+    imgSnapshotTest(
+      `block-beta
+  block
+    A("This is the text")
+    B
+  end
+  C
+      `,
+      {}
+    );
+  });
+
+  it('BL16: width alignment - blocks shold be equal in width', () => {
+    imgSnapshotTest(
+      `block-beta
+    A("This is the text")
+    B
+    C
+      `,
+      {}
+    );
+  });
+
+  it('BL17: block types 1 - square, rounded and circle', () => {
+    imgSnapshotTest(
+      `block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+      `,
+      {}
+    );
+  });
+
+  it('BL18: block types 2 - odd, diamond and hexagon', () => {
+    imgSnapshotTest(
+      `block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+      `,
+      {}
+    );
+  });
+
+  it('BL19: block types 3 - stadium', () => {
+    imgSnapshotTest(
+      `block-beta
+    A(["stadium"])
+      `,
+      {}
+    );
+  });
+
+  it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+    imgSnapshotTest(
+      `block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid alt"/]
+      `,
+      {}
+    );
+  });
+
+  it('BL21: block types 1 - square, rounded and circle', () => {
+    imgSnapshotTest(
+      `block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+      `,
+      {}
+    );
+  });
+});
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 5dc87325c..d84557ffe 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -64,184 +64,45 @@
   
     
     block-beta
-      columns 3
-      space blockArrowId1<["down"]>(down) space
-      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
-      space blockArrowId5<["up"]>(up) space
-      blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
+    A["square"]
+    B("rounded")
+    C(("circle"))
+    
    
+    
    +block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+    
    
+    
    +block-beta
+    A(["stadium"])
     
    
     
     block-beta
-columns 3
-  space Browser space
-  space:3
-
-    A
-    B
-    C
-
-    space:3
-    space
-    db{{"This is the text in the box"}}
-
-      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-      class A green
-
-      Browser --> A
-      Browser --> B
-      Browser --> C
-      A --> db
-      B --> db
-      C--> db
-
-      block
-        D
-        E
-      end
+    %% A[["subroutine"]]
+    %% B[("cylinder")]
+    C>"surprise"]
     
    
+    
    +block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid"/]
+    
    
+
     
     flowchart
       B
       style B fill:#f9F,stroke:#333,stroke-width:4px
     
    
-    
    -block-beta
-      columns 3
-      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      A
-      space
-      block
-        E
-        F
-      end
-      E -- "apa" --> A
 
-    
    
-    
    -block-beta
-      columns 3
-      C space A space B
-      B --> A
-      B --> C
-      block
-        D
-        E
-      end
-      E --> A
-    
    
-    
    -block-beta
-      columns 2
-      C A B
-      block
-        D
-        E
-      end
-    
    
-    
    -block-beta
-      columns 2
-      A B C D
-      A --o B
-      A --> C
-
-    
    
-    
    -block-beta
-    columns 3
-    space:3
-    ida idb idc
-    id1  id2
-      blockArrowId<["Label"]>(right)
-      blockArrowId2<["Label"]>(left)
-      blockArrowId3<["Label"]>(up)
-      blockArrowId4<["Label"]>(down)
-      blockArrowId5<["Label"]>(x)
-      blockArrowId6<["Label"]>(y)
-      blockArrowId6<["Label"]>(x, down)
-    
    
-    
    -block-beta
-  columns 1
-  block
-    id1
-    id2
-    block
-      columns 1
-      id3("Wider then")
-      id5(("id5"))
-    end
-  end
-  id4
-    
    
-
-    
    -block-beta
-  columns 1
-  block
-    columns 1
-    block
-      columns 3
-      id1
-      id2
-      id2.1(("XYZ"))
-      %%id2.2
-    end
-    id48
-  end
-  id3
-%%  id3
-%%  id4
-  %% block
-    %% columns 2
-    %% id2
-    %% id3
-  %% end
-    
    
-    
    -block-beta
-  block
-    columns 1
-    id1
-    id2
-    %%id2.1
-  end
-  id3
-%%  id3
-%%  id4
-  %% block
-    %% columns 2
-    %% id2
-    %% id3
-  %% end
-    
    
     
           flowchart LR
       a1 -- apa --> b1
     
    
-    
    -block-beta
-  id1["Hello"]
-  block
-    columns 3
-    id2["to"]
-    id3["the"]
-    id4["World"]
-    id5["World"]
-  end
-    
    
-    
    -block-beta
-  columns 2
-  block
-    id2["I am a wide one"]
-    id1
-  end
-  id[Next row]
 
-
-    
    
     
     flowchart RL
   subgraph "`one`"
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 86faa1d84..be4bed809 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -86,27 +86,49 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 .*direction\s+RL[^\n]*                                      return 'direction_rl';
 .*direction\s+LR[^\n]*                                      return 'direction_lr';
 
+// Node end of shape
+"((("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+")))"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+[\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
+"}}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"(-"             { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
+"-)"             { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
+"(("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"]]"             { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
+"("              { this.popState();yy.getLogger().info('Lex: (');  return "NODE_DEND";  }
+"])"             { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
+"\\]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+"/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
+[\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
+\]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
+[\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
+
 // Start of nodes with shapes and description
 "-)"                   { yy.getLogger().info('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
 "(-"                   { yy.getLogger().info('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
 "))"                   { yy.getLogger().info('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
 ")"                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART';      }
+"((("                  { yy.getLogger().info('Lex: (((');  this.pushState('NODE');return 'NODE_DSTART'; }
 "(("                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
 "{{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"("                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"["                    { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
+"{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+">"                   { yy.getLogger().info('Lexc: >'); this.pushState('NODE');return 'NODE_DSTART'; }
 "(["                   { yy.getLogger().info('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
+"("                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
 "[["                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[|"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[("                   { this.pushState('NODE');return 'NODE_DSTART'; }
-"((("                  { this.pushState('NODE');return 'NODE_DSTART'; }
 ")))"                  { this.pushState('NODE');return 'NODE_DSTART'; }
+"[\\"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[/"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[\\"                  { this.pushState('NODE');return 'NODE_DSTART'; }
+"["                    { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
 
 "<["                   { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
 
-[^\(\[\n\-\)\{\}\s\<]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+[^\(\[\n\-\)\{\}\s\<\>]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
 <>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
 
 // Handling of strings in node
@@ -119,21 +141,6 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 [^"]+          { yy.getLogger().debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
 ["]            {yy.getLogger().debug('LEX POPPING');this.popState();}
 
-// Node end of shape
-\]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
-[\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
-[\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
-[\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
-"}}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"(-"             { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
-"-)"             { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
-"(("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"("              { this.popState();yy.getLogger().info('Lex: (');  return "NODE_DEND";  }
-"])"             { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
-"]]"             { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
-"/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
-")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
-
 "]>"\s*"("       { yy.getLogger().debug('Lex: =>BAE');  this.pushState('ARROW_DIR');  }
 ","?\s*right\s*           { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (right): dir:',yytext);return "DIR"; }
 ","?\s*left\s*            { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (left):',yytext);return "DIR"; }
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 130f031ca..117959796 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -71,7 +71,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     case 'inv_trapezoid':
       _shape = 'inv_trapezoid';
       break;
-    case 'odd_right':
+    case 'rect_left_inv_arrow':
       _shape = 'rect_left_inv_arrow';
       break;
     case 'circle':

From 7043892e871d0c413ec63dc1570a8ef738d15568 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 8 Jan 2024 14:03:42 +0100
Subject: [PATCH 079/193] #3358 Fix for layout where a siebling has wider siize

---
 cypress/integration/rendering/block.spec.ts   | 35 +++++++
 cypress/platform/knsv2.html                   | 48 +++++++++-
 .../mermaid/src/diagrams/block/blockDB.ts     | 11 +--
 .../src/diagrams/block/blockRenderer.ts       |  2 +-
 packages/mermaid/src/diagrams/block/layout.ts | 91 ++++++++++++-------
 .../src/diagrams/block/parser/block.jison     |  3 +-
 .../src/diagrams/block/renderHelpers.ts       |  6 --
 .../flowchart/elk/flowRenderer-elk.js         |  3 +-
 .../src/diagrams/flowchart/flowRenderer-v2.js |  2 +-
 packages/mermaid/src/mermaidAPI.ts            |  2 +-
 10 files changed, 147 insertions(+), 56 deletions(-)

diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
index d43c8db10..7856f534d 100644
--- a/cypress/integration/rendering/block.spec.ts
+++ b/cypress/integration/rendering/block.spec.ts
@@ -301,4 +301,39 @@ describe('Block diagram', () => {
       {}
     );
   });
+
+  it('BL22: sizing - it should be possible to make a block wider', () => {
+    imgSnapshotTest(
+      `block-beta
+      A("rounded):2
+      B:2
+      C
+      `,
+      {}
+    );
+  });
+
+  it('BL23: sizing - it should be possieble to make a composite block wider', () => {
+    imgSnapshotTest(
+      `block-beta
+      block:2
+        A
+      end
+      B
+      `,
+      {}
+    );
+  });
+
+  it('BL23: sizing - it should be possieble to make a composite block wider', () => {
+    imgSnapshotTest(
+      `block-beta
+      block:2
+        A
+      end
+      B
+      `,
+      {}
+    );
+  });
 });
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index d84557ffe..4fed7a962 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -62,6 +62,52 @@
     
   
   
+    
    +block-beta
+columns 3
+  space Browser space
+  space:3
+
+    A
+    B
+    C
+
+    space:3
+    space
+    db{{"This is the text in the box"}}
+
+      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+      style B fill:#f9F,stroke:#333,stroke-width:4px
+      class A green
+
+      Browser --> A
+      Browser --> B
+      Browser --> C
+      A --> db
+      B --> db
+      C--> db
+
+      block
+        D
+        E
+      end
+    
    
+    
    +block-beta
+  block
+    D
+    E
+  end
+  db("This is the text in the box")
+    
    
+    
    +block-beta
+
+      block
+        D
+      end
+      A["A: I am a wide one"]
+    
    
     
     block-beta
     A["square"]
@@ -78,7 +124,7 @@ block-beta
 block-beta
     A(["stadium"])
     
    
-    
    +    
     block-beta
     %% A[["subroutine"]]
     %% B[("cylinder")]
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 4ee5343fa..e575f0680 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -79,7 +79,6 @@ export const addStyle2Node = function (id: string, styles = '') {
  * @param {string} cssClassName CSS class name
  */
 export const setCssClass = function (itemIds: string, cssClassName: string) {
-  console.log('abc88 setCssClass enter', itemIds, cssClassName);
   itemIds.split(',').forEach(function (id: string) {
     let foundBlock = blockDatabase[id];
     if (foundBlock === undefined) {
@@ -91,7 +90,6 @@ export const setCssClass = function (itemIds: string, cssClassName: string) {
       foundBlock.classes = [];
     }
     foundBlock.classes.push(cssClassName);
-    console.log('abc88 setCssClass', foundBlock);
   });
 };
 
@@ -130,21 +128,15 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
   const children = [];
   for (const block of blockList) {
     if (block.type === 'classDef') {
-      // console.log('abc88 classDef', block);
       addStyleClass(block.id, block.css);
       continue;
     }
     if (block.type === 'applyClass') {
-      // console.log('abc88 applyClass', block);
-      // addStyleClass(block.id, block.css);
       setCssClass(block.id, block?.styleClass || '');
       continue;
     }
     if (block.type === 'applyStyles') {
-      console.log('abc88 applyStyles', block);
-      addStyle2Node(block.id, block.styles);
-      // addStyleClass(block.id, block.css);
-      // setCssClass(block.id, block.styles);
+      addStyle2Node(block.id, block?.styles);
       continue;
     }
     if (block.type === 'column-setting') {
@@ -361,7 +353,6 @@ type IGetClasses = () => Record;
  * @returns {{} | any | classes}
  */
 export const getClasses = function () {
-  console.log('abc88 block db getClasses', classes);
   return classes;
 };
 export interface BlockDB extends DiagramDB {
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 69f0eefb0..10d2f2906 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -25,7 +25,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
  * @returns {object} ClassDef styles
  */
 export const getClasses = function (text: any, diagObj: any) {
-  log.info('abc88 Extracting classes', diagObj.db.getClasses());
+  log.info('Extracting classes', diagObj.db.getClasses());
   try {
     return diagObj.db.getClasses();
   } catch (e) {
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index f9a6cd3f9..1b110fc64 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -34,28 +34,38 @@ export function calculateBlockPosition(columns: number, position: number): Block
   return { px, py };
 }
 
-function calcBlockSizes(block: Block, db: BlockDB) {
-  log.debug('calculateSize (start)', block.id, block?.size?.x, block?.size?.width);
+const getMaxChildSize = (block: Block) => {
+  let maxWidth = 0;
+  let maxHeight = 0;
+  // find max width of children
+  for (const child of block.children) {
+    const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
+    log.debug('abc88', child.id, width, height, x, y);
+    if (width > maxWidth) {
+      maxWidth = width;
+    }
+    if (height > maxHeight) {
+      maxHeight = height;
+    }
+  }
+  return { width: maxWidth, height: maxHeight };
+};
+
+function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
+  log.debug('calculateSize abc88 (start)', block.id, block?.size?.x, block?.size?.width);
   const totalWidth = 0;
   const totalHeight = 0;
   let maxWidth = 0;
   let maxHeight = 0;
 
-  if (block.children) {
+  if (block.children?.length > 0) {
     for (const child of block.children) {
-      calcBlockSizes(child, db);
+      setBlockSizes(child, db);
     }
     // find max width of children
-    for (const child of block.children) {
-      const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
-      // log.debug('APA', child.id, width, height, x, y);
-      if (width > maxWidth) {
-        maxWidth = width;
-      }
-      if (height > maxHeight) {
-        maxHeight = height;
-      }
-    }
+    const childSize = getMaxChildSize(block);
+    maxWidth = childSize.width;
+    maxHeight = childSize.height;
 
     // set width of block to max width of children
     for (const child of block.children) {
@@ -66,22 +76,10 @@ function calcBlockSizes(block: Block, db: BlockDB) {
         child.size.y = 0;
       }
     }
+    for (const child of block.children) {
+      setBlockSizes(child, db, maxWidth);
+    }
 
-    // // Position items relative to self
-    // let x = -padding / 2;
-    // const y = 0;
-
-    // let accumulatedPaddingX = 0;
-    // for (const child of block.children) {
-    //   if (child.size) {
-    //     child.size.x = x;
-    //     child.size.y = y;
-    //     x += maxWidth + padding;
-    //   }
-    //   accumulatedPaddingX += padding;
-    // }
-  }
-  if (block.children?.length > 0) {
     const columns = block.columns || -1;
     const numItems = block.children.length;
 
@@ -92,6 +90,33 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     }
     const ySize = Math.ceil(numItems / xSize);
 
+    let width = xSize * (maxWidth + padding) + padding;
+    // If maxWidth
+    if (width < sieblingWidth) {
+      console.log(
+        'Detected to small siebling: abc88',
+        block.id,
+        'sieblingWidth',
+        sieblingWidth,
+        'width',
+        width
+      );
+      width = sieblingWidth;
+      const childWidth = (sieblingWidth - xSize * padding - padding) / xSize;
+      log.debug('Size indata abc88', block.id, 'childWidth', childWidth, 'maxWidth', maxWidth);
+      log.debug('Size indata abc88 xSize', xSize, 'paddiong', padding);
+
+      // // set width of block to max width of children
+      for (const child of block.children) {
+        if (child.size) {
+          child.size.width = childWidth;
+          child.size.height = maxHeight;
+          child.size.x = 0;
+          child.size.y = 0;
+        }
+      }
+    }
+
     log.debug(
       '(calc)',
       block.id,
@@ -105,13 +130,14 @@ function calcBlockSizes(block: Block, db: BlockDB) {
     );
 
     block.size = {
-      width: xSize * (maxWidth + padding) + padding,
+      width,
       height: ySize * (maxHeight + padding) + padding,
       x: 0,
       y: 0,
     };
   }
-  log.debug('calculateSize APA (done)', block.id, block?.size?.x, block?.size?.width);
+
+  log.debug('calculateSize abc88 (done)', block.id, block?.size?.x, block?.size?.width);
 }
 
 function layoutBlocks(block: Block, db: BlockDB) {
@@ -240,7 +266,8 @@ export function layout(db: BlockDB) {
   if (!root) {
     return;
   }
-  calcBlockSizes(root, db);
+
+  setBlockSizes(root, db, 0);
   layoutBlocks(root, db);
   // Position blocks relative to parents
   // positionBlock(root, root, db);
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index be4bed809..3f91a7d96 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -225,7 +225,7 @@ statement
 
 nodeStatement
   : nodeStatement link node {
-    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2.edgeTypeStr);
+    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, ' typestr: ',$2.edgeTypeStr);
     const edgeData = yy.edgeStrToEdgeData($2.edgeTypeStr)
     $$ = [
       {id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},
@@ -286,7 +286,6 @@ cssClassStatement
 
 styleStatement
     : style STYLE_ENTITY_IDS STYLE_DEFINITION_DATA {
-        console.log('abc88 apply class: id(s): ',$2, '  style class: ', $3);
         $$={ type: 'applyStyles', id: $2.trim(), styles: $3.trim() };
         }
     ;
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 117959796..757bbadb9 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -18,7 +18,6 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   if ((vertex?.classes?.length || 0) > 0) {
     classStr = (vertex?.classes || []).join(' ');
   }
-  console.log('abc88 vertex.classes styles', block.id, vertex?.styles);
   classStr = classStr + ' flowchart-label';
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
@@ -135,7 +134,6 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     // props: vertex.props,
     padding: padding ?? (getConfig()?.flowchart?.padding || 0),
   };
-  console.log('abc88 return node', vertex.id, node);
   return node;
 }
 type IOperation = (elem: any, block: any, db: any) => Promise;
@@ -210,7 +208,6 @@ export async function insertEdges(
 
   for (const block of blocks) {
     if (block.size) {
-      console.log('abc88 block', block, block.id);
       g.setNode(block.id, {
         width: block.size.width,
         height: block.size.height,
@@ -219,7 +216,6 @@ export async function insertEdges(
     }
   }
 
-  console.log('abc88 edges', edges);
   for (const edge of edges) {
     // elem, e, edge, clusterDb, diagramType, graph;
     if (edge.start && edge.end) {
@@ -227,8 +223,6 @@ export async function insertEdges(
       const startBlock2 = g.node(edge.start);
       const endBlock = db.getBlock(edge.end);
       const endBlock2 = g.node(edge.end);
-      console.log('abc88 startBlock', startBlock2);
-      console.log('abc88 endBlock', endBlock2);
 
       if (startBlock?.size && endBlock?.size) {
         const start = startBlock.size;
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 5ed06723e..4d26f0afa 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -307,13 +307,12 @@ const getNextPosition = (position, edgeDirection, graphDirection) => {
     },
   };
   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 });
+  log.info('getNextPort', { node, edgeDirection, graphDirection });
   if (!portPos[node]) {
     switch (graphDirection) {
       case 'TB':
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 6f219f166..7c964b4e7 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -169,7 +169,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       padding: getConfig().flowchart.padding,
     });
 
-    log.info('abc88 setNode', {
+    log.info('setNode', {
       labelStyle: styles.labelStyle,
       labelType: vertex.labelType,
       shape: _shape,
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 80837fd34..aa5c1edeb 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -204,7 +204,7 @@ export const createCssStyles = (
     cssStyles += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
   }
 
-  console.log('abc88 expr check', !isEmpty(classDefs), classDefs);
+  console.log('expr check', !isEmpty(classDefs), classDefs);
 
   // classDefs defined in the diagram text
   if (!isEmpty(classDefs) && CLASSDEF_DIAGRAMS.includes(graphType)) {

From 1d1875718dd6253e61edc2a062a736f8e6642e9c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 8 Jan 2024 15:48:59 +0100
Subject: [PATCH 080/193] #3358 Sieblinmg height alignment

---
 cypress/platform/knsv2.html                   | 32 +++-----
 .../mermaid/src/diagrams/block/blockDB.ts     |  9 ++-
 packages/mermaid/src/diagrams/block/layout.ts | 78 +++++++++++--------
 .../src/diagrams/block/parser/block.jison     |  6 +-
 4 files changed, 68 insertions(+), 57 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 4fed7a962..eaa5382ac 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -64,33 +64,21 @@
   
     
     block-beta
-columns 3
-  space Browser space
-  space:3
-
+columns 2
+  db(("This is the text "))
+  block
     A
-    B
-    C
+  end
 
-    space:3
-    space
-    db{{"This is the text in the box"}}
 
-      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-      class A green
 
-      Browser --> A
-      Browser --> B
-      Browser --> C
-      A --> db
-      B --> db
-      C--> db
+    
    
+    
    +block-beta
 
-      block
-        D
-        E
-      end
+  A1:3
+  A2:1
+  A3
     
    
     
     block-beta
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index e575f0680..787084697 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -173,7 +173,6 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       if (block.children) {
         populateBlockDatabase(block.children, block);
       }
-
       if (block.type === 'space') {
         const w = block.width || 1;
         for (let j = 0; j < w; j++) {
@@ -186,6 +185,14 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
         if (newBlock) {
           children.push(block);
         }
+        // const w = block.w || 1;
+        // for (let j = 1; j < w; j++) {
+        //   const newBlock = clone(block);
+        //   newBlock.type = 'space';
+        //   newBlock.id = newBlock.id + '-' + j;
+        //   blockDatabase[newBlock.id] = newBlock;
+        //   children.push(newBlock);
+        // }
       }
     }
   }
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 1b110fc64..cf62bd164 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -16,7 +16,7 @@ export function calculateBlockPosition(columns: number, position: number): Block
 
   // Ensure that position is a non-negative integer
   if (position < 0 || !Number.isInteger(position)) {
-    throw new Error('Position must be a non-negative integer.');
+    throw new Error('Position must be a non-negative integer.' + position);
   }
 
   if (columns < 0) {
@@ -40,7 +40,6 @@ const getMaxChildSize = (block: Block) => {
   // find max width of children
   for (const child of block.children) {
     const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
-    log.debug('abc88', child.id, width, height, x, y);
     if (width > maxWidth) {
       maxWidth = width;
     }
@@ -51,7 +50,12 @@ const getMaxChildSize = (block: Block) => {
   return { width: maxWidth, height: maxHeight };
 };
 
-function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
+function setBlockSizes(
+  block: Block,
+  db: BlockDB,
+  sieblingWidth: number = 0,
+  sieblingHeight: number = 0
+) {
   log.debug('calculateSize abc88 (start)', block.id, block?.size?.x, block?.size?.width);
   const totalWidth = 0;
   const totalHeight = 0;
@@ -70,27 +74,28 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
     // set width of block to max width of children
     for (const child of block.children) {
       if (child.size) {
-        child.size.width = maxWidth;
+        child.size.width = maxWidth * child.w + padding * (child.w - 1);
         child.size.height = maxHeight;
         child.size.x = 0;
         child.size.y = 0;
       }
     }
     for (const child of block.children) {
-      setBlockSizes(child, db, maxWidth);
+      setBlockSizes(child, db, maxWidth, maxHeight);
     }
 
     const columns = block.columns || -1;
     const numItems = block.children.length;
 
     // The width and height in number blocks
-    let xSize = block.children?.length;
+    let xSize = block.children.length;
     if (columns > 0 && columns < numItems) {
       xSize = columns;
     }
     const ySize = Math.ceil(numItems / xSize);
 
     let width = xSize * (maxWidth + padding) + padding;
+    let height = ySize * (maxHeight + padding) + padding;
     // If maxWidth
     if (width < sieblingWidth) {
       console.log(
@@ -98,19 +103,24 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
         block.id,
         'sieblingWidth',
         sieblingWidth,
+        'sieblingHeight',
+        sieblingHeight,
         'width',
         width
       );
       width = sieblingWidth;
+      height = sieblingHeight;
       const childWidth = (sieblingWidth - xSize * padding - padding) / xSize;
+      const childHeight = (sieblingHeight - ySize * padding - padding) / ySize;
       log.debug('Size indata abc88', block.id, 'childWidth', childWidth, 'maxWidth', maxWidth);
+      log.debug('Size indata abc88', block.id, 'childHeight', childHeight, 'maxHeight', maxHeight);
       log.debug('Size indata abc88 xSize', xSize, 'paddiong', padding);
 
-      // // set width of block to max width of children
+      // set width of block to max width of children
       for (const child of block.children) {
         if (child.size) {
           child.size.width = childWidth;
-          child.size.height = maxHeight;
+          child.size.height = childHeight;
           child.size.x = 0;
           child.size.y = 0;
         }
@@ -131,26 +141,35 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
 
     block.size = {
       width,
-      height: ySize * (maxHeight + padding) + padding,
+      height,
       x: 0,
       y: 0,
     };
   }
 
-  log.debug('calculateSize abc88 (done)', block.id, block?.size?.x, block?.size?.width);
+  log.debug(
+    'setBlockSizes abc88 (done)',
+    block.id,
+    block?.size?.x,
+    block?.size?.width,
+    block?.size?.y,
+    block?.size?.height
+  );
 }
 
 function layoutBlocks(block: Block, db: BlockDB) {
   log.debug(
-    'layout blocks (=>layoutBlocks)',
+    'abc88 layout blocks (=>layoutBlocks)',
     block.id,
     'x:',
     block?.size?.x,
+    'y:',
+    block?.size?.y,
     'width:',
     block?.size?.width
   );
   const columns = block.columns || -1;
-  log.debug('layoutBlocks columns', block.id, '=>', columns);
+  log.debug('layoutBlocks columns abc88', block.id, '=>', columns);
   if (
     block.children && // find max width of children
     block.children.length > 0
@@ -158,26 +177,12 @@ function layoutBlocks(block: Block, db: BlockDB) {
     const width = block?.children[0]?.size?.width || 0;
     const widthOfChildren = block.children.length * width + (block.children.length - 1) * padding;
 
-    log.debug('widthOfChildren', widthOfChildren, 'posX');
+    log.debug('widthOfChildren 88', widthOfChildren, 'posX');
 
     // let first = true;
-    let columnPos = -1;
+    let columnPos = 0;
     for (const child of block.children) {
-      columnPos++;
-
-      // log.debug(
-      //   'layout blocks (child)',
-      //   child.id,
-      //   'x:',
-      //   child?.size?.x,
-      //   'width:',
-      //   child?.size?.width,
-      //   'posX:',
-      //   posX,
-      //   block?.size?.x,
-      //   widthOfChildren / 2,
-      //   widthOfChildren / 2
-      // );
+      // columnPos++;
 
       if (!child.size) {
         continue;
@@ -185,7 +190,12 @@ function layoutBlocks(block: Block, db: BlockDB) {
       const { width, height } = child.size;
       const { px, py } = calculateBlockPosition(columns, columnPos);
       log.debug(
-        'layout blocks (child) px, py (',
+        'abc88 layout blocks (child) id:',
+        child.id,
+        ' (px, py)',
+        px,
+        py,
+        ' (',
         block?.size?.x,
         ',',
         block?.size?.y,
@@ -205,7 +215,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
           block.size.y - block.size.height / 2 + py * (height + padding) + height / 2 + padding;
 
         log.debug(
-          'layout blocks (calc) px, py',
+          'abc88 layout blocks (calc) px, py',
           'id:',
           child.id,
           '=>',
@@ -220,6 +230,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
       if (child.children) {
         layoutBlocks(child, db);
       }
+      columnPos += parseInt(child?.w || 1);
+      console.log('abc88', child, columnPos);
     }
   }
   log.debug(
@@ -227,6 +239,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
     block.id,
     'x:',
     block?.size?.x,
+    'y:',
+    block?.size?.y,
     'width:',
     block?.size?.width
   );
@@ -267,7 +281,7 @@ export function layout(db: BlockDB) {
     return;
   }
 
-  setBlockSizes(root, db, 0);
+  setBlockSizes(root, db, 0, 0);
   layoutBlocks(root, db);
   // Position blocks relative to parents
   // positionBlock(root, root, db);
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 3f91a7d96..46e72e0ea 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -128,7 +128,7 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 
 "<["                   { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
 
-[^\(\[\n\-\)\{\}\s\<\>]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+[^\(\[\n\-\)\{\}\s\<\>:]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
 <>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
 
 // Handling of strings in node
@@ -163,6 +163,7 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 \s*[xo<]?\-\-+[-xo>]\s*                 { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
 \s*[xo<]?\=\=+[=xo>]\s*                 { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
 \s*[xo<]?\-?\.+\-[xo>]?\s*              { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
+':'\d+                   { yy.getLogger().info('Lex: COLON', yytext); yytext=yytext.slice(1);return 'SIZE'; }
 
 /lex
 
@@ -233,7 +234,8 @@ nodeStatement
       {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
       ];
     }
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions}; }
+  | node SIZE { yy.getLogger().info('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w: $2}; }
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w:1}; }
   ;
 
 

From bbc7fe616376bd5826bb5bf23f8f6666f88876ee Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 18 Jan 2024 10:22:09 +0100
Subject: [PATCH 081/193] #3358 Fix for width of composite blocks

---
 cypress/platform/knsv2.html                   |  79 ++-
 .../mermaid/src/diagrams/block/blockDB.ts     |   1 +
 .../mermaid/src/diagrams/block/blockTypes.ts  |   1 +
 packages/mermaid/src/diagrams/block/layout.ts | 178 ++++-
 .../src/diagrams/block/parser/block.jison     |   4 +-
 packages/mermaid/src/docs/syntax/block.md     | 659 ++++++++++++++++++
 6 files changed, 877 insertions(+), 45 deletions(-)
 create mode 100644 packages/mermaid/src/docs/syntax/block.md

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index eaa5382ac..75b4418bd 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -17,7 +17,7 @@
     
+```
+
+**Example definition**
+
+```mermaid-example
+block-beta
+    A-->B[AAABBB]
+    B-->D
+    class A cssClass
+```
+
+### Default class
+
+If a class is named default it will be assigned to all classes without specific class definitions.
+
+```
+    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+## Basic support for fontawesome
+
+It is possible to add icons from fontawesome.
+
+The icons are accessed via the syntax fa:#icon class name#.
+
+```mermaid-example
+flowchart TD
+    B["fab:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner)
+    B-->E(A fa:fa-camera-retro perhaps?)
+```
+
+Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+
+## Graph declarations with spaces between vertices and link and without semicolon
+
+- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
+
+- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
+
+Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
+
+```mermaid-example
+block-beta
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
+## Configuration
+
+### Renderer
+
+The layout of the diagram is done with the renderer. The default renderer is dagre.
+
+Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
+
+The _elk_ renderer is an experimenal feature.
+You can change the renderer to elk by adding this directive:
+
+```
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+```
+
+```note
+Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
+```
+
+### Width
+
+It is possible to adjust the width of the rendered flowchart.
+
+This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
+mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
+
+```javascript
+mermaid.flowchartConfig = {
+    width: 100%
+}
+```

From a0d328d73465929fd98b19bda0c7b39670d7065d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 18 Jan 2024 14:28:14 +0100
Subject: [PATCH 082/193] #3358 Removed logging, fixed som tests

---
 cypress/platform/knsv2.html                   |  29 +-
 .../mermaid/src/dagre-wrapper/createLabel.js  |   2 +-
 .../mermaid/src/diagrams/block/blockDB.ts     |  10 +-
 .../src/diagrams/block/blockRenderer.ts       |   2 +-
 .../mermaid/src/diagrams/block/layout.spec.ts |   2 +-
 packages/mermaid/src/diagrams/block/layout.ts |  80 +-
 .../src/diagrams/block/parser/block.jison     | 158 ++--
 .../src/diagrams/block/parser/block.spec.ts   |  60 +-
 packages/mermaid/src/docs/syntax/block-old.md | 346 ++++++++
 packages/mermaid/src/docs/syntax/block.md     | 782 +++++++-----------
 packages/mermaid/src/mermaidAPI.ts            |   2 -
 11 files changed, 858 insertions(+), 615 deletions(-)
 create mode 100644 packages/mermaid/src/docs/syntax/block-old.md

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 75b4418bd..b2af1f5f9 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -64,11 +64,24 @@
   
   
     
    +block-beta
+        columns 3
+        block1["Block 1"]
+        blockArrow<["   "]>(right)
+        block2["Block 2"]
+    
    
+    
    +block-beta
+columns 5
+   A space B
+   A --x B
+    
    
+    
     block-beta
 columns 3
   a["A wide one"] b:2 c:2 d
     
    
-    
    +    
     block-beta
   block:e
       f
@@ -96,7 +109,7 @@ block-beta
   j
 
     
    
-    
    +    
     block-beta
 columns 3
   a b:2
@@ -105,14 +118,14 @@ columns 3
   end
   g h i
     
    
-    
    +    
     block-beta
 columns 3
   a b c
   e:3
   f g h
     
    
-    
    +    
     block-beta
 columns 1
   db(("DB"))
@@ -128,14 +141,14 @@ columns 1
   C --> D
   style B fill:#f9F,stroke:#333,stroke-width:4px
     
    
-    
    +    
     block-beta
 
   A1:3
   A2:1
   A3
     
    
-    
    +    
     block-beta
   block
     D
@@ -143,7 +156,7 @@ block-beta
   end
   db("This is the text in the box")
     
    
-    
    +    
     block-beta
 
       block
@@ -151,7 +164,7 @@ block-beta
       end
       A["A: I am a wide one"]
     
    
-    
    +    
     block-beta
     A["square"]
     B("rounded")
diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js
index a8351c812..adf5635f0 100644
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -56,7 +56,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
   if (evaluate(getConfig().flowchart.htmlLabels)) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '
    ');
-    log.info('vertexText' + vertexText);
+    log.debug('vertexText' + vertexText);
     const node = {
       isNode,
       label: decodeEntities(vertexText).replace(
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index b410c238e..7e7bd7528 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -153,7 +153,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       if (!block.label) {
         if (block.type === 'composite') {
           block.label = '';
-          console.log('abc89 composite', block);
+          // log.debug('abc89 composite', block);
         } else {
           block.label = block.id;
         }
@@ -175,6 +175,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
         populateBlockDatabase(block.children, block);
       }
       if (block.type === 'space') {
+        // log.debug('abc95 space', block);
         const w = block.width || 1;
         for (let j = 0; j < w; j++) {
           const newBlock = clone(block);
@@ -182,6 +183,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
           blockDatabase[newBlock.id] = newBlock;
           children.push(newBlock);
         }
+        // log.debug('abc95 space2', children);
       } else {
         if (newBlock) {
           children.push(block);
@@ -205,7 +207,7 @@ const links: Link[] = [];
 let rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
 
 const clear = (): void => {
-  log.info('Clear called');
+  log.debug('Clear called');
   commonClear();
   rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
   blockDatabase = { root: rootBlock };
@@ -290,7 +292,7 @@ const setHierarchy = (block: Block[]): void => {
   log.debug('The document from parsing', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  log.debug('abc88 The document after popuplation', JSON.stringify(rootBlock, null, 2));
+  // log.debug('abc95 The document after popuplation', JSON.stringify(rootBlock, null, 2));
   blocks = rootBlock.children;
 };
 
@@ -322,7 +324,7 @@ type IGetBlocks = () => Block[];
  */
 const getBlocksFlat: IGetBlocks = () => {
   const result: Block[] = [];
-  console.log('abc88 getBlocksFlat', blockDatabase);
+  // log.debug('abc88 getBlocksFlat', blockDatabase);
   const keys = Object.keys(blockDatabase);
   for (const key of keys) {
     result.push(blockDatabase[key]);
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index 10d2f2906..8bc527574 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -25,7 +25,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
  * @returns {object} ClassDef styles
  */
 export const getClasses = function (text: any, diagObj: any) {
-  log.info('Extracting classes', diagObj.db.getClasses());
+  log.debug('Extracting classes', diagObj.db.getClasses());
   try {
     return diagObj.db.getClasses();
   } catch (e) {
diff --git a/packages/mermaid/src/diagrams/block/layout.spec.ts b/packages/mermaid/src/diagrams/block/layout.spec.ts
index 1de79c880..6c77c8fd1 100644
--- a/packages/mermaid/src/diagrams/block/layout.spec.ts
+++ b/packages/mermaid/src/diagrams/block/layout.spec.ts
@@ -8,6 +8,6 @@ describe('Layout', function () {
     expect(calculateBlockPosition(2, 2)).toEqual({ px: 0, py: 1 });
     expect(calculateBlockPosition(2, 3)).toEqual({ px: 1, py: 1 });
     expect(calculateBlockPosition(2, 4)).toEqual({ px: 0, py: 2 });
-    expect(calculateBlockPosition(1, 3)).toEqual({ px: 0, py: 2 });
+    expect(calculateBlockPosition(1, 3)).toEqual({ px: 0, py: 3 });
   });
 });
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 205e03747..e06d6ff10 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -9,7 +9,7 @@ interface BlockPosition {
 }
 
 export function calculateBlockPosition(columns: number, position: number): BlockPosition {
-  console.log('calculateBlockPosition abc89', columns, position);
+  // log.debug('calculateBlockPosition abc89', columns, position);
   // Ensure that columns is a positive integer
   if (columns === 0 || !Number.isInteger(columns)) {
     throw new Error('Columns must be an integer !== 0.');
@@ -31,7 +31,7 @@ export function calculateBlockPosition(columns: number, position: number): Block
   // Calculate posX and posY
   const px = position % columns;
   const py = Math.floor(position / columns);
-  console.log('calculateBlockPosition abc89', columns, position, '=> (', px, py, ')');
+  // log.debug('calculateBlockPosition abc89', columns, position, '=> (', px, py, ')');
   return { px, py };
 }
 
@@ -39,10 +39,10 @@ const getMaxChildSize = (block: Block) => {
   let maxWidth = 0;
   let maxHeight = 0;
   // find max width of children
-  console.log('getMaxChildSize abc95 (start) parent:', block.id);
+  // log.debug('getMaxChildSize abc95 (start) parent:', block.id);
   for (const child of block.children) {
     const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
-    console.log(
+    log.debug(
       'getMaxChildSize abc95 child:',
       child.id,
       'width:',
@@ -52,8 +52,12 @@ const getMaxChildSize = (block: Block) => {
       'x:',
       x,
       'y:',
-      y
+      y,
+      child.type
     );
+    if (child.type === 'space') {
+      continue;
+    }
     if (width > maxWidth) {
       maxWidth = width / (block.w || 1);
     }
@@ -70,15 +74,23 @@ function setBlockSizes(
   sieblingWidth: number = 0,
   sieblingHeight: number = 0
 ) {
-  console.log(
+  log.debug(
     'setBlockSizes abc95 (start)',
     block.id,
     block?.size?.x,
     'block width =',
-    block?.size?.width,
+    block?.size,
     'sieblingWidth',
     sieblingWidth
   );
+  if (!block?.size?.width) {
+    block.size = {
+      width: sieblingWidth,
+      height: sieblingHeight,
+      x: 0,
+      y: 0,
+    };
+  }
   const totalWidth = 0;
   const totalHeight = 0;
   let maxWidth = 0;
@@ -92,31 +104,25 @@ function setBlockSizes(
     const childSize = getMaxChildSize(block);
     maxWidth = childSize.width;
     maxHeight = childSize.height;
-    console.log(
-      'setBlockSizes abc95 maxWidth of',
-      block.id,
-      ':s children is ',
-      maxWidth,
-      maxHeight
-    );
+    log.debug('setBlockSizes abc95 maxWidth of', block.id, ':s children is ', maxWidth, maxHeight);
 
     // set width of block to max width of children
     for (const child of block.children) {
       if (child.size) {
-        // console.log(
-        //   'abc95 Setting size of children of',
-        //   block.id,
-        //   'id=',
-        //   child.id,
-        //   maxWidth,
-        //   maxHeight,
-        //   child.size
-        // );
+        log.debug(
+          'abc95 Setting size of children of',
+          block.id,
+          'id=',
+          child.id,
+          maxWidth,
+          maxHeight,
+          child.size
+        );
         child.size.width = maxWidth * child.w + padding * (child.w - 1);
         child.size.height = maxHeight;
         child.size.x = 0;
         child.size.y = 0;
-        console.log(
+        log.debug(
           'abc95 updating size of ',
           block.id,
           ' children child:',
@@ -129,9 +135,9 @@ function setBlockSizes(
       }
     }
     for (const child of block.children) {
-      // console.log('abc95 fin 2 Setting size', child.id, maxWidth, maxHeight, child.size);
+      // log.debug('abc95 fin 2 Setting size', child.id, maxWidth, maxHeight, child.size);
       setBlockSizes(child, db, maxWidth, maxHeight);
-      // console.log('abc95 fin 3 Setting size', child.id, maxWidth, maxHeight, child.size);
+      // log.debug('abc95 fin 3 Setting size', child.id, maxWidth, maxHeight, child.size);
     }
 
     const columns = block.columns || -1;
@@ -151,7 +157,7 @@ function setBlockSizes(
     let height = ySize * (maxHeight + padding) + padding;
     // If maxWidth
     if (width < sieblingWidth) {
-      console.log(
+      log.debug(
         'Detected to small siebling: abc95',
         block.id,
         'sieblingWidth',
@@ -180,7 +186,7 @@ function setBlockSizes(
       }
     }
 
-    console.log(
+    log.debug(
       'abc95 (finale calc)',
       block.id,
       'xSize',
@@ -200,7 +206,7 @@ function setBlockSizes(
       const num = block.children.length;
       if (num > 0) {
         const childWidth = (width - num * padding - padding) / num;
-        // console.log('abc95 (finale calc) width', block.id, width, block.size?.width, childWidth);
+        // log.debug('abc95 (finale calc) width', block.id, width, block.size?.width, childWidth);
         for (const child of block.children) {
           if (child.size) {
             child.size.width = childWidth;
@@ -216,7 +222,7 @@ function setBlockSizes(
     };
   }
 
-  console.log(
+  log.debug(
     'setBlockSizes abc94 (done)',
     block.id,
     block?.size?.x,
@@ -228,7 +234,7 @@ function setBlockSizes(
 
 function layoutBlocks(block: Block, db: BlockDB) {
   log.debug(
-    'abc89 layout blocks (=>layoutBlocks)',
+    'abc85 layout blocks (=>layoutBlocks)',
     block.id,
     'x:',
     block?.size?.x,
@@ -238,7 +244,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
     block?.size?.width
   );
   const columns = block.columns || -1;
-  console.log('layoutBlocks columns abc91', block.id, '=>', columns, block);
+  log.debug('layoutBlocks columns abc95', block.id, '=>', columns, block);
   if (
     block.children && // find max width of children
     block.children.length > 0
@@ -250,7 +256,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
 
     // let first = true;
     let columnPos = 0;
-    console.log('abc91 block?.size?.x', block.id, block?.size?.x);
+    log.debug('abc91 block?.size?.x', block.id, block?.size?.x);
     let startingPosX = block?.size?.x ? block?.size?.x + (-block?.size?.width / 2 || 0) : -padding;
     let rowPos = 0;
     for (const child of block.children) {
@@ -265,7 +271,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
         rowPos = py;
         startingPosX = block?.size?.x || -padding;
       }
-      console.log(
+      log.debug(
         'abc89 layout blocks (child) id:',
         child.id,
         'Pos:',
@@ -294,7 +300,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
         const halfWidth = width / 2;
         child.size.x = startingPosX + padding + halfWidth;
 
-        console.log(
+        log.debug(
           'abc91 layout blocks (calc) px, py',
           'id:',
           child.id,
@@ -323,7 +329,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
         child.size.y =
           parent.size.y - parent.size.height / 2 + py * (height + padding) + height / 2 + padding;
 
-        console.log(
+        log.debug(
           'abc88 layout blocks (calc) px, py',
           'id:',
           child.id,
@@ -347,7 +353,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
         layoutBlocks(child, db);
       }
       columnPos += child?.w || 1;
-      console.log('abc88 columnsPos', child, columnPos);
+      log.debug('abc88 columnsPos', child, columnPos);
     }
   }
   log.debug(
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 9020cb761..066b7be0f 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -37,24 +37,24 @@ CRLF \u000D\u000A
 %%
 
 "block-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
-"block"\s+            { yy.getLogger().info('Found space-block'); return 'block';}
-"block"\n+            { yy.getLogger().info('Found nl-block'); return 'block';}
-"block:"            { yy.getLogger().info('Found space-block'); return 'id-block';}
-// \s*\%\%.*                                                       { yy.getLogger().info('Found comment',yytext); }
-[\s]+                                                           { yy.getLogger().info('.', yytext); /* skip all whitespace */  }
-[\n]+ {yy.getLogger().info('_', yytext);                 /* skip all whitespace */   }
+"block"\s+            { yy.getLogger().debug('Found space-block'); return 'block';}
+"block"\n+            { yy.getLogger().debug('Found nl-block'); return 'block';}
+"block:"            { yy.getLogger().debug('Found space-block'); return 'id-block';}
+// \s*\%\%.*                                                       { yy.getLogger().debug('Found comment',yytext); }
+[\s]+                                                           { yy.getLogger().debug('.', yytext); /* skip all whitespace */  }
+[\n]+ {yy.getLogger().debug('_', yytext);                 /* skip all whitespace */   }
 // [\n]                return 'NL';
 ({CRLF}|{LF})                     { return 'NL' }
 "columns"\s+"auto"             { yytext=-1; return 'COLUMNS'; }
-"columns"\s+[\d]+            { yytext = yytext.replace(/columns\s+/,''); yy.getLogger().info('COLUMNS (LEX)', yytext); return 'COLUMNS'; }
+"columns"\s+[\d]+            { yytext = yytext.replace(/columns\s+/,''); yy.getLogger().debug('COLUMNS (LEX)', yytext); return 'COLUMNS'; }
 ["][`]          { this.pushState("md_string");}
 [^`"]+        { return "MD_STR";}
 [`]["]          { this.popState();}
 ["]                     this.pushState("string");
 ["]             { yy.getLogger().debug('LEX: POPPING STR:', yytext);this.popState();}
 [^"]*           { yy.getLogger().debug('LEX: STR end:', yytext); return "STR";}
-space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
-space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
+space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().debug('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
+space                  { yytext = '1'; yy.getLogger().debug('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
 "interpolate"         return 'INTERPOLATE';
@@ -87,36 +87,36 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 .*direction\s+LR[^\n]*                                      return 'direction_lr';
 
 // Node end of shape
-"((("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-")))"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-[\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
-"}}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"(-"             { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
-"-)"             { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
-"(("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"]]"             { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
-"("              { this.popState();yy.getLogger().info('Lex: (');  return "NODE_DEND";  }
-"])"             { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
-"\\]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
-"/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
-")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
-[\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
-\]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
-[\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
+"((("             { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
+")))"             { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
+[\)]\)           { this.popState();yy.getLogger().debug('Lex: ))'); return "NODE_DEND"; }
+"}}"             { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
+"}"             { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
+"(-"             { this.popState();yy.getLogger().debug('Lex: (-'); return "NODE_DEND"; }
+"-)"             { this.popState();yy.getLogger().debug('Lex: -)'); return "NODE_DEND"; }
+"(("             { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
+"]]"             { this.popState();yy.getLogger().debug('Lex: ]]'); return "NODE_DEND"; }
+"("              { this.popState();yy.getLogger().debug('Lex: (');  return "NODE_DEND";  }
+"])"             { this.popState();yy.getLogger().debug('Lex: ])'); return "NODE_DEND"; }
+"\\]"             { this.popState();yy.getLogger().debug('Lex: /]'); return "NODE_DEND"; }
+"/]"             { this.popState();yy.getLogger().debug('Lex: /]'); return "NODE_DEND"; }
+")]"             { this.popState();yy.getLogger().debug('Lex: )]'); return "NODE_DEND"; }
+[\)]             { this.popState();yy.getLogger().debug('Lex: )');  return "NODE_DEND"; }
+\]\>             { this.popState();yy.getLogger().debug('Lex: ]>'); return "NODE_DEND"; }
+[\]]             { this.popState();yy.getLogger().debug('Lex: ]'); return "NODE_DEND"; }
 
 // Start of nodes with shapes and description
-"-)"                   { yy.getLogger().info('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
-"(-"                   { yy.getLogger().info('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
-"))"                   { yy.getLogger().info('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
-")"                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART';      }
-"((("                  { yy.getLogger().info('Lex: (((');  this.pushState('NODE');return 'NODE_DSTART'; }
-"(("                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"{{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-">"                   { yy.getLogger().info('Lexc: >'); this.pushState('NODE');return 'NODE_DSTART'; }
-"(["                   { yy.getLogger().info('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
-"("                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"-)"                   { yy.getLogger().debug('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
+"(-"                   { yy.getLogger().debug('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
+"))"                   { yy.getLogger().debug('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
+")"                    { yy.getLogger().debug('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART';      }
+"((("                  { yy.getLogger().debug('Lex: (((');  this.pushState('NODE');return 'NODE_DSTART'; }
+"(("                   { yy.getLogger().debug('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"{{"                   { yy.getLogger().debug('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"{"                   { yy.getLogger().debug('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+">"                   { yy.getLogger().debug('Lexc: >'); this.pushState('NODE');return 'NODE_DSTART'; }
+"(["                   { yy.getLogger().debug('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
+"("                    { yy.getLogger().debug('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
 "[["                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[|"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[("                   { this.pushState('NODE');return 'NODE_DSTART'; }
@@ -124,20 +124,20 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 "[\\"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[/"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[\\"                  { this.pushState('NODE');return 'NODE_DSTART'; }
-"["                    { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
+"["                    { yy.getLogger().debug('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
 
 "<["                   { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
 
-[^\(\[\n\-\)\{\}\s\<\>:]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
-<>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
+[^\(\[\n\-\)\{\}\s\<\>:]+     { yy.getLogger().debug('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+<>                { yy.getLogger().debug('Lex: EOF', yytext);return 'EOF'; }
 
 // Handling of strings in node
 ["][`]           { this.pushState("md_string");}
 ["][`]           { this.pushState("md_string");}
 [^`"]+      { return "NODE_DESCR";}
 [`]["]      { this.popState();}
-["]              { yy.getLogger().info('Lex: Starting string');this.pushState("string");}
-["]              { yy.getLogger().info('LEX ARR: Starting string');this.pushState("string");}
+["]              { yy.getLogger().debug('Lex: Starting string');this.pushState("string");}
+["]              { yy.getLogger().debug('LEX ARR: Starting string');this.pushState("string");}
 [^"]+          { yy.getLogger().debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
 ["]            {yy.getLogger().debug('LEX POPPING');this.popState();}
 
@@ -151,19 +151,19 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 ")"\s*             { yytext=']>';yy.getLogger().debug('Lex (ARROW_DIR end):',yytext);this.popState();this.popState();return "BLOCK_ARROW_END"; }
 
 // Edges
-\s*[xo<]?\-\-+[-xo>]\s*                 { yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
-\s*[xo<]?\=\=+[=xo>]\s*                 { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
-\s*[xo<]?\-?\.+\-[xo>]?\s*              { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
-\s*\~\~[\~]+\s*                         { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
-\s*[xo<]?\-\-\s*                        { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
-\s*[xo<]?\=\=\s*                        { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
-\s*[xo<]?\-\.\s*                        { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
+\s*[xo<]?\-\-+[-xo>]\s*                 { yy.getLogger().debug('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
+\s*[xo<]?\=\=+[=xo>]\s*                 { yy.getLogger().debug('Lex: LINK', yytext); return 'LINK'; }
+\s*[xo<]?\-?\.+\-[xo>]?\s*              { yy.getLogger().debug('Lex: LINK', yytext); return 'LINK'; }
+\s*\~\~[\~]+\s*                         { yy.getLogger().debug('Lex: LINK', yytext); return 'LINK'; }
+\s*[xo<]?\-\-\s*                        { yy.getLogger().debug('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
+\s*[xo<]?\=\=\s*                        { yy.getLogger().debug('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
+\s*[xo<]?\-\.\s*                        { yy.getLogger().debug('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
 ["][`]           { this.pushState("md_string");}
-["]              { yy.getLogger().info('Lex: Starting string');this.pushState("string"); return "LINK_LABEL";}
-\s*[xo<]?\-\-+[-xo>]\s*                 { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
-\s*[xo<]?\=\=+[=xo>]\s*                 { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
-\s*[xo<]?\-?\.+\-[xo>]?\s*              { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
-':'\d+                   { yy.getLogger().info('Lex: COLON', yytext); yytext=yytext.slice(1);return 'SIZE'; }
+["]              { yy.getLogger().debug('Lex: Starting string');this.pushState("string"); return "LINK_LABEL";}
+\s*[xo<]?\-\-+[-xo>]\s*                 { this.popState(); yy.getLogger().debug('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
+\s*[xo<]?\=\=+[=xo>]\s*                 { this.popState(); yy.getLogger().debug('Lex: LINK', yytext); return 'LINK'; }
+\s*[xo<]?\-?\.+\-[xo>]?\s*              { this.popState(); yy.getLogger().debug('Lex: LINK', yytext); return 'LINK'; }
+':'\d+                   { yy.getLogger().debug('Lex: COLON', yytext); yytext=yytext.slice(1);return 'SIZE'; }
 
 /lex
 
@@ -180,37 +180,37 @@ spaceLines
 
 seperator
   : NL
-  {yy.getLogger().info('Rule: seperator (NL) ');}
+  {yy.getLogger().debug('Rule: seperator (NL) ');}
   | SPACE
-  {yy.getLogger().info('Rule: seperator (Space) ');}
+  {yy.getLogger().debug('Rule: seperator (Space) ');}
   | EOF
-    {yy.getLogger().info('Rule: seperator (EOF) ');}
+    {yy.getLogger().debug('Rule: seperator (EOF) ');}
   ;
 
 start: BLOCK_DIAGRAM_KEY document EOF
-  { yy.getLogger().info("Rule: hierarchy: ", $2); yy.setHierarchy($2); }
+  { yy.getLogger().debug("Rule: hierarchy: ", $2); yy.setHierarchy($2); }
   ;
 
 
 stop
-  : NL {yy.getLogger().info('Stop NL ');}
-  | EOF {yy.getLogger().info('Stop EOF ');}
+  : NL {yy.getLogger().debug('Stop NL ');}
+  | EOF {yy.getLogger().debug('Stop EOF ');}
   // | SPACELINE
-  | stop NL {yy.getLogger().info('Stop NL2 ');}
-  | stop EOF {yy.getLogger().info('Stop EOF2 ');}
+  | stop NL {yy.getLogger().debug('Stop NL2 ');}
+  | stop EOF {yy.getLogger().debug('Stop EOF2 ');}
   ;
 
 //array of statements
 document
-	: statement { yy.getLogger().info("Rule: statement: ", $1); typeof $1.length === 'number'?$$ = $1:$$ = [$1]; }
-	| statement document { yy.getLogger().info("Rule: statement #2: ", $1); $$ = [$1].concat($2); }
+	: statement { yy.getLogger().debug("Rule: statement: ", $1); typeof $1.length === 'number'?$$ = $1:$$ = [$1]; }
+	| statement document { yy.getLogger().debug("Rule: statement #2: ", $1); $$ = [$1].concat($2); }
 	;
 
 link
   : LINK
-  { yy.getLogger().info("Rule: link: ", $1, yytext); $$={edgeTypeStr: $1, label:''}; }
+  { yy.getLogger().debug("Rule: link: ", $1, yytext); $$={edgeTypeStr: $1, label:''}; }
   | START_LINK LINK_LABEL STR LINK
-  { yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$={edgeTypeStr: $4, label:$3}; }
+  { yy.getLogger().debug("Rule: LABEL link: ", $1, $3, $4); $$={edgeTypeStr: $4, label:$3}; }
   ;
 
 statement
@@ -226,7 +226,7 @@ statement
 
 nodeStatement
   : nodeStatement link node {
-    yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, ' typestr: ',$2.edgeTypeStr);
+    yy.getLogger().debug('Rule: (nodeStatement link node) ', $1, $2, $3, ' typestr: ',$2.edgeTypeStr);
     const edgeData = yy.edgeStrToEdgeData($2.edgeTypeStr)
     $$ = [
       {id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},
@@ -234,39 +234,39 @@ nodeStatement
       {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
       ];
     }
-  | node SIZE { yy.getLogger().info('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w: parseInt($2,10)}; }
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w:1}; }
+  | node SIZE { yy.getLogger().debug('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w: parseInt($2,10)}; }
+  | node { yy.getLogger().debug('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w:1}; }
   ;
 
 
 columnsStatement
-  : COLUMNS { yy.getLogger().info('APA123', this? this:'na'); yy.getLogger().info("COLUMNS: ", $1); $$ = {type: 'column-setting', columns: $1 === 'auto'?-1:parseInt($1) } }
+  : COLUMNS { yy.getLogger().debug('APA123', this? this:'na'); yy.getLogger().debug("COLUMNS: ", $1); $$ = {type: 'column-setting', columns: $1 === 'auto'?-1:parseInt($1) } }
   ;
 
 blockStatement
-  : id-block nodeStatement document end { yy.getLogger().info('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; }
-  | block document end { yy.getLogger().info('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
+  : id-block nodeStatement document end { yy.getLogger().debug('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; }
+  | block document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
   ;
 
 node
   : NODE_ID
-  { yy.getLogger().info("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
+  { yy.getLogger().debug("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
   | NODE_ID nodeShapeNLabel
   {
-    yy.getLogger().info("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2);
+    yy.getLogger().debug("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2);
     $$ = { id: $1, label: $2.label, typeStr: $2.typeStr, directions: $2.directions };
   }
   ;
 
-dirList: DIR { yy.getLogger().info("Rule: dirList: ", $1); $$ = [$1]; }
-  | DIR dirList { yy.getLogger().info("Rule: dirList: ", $1, $2); $$ = [$1].concat($2); }
+dirList: DIR { yy.getLogger().debug("Rule: dirList: ", $1); $$ = [$1]; }
+  | DIR dirList { yy.getLogger().debug("Rule: dirList: ", $1, $2); $$ = [$1].concat($2); }
   ;
 
 nodeShapeNLabel
   :   NODE_DSTART STR NODE_DEND
-	      { yy.getLogger().info("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; }
+	      { yy.getLogger().debug("Rule: nodeShapeNLabel: ", $1, $2, $3); $$ = { typeStr: $1 + $3, label: $2 }; }
 	|    BLOCK_ARROW_START STR dirList BLOCK_ARROW_END
-    	      { yy.getLogger().info("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, " #3:",$3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
+    	      { yy.getLogger().debug("Rule: BLOCK_ARROW nodeShapeNLabel: ", $1, $2, " #3:",$3, $4); $$ = { typeStr: $1 + $4, label: $2, directions: $3}; }
   ;
 
 
@@ -281,7 +281,7 @@ classDefStatement
 
 cssClassStatement
     : class CLASSENTITY_IDS STYLECLASS {
-        //console.log('apply class: id(s): ',$2, '  style class: ', $3);
+        //log.debug('apply class: id(s): ',$2, '  style class: ', $3);
         $$={ type: 'applyClass', id: $2.trim(), styleClass: $3.trim() };
         }
     ;
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index bf32afc5e..367edb842 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -47,10 +47,10 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(2);
       expect(blocks[0].id).toBe('id1');
       expect(blocks[0].label).toBe('id1');
-      expect(blocks[0].type).toBe('square');
+      expect(blocks[0].type).toBe('na');
       expect(blocks[1].id).toBe('id2');
       expect(blocks[1].label).toBe('id2');
-      expect(blocks[1].type).toBe('square');
+      expect(blocks[1].type).toBe('na');
     });
     it('a diagram with multiple nodes', async () => {
       const str = `block-beta
@@ -64,13 +64,13 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(3);
       expect(blocks[0].id).toBe('id1');
       expect(blocks[0].label).toBe('id1');
-      expect(blocks[0].type).toBe('square');
+      expect(blocks[0].type).toBe('na');
       expect(blocks[1].id).toBe('id2');
       expect(blocks[1].label).toBe('id2');
-      expect(blocks[1].type).toBe('square');
+      expect(blocks[1].type).toBe('na');
       expect(blocks[2].id).toBe('id3');
       expect(blocks[2].label).toBe('id3');
-      expect(blocks[2].type).toBe('square');
+      expect(blocks[2].type).toBe('na');
     });
 
     it('a node with a square shape and a label', async () => {
@@ -86,7 +86,7 @@ describe('Block diagram', function () {
       expect(blocks[0].type).toBe('square');
       expect(blocks[1].id).toBe('id2');
       expect(blocks[1].label).toBe('id2');
-      expect(blocks[1].type).toBe('square');
+      expect(blocks[1].type).toBe('na');
     });
     it('a diagram with multiple nodes with edges', async () => {
       const str = `block-beta
@@ -231,14 +231,14 @@ describe('Block diagram', function () {
       expect(compoundBlock.children.length).toBe(1);
       expect(compoundBlock.id).toBe('compoundBlock');
       expect(compoundBlock.label).toBe('Compound block');
-      expect(compoundBlock.type).toBe('square');
+      expect(compoundBlock.type).toBe('composite');
 
       expect(block2.id).toBe('block2');
       expect(block2.label).toBe('Block 2');
       expect(block2.type).toBe('square');
     });
-    it.skip('blocks mixed with compound blocks', async () => {
-      const str = `block
+    it('blocks mixed with compound blocks', async () => {
+      const str = `block-beta
           columns 1
           block1["Block 1"]
 
@@ -250,16 +250,43 @@ describe('Block diagram', function () {
         `;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(2);
+
+      const compoundBlock = blocks[1];
+      const block2 = compoundBlock.children[0];
+
+      expect(compoundBlock.children.length).toBe(2);
+
+      expect(block2.id).toBe('block2');
+      expect(block2.label).toBe('Block 2');
+      expect(block2.type).toBe('square');
     });
 
-    it.skip('Arrow blocks', async () => {
-      const str = `block
+    it('Arrow blocks', async () => {
+      const str = `block-beta
         columns 3
         block1["Block 1"]
-        blockArrow
+        blockArrow<["   "]>(right)
         block2["Block 2"]`;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(3);
+
+      const block1 = blocks[0];
+      const blockArrow = blocks[1];
+      const block2 = blocks[2];
+
+      expect(block1.id).toBe('block1');
+      expect(blockArrow.id).toBe('blockArrow');
+      expect(block2.id).toBe('block2');
+      expect(block2.label).toBe('Block 2');
+      expect(block2.type).toBe('square');
+      expect(blockArrow.type).toBe('block_arrow');
+      console.log('blockArrow', blockArrow);
     });
     it.skip('Arrow blocks with multiple points', async () => {
       const str = `block-beta
@@ -275,7 +302,7 @@ describe('Block diagram', function () {
 
       block.parse(str);
     });
-    it.skip('blocks with different widths', async () => {
+    it('blocks with different widths', async () => {
       const str = `block-beta
         columns 3
         one["One Slot"]
@@ -283,6 +310,13 @@ describe('Block diagram', function () {
         `;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(2);
+      const one = blocks[0];
+      const two = blocks[1];
+      console.log('Obe and Two', one, two);
+      expect(two.w).toBe(2);
     });
     it('empty blocks', async () => {
       const str = `block-beta
diff --git a/packages/mermaid/src/docs/syntax/block-old.md b/packages/mermaid/src/docs/syntax/block-old.md
new file mode 100644
index 000000000..d2fd0b717
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/block-old.md
@@ -0,0 +1,346 @@
+---
+title: Block Diagram Syntax
+outline: 'deep' # shows all h3 headings in outline in Vitepress
+---
+
+# Block Diagrams - Basic Syntax
+
+Block diagrams are a fundamental tool in technical and engineering documentation, offering a straightforward way to represent complex systems and processes.
+
+A block diagram, at its core, is a graphical representation of a system that uses blocks to depict different components or functions and arrows to show the relationship or flow between them. This form of diagram is invaluable in simplifying the understanding of large-scale systems, breaking them down into individual, easily digestible components.
+
+With block diagrams you can create clear, concise, and visually appealing representations of systems. This is particularly beneficial for technical teams and stakeholders who need to document, analyze, or communicate complex processes without getting entangled in the intricacies of detailed schematics. Whether it's for software architecture, network systems, or process management, Mermaid's block diagrams offer an accessible and efficient way to visualize and convey crucial information.
+
+```warning
+If you are using the word "end" in a Flowchart block, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
+```
+
+### A block (default)
+
+```mermaid-example
+---
+title: Block
+---
+block-beta
+    id
+```
+
+```note
+The id is what is displayed in the box.
+```
+
+### A block with text
+
+It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
+found for the block that will be used. Also if you define edges for the block later on, you can omit text definitions. The
+one previously defined will be used when rendering the box.
+
+```mermaid-example
+---
+title: Node with text
+---
+block-beta
+    id1[This is the text in the box]
+```
+
+#### Unicode text
+
+Use `"` to enclose the unicode text.
+
+```mermaid-example
+block-beta
+    id["This ❤ Unicode"]
+```
+
+#### Markdown formatting
+
+Use double quotes and backticks "\` text \`" to enclose the markdown text.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+block-beta
+    markdown["`This **is** _Markdown_`"]
+    newLines["`Line1
+    Line 2
+    Line 3`"]
+    markdown --> newLines
+```
+
+## Block shapes
+
+### A block with round edges
+
+```mermaid-example
+block-beta
+    id1(This is the text in the box)
+```
+
+### A stadium-shaped block
+
+```mermaid-example
+block-beta
+    id1([This is the text in the box])
+```
+
+### A block in a subroutine shape
+
+```mermaid-example
+block-beta
+    id1[[This is the text in the box]]
+```
+
+### A block in a cylindrical shape
+
+```mermaid-example
+block-beta
+    id1[(Database)]
+```
+
+### A block in the form of a circle
+
+```mermaid-example
+block-beta
+    id1((This is the text in the circle))
+```
+
+### A block in an asymmetric shape
+
+```mermaid-example
+block-beta
+    id1>This is the text in the box]
+```
+
+### A block (rhombus)
+
+```mermaid-example
+block-beta
+    id1{This is the text in the box}
+```
+
+### A hexagon block
+
+```mermaid-example
+block-beta
+    id1{{This is the text in the box}}
+```
+
+### Parallelogram
+
+```mermaid-example
+flowchart TD
+    id1[/This is the text in the box/]
+```
+
+### Parallelogram alt
+
+```mermaid-example
+flowchart TD
+    id1[\This is the text in the box\]
+```
+
+### Trapezoid
+
+```mermaid-example
+flowchart TD
+    A[/Christmas\]
+```
+
+### Trapezoid alt
+
+```mermaid-example
+flowchart TD
+    B[\Go shopping/]
+```
+
+### Double circle
+
+```mermaid-example
+flowchart TD
+    id1(((This is the text in the circle)))
+```
+
+## Links between blocks
+
+Blocks can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
+
+### A link with arrow head
+
+```mermaid-example
+block-beta
+    A-->B
+```
+
+### An open link
+
+```mermaid-example
+block-beta
+    A --- B
+```
+
+### Text on links
+
+```mermaid-example
+block-beta
+    A-- This is the text! ---B
+```
+
+or
+
+```mermaid-example
+block-beta
+    A---|This is the text|B
+```
+
+### A link with arrow head and text
+
+```mermaid-example
+block-beta
+    A-->|text|B
+```
+
+or
+
+```mermaid-example
+block-beta
+    A-- text -->B
+```
+
+### Dotted link
+
+```mermaid-example
+block-beta
+   A-.->B;
+```
+
+### Dotted link with text
+
+```mermaid-example
+block-beta
+   A-. text .-> B
+```
+
+### Thick link
+
+```mermaid-example
+block-beta
+   A ==> B
+```
+
+### Thick link with text
+
+```mermaid-example
+block-beta
+   A == text ==> B
+```
+
+### Different types of links
+
+There are new types of arrows supported as per below:
+
+```mermaid-example
+block-beta
+    A --o B
+    B --x C
+```
+
+### Multi directional arrows
+
+There is the possibility to use multidirectional arrows.
+
+```mermaid-example
+block-beta
+    A o--o B
+    B <--> C
+    C x--x D
+```
+
+## Special characters that break syntax
+
+It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
+
+```mermaid-example
+block-beta
+    id1["This is the (text) in the box"]
+```
+
+### Entity codes to escape characters
+
+It is possible to escape characters using the syntax exemplified here.
+
+```mermaid-example
+    block-beta
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+```
+
+Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
+
+## Blocks in blocks
+
+```
+block-beta
+    block definition
+end
+```
+
+An example below:
+
+```mermaid-example
+block-beta
+    block
+        A["square"]
+        B("rounded")
+    end
+    C(("circle"))
+```
+
+### Comments
+
+Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
+
+```mermaid
+block-beta
+%% this is a comment A -- text --> B{block}
+   A -- text --> B -- text2 --> C
+```
+
+## Styling and classes
+
+### Styling a block
+
+It is possible to apply specific styles such as a thicker border or a different background color to a block.
+
+```mermaid-example
+block-beta
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### Classes
+
+More convenient than defining the style every time is to define a class of styles and attach this class to the blocks that
+should have a different look.
+
+A class definition looks like the example below:
+
+```
+    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+Also, it is possible to define style to multiple classes in one statement:
+
+```
+    classDef firstClassName,secondClassName font-size:12pt;
+```
+
+Attachment of a class to a block is done as per below:
+
+```
+    class blockId1 className;
+```
+
+It is also possible to attach a class to a list of blocks in one statement:
+
+```
+    class blockId1,blockId2 className;
+```
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index 20dc1c6c9..b1067d5b3 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -3,657 +3,501 @@ title: Block Diagram Syntax
 outline: 'deep' # shows all h3 headings in outline in Vitepress
 ---
 
-# Block Diagrams - Basic Syntax
+# Block Diagrams Documentation
 
-Block diagrams are a fundamental tool in technical and engineering documentation, offering a straightforward way to represent complex systems and processes.
+## 1. Introduction to Block Diagrams
 
-A block diagram, at its core, is a graphical representation of a system that uses blocks to depict different components or functions and arrows to show the relationship or flow between them. This form of diagram is invaluable in simplifying the understanding of large-scale systems, breaking them down into individual, easily digestible components.
+### Definition and Purpose
 
-With block diagrams you can create clear, concise, and visually appealing representations of systems. This is particularly beneficial for technical teams and stakeholders who need to document, analyze, or communicate complex processes without getting entangled in the intricacies of detailed schematics. Whether it's for software architecture, network systems, or process management, Mermaid's block diagrams offer an accessible and efficient way to visualize and convey crucial information.
+Block diagrams are an intuitive and efficient way to represent complex systems, processes, or architectures visually. They are composed of blocks and connectors, where blocks represent the fundamental components or functions, and connectors show the relationship or flow between these components. This method of diagramming is essential in various fields such as engineering, software development, and process management.
 
-```warning
-If you are using the word "end" in a Flowchart block, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
-```
+The primary purpose of block diagrams is to provide a high-level view of a system, allowing for easy understanding and analysis without delving into the intricate details of each component. This makes them particularly useful for simplifying complex systems and for explaining the overall structure and interaction of components within a system.
 
-### A block (default)
+### General Use Cases
 
-```mermaid-example
----
-title: Block
----
-block-beta
-    id
-```
+Block diagrams have a wide range of applications across various industries and disciplines. Some of the key use cases include:
 
-```note
-The id is what is displayed in the box.
-```
+- **Software Architecture**: In software development, block diagrams can be used to illustrate the architecture of a software application. This includes showing how different modules or services interact, data flow, and high-level component interaction.
 
-### A block with text
+- **Network Diagrams**: Block diagrams are ideal for representing network architectures in IT and telecommunications. They can depict how different network devices and services are interconnected, including routers, switches, firewalls, and the flow of data across the network.
 
-It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
-found for the block that will be used. Also if you define edges for the block later on, you can omit text definitions. The
-one previously defined will be used when rendering the box.
+- **Process Flowcharts**: In business and manufacturing, block diagrams can be employed to create process flowcharts. These flowcharts represent various stages of a business or manufacturing process, helping to visualize the sequence of steps, decision points, and the flow of control.
 
-```mermaid-example
----
-title: Node with text
----
-block-beta
-    id1[This is the text in the box]
-```
+- **Electrical Systems**: Engineers use block diagrams to represent electrical systems and circuitry. They can illustrate the high-level structure of an electrical system, the interaction between different electrical components, and the flow of electrical currents.
 
-#### Unicode text
+- **Educational Purposes**: Block diagrams are also extensively used in educational materials to explain complex concepts and systems in a simplified manner. They help in breaking down and visualizing scientific theories, engineering principles, and technological systems.
 
-Use `"` to enclose the unicode text.
+These examples demonstrate the versatility of block diagrams in providing clear and concise representations of complex systems. Their simplicity and clarity make them a valuable tool for professionals across various fields to communicate complex ideas effectively.
+
+In the following sections, we will delve into the specifics of creating and manipulating block diagrams using Mermaid, covering everything from basic syntax to advanced configurations and styling.
+
+Creating block diagrams with Mermaid is straightforward and accessible. This section introduces the basic syntax and structure needed to start building simple diagrams. Understanding these foundational concepts is key to efficiently utilizing Mermaid for more complex diagramming tasks.
+
+### Simple Block Diagrams
+
+#### Basic Structure
+
+At its core, a block diagram consists of blocks representing different entities or components. In Mermaid, these blocks are easily created using simple text labels. The most basic form of a block diagram can be a series of blocks without any connectors.
+
+**Example - Simple Block Diagram**:
+To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
 
 ```mermaid-example
 block-beta
-    id["This ❤ Unicode"]
+  a b c
 ```
 
-#### Markdown formatting
+This example will produce a horizontal sequence of three blocks. Each block is automatically spaced and aligned for optimal readability.
 
-Use double quotes and backticks "\` text \`" to enclose the markdown text.
+### Diagrams with Multiple Columns
+
+#### Column Usage
+
+While simple block diagrams are linear and straightforward, more complex systems may require a structured layout. Mermaid allows for the organization of blocks into multiple columns, facilitating the creation of more intricate and detailed diagrams.
+
+**Example - Multi-Column Diagram:**
+In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
 
 ```mermaid-example
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
 block-beta
-    markdown["`This **is** _Markdown_`"]
-    newLines["`Line1
-    Line 2
-    Line 3`"]
-    markdown --> newLines
+  columns 3
+  a b c d
 ```
 
-## Block shapes
+This syntax instructs Mermaid to arrange the blocks 'a', 'b', 'c', and 'd' across three columns, wrapping to the next row as needed. This feature is particularly useful for representing layered or multi-tiered systems, such as network layers or hierarchical structures.
 
-### A block with round edges
+These basic building blocks of Mermaid's block diagrams provide a foundation for more complex diagramming. The simplicity of the syntax allows for quick creation and iteration of diagrams, making it an efficient tool for visualizing ideas and concepts. In the next section, we'll explore advanced block configuration options, including setting block widths and creating composite blocks.
+
+## 3. Advanced Block Configuration
+
+Building upon the basics, this section delves into more advanced features of block diagramming in Mermaid. These features allow for greater flexibility and complexity in diagram design, accommodating a wider range of use cases and scenarios.
+
+### Setting Block Width
+
+#### Spanning Multiple Columns
+
+In more complex diagrams, you may need blocks that span multiple columns to emphasize certain components or to represent larger entities. Mermaid allows for the adjustment of block widths to cover multiple columns, enhancing the diagram's readability and structure.
+
+**Example - Block Spanning Multiple Columns**:
+To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
+
+```mermaid-example
+block-beta
+  columns 3
+  a["A wide one"] b:2 c:2 d
+```
+
+In this example, the block labeled "A wide one" spans two columns, while blocks 'b', 'c', and 'd' are allocated their own columns. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size.
+
+### Creating Composite Blocks
+
+#### Nested Blocks
+
+Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's block diagram syntax. They allow for the representation of nested or hierarchical systems, where one component encompasses several subcomponents.
+
+**Example - Composite Blocks:**
+Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
+
+```mermaid-example
+block-beta
+    block
+      D
+    end
+    A["A: I am a wide one"]
+```
+
+In this syntax, 'D' is a nested block within a larger parent block. This feature is particularly useful for depicting complex structures, such as a server with multiple services or a department within a larger organizational framework.
+
+### Column Width Dynamics
+
+#### Adjusting Widths
+
+Mermaid also allows for dynamic adjustment of column widths based on the content of the blocks. The width of the columns is determined by the widest block in the column, ensuring that the diagram remains balanced and readable.
+
+**Example - Dynamic Column Widths:**
+In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
+
+```mermaid-example
+block-beta
+columns 3
+a:3
+block:e:3
+f
+end
+g
+```
+
+This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
+
+With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options.
+
+## 4. Block Varieties and Shapes
+
+Mermaid's block diagrams are not limited to standard rectangular shapes. A variety of block shapes are available, allowing for a more nuanced and tailored representation of different types of information or entities. This section outlines the different block shapes you can use in Mermaid and their specific applications.
+
+### Standard and Special Block Shapes
+
+Mermaid supports a range of block shapes to suit different diagramming needs, from basic geometric shapes to more specialized forms.
+
+#### Example - Round Edged Block
+
+To create a block with round edges, which can be used to represent a softer or more flexible component:
 
 ```mermaid-example
 block-beta
     id1(This is the text in the box)
 ```
 
-### A stadium-shaped block
+#### Example - Stadium-Shaped Block
+
+A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
 
 ```mermaid-example
 block-beta
     id1([This is the text in the box])
 ```
 
-### A block in a subroutine shape
+#### Example - Subroutine Shape
+
+For representing subroutines or contained processes, a block with double vertical lines is useful:
 
 ```mermaid-example
 block-beta
     id1[[This is the text in the box]]
 ```
 
-### A block in a cylindrical shape
+#### Example - Cylindrical Shape
+
+The cylindrical shape is ideal for representing databases or storage components:
 
 ```mermaid-example
 block-beta
     id1[(Database)]
 ```
 
-### A block in the form of a circle
+#### Example - Circle Shape
+
+A circle can be used for centralized or pivotal components:
 
 ```mermaid-example
 block-beta
     id1((This is the text in the circle))
 ```
 
-### A block in an asymmetric shape
+#### Example - Asymmetric, Rhombus, and Hexagon Shapes
+
+For decision points, use a rhombus, and for unique or specialized processes, asymmetric and hexagon shapes can be utilized:
+
+**Asymmetric**
 
 ```mermaid-example
 block-beta
-    id1>This is the text in the box]
+  id1>This is the text in the box]
 ```
 
-### A block (rhombus)
+**Rhombus**
 
 ```mermaid-example
 block-beta
     id1{This is the text in the box}
 ```
 
-### A hexagon block
+**Hexagon**
 
 ```mermaid-example
 block-beta
     id1{{This is the text in the box}}
 ```
 
-### Parallelogram
+#### Example - Parallelogram and Trapezoid Shapes
+
+Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
 
 ```mermaid-example
 flowchart TD
-    id1[/This is the text in the box/]
+  id1[/This is the text in the box/]
+  id2[\This is the text in the box\]
+  A[/Christmas\]
+  B[\Go shopping/]
 ```
 
-### Parallelogram alt
+#### Example - Double Circle
 
-```mermaid-example
-flowchart TD
-    id1[\This is the text in the box\]
-```
-
-### Trapezoid
-
-```mermaid-example
-flowchart TD
-    A[/Christmas\]
-```
-
-### Trapezoid alt
-
-```mermaid-example
-flowchart TD
-    B[\Go shopping/]
-```
-
-### Double circle
+For highlighting critical or high-priority components, a double circle can be effective:
 
 ```mermaid-example
 flowchart TD
     id1(((This is the text in the circle)))
 ```
 
-## Links between blocks
+### Block Arrows and Space Blocks
 
-Blocks can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
+Mermaid also offers unique shapes like block arrows and space blocks for directional flow and spacing.
 
-### A link with arrow head
+#### Example - Block Arrows
+
+Block arrows can visually indicate direction or flow within a process:
 
 ```mermaid-example
 block-beta
-    A-->B
+  blockArrowId<["Label"]>(right)
+  blockArrowId2<["Label"]>(left)
+  blockArrowId3<["Label"]>(up)
+  blockArrowId4<["Label"]>(down)
+  blockArrowId5<["Label"]>(x)
+  blockArrowId6<["Label"]>(y)
+  blockArrowId6<["Label"]>(x, down)
 ```
 
-### An open link
+#### Example - Space Blocks
+
+Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
 
 ```mermaid-example
 block-beta
-    A --- B
+  space:3
+  ida idb idc
 ```
 
-### Text on links
+Note that you can set how many columns the spece block occupied using the number notaion `space:num` where num is a number indicating the num columns width. You can alsio use `space` which defaults to one column.
+
+The variety of shapes and special blocks in Mermaid enhances the expressive power of block diagrams, allowing for more accurate and context-specific representations. These options give users the flexibility to create diagrams that are both informative and visually appealing. In the next sections, we will explore the ways to connect these blocks and customize their appearance.
+
+### Standard and Special Block Shapes
+
+Discuss the various shapes available for blocks, including standard shapes and special forms like block arrows and space blocks.
+
+## 5. Connecting Blocks with Edges
+
+One of the key features of block diagrams in Mermaid is the ability to connect blocks using various types of edges or links. This section explores the different ways blocks can be interconnected to represent relationships and flows between components.
+
+### Basic Linking and Arrow Types
+
+The most fundamental aspect of connecting blocks is the use of arrows or links. These connectors depict the relationships or the flow of information between the blocks. Mermaid offers a range of arrow types to suit different diagramming needs.
+
+**Example - Basic Links**
+
+A simple link with an arrow can be created to show direction or flow from one block to another:
 
 ```mermaid-example
 block-beta
-    A-- This is the text! ---B
+  A-->B
 ```
 
-or
+This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow.
+
+**Example - Open Link:**
+For connections that are less direct or to represent a different type of relationship, an open link (without an arrowhead) can be used:
 
 ```mermaid-example
 block-beta
-    A---|This is the text|B
+  A --- B
 ```
 
-### A link with arrow head and text
+This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction.
+
+### Text on Links
+
+In addition to connecting blocks, it's often necessary to describe or label the relationship. Mermaid allows for the inclusion of text on links, providing context to the connections.
+
+Example - Text with Links
+To add text to a link, the syntax includes the text within the link definition:
 
 ```mermaid-example
 block-beta
-    A-->|text|B
+  A-- This is the text! ---B
 ```
 
-or
+This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
+
+### Advanced Link Types
+
+Mermaid also supports various advanced link types, such as dotted lines, thick links, and different arrowheads, to represent different kinds of relationships or interactions.
+
+**Example - Dotted and Thick Links**
+A dotted link can be used to represent a weaker or less formal relationship:
 
 ```mermaid-example
 block-beta
-    A-- text -->B
+  A-.->B
 ```
 
-### Dotted link
+For a more pronounced connection, a thick link can be used:
 
 ```mermaid-example
 block-beta
-   A-.->B;
+  A==>B
 ```
 
-### Dotted link with text
+Example - Edges and Styles:
 
 ```mermaid-example
 block-beta
-   A-. text .-> B
-```
-
-### Thick link
-
-```mermaid-example
-block-beta
-   A ==> B
-```
-
-### Thick link with text
-
-```mermaid-example
-block-beta
-   A == text ==> B
-```
-
-### Different types of links
-
-There are new types of arrows supported as per below:
-
-```mermaid-example
-block-beta
-    A --o B
-    B --x C
-```
-
-### Multi directional arrows
-
-There is the possibility to use multidirectional arrows.
-
-```mermaid-example
-block-beta
-    A o--o B
-    B <--> C
-    C x--x D
-```
-
-## Special characters that break syntax
-
-It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
-
-```mermaid-example
-block-beta
-    id1["This is the (text) in the box"]
-```
-
-### Entity codes to escape characters
-
-It is possible to escape characters using the syntax exemplified here.
-
-```mermaid-example
-    block-beta
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
-```
-
-Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
-
-## Blocks in blocks
-
-```
-block-beta
-    block definition
-end
-```
-
-An example below:
-
-```mermaid-example
-block-beta
-    block
-        A["square"]
-        B("rounded")
-    end
-    C(("circle"))
-```
-
-You can also set an explicit id for the subgraph.
-
-```mermaid-example
-flowchart TB
-    c1-->a2
-    subgraph ide1 [one]
-    a1-->a2
-    end
-```
-
-### flowcharts
-
-With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
-
-```mermaid-example
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-    one --> two
-    three --> two
-    two --> c2
-```
-
-### Direction in subgraphs
-
-With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
-
-```mermaid-example
-block-beta
-  subgraph TOP
-    direction TB
-    subgraph B1
-        direction RL
-        i1 -->f1
-    end
-    subgraph B2
-        direction BT
-        i2 -->f2
-    end
+columns 1
+  db(("DB"))
+  blockArrowId6<["   "]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
   end
-  A --> TOP --> B
-  B1 --> B2
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
 ```
 
-## Markdown Strings
+## 6. Styling and Customization
 
-The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+Beyond the structure and layout of block diagrams, Mermaid offers extensive styling options. These customization features allow for the creation of more visually distinctive and informative diagrams. This section covers how to apply individual styles to blocks and how to use classes for consistent styling across multiple elements.
 
-```mermaid-example
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
-block-beta
-subgraph "One"
-  a("`The **cat**
-  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
-end
-subgraph "`**Two**`"
-  c("`The **cat**
-  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
-end
-```
+### Individual Block Styling
 
-Formatting:
+Mermaid enables detailed styling of individual blocks, allowing you to apply various CSS properties such as color, stroke, and border thickness. This feature is especially useful for highlighting specific parts of a diagram or for adhering to certain visual themes.
 
-- For bold text, use double asterisks (`**`) before and after the text.
-- For italics, use single asterisks (`*`) before and after the text.
-- With traditional strings, you needed to add `
    ` tags for text to wrap in blocks. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a `
    ` tag.
+#### Example - Styling a Single Block
 
-This feature is applicable to block labels, edge labels, and subgraph labels.
-
-## Interaction
-
-It is possible to bind a click event to a block, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
-
-```note
-This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
-```
-
-```
-click blockId callback
-click blockId call callback()
-```
-
-- blockId is the id of the block
-- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the blockId as parameter.
-
-Examples of tooltip usage below:
-
-```html
-
-```
-
-The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
+To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
 
 ```mermaid-example
 block-beta
-    A-->B
-    B-->C
-    C-->D
-    click A callback "Tooltip for a callback"
-    click B "https://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
-    click B href "https://www.github.com" "This is a tooltip for a link"
+  id1(Start)-->id2(Stop)
+  style id1 fill:#f9f,stroke:#333,stroke-width:4px
+  style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
-> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
+In this example, a class named 'blue' is defined and applied to block 'A', while block 'B' receives individual styling. This demonstrates the flexibility of Mermaid in applying both shared and unique styles within the same diagram.
 
-?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
+The ability to style blocks individually or through classes provides a powerful tool for enhancing the visual impact and clarity of block diagrams. Whether emphasizing certain elements or maintaining a cohesive design across the diagram, these styling capabilities are central to effective diagramming. The next sections will present practical examples and use cases, followed by tips for troubleshooting common issues.
 
-Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
+### 7. Practical Examples and Use Cases
 
-```mermaid-example
-block-beta
-    A-->B
-    B-->C
-    C-->D
-    D-->E
-    click A "https://www.github.com" _blank
-    click B "https://www.github.com" "Open this in a new tab" _blank
-    click C href "https://www.github.com" _blank
-    click D href "https://www.github.com" "Open this in a new tab" _blank
-```
+The versatility of Mermaid's block diagrams becomes evident when applied to real-world scenarios. This section provides practical examples demonstrating the application of various features discussed in previous sections. These examples showcase how block diagrams can be used to represent complex systems and processes in an accessible and informative manner.
 
-Beginner's tip—a full example using interactive links in a html context:
+### Detailed Examples Illustrating Various Features
 
-```html
-
-  
    -    block-beta
-        A-->B
-        B-->C
-        C-->D
-        click A callback "Tooltip"
-        click B "https://www.github.com" "This is a link"
-        click C call callback() "Tooltip"
-        click D href "https://www.github.com" "This is a link"
-  
    
+Combining the elements of structure, linking, and styling, we can create comprehensive diagrams that serve specific purposes in different contexts.
 
-  
-
-```
+#### Example - System Architecture
 
-### Comments
-
-Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
+Illustrating a simple software system architecture with interconnected components:
 
 ```mermaid
 block-beta
-%% this is a comment A -- text --> B{block}
-   A -- text --> B -- text2 --> C
+  columns 2
+  Frontend Backend
+  Frontend-->Backend
+  Database[(Database)]
+  Backend-->Database
+  class Frontend,Backend fill:#f96,stroke:#333;
+  class Database fill:#9f9,stroke:#333;
 ```
 
-## Styling and classes
+This example shows a basic architecture with a frontend, backend, and database. The blocks are styled to differentiate between types of components.
 
-### Styling links
+#### Example - Business Process Flow
 
-It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links
-have no ids in the same way as blocks, some other way of deciding what style the links should be attached to is required.
-Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.
-In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
-
-```
-linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
-```
-
-It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
-
-```
-linkStyle 1,2,7 color:blue;
-```
-
-### Styling line curves
-
-It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
-Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,
-`natural`, `step`, `stepAfter`, and `stepBefore`.
-
-In this example, a left-to-right graph uses the `stepBefore` curve style:
-
-```
-%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
-graph LR
-```
-
-For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
-[d3-shape](https://github.com/d3/d3-shape/) project.
-
-### Styling a block
-
-It is possible to apply specific styles such as a thicker border or a different background color to a block.
+Representing a business process flow with decision points and multiple stages:
 
 ```mermaid-example
 block-beta
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-```
-
-#### Classes
-
-More convenient than defining the style every time is to define a class of styles and attach this class to the blocks that
-should have a different look.
-
-A class definition looks like the example below:
+  Start{Start}
+  Decision{Make Decision}
+  Process1[Process A]
+  Process2[Process B]
+  End((End))
+  Start --> Decision
+  Decision -- Yes --> Process1
+  Decision -- No --> Process2
+  Process1 --> End
+  Process2 --> End
+  style Start fill:#f9f;
+  style End fill:#bbf;
 
-```
-    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
 ```
 
-Also, it is possible to define style to multiple classes in one statement:
+This diagram depicts a simple decision-making process with two possible paths leading to an endpoint, demonstrating the use of different shapes and directional arrows.
+
+### Real works Application Scenarios
+
+Block diagrams can be employed in a variety of real-world scenarios. Here are a few examples:
+
+- **IT Network Layouts**: Visualize the structure of IT networks, showing how different devices and services are connected.
+- **Educational Diagrams**: Explain complex scientific concepts, engineering systems, or historical timelines.
+- **Organizational Charts**: Represent the hierarchy and relationships within an organization or department.
+
+These practical examples and scenarios underscore the utility of Mermaid block diagrams in simplifying and effectively communicating complex information across various domains.
+
+The next section, 'Troubleshooting and Common Issues', will provide insights into resolving common challenges encountered when working with Mermaid block diagrams, ensuring a smooth diagramming experience.
+
+```mermaid-example
 
-```
-    classDef firstClassName,secondClassName font-size:12pt;
 ```
 
-Attachment of a class to a block is done as per below:
+```mermaid-example
 
-```
-    class blockId1 className;
 ```
 
-It is also possible to attach a class to a list of blocks in one statement:
+## 8. Troubleshooting and Common Issues
+
+Working with Mermaid block diagrams can sometimes present challenges, especially as the complexity of the diagrams increases. This section aims to provide guidance on resolving common issues and offers tips for managing more intricate diagram structures.
+
+### Common Syntax Errors
+
+Understanding and avoiding common syntax errors is key to a smooth experience with Mermaid diagrams.
+
+#### Example - Incorrect Linking
+
+A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
 
 ```
-    class blockId1,blockId2 className;
+block-beta
+  A - B
 ```
 
-A shorter form of adding a class is to attach the classname to the block using the `:::`operator as per below:
+**Correction**:
+Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection:
 
 ```mermaid-example
 block-beta
-    A:::someclass --> B
-    classDef someclass fill:#f96
+  A --> B
 ```
 
-This form can be used when declaring multiple links between blocks:
+#### Example - Misplaced Styling
+
+Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
+
+```mermaid-example
+  block-beta
+    A
+    style A fill#f9f;
+```
+
+**Correction:**
+Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
 
 ```mermaid-example
 block-beta
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef foobar stroke:#00f
-```
-
-### Css classes
-
-It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
-below:
-
-**Example style**
-
-```html
-
-```
-
-**Example definition**
-
-```mermaid-example
-block-beta
-    A-->B[AAABBB]
-    B-->D
-    class A cssClass
-```
-
-### Default class
-
-If a class is named default it will be assigned to all classes without specific class definitions.
+  A
+  style A fill:#f9f,stroke:#333;
 
-```
-    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
 ```
 
-## Basic support for fontawesome
+### Tips for Complex Diagram Structures
 
-It is possible to add icons from fontawesome.
+Managing complexity in Mermaid diagrams involves planning and employing best practices.
 
-The icons are accessed via the syntax fa:#icon class name#.
+#### Modular Design
 
-```mermaid-example
-flowchart TD
-    B["fab:fa-twitter for peace"]
-    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner)
-    B-->E(A fa:fa-camera-retro perhaps?)
-```
+Break down complex diagrams into smaller, more manageable components. This approach not only makes the diagram easier to understand but also simplifies the creation and maintenance process.
 
-Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+#### Consistent Styling
 
-## Graph declarations with spaces between vertices and link and without semicolon
+Use classes to maintain consistent styling across similar elements. This not only saves time but also ensures a cohesive and professional appearance.
 
-- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
+#### Comments and Documentation
 
-- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
+Use comments within the Mermaid syntax to document the purpose of various parts of the diagram. This practice is invaluable for maintaining clarity, especially when working in teams or returning to a diagram after some time.
 
-Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
-
-```mermaid-example
-block-beta
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
-## Configuration
-
-### Renderer
-
-The layout of the diagram is done with the renderer. The default renderer is dagre.
-
-Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
-
-The _elk_ renderer is an experimenal feature.
-You can change the renderer to elk by adding this directive:
-
-```
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-```
-
-```note
-Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
-```
-
-### Width
-
-It is possible to adjust the width of the rendered flowchart.
-
-This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
-mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
-
-```javascript
-mermaid.flowchartConfig = {
-    width: 100%
-}
-```
+With these troubleshooting tips and best practices, you can effectively manage and resolve common issues in Mermaid block diagrams. The final section, 'Conclusion', will summarize the key points covered in this documentation and invite user feedback for continuous improvement.
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index aa5c1edeb..a4686be57 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -204,8 +204,6 @@ export const createCssStyles = (
     cssStyles += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
   }
 
-  console.log('expr check', !isEmpty(classDefs), classDefs);
-
   // classDefs defined in the diagram text
   if (!isEmpty(classDefs) && CLASSDEF_DIAGRAMS.includes(graphType)) {
     const htmlLabels = config.htmlLabels || config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?

From 1230da7fc79e27476c5dd403a786ea86e79b5ab4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 18 Jan 2024 15:31:14 +0100
Subject: [PATCH 083/193] #3358 Some cleanup

---
 cypress/integration/rendering/block.spec.ts   |  60 ++++++++-
 cypress/platform/knsv2.html                   |   9 +-
 .../mermaid/src/diagrams/block/blockDB.ts     |   9 +-
 .../mermaid/src/diagrams/block/blockTypes.ts  |   1 +
 .../src/diagrams/block/parser/block.jison     |   2 +-
 .../src/diagrams/block/parser/block.spec.ts   | 115 ++++++++++++------
 .../src/diagrams/block/renderHelpers.ts       |   9 +-
 packages/mermaid/src/utils.ts                 |   1 +
 8 files changed, 149 insertions(+), 57 deletions(-)

diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
index 7856f534d..51d78444f 100644
--- a/cypress/integration/rendering/block.spec.ts
+++ b/cypress/integration/rendering/block.spec.ts
@@ -313,7 +313,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL23: sizing - it should be possieble to make a composite block wider', () => {
+  it('BL23: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
       `block-beta
       block:2
@@ -325,13 +325,61 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL23: sizing - it should be possieble to make a composite block wider', () => {
+  it('BL24: block in the middle with space on each side', () => {
     imgSnapshotTest(
       `block-beta
-      block:2
-        A
-      end
-      B
+        columns 3
+        space
+        middle["In the middle"]
+        space
+      `,
+      {}
+    );
+  });
+  it('BL25: space and an edge', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 5
+    A space B
+    A --x B
+      `,
+      {}
+    );
+  });
+  it('BL26: block sizes for regular blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 3
+    a["A wide one"] b:2 c:2 d
+      `,
+      {}
+    );
+  });
+  it('BL27: composite block with a set width - f should use the available space', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+  end
+  g
+      `,
+      {}
+    );
+  });
+  it('BL23: composite block with a set width - f and g should split the available space', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
       `,
       {}
     );
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index b2af1f5f9..67776fe1b 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,10 +65,9 @@
   
     
     block-beta
-        columns 3
-        block1["Block 1"]
-        blockArrow<["   "]>(right)
-        block2["Block 2"]
+columns 1
+    B["A wide one in the middle"]
+  style B fill:#f9F,stroke:#333,stroke-width:4px
     
    
     
     block-beta
@@ -96,7 +95,7 @@ block-beta
   end
   g
     
    
-    
    +    
     block-beta
   columns 3
   a:3
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 7e7bd7528..34d2b5d10 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -136,8 +136,11 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       continue;
     }
     if (block.type === 'applyStyles') {
-      addStyle2Node(block.id, block?.styles);
-      continue;
+      console.log('applyStyles', block.stylesStr);
+      if (block?.stylesStr) {
+        addStyle2Node(block.id, block?.stylesStr);
+        continue;
+      }
     }
     if (block.type === 'column-setting') {
       parent.columns = block.columns || -1;
@@ -289,7 +292,7 @@ export const generateId = () => {
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
-  log.debug('The document from parsing', JSON.stringify(block, null, 2));
+  console.log('The document from parsing', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
   // log.debug('abc95 The document after popuplation', JSON.stringify(rootBlock, null, 2));
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index d2fd8d122..7bbba93b8 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -59,6 +59,7 @@ export interface Block {
   css?: string;
   styleClass?: string;
   styles?: string[];
+  stylesStr?: string;
   w?: number;
 }
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 066b7be0f..751f8381b 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -288,7 +288,7 @@ cssClassStatement
 
 styleStatement
     : style STYLE_ENTITY_IDS STYLE_DEFINITION_DATA {
-        $$={ type: 'applyStyles', id: $2.trim(), styles: $3.trim() };
+        $$={ type: 'applyStyles', id: $2.trim(), stylesStr: $3.trim() };
         }
     ;
 
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 367edb842..3028a6c3c 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -4,6 +4,7 @@ import db from '../blockDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
 import { prepareTextForParsing } from '../blockUtils.js';
 import { setConfig } from '../../../config.js';
+import getStyles from '../../../../dist/diagrams/pie/styles';
 
 describe('Block diagram', function () {
   describe('when parsing an block diagram graph it should handle > ', function () {
@@ -88,12 +89,34 @@ describe('Block diagram', function () {
       expect(blocks[1].label).toBe('id2');
       expect(blocks[1].type).toBe('na');
     });
-    it('a diagram with multiple nodes with edges', async () => {
+    it('a diagram with multiple nodes with edges abc123', async () => {
       const str = `block-beta
           id1["first"]  -->   id2["second"]
       `;
 
       block.parse(str);
+      const blocks = db.getBlocks();
+      const edges = db.getEdges();
+      expect(blocks.length).toBe(2);
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('id1');
+      expect(edges[0].end).toBe('id2');
+      expect(edges[0].arrowTypeEnd).toBe('arrow_point');
+    });
+    it('a diagram with multiple nodes with edges abc123', async () => {
+      const str = `block-beta
+          id1["first"]  -- "a label" -->   id2["second"]
+      `;
+
+      block.parse(str);
+      const blocks = db.getBlocks();
+      const edges = db.getEdges();
+      expect(blocks.length).toBe(2);
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('id1');
+      expect(edges[0].end).toBe('id2');
+      expect(edges[0].arrowTypeEnd).toBe('arrow_point');
+      expect(edges[0].label).toBe('a label');
     });
     it('a diagram with column statements', async () => {
       const str = `block-beta
@@ -103,7 +126,8 @@ describe('Block diagram', function () {
 
       block.parse(str);
       expect(db.getColumns('root')).toBe(2);
-      // Todo: DB check that the we have one block and that the root block has one column
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
     });
     it('a diagram withput column statements', async () => {
       const str = `block-beta
@@ -112,7 +136,8 @@ describe('Block diagram', function () {
 
       block.parse(str);
       expect(db.getColumns('root')).toBe(-1);
-      // Todo: DB check that the we have one block and that the root block has one column
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
     });
     it('a diagram with auto column statements', async () => {
       const str = `block-beta
@@ -122,7 +147,8 @@ describe('Block diagram', function () {
 
       block.parse(str);
       expect(db.getColumns('root')).toBe(-1);
-      // Todo: DB check that the we have one block and that the root block has one column
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
     });
 
     it('blocks next to each other', async () => {
@@ -134,7 +160,9 @@ describe('Block diagram', function () {
 
       block.parse(str);
 
-      // Todo: DB check that the we have two blocks and that the root block has two columns
+      const blocks = db.getBlocks();
+      expect(db.getColumns('root')).toBe(2);
+      expect(blocks.length).toBe(2);
     });
 
     it('blocks on top of each other', async () => {
@@ -146,7 +174,9 @@ describe('Block diagram', function () {
 
       block.parse(str);
 
-      // Todo: DB check that the we have two blocks and that the root block has one column
+      const blocks = db.getBlocks();
+      expect(db.getColumns('root')).toBe(1);
+      expect(blocks.length).toBe(2);
     });
 
     it('compound blocks 2', async () => {
@@ -287,12 +317,13 @@ describe('Block diagram', function () {
       expect(block2.type).toBe('square');
       expect(blockArrow.type).toBe('block_arrow');
       console.log('blockArrow', blockArrow);
+      expect(blockArrow.directions).toContain('right');
     });
-    it.skip('Arrow blocks with multiple points', async () => {
+    it('Arrow blocks with multiple points', async () => {
       const str = `block-beta
         columns 1
         A
-        blockArrow(1,3)
+        blockArrow<["   "]>(up, down)
         block
           columns 3
             B
@@ -301,6 +332,16 @@ describe('Block diagram', function () {
         end`;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(3);
+
+      const blockArrow = blocks[1];
+      expect(blockArrow.type).toBe('block_arrow');
+      console.log('blockArrow', blockArrow);
+      expect(blockArrow.directions).toContain('up');
+      expect(blockArrow.directions).toContain('down');
+      expect(blockArrow.directions).not.toContain('right');
     });
     it('blocks with different widths', async () => {
       const str = `block-beta
@@ -315,7 +356,7 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(2);
       const one = blocks[0];
       const two = blocks[1];
-      console.log('Obe and Two', one, two);
+      console.log('One and Two', one, two);
       expect(two.w).toBe(2);
     });
     it('empty blocks', async () => {
@@ -323,46 +364,52 @@ describe('Block diagram', function () {
         columns 3
         space
         middle["In the middle"]
+        space
         `;
 
       block.parse(str);
+
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(3);
+      const sp1 = blocks[0];
+      const middle = blocks[1];
+      const sp2 = blocks[2];
+      expect(sp1.type).toBe('space');
+      expect(sp2.type).toBe('space');
+      expect(middle.label).toBe('In the middle');
     });
-    it.skip('classDef statements applied to a block', async () => {
+    it('classDef statements applied to a block', async () => {
       const str = `block-beta
         classDef black color:#ffffff, fill:#000000;
 
-        mc["Memcache"]:::black
+        mc["Memcache"]
+        class mc black
         `;
 
       block.parse(str);
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
+      const mc = blocks[0];
+      expect(mc.classes).toContain('black');
+      const classes = db.getClasses();
+      console.log(classes);
+      const black = classes.black;
+      expect(black.id).toBe('black');
+      expect(black.styles[0]).toEqual('color:#ffffff');
     });
-    it.skip('classDef statements applied to a block with a width', async () => {
+    it('style statements applied to a block', async () => {
       const str = `block-beta
-        classDef black color:#ffffff, fill:#000000;
-        columns 2
-        mc["Memcache"]:2::black
+columns 1
+    B["A wide one in the middle"]
+  style B fill:#f9F,stroke:#333,stroke-width:4px
         `;
-      const apa = 'apan hopar i träden';
-      block.parse(str);
-    });
-
-    it.skip('classDef statements', async () => {
-      const str = `block-beta
-        classDef black color:#ffffff, fill:#000000;
-
-        block DataServices["Data Services"]
-          columns H
-          block Relational
-            mssql["Microsoft SQL
    Server"]
-          end
-          block Tabular
-            columns 3
-            gds["Google Data Store"]:1
-            mc["Memcache"]:2:::black
-          end
-        end`;
 
       block.parse(str);
+      const blocks = db.getBlocks();
+      expect(blocks.length).toBe(1);
+      const B = blocks[0];
+      console.log(B);
+      expect(B.styles).toContain('fill:#f9F');
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 757bbadb9..34f249315 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -98,7 +98,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
       _shape = 'rect';
   }
 
-  const styles = getStylesFromArray(vertex?.styles || '');
+  const styles = getStylesFromArray(vertex?.styles || []);
   // const styles = getStylesFromArray([]);
 
   // Use vertex id as text in the box if no text is provided by the graph definition
@@ -117,13 +117,6 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     style: styles.style, // + 'fill:#9f9;stroke:#333;stroke-width:4px;',
     id: vertex.id,
     directions: vertex.directions,
-    // link: vertex.link,
-    // linkTarget: vertex.linkTarget,
-    // tooltip: diagObj.db.getTooltip(vertex.id) || '',
-    // domId: diagObj.db.lookUpDomId(vertex.id),
-    // haveCallback: vertex.haveCallback,
-    // width: vertex.type === 'group' ? 500 : undefined,
-    // dir: vertex.dir,
     width: bounds.width,
     height: bounds.height,
     x: bounds.x,
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index e48b49fcd..6ea93aaa2 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -492,6 +492,7 @@ export function getStylesFromArray(arr: string[]): { style: string; labelStyle:
       }
     }
   }
+  console.log(arr, style, labelStyle);
 
   return { style: style, labelStyle: labelStyle };
 }

From 8e147206d8a02daa68b0d42d3b60f6e92d71d8ae Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 18 Jan 2024 15:44:16 +0100
Subject: [PATCH 084/193] #3358 Removed logging som type fixes

---
 .../mermaid/src/diagrams/block/blockDB.ts     | 58 ++++---------------
 packages/mermaid/src/diagrams/block/layout.ts |  9 +--
 .../src/diagrams/block/parser/block.spec.ts   |  6 --
 3 files changed, 13 insertions(+), 60 deletions(-)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 34d2b5d10..2ba5e80a0 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -31,8 +31,8 @@ let classes = {} as Record;
  * Called when the parser comes across a (style) class definition
  * @example classDef my-style fill:#f96;
  *
- * @param {string} id - the id of this (style) class
- * @param  {string | null} styleAttributes - the string with 1 or more style attributes (each separated by a comma)
+ * @param id - the id of this (style) class
+ * @param styleAttributes - the string with 1 or more style attributes (each separated by a comma)
  */
 export const addStyleClass = function (id: string, styleAttributes = '') {
   // create a new style class object with this id
@@ -60,11 +60,11 @@ export const addStyleClass = function (id: string, styleAttributes = '') {
  * Called when the parser comes across a (style) class definition
  * @example classDef my-style fill:#f96;
  *
- * @param {string} id - the id of this (style) class
- * @param  {string | null} styles - the string with 1 or more style attributes (each separated by a comma)
+ * @param id - the id of this (style) class
+ * @param styles - the string with 1 or more style attributes (each separated by a comma)
  */
 export const addStyle2Node = function (id: string, styles = '') {
-  let foundBlock = blockDatabase[id];
+  const foundBlock = blockDatabase[id];
   if (styles !== undefined && styles !== null) {
     foundBlock.styles = styles.split(STYLECLASS_SEP);
   }
@@ -75,8 +75,8 @@ export const addStyle2Node = function (id: string, styles = '') {
  * If the state isn't already in the list of known states, add it.
  * Might be called by parser when a style class or CSS class should be applied to a state
  *
- * @param {string | string[]} itemIds The id or a list of ids of the item(s) to apply the css class to
- * @param {string} cssClassName CSS class name
+ * @param itemIds - The id or a list of ids of the item(s) to apply the css class to
+ * @param cssClassName - CSS class name
  */
 export const setCssClass = function (itemIds: string, cssClassName: string) {
   itemIds.split(',').forEach(function (id: string) {
@@ -93,36 +93,6 @@ export const setCssClass = function (itemIds: string, cssClassName: string) {
   });
 };
 
-// /**
-//  * Add a style to a state with the given id.
-//  * @example style stateId fill:#f9f,stroke:#333,stroke-width:4px
-//  *   where 'style' is the keyword
-//  *   stateId is the id of a state
-//  *   the rest of the string is the styleText (all of the attributes to be applied to the state)
-//  *
-//  * @param itemId The id of item to apply the style to
-//  * @param styleText - the text of the attributes for the style
-//  */
-// export const setStyle = function (itemId, styleText) {
-//   const item = getState(itemId);
-//   if (item !== undefined) {
-//     item.textStyles.push(styleText);
-//   }
-// };
-
-// /**
-//  * Add a text style to a state with the given id
-//  *
-//  * @param itemId The id of item to apply the css class to
-//  * @param cssClassName CSS class name
-//  */
-// export const setTextStyle = function (itemId, cssClassName) {
-//   const item = getState(itemId);
-//   if (item !== undefined) {
-//     item.textStyles.push(cssClassName);
-//   }
-// };
-
 const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
   const blockList = _blockList.flat();
   const children = [];
@@ -135,12 +105,9 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       setCssClass(block.id, block?.styleClass || '');
       continue;
     }
-    if (block.type === 'applyStyles') {
-      console.log('applyStyles', block.stylesStr);
-      if (block?.stylesStr) {
-        addStyle2Node(block.id, block?.stylesStr);
-        continue;
-      }
+    if (block.type === 'applyStyles' && block?.stylesStr) {
+      addStyle2Node(block.id, block?.stylesStr);
+      continue;
     }
     if (block.type === 'column-setting') {
       parent.columns = block.columns || -1;
@@ -292,10 +259,8 @@ export const generateId = () => {
 
 type ISetHierarchy = (block: Block[]) => void;
 const setHierarchy = (block: Block[]): void => {
-  console.log('The document from parsing', JSON.stringify(block, null, 2));
   rootBlock.children = block;
   populateBlockDatabase(block, rootBlock);
-  // log.debug('abc95 The document after popuplation', JSON.stringify(rootBlock, null, 2));
   blocks = rootBlock.children;
 };
 
@@ -335,7 +300,7 @@ const getBlocksFlat: IGetBlocks = () => {
   return result;
 };
 /**
- * Returns the the hirarchy of blocks
+ * Returns the the hierarchy of blocks
  * @returns
  */
 const getBlocks: IGetBlocks = () => {
@@ -363,7 +328,6 @@ const getLogger: IGetLogger = () => console;
 type IGetClasses = () => Record;
 /**
  * Return all of the style classes
- * @returns {{} | any | classes}
  */
 export const getClasses = function () {
   return classes;
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index e06d6ff10..b5dc63b34 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -68,12 +68,7 @@ const getMaxChildSize = (block: Block) => {
   return { width: maxWidth, height: maxHeight };
 };
 
-function setBlockSizes(
-  block: Block,
-  db: BlockDB,
-  sieblingWidth: number = 0,
-  sieblingHeight: number = 0
-) {
+function setBlockSizes(block: Block, db: BlockDB, sieblingWidth = 0, sieblingHeight = 0) {
   log.debug(
     'setBlockSizes abc95 (start)',
     block.id,
@@ -118,7 +113,7 @@ function setBlockSizes(
           maxHeight,
           child.size
         );
-        child.size.width = maxWidth * child.w + padding * (child.w - 1);
+        child.size.width = maxWidth * (child.w || 1) + padding * ((child.w || 1) - 1);
         child.size.height = maxHeight;
         child.size.x = 0;
         child.size.y = 0;
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 3028a6c3c..aec14cc08 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -4,7 +4,6 @@ import db from '../blockDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
 import { prepareTextForParsing } from '../blockUtils.js';
 import { setConfig } from '../../../config.js';
-import getStyles from '../../../../dist/diagrams/pie/styles';
 
 describe('Block diagram', function () {
   describe('when parsing an block diagram graph it should handle > ', function () {
@@ -316,7 +315,6 @@ describe('Block diagram', function () {
       expect(block2.label).toBe('Block 2');
       expect(block2.type).toBe('square');
       expect(blockArrow.type).toBe('block_arrow');
-      console.log('blockArrow', blockArrow);
       expect(blockArrow.directions).toContain('right');
     });
     it('Arrow blocks with multiple points', async () => {
@@ -338,7 +336,6 @@ describe('Block diagram', function () {
 
       const blockArrow = blocks[1];
       expect(blockArrow.type).toBe('block_arrow');
-      console.log('blockArrow', blockArrow);
       expect(blockArrow.directions).toContain('up');
       expect(blockArrow.directions).toContain('down');
       expect(blockArrow.directions).not.toContain('right');
@@ -356,7 +353,6 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(2);
       const one = blocks[0];
       const two = blocks[1];
-      console.log('One and Two', one, two);
       expect(two.w).toBe(2);
     });
     it('empty blocks', async () => {
@@ -392,7 +388,6 @@ describe('Block diagram', function () {
       const mc = blocks[0];
       expect(mc.classes).toContain('black');
       const classes = db.getClasses();
-      console.log(classes);
       const black = classes.black;
       expect(black.id).toBe('black');
       expect(black.styles[0]).toEqual('color:#ffffff');
@@ -408,7 +403,6 @@ columns 1
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(1);
       const B = blocks[0];
-      console.log(B);
       expect(B.styles).toContain('fill:#f9F');
     });
   });

From 173ba2ecf5db8c9e29bf84e98496bcc77be95adb Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 18 Jan 2024 15:48:40 +0100
Subject: [PATCH 085/193] Final console.log removed

---
 packages/mermaid/src/utils.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 6ea93aaa2..35d01a60e 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -492,8 +492,6 @@ export function getStylesFromArray(arr: string[]): { style: string; labelStyle:
       }
     }
   }
-  console.log(arr, style, labelStyle);
-
   return { style: style, labelStyle: labelStyle };
 }
 

From 5553cbbb228ba499568dd2a08c34917b2f53ff72 Mon Sep 17 00:00:00 2001
From: knsv 
Date: Thu, 18 Jan 2024 16:10:57 +0000
Subject: [PATCH 086/193] Update docs

---
 docs/config/setup/modules/defaultConfig.md |   2 +-
 docs/config/setup/modules/mermaidAPI.md    |   2 +-
 docs/intro/examples.md                     | 247 ---------------------
 3 files changed, 2 insertions(+), 249 deletions(-)
 delete mode 100644 docs/intro/examples.md

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 7a9b891c4..3d94055be 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
+[defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)
 
 ---
 
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index a1992c225..9516d2b46 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)
+[mermaidAPI.ts:607](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L607)
 
 ## Functions
 
diff --git a/docs/intro/examples.md b/docs/intro/examples.md
deleted file mode 100644
index a7089ea9d..000000000
--- a/docs/intro/examples.md
+++ /dev/null
@@ -1,247 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md).
-
-## Diagram Types
-
-### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
-
-```mermaid-example
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-### [Sequence diagram](../syntax/sequenceDiagram.md)
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts 
    prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts 
    prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-### [Gantt diagram](../syntax/gantt.md)
-
-```mermaid-example
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-```
-
-```mermaid
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-```
-
-### [Class diagram](../syntax/classDiagram.md)
-
-```mermaid-example
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-```
-
-```mermaid
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-```
-
-### [Git graph](../syntax/gitgraph.md)
-
-```mermaid-example
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-```
-
-```mermaid
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-```
-
-### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
-
-```mermaid-example
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-```mermaid
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-### [User Journey Diagram](../syntax/userJourney.md)
-
-```mermaid-example
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
-
-```mermaid
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
-
-### [Quadrant Chart](../syntax/quadrantChart.md)
-
-```mermaid-example
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-```mermaid
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-### [XY Chart](../syntax/xyChart.md)
-
-```mermaid-example
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-```
-
-```mermaid
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-```

From d07576676055064960c407d5eb135a7184ae6df2 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 18 Jan 2024 18:03:37 +0100
Subject: [PATCH 087/193] #3358 Doc updates after viewing the page

---
 cypress/platform/knsv2.html                   |   9 +-
 docs/config/setup/modules/defaultConfig.md    |   2 +-
 docs/config/setup/modules/mermaidAPI.md       |   2 +-
 docs/intro/examples.md                        | 247 ------------------
 docs/syntax/block.md                          | 232 ++++++++--------
 .../flowchart/swimlane/swimlaneRenderer.js    |   3 +
 packages/mermaid/src/docs/syntax/block.md     | 121 +++++----
 pnpm-lock.yaml                                | 199 ++++++--------
 ....timestamp-1696335530501-05072b5e79635.mjs |  10 +
 9 files changed, 297 insertions(+), 528 deletions(-)
 delete mode 100644 docs/intro/examples.md

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 1127a492f..f8722e580 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,9 +65,12 @@
   
     
     block-beta
-columns 1
-    B["A wide one in the middle"]
-  style B fill:#f9F,stroke:#333,stroke-width:4px
+  A space:2 B
+  A-- "X" -->B
+    
    
+    
    +flowchart LR
+  A-- "X" -->B
     
    
     
     block-beta
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 7a9b891c4..3d94055be 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
+[defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)
 
 ---
 
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index a1992c225..9516d2b46 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)
+[mermaidAPI.ts:607](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L607)
 
 ## Functions
 
diff --git a/docs/intro/examples.md b/docs/intro/examples.md
deleted file mode 100644
index a7089ea9d..000000000
--- a/docs/intro/examples.md
+++ /dev/null
@@ -1,247 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md).
-
-## Diagram Types
-
-### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
-
-```mermaid-example
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-### [Sequence diagram](../syntax/sequenceDiagram.md)
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts 
    prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts 
    prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-### [Gantt diagram](../syntax/gantt.md)
-
-```mermaid-example
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-```
-
-```mermaid
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-```
-
-### [Class diagram](../syntax/classDiagram.md)
-
-```mermaid-example
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-```
-
-```mermaid
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-```
-
-### [Git graph](../syntax/gitgraph.md)
-
-```mermaid-example
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-```
-
-```mermaid
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-```
-
-### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
-
-```mermaid-example
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-```mermaid
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-### [User Journey Diagram](../syntax/userJourney.md)
-
-```mermaid-example
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
-
-```mermaid
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
-
-### [Quadrant Chart](../syntax/quadrantChart.md)
-
-```mermaid-example
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-```mermaid
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-### [XY Chart](../syntax/xyChart.md)
-
-```mermaid-example
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-```
-
-```mermaid
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-```
diff --git a/docs/syntax/block.md b/docs/syntax/block.md
index 29c5d7674..c33f31301 100644
--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -6,7 +6,41 @@
 
 # Block Diagrams Documentation
 
-## 1. Introduction to Block Diagrams
+## Introduction to Block Diagrams
+
+```mermaid-example
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["   "]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+```
+
+```mermaid
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["   "]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+```
 
 ### Definition and Purpose
 
@@ -14,6 +48,8 @@ Block diagrams are an intuitive and efficient way to represent complex systems,
 
 The primary purpose of block diagrams is to provide a high-level view of a system, allowing for easy understanding and analysis without delving into the intricate details of each component. This makes them particularly useful for simplifying complex systems and for explaining the overall structure and interaction of components within a system.
 
+Many people use mermaid flowcharts for this purpose. A side-effect of this is that the automatic layout sometimes move shapes to positions that the diagram maker does not want. Block diagrams use a different approach. In this diagram we give the author full control over where the shapes are positioned.
+
 ### General Use Cases
 
 Block diagrams have a wide range of applications across various industries and disciplines. Some of the key use cases include:
@@ -181,12 +217,12 @@ To create a block with round edges, which can be used to represent a softer or m
 
 ```mermaid-example
 block-beta
-    id1(This is the text in the box)
+    id1("This is the text in the box")
 ```
 
 ```mermaid
 block-beta
-    id1(This is the text in the box)
+    id1("This is the text in the box")
 ```
 
 #### Example - Stadium-Shaped Block
@@ -195,12 +231,12 @@ A stadium-shaped block, resembling an elongated circle, can be used for componen
 
 ```mermaid-example
 block-beta
-    id1([This is the text in the box])
+    id1(["This is the text in the box"])
 ```
 
 ```mermaid
 block-beta
-    id1([This is the text in the box])
+    id1(["This is the text in the box"])
 ```
 
 #### Example - Subroutine Shape
@@ -209,12 +245,12 @@ For representing subroutines or contained processes, a block with double vertica
 
 ```mermaid-example
 block-beta
-    id1[[This is the text in the box]]
+    id1[["This is the text in the box"]]
 ```
 
 ```mermaid
 block-beta
-    id1[[This is the text in the box]]
+    id1[["This is the text in the box"]]
 ```
 
 #### Example - Cylindrical Shape
@@ -223,12 +259,12 @@ The cylindrical shape is ideal for representing databases or storage components:
 
 ```mermaid-example
 block-beta
-    id1[(Database)]
+    id1[("Database")]
 ```
 
 ```mermaid
 block-beta
-    id1[(Database)]
+    id1[("Database")]
 ```
 
 #### Example - Circle Shape
@@ -237,12 +273,12 @@ A circle can be used for centralized or pivotal components:
 
 ```mermaid-example
 block-beta
-    id1((This is the text in the circle))
+    id1(("This is the text in the circle"))
 ```
 
 ```mermaid
 block-beta
-    id1((This is the text in the circle))
+    id1(("This is the text in the circle"))
 ```
 
 #### Example - Asymmetric, Rhombus, and Hexagon Shapes
@@ -253,36 +289,36 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
 
 ```mermaid-example
 block-beta
-  id1>This is the text in the box]
+  id1>"This is the text in the box"]
 ```
 
 ```mermaid
 block-beta
-  id1>This is the text in the box]
+  id1>"This is the text in the box"]
 ```
 
 **Rhombus**
 
 ```mermaid-example
 block-beta
-    id1{This is the text in the box}
+    id1{"This is the text in the box"}
 ```
 
 ```mermaid
 block-beta
-    id1{This is the text in the box}
+    id1{"This is the text in the box"}
 ```
 
 **Hexagon**
 
 ```mermaid-example
 block-beta
-    id1{{This is the text in the box}}
+    id1{{"This is the text in the box"}}
 ```
 
 ```mermaid
 block-beta
-    id1{{This is the text in the box}}
+    id1{{"This is the text in the box"}}
 ```
 
 #### Example - Parallelogram and Trapezoid Shapes
@@ -291,18 +327,18 @@ Parallelogram and trapezoid shapes are perfect for inputs/outputs and transition
 
 ```mermaid-example
 flowchart TD
-  id1[/This is the text in the box/]
-  id2[\This is the text in the box\]
-  A[/Christmas\]
-  B[\Go shopping/]
+  id1[/"This is the text in the box"/]
+  id2[\"This is the text in the box"\]
+  A[/"Christmas"\]
+  B[\"Go shopping"/]
 ```
 
 ```mermaid
 flowchart TD
-  id1[/This is the text in the box/]
-  id2[\This is the text in the box\]
-  A[/Christmas\]
-  B[\Go shopping/]
+  id1[/"This is the text in the box"/]
+  id2[\"This is the text in the box"\]
+  A[/"Christmas"\]
+  B[\"Go shopping"/]
 ```
 
 #### Example - Double Circle
@@ -311,12 +347,12 @@ For highlighting critical or high-priority components, a double circle can be ef
 
 ```mermaid-example
 flowchart TD
-    id1(((This is the text in the circle)))
+    id1((("This is the text in the circle")))
 ```
 
 ```mermaid
 flowchart TD
-    id1(((This is the text in the circle)))
+    id1((("This is the text in the circle")))
 ```
 
 ### Block Arrows and Space Blocks
@@ -387,11 +423,13 @@ A simple link with an arrow can be created to show direction or flow from one bl
 
 ```mermaid-example
 block-beta
+  A space B
   A-->B
 ```
 
 ```mermaid
 block-beta
+  A space B
   A-->B
 ```
 
@@ -402,11 +440,13 @@ For connections that are less direct or to represent a different type of relatio
 
 ```mermaid-example
 block-beta
+  A space B
   A --- B
 ```
 
 ```mermaid
 block-beta
+  A space B
   A --- B
 ```
 
@@ -421,12 +461,14 @@ To add text to a link, the syntax includes the text within the link definition:
 
 ```mermaid-example
 block-beta
-  A-- This is the text! ---B
+  A space:2 B
+  A-- "X" -->B
 ```
 
 ```mermaid
 block-beta
-  A-- This is the text! ---B
+  A space:2 B
+  A-- "X" -->B
 ```
 
 This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
@@ -440,26 +482,16 @@ A dotted link can be used to represent a weaker or less formal relationship:
 
 ```mermaid-example
 block-beta
+  A space:2 B
   A-.->B
 ```
 
 ```mermaid
 block-beta
+  A space:2 B
   A-.->B
 ```
 
-For a more pronounced connection, a thick link can be used:
-
-```mermaid-example
-block-beta
-  A==>B
-```
-
-```mermaid
-block-beta
-  A==>B
-```
-
 Example - Edges and Styles:
 
 ```mermaid-example
@@ -476,7 +508,7 @@ columns 1
   D
   ID --> D
   C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
+  style B fill:#939,stroke:#333,stroke-width:4px
 ```
 
 ```mermaid
@@ -493,7 +525,7 @@ columns 1
   D
   ID --> D
   C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
+  style B fill:#939,stroke:#333,stroke-width:4px
 ```
 
 ## 6. Styling and Customization
@@ -510,15 +542,17 @@ To apply custom styles to a block, you can use the `style` keyword followed by t
 
 ```mermaid-example
 block-beta
-  id1(Start)-->id2(Stop)
-  style id1 fill:#f9f,stroke:#333,stroke-width:4px
+  id1 space id2
+  id1("Start")-->id2("Stop")
+  style id1 fill:#636,stroke:#333,stroke-width:4px
   style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
 ```mermaid
 block-beta
-  id1(Start)-->id2(Stop)
-  style id1 fill:#f9f,stroke:#333,stroke-width:4px
+  id1 space id2
+  id1("Start")-->id2("Stop")
+  style id1 fill:#636,stroke:#333,stroke-width:4px
   style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
@@ -540,24 +574,28 @@ Illustrating a simple software system architecture with interconnected component
 
 ```mermaid-example
 block-beta
-  columns 2
-  Frontend Backend
-  Frontend-->Backend
-  Database[(Database)]
-  Backend-->Database
-  class Frontend,Backend fill:#f96,stroke:#333;
-  class Database fill:#9f9,stroke:#333;
+  columns 3
+  Frontend blockArrowId6<["  "]>(right) Backend
+  space:2 down<["  "]>(down)
+  Disk left<["  "]>(left) Database[("Database")]
+
+  classDef front fill:#696,stroke:#333;
+  classDef back fill:#969,stroke:#333;
+  class Frontend front
+  class Backend,Database back
 ```
 
 ```mermaid
 block-beta
-  columns 2
-  Frontend Backend
-  Frontend-->Backend
-  Database[(Database)]
-  Backend-->Database
-  class Frontend,Backend fill:#f96,stroke:#333;
-  class Database fill:#9f9,stroke:#333;
+  columns 3
+  Frontend blockArrowId6<["  "]>(right) Backend
+  space:2 down<["  "]>(down)
+  Disk left<["  "]>(left) Database[("Database")]
+
+  classDef front fill:#696,stroke:#333;
+  classDef back fill:#969,stroke:#333;
+  class Frontend front
+  class Backend,Database back
 ```
 
 This example shows a basic architecture with a frontend, backend, and database. The blocks are styled to differentiate between types of components.
@@ -568,41 +606,35 @@ Representing a business process flow with decision points and multiple stages:
 
 ```mermaid-example
 block-beta
-  Start{Start}
-  Decision{Make Decision}
-  Process1[Process A]
-  Process2[Process B]
-  End((End))
-  Start --> Decision
-  Decision -- Yes --> Process1
-  Decision -- No --> Process2
-  Process1 --> End
-  Process2 --> End
-  style Start fill:#f9f;
-  style End fill:#bbf;
+  columns 3
+  Start(("Start")) space:2
+  down<["  "]>(down) space:2
+  Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
+  downAgain<["No"]>(down) space r3<["Done"]>(down)
+  Process2["Process B"] r2<["Done"]>(right) End(("End"))
+
+  style Start fill:#969;
+  style End fill:#696;
 
 ```
 
 ```mermaid
 block-beta
-  Start{Start}
-  Decision{Make Decision}
-  Process1[Process A]
-  Process2[Process B]
-  End((End))
-  Start --> Decision
-  Decision -- Yes --> Process1
-  Decision -- No --> Process2
-  Process1 --> End
-  Process2 --> End
-  style Start fill:#f9f;
-  style End fill:#bbf;
+  columns 3
+  Start(("Start")) space:2
+  down<["  "]>(down) space:2
+  Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
+  downAgain<["No"]>(down) space r3<["Done"]>(down)
+  Process2["Process B"] r2<["Done"]>(right) End(("End"))
+
+  style Start fill:#969;
+  style End fill:#696;
 
 ```
 
 This diagram depicts a simple decision-making process with two possible paths leading to an endpoint, demonstrating the use of different shapes and directional arrows.
 
-### Real works Application Scenarios
+### Real world Scenarios
 
 Block diagrams can be employed in a variety of real-world scenarios. Here are a few examples:
 
@@ -614,22 +646,6 @@ These practical examples and scenarios underscore the utility of Mermaid block d
 
 The next section, 'Troubleshooting and Common Issues', will provide insights into resolving common challenges encountered when working with Mermaid block diagrams, ensuring a smooth diagramming experience.
 
-```mermaid-example
-
-```
-
-```mermaid
-
-```
-
-```mermaid-example
-
-```
-
-```mermaid
-
-```
-
 ## 8. Troubleshooting and Common Issues
 
 Working with Mermaid block diagrams can sometimes present challenges, especially as the complexity of the diagrams increases. This section aims to provide guidance on resolving common issues and offers tips for managing more intricate diagram structures.
@@ -646,15 +662,17 @@ A common mistake is incorrect linking syntax, which can lead to unexpected resul
       A - B
 
 **Correction**:
-Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection:
+Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
 
 ```mermaid-example
 block-beta
+  A space B
   A --> B
 ```
 
 ```mermaid
 block-beta
+  A space B
   A --> B
 ```
 
@@ -665,13 +683,13 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
 ```mermaid-example
   block-beta
     A
-    style A fill#f9f;
+    style A fill#969;
 ```
 
 ```mermaid
   block-beta
     A
-    style A fill#f9f;
+    style A fill#969;
 ```
 
 **Correction:**
@@ -680,14 +698,14 @@ Correct the syntax by ensuring proper separation of style properties with commas
 ```mermaid-example
 block-beta
   A
-  style A fill:#f9f,stroke:#333;
+  style A fill:#969,stroke:#333;
 
 ```
 
 ```mermaid
 block-beta
   A
-  style A fill:#f9f,stroke:#333;
+  style A fill:#969,stroke:#333;
 
 ```
 
diff --git a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
index c49c30f4e..a34ba02dd 100644
--- a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
@@ -27,7 +27,10 @@ export const setConf = function (cnf) {
  * @param element
  * @param graph
  * @param layout
+ * @param vert
  * @param elem
+ * @param g
+ * @param id
  * @param conf
  */
 async function swimlaneRender(layout, vert, elem, g, id, conf) {
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index b1067d5b3..9186d68c6 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -5,7 +5,24 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 # Block Diagrams Documentation
 
-## 1. Introduction to Block Diagrams
+## Introduction to Block Diagrams
+
+```mermaid
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["   "]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+```
 
 ### Definition and Purpose
 
@@ -13,6 +30,8 @@ Block diagrams are an intuitive and efficient way to represent complex systems,
 
 The primary purpose of block diagrams is to provide a high-level view of a system, allowing for easy understanding and analysis without delving into the intricate details of each component. This makes them particularly useful for simplifying complex systems and for explaining the overall structure and interaction of components within a system.
 
+Many people use mermaid flowcharts for this purpose. A side-effect of this is that the automatic layout sometimes move shapes to positions that the diagram maker does not want. Block diagrams use a different approach. In this diagram we give the author full control over where the shapes are positioned.
+
 ### General Use Cases
 
 Block diagrams have a wide range of applications across various industries and disciplines. Some of the key use cases include:
@@ -145,7 +164,7 @@ To create a block with round edges, which can be used to represent a softer or m
 
 ```mermaid-example
 block-beta
-    id1(This is the text in the box)
+    id1("This is the text in the box")
 ```
 
 #### Example - Stadium-Shaped Block
@@ -154,7 +173,7 @@ A stadium-shaped block, resembling an elongated circle, can be used for componen
 
 ```mermaid-example
 block-beta
-    id1([This is the text in the box])
+    id1(["This is the text in the box"])
 ```
 
 #### Example - Subroutine Shape
@@ -163,7 +182,7 @@ For representing subroutines or contained processes, a block with double vertica
 
 ```mermaid-example
 block-beta
-    id1[[This is the text in the box]]
+    id1[["This is the text in the box"]]
 ```
 
 #### Example - Cylindrical Shape
@@ -172,7 +191,7 @@ The cylindrical shape is ideal for representing databases or storage components:
 
 ```mermaid-example
 block-beta
-    id1[(Database)]
+    id1[("Database")]
 ```
 
 #### Example - Circle Shape
@@ -181,7 +200,7 @@ A circle can be used for centralized or pivotal components:
 
 ```mermaid-example
 block-beta
-    id1((This is the text in the circle))
+    id1(("This is the text in the circle"))
 ```
 
 #### Example - Asymmetric, Rhombus, and Hexagon Shapes
@@ -192,21 +211,21 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
 
 ```mermaid-example
 block-beta
-  id1>This is the text in the box]
+  id1>"This is the text in the box"]
 ```
 
 **Rhombus**
 
 ```mermaid-example
 block-beta
-    id1{This is the text in the box}
+    id1{"This is the text in the box"}
 ```
 
 **Hexagon**
 
 ```mermaid-example
 block-beta
-    id1{{This is the text in the box}}
+    id1{{"This is the text in the box"}}
 ```
 
 #### Example - Parallelogram and Trapezoid Shapes
@@ -215,10 +234,10 @@ Parallelogram and trapezoid shapes are perfect for inputs/outputs and transition
 
 ```mermaid-example
 flowchart TD
-  id1[/This is the text in the box/]
-  id2[\This is the text in the box\]
-  A[/Christmas\]
-  B[\Go shopping/]
+  id1[/"This is the text in the box"/]
+  id2[\"This is the text in the box"\]
+  A[/"Christmas"\]
+  B[\"Go shopping"/]
 ```
 
 #### Example - Double Circle
@@ -227,7 +246,7 @@ For highlighting critical or high-priority components, a double circle can be ef
 
 ```mermaid-example
 flowchart TD
-    id1(((This is the text in the circle)))
+    id1((("This is the text in the circle")))
 ```
 
 ### Block Arrows and Space Blocks
@@ -281,6 +300,7 @@ A simple link with an arrow can be created to show direction or flow from one bl
 
 ```mermaid-example
 block-beta
+  A space B
   A-->B
 ```
 
@@ -291,6 +311,7 @@ For connections that are less direct or to represent a different type of relatio
 
 ```mermaid-example
 block-beta
+  A space B
   A --- B
 ```
 
@@ -305,7 +326,8 @@ To add text to a link, the syntax includes the text within the link definition:
 
 ```mermaid-example
 block-beta
-  A-- This is the text! ---B
+  A space:2 B
+  A-- "X" -->B
 ```
 
 This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
@@ -319,16 +341,10 @@ A dotted link can be used to represent a weaker or less formal relationship:
 
 ```mermaid-example
 block-beta
+  A space:2 B
   A-.->B
 ```
 
-For a more pronounced connection, a thick link can be used:
-
-```mermaid-example
-block-beta
-  A==>B
-```
-
 Example - Edges and Styles:
 
 ```mermaid-example
@@ -345,7 +361,7 @@ columns 1
   D
   ID --> D
   C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
+  style B fill:#939,stroke:#333,stroke-width:4px
 ```
 
 ## 6. Styling and Customization
@@ -362,8 +378,9 @@ To apply custom styles to a block, you can use the `style` keyword followed by t
 
 ```mermaid-example
 block-beta
-  id1(Start)-->id2(Stop)
-  style id1 fill:#f9f,stroke:#333,stroke-width:4px
+  id1 space id2
+  id1("Start")-->id2("Stop")
+  style id1 fill:#636,stroke:#333,stroke-width:4px
   style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
@@ -385,13 +402,15 @@ Illustrating a simple software system architecture with interconnected component
 
 ```mermaid
 block-beta
-  columns 2
-  Frontend Backend
-  Frontend-->Backend
-  Database[(Database)]
-  Backend-->Database
-  class Frontend,Backend fill:#f96,stroke:#333;
-  class Database fill:#9f9,stroke:#333;
+  columns 3
+  Frontend blockArrowId6<["  "]>(right) Backend
+  space:2 down<["  "]>(down)
+  Disk left<["  "]>(left) Database[("Database")]
+
+  classDef front fill:#696,stroke:#333;
+  classDef back fill:#969,stroke:#333;
+  class Frontend front
+  class Backend,Database back
 ```
 
 This example shows a basic architecture with a frontend, backend, and database. The blocks are styled to differentiate between types of components.
@@ -402,24 +421,21 @@ Representing a business process flow with decision points and multiple stages:
 
 ```mermaid-example
 block-beta
-  Start{Start}
-  Decision{Make Decision}
-  Process1[Process A]
-  Process2[Process B]
-  End((End))
-  Start --> Decision
-  Decision -- Yes --> Process1
-  Decision -- No --> Process2
-  Process1 --> End
-  Process2 --> End
-  style Start fill:#f9f;
-  style End fill:#bbf;
+  columns 3
+  Start(("Start")) space:2
+  down<["  "]>(down) space:2
+  Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
+  downAgain<["No"]>(down) space r3<["Done"]>(down)
+  Process2["Process B"] r2<["Done"]>(right) End(("End"))
+
+  style Start fill:#969;
+  style End fill:#696;
 
 ```
 
 This diagram depicts a simple decision-making process with two possible paths leading to an endpoint, demonstrating the use of different shapes and directional arrows.
 
-### Real works Application Scenarios
+### Real world Scenarios
 
 Block diagrams can be employed in a variety of real-world scenarios. Here are a few examples:
 
@@ -431,14 +447,6 @@ These practical examples and scenarios underscore the utility of Mermaid block d
 
 The next section, 'Troubleshooting and Common Issues', will provide insights into resolving common challenges encountered when working with Mermaid block diagrams, ensuring a smooth diagramming experience.
 
-```mermaid-example
-
-```
-
-```mermaid-example
-
-```
-
 ## 8. Troubleshooting and Common Issues
 
 Working with Mermaid block diagrams can sometimes present challenges, especially as the complexity of the diagrams increases. This section aims to provide guidance on resolving common issues and offers tips for managing more intricate diagram structures.
@@ -457,10 +465,11 @@ block-beta
 ```
 
 **Correction**:
-Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection:
+Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
 
 ```mermaid-example
 block-beta
+  A space B
   A --> B
 ```
 
@@ -471,7 +480,7 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
 ```mermaid-example
   block-beta
     A
-    style A fill#f9f;
+    style A fill#969;
 ```
 
 **Correction:**
@@ -480,7 +489,7 @@ Correct the syntax by ensuring proper separation of style properties with commas
 ```mermaid-example
 block-beta
   A
-  style A fill:#f9f,stroke:#333;
+  style A fill:#969,stroke:#333;
 
 ```
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6f1897f6..e39424af0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -374,7 +374,7 @@ importers:
         version: 4.1.2
       vitepress:
         specifier: ^1.0.0-alpha.72
-        version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
+        version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
         version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8)
@@ -420,7 +420,7 @@ importers:
     dependencies:
       '@zenuml/core':
         specifier: ^3.0.6
-        version: 3.0.6(ts-node@10.9.1)
+        version: 3.0.6(ts-node@10.9.1)(typescript@5.1.6)
     devDependencies:
       mermaid:
         specifier: workspace:^
@@ -481,6 +481,61 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.1.0(vue@3.3.4)
+      jiti:
+        specifier: ^1.18.2
+        version: 1.18.2
+      mermaid:
+        specifier: workspace:^
+        version: link:../..
+      vue:
+        specifier: ^3.3
+        version: 3.3.4
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.16
+        version: 1.1.16
+      '@unocss/reset':
+        specifier: ^0.58.0
+        version: 0.58.0
+      '@vite-pwa/vitepress':
+        specifier: ^0.3.0
+        version: 0.3.0(vite-plugin-pwa@0.17.0)
+      '@vitejs/plugin-vue':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@4.5.0)(vue@3.3.4)
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.2.12
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.0
+      unocss:
+        specifier: ^0.58.0
+        version: 0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
+      unplugin-vue-components:
+        specifier: ^0.26.0
+        version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
+      vite:
+        specifier: ^4.4.12
+        version: 4.5.0(@types/node@18.17.5)
+      vite-plugin-pwa:
+        specifier: ^0.17.0
+        version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
+      vitepress:
+        specifier: 1.0.0-rc.31
+        version: 1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+      workbox-window:
+        specifier: ^7.0.0
+        version: 7.0.0
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -1372,7 +1427,6 @@ packages:
   /@babel/helper-string-parser@7.23.4:
     resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
@@ -1455,7 +1509,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.23.5
-    dev: true
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.23.5):
     resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
@@ -2547,7 +2600,6 @@ packages:
       '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
 
   /@bcherny/json-schema-ref-parser@9.0.9:
     resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==}
@@ -4397,21 +4449,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils@5.0.5(rollup@2.79.1):
-    resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.1
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 2.79.1
-    dev: true
-
   /@rollup/pluginutils@5.1.0(rollup@2.79.1):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -5199,10 +5236,6 @@ packages:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
 
-  /@types/web-bluetooth@0.0.17:
-    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
-    dev: true
-
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: true
@@ -5791,15 +5824,15 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.5.0)(vue@3.3.4):
-    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
+  /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.8):
+    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.0.0
+      vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.4
+      vue: 3.3.8(typescript@5.0.4)
     dev: true
 
   /@vitejs/plugin-vue@4.5.0(vite@5.0.2)(vue@3.3.8):
@@ -5887,7 +5920,7 @@ packages:
       pretty-format: 29.6.2
     dev: true
 
-  /@vue/compat@3.3.4(vue@3.3.4):
+  /@vue/compat@3.3.4(vue@3.3.8):
     resolution: {integrity: sha512-VwAsPqUqRJVxeLQPUC03Sa5d+T8UG2Qv4VItq74KmNvtQlRXICpa/sqq12BcyBB4Tz1U5paOEZxWCUoXkrZ9QQ==}
     peerDependencies:
       vue: 3.3.4
@@ -5895,7 +5928,7 @@ packages:
       '@babel/parser': 7.23.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-      vue: 3.3.4
+      vue: 3.3.8(typescript@5.1.6)
     dev: false
 
   /@vue/compiler-core@3.3.4:
@@ -5909,11 +5942,10 @@ packages:
   /@vue/compiler-core@3.3.8:
     resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.5
       '@vue/shared': 3.3.8
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
@@ -5926,12 +5958,11 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.3.8
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.5
       '@vue/compiler-core': 3.3.4
       '@vue/compiler-dom': 3.3.4
       '@vue/compiler-ssr': 3.3.4
@@ -5945,7 +5976,7 @@ packages:
   /@vue/compiler-sfc@3.3.8:
     resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.5
       '@vue/compiler-core': 3.3.8
       '@vue/compiler-dom': 3.3.8
       '@vue/compiler-ssr': 3.3.8
@@ -5955,7 +5986,6 @@ packages:
       magic-string: 0.30.5
       postcss: 8.4.31
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
@@ -5968,7 +5998,6 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.3.8
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -5994,7 +6023,6 @@ packages:
       '@vue/shared': 3.3.8
       estree-walker: 2.0.2
       magic-string: 0.30.5
-    dev: true
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
@@ -6005,7 +6033,6 @@ packages:
     resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
     dependencies:
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
@@ -6018,7 +6045,6 @@ packages:
     dependencies:
       '@vue/reactivity': 3.3.8
       '@vue/shared': 3.3.8
-    dev: true
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -6033,7 +6059,6 @@ packages:
       '@vue/runtime-core': 3.3.8
       '@vue/shared': 3.3.8
       csstype: 3.1.2
-    dev: true
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -6051,15 +6076,13 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.3.8
       '@vue/shared': 3.3.8
-      vue: 3.3.8(typescript@5.0.4)
-    dev: true
+      vue: 3.3.8(typescript@5.1.6)
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
   /@vue/shared@3.3.8:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
-    dev: true
 
   /@vueuse/core@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
@@ -6067,23 +6090,11 @@ packages:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 10.1.0
       '@vueuse/shared': 10.1.0(vue@3.3.4)
-      vue-demi: 0.14.5(vue@3.3.4)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
-  /@vueuse/core@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==}
-    dependencies:
-      '@types/web-bluetooth': 0.0.17
-      '@vueuse/metadata': 10.3.0
-      '@vueuse/shared': 10.3.0(vue@3.3.4)
       vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
+    dev: false
 
   /@vueuse/core@10.6.1(vue@3.3.8):
     resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
@@ -6151,31 +6162,18 @@ packages:
     resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==}
     dev: false
 
-  /@vueuse/metadata@10.3.0:
-    resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
-    dev: true
-
   /@vueuse/metadata@10.6.1:
     resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
     dev: true
 
   /@vueuse/shared@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
-    dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
       vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
+    dev: false
 
   /@vueuse/shared@10.6.1(vue@3.3.8):
     resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
@@ -6390,13 +6388,13 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@zenuml/core@3.0.6(ts-node@10.9.1):
+  /@zenuml/core@3.0.6(ts-node@10.9.1)(typescript@5.1.6):
     resolution: {integrity: sha512-azEBVrl+ClCPhII92TbzBUFcWhIjlOPdEHVzF6eZXs5Oy4JlrfldS5pAZBHCFL4riOBsjZ5sHHmQLQg9V07T4Q==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@types/assert': 1.5.6
       '@types/ramda': 0.28.25
-      '@vue/compat': 3.3.4(vue@3.3.4)
+      '@vue/compat': 3.3.4(vue@3.3.8)
       antlr4: 4.11.0
       color-string: 1.9.1
       dom-to-image-more: 2.16.0
@@ -6409,10 +6407,11 @@ packages:
       postcss: 8.4.27
       ramda: 0.28.0
       tailwindcss: 3.3.3(ts-node@10.9.1)
-      vue: 3.3.4
-      vuex: 4.1.0(vue@3.3.4)
+      vue: 3.3.8(typescript@5.1.6)
+      vuex: 4.1.0(vue@3.3.8)
     transitivePeerDependencies:
       - ts-node
+      - typescript
     dev: false
 
   /JSONSelect@0.4.0:
@@ -8085,7 +8084,7 @@ packages:
       cspell-glob: 6.31.1
       cspell-io: 6.31.1
       cspell-lib: 6.31.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       fast-json-stable-stringify: 2.1.0
       file-entry-cache: 6.0.1
       get-stdin: 8.0.0
@@ -9821,17 +9820,6 @@ packages:
       micromatch: 4.0.5
     dev: true
 
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: true
-
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -10489,7 +10477,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 4.0.0
@@ -16353,7 +16341,7 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.7.6
-      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       chokidar: 3.5.3
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.3.2
@@ -16685,25 +16673,25 @@ packages:
       flexsearch: 0.7.31
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
+      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4)
       vue: 3.3.8(typescript@5.0.4)
     dev: true
 
-  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
+  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4):
     resolution: {integrity: sha512-Ou7fNE/OVYLrKGQMHSTVG6AcNsdv7tm4ACrdhx93SPMzEDj8UgIb4RFa5CTTowaYf3jeDGi2EAJlzXVC+IE3dg==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1
       '@docsearch/js': 3.5.1(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.5.0)(vue@3.3.4)
+      '@vitejs/plugin-vue': 4.5.0(vite@4.5.0)(vue@3.3.8)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.3.0(vue@3.3.4)
+      '@vueuse/core': 10.6.1(vue@3.3.8)
       body-scroll-lock: 4.0.0-beta.0
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
       vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.4
+      vue: 3.3.8(typescript@5.0.4)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -16718,6 +16706,7 @@ packages:
       - stylus
       - sugarss
       - terser
+      - typescript
     dev: true
 
   /vitepress@1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
@@ -16877,21 +16866,6 @@ packages:
     resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
     dev: true
 
-  /vue-demi@0.14.5(vue@3.3.4):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.3.4
-    dev: false
-
   /vue-demi@0.14.6(vue@3.3.4):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
@@ -16905,7 +16879,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
-    dev: true
+    dev: false
 
   /vue-demi@0.14.6(vue@3.3.8):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
@@ -16961,15 +16935,14 @@ packages:
       '@vue/server-renderer': 3.3.8(vue@3.3.8)
       '@vue/shared': 3.3.8
       typescript: 5.1.6
-    dev: true
 
-  /vuex@4.1.0(vue@3.3.4):
+  /vuex@4.1.0(vue@3.3.8):
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.3.4
+      vue: 3.3.8(typescript@5.1.6)
     dev: false
 
   /w3c-hr-time@1.0.2:
diff --git a/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs b/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
index a08d96e7f..7896fdd2c 100644
--- a/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
+++ b/vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
@@ -16,6 +16,9 @@ var transformJison = (src) => {
 
 // .vite/jisonPlugin.ts
 var fileRegex = /\.(jison)$/;
+/**
+ *
+ */
 function jison2() {
   return {
     name: 'jison',
@@ -55,6 +58,10 @@ var MERMAID_CONFIG_DIAGRAM_KEYS = [
   'c4',
   'sankey',
 ];
+/**
+ *
+ * @param mermaidConfigSchema
+ */
 function generateDefaults(mermaidConfigSchema) {
   const ajv = new Ajv2019({
     useDefaults: true,
@@ -113,6 +120,9 @@ function generateDefaults(mermaidConfigSchema) {
   }
   return mermaidDefaultConfig;
 }
+/**
+ *
+ */
 function jsonSchemaPlugin() {
   return {
     name: 'json-schema-plugin',

From d96425d19e7dc4a493b0eaf45670949e3a26091d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 19 Jan 2024 14:57:45 +0100
Subject: [PATCH 088/193] #3358 Reviving arrow heads after merging develop

---
 cypress/platform/knsv2.html                        |  6 +++---
 packages/mermaid/src/dagre-wrapper/edges.js        |  6 +++---
 .../mermaid/src/diagrams/block/blockRenderer.ts    |  5 +++--
 .../mermaid/src/diagrams/block/renderHelpers.ts    | 14 +++++++++++---
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index f8722e580..22820680d 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,12 +65,12 @@
   
     
     block-beta
-  A space:2 B
-  A-- "X" -->B
+  a space:2 c
+  a-- "b" --> c
     
    
     
     flowchart LR
-  A-- "X" -->B
+  X-- "y" -->z
     
    
     
     block-beta
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index ef96a3269..36a4e2553 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -134,7 +134,7 @@ function setTerminalWidth(fo, value) {
 }
 
 export const positionEdgeLabel = (edge, paths) => {
-  log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
+  log.info('Moving label abc88 ', edge.id, edge.label, edgeLabels[edge.id], paths);
   let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
   if (edge.label) {
     const el = edgeLabels[edge.id];
@@ -152,7 +152,7 @@ export const positionEdgeLabel = (edge, paths) => {
         pos.x,
         ',',
         pos.y,
-        ') abc78'
+        ') abc88'
       );
       if (paths.updatedPath) {
         x = pos.x;
@@ -376,7 +376,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   let pointsHasChanged = false;
   const tail = graph.node(e.v);
   var head = graph.node(e.w);
-  log.info('abc88 InsertEdge (head & tail): ', e.v, head, ' --- ', e.w, tail);
+  log.info('abc88 InsertEdge (head & tail) fin: ', e.v, head, ' --- ', e.w, tail);
 
   if (head?.intersect && tail?.intersect) {
     points = points.slice(1, edge.points.length - 1);
diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
index c47671b88..31790de6e 100644
--- a/packages/mermaid/src/diagrams/block/blockRenderer.ts
+++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -58,7 +58,8 @@ export const draw = async function (
 
   // Add the marker definitions to the svg as marker tags
   // insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute);
-  insertMarkers(svg, markers, diagObj.type, true);
+  // insertMarkers(svg, markers, diagObj.type, true);
+  insertMarkers(svg, markers, diagObj.type, id);
 
   const bl = db.getBlocks();
   const blArr = db.getBlocksFlat();
@@ -69,7 +70,7 @@ export const draw = async function (
   const bounds = layout(db);
   // log.debug('Here be blocks', bl);
   await insertBlocks(nodes, bl, db);
-  await insertEdges(nodes, edges, blArr, db);
+  await insertEdges(nodes, edges, blArr, db, id);
 
   // log.debug('Here', bl);
 
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 588bca786..2215e9e3e 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -1,6 +1,6 @@
 import { getStylesFromArray } from '../../utils.js';
 import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
-import { insertEdge, insertEdgeLabel } from '../../dagre-wrapper/edges.js';
+import { insertEdge, insertEdgeLabel, positionEdgeLabel } from '../../dagre-wrapper/edges.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { getConfig } from '../../config.js';
 import type { ContainerElement } from 'd3';
@@ -185,7 +185,8 @@ export async function insertEdges(
   elem: ContainerElement,
   edges: Block[],
   blocks: Block[],
-  db: BlockDB
+  db: BlockDB,
+  id: string
 ) {
   const g = new graphlib.Graph({
     multigraph: true,
@@ -238,7 +239,8 @@ export async function insertEdges(
           },
           undefined,
           'block',
-          g
+          g,
+          id
         );
         if (edge.label) {
           await insertEdgeLabel(elem, {
@@ -250,6 +252,12 @@ export async function insertEdges(
             points,
             classes: 'edge-thickness-normal edge-pattern-solid flowchart-link LS-a1 LE-b1',
           });
+          await positionEdgeLabel(
+            { ...edge, x: points[1].x, y: points[1].y },
+            {
+              originalPath: points,
+            }
+          );
         }
       }
     }

From fe89b9510da2267e80f71028cf8fd5b705813e87 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 22 Jan 2024 14:14:54 +0100
Subject: [PATCH 089/193] #3358 Adjusting docs and a bug fix for nested blocks

---
 cypress/platform/knsv2.html                   | 41 +++++++-
 docs/syntax/block.md                          | 98 ++++++++-----------
 packages/mermaid/src/diagrams/block/layout.ts |  7 +-
 .../mermaid/src/docs/.vitepress/config.ts     | 11 ++-
 packages/mermaid/src/docs/syntax/block.md     | 55 ++++-------
 5 files changed, 110 insertions(+), 102 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 22820680d..8c6bf8a63 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,10 +65,47 @@
   
     
     block-beta
-  a space:2 c
-  a-- "b" --> c
+columns 3
+a:3
+block:e:3
+f
+end
+g
+
     
    
     
    +block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+    
    
+    
    +block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+    
    
+    
    +block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4
+
+    
    
+    
     flowchart LR
   X-- "y" -->z
     
    
diff --git a/docs/syntax/block.md b/docs/syntax/block.md
index c33f31301..638aa34b6 100644
--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -181,22 +181,22 @@ In diagrams with varying block sizes, Mermaid automatically adjusts the column w
 
 ```mermaid-example
 block-beta
-columns 3
-a:3
-block:e:3
-f
-end
-g
+  columns 3
+  a:3
+  block:e:3
+    f
+  end
+  g
 ```
 
 ```mermaid
 block-beta
-columns 3
-a:3
-block:e:3
-f
-end
-g
+  columns 3
+  a:3
+  block:e:3
+    f
+  end
+  g
 ```
 
 This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
@@ -326,7 +326,7 @@ block-beta
 Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
 
 ```mermaid-example
-flowchart TD
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -334,7 +334,7 @@ flowchart TD
 ```
 
 ```mermaid
-flowchart TD
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -346,12 +346,12 @@ flowchart TD
 For highlighting critical or high-priority components, a double circle can be effective:
 
 ```mermaid-example
-flowchart TD
+block-beta
     id1((("This is the text in the circle")))
 ```
 
 ```mermaid
-flowchart TD
+block-beta
     id1((("This is the text in the circle")))
 ```
 
@@ -389,6 +389,22 @@ block-beta
 
 Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
 
+```mermaid-example
+block-beta
+  columns 3
+  a space b
+  c   d   e
+```
+
+```mermaid
+block-beta
+  columns 3
+  a space b
+  c   d   e
+```
+
+or
+
 ```mermaid-example
 block-beta
   space:3
@@ -435,21 +451,6 @@ block-beta
 
 This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow.
 
-**Example - Open Link:**
-For connections that are less direct or to represent a different type of relationship, an open link (without an arrowhead) can be used:
-
-```mermaid-example
-block-beta
-  A space B
-  A --- B
-```
-
-```mermaid
-block-beta
-  A space B
-  A --- B
-```
-
 This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction.
 
 ### Text on Links
@@ -473,25 +474,6 @@ block-beta
 
 This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
 
-### Advanced Link Types
-
-Mermaid also supports various advanced link types, such as dotted lines, thick links, and different arrowheads, to represent different kinds of relationships or interactions.
-
-**Example - Dotted and Thick Links**
-A dotted link can be used to represent a weaker or less formal relationship:
-
-```mermaid-example
-block-beta
-  A space:2 B
-  A-.->B
-```
-
-```mermaid
-block-beta
-  A space:2 B
-  A-.->B
-```
-
 Example - Edges and Styles:
 
 ```mermaid-example
@@ -575,9 +557,9 @@ Illustrating a simple software system architecture with interconnected component
 ```mermaid-example
 block-beta
   columns 3
-  Frontend blockArrowId6<["  "]>(right) Backend
-  space:2 down<["  "]>(down)
-  Disk left<["  "]>(left) Database[("Database")]
+  Frontend blockArrowId6<[" "]>(right) Backend
+  space:2 down<[" "]>(down)
+  Disk left<[" "]>(left) Database[("Database")]
 
   classDef front fill:#696,stroke:#333;
   classDef back fill:#969,stroke:#333;
@@ -588,9 +570,9 @@ block-beta
 ```mermaid
 block-beta
   columns 3
-  Frontend blockArrowId6<["  "]>(right) Backend
-  space:2 down<["  "]>(down)
-  Disk left<["  "]>(left) Database[("Database")]
+  Frontend blockArrowId6<[" "]>(right) Backend
+  space:2 down<[" "]>(down)
+  Disk left<[" "]>(left) Database[("Database")]
 
   classDef front fill:#696,stroke:#333;
   classDef back fill:#969,stroke:#333;
@@ -608,7 +590,7 @@ Representing a business process flow with decision points and multiple stages:
 block-beta
   columns 3
   Start(("Start")) space:2
-  down<["  "]>(down) space:2
+  down<[" "]>(down) space:2
   Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
   downAgain<["No"]>(down) space r3<["Done"]>(down)
   Process2["Process B"] r2<["Done"]>(right) End(("End"))
@@ -622,7 +604,7 @@ block-beta
 block-beta
   columns 3
   Start(("Start")) space:2
-  down<["  "]>(down) space:2
+  down<[" "]>(down) space:2
   Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
   downAgain<["No"]>(down) space r3<["Done"]>(down)
   Process2["Process B"] r2<["Done"]>(right) End(("End"))
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index f3ecd0254..629d87083 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -198,10 +198,10 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth = 0, sieblingHei
       width = block?.size?.width || 0;
 
       // Grow children to fit
-      const num = block.children.length;
+      const num = columns > 0 ? Math.min(block.children.length, columns) : block.children.length;
       if (num > 0) {
         const childWidth = (width - num * padding - padding) / num;
-        // log.debug('abc95 (finale calc) width', block.id, width, block.size?.width, childWidth);
+        log.debug('abc95 (growing to fit) width', block.id, width, block.size?.width, childWidth);
         for (const child of block.children) {
           if (child.size) {
             child.size.width = childWidth;
@@ -264,7 +264,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
       const { px, py } = calculateBlockPosition(columns, columnPos);
       if (py != rowPos) {
         rowPos = py;
-        startingPosX = block?.size?.x || -padding;
+        startingPosX = block?.size?.x ? block?.size?.x + (-block?.size?.width / 2 || 0) : -padding;
+        log.debug('New row in layout for block', block.id, ' and child ', child.id, rowPos);
       }
       log.debug(
         'abc89 layout blocks (child) id:',
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index f5647e3c3..4a383b68d 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -147,13 +147,14 @@ function sidebarSyntax() {
         { text: 'Pie Chart', link: '/syntax/pie' },
         { text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
-        { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
+        { text: 'Gitgraph (Git) Diagram', link: '/syntax/gitgraph' },
         { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' },
-        { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
-        { text: 'Timeline 🔥', link: '/syntax/timeline' },
-        { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
-        { text: 'Sankey 🔥', link: '/syntax/sankey' },
+        { text: 'Mindmaps', link: '/syntax/mindmap' },
+        { text: 'Timeline', link: '/syntax/timeline' },
+        { text: 'Zenuml', link: '/syntax/zenuml' },
+        { text: 'Sankey', link: '/syntax/sankey' },
         { text: 'XYChart 🔥', link: '/syntax/xyChart' },
+        { text: 'Block Diagram 🔥', link: '/syntax/block' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index 9186d68c6..c80492a2f 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -138,12 +138,12 @@ In diagrams with varying block sizes, Mermaid automatically adjusts the column w
 
 ```mermaid-example
 block-beta
-columns 3
-a:3
-block:e:3
-f
-end
-g
+  columns 3
+  a:3
+  block:e:3
+    f
+  end
+  g
 ```
 
 This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
@@ -233,7 +233,7 @@ block-beta
 Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
 
 ```mermaid-example
-flowchart TD
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -245,7 +245,7 @@ flowchart TD
 For highlighting critical or high-priority components, a double circle can be effective:
 
 ```mermaid-example
-flowchart TD
+block-beta
     id1((("This is the text in the circle")))
 ```
 
@@ -272,6 +272,15 @@ block-beta
 
 Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
 
+```mermaid-example
+block-beta
+  columns 3
+  a space b
+  c   d   e
+```
+
+or
+
 ```mermaid-example
 block-beta
   space:3
@@ -306,15 +315,6 @@ block-beta
 
 This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow.
 
-**Example - Open Link:**
-For connections that are less direct or to represent a different type of relationship, an open link (without an arrowhead) can be used:
-
-```mermaid-example
-block-beta
-  A space B
-  A --- B
-```
-
 This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction.
 
 ### Text on Links
@@ -332,19 +332,6 @@ block-beta
 
 This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
 
-### Advanced Link Types
-
-Mermaid also supports various advanced link types, such as dotted lines, thick links, and different arrowheads, to represent different kinds of relationships or interactions.
-
-**Example - Dotted and Thick Links**
-A dotted link can be used to represent a weaker or less formal relationship:
-
-```mermaid-example
-block-beta
-  A space:2 B
-  A-.->B
-```
-
 Example - Edges and Styles:
 
 ```mermaid-example
@@ -403,9 +390,9 @@ Illustrating a simple software system architecture with interconnected component
 ```mermaid
 block-beta
   columns 3
-  Frontend blockArrowId6<["  "]>(right) Backend
-  space:2 down<["  "]>(down)
-  Disk left<["  "]>(left) Database[("Database")]
+  Frontend blockArrowId6<[" "]>(right) Backend
+  space:2 down<[" "]>(down)
+  Disk left<[" "]>(left) Database[("Database")]
 
   classDef front fill:#696,stroke:#333;
   classDef back fill:#969,stroke:#333;
@@ -423,7 +410,7 @@ Representing a business process flow with decision points and multiple stages:
 block-beta
   columns 3
   Start(("Start")) space:2
-  down<["  "]>(down) space:2
+  down<[" "]>(down) space:2
   Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
   downAgain<["No"]>(down) space r3<["Done"]>(down)
   Process2["Process B"] r2<["Done"]>(right) End(("End"))

From 1629a91a25a075cbb0e2ee1ddd06173843a6604a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 22 Jan 2024 14:52:02 +0100
Subject: [PATCH 090/193] Updated lockfile

---
 pnpm-lock.yaml | 752 +++++++++++++++++++++++++------------------------
 1 file changed, 385 insertions(+), 367 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d09113a2c..8daca235a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -519,7 +519,7 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.58.0
-        version: 0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
+        version: 0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0)
       unplugin-vue-components:
         specifier: ^0.26.0
         version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
@@ -531,7 +531,7 @@ importers:
         version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-rc.31
-        version: 1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+        version: 1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -1108,22 +1108,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /@babel/code-frame@7.22.10:
-    resolution: {integrity: sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.22.20
-      chalk: 2.4.2
-    dev: true
-
-  /@babel/code-frame@7.22.13:
-    resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.22.20
-      chalk: 2.4.2
-    dev: true
-
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
@@ -1137,29 +1121,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/core@7.22.10:
-    resolution: {integrity: sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.10
-      '@babel/generator': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.10
-      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
-      '@babel/helpers': 7.22.10
-      '@babel/parser': 7.23.5
-      '@babel/template': 7.22.5
-      '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.5
-      convert-source-map: 1.9.0
-      debug: 4.3.4(supports-color@8.1.1)
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/core@7.23.5:
     resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==}
     engines: {node: '>=6.9.0'}
@@ -1170,7 +1131,7 @@ packages:
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
       '@babel/helpers': 7.23.5
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@babel/template': 7.22.15
       '@babel/traverse': 7.23.5
       '@babel/types': 7.23.5
@@ -1183,26 +1144,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator@7.22.10:
-    resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.5
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
-      jsesc: 2.5.2
-    dev: true
-
-  /@babel/generator@7.23.0:
-    resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.5
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
-      jsesc: 2.5.2
-    dev: true
-
   /@babel/generator@7.23.5:
     resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==}
     engines: {node: '>=6.9.0'}
@@ -1227,17 +1168,6 @@ packages:
       '@babel/types': 7.23.5
     dev: true
 
-  /@babel/helper-compilation-targets@7.22.10:
-    resolution: {integrity: sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.10
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: true
-
   /@babel/helper-compilation-targets@7.22.15:
     resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
     engines: {node: '>=6.9.0'}
@@ -1328,27 +1258,6 @@ packages:
       '@babel/types': 7.23.5
     dev: true
 
-  /@babel/helper-module-imports@7.22.5:
-    resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.5
-    dev: true
-
-  /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.10):
-    resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: true
-
   /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
@@ -1420,10 +1329,6 @@ packages:
       '@babel/types': 7.23.5
     dev: true
 
-  /@babel/helper-string-parser@7.22.5:
-    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
-    engines: {node: '>=6.9.0'}
-
   /@babel/helper-string-parser@7.23.4:
     resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
     engines: {node: '>=6.9.0'}
@@ -1437,11 +1342,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-validator-option@7.22.5:
-    resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@babel/helper-validator-option@7.23.5:
     resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
     engines: {node: '>=6.9.0'}
@@ -1456,17 +1356,6 @@ packages:
       '@babel/types': 7.23.5
     dev: true
 
-  /@babel/helpers@7.22.10:
-    resolution: {integrity: sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.5
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helpers@7.23.5:
     resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==}
     engines: {node: '>=6.9.0'}
@@ -1478,15 +1367,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/highlight@7.22.20:
-    resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: true
-
   /@babel/highlight@7.23.4:
     resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
     engines: {node: '>=6.9.0'}
@@ -1501,7 +1381,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.5
 
   /@babel/parser@7.23.5:
     resolution: {integrity: sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==}
@@ -1515,8 +1395,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.5
-    dev: true
+      '@babel/types': 7.23.0
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.23.5):
     resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
@@ -1549,15 +1428,6 @@ packages:
       '@babel/core': 7.23.5
     dev: true
 
-  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.22.10):
-    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.5):
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
@@ -1567,21 +1437,12 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.22.10):
-    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
@@ -1642,15 +1503,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.22.10):
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.5):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
@@ -1660,15 +1512,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     peerDependencies:
@@ -1678,16 +1521,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
     engines: {node: '>=6.9.0'}
@@ -1698,15 +1531,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.22.10):
-    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.5):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1716,15 +1540,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
@@ -1734,15 +1549,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.22.10):
-    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.5):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
@@ -1752,15 +1558,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
@@ -1770,15 +1567,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
@@ -1788,15 +1576,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
@@ -1816,16 +1595,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.5):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
     engines: {node: '>=6.9.0'}
@@ -1836,16 +1605,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==}
     engines: {node: '>=6.9.0'}
@@ -2544,37 +2303,10 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.23.5
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@babel/types': 7.23.5
     dev: true
 
-  /@babel/template@7.22.5:
-    resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.23.5
-      '@babel/types': 7.23.5
-    dev: true
-
-  /@babel/traverse@7.23.2:
-    resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.0
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.5
-      '@babel/types': 7.23.5
-      debug: 4.3.4(supports-color@8.1.1)
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/traverse@7.23.5:
     resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==}
     engines: {node: '>=6.9.0'}
@@ -2585,7 +2317,7 @@ packages:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@babel/types': 7.23.5
       debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
@@ -2597,7 +2329,7 @@ packages:
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
@@ -4236,7 +3968,7 @@ packages:
     resolution: {integrity: sha512-ZqCqEISr58Ce3U+buNFJYUktLJZOggfyvR+bZMaiV1e8B1SIvJbwZMrYz3gx/KAPn9EXmOmN+uB08yLCjWkQQg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@jest/types': 29.6.1
       '@jridgewell/trace-mapping': 0.3.19
       babel-plugin-istanbul: 6.1.1
@@ -4643,7 +4375,7 @@ packages:
   /@types/babel__core@7.20.1:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@babel/types': 7.23.5
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
@@ -4659,7 +4391,7 @@ packages:
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@babel/types': 7.23.5
     dev: true
 
@@ -4992,6 +4724,12 @@ packages:
       '@types/node': 18.17.5
     dev: true
 
+  /@types/hast@3.0.3:
+    resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /@types/http-cache-semantics@4.0.1:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
     dev: true
@@ -5077,6 +4815,12 @@ packages:
     dependencies:
       '@types/unist': 2.0.7
 
+  /@types/mdast@4.0.3:
+    resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /@types/mdurl@1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
     dev: true
@@ -5220,6 +4964,10 @@ packages:
   /@types/unist@2.0.7:
     resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
 
+  /@types/unist@3.0.2:
+    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
+    dev: true
+
   /@types/uuid@9.0.1:
     resolution: {integrity: sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==}
     dev: true
@@ -5579,6 +5327,10 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
+
   /@unocss/astro@0.58.0(rollup@2.79.1)(vite@4.5.0):
     resolution: {integrity: sha512-df+tEFO5eKXjQOwSWQhS9IdjD0sfLHLtn8U09sEKR2Nmh5CvpwyBxmvLQgOCilPou7ehmyKfsyGRLZg7IMp+Ew==}
     peerDependencies:
@@ -5812,7 +5564,7 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.8):
+  /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.4.15):
     resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -5820,7 +5572,18 @@ packages:
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.8(typescript@5.0.4)
+      vue: 3.4.15(typescript@5.0.4)
+    dev: true
+
+  /@vitejs/plugin-vue@4.5.0(vite@5.0.11)(vue@3.4.15):
+    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0 || ^5.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 5.0.11(@types/node@18.17.5)
+      vue: 3.4.15(typescript@5.1.6)
     dev: true
 
   /@vitejs/plugin-vue@5.0.3(vite@5.0.11)(vue@3.4.15):
@@ -5908,7 +5671,7 @@ packages:
       pretty-format: 29.6.2
     dev: true
 
-  /@vue/compat@3.3.4(vue@3.3.8):
+  /@vue/compat@3.3.4(vue@3.4.15):
     resolution: {integrity: sha512-VwAsPqUqRJVxeLQPUC03Sa5d+T8UG2Qv4VItq74KmNvtQlRXICpa/sqq12BcyBB4Tz1U5paOEZxWCUoXkrZ9QQ==}
     peerDependencies:
       vue: 3.3.4
@@ -5916,7 +5679,7 @@ packages:
       '@babel/parser': 7.23.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-      vue: 3.3.8(typescript@5.1.6)
+      vue: 3.4.15(typescript@5.1.6)
     dev: false
 
   /@vue/compiler-core@3.3.4:
@@ -5947,7 +5710,6 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.4.15
       '@vue/shared': 3.4.15
-    dev: true
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
@@ -5987,7 +5749,6 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.4.15
       '@vue/shared': 3.4.15
-    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -5999,7 +5760,7 @@ packages:
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.6
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
@@ -6014,7 +5775,6 @@ packages:
     resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
     dependencies:
       '@vue/shared': 3.4.15
-    dev: true
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
@@ -6027,7 +5787,6 @@ packages:
     dependencies:
       '@vue/reactivity': 3.4.15
       '@vue/shared': 3.4.15
-    dev: true
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -6042,7 +5801,6 @@ packages:
       '@vue/runtime-core': 3.4.15
       '@vue/shared': 3.4.15
       csstype: 3.1.3
-    dev: true
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -6061,14 +5819,12 @@ packages:
       '@vue/compiler-ssr': 3.4.15
       '@vue/shared': 3.4.15
       vue: 3.4.15(typescript@5.0.4)
-    dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
   /@vue/shared@3.4.15:
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
-    dev: true
 
   /@vueuse/core@10.1.0(vue@3.3.4):
     resolution: {integrity: sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==}
@@ -6082,18 +5838,6 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/core@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==}
-    dependencies:
-      '@types/web-bluetooth': 0.0.17
-      '@vueuse/metadata': 10.3.0
-      '@vueuse/shared': 10.3.0(vue@3.3.4)
-      vue-demi: 0.14.6(vue@3.3.4)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
-
   /@vueuse/core@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==}
     dependencies:
@@ -6160,10 +5904,6 @@ packages:
     resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==}
     dev: false
 
-  /@vueuse/metadata@10.3.0:
-    resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
-    dev: true
-
   /@vueuse/metadata@10.7.2:
     resolution: {integrity: sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==}
     dev: true
@@ -6177,15 +5917,6 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
-    dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
-
   /@vueuse/shared@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
     dependencies:
@@ -6405,7 +6136,7 @@ packages:
     dependencies:
       '@types/assert': 1.5.6
       '@types/ramda': 0.28.25
-      '@vue/compat': 3.3.4(vue@3.3.8)
+      '@vue/compat': 3.3.4(vue@3.4.15)
       antlr4: 4.11.0
       color-string: 1.9.1
       dom-to-image-more: 2.16.0
@@ -6418,8 +6149,8 @@ packages:
       postcss: 8.4.27
       ramda: 0.28.0
       tailwindcss: 3.3.3(ts-node@10.9.1)
-      vue: 3.3.8(typescript@5.1.6)
-      vuex: 4.1.0(vue@3.3.8)
+      vue: 3.4.15(typescript@5.1.6)
+      vuex: 4.1.0(vue@3.4.15)
     transitivePeerDependencies:
       - ts-node
       - typescript
@@ -6867,17 +6598,17 @@ packages:
       - debug
     dev: true
 
-  /babel-jest@29.6.2(@babel/core@7.22.10):
+  /babel-jest@29.6.2(@babel/core@7.23.5):
     resolution: {integrity: sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@jest/transform': 29.6.2
       '@types/babel__core': 7.20.1
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.5.0(@babel/core@7.22.10)
+      babel-preset-jest: 29.5.0(@babel/core@7.23.5)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -6957,35 +6688,35 @@ packages:
       - supports-color
     dev: true
 
-  /babel-preset-current-node-syntax@1.0.1(@babel/core@7.22.10):
+  /babel-preset-current-node-syntax@1.0.1(@babel/core@7.23.5):
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.22.10)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.10)
+      '@babel/core': 7.23.5
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.5)
     dev: true
 
-  /babel-preset-jest@29.5.0(@babel/core@7.22.10):
+  /babel-preset-jest@29.5.0(@babel/core@7.23.5):
     resolution: {integrity: sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       babel-plugin-jest-hoist: 29.5.0
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.22.10)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.5)
     dev: true
 
   /bail@2.0.2:
@@ -7359,10 +7090,18 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+    dev: true
+
   /character-entities-legacy@1.1.4:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
     dev: true
 
+  /character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+    dev: true
+
   /character-entities@1.2.4:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
     dev: true
@@ -7584,6 +7323,10 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
+  /comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+    dev: true
+
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
@@ -8146,7 +7889,6 @@ packages:
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-    dev: true
 
   /cuint@0.2.2:
     resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
@@ -8867,6 +8609,12 @@ packages:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
     dev: true
 
+  /devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: false
@@ -9060,7 +8808,6 @@ packages:
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /envinfo@7.10.0:
     resolution: {integrity: sha512-ZtUjZO6l5mwTHvc1L9+1q5p/R3wTopcfqMW8r5t8SJSKqeVI/LtajORwRFEKpEFuekjD0VBjwu1HMxL4UalIRw==}
@@ -10631,6 +10378,88 @@ packages:
       type-fest: 0.8.1
     dev: true
 
+  /hast-util-from-parse5@8.0.1:
+    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      devlop: 1.1.0
+      hastscript: 8.0.0
+      property-information: 6.4.0
+      vfile: 6.0.1
+      vfile-location: 5.0.2
+      web-namespaces: 2.0.1
+    dev: true
+
+  /hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+    dependencies:
+      '@types/hast': 3.0.3
+    dev: true
+
+  /hast-util-raw@9.0.2:
+    resolution: {integrity: sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      '@ungap/structured-clone': 1.2.0
+      hast-util-from-parse5: 8.0.1
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.1.0
+      parse5: 7.1.2
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+    dev: true
+
+  /hast-util-to-html@9.0.0:
+    resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/unist': 3.0.2
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-raw: 9.0.2
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.1.0
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.3
+      zwitch: 2.0.4
+    dev: true
+
+  /hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+    dev: true
+
+  /hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+    dependencies:
+      '@types/hast': 3.0.3
+    dev: true
+
+  /hastscript@8.0.0:
+    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
+    dependencies:
+      '@types/hast': 3.0.3
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+    dev: true
+
   /heap@0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
@@ -10678,6 +10507,10 @@ packages:
     resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
     dev: false
 
+  /html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+    dev: true
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -11289,7 +11122,7 @@ packages:
     resolution: {integrity: sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -11301,8 +11134,8 @@ packages:
     resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/parser': 7.23.0
+      '@babel/core': 7.23.5
+      '@babel/parser': 7.23.6
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -11456,11 +11289,11 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.23.5
       '@jest/test-sequencer': 29.6.2
       '@jest/types': 29.6.1
       '@types/node': 18.17.5
-      babel-jest: 29.6.2(@babel/core@7.22.10)
+      babel-jest: 29.6.2(@babel/core@7.23.5)
       chalk: 4.1.2
       ci-info: 3.8.0
       deepmerge: 4.3.1
@@ -11589,7 +11422,7 @@ packages:
     resolution: {integrity: sha512-vnIGYEjoPSuRqV8W9t+Wow95SDp6KPX2Uf7EoeG9G99J2OVh7OSwpS4B6J0NfpEIpfkBNHlBZpA2rblEuEFhZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.23.5
       '@jest/types': 29.6.1
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
@@ -11714,15 +11547,15 @@ packages:
     resolution: {integrity: sha512-1OdjqvqmRdGNvWXr/YZHuyhh5DeaLp1p/F8Tht/MrMw4Kr1Uu/j4lRG+iKl1DAqUJDWxtQBMk41Lnf/JETYBRA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/generator': 7.23.0
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10)
+      '@babel/core': 7.23.5
+      '@babel/generator': 7.23.5
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.5)
+      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.5)
       '@babel/types': 7.23.5
       '@jest/expect-utils': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.22.10)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.5)
       chalk: 4.1.2
       expect: 29.6.2
       graceful-fs: 4.2.11
@@ -12653,6 +12486,20 @@ packages:
       unist-util-is: 5.2.1
     dev: true
 
+  /mdast-util-to-hast@13.1.0:
+    resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==}
+    dependencies:
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.0
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+    dev: true
+
   /mdast-util-to-markdown@1.5.0:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
     dependencies:
@@ -12908,6 +12755,13 @@ packages:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  /micromark-util-character@2.0.1:
+    resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: true
+
   /micromark-util-chunked@1.1.0:
     resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
     dependencies:
@@ -12942,6 +12796,10 @@ packages:
   /micromark-util-encode@1.1.0:
     resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
 
+  /micromark-util-encode@2.0.0:
+    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+    dev: true
+
   /micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
@@ -12962,6 +12820,14 @@ packages:
       micromark-util-encode: 1.1.0
       micromark-util-symbol: 1.1.0
 
+  /micromark-util-sanitize-uri@2.0.0:
+    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+    dependencies:
+      micromark-util-character: 2.0.1
+      micromark-util-encode: 2.0.0
+      micromark-util-symbol: 2.0.0
+    dev: true
+
   /micromark-util-subtokenize@1.1.0:
     resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
     dependencies:
@@ -12973,9 +12839,17 @@ packages:
   /micromark-util-symbol@1.1.0:
     resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
 
+  /micromark-util-symbol@2.0.0:
+    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+    dev: true
+
   /micromark-util-types@1.1.0:
     resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
 
+  /micromark-util-types@2.0.0:
+    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+    dev: true
+
   /micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies:
@@ -13168,12 +13042,12 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: false
 
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -13648,7 +13522,7 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.22.10
+      '@babel/code-frame': 7.23.5
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -13982,7 +13856,7 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
@@ -13993,7 +13867,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact@10.16.0:
     resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==}
@@ -14075,6 +13948,10 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
+  /property-information@6.4.0:
+    resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
+    dev: true
+
   /proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -14911,12 +14788,24 @@ packages:
     resolution: {integrity: sha512-AFJu/vcNT21t0e6YrfadZ+9q86gvPum6iywRyt1OtIPjPFe25RQnYJyxHQPMLKCCWA992TPxmEmbNcOZCAJclw==}
     dev: true
 
+  /shikiji-transformers@0.7.6:
+    resolution: {integrity: sha512-yTp+7JMD/aXbV9ndn14eo9IK/UNt8iDsLNyqlOmCtcldlkqWE9T2YKAlOHOTVaeDfYWUWZa2EgSXb/CBfepBrw==}
+    dependencies:
+      shikiji: 0.7.6
+    dev: true
+
   /shikiji-transformers@0.9.19:
     resolution: {integrity: sha512-lGLI7Z8frQrIBbhZ74/eiJtxMoCQRbpaHEB+gcfvdIy+ZFaAtXncJGnc52932/UET+Y4GyKtwwC/vjWUCp+c/Q==}
     dependencies:
       shikiji: 0.9.19
     dev: true
 
+  /shikiji@0.7.6:
+    resolution: {integrity: sha512-KzEtvSGQtBvfwVIB70kOmIfl/5rz1LC8j+tvlHXsJKAIdONNQvG1at7ivUUq3xUctqgO6fsO3AGomUSh0F+wsQ==}
+    dependencies:
+      hast-util-to-html: 9.0.0
+    dev: true
+
   /shikiji@0.9.19:
     resolution: {integrity: sha512-Kw2NHWktdcdypCj1GkKpXH4o6Vxz8B8TykPlPuLHOGSV8VkhoCLcFOH4k19K4LXAQYRQmxg+0X/eM+m2sLhAkg==}
     dependencies:
@@ -15069,6 +14958,10 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+    dev: true
+
   /spawn-command@0.0.2-1:
     resolution: {integrity: sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==}
     dev: true
@@ -15307,6 +15200,13 @@ packages:
     dependencies:
       safe-buffer: 5.2.1
 
+  /stringify-entities@4.0.3:
+    resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==}
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+    dev: true
+
   /stringify-object@3.3.0:
     resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==}
     engines: {node: '>=4'}
@@ -15719,6 +15619,10 @@ packages:
     hasBin: true
     dev: true
 
+  /trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+    dev: true
+
   /trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
@@ -15989,7 +15893,6 @@ packages:
     resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
     engines: {node: '>=12.20'}
     hasBin: true
-    dev: true
 
   /typescript@5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
@@ -16090,6 +15993,18 @@ packages:
       '@types/unist': 2.0.7
     dev: true
 
+  /unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
+  /unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /unist-util-stringify-position@2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
@@ -16101,6 +16016,12 @@ packages:
     dependencies:
       '@types/unist': 2.0.7
 
+  /unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+    dependencies:
+      '@types/unist': 3.0.2
+    dev: true
+
   /unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
     dependencies:
@@ -16108,6 +16029,13 @@ packages:
       unist-util-is: 5.2.1
     dev: true
 
+  /unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+    dev: true
+
   /unist-util-visit@4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:
@@ -16116,6 +16044,14 @@ packages:
       unist-util-visit-parents: 5.1.3
     dev: true
 
+  /unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: true
+
   /universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
@@ -16308,6 +16244,13 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
+  /vfile-location@5.0.2:
+    resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
+    dependencies:
+      '@types/unist': 3.0.2
+      vfile: 6.0.1
+    dev: true
+
   /vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
     dependencies:
@@ -16315,6 +16258,13 @@ packages:
       unist-util-stringify-position: 3.0.3
     dev: true
 
+  /vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+    dev: true
+
   /vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
     dependencies:
@@ -16324,6 +16274,14 @@ packages:
       vfile-message: 3.1.4
     dev: true
 
+  /vfile@6.0.1:
+    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
+    dependencies:
+      '@types/unist': 3.0.2
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    dev: true
+
   /vite-node@0.34.0(@types/node@18.17.5):
     resolution: {integrity: sha512-rGZMvpb052rjUwJA/a17xMfOibzNF7byMdRSTcN2Lw8uxX08s5EfjWW5mBkm3MSFTPctMSVtT2yC+8ShrZbT5g==}
     engines: {node: '>=v14.18.0'}
@@ -16499,7 +16457,7 @@ packages:
       flexsearch: 0.7.31
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
+      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.0.4)
       vue: 3.4.15(typescript@5.0.4)
     dev: true
 
@@ -16509,15 +16467,15 @@ packages:
     dependencies:
       '@docsearch/css': 3.5.1
       '@docsearch/js': 3.5.1(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      '@vitejs/plugin-vue': 4.5.0(vite@4.5.0)(vue@3.3.8)
+      '@vitejs/plugin-vue': 4.5.0(vite@4.5.0)(vue@3.4.15)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.6.1(vue@3.3.8)
+      '@vueuse/core': 10.7.2(vue@3.4.15)
       body-scroll-lock: 4.0.0-beta.0
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
       vite: 4.5.0(@types/node@18.17.5)
-      vue: 3.3.8(typescript@5.0.4)
+      vue: 3.4.15(typescript@5.0.4)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -16535,6 +16493,62 @@ packages:
       - typescript
     dev: true
 
+  /vitepress@1.0.0-rc.31(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6):
+    resolution: {integrity: sha512-ikH9pIjOOAbyoYAGBVfTz8TzuXp+UoWaIRMU4bw/oiTg8R65SbAaGKY84xx6TuL+f4VqUJ8lhzW82YyxSLvstA==}
+    hasBin: true
+    peerDependencies:
+      markdown-it-mathjax3: ^4.3.2
+      postcss: ^8.4.31
+    peerDependenciesMeta:
+      markdown-it-mathjax3:
+        optional: true
+      postcss:
+        optional: true
+    dependencies:
+      '@docsearch/css': 3.5.2
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
+      '@types/markdown-it': 13.0.7
+      '@vitejs/plugin-vue': 4.5.0(vite@5.0.11)(vue@3.4.15)
+      '@vue/devtools-api': 6.5.1
+      '@vueuse/core': 10.7.2(vue@3.4.15)
+      '@vueuse/integrations': 10.7.2(focus-trap@7.5.4)(vue@3.4.15)
+      focus-trap: 7.5.4
+      mark.js: 8.11.1
+      minisearch: 6.3.0
+      mrmime: 1.0.1
+      postcss: 8.4.33
+      shikiji: 0.7.6
+      shikiji-transformers: 0.7.6
+      vite: 5.0.11(@types/node@18.17.5)
+      vue: 3.4.15(typescript@5.1.6)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - typescript
+      - universal-cookie
+    dev: true
+
   /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6):
     resolution: {integrity: sha512-EcgoRlAAp37WOxUOYv45oxyhLrcy3Upey+mKpqW3ldsg6Ol4trPndRBk2GO0QiSvEKlb9BMerk49D/bFICN6kg==}
     hasBin: true
@@ -16705,6 +16719,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
+    dev: false
 
   /vue-demi@0.14.6(vue@3.4.15):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
@@ -16718,7 +16733,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.15(typescript@5.1.6)
+      vue: 3.4.15(typescript@5.0.4)
     dev: true
 
   /vue@3.3.4:
@@ -16744,7 +16759,6 @@ packages:
       '@vue/server-renderer': 3.4.15(vue@3.4.15)
       '@vue/shared': 3.4.15
       typescript: 5.0.4
-    dev: true
 
   /vue@3.4.15(typescript@5.1.6):
     resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
@@ -16761,13 +16775,13 @@ packages:
       '@vue/shared': 3.4.15
       typescript: 5.1.6
 
-  /vuex@4.1.0(vue@3.3.8):
+  /vuex@4.1.0(vue@3.4.15):
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.3.8(typescript@5.1.6)
+      vue: 3.4.15(typescript@5.1.6)
     dev: false
 
   /w3c-hr-time@1.0.2:
@@ -16825,6 +16839,10 @@ packages:
       minimalistic-assert: 1.0.1
     dev: true
 
+  /web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+    dev: true
+
   /web-streams-polyfill@3.2.1:
     resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
     engines: {node: '>= 8'}

From 04f92e5b1c20d87757014eec7a84038719aa4d8e Mon Sep 17 00:00:00 2001
From: steph 
Date: Tue, 23 Jan 2024 21:58:37 -0800
Subject: [PATCH 091/193] remove holiday promo text

---
 docs/news/announcements.md                      | 13 -------------
 packages/mermaid/src/docs/news/announcements.md | 13 -------------
 2 files changed, 26 deletions(-)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index 9ca1aeb80..bc01e4fa6 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -14,19 +14,6 @@ Create flowchart nodes, connect them with edges, update shapes, change colors, a
 
 Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.
 
-## 🎉 Mermaid Chart is running a Holiday promotion
-
-### Use HOLIDAYS2023 to get a 14-day free trial and 25% off a Pro subscription
-
-With a Pro subscription, you get access to:
-
-- AI functionality
-- Team collaboration and multi-user editing
-- Unlimited diagrams and presentations
-- And more!
-
-Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023).
-
 ## 📖 Blog posts
 
 Visit our [Blog](./blog.md) to see the latest blog posts.
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index a2e93c172..44433d237 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -12,19 +12,6 @@ Create flowchart nodes, connect them with edges, update shapes, change colors, a
 
 Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.
 
-## 🎉 Mermaid Chart is running a Holiday promotion
-
-### Use HOLIDAYS2023 to get a 14-day free trial and 25% off a Pro subscription
-
-With a Pro subscription, you get access to:
-
-- AI functionality
-- Team collaboration and multi-user editing
-- Unlimited diagrams and presentations
-- And more!
-
-Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023).
-
 ## 📖 Blog posts
 
 Visit our [Blog](./blog.md) to see the latest blog posts.

From 62ae072918ac34088b5752ce72fcc72c12032175 Mon Sep 17 00:00:00 2001
From: steph 
Date: Tue, 23 Jan 2024 21:59:54 -0800
Subject: [PATCH 092/193] update discord invite link

---
 .github/ISSUE_TEMPLATE/config.yml                            | 2 +-
 README.md                                                    | 4 ++--
 README.zh-CN.md                                              | 4 ++--
 docs/ecosystem/integrations-create.md                        | 2 +-
 docs/intro/index.md                                          | 2 +-
 packages/mermaid/src/docs/.vitepress/components/HomePage.vue | 2 +-
 packages/mermaid/src/docs/.vitepress/config.ts               | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-create.md   | 2 +-
 packages/mermaid/src/docs/intro/index.md                     | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index fa15f39e1..6be6f3b5d 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -4,7 +4,7 @@ contact_links:
     url: https://github.com/mermaid-js/mermaid/discussions
     about: Ask the Community questions or share your own graphs in our discussions.
   - name: Discord
-    url: https://discord.gg/wwtabKgp8y
+    url: https://discord.gg/AgrbSrBer3
     about: Join our Community on Discord for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org
diff --git a/README.md b/README.md
index f1661e27f..c45907f3d 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 Live Editor!
 
    
 
    
- 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us
+ 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us
 
    
 
    
 简体中文
@@ -33,7 +33,7 @@ Try Live Editor previews of future releases: 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index c9d558393..4b3c61117 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -15,7 +15,7 @@ Mermaid
 实时编辑器!
 
    
 
    
- 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们
+ 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们
 
    
 
    
 English
@@ -34,7 +34,7 @@ Mermaid
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![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 Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 
diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md
index 7643c8898..f5e938d4d 100644
--- a/docs/ecosystem/integrations-create.md
+++ b/docs/ecosystem/integrations-create.md
@@ -24,7 +24,7 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/AgrbSrBer3) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 
diff --git a/docs/intro/index.md b/docs/intro/index.md
index d038cde53..2bc9c812d 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![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 Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index c493ee30a..5006ed022 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,7 +16,7 @@ import { teamMembers } from '../contributors';
           
    
             
             
    
-            Join the community
+            Join the community
             and get involved!
           
    
         
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 7ce9124a8..2fc0aa8b3 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -53,7 +53,7 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
       {
         icon: 'discord',
-        link: 'https://discord.gg/wwtabKgp8y',
+        link: 'https://discord.gg/AgrbSrBer3',
       },
       {
         icon: {
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md
index c47ba30da..d2565450b 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-create.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md
@@ -22,7 +22,7 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/AgrbSrBer3) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index bf5866755..6b16b5309 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -16,7 +16,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![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 Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 

From 8982e2f78ce94201c245b59619ad29df8a9f697f Mon Sep 17 00:00:00 2001
From: steph 
Date: Tue, 23 Jan 2024 22:02:24 -0800
Subject: [PATCH 093/193] add latest blog post

---
 docs/news/blog.md                      | 6 ++++++
 packages/mermaid/src/docs/news/blog.md | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/docs/news/blog.md b/docs/news/blog.md
index f8cde37d6..b0ebf5244 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/)
+
+23 January 2024 · 4 mins
+
+Read about how Ari Tal, a data scientist and founder of Leveling Up with XAI, utilizes Mermaid Chart for its easy-to-use flowchart creation capabilities to enhance his work in explainable AI (XAI).
+
 ## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
 
 20 December 2023 · 5 mins
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 75be59250..c986e1e58 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/)
+
+23 January 2024 · 4 mins
+
+Read about how Ari Tal, a data scientist and founder of Leveling Up with XAI, utilizes Mermaid Chart for its easy-to-use flowchart creation capabilities to enhance his work in explainable AI (XAI).
+
 ## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
 
 20 December 2023 · 5 mins

From cbf7e6a880dc2d6859638a0abf214f6977149259 Mon Sep 17 00:00:00 2001
From: steph 
Date: Tue, 23 Jan 2024 22:17:55 -0800
Subject: [PATCH 094/193] fix lint

---
 packages/mermaid/src/docs/syntax/flowchart.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 00242b407..90c41c26b 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -776,12 +776,13 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid supports Font Awesome if the CSS is included on the website. 
-Mermaid does not have any restriction on the version of Font Awesome that can be used. 
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
 
 Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
 
 Adding this snippet in the `` would add support for Font Awesome v6.5.1
+
 ```html
 
Date: Thu, 25 Jan 2024 17:16:09 -0800
Subject: [PATCH 095/193] add actor-top class to rectangle actor and man actor

---
 packages/mermaid/src/diagrams/sequence/svgDraw.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index f81147c10..953e5b083 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -356,6 +356,9 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   } else {
     rect.fill = '#eaeaea';
   }
+  if (!isFooter) {
+    cssclass += ' actor-top';
+  }
   rect.x = actor.x;
   rect.y = actorY;
   rect.width = actor.width;
@@ -420,7 +423,11 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
     actor.actorCnt = actorCnt;
   }
   const actElem = elem.append('g');
-  actElem.attr('class', 'actor-man');
+  let cssClass = 'actor-man';
+  if (!isFooter) {
+    cssClass += ' actor-top';
+  }
+  actElem.attr('class', cssClass);
 
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;

From b253cd65d436e40e6fd7f1301a3db2a27112ef5d Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Thu, 25 Jan 2024 13:32:03 -0800
Subject: [PATCH 096/193] update docs

---
 docs/syntax/sequenceDiagram.md                      | 5 +++--
 packages/mermaid/src/docs/syntax/sequenceDiagram.md | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 6e419fbc5..7557fef67 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -742,8 +742,9 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 | Class        | Description                                                 |
 | ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
+| actor        | Styles for the actor box.                                   |
+| actor-top    | Styles for the actor figure/ box at the top of the diagram. |
+| text.actor   | Styles for text in the actor box.                           |
 | actor-line   | The vertical line for an actor.                             |
 | messageLine0 | Styles for the solid message line.                          |
 | messageLine1 | Styles for the dotted message line.                         |
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 5e4731eed..ed3690620 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -520,8 +520,9 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 | Class        | Description                                                 |
 | ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
+| actor        | Styles for the actor box.                                   |
+| actor-top    | Styles for the actor figure/ box at the top of the diagram. |
+| text.actor   | Styles for text in the actor box.                           |
 | actor-line   | The vertical line for an actor.                             |
 | messageLine0 | Styles for the solid message line.                          |
 | messageLine1 | Styles for the dotted message line.                         |

From 70d9f50fc9fc3fc5d8e65f3be8812851799b7cf7 Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Thu, 25 Jan 2024 17:59:46 -0800
Subject: [PATCH 097/193] add const for class name

---
 packages/mermaid/src/diagrams/sequence/svgDraw.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 953e5b083..c31950160 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -5,6 +5,7 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
+const TOP_ACTOR_CLASS = 'actor-top';
 
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
@@ -357,7 +358,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
     rect.fill = '#eaeaea';
   }
   if (!isFooter) {
-    cssclass += ' actor-top';
+    cssclass += ` ${TOP_ACTOR_CLASS}`;
   }
   rect.x = actor.x;
   rect.y = actorY;
@@ -425,7 +426,7 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
   const actElem = elem.append('g');
   let cssClass = 'actor-man';
   if (!isFooter) {
-    cssClass += ' actor-top';
+    cssClass += ` ${TOP_ACTOR_CLASS}`;
   }
   actElem.attr('class', cssClass);
 

From 36c196e80b2cf386ba5a560de30848b7cbc0f104 Mon Sep 17 00:00:00 2001
From: Ronid1 
Date: Fri, 26 Jan 2024 14:07:12 -0800
Subject: [PATCH 098/193] add test

---
 .../integration/rendering/sequencediagram.spec.js   | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c..d5f352b3a 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -375,6 +375,19 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should have actor-top class on top actor box and symbol', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          actor Bob
+          Alice->>Bob: Hi Bob
+          Bob->>Alice: Hi Alice
+      `,
+        {}
+      );
+      cy.get('.actor').should('have.class', 'actor-top');
+      cy.get('.actor-man').should('have.class', 'actor-top');
+    });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
         `

From 52d276b010259b3dd7f4bd318df18a855fff8050 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sat, 27 Jan 2024 12:54:15 +0530
Subject: [PATCH 099/193] chore: Update katex

---
 packages/mermaid/package.json | 2 +-
 pnpm-lock.yaml                | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 0aa9ec492..e358863a8 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -71,7 +71,7 @@
     "dayjs": "^1.11.7",
     "dompurify": "^3.0.5",
     "elkjs": "^0.9.0",
-    "katex": "^0.15.2",
+    "katex": "^0.16.9",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ffe260632..cb415016b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -228,8 +228,8 @@ importers:
         specifier: ^0.9.0
         version: 0.9.1
       katex:
-        specifier: ^0.15.2
-        version: 0.15.6
+        specifier: ^0.16.9
+        version: 0.16.9
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
@@ -11978,8 +11978,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  /katex@0.15.6:
-    resolution: {integrity: sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==}
+  /katex@0.16.9:
+    resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==}
     hasBin: true
     dependencies:
       commander: 8.3.0

From 3b0c5c3e603860fc83ee87bc5ea4fa86094f05be Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sat, 27 Jan 2024 15:34:53 +0530
Subject: [PATCH 100/193] fix: Message width

---
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 37e3d2071..4534f8262 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1138,12 +1138,12 @@ async function getMaxMessageWidthPerActor(
 
       // If this is the first actor, and the message is left of it, no need to calculate the margin
       if (msg.placement === diagObj.db.PLACEMENT.LEFTOF && !actor.prevActor) {
-        return;
+        continue;
       }
 
       // If this is the last actor, and the message is right of it, no need to calculate the margin
       if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF && !actor.nextActor) {
-        return;
+        continue;
       }
 
       const isNote = msg.placement !== undefined;

From bc332e3124c32617841da6e28b1a79df15d8252c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sat, 27 Jan 2024 22:37:24 +0530
Subject: [PATCH 101/193] Fix boundMessage type

---
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 4534f8262..98a14aac7 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -311,7 +311,7 @@ const actorFont = (cnf) => {
  * @param msgModel - The model containing fields describing a message
  * @returns `lineStartY` - The Y coordinate at which the message line starts
  */
-async function boundMessage(_diagram, msgModel): number {
+async function boundMessage(_diagram, msgModel): Promise {
   bounds.bumpVerticalPos(10);
   const { startx, stopx, message } = msgModel;
   const lines = common.splitBreaks(message).length;

From 12dc3d8373259f2caaacb7cea7c300c2c7ee8599 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 15:52:37 +0530
Subject: [PATCH 102/193] Rename files to TS

---
 .../src/diagrams/mindmap/{mindmap.spec.js => mindmap.spec.ts}     | 0
 .../mermaid/src/diagrams/mindmap/{mindmapDb.js => mindmapDb.ts}   | 0
 .../diagrams/mindmap/{mindmapRenderer.js => mindmapRenderer.ts}   | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/mermaid/src/diagrams/mindmap/{mindmap.spec.js => mindmap.spec.ts} (100%)
 rename packages/mermaid/src/diagrams/mindmap/{mindmapDb.js => mindmapDb.ts} (100%)
 rename packages/mermaid/src/diagrams/mindmap/{mindmapRenderer.js => mindmapRenderer.ts} (100%)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
rename to packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/mindmap/mindmapDb.js
rename to packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
rename to packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts

From e046da10c2913938435c05370bc4729e69184726 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 15:55:22 +0530
Subject: [PATCH 103/193] Convert mindmap.spec.js

---
 .../src/diagrams/mindmap/mindmap.spec.ts      | 78 ++++++++-----------
 1 file changed, 33 insertions(+), 45 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
index c0b72060d..f6cc4304f 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
@@ -1,3 +1,4 @@
+// @ts-expect-error No types available for JISON
 import { parser as mindmap } from './parser/mindmap.jison';
 import * as mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
@@ -11,7 +12,7 @@ describe('when parsing a mindmap ', function () {
   });
   describe('hiearchy', function () {
     it('MMP-1 should handle a simple root definition abc122', function () {
-      let str = `mindmap
+      const str = `mindmap
     root`;
 
       mindmap.parse(str);
@@ -19,7 +20,7 @@ describe('when parsing a mindmap ', function () {
       expect(mindmap.yy.getMindmap().descr).toEqual('root');
     });
     it('MMP-2 should handle a hierachial mindmap definition', function () {
-      let str = `mindmap
+      const str = `mindmap
     root
       child1
       child2
@@ -34,7 +35,7 @@ describe('when parsing a mindmap ', function () {
     });
 
     it('3 should handle a simple root definition with a shape and without an id abc123', function () {
-      let str = `mindmap
+      const str = `mindmap
     (root)`;
 
       mindmap.parse(str);
@@ -43,7 +44,7 @@ describe('when parsing a mindmap ', function () {
     });
 
     it('MMP-4 should handle a deeper hierachial mindmap definition', function () {
-      let str = `mindmap
+      const str = `mindmap
     root
       child1
         leaf1
@@ -58,40 +59,27 @@ describe('when parsing a mindmap ', function () {
       expect(mm.children[1].descr).toEqual('child2');
     });
     it('5 Multiple roots are illegal', function () {
-      let str = `mindmap
+      const str = `mindmap
     root
     fakeRoot`;
 
-      try {
-        mindmap.parse(str);
-        // Fail test if above expression doesn't throw anything.
-        expect(true).toBe(false);
-      } catch (e) {
-        expect(e.message).toBe(
-          'There can be only one root. No parent could be found for ("fakeRoot")'
-        );
-      }
+      expect(() => mindmap.parse(str)).toThrow(
+        'There can be only one root. No parent could be found for ("fakeRoot")'
+      );
     });
     it('MMP-6 real root in wrong place', function () {
-      let str = `mindmap
+      const str = `mindmap
           root
         fakeRoot
     realRootWrongPlace`;
-
-      try {
-        mindmap.parse(str);
-        // Fail test if above expression doesn't throw anything.
-        expect(true).toBe(false);
-      } catch (e) {
-        expect(e.message).toBe(
-          'There can be only one root. No parent could be found for ("fakeRoot")'
-        );
-      }
+      expect(() => mindmap.parse(str)).toThrow(
+        'There can be only one root. No parent could be found for ("fakeRoot")'
+      );
     });
   });
   describe('nodes', function () {
     it('MMP-7 should handle an id and type for a node definition', function () {
-      let str = `mindmap
+      const str = `mindmap
     root[The root]
       `;
 
@@ -102,7 +90,7 @@ describe('when parsing a mindmap ', function () {
       expect(mm.type).toEqual(mindmap.yy.nodeType.RECT);
     });
     it('MMP-8 should handle an id and type for a node definition', function () {
-      let str = `mindmap
+      const str = `mindmap
     root
       theId(child1)`;
 
@@ -116,7 +104,7 @@ describe('when parsing a mindmap ', function () {
       expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
     });
     it('MMP-9 should handle an id and type for a node definition', function () {
-      let str = `mindmap
+      const str = `mindmap
 root
       theId(child1)`;
 
@@ -130,7 +118,7 @@ root
       expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
     });
     it('MMP-10 multiple types (circle)', function () {
-      let str = `mindmap
+      const str = `mindmap
  root((the root))
  `;
 
@@ -142,7 +130,7 @@ root
     });
 
     it('MMP-11 multiple types (cloud)', function () {
-      let str = `mindmap
+      const str = `mindmap
  root)the root(
 `;
 
@@ -153,7 +141,7 @@ root
       expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD);
     });
     it('MMP-12 multiple types (bang)', function () {
-      let str = `mindmap
+      const str = `mindmap
  root))the root((
 `;
 
@@ -165,7 +153,7 @@ root
     });
 
     it('MMP-12-a multiple types (hexagon)', function () {
-      let str = `mindmap
+      const str = `mindmap
  root{{the root}}
 `;
 
@@ -178,7 +166,7 @@ root
   });
   describe('decorations', function () {
     it('MMP-13 should be possible to set an icon for the node', function () {
-      let str = `mindmap
+      const str = `mindmap
     root[The root]
     ::icon(bomb)
     `;
@@ -192,7 +180,7 @@ root
       expect(mm.icon).toEqual('bomb');
     });
     it('MMP-14 should be possible to set classes for the node', function () {
-      let str = `mindmap
+      const str = `mindmap
     root[The root]
     :::m-4 p-8
     `;
@@ -206,7 +194,7 @@ root
       expect(mm.class).toEqual('m-4 p-8');
     });
     it('MMP-15 should be possible to set both classes and icon for the node', function () {
-      let str = `mindmap
+      const str = `mindmap
     root[The root]
     :::m-4 p-8
     ::icon(bomb)
@@ -222,7 +210,7 @@ root
       expect(mm.icon).toEqual('bomb');
     });
     it('MMP-16 should be possible to set both classes and icon for the node', function () {
-      let str = `mindmap
+      const str = `mindmap
     root[The root]
     ::icon(bomb)
     :::m-4 p-8
@@ -240,7 +228,7 @@ root
   });
   describe('descriptions', function () {
     it('MMP-17 should be possible to use node syntax in the descriptions', function () {
-      let str = `mindmap
+      const str = `mindmap
     root["String containing []"]
 `;
       mindmap.parse(str);
@@ -249,7 +237,7 @@ root
       expect(mm.descr).toEqual('String containing []');
     });
     it('MMP-18 should be possible to use node syntax in the descriptions in children', function () {
-      let str = `mindmap
+      const str = `mindmap
     root["String containing []"]
       child1["String containing ()"]
 `;
@@ -261,7 +249,7 @@ root
       expect(mm.children[0].descr).toEqual('String containing ()');
     });
     it('MMP-19 should be possible to have a child after a class assignment', function () {
-      let str = `mindmap
+      const str = `mindmap
   root(Root)
     Child(Child)
     :::hot
@@ -281,7 +269,7 @@ root
     });
   });
   it('MMP-20 should be possible to have meaningless empty rows in a mindmap abc124', function () {
-    let str = `mindmap
+    const str = `mindmap
   root(Root)
     Child(Child)
       a(a)
@@ -300,7 +288,7 @@ root
     expect(child.children[1].nodeId).toEqual('b');
   });
   it('MMP-21 should be possible to have comments in a mindmap', function () {
-    let str = `mindmap
+    const str = `mindmap
   root(Root)
     Child(Child)
       a(a)
@@ -321,7 +309,7 @@ root
   });
 
   it('MMP-22 should be possible to have comments at the end of a line', function () {
-    let str = `mindmap
+    const str = `mindmap
   root(Root)
     Child(Child)
       a(a) %% This is a comment
@@ -339,7 +327,7 @@ root
     expect(child.children[1].nodeId).toEqual('b');
   });
   it('MMP-23 Rows with only spaces should not interfere', function () {
-    let str = 'mindmap\nroot\n A\n \n\n B';
+    const str = 'mindmap\nroot\n A\n \n\n B';
     mindmap.parse(str);
     const mm = mindmap.yy.getMindmap();
     expect(mm.nodeId).toEqual('root');
@@ -351,7 +339,7 @@ root
     expect(child2.nodeId).toEqual('B');
   });
   it('MMP-24 Handle rows above the mindmap declarations', function () {
-    let str = '\n \nmindmap\nroot\n A\n \n\n B';
+    const str = '\n \nmindmap\nroot\n A\n \n\n B';
     mindmap.parse(str);
     const mm = mindmap.yy.getMindmap();
     expect(mm.nodeId).toEqual('root');
@@ -363,7 +351,7 @@ root
     expect(child2.nodeId).toEqual('B');
   });
   it('MMP-25 Handle rows above the mindmap declarations, no space', function () {
-    let str = '\n\n\nmindmap\nroot\n A\n \n\n B';
+    const str = '\n\n\nmindmap\nroot\n A\n \n\n B';
     mindmap.parse(str);
     const mm = mindmap.yy.getMindmap();
     expect(mm.nodeId).toEqual('root');

From b71f4c7e5446b0512a56455f695349779e9123f3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 15:56:30 +0530
Subject: [PATCH 104/193] Add MindmapDB type

---
 packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts | 3 ++-
 packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts       | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
index b35214435..c5c7303c3 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
@@ -3,8 +3,9 @@ import mindmapParser from './parser/mindmap.jison';
 import * as mindmapDb from './mindmapDb.js';
 import mindmapRenderer from './mindmapRenderer.js';
 import mindmapStyles from './styles.js';
+import type { DiagramDefinition } from '../../diagram-api/types.js';
 
-export const diagram = {
+export const diagram: DiagramDefinition = {
   db: mindmapDb,
   renderer: mindmapRenderer,
   parser: mindmapParser,
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
new file mode 100644
index 000000000..caec37d2c
--- /dev/null
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
@@ -0,0 +1,3 @@
+import type * as mindmapDb from './mindmapDb.js';
+
+export type MindmapDB = typeof mindmapDb;

From f30c26485e02cbd697e2c8ac21967a57cece768d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 15:58:07 +0530
Subject: [PATCH 105/193] Cleanup svgDraw.js

---
 .../mermaid/src/diagrams/mindmap/svgDraw.js   | 51 -------------------
 1 file changed, 51 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index 2a4fc4b67..b065e8010 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -1,54 +1,7 @@
-import { select } from 'd3';
 import * as db from './mindmapDb.js';
 import { createText } from '../../rendering-util/createText.js';
 const MAX_SECTIONS = 12;
 
-/**
- * @param {string} text The text to be wrapped
- * @param {number} width The max width of the text
- */
-function wrap(text, width) {
-  text.each(function () {
-    var text = select(this),
-      words = text
-        .text()
-        .split(/(\s+|)/)
-        .reverse(),
-      word,
-      line = [],
-      lineHeight = 1.1, // ems
-      y = text.attr('y'),
-      dy = parseFloat(text.attr('dy')),
-      tspan = text
-        .text(null)
-        .append('tspan')
-        .attr('x', 0)
-        .attr('y', y)
-        .attr('dy', dy + 'em');
-    for (let j = 0; j < words.length; j++) {
-      word = words[words.length - 1 - j];
-      line.push(word);
-      tspan.text(line.join(' ').trim());
-      if (tspan.node().getComputedTextLength() > width || word === '
    ') {
-        line.pop();
-        tspan.text(line.join(' ').trim());
-        if (word === '
    ') {
-          line = [''];
-        } else {
-          line = [word];
-        }
-
-        tspan = text
-          .append('tspan')
-          .attr('x', 0)
-          .attr('y', y)
-          .attr('dy', lineHeight + 'em')
-          .text(word);
-      }
-    }
-  });
-}
-
 const defaultBkg = function (elem, node, section) {
   const rd = 5;
   elem
@@ -317,10 +270,6 @@ export const drawNode = function (elem, node, fullSection, conf) {
       break;
   }
 
-  // Position the node to its coordinate
-  // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
-  //   nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
-  // }
   db.setElementForId(node.id, nodeElem);
   return node.height;
 };

From ba0bddf4178e1d48de5cc3c73ac52db5a23f05e8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 16:02:28 +0530
Subject: [PATCH 106/193] Add MermaidConfigWithDefaults

---
 packages/mermaid/src/config.ts                         | 4 ++--
 packages/mermaid/src/config.type.ts                    | 5 +++++
 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 1 -
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index ede3a568d..f1dccd251 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -2,7 +2,7 @@ import assignWithDepth from './assignWithDepth.js';
 import { log } from './logger.js';
 import theme from './themes/index.js';
 import config from './defaultConfig.js';
-import type { MermaidConfig } from './config.type.js';
+import type { MermaidConfig, MermaidConfigWithDefaults } from './config.type.js';
 import { sanitizeDirective } from './utils/sanitizeDirective.js';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
@@ -128,7 +128,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
  *
  * @returns The currentConfig
  */
-export const getConfig = (): MermaidConfig => {
+export const getConfig = (): MermaidConfigWithDefaults => {
   return assignWithDepth({}, currentConfig);
 };
 /**
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 575f428dd..7ca4b89d6 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -5,6 +5,8 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 
+import { RequiredDeep } from 'type-fest';
+
 /**
  * Configuration options to pass to the `dompurify` library.
  */
@@ -165,6 +167,9 @@ export interface MermaidConfig {
   wrap?: boolean;
   fontSize?: number;
 }
+
+// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name.
+export type MermaidConfigWithDefaults = RequiredDeep;
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "BaseDiagramConfig".
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 7433f2b9c..51f808ff4 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,6 +1,5 @@
 import type { Diagram } from '../../Diagram.js';
 import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js';
-
 import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,

From f069de54878637762a99bb4e787220e287e23940 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 16:03:20 +0530
Subject: [PATCH 107/193] Convert MindmapDB.ts

---
 .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 101 +++++++++---------
 1 file changed, 53 insertions(+), 48 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
index 4206a4a26..72c9968b6 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -1,19 +1,36 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.js';
+import { sanitizeText } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
+import type { D3Element } from '../../mermaidAPI.js';
 
-export const sanitizeText = (text) => _sanitizeText(text, getConfig());
+export interface MindMapNode {
+  id: number;
+  nodeId: string;
+  level: number;
+  descr: string;
+  type: number;
+  children: MindMapNode[];
+  width: number;
+  padding: number;
+  section?: number;
+  height?: number;
+  class?: string;
+  icon?: string;
+  x?: number;
+  y?: number;
+}
 
-let nodes = [];
+let nodes: MindMapNode[] = [];
 let cnt = 0;
-let elements = {};
+let elements: Record = {};
+
 export const clear = () => {
   nodes = [];
   cnt = 0;
   elements = {};
 };
 
-const getParent = function (level) {
+const getParent = function (level: number) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     if (nodes[i].level < level) {
       return nodes[i];
@@ -26,31 +43,29 @@ const getParent = function (level) {
 export const getMindmap = () => {
   return nodes.length > 0 ? nodes[0] : null;
 };
-export const addNode = (level, id, descr, type) => {
+
+export const addNode = (level: number, id: string, descr: string, type: number) => {
   log.info('addNode', level, id, descr, type);
   const conf = getConfig();
+  let padding: number = conf.mindmap?.padding ?? 10;
+  switch (type) {
+    case nodeType.ROUNDED_RECT:
+    case nodeType.RECT:
+    case nodeType.HEXAGON:
+      padding *= 2;
+  }
+
   const node = {
     id: cnt++,
-    nodeId: sanitizeText(id),
+    nodeId: sanitizeText(id, conf),
     level,
-    descr: sanitizeText(descr),
+    descr: sanitizeText(descr, conf),
     type,
     children: [],
-    width: getConfig().mindmap.maxNodeWidth,
-  };
-  switch (node.type) {
-    case nodeType.ROUNDED_RECT:
-      node.padding = 2 * conf.mindmap.padding;
-      break;
-    case nodeType.RECT:
-      node.padding = 2 * conf.mindmap.padding;
-      break;
-    case nodeType.HEXAGON:
-      node.padding = 2 * conf.mindmap.padding;
-      break;
-    default:
-      node.padding = conf.mindmap.padding;
-  }
+    width: conf.mindmap?.maxNodeWidth ?? 200,
+    padding,
+  } satisfies MindMapNode;
+
   const parent = getParent(level);
   if (parent) {
     parent.children.push(node);
@@ -62,16 +77,9 @@ export const addNode = (level, id, descr, type) => {
       nodes.push(node);
     } else {
       // Syntax error ... there can only bee one root
-      let error = new Error(
+      const error = new Error(
         'There can be only one root. No parent could be found for ("' + node.descr + '")'
       );
-      error.hash = {
-        text: 'branch ' + name,
-        token: 'branch ' + name,
-        line: '1',
-        loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
-        expected: ['"checkout ' + name + '"'],
-      };
       throw error;
     }
   }
@@ -88,7 +96,7 @@ export const nodeType = {
   HEXAGON: 6,
 };
 
-export const getType = (startStr, endStr) => {
+export const getType = (startStr: string, endStr: string): number => {
   log.debug('In get type', startStr, endStr);
   switch (startStr) {
     case '[':
@@ -108,21 +116,25 @@ export const getType = (startStr, endStr) => {
   }
 };
 
-export const setElementForId = (id, element) => {
+export const setElementForId = (id: string, element: D3Element) => {
   elements[id] = element;
 };
 
-export const decorateNode = (decoration) => {
-  const node = nodes[nodes.length - 1];
-  if (decoration && decoration.icon) {
-    node.icon = sanitizeText(decoration.icon);
+export const decorateNode = (decoration?: { class?: string; icon?: string }) => {
+  if (!decoration) {
+    return;
   }
-  if (decoration && decoration.class) {
-    node.class = sanitizeText(decoration.class);
+  const config = getConfig();
+  const node = nodes[nodes.length - 1];
+  if (decoration.icon) {
+    node.icon = sanitizeText(decoration.icon, config);
+  }
+  if (decoration.class) {
+    node.class = sanitizeText(decoration.class, config);
   }
 };
 
-export const type2Str = (type) => {
+export const type2Str = (type: number) => {
   switch (type) {
     case nodeType.DEFAULT:
       return 'no-border';
@@ -143,13 +155,6 @@ export const type2Str = (type) => {
   }
 };
 
-export let parseError;
-export const setErrorHandler = (handler) => {
-  parseError = handler;
-};
-
 // Expose logger to grammar
 export const getLogger = () => log;
-
-export const getNodeById = (id) => nodes[id];
-export const getElementById = (id) => elements[id];
+export const getElementById = (id: string) => elements[id];

From d346a77e3c72e36a441bf271700744a0e381bedf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 16:03:37 +0530
Subject: [PATCH 108/193] Convert MindmapRenderer.ts

---
 .../src/diagrams/mindmap/mindmapRenderer.ts   | 104 ++++++++----------
 1 file changed, 48 insertions(+), 56 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
index 3fe9e1d51..6d0dc6067 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
@@ -1,23 +1,21 @@
-/** Created by knut on 14-12-11. */
 import { select } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import svgDraw from './svgDraw.js';
-import cytoscape from 'cytoscape/dist/cytoscape.umd.js';
+import cytoscape from 'cytoscape';
+// @ts-expect-error No types available
 import coseBilkent from 'cytoscape-cose-bilkent';
 import * as db from './mindmapDb.js';
+import type { MermaidConfig, MermaidConfigWithDefaults } from '../../config.type.js';
+import type { Diagram } from '../../Diagram.js';
+import type { MindmapDB } from './mindmapTypes.js';
+import type { D3Element } from '../../mermaidAPI.js';
 
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
 
-/**
- * @param {any} svg The svg element to draw the diagram onto
- * @param {object} mindmap The mindmap data and hierarchy
- * @param section
- * @param {object} conf The configuration object
- */
-function drawNodes(svg, mindmap, section, conf) {
+function drawNodes(svg: D3Element, mindmap: db.MindMapNode, section: number, conf: MermaidConfig) {
   svgDraw.drawNode(svg, mindmap, section, conf);
   if (mindmap.children) {
     mindmap.children.forEach((child, index) => {
@@ -26,11 +24,23 @@ function drawNodes(svg, mindmap, section, conf) {
   }
 }
 
-/**
- * @param edgesEl
- * @param cy
- */
-function drawEdges(edgesEl, cy) {
+declare module 'cytoscape' {
+  interface EdgeSingular {
+    _private: {
+      bodyBounds: unknown;
+      rscratch: {
+        startX: number;
+        startY: number;
+        midX: number;
+        midY: number;
+        endX: number;
+        endY: number;
+      };
+    };
+  }
+}
+
+function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) {
   cy.edges().map((edge, id) => {
     const data = edge.data();
     if (edge[0]._private.bodyBounds) {
@@ -47,17 +57,11 @@ function drawEdges(edgesEl, cy) {
   });
 }
 
-/**
- * @param mindmap The mindmap data and hierarchy
- * @param cy
- * @param conf The configuration object
- * @param level
- */
-function addNodes(mindmap, cy, conf, level) {
+function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
   cy.add({
     group: 'nodes',
     data: {
-      id: mindmap.id,
+      id: mindmap.id.toString(),
       labelText: mindmap.descr,
       height: mindmap.height,
       width: mindmap.width,
@@ -67,8 +71,8 @@ function addNodes(mindmap, cy, conf, level) {
       type: mindmap.type,
     },
     position: {
-      x: mindmap.x,
-      y: mindmap.y,
+      x: mindmap.x!,
+      y: mindmap.y!,
     },
   });
   if (mindmap.children) {
@@ -88,12 +92,10 @@ function addNodes(mindmap, cy, conf, level) {
   }
 }
 
-/**
- * @param node
- * @param conf
- * @param cy
- */
-function layoutMindmap(node, conf) {
+function layoutMindmap(
+  node: db.MindMapNode,
+  conf: MermaidConfigWithDefaults
+): Promise {
   return new Promise((resolve) => {
     // Add temporary render element
     const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
@@ -122,8 +124,8 @@ function layoutMindmap(node, conf) {
 
     cy.layout({
       name: 'cose-bilkent',
+      // @ts-ignore Types for cose-bilkent are not correct?
       quality: 'proof',
-      // headless: true,
       styleEnabled: false,
       animate: false,
     }).run();
@@ -133,13 +135,8 @@ function layoutMindmap(node, conf) {
     });
   });
 }
-/**
- * @param node
- * @param cy
- * @param positionedMindmap
- * @param conf
- */
-function positionNodes(cy) {
+
+function positionNodes(cy: cytoscape.Core) {
   cy.nodes().map((node, id) => {
     const data = node.data();
     data.x = node.position().x;
@@ -155,38 +152,33 @@ function positionNodes(cy) {
   });
 }
 
-/**
- * Draws a an info picture in the tag with id: id based on the graph definition in text.
- *
- * @param {any} text
- * @param {any} id
- * @param {any} version
- * @param diagObj
- */
-
-export const draw = async (text, id, version, diagObj) => {
+export const draw = async (text: string, id: string, version: string, diagObj: Diagram) => {
   const conf = getConfig();
 
   conf.htmlLabels = false;
 
   log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
 
-  const securityLevel = getConfig().securityLevel;
+  const securityLevel = conf.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
-  let sandboxElement;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let sandboxElement: any;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
   }
-  const root =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const root: any =
     securityLevel === 'sandbox'
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
-  // Parse the graph definition
 
   const svg = root.select('#' + id);
 
   svg.append('g');
-  const mm = diagObj.db.getMindmap();
+  const mm = (diagObj.db as MindmapDB).getMindmap();
+  if (!mm) {
+    return;
+  }
 
   // Draw the graph and start with drawing the nodes without proper position
   // this gives us the size of the nodes and we can set the positions later
@@ -201,9 +193,9 @@ export const draw = async (text, id, version, diagObj) => {
 
   const cy = await layoutMindmap(mm, conf);
 
-  // // After this we can draw, first the edges and the then nodes with the correct position
-  drawEdges(edgesElem, cy, conf);
-  positionNodes(cy, conf);
+  // After this we can draw, first the edges and the then nodes with the correct position
+  drawEdges(edgesElem, cy);
+  positionNodes(cy);
 
   // Setup the view box and size of the svg element
   setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);

From e1a23f10df548a13844c600540d4ae9d0e9df7d5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Sun, 28 Jan 2024 21:43:03 +0530
Subject: [PATCH 109/193] chore: Fix config type

---
 docs/config/setup/modules/config.md           | 36 ++++++++++++-------
 docs/config/setup/modules/mermaidAPI.md       |  2 +-
 packages/mermaid/src/config.ts                |  6 +++-
 packages/mermaid/src/config.type.ts           |  5 ---
 .../src/diagrams/mindmap/mindmapRenderer.ts   |  3 +-
 5 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
index f1de64e2d..afe0af456 100644
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@@ -6,6 +6,16 @@
 
 # Module: config
 
+## Type Aliases
+
+### MermaidConfigWithDefaults
+
+Ƭ **MermaidConfigWithDefaults**: `RequiredDeep`<`MermaidConfig`>
+
+#### Defined in
+
+[config.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L10)
+
 ## Variables
 
 ### defaultConfig
@@ -14,7 +24,7 @@
 
 #### Defined in
 
-[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
+[config.ts:12](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L12)
 
 ## Functions
 
@@ -36,13 +46,13 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
+[config.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L192)
 
 ---
 
 ### getConfig
 
-▸ **getConfig**(): `MermaidConfig`
+▸ **getConfig**(): `RequiredObjectDeep`<`MermaidConfig`>
 
 ## getConfig
 
@@ -54,13 +64,13 @@ Pushes in a directive to the configuration
 
 #### Returns
 
-`MermaidConfig`
+`RequiredObjectDeep`<`MermaidConfig`>
 
 The currentConfig
 
 #### Defined in
 
-[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
+[config.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L135)
 
 ---
 
@@ -84,7 +94,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+[config.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L100)
 
 ---
 
@@ -118,7 +128,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
+[config.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L222)
 
 ---
 
@@ -147,7 +157,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
+[config.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L150)
 
 ---
 
@@ -167,7 +177,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
+[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
 
 ---
 
@@ -199,7 +209,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+[config.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L117)
 
 ---
 
@@ -232,7 +242,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+[config.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L65)
 
 ---
 
@@ -253,7 +263,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
+[config.ts:19](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L19)
 
 ---
 
@@ -273,4 +283,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+[config.ts:83](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L83)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index a1992c225..0fa7dec02 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -31,7 +31,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 ### mermaidAPI
 
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `RequiredObjectDeep`<`MermaidConfig`> = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
 
 ## mermaidAPI configuration defaults
 
diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index f1dccd251..f11788126 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -2,8 +2,12 @@ import assignWithDepth from './assignWithDepth.js';
 import { log } from './logger.js';
 import theme from './themes/index.js';
 import config from './defaultConfig.js';
-import type { MermaidConfig, MermaidConfigWithDefaults } from './config.type.js';
+import type { MermaidConfig } from './config.type.js';
 import { sanitizeDirective } from './utils/sanitizeDirective.js';
+import type { RequiredDeep } from 'type-fest';
+
+// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name.
+export type MermaidConfigWithDefaults = RequiredDeep;
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 7ca4b89d6..575f428dd 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -5,8 +5,6 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 
-import { RequiredDeep } from 'type-fest';
-
 /**
  * Configuration options to pass to the `dompurify` library.
  */
@@ -167,9 +165,6 @@ export interface MermaidConfig {
   wrap?: boolean;
   fontSize?: number;
 }
-
-// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name.
-export type MermaidConfigWithDefaults = RequiredDeep;
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "BaseDiagramConfig".
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
index 6d0dc6067..2a8fabd4f 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
@@ -7,10 +7,11 @@ import cytoscape from 'cytoscape';
 // @ts-expect-error No types available
 import coseBilkent from 'cytoscape-cose-bilkent';
 import * as db from './mindmapDb.js';
-import type { MermaidConfig, MermaidConfigWithDefaults } from '../../config.type.js';
+import type { MermaidConfig } from '../../config.type.js';
 import type { Diagram } from '../../Diagram.js';
 import type { MindmapDB } from './mindmapTypes.js';
 import type { D3Element } from '../../mermaidAPI.js';
+import type { MermaidConfigWithDefaults } from '../../config.js';
 
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);

From 9651d0c2da4799713fbbded20e34550cc9f2af44 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 10:45:47 +0530
Subject: [PATCH 110/193] refactor: Fix types and imports

---
 package.json                                  |  5 ++
 packages/mermaid-example-diagram/package.json |  7 +--
 packages/mermaid/package.json                 |  3 +-
 .../diagrams/mindmap/mindmap-definition.ts    | 16 +++---
 .../src/diagrams/mindmap/mindmap.spec.ts      |  2 +-
 .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 32 +++++------
 .../src/diagrams/mindmap/mindmapRenderer.ts   | 17 +++---
 .../src/diagrams/mindmap/mindmapTypes.ts      | 19 ++++++-
 patches/cytoscape@3.28.1.patch                | 20 +++++++
 pnpm-lock.yaml                                | 57 +++++--------------
 10 files changed, 90 insertions(+), 88 deletions(-)
 create mode 100644 patches/cytoscape@3.28.1.patch

diff --git a/package.json b/package.json
index 441484218..4a5a56aae 100644
--- a/package.json
+++ b/package.json
@@ -127,5 +127,10 @@
   },
   "nyc": {
     "report-dir": "coverage/cypress"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch"
+    }
   }
 }
diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json
index dc468a6c7..63e8aadea 100644
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -39,15 +39,10 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.1",
-    "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"
+    "khroma": "^2.0.0"
   },
   "devDependencies": {
-    "@types/cytoscape": "^3.19.9",
     "concurrently": "^8.0.0",
     "rimraf": "^5.0.0",
     "mermaid": "workspace:*"
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 4557506af..471a11fd3 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -62,9 +62,8 @@
     "@braintree/sanitize-url": "^6.0.1",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
-    "cytoscape": "^3.23.0",
+    "cytoscape": "^3.28.1",
     "cytoscape-cose-bilkent": "^4.1.0",
-    "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
index c5c7303c3..66b44b4f9 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
@@ -1,13 +1,13 @@
 // @ts-ignore: JISON doesn't support types
-import mindmapParser from './parser/mindmap.jison';
-import * as mindmapDb from './mindmapDb.js';
-import mindmapRenderer from './mindmapRenderer.js';
-import mindmapStyles from './styles.js';
+import parser from './parser/mindmap.jison';
+import db from './mindmapDb.js';
+import renderer from './mindmapRenderer.js';
+import styles from './styles.js';
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
-  db: mindmapDb,
-  renderer: mindmapRenderer,
-  parser: mindmapParser,
-  styles: mindmapStyles,
+  db,
+  renderer,
+  parser,
+  styles,
 };
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
index f6cc4304f..2d67fc600 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
@@ -1,6 +1,6 @@
 // @ts-expect-error No types available for JISON
 import { parser as mindmap } from './parser/mindmap.jison';
-import * as mindmapDB from './mindmapDb.js';
+import mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
 import { setLogLevel } from '../../diagram-api/diagramAPI.js';
 
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
index 72c9968b6..eceabc52b 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -2,23 +2,7 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { sanitizeText } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import type { D3Element } from '../../mermaidAPI.js';
-
-export interface MindMapNode {
-  id: number;
-  nodeId: string;
-  level: number;
-  descr: string;
-  type: number;
-  children: MindMapNode[];
-  width: number;
-  padding: number;
-  section?: number;
-  height?: number;
-  class?: string;
-  icon?: string;
-  x?: number;
-  y?: number;
-}
+import type { MindMapNode } from './mindmapTypes.js';
 
 let nodes: MindMapNode[] = [];
 let cnt = 0;
@@ -158,3 +142,17 @@ export const type2Str = (type: number) => {
 // Expose logger to grammar
 export const getLogger = () => log;
 export const getElementById = (id: string) => elements[id];
+
+const db = {
+  clear,
+  addNode,
+  getMindmap,
+  nodeType,
+  setElementForId,
+  decorateNode,
+  type2Str,
+  getLogger,
+  getElementById,
+} as const;
+
+export default db;
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
index 2a8fabd4f..f4471b01d 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
@@ -6,17 +6,16 @@ import svgDraw from './svgDraw.js';
 import cytoscape from 'cytoscape';
 // @ts-expect-error No types available
 import coseBilkent from 'cytoscape-cose-bilkent';
-import * as db from './mindmapDb.js';
+import type { MindMapNode, MindmapDB } from './mindmapTypes.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type { Diagram } from '../../Diagram.js';
-import type { MindmapDB } from './mindmapTypes.js';
 import type { D3Element } from '../../mermaidAPI.js';
 import type { MermaidConfigWithDefaults } from '../../config.js';
 
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
 
-function drawNodes(svg: D3Element, mindmap: db.MindMapNode, section: number, conf: MermaidConfig) {
+function drawNodes(svg: D3Element, mindmap: MindMapNode, section: number, conf: MermaidConfig) {
   svgDraw.drawNode(svg, mindmap, section, conf);
   if (mindmap.children) {
     mindmap.children.forEach((child, index) => {
@@ -58,7 +57,7 @@ function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) {
   });
 }
 
-function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
+function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
   cy.add({
     group: 'nodes',
     data: {
@@ -94,7 +93,7 @@ function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConf
 }
 
 function layoutMindmap(
-  node: db.MindMapNode,
+  node: MindMapNode,
   conf: MermaidConfigWithDefaults
 ): Promise {
   return new Promise((resolve) => {
@@ -137,7 +136,7 @@ function layoutMindmap(
   });
 }
 
-function positionNodes(cy: cytoscape.Core) {
+function positionNodes(db: MindmapDB, cy: cytoscape.Core) {
   cy.nodes().map((node, id) => {
     const data = node.data();
     data.x = node.position().x;
@@ -155,7 +154,7 @@ function positionNodes(cy: cytoscape.Core) {
 
 export const draw = async (text: string, id: string, version: string, diagObj: Diagram) => {
   const conf = getConfig();
-
+  const db = diagObj.db as MindmapDB;
   conf.htmlLabels = false;
 
   log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
@@ -176,7 +175,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D
   const svg = root.select('#' + id);
 
   svg.append('g');
-  const mm = (diagObj.db as MindmapDB).getMindmap();
+  const mm = db.getMindmap();
   if (!mm) {
     return;
   }
@@ -196,7 +195,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D
 
   // After this we can draw, first the edges and the then nodes with the correct position
   drawEdges(edgesElem, cy);
-  positionNodes(cy);
+  positionNodes(db, cy);
 
   // Setup the view box and size of the svg element
   setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
index caec37d2c..28ec37c39 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
@@ -1,3 +1,20 @@
-import type * as mindmapDb from './mindmapDb.js';
+import type mindmapDb from './mindmapDb.js';
+
+export interface MindMapNode {
+  id: number;
+  nodeId: string;
+  level: number;
+  descr: string;
+  type: number;
+  children: MindMapNode[];
+  width: number;
+  padding: number;
+  section?: number;
+  height?: number;
+  class?: string;
+  icon?: string;
+  x?: number;
+  y?: number;
+}
 
 export type MindmapDB = typeof mindmapDb;
diff --git a/patches/cytoscape@3.28.1.patch b/patches/cytoscape@3.28.1.patch
new file mode 100644
index 000000000..d92163a31
--- /dev/null
+++ b/patches/cytoscape@3.28.1.patch
@@ -0,0 +1,20 @@
+diff --git a/package.json b/package.json
+index f2f77fa79c99382b079f4051ed51eafe8d2379c8..0bfddf55394e86f3a386eb7ab681369d410bae07 100644
+--- a/package.json
++++ b/package.json
+@@ -30,7 +30,15 @@
+   "engines": {
+     "node": ">=0.10"
+   },
++  "exports": {
++    ".": {
++      "import": "./dist/cytoscape.umd.js",
++      "default": "./dist/cytoscape.cjs.js"
++    },
++    "./*": "./*"
++  },
+   "main": "dist/cytoscape.cjs.js",
++  "module": "dist/cytoscape.umd.js",
+   "unpkg": "dist/cytoscape.min.js",
+   "jsdelivr": "dist/cytoscape.min.js",
+   "scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d950edef..1312ff7c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+patchedDependencies:
+  cytoscape@3.28.1:
+    hash: claipxynndhyqyu2csninuoh5e
+    path: patches/cytoscape@3.28.1.patch
+
 importers:
 
   .:
@@ -201,14 +206,11 @@ importers:
         specifier: ^3.0.0
         version: 3.0.0
       cytoscape:
-        specifier: ^3.23.0
-        version: 3.23.0
+        specifier: ^3.28.1
+        version: 3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e)
       cytoscape-cose-bilkent:
         specifier: ^4.1.0
-        version: 4.1.0(cytoscape@3.23.0)
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0(cytoscape@3.23.0)
+        version: 4.1.0(cytoscape@3.28.1)
       d3:
         specifier: ^7.4.0
         version: 7.4.0
@@ -384,28 +386,13 @@ importers:
       '@braintree/sanitize-url':
         specifier: ^6.0.1
         version: 6.0.2
-      cytoscape:
-        specifier: ^3.23.0
-        version: 3.23.0
-      cytoscape-cose-bilkent:
-        specifier: ^4.1.0
-        version: 4.1.0(cytoscape@3.23.0)
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0(cytoscape@3.23.0)
       d3:
         specifier: ^7.0.0
         version: 7.0.0
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
     devDependencies:
-      '@types/cytoscape':
-        specifier: ^3.19.9
-        version: 3.19.9
       concurrently:
         specifier: ^8.0.0
         version: 8.0.0
@@ -7739,12 +7726,6 @@ packages:
       layout-base: 1.0.2
     dev: false
 
-  /cose-base@2.2.0:
-    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
-    dependencies:
-      layout-base: 2.0.1
-    dev: false
-
   /cosmiconfig-typescript-loader@4.4.0(@types/node@20.4.7)(cosmiconfig@8.2.0)(ts-node@10.9.1)(typescript@5.1.6):
     resolution: {integrity: sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==}
     engines: {node: '>=v14.21.3'}
@@ -8135,31 +8116,23 @@ packages:
       yauzl: 2.10.0
     dev: true
 
-  /cytoscape-cose-bilkent@4.1.0(cytoscape@3.23.0):
+  /cytoscape-cose-bilkent@4.1.0(cytoscape@3.28.1):
     resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
     peerDependencies:
       cytoscape: ^3.2.0
     dependencies:
       cose-base: 1.0.3
-      cytoscape: 3.23.0
+      cytoscape: 3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e)
     dev: false
 
-  /cytoscape-fcose@2.1.0(cytoscape@3.23.0):
-    resolution: {integrity: sha512-Q3apPl66jf8/2sMsrCjNP247nbDkyIPjA9g5iPMMWNLZgP3/mn9aryF7EFY/oRPEpv7bKJ4jYmCoU5r5/qAc1Q==}
-    peerDependencies:
-      cytoscape: ^3.2.0
-    dependencies:
-      cose-base: 2.2.0
-      cytoscape: 3.23.0
-    dev: false
-
-  /cytoscape@3.23.0:
-    resolution: {integrity: sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==}
+  /cytoscape@3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e):
+    resolution: {integrity: sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==}
     engines: {node: '>=0.10'}
     dependencies:
       heap: 0.2.7
       lodash: 4.17.21
     dev: false
+    patched: true
 
   /d3-array@2.12.1:
     resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
@@ -12000,10 +11973,6 @@ packages:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
     dev: false
 
-  /layout-base@2.0.1:
-    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
-    dev: false
-
   /lazy-ass@1.6.0:
     resolution: {integrity: sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==}
     engines: {node: '> 0.8'}

From cffac848ead7cc3250db2f79cd09bce7a99739c1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 10:52:58 +0530
Subject: [PATCH 111/193] chore: Fix mindmapDb exports

---
 .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
index eceabc52b..f5303ac29 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -8,7 +8,7 @@ let nodes: MindMapNode[] = [];
 let cnt = 0;
 let elements: Record = {};
 
-export const clear = () => {
+const clear = () => {
   nodes = [];
   cnt = 0;
   elements = {};
@@ -24,11 +24,11 @@ const getParent = function (level: number) {
   return null;
 };
 
-export const getMindmap = () => {
+const getMindmap = () => {
   return nodes.length > 0 ? nodes[0] : null;
 };
 
-export const addNode = (level: number, id: string, descr: string, type: number) => {
+const addNode = (level: number, id: string, descr: string, type: number) => {
   log.info('addNode', level, id, descr, type);
   const conf = getConfig();
   let padding: number = conf.mindmap?.padding ?? 10;
@@ -69,7 +69,7 @@ export const addNode = (level: number, id: string, descr: string, type: number)
   }
 };
 
-export const nodeType = {
+const nodeType = {
   DEFAULT: 0,
   NO_BORDER: 0,
   ROUNDED_RECT: 1,
@@ -80,7 +80,7 @@ export const nodeType = {
   HEXAGON: 6,
 };
 
-export const getType = (startStr: string, endStr: string): number => {
+const getType = (startStr: string, endStr: string): number => {
   log.debug('In get type', startStr, endStr);
   switch (startStr) {
     case '[':
@@ -100,11 +100,11 @@ export const getType = (startStr: string, endStr: string): number => {
   }
 };
 
-export const setElementForId = (id: string, element: D3Element) => {
+const setElementForId = (id: string, element: D3Element) => {
   elements[id] = element;
 };
 
-export const decorateNode = (decoration?: { class?: string; icon?: string }) => {
+const decorateNode = (decoration?: { class?: string; icon?: string }) => {
   if (!decoration) {
     return;
   }
@@ -118,7 +118,7 @@ export const decorateNode = (decoration?: { class?: string; icon?: string }) =>
   }
 };
 
-export const type2Str = (type: number) => {
+const type2Str = (type: number) => {
   switch (type) {
     case nodeType.DEFAULT:
       return 'no-border';
@@ -140,14 +140,15 @@ export const type2Str = (type: number) => {
 };
 
 // Expose logger to grammar
-export const getLogger = () => log;
-export const getElementById = (id: string) => elements[id];
+const getLogger = () => log;
+const getElementById = (id: string) => elements[id];
 
 const db = {
   clear,
   addNode,
   getMindmap,
   nodeType,
+  getType,
   setElementForId,
   decorateNode,
   type2Str,

From 23d843b6d381aa42caf1ebb7f5f908e2c187608d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 11:21:12 +0530
Subject: [PATCH 112/193] refactor: Remove db import from svgDraw

---
 .../src/diagrams/mindmap/mindmapRenderer.ts   | 18 ++++--
 .../mermaid/src/diagrams/mindmap/svgDraw.js   | 58 ++++++-------------
 2 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
index f4471b01d..04eed6b5a 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
@@ -2,7 +2,7 @@ import { select } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import svgDraw from './svgDraw.js';
+import { drawNode, positionNode } from './svgDraw.js';
 import cytoscape from 'cytoscape';
 // @ts-expect-error No types available
 import coseBilkent from 'cytoscape-cose-bilkent';
@@ -15,11 +15,17 @@ import type { MermaidConfigWithDefaults } from '../../config.js';
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
 
-function drawNodes(svg: D3Element, mindmap: MindMapNode, section: number, conf: MermaidConfig) {
-  svgDraw.drawNode(svg, mindmap, section, conf);
+function drawNodes(
+  db: MindmapDB,
+  svg: D3Element,
+  mindmap: MindMapNode,
+  section: number,
+  conf: MermaidConfig
+) {
+  drawNode(db, svg, mindmap, section, conf);
   if (mindmap.children) {
     mindmap.children.forEach((child, index) => {
-      drawNodes(svg, child, section < 0 ? index : section, conf);
+      drawNodes(db, svg, child, section < 0 ? index : section, conf);
     });
   }
 }
@@ -141,7 +147,7 @@ function positionNodes(db: MindmapDB, cy: cytoscape.Core) {
     const data = node.data();
     data.x = node.position().x;
     data.y = node.position().y;
-    svgDraw.positionNode(data);
+    positionNode(db, data);
     const el = db.getElementById(data.nodeId);
     log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data);
     el.attr(
@@ -187,7 +193,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D
   edgesElem.attr('class', 'mindmap-edges');
   const nodesElem = svg.append('g');
   nodesElem.attr('class', 'mindmap-nodes');
-  drawNodes(nodesElem, mm, -1, conf);
+  drawNodes(db, nodesElem, mm, -1, conf);
 
   // Next step is to layout the mindmap, giving each node a position
 
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index b065e8010..8d3340c6e 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -1,8 +1,7 @@
-import * as db from './mindmapDb.js';
 import { createText } from '../../rendering-util/createText.js';
 const MAX_SECTIONS = 12;
 
-const defaultBkg = function (elem, node, section) {
+const defaultBkg = function (db, elem, node, section) {
   const rd = 5;
   elem
     .append('path')
@@ -24,7 +23,7 @@ const defaultBkg = function (elem, node, section) {
     .attr('y2', node.height);
 };
 
-const rectBkg = function (elem, node) {
+const rectBkg = function (db, elem, node) {
   elem
     .append('rect')
     .attr('id', 'node-' + node.id)
@@ -33,7 +32,7 @@ const rectBkg = function (elem, node) {
     .attr('width', node.width);
 };
 
-const cloudBkg = function (elem, node) {
+const cloudBkg = function (db, elem, node) {
   const w = node.width;
   const h = node.height;
   const r1 = 0.15 * w;
@@ -64,7 +63,7 @@ const cloudBkg = function (elem, node) {
     );
 };
 
-const bangBkg = function (elem, node) {
+const bangBkg = function (db, elem, node) {
   const w = node.width;
   const h = node.height;
   const r = 0.15 * w;
@@ -96,7 +95,7 @@ const bangBkg = function (elem, node) {
     );
 };
 
-const circleBkg = function (elem, node) {
+const circleBkg = function (db, elem, node) {
   elem
     .append('circle')
     .attr('id', 'node-' + node.id)
@@ -126,7 +125,7 @@ function insertPolygonShape(parent, w, h, points, node) {
     .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
 }
 
-const hexagonBkg = function (elem, node) {
+const hexagonBkg = function (db, elem, node) {
   const h = node.height;
   const f = 4;
   const m = h / f;
@@ -142,7 +141,7 @@ const hexagonBkg = function (elem, node) {
   const shapeSvg = insertPolygonShape(elem, w, h, points, node);
 };
 
-const roundedRectBkg = function (elem, node) {
+const roundedRectBkg = function (db, elem, node) {
   elem
     .append('rect')
     .attr('id', 'node-' + node.id)
@@ -154,13 +153,14 @@ const roundedRectBkg = function (elem, node) {
 };
 
 /**
+ * @param {import('./mindmapTypes.js').MindmapDB} db The database
  * @param {object} elem The D3 dom element in which the node is to be added
  * @param {object} node The node to be added
  * @param fullSection
  * @param {object} conf The configuration object
  * @returns {number} The height nodes dom element
  */
-export const drawNode = function (elem, node, fullSection, conf) {
+export const drawNode = function (db, elem, node, fullSection, conf) {
   const htmlLabels = conf.htmlLabels;
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
@@ -247,26 +247,26 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   switch (node.type) {
     case db.nodeType.DEFAULT:
-      defaultBkg(bkgElem, node, section, conf);
+      defaultBkg(db, bkgElem, node, section, conf);
       break;
     case db.nodeType.ROUNDED_RECT:
-      roundedRectBkg(bkgElem, node, section, conf);
+      roundedRectBkg(db, bkgElem, node, section, conf);
       break;
     case db.nodeType.RECT:
-      rectBkg(bkgElem, node, section, conf);
+      rectBkg(db, bkgElem, node, section, conf);
       break;
     case db.nodeType.CIRCLE:
       bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')');
-      circleBkg(bkgElem, node, section, conf);
+      circleBkg(db, bkgElem, node, section, conf);
       break;
     case db.nodeType.CLOUD:
-      cloudBkg(bkgElem, node, section, conf);
+      cloudBkg(db, bkgElem, node, section, conf);
       break;
     case db.nodeType.BANG:
-      bangBkg(bkgElem, node, section, conf);
+      bangBkg(db, bkgElem, node, section, conf);
       break;
     case db.nodeType.HEXAGON:
-      hexagonBkg(bkgElem, node, section, conf);
+      hexagonBkg(db, bkgElem, node, section, conf);
       break;
   }
 
@@ -274,29 +274,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
   return node.height;
 };
 
-export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) {
-  const section = fullSection % (MAX_SECTIONS - 1);
-  const sx = parent.x + parent.width / 2;
-  const sy = parent.y + parent.height / 2;
-  const ex = mindmap.x + mindmap.width / 2;
-  const ey = mindmap.y + mindmap.height / 2;
-  const mx = ex > sx ? sx + Math.abs(sx - ex) / 2 : sx - Math.abs(sx - ex) / 2;
-  const my = ey > sy ? sy + Math.abs(sy - ey) / 2 : sy - Math.abs(sy - ey) / 2;
-  const qx = ex > sx ? Math.abs(sx - mx) / 2 + sx : -Math.abs(sx - mx) / 2 + sx;
-  const qy = ey > sy ? Math.abs(sy - my) / 2 + sy : -Math.abs(sy - my) / 2 + sy;
-
-  edgesElem
-    .append('path')
-    .attr(
-      'd',
-      parent.direction === 'TB' || parent.direction === 'BT'
-        ? `M${sx},${sy} Q${sx},${qy} ${mx},${my} T${ex},${ey}`
-        : `M${sx},${sy} Q${qx},${sy} ${mx},${my} T${ex},${ey}`
-    )
-    .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth);
-};
-
-export const positionNode = function (node) {
+export const positionNode = function (db, node) {
   const nodeElem = db.getElementById(node.id);
 
   const x = node.x || 0;
@@ -304,5 +282,3 @@ export const positionNode = function (node) {
   // Position the node to its coordinate
   nodeElem.attr('transform', 'translate(' + x + ',' + y + ')');
 };
-
-export default { drawNode, positionNode, drawEdge };

From bde6a9ff4f3fc636d2ad0df7e9076b6b1b7eedc5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 11:21:42 +0530
Subject: [PATCH 113/193] Rename styles.js

---
 packages/mermaid/src/diagrams/mindmap/{styles.js => styles.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/mermaid/src/diagrams/mindmap/{styles.js => styles.ts} (100%)

diff --git a/packages/mermaid/src/diagrams/mindmap/styles.js b/packages/mermaid/src/diagrams/mindmap/styles.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/mindmap/styles.js
rename to packages/mermaid/src/diagrams/mindmap/styles.ts

From 13e052ff8175bb8a10899b77e6b246846f0f9284 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 11:26:10 +0530
Subject: [PATCH 114/193] Fix styles.ts

---
 packages/mermaid/src/diagrams/mindmap/styles.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/styles.ts b/packages/mermaid/src/diagrams/mindmap/styles.ts
index 863522fdf..cf435a721 100644
--- a/packages/mermaid/src/diagrams/mindmap/styles.ts
+++ b/packages/mermaid/src/diagrams/mindmap/styles.ts
@@ -1,6 +1,7 @@
+// @ts-expect-error Incorrect khroma types
 import { darken, lighten, isDark } from 'khroma';
 
-const genSections = (options) => {
+const genSections = (options: any) => {
   let sections = '';
 
   for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
@@ -49,7 +50,8 @@ const genSections = (options) => {
   return sections;
 };
 
-const getStyles = (options) =>
+// TODO: These options seem incorrect.
+const getStyles = (options: any) =>
   `
   .edge {
     stroke-width: 3;

From 75ec719257b58f930b7ae33138fff94501608638 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 11:31:22 +0530
Subject: [PATCH 115/193] Rename svgDraw.js

---
 packages/mermaid/src/diagrams/mindmap/{svgDraw.js => svgDraw.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/mermaid/src/diagrams/mindmap/{svgDraw.js => svgDraw.ts} (100%)

diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/mindmap/svgDraw.js
rename to packages/mermaid/src/diagrams/mindmap/svgDraw.ts

From b51d8ff7ba4cf9714903a60d8c703b10b0f6ca59 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 12:16:21 +0530
Subject: [PATCH 116/193] Convert svgDraw.ts

---
 .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 16 ++---
 .../src/diagrams/mindmap/mindmapRenderer.ts   | 12 ++--
 .../src/diagrams/mindmap/mindmapTypes.ts      |  6 +-
 .../mermaid/src/diagrams/mindmap/svgDraw.ts   | 60 ++++++++++---------
 4 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
index f5303ac29..c0fdd1257 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -1,12 +1,12 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
+import type { D3Element } from '../../mermaidAPI.js';
 import { sanitizeText } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
-import type { D3Element } from '../../mermaidAPI.js';
-import type { MindMapNode } from './mindmapTypes.js';
+import type { MindmapNode } from './mindmapTypes.js';
 
-let nodes: MindMapNode[] = [];
+let nodes: MindmapNode[] = [];
 let cnt = 0;
-let elements: Record = {};
+let elements: Record = {};
 
 const clear = () => {
   nodes = [];
@@ -14,7 +14,7 @@ const clear = () => {
   elements = {};
 };
 
-const getParent = function (level: number) {
+const getParent = function(level: number) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     if (nodes[i].level < level) {
       return nodes[i];
@@ -48,7 +48,7 @@ const addNode = (level: number, id: string, descr: string, type: number) => {
     children: [],
     width: conf.mindmap?.maxNodeWidth ?? 200,
     padding,
-  } satisfies MindMapNode;
+  } satisfies MindmapNode;
 
   const parent = getParent(level);
   if (parent) {
@@ -100,7 +100,7 @@ const getType = (startStr: string, endStr: string): number => {
   }
 };
 
-const setElementForId = (id: string, element: D3Element) => {
+const setElementForId = (id: number, element: D3Element) => {
   elements[id] = element;
 };
 
@@ -141,7 +141,7 @@ const type2Str = (type: number) => {
 
 // Expose logger to grammar
 const getLogger = () => log;
-const getElementById = (id: string) => elements[id];
+const getElementById = (id: number) => elements[id];
 
 const db = {
   clear,
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
index 04eed6b5a..6b9871567 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
@@ -6,7 +6,7 @@ import { drawNode, positionNode } from './svgDraw.js';
 import cytoscape from 'cytoscape';
 // @ts-expect-error No types available
 import coseBilkent from 'cytoscape-cose-bilkent';
-import type { MindMapNode, MindmapDB } from './mindmapTypes.js';
+import type { MindmapNode, MindmapDB, FilledMindMapNode } from './mindmapTypes.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type { Diagram } from '../../Diagram.js';
 import type { D3Element } from '../../mermaidAPI.js';
@@ -18,9 +18,9 @@ cytoscape.use(coseBilkent);
 function drawNodes(
   db: MindmapDB,
   svg: D3Element,
-  mindmap: MindMapNode,
+  mindmap: FilledMindMapNode,
   section: number,
-  conf: MermaidConfig
+  conf: MermaidConfigWithDefaults
 ) {
   drawNode(db, svg, mindmap, section, conf);
   if (mindmap.children) {
@@ -63,7 +63,7 @@ function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) {
   });
 }
 
-function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
+function addNodes(mindmap: MindmapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
   cy.add({
     group: 'nodes',
     data: {
@@ -99,7 +99,7 @@ function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig,
 }
 
 function layoutMindmap(
-  node: MindMapNode,
+  node: MindmapNode,
   conf: MermaidConfigWithDefaults
 ): Promise {
   return new Promise((resolve) => {
@@ -193,7 +193,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D
   edgesElem.attr('class', 'mindmap-edges');
   const nodesElem = svg.append('g');
   nodesElem.attr('class', 'mindmap-nodes');
-  drawNodes(db, nodesElem, mm, -1, conf);
+  drawNodes(db, nodesElem, mm as FilledMindMapNode, -1, conf);
 
   // Next step is to layout the mindmap, giving each node a position
 
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
index 28ec37c39..ced93ecac 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
@@ -1,12 +1,13 @@
+import { RequiredDeep } from 'type-fest';
 import type mindmapDb from './mindmapDb.js';
 
-export interface MindMapNode {
+export interface MindmapNode {
   id: number;
   nodeId: string;
   level: number;
   descr: string;
   type: number;
-  children: MindMapNode[];
+  children: MindmapNode[];
   width: number;
   padding: number;
   section?: number;
@@ -17,4 +18,5 @@ export interface MindMapNode {
   y?: number;
 }
 
+export type FilledMindMapNode = RequiredDeep;
 export type MindmapDB = typeof mindmapDb;
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
index 8d3340c6e..5670a8f6c 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
@@ -1,7 +1,13 @@
+import type { D3Element } from '../../mermaidAPI.js';
 import { createText } from '../../rendering-util/createText.js';
+import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
+import { MermaidConfigWithDefaults } from '../../config.js';
+import { Point } from '../../types.js';
 const MAX_SECTIONS = 12;
 
-const defaultBkg = function (db, elem, node, section) {
+type ShapeFunction = (db: MindmapDB, elem: D3Element, node: FilledMindMapNode, section?: number) => void;
+
+const defaultBkg: ShapeFunction = function(db, elem, node, section) {
   const rd = 5;
   elem
     .append('path')
@@ -9,8 +15,7 @@ const defaultBkg = function (db, elem, node, section) {
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
     .attr(
       'd',
-      `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${
-        node.width - 2 * rd
+      `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${node.width - 2 * rd
       } q5,0 5,5 v${node.height - rd} H0 Z`
     );
 
@@ -23,7 +28,7 @@ const defaultBkg = function (db, elem, node, section) {
     .attr('y2', node.height);
 };
 
-const rectBkg = function (db, elem, node) {
+const rectBkg: ShapeFunction = function(db, elem, node) {
   elem
     .append('rect')
     .attr('id', 'node-' + node.id)
@@ -32,7 +37,7 @@ const rectBkg = function (db, elem, node) {
     .attr('width', node.width);
 };
 
-const cloudBkg = function (db, elem, node) {
+const cloudBkg: ShapeFunction = function(db, elem, node) {
   const w = node.width;
   const h = node.height;
   const r1 = 0.15 * w;
@@ -63,7 +68,7 @@ const cloudBkg = function (db, elem, node) {
     );
 };
 
-const bangBkg = function (db, elem, node) {
+const bangBkg: ShapeFunction = function(db, elem, node) {
   const w = node.width;
   const h = node.height;
   const r = 0.15 * w;
@@ -95,7 +100,7 @@ const bangBkg = function (db, elem, node) {
     );
 };
 
-const circleBkg = function (db, elem, node) {
+const circleBkg: ShapeFunction = function(db, elem, node) {
   elem
     .append('circle')
     .attr('id', 'node-' + node.id)
@@ -111,13 +116,13 @@ const circleBkg = function (db, elem, node) {
  * @param points
  * @param node
  */
-function insertPolygonShape(parent, w, h, points, node) {
+function insertPolygonShape(parent: D3Element, w: number, h: number, points: Point[], node: FilledMindMapNode) {
   return parent
     .insert('polygon', ':first-child')
     .attr(
       'points',
       points
-        .map(function (d) {
+        .map(function(d) {
           return d.x + ',' + d.y;
         })
         .join(' ')
@@ -125,12 +130,12 @@ function insertPolygonShape(parent, w, h, points, node) {
     .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
 }
 
-const hexagonBkg = function (db, elem, node) {
+const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node: FilledMindMapNode) {
   const h = node.height;
   const f = 4;
   const m = h / f;
   const w = node.width - node.padding + 2 * m;
-  const points = [
+  const points: Point[] = [
     { x: m, y: 0 },
     { x: w - m, y: 0 },
     { x: w, y: -h / 2 },
@@ -138,10 +143,10 @@ const hexagonBkg = function (db, elem, node) {
     { x: m, y: -h },
     { x: 0, y: -h / 2 },
   ];
-  const shapeSvg = insertPolygonShape(elem, w, h, points, node);
+  insertPolygonShape(elem, w, h, points, node);
 };
 
-const roundedRectBkg = function (db, elem, node) {
+const roundedRectBkg: ShapeFunction = function(db, elem, node) {
   elem
     .append('rect')
     .attr('id', 'node-' + node.id)
@@ -153,14 +158,14 @@ const roundedRectBkg = function (db, elem, node) {
 };
 
 /**
- * @param {import('./mindmapTypes.js').MindmapDB} db The database
- * @param {object} elem The D3 dom element in which the node is to be added
- * @param {object} node The node to be added
+ * @param db The database
+ * @param elem The D3 dom element in which the node is to be added
+ * @param node The node to be added
  * @param fullSection
- * @param {object} conf The configuration object
- * @returns {number} The height nodes dom element
+ * @param conf The configuration object
+ * @returns The height nodes dom element
  */
-export const drawNode = function (db, elem, node, fullSection, conf) {
+export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMindMapNode, fullSection: number, conf: MermaidConfigWithDefaults): number {
   const htmlLabels = conf.htmlLabels;
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
@@ -190,6 +195,7 @@ export const drawNode = function (db, elem, node, fullSection, conf) {
   }
   // .call(wrap, node.width);
   const bbox = textElem.node().getBBox();
+  // @ts-expect-error TODO: Check if fontSize can be string?
   const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
   node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
   node.width = bbox.width + 2 * node.padding;
@@ -247,26 +253,26 @@ export const drawNode = function (db, elem, node, fullSection, conf) {
 
   switch (node.type) {
     case db.nodeType.DEFAULT:
-      defaultBkg(db, bkgElem, node, section, conf);
+      defaultBkg(db, bkgElem, node, section);
       break;
     case db.nodeType.ROUNDED_RECT:
-      roundedRectBkg(db, bkgElem, node, section, conf);
+      roundedRectBkg(db, bkgElem, node, section);
       break;
     case db.nodeType.RECT:
-      rectBkg(db, bkgElem, node, section, conf);
+      rectBkg(db, bkgElem, node, section);
       break;
     case db.nodeType.CIRCLE:
       bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')');
-      circleBkg(db, bkgElem, node, section, conf);
+      circleBkg(db, bkgElem, node, section);
       break;
     case db.nodeType.CLOUD:
-      cloudBkg(db, bkgElem, node, section, conf);
+      cloudBkg(db, bkgElem, node, section);
       break;
     case db.nodeType.BANG:
-      bangBkg(db, bkgElem, node, section, conf);
+      bangBkg(db, bkgElem, node, section);
       break;
     case db.nodeType.HEXAGON:
-      hexagonBkg(db, bkgElem, node, section, conf);
+      hexagonBkg(db, bkgElem, node, section);
       break;
   }
 
@@ -274,7 +280,7 @@ export const drawNode = function (db, elem, node, fullSection, conf) {
   return node.height;
 };
 
-export const positionNode = function (db, node) {
+export const positionNode = function(db: MindmapDB, node: FilledMindMapNode) {
   const nodeElem = db.getElementById(node.id);
 
   const x = node.x || 0;

From d21461fba03dcd01ec82d7b152b2bb1ac786d4b4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 12:27:17 +0530
Subject: [PATCH 117/193] Lint

---
 .../mermaid/src/diagrams/mindmap/mindmapDb.ts |  2 +-
 .../mermaid/src/diagrams/mindmap/svgDraw.ts   | 48 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
index c0fdd1257..e2b453a0d 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -14,7 +14,7 @@ const clear = () => {
   elements = {};
 };
 
-const getParent = function(level: number) {
+const getParent = function (level: number) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     if (nodes[i].level < level) {
       return nodes[i];
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
index 5670a8f6c..8fe47468b 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
@@ -5,9 +5,14 @@ import { MermaidConfigWithDefaults } from '../../config.js';
 import { Point } from '../../types.js';
 const MAX_SECTIONS = 12;
 
-type ShapeFunction = (db: MindmapDB, elem: D3Element, node: FilledMindMapNode, section?: number) => void;
+type ShapeFunction = (
+  db: MindmapDB,
+  elem: D3Element,
+  node: FilledMindMapNode,
+  section?: number
+) => void;
 
-const defaultBkg: ShapeFunction = function(db, elem, node, section) {
+const defaultBkg: ShapeFunction = function (db, elem, node, section) {
   const rd = 5;
   elem
     .append('path')
@@ -15,7 +20,8 @@ const defaultBkg: ShapeFunction = function(db, elem, node, section) {
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
     .attr(
       'd',
-      `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${node.width - 2 * rd
+      `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${
+        node.width - 2 * rd
       } q5,0 5,5 v${node.height - rd} H0 Z`
     );
 
@@ -28,7 +34,7 @@ const defaultBkg: ShapeFunction = function(db, elem, node, section) {
     .attr('y2', node.height);
 };
 
-const rectBkg: ShapeFunction = function(db, elem, node) {
+const rectBkg: ShapeFunction = function (db, elem, node) {
   elem
     .append('rect')
     .attr('id', 'node-' + node.id)
@@ -37,7 +43,7 @@ const rectBkg: ShapeFunction = function(db, elem, node) {
     .attr('width', node.width);
 };
 
-const cloudBkg: ShapeFunction = function(db, elem, node) {
+const cloudBkg: ShapeFunction = function (db, elem, node) {
   const w = node.width;
   const h = node.height;
   const r1 = 0.15 * w;
@@ -68,7 +74,7 @@ const cloudBkg: ShapeFunction = function(db, elem, node) {
     );
 };
 
-const bangBkg: ShapeFunction = function(db, elem, node) {
+const bangBkg: ShapeFunction = function (db, elem, node) {
   const w = node.width;
   const h = node.height;
   const r = 0.15 * w;
@@ -100,7 +106,7 @@ const bangBkg: ShapeFunction = function(db, elem, node) {
     );
 };
 
-const circleBkg: ShapeFunction = function(db, elem, node) {
+const circleBkg: ShapeFunction = function (db, elem, node) {
   elem
     .append('circle')
     .attr('id', 'node-' + node.id)
@@ -116,13 +122,19 @@ const circleBkg: ShapeFunction = function(db, elem, node) {
  * @param points
  * @param node
  */
-function insertPolygonShape(parent: D3Element, w: number, h: number, points: Point[], node: FilledMindMapNode) {
+function insertPolygonShape(
+  parent: D3Element,
+  w: number,
+  h: number,
+  points: Point[],
+  node: FilledMindMapNode
+) {
   return parent
     .insert('polygon', ':first-child')
     .attr(
       'points',
       points
-        .map(function(d) {
+        .map(function (d) {
           return d.x + ',' + d.y;
         })
         .join(' ')
@@ -130,7 +142,11 @@ function insertPolygonShape(parent: D3Element, w: number, h: number, points: Poi
     .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
 }
 
-const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node: FilledMindMapNode) {
+const hexagonBkg: ShapeFunction = function (
+  _db: MindmapDB,
+  elem: D3Element,
+  node: FilledMindMapNode
+) {
   const h = node.height;
   const f = 4;
   const m = h / f;
@@ -146,7 +162,7 @@ const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node
   insertPolygonShape(elem, w, h, points, node);
 };
 
-const roundedRectBkg: ShapeFunction = function(db, elem, node) {
+const roundedRectBkg: ShapeFunction = function (db, elem, node) {
   elem
     .append('rect')
     .attr('id', 'node-' + node.id)
@@ -165,7 +181,13 @@ const roundedRectBkg: ShapeFunction = function(db, elem, node) {
  * @param conf The configuration object
  * @returns The height nodes dom element
  */
-export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMindMapNode, fullSection: number, conf: MermaidConfigWithDefaults): number {
+export const drawNode = function (
+  db: MindmapDB,
+  elem: D3Element,
+  node: FilledMindMapNode,
+  fullSection: number,
+  conf: MermaidConfigWithDefaults
+): number {
   const htmlLabels = conf.htmlLabels;
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
@@ -280,7 +302,7 @@ export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMin
   return node.height;
 };
 
-export const positionNode = function(db: MindmapDB, node: FilledMindMapNode) {
+export const positionNode = function (db: MindmapDB, node: FilledMindMapNode) {
   const nodeElem = db.getElementById(node.id);
 
   const x = node.x || 0;

From 4c551b2acacff1648c1cf982b79edc7d72bc589e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 12:35:39 +0530
Subject: [PATCH 118/193] Lint

---
 .../src/diagrams/mindmap/mindmapTypes.ts      |  2 +-
 .../mermaid/src/diagrams/mindmap/svgDraw.ts   | 22 ++++++-------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
index ced93ecac..e8350477a 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
@@ -1,4 +1,4 @@
-import { RequiredDeep } from 'type-fest';
+import type { RequiredDeep } from 'type-fest';
 import type mindmapDb from './mindmapDb.js';
 
 export interface MindmapNode {
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
index 8fe47468b..797a3fd99 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
@@ -1,8 +1,8 @@
 import type { D3Element } from '../../mermaidAPI.js';
 import { createText } from '../../rendering-util/createText.js';
 import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
-import { MermaidConfigWithDefaults } from '../../config.js';
-import { Point } from '../../types.js';
+import type { MermaidConfigWithDefaults } from '../../config.js';
+import type { Point } from '../../types.js';
 const MAX_SECTIONS = 12;
 
 type ShapeFunction = (
@@ -114,14 +114,6 @@ const circleBkg: ShapeFunction = function (db, elem, node) {
     .attr('r', node.width / 2);
 };
 
-/**
- *
- * @param parent
- * @param w
- * @param h
- * @param points
- * @param node
- */
 function insertPolygonShape(
   parent: D3Element,
   w: number,
@@ -174,11 +166,11 @@ const roundedRectBkg: ShapeFunction = function (db, elem, node) {
 };
 
 /**
- * @param db The database
- * @param elem The D3 dom element in which the node is to be added
- * @param node The node to be added
- * @param fullSection
- * @param conf The configuration object
+ * @param db - The database
+ * @param elem - The D3 dom element in which the node is to be added
+ * @param node - The node to be added
+ * @param fullSection - ?
+ * @param conf - The configuration object
  * @returns The height nodes dom element
  */
 export const drawNode = function (

From a4a94fd6e2e913c09688acec4170e99de3e33a39 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 13:55:51 +0530
Subject: [PATCH 119/193] Update to Node v20

---
 .github/workflows/build.yml                   | 2 +-
 .github/workflows/e2e-applitools.yml          | 2 +-
 .github/workflows/e2e.yml                     | 4 ++--
 .github/workflows/lint.yml                    | 2 +-
 .github/workflows/release-preview-publish.yml | 2 +-
 .github/workflows/release-publish.yml         | 2 +-
 .github/workflows/test.yml                    | 2 +-
 Dockerfile                                    | 2 +-
 package.json                                  | 5 +----
 9 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 605dea9ab..0b3197df7 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 
diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml
index fd32e59ad..6be95bd51 100644
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index b8232b8c0..0d94de7bd 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4
@@ -60,7 +60,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v4
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index f0c5560a1..3255977ee 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 
diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index c6503847d..3c97ce9c5 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install Packages
         run: |
diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml
index 69ef74940..abf05ea6a 100644
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -18,7 +18,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install Packages
         run: |
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index a18b31c9c..fd390d002 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 
diff --git a/Dockerfile b/Dockerfile
index a62800109..33a1ebd37 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,2 +1,2 @@
-FROM node:18.19.0-alpine3.18 AS base
+FROM node:20.11.0-alpine3.19 AS base
 RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
diff --git a/package.json b/package.json
index 441484218..82dcccd54 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@types/jsdom": "^21.1.1",
     "@types/lodash": "^4.14.194",
     "@types/mdast": "^3.0.11",
-    "@types/node": "^18.16.0",
+    "@types/node": "^20.11.10",
     "@types/prettier": "^2.7.2",
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -122,9 +122,6 @@
     "vite-plugin-istanbul": "^4.1.0",
     "vitest": "^0.34.0"
   },
-  "volta": {
-    "node": "18.19.0"
-  },
   "nyc": {
     "report-dir": "coverage/cypress"
   }

From 52bb31b98aea9359138c00e7480830976e40a2e7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 13:56:03 +0530
Subject: [PATCH 120/193] Update to Node v20

---
 .node-version  |   1 +
 pnpm-lock.yaml | 177 ++++++++++++++++++++++++++-----------------------
 2 files changed, 94 insertions(+), 84 deletions(-)
 create mode 100644 .node-version

diff --git a/.node-version b/.node-version
new file mode 100644
index 000000000..7ea6a59d3
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+v20.11.0
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d950edef..583f5f123 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,8 +48,8 @@ importers:
         specifier: ^3.0.11
         version: 3.0.12
       '@types/node':
-        specifier: ^18.16.0
-        version: 18.17.5
+        specifier: ^20.11.10
+        version: 20.11.10
       '@types/prettier':
         specifier: ^2.7.2
         version: 2.7.2
@@ -136,7 +136,7 @@ importers:
         version: 8.0.3
       jest:
         specifier: ^29.5.0
-        version: 29.6.2(@types/node@18.17.5)(ts-node@10.9.1)
+        version: 29.6.2(@types/node@20.11.10)(ts-node@10.9.1)
       jison:
         specifier: ^0.4.18
         version: 0.4.18
@@ -181,7 +181,7 @@ importers:
         version: 5.1.6
       vite:
         specifier: ^4.4.12
-        version: 4.4.12(@types/node@18.17.5)
+        version: 4.4.12(@types/node@20.11.10)
       vite-plugin-istanbul:
         specifier: ^4.1.0
         version: 4.1.0(vite@4.4.12)
@@ -374,7 +374,7 @@ importers:
         version: 4.1.2
       vitepress:
         specifier: ^1.0.0-alpha.72
-        version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
+        version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@20.11.10)(search-insights@2.7.0)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
         version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.4.15)
@@ -470,13 +470,13 @@ importers:
         version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
       vite:
         specifier: ^4.4.12
-        version: 4.5.0(@types/node@18.17.5)
+        version: 4.5.0(@types/node@20.11.10)
       vite-plugin-pwa:
         specifier: ^0.17.0
         version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-rc.39
-        version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
+        version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@20.11.10)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -2662,7 +2662,7 @@ packages:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@20.11.10)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@swc/core'
@@ -3997,7 +3997,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       chalk: 4.1.2
       jest-message-util: 29.6.2
       jest-util: 29.6.2
@@ -4018,14 +4018,14 @@ packages:
       '@jest/test-result': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.8.0
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.5.0
-      jest-config: 29.6.2(@types/node@18.17.5)(ts-node@10.9.1)
+      jest-config: 29.6.2(@types/node@20.11.10)(ts-node@10.9.1)
       jest-haste-map: 29.6.2
       jest-message-util: 29.6.2
       jest-regex-util: 29.4.3
@@ -4053,7 +4053,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       jest-mock: 29.6.2
     dev: true
 
@@ -4080,7 +4080,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.1
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       jest-message-util: 29.6.2
       jest-mock: 29.6.2
       jest-util: 29.6.2
@@ -4113,7 +4113,7 @@ packages:
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
       '@jridgewell/trace-mapping': 0.3.19
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -4201,7 +4201,7 @@ packages:
       '@jest/schemas': 29.6.0
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       '@types/yargs': 17.0.24
       chalk: 4.1.2
     dev: true
@@ -4612,13 +4612,13 @@ packages:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/bonjour@3.5.10:
     resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/braces@3.0.2:
@@ -4630,7 +4630,7 @@ packages:
     dependencies:
       '@types/http-cache-semantics': 4.0.1
       '@types/keyv': 3.1.4
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       '@types/responselike': 1.0.0
     dev: true
 
@@ -4648,19 +4648,19 @@ packages:
     resolution: {integrity: sha512-4x5FkPpLipqwthjPsF7ZRbOv3uoLUFkTA9G9v583qi4pACvq0uTELrB8OLUzPWUI4IJIyvM85vzkV1nyiI2Lig==}
     dependencies:
       '@types/express-serve-static-core': 4.17.35
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/connect@3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/cors@2.8.13:
     resolution: {integrity: sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/cytoscape@3.19.9:
@@ -4895,7 +4895,7 @@ packages:
   /@types/express-serve-static-core@4.17.35:
     resolution: {integrity: sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
       '@types/send': 0.17.1
@@ -4922,20 +4922,20 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/glob@8.1.0:
     resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/http-cache-semantics@4.0.1:
@@ -4949,7 +4949,7 @@ packages:
   /@types/http-proxy@1.17.11:
     resolution: {integrity: sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/istanbul-lib-coverage@2.0.4:
@@ -4987,7 +4987,7 @@ packages:
   /@types/keyv@3.1.4:
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/linkify-it@3.0.2:
@@ -5058,6 +5058,12 @@ packages:
 
   /@types/node@18.17.5:
     resolution: {integrity: sha512-xNbS75FxH6P4UXTPUJp/zNPq6/xsfdJKussCWNOnz4aULWIRwMgP1LgaB5RiBnMX1DPCYenuqGZfnIAx5mbFLA==}
+    dev: true
+
+  /@types/node@20.11.10:
+    resolution: {integrity: sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==}
+    dependencies:
+      undici-types: 5.26.5
 
   /@types/node@20.4.7:
     resolution: {integrity: sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==}
@@ -5088,13 +5094,13 @@ packages:
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/responselike@1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/retry@0.12.0:
@@ -5104,7 +5110,7 @@ packages:
   /@types/rollup-plugin-visualizer@4.2.1:
     resolution: {integrity: sha512-Fk4y0EgmsSbvbayYhtSI9+cGvgw1rcQ9RlbExkQt4ivXRdiEwFKuRpxNuJCr0JktXIvOPUuPR7GSmtyZu0dujQ==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       rollup: 2.79.1
     dev: true
 
@@ -5116,7 +5122,7 @@ packages:
     resolution: {integrity: sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==}
     dependencies:
       '@types/mime': 1.3.2
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/serve-index@1.9.1:
@@ -5130,7 +5136,7 @@ packages:
     dependencies:
       '@types/http-errors': 2.0.1
       '@types/mime': 3.0.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/sinonjs__fake-timers@8.1.1:
@@ -5144,7 +5150,7 @@ packages:
   /@types/sockjs@0.3.33:
     resolution: {integrity: sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/stack-utils@2.0.1:
@@ -5185,7 +5191,7 @@ packages:
   /@types/ws@8.5.5:
     resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
 
   /@types/yargs-parser@21.0.0:
@@ -5202,7 +5208,7 @@ packages:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
     dev: true
     optional: true
 
@@ -5540,7 +5546,7 @@ packages:
       '@unocss/core': 0.58.0
       '@unocss/reset': 0.58.0
       '@unocss/vite': 0.58.0(rollup@2.79.1)(vite@4.5.0)
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5738,7 +5744,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5758,7 +5764,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
       vue: 3.3.4
     dev: true
 
@@ -5769,7 +5775,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
       vue: 3.3.4
     dev: true
 
@@ -5780,7 +5786,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.11(@types/node@18.17.5)
+      vite: 5.0.11(@types/node@20.11.10)
       vue: 3.4.15(typescript@5.1.6)
     dev: true
 
@@ -7756,7 +7762,7 @@ packages:
     dependencies:
       '@types/node': 20.4.7
       cosmiconfig: 8.2.0
-      ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@20.11.10)(typescript@5.1.6)
       typescript: 5.1.6
     dev: true
 
@@ -9266,7 +9272,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 6.7.2(@typescript-eslint/parser@6.7.2)(eslint@8.47.0)(typescript@5.1.6)
       '@typescript-eslint/utils': 5.62.0(eslint@8.47.0)(typescript@5.1.6)
       eslint: 8.47.0
-      jest: 29.6.2(@types/node@18.17.5)(ts-node@10.9.1)
+      jest: 29.6.2(@types/node@20.11.10)(ts-node@10.9.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9614,7 +9620,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/expect-utils': 29.6.2
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       jest-get-type: 29.4.3
       jest-matcher-utils: 29.6.2
       jest-message-util: 29.6.2
@@ -11287,7 +11293,7 @@ packages:
       '@jest/expect': 29.6.2
       '@jest/test-result': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.5.1
@@ -11308,7 +11314,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@29.6.2(@types/node@18.17.5)(ts-node@10.9.1):
+  /jest-cli@29.6.2(@types/node@20.11.10)(ts-node@10.9.1):
     resolution: {integrity: sha512-TT6O247v6dCEX2UGHGyflMpxhnrL0DNqP2fRTKYm3nJJpCTfXX3GCMQPGFjXDoj0i5/Blp3jriKXFgdfmbYB6Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -11325,7 +11331,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 29.6.2(@types/node@18.17.5)(ts-node@10.9.1)
+      jest-config: 29.6.2(@types/node@20.11.10)(ts-node@10.9.1)
       jest-util: 29.6.2
       jest-validate: 29.6.2
       prompts: 2.4.2
@@ -11337,7 +11343,7 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.6.2(@types/node@18.17.5)(ts-node@10.9.1):
+  /jest-config@29.6.2(@types/node@20.11.10)(ts-node@10.9.1):
     resolution: {integrity: sha512-VxwFOC8gkiJbuodG9CPtMRjBUNZEHxwfQXmIudSTzFWxaci3Qub1ddTRbFNQlD/zUeaifLndh/eDccFX4wCMQw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -11352,7 +11358,7 @@ packages:
       '@babel/core': 7.22.10
       '@jest/test-sequencer': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       babel-jest: 29.6.2(@babel/core@7.22.10)
       chalk: 4.1.2
       ci-info: 3.8.0
@@ -11372,7 +11378,7 @@ packages:
       pretty-format: 29.6.2
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@20.11.10)(typescript@5.1.6)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -11413,7 +11419,7 @@ packages:
       '@jest/environment': 29.6.2
       '@jest/fake-timers': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       jest-mock: 29.6.2
       jest-util: 29.6.2
     dev: true
@@ -11429,7 +11435,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.1
       '@types/graceful-fs': 4.1.6
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -11451,7 +11457,7 @@ packages:
       chalk: 1.1.3
       get-stdin: 5.0.1
       glur: 1.1.2
-      jest: 29.6.2(@types/node@18.17.5)(ts-node@10.9.1)
+      jest: 29.6.2(@types/node@20.11.10)(ts-node@10.9.1)
       lodash: 4.17.21
       mkdirp: 0.5.6
       pixelmatch: 5.3.0
@@ -11498,7 +11504,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       jest-util: 29.6.2
     dev: true
 
@@ -11553,7 +11559,7 @@ packages:
       '@jest/test-result': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.11
@@ -11584,7 +11590,7 @@ packages:
       '@jest/test-result': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       chalk: 4.1.2
       cjs-module-lexer: 1.2.3
       collect-v8-coverage: 1.0.2
@@ -11636,7 +11642,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       chalk: 4.1.2
       ci-info: 3.8.0
       graceful-fs: 4.2.11
@@ -11661,7 +11667,7 @@ packages:
     dependencies:
       '@jest/test-result': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -11673,7 +11679,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -11682,7 +11688,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -11691,13 +11697,13 @@ packages:
     resolution: {integrity: sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       jest-util: 29.6.2
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
 
-  /jest@29.6.2(@types/node@18.17.5)(ts-node@10.9.1):
+  /jest@29.6.2(@types/node@20.11.10)(ts-node@10.9.1):
     resolution: {integrity: sha512-8eQg2mqFbaP7CwfsTpCxQ+sHzw1WuNWL5UUvjnWP4hx2riGz9fPSzYOaU5q8/GqWn1TfgZIVTqYJygbGbWAANg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -11710,7 +11716,7 @@ packages:
       '@jest/core': 29.6.2(ts-node@10.9.1)
       '@jest/types': 29.6.1
       import-local: 3.1.0
-      jest-cli: 29.6.2(@types/node@18.17.5)(ts-node@10.9.1)
+      jest-cli: 29.6.2(@types/node@20.11.10)(ts-node@10.9.1)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -13790,7 +13796,7 @@ packages:
     dependencies:
       lilconfig: 2.1.0
       postcss: 8.4.31
-      ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@20.11.10)(typescript@5.1.6)
       yaml: 2.3.1
     dev: false
 
@@ -15582,7 +15588,7 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: false
 
-  /ts-node@10.9.1(@types/node@18.17.5)(typescript@5.1.6):
+  /ts-node@10.9.1(@types/node@20.11.10)(typescript@5.1.6):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -15601,7 +15607,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       acorn: 8.10.0
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -15856,6 +15862,9 @@ packages:
     resolution: {integrity: sha512-w4QtCHoLBXw1mjofIDoMyexaEdWGMedWNDhlWTtT1V1lCRqi65Pnoygkh6+WRdr+Bm8ldkBNkNeCsXGMlQS9HQ==}
     dev: true
 
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+
   /unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
     engines: {node: '>=4'}
@@ -15987,7 +15996,7 @@ packages:
       '@unocss/transformer-directives': 0.58.0
       '@unocss/transformer-variant-group': 0.58.0
       '@unocss/vite': 0.58.0(rollup@2.79.1)(vite@4.5.0)
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -16148,7 +16157,7 @@ packages:
       vfile-message: 3.1.4
     dev: true
 
-  /vite-node@0.34.0(@types/node@18.17.5):
+  /vite-node@0.34.0(@types/node@20.11.10):
     resolution: {integrity: sha512-rGZMvpb052rjUwJA/a17xMfOibzNF7byMdRSTcN2Lw8uxX08s5EfjWW5mBkm3MSFTPctMSVtT2yC+8ShrZbT5g==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -16158,7 +16167,7 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -16179,7 +16188,7 @@ packages:
       istanbul-lib-instrument: 5.2.1
       picocolors: 1.0.0
       test-exclude: 6.0.0
-      vite: 4.4.12(@types/node@18.17.5)
+      vite: 4.4.12(@types/node@20.11.10)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -16195,14 +16204,14 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.3.2
       pretty-bytes: 6.1.1
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
       workbox-build: 7.0.0
       workbox-window: 7.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite@4.4.12(@types/node@18.17.5):
+  /vite@4.4.12(@types/node@20.11.10):
     resolution: {integrity: sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -16230,7 +16239,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.28.0
@@ -16238,7 +16247,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@4.5.0(@types/node@18.17.5):
+  /vite@4.5.0(@types/node@20.11.10):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -16266,7 +16275,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.28.0
@@ -16274,7 +16283,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@5.0.11(@types/node@18.17.5):
+  /vite@5.0.11(@types/node@20.11.10):
     resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -16302,7 +16311,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       esbuild: 0.19.6
       postcss: 8.4.33
       rollup: 4.5.0
@@ -16323,11 +16332,11 @@ packages:
       flexsearch: 0.7.31
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
+      vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@20.11.10)(search-insights@2.7.0)
       vue: 3.4.15(typescript@5.0.4)
     dev: true
 
-  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
+  /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@20.11.10)(search-insights@2.7.0):
     resolution: {integrity: sha512-Ou7fNE/OVYLrKGQMHSTVG6AcNsdv7tm4ACrdhx93SPMzEDj8UgIb4RFa5CTTowaYf3jeDGi2EAJlzXVC+IE3dg==}
     hasBin: true
     dependencies:
@@ -16340,7 +16349,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
-      vite: 4.5.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -16358,7 +16367,7 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6):
+  /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@20.11.10)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6):
     resolution: {integrity: sha512-EcgoRlAAp37WOxUOYv45oxyhLrcy3Upey+mKpqW3ldsg6Ol4trPndRBk2GO0QiSvEKlb9BMerk49D/bFICN6kg==}
     hasBin: true
     peerDependencies:
@@ -16384,7 +16393,7 @@ packages:
       shikiji: 0.9.19
       shikiji-core: 0.9.19
       shikiji-transformers: 0.9.19
-      vite: 5.0.11(@types/node@18.17.5)
+      vite: 5.0.11(@types/node@20.11.10)
       vue: 3.4.15(typescript@5.1.6)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -16447,7 +16456,7 @@ packages:
     dependencies:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
-      '@types/node': 18.17.5
+      '@types/node': 20.11.10
       '@vitest/expect': 0.34.0
       '@vitest/runner': 0.34.0
       '@vitest/snapshot': 0.34.0
@@ -16468,8 +16477,8 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.0
       tinypool: 0.7.0
-      vite: 4.5.0(@types/node@18.17.5)
-      vite-node: 0.34.0(@types/node@18.17.5)
+      vite: 4.5.0(@types/node@20.11.10)
+      vite-node: 0.34.0(@types/node@20.11.10)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

From dd553cb28f2825ee0d4134ac055e42eadb950c91 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 16:44:44 +0530
Subject: [PATCH 121/193] Remove node version from matrix

---
 .github/workflows/build.yml | 10 +++++-----
 .github/workflows/e2e.yml   |  6 +++---
 .github/workflows/lint.yml  | 10 +++++-----
 .github/workflows/test.yml  | 10 +++++-----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 0b3197df7..b7589aee1 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -12,23 +12,23 @@ on:
 permissions:
   contents: read
 
+env:
+  node-version: 20.x
+
 jobs:
   build-mermaid:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       - name: Install Packages
         run: |
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 0d94de7bd..3334fdcb6 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -17,6 +17,7 @@ permissions:
   contents: read
 
 env:
+  node-version: 20.x
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
   targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before)  }}
 
@@ -60,7 +61,6 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [20.x]
         containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v4
@@ -68,10 +68,10 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 3255977ee..3c9316dd7 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -13,23 +13,23 @@ on:
 permissions:
   contents: write
 
+env:
+  node-version: 20.x
+
 jobs:
   lint:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       - name: Install Packages
         run: |
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index fd390d002..6217192fe 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -5,23 +5,23 @@ on: [push, pull_request, merge_group]
 permissions:
   contents: read
 
+env:
+  node-version: 20.x
+
 jobs:
   unit-test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       - name: Install Packages
         run: |

From 1965f69a10f8c41863065e22e5fb1551762024ad Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 29 Jan 2024 15:29:26 +0100
Subject: [PATCH 122/193] Update
 packages/mermaid/src/schemas/config.schema.yaml

Co-authored-by: Alois Klink 
---
 packages/mermaid/src/schemas/config.schema.yaml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 7278d5a79..b7925d042 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -2034,8 +2034,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
     type: object
     unevaluatedProperties: false
     properties:
-      useMaxWidth:
-        default: false
       padding:
         default: 8
 

From 37d7c7e2ddbc61d7473f2870f321e28df8513dbd Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 29 Jan 2024 16:22:48 +0100
Subject: [PATCH 123/193] #3358 Second set of changes after review

---
 cypress/platform/knsv2.html                   |  16 +-
 demos/block.html                              | 126 +++++-
 docs/syntax/block.md                          |  44 +-
 .../src/dagre-wrapper/blockArrowHelper.js     | 288 +++++++------
 packages/mermaid/src/dagre-wrapper/edges.js   |  93 +---
 packages/mermaid/src/dagre-wrapper/nodes.js   |  23 +-
 .../mermaid/src/dagre-wrapper/shapes/util.js  |   4 +-
 .../mermaid/src/diagrams/block/blockDB.ts     | 110 ++---
 packages/mermaid/src/docs/syntax/block.md     |  29 +-
 pnpm-lock.yaml                                | 398 +-----------------
 10 files changed, 376 insertions(+), 755 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 8c6bf8a63..847a8bf24 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -64,14 +64,14 @@
   
   
     
    -block-beta
-columns 3
-a:3
-block:e:3
-f
-end
-g
-
+      block-beta
+  blockArrowId<["Label"]>(right)
+  blockArrowId2<["Label"]>(left)
+  blockArrowId3<["Label"]>(up)
+  blockArrowId4<["Label"]>(down)
+  blockArrowId5<["Label"]>(x)
+  blockArrowId6<["Label"]>(y)
+  blockArrowId6<["Label"]>(x, down)
     
    
     
     block-beta
diff --git a/demos/block.html b/demos/block.html
index 406350611..03db61fad 100644
--- a/demos/block.html
+++ b/demos/block.html
@@ -3,23 +3,125 @@
   
     
     
-    States Mermaid Quick Test Page
+    Mermaid Block diagram demo page
     
-    
   
 
   
     
    Block diagram demos
    
-    
    TCI IP
    
-    
    -  block-beta
-      A>"rect_left_inv_arrow"]
-      B{"diamond"}
-      C{{"hexagon"}}
+    
    +block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["   "]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
+    
    
+    
    +block-beta
+    A1["square"]
+    B1("rounded")
+    C1(("circle"))
+    A2>"rect_left_inv_arrow"]
+    B2{"diamond"}
+    C2{{"hexagon"}}
+    
    
+
+    
    +block-beta
+    A1(["stadium"])
+    A2[["subroutine"]]
+    B1[("cylinder")]
+    C1>"surprise"]
+    A3[/"lean right"/]
+    B2[\"lean left"\]
+    C2[/"trapezoid"\]
+    D2[\"trapezoid"/]
+    
    
+
+    
    +block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+    
    
+    
    +block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+    
    
+    
    +block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
+
+    
    
+    
    +block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4
+
+    
    
+    
    +flowchart LR
+  X-- "a label" -->z
+    
    
+    
    +block-beta
+columns 5
+   A space B
+   A --x B
+    
    
+    
    +block-beta
+columns 3
+  a["A wide one"] b:2 c:2 d
+    
    
+
+    
    +block-beta
+columns 3
+  a b c
+  e:3
+  f g h
+    
    
+
+    
    +block-beta
+
+  A1:3
+  A2:1
+  A3