diff --git a/.eslintrc.json b/.eslintrc.json index b8053795ec..9d7eacecd2 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,26 +16,27 @@ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", - "plugin:jsdoc/recommended", "plugin:json/recommended", "plugin:markdown/recommended", + "plugin:@cspell/recommended", "prettier" ], - "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"], + "plugins": [ + "@typescript-eslint", + "no-only-tests", + "html", + "jest", + "jsdoc", + "json", + "@cspell", + "lodash", + "unicorn" + ], "rules": { + "curly": "error", "no-console": "error", "no-prototype-builtins": "off", "no-unused-vars": "off", - "jsdoc/check-indentation": "off", - "jsdoc/check-alignment": "off", - "jsdoc/check-line-alignment": "off", - "jsdoc/multiline-blocks": "off", - "jsdoc/newline-after-description": "off", - "jsdoc/tag-lines": "off", - "jsdoc/require-param-description": "off", - "jsdoc/require-param-type": "off", - "jsdoc/require-returns": "off", - "jsdoc/require-returns-description": "off", "cypress/no-async-tests": "off", "@typescript-eslint/ban-ts-comment": [ "error", @@ -48,7 +49,44 @@ } ], "json/*": ["error", "allowComments"], - "no-empty": ["error", { "allowEmptyCatch": true }] + "@cspell/spellchecker": [ + "error", + { + "checkIdentifiers": false, + "checkStrings": false, + "checkStringTemplates": false + } + ], + "no-empty": [ + "error", + { + "allowEmptyCatch": true + } + ], + "no-only-tests/no-only-tests": "error", + "lodash/import-scope": ["error", "method"], + "unicorn/better-regex": "error", + "unicorn/no-abusive-eslint-disable": "error", + "unicorn/no-array-push-push": "error", + "unicorn/no-for-loop": "error", + "unicorn/no-instanceof-array": "error", + "unicorn/no-typeof-undefined": "error", + "unicorn/no-unnecessary-await": "error", + "unicorn/no-unsafe-regex": "warn", + "unicorn/no-useless-promise-resolve-reject": "error", + "unicorn/prefer-array-find": "error", + "unicorn/prefer-array-flat-map": "error", + "unicorn/prefer-array-index-of": "error", + "unicorn/prefer-array-some": "error", + "unicorn/prefer-default-parameters": "error", + "unicorn/prefer-includes": "error", + "unicorn/prefer-negative-index": "error", + "unicorn/prefer-object-from-entries": "error", + "unicorn/prefer-string-starts-ends-with": "error", + "unicorn/prefer-string-trim-start-end": "error", + "unicorn/string-content": "error", + "unicorn/prefer-spread": "error", + "unicorn/no-lonely-if": "error" }, "overrides": [ { @@ -57,6 +95,29 @@ "no-console": "off" } }, + { + "files": ["*.{js,jsx,mjs,cjs}"], + "extends": ["plugin:jsdoc/recommended"], + "rules": { + "jsdoc/check-indentation": "off", + "jsdoc/check-alignment": "off", + "jsdoc/check-line-alignment": "off", + "jsdoc/multiline-blocks": "off", + "jsdoc/newline-after-description": "off", + "jsdoc/tag-lines": "off", + "jsdoc/require-param-description": "off", + "jsdoc/require-param-type": "off", + "jsdoc/require-returns": "off", + "jsdoc/require-returns-description": "off" + } + }, + { + "files": ["*.{ts,tsx}"], + "plugins": ["tsdoc"], + "rules": { + "tsdoc/syntax": "error" + } + }, { "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"], "rules": { diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index bd0f34e334..8710d49aa4 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -3,9 +3,6 @@ contact_links: - name: GitHub Discussions url: https://github.com/mermaid-js/mermaid/discussions about: Ask the Community questions or share your own graphs in our discussions. - - name: Security Vulnerability - url: https://github.com/mermaid-js/.github/blob/main/SECURITY.md - about: Report security issues confidentially. - name: Slack url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE about: Join our Community on Slack for Help and a casual chat. diff --git a/.github/dependabot.yml b/.github/dependabot.yml deleted file mode 100644 index 5add84f225..0000000000 --- a/.github/dependabot.yml +++ /dev/null @@ -1,18 +0,0 @@ -version: 2 -updates: - - package-ecosystem: npm - open-pull-requests-limit: 10 - directory: / - target-branch: develop - versioning-strategy: increase - schedule: - interval: weekly - day: monday - time: '07:00' - - package-ecosystem: github-actions - directory: / - target-branch: develop - schedule: - interval: weekly - day: monday - time: '07:00' diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml deleted file mode 100644 index 1e08a5c16b..0000000000 --- a/.github/workflows/docs.yml +++ /dev/null @@ -1,28 +0,0 @@ -name: Documentation Checks - -on: - push: - branches: - - develop - paths: - - 'packages/mermaid/src/docs/**/*' - pull_request: - branches: - - develop - paths: - - 'packages/mermaid/src/docs/**/*' -jobs: - spellcheck: - name: 'Docs: Spellcheck' - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - name: Check out the code - - uses: actions/setup-node@v1 - name: Setup node - with: - node-version: '16' - - run: npm install -g cspell - name: Install cSpell - - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress - name: Run cSpell diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml new file mode 100644 index 0000000000..fbf03cb398 --- /dev/null +++ b/.github/workflows/link-checker.yml @@ -0,0 +1,45 @@ +# This Link Checker is run on all documentation files once per week. + +# references: +# - https://github.com/lycheeverse/lychee-action +# - https://github.com/lycheeverse/lychee + +name: Link Checker + +on: + push: + branches: + - develop + - master + pull_request: + branches: + - develop + - master + schedule: + # * is a special character in YAML so you have to quote this string + - cron: '30 8 * * 5' + +jobs: + linkChecker: + runs-on: ubuntu-latest + permissions: + # lychee only uses the GITHUB_TOKEN to avoid rate-limiting + contents: read + steps: + - uses: actions/checkout@v3 + + - name: Restore lychee cache + uses: actions/cache@v3 + with: + path: .lycheecache + key: cache-lychee-${{ github.sha }} + restore-keys: cache-lychee- + + - name: Link Checker + uses: lycheeverse/lychee-action@v1.5.4 + with: + args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md + fail: true + jobSummary: true + env: + GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 9adbb177c3..d671445400 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -9,7 +9,7 @@ on: - ready_for_review permissions: - contents: read + contents: write jobs: lint: @@ -39,4 +39,19 @@ jobs: run: pnpm run lint - name: Verify Docs + id: verifyDocs + working-directory: ./packages/mermaid + continue-on-error: ${{ github.event_name == 'push' }} run: pnpm run docs:verify + + - name: Rebuild Docs + if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }} + working-directory: ./packages/mermaid + run: pnpm run docs:build + + - name: Commit changes + uses: EndBug/add-and-commit@v9 + if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }} + with: + message: 'Update docs' + add: 'docs/*' diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml new file mode 100644 index 0000000000..85bc79f6eb --- /dev/null +++ b/.github/workflows/publish-docs.yml @@ -0,0 +1,62 @@ +name: Deploy Vitepress docs to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: + - master + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment +concurrency: + group: 'pages' + cancel-in-progress: true + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + + - uses: pnpm/action-setup@v2 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + cache: pnpm + node-version: 18 + + - name: Install Packages + run: pnpm install --frozen-lockfile + + - name: Setup Pages + uses: actions/configure-pages@v2 + + - name: Run Build + run: pnpm --filter mermaid run docs:build:vitepress + + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + path: packages/mermaid/src/vitepress/.vitepress/dist + + # Deployment job + deploy: + environment: + name: github-pages + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/.gitignore b/.gitignore index 9c466bc268..f29286825a 100644 --- a/.gitignore +++ b/.gitignore @@ -32,6 +32,7 @@ cypress/snapshots/ .eslintcache .tsbuildinfo tsconfig.tsbuildinfo -knsv*.html +knsv*.html local*.html +stats/ diff --git a/.lintstagedrc.json b/.lintstagedrc.json deleted file mode 100644 index be6e927702..0000000000 --- a/.lintstagedrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"], - "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"], - "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"], - "*.jison": ["pnpm run lint:jison"] -} diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs new file mode 100644 index 0000000000..ff1d8c1074 --- /dev/null +++ b/.lintstagedrc.mjs @@ -0,0 +1,5 @@ +export default { + '!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'], + 'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'], + '**/*.jison': ['pnpm -w run lint:jison'], +}; diff --git a/.lycheeignore b/.lycheeignore new file mode 100644 index 0000000000..767906b16a --- /dev/null +++ b/.lycheeignore @@ -0,0 +1,13 @@ +# These links are ignored by our link checker https://github.com/lycheeverse/lychee +# The file allows you to list multiple regular expressions for exclusion (one pattern per line). + +# Network error: Forbidden +https://codepen.io + +# Network error: The certificate was not trusted +https://mkdocs.org/ +https://osawards.com/javascript/#nominees +https://osawards.com/javascript/2019 + +# Don't check files that are generated during the build via `pnpm docs:code` +packages/mermaid/src/docs/config/setup/* diff --git a/.npmrc b/.npmrc index 0214788b4c..2896843026 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,3 @@ auto-install-peers=true strict-peer-dependencies=false -use-inline-specifiers-lockfile-format=true \ No newline at end of file +use-inline-specifiers-lockfile-format=true diff --git a/.prettierignore b/.prettierignore index fe2c55574b..b66f97d1ca 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,4 +3,5 @@ cypress/platform/xss3.html .cache coverage # Autogenerated by PNPM -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +stats \ No newline at end of file diff --git a/.vite/build.ts b/.vite/build.ts index 2b686b7653..1be46ad5ad 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -1,9 +1,12 @@ -import { build, InlineConfig } from 'vite'; +import { build, InlineConfig, type PluginOption } from 'vite'; import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; import { readFileSync } from 'fs'; +import { visualizer } from 'rollup-plugin-visualizer'; +import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js'; +const visualize = process.argv.includes('--visualize'); const watch = process.argv.includes('--watch'); const mermaidOnly = process.argv.includes('--mermaid'); const __dirname = fileURLToPath(new URL('.', import.meta.url)); @@ -13,6 +16,20 @@ type OutputOptions = Exclude< undefined >['output']; +const visualizerOptions = (packageName: string, core = false): PluginOption[] => { + if (packageName !== 'mermaid' || !visualize) { + return []; + } + return ['network', 'treemap', 'sunburst'].map((chartType) => + visualizer({ + filename: `./stats/${chartType}${core ? '.core' : ''}.html`, + template: chartType as TemplateType, + gzipSize: true, + brotliSize: true, + }) + ); +}; + const packageOptions = { mermaid: { name: 'mermaid', @@ -39,7 +56,7 @@ interface BuildOptions { } export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => { - const external = ['require', 'fs', 'path']; + const external: (string | RegExp)[] = ['require', 'fs', 'path']; console.log(entryName, packageOptions[entryName]); const { name, file, packageName } = packageOptions[entryName]; let output: OutputOptions = [ @@ -63,7 +80,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) ); // Core build is used to generate file without bundled dependencies. // This is used by downstream projects to bundle dependencies themselves. - external.push(...Object.keys(dependencies)); + // Ignore dependencies and any dependencies of dependencies + // Adapted from the RegEx used by `rollup-plugin-node` + external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$')); // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd. output = [ { @@ -95,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) resolve: { extensions: ['.jison', '.js', '.ts', '.json'], }, - plugins: [jisonPlugin()], + plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)], }; if (watch && config.build) { @@ -121,10 +140,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => { const main = async () => { const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; - for (const pkg of packageNames) { - if (mermaidOnly && pkg !== 'mermaid') { - continue; - } + for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) { await buildPackage(pkg); } }; @@ -135,6 +151,9 @@ if (watch) { build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); } +} else if (visualize) { + await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); + await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' })); } else { void main(); } diff --git a/.vscode/launch.json b/.vscode/launch.json index 92df7056e1..83b80fa403 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -12,6 +12,17 @@ "args": ["run", "${relativeFile}"], "smartStep": true, "console": "integratedTerminal" + }, + { + "name": "Docs generation", + "type": "node", + "request": "launch", + "args": ["src/docs.mts"], + "runtimeArgs": ["--loader", "ts-node/esm"], + "cwd": "${workspaceRoot}/packages/mermaid", + "skipFiles": ["/**", "**/node_modules/**"], + "smartStep": true, + "internalConsoleOptions": "openOnSessionStart" } ] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ed436a8d1a..cf199c39b6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo - Large changes reviewed by knsv or other developer asked to review by knsv - Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators -- Documentation (updates to the `src/docs` folder is also allowed via direct commits) +- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits) To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text. @@ -67,31 +67,22 @@ flowchart LR ### The official documentation site -**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.** +**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.** -If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`: +If you want to preview the whole documentation site on your machine: ```sh -$ npm i docsify-cli -g +cd packages/mermaid +pnpm i +pnpm docs:dev ``` -If you are more familiar with Yarn, you can use the following command: +You can now build and serve the documentation site: ```sh -$ yarn global add docsify-cli +pnpm docs:serve ``` -The above command will install `docsify-cli` globally. -If the installation is successful, the command `docsify` will be available in your `PATH`. - -You can now run the following command to serve the documentation site: - -```sh -$ docsify serve docs -``` - -Once the local HTTP server is listening, you can point your browser at http://localhost:3000. - ## Branching Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop. @@ -152,7 +143,7 @@ The source files for documentation are in `/packages/mermaid/src/docs` and are w #### Adding to or changing the documentation organization -If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`. +If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`. When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/ diff --git a/README.md b/README.md index 90ae1ad4cd..059940a028 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,6 @@ # mermaid -[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) - -# Whoa, what's going on here? - -We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will: - -- Make it possible to select which diagrams to include on your site -- Open up for lazy loading -- Make it possible to add diagrams from outside of the Mermaid repository -- Separate the release flow between different diagrams and the Mermaid core - -As such be aware of some changes.. - -# We use pnpm now - -# The source code has moved - -It is now located in the src folder for each respective package located as subfolders in packages. +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) English | [简体中文](./README.zh-CN.md) @@ -43,12 +26,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
-[Tutorials](./docs/Tutorials.md) has video tutorials. -Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md). +[Tutorials](./docs/config/Tutorials.md) has video tutorials. +Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md). -You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md). +You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md). -For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md). +For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md). 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md) @@ -354,7 +337,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio A quick note from Knut Sveidqvist: -> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._ +> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ +> +> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ +> +> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._ > > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_ diff --git a/README.zh-CN.md b/README.zh-CN.md index fcaa1f5234..4bdbc4ae7d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,6 +1,6 @@ # mermaid -[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) [English](./README.md) | 简体中文 @@ -24,9 +24,9 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。
-你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 +你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 -如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md). +如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md). 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md) @@ -39,7 +39,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma -### 流程图 [文档 - live editor] +### 流程图 [文档 - live editor] ``` flowchart LR @@ -57,7 +57,7 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` -### 时序图 [文档 - live editor] +### 时序图 [文档 - live editor] ``` sequenceDiagram @@ -83,7 +83,7 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -### 甘特图 [文档 - live editor] +### 甘特图 [文档 - live editor] ``` gantt @@ -107,7 +107,7 @@ gantt Parallel 4 : des6, after des4, 1d ``` -### 类图 [文档 - live editor] +### 类图 [文档 - live editor] ``` classDiagram @@ -147,7 +147,7 @@ class Class10 { } ``` -### 状态图 [[docs - live editor] +### 状态图 [[docs - live editor] ``` stateDiagram-v2 @@ -169,7 +169,7 @@ Moving --> Crash Crash --> [*] ``` -### 饼图 [文档 - live editor] +### 饼图 [文档 - live editor] ``` pie @@ -185,9 +185,9 @@ pie "Rats" : 15 ``` -### Git 图 [实验特性 - live editor] +### Git 图 [实验特性 - live editor] -### 用户体验旅程图 [文档 - live editor] +### 用户体验旅程图 [文档 - live editor] ``` journey diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js new file mode 100644 index 0000000000..576d5d8634 --- /dev/null +++ b/__mocks__/c4Renderer.js @@ -0,0 +1,21 @@ +/** + * Mocked C4Context diagram renderer + */ + +import { vi } from 'vitest'; + +export const drawPersonOrSystemArray = vi.fn(); +export const drawBoundary = vi.fn(); + +export const setConf = vi.fn(); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + drawPersonOrSystemArray, + drawBoundary, + setConf, + draw, +}; diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js new file mode 100644 index 0000000000..1ad95806fc --- /dev/null +++ b/__mocks__/classRenderer-v2.js @@ -0,0 +1,16 @@ +/** + * Mocked class diagram v2 renderer + */ + +import { vi } from 'vitest'; + +export const setConf = vi.fn(); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + setConf, + draw, +}; diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js new file mode 100644 index 0000000000..1c20de4b18 --- /dev/null +++ b/__mocks__/classRenderer.js @@ -0,0 +1,13 @@ +/** + * Mocked class diagram renderer + */ + +import { vi } from 'vitest'; + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + draw, +}; diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts index 67f09b6f4f..af35020c57 100644 --- a/__mocks__/d3.ts +++ b/__mocks__/d3.ts @@ -1,67 +1,14 @@ // @ts-nocheck TODO: Fix TS -import { vi } from 'vitest'; - -const NewD3 = function () { - /** - * - */ - function returnThis() { - return this; - } - return { - append: function () { - return NewD3(); - }, - lower: returnThis, - attr: returnThis, - style: returnThis, - text: returnThis, - 0: { - 0: { - getBBox: function () { - return { - height: 10, - width: 20, - }; - }, - }, - }, - }; -}; +import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3'; export const select = function () { - return new NewD3(); + return new MockedD3(); }; export const selectAll = function () { - return new NewD3(); + return new MockedD3(); }; export const curveBasis = 'basis'; export const curveLinear = 'linear'; export const curveCardinal = 'cardinal'; - -export const MockD3 = (name, parent) => { - const children = []; - const elem = { - get __children() { - return children; - }, - get __name() { - return name; - }, - get __parent() { - return parent; - }, - }; - elem.append = (name) => { - const mockElem = MockD3(name, elem); - children.push(mockElem); - return mockElem; - }; - elem.lower = vi.fn(() => elem); - elem.attr = vi.fn(() => elem); - elem.text = vi.fn(() => elem); - elem.style = vi.fn(() => elem); - return elem; -}; diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js new file mode 100644 index 0000000000..845d641f75 --- /dev/null +++ b/__mocks__/erRenderer.js @@ -0,0 +1,16 @@ +/** + * Mocked er diagram renderer + */ + +import { vi } from 'vitest'; + +export const setConf = vi.fn(); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + setConf, + draw, +}; diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js new file mode 100644 index 0000000000..89cc86031e --- /dev/null +++ b/__mocks__/flowRenderer-v2.js @@ -0,0 +1,24 @@ +/** + * Mocked flow (flowchart) diagram v2 renderer + */ + +import { vi } from 'vitest'; + +export const setConf = vi.fn(); +export const addVertices = vi.fn(); +export const addEdges = vi.fn(); +export const getClasses = vi.fn().mockImplementation(() => { + return {}; +}); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + setConf, + addVertices, + addEdges, + getClasses, + draw, +}; diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js new file mode 100644 index 0000000000..9572498321 --- /dev/null +++ b/__mocks__/ganttRenderer.js @@ -0,0 +1,16 @@ +/** + * Mocked gantt diagram renderer + */ + +import { vi } from 'vitest'; + +export const setConf = vi.fn(); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + setConf, + draw, +}; diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js new file mode 100644 index 0000000000..1daa82ca4c --- /dev/null +++ b/__mocks__/gitGraphRenderer.js @@ -0,0 +1,13 @@ +/** + * Mocked git (graph) diagram renderer + */ + +import { vi } from 'vitest'; + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + draw, +}; diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js new file mode 100644 index 0000000000..2bc77c0b10 --- /dev/null +++ b/__mocks__/journeyRenderer.js @@ -0,0 +1,15 @@ +/** + * Mocked pie (picChart) diagram renderer + */ + +import { vi } from 'vitest'; +export const setConf = vi.fn(); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + setConf, + draw, +}; diff --git a/__mocks__/pieRenderer.js b/__mocks__/pieRenderer.js new file mode 100644 index 0000000000..317c69901d --- /dev/null +++ b/__mocks__/pieRenderer.js @@ -0,0 +1,13 @@ +/** + * Mocked pie (picChart) diagram renderer + */ + +import { vi } from 'vitest'; + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + draw, +}; diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js new file mode 100644 index 0000000000..48d8997ac1 --- /dev/null +++ b/__mocks__/requirementRenderer.js @@ -0,0 +1,13 @@ +/** + * Mocked requirement diagram renderer + */ + +import { vi } from 'vitest'; + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + draw, +}; diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js new file mode 100644 index 0000000000..11080c6bbf --- /dev/null +++ b/__mocks__/sequenceRenderer.js @@ -0,0 +1,23 @@ +/** + * Mocked sequence diagram renderer + */ + +import { vi } from 'vitest'; + +export const bounds = vi.fn(); +export const drawActors = vi.fn(); +export const drawActorsPopup = vi.fn(); + +export const setConf = vi.fn(); + +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + bounds, + drawActors, + drawActorsPopup, + setConf, + draw, +}; diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js new file mode 100644 index 0000000000..a2d103b50e --- /dev/null +++ b/__mocks__/stateRenderer-v2.js @@ -0,0 +1,22 @@ +/** + * Mocked state diagram v2 renderer + */ + +import { vi } from 'vitest'; + +export const setConf = vi.fn(); +export const getClasses = vi.fn().mockImplementation(() => { + return {}; +}); +export const stateDomId = vi.fn().mockImplementation(() => { + return 'mocked-stateDiagram-stateDomId'; +}); +export const draw = vi.fn().mockImplementation(() => { + return ''; +}); + +export default { + setConf, + getClasses, + draw, +}; diff --git a/cSpell.json b/cSpell.json index 5abf6e2838..4e9e4945a5 100644 --- a/cSpell.json +++ b/cSpell.json @@ -2,50 +2,104 @@ "version": "0.2", "language": "en", "words": [ + "acyclicer", + "adamiecki", + "alois", + "antiscript", + "applitools", + "asciidoctor", + "ashish", + "astah", + "bbox", + "bilkent", + "bisheng", + "braintree", + "brkt", + "brolin", + "brotli", + "classdef", + "codedoc", + "colour", + "cpettitt", "customizability", - "Gantt", + "cuzon", + "cytoscape", + "dagre", + "descr", + "docsify", + "docsy", + "doku", + "dompurify", + "edgechromium", + "faber", + "flatmap", + "ftplugin", + "gantt", + "gitea", + "gitgraph", + "globby", + "graphlib", + "grav", + "greywolf", + "inkdrop", + "jaoude", "jison", + "kaufmann", + "khroma", + "klemm", + "klink", "knsv", - "Knut", - "mindmap", - "Mindmaps", - "mitigations", - "sandboxed", - "Sveidqvist", - "verdana", - "Visio" - ], - "ignoreWords": [ - "Adamiecki", - "applitools", - "Asciidoctor", - "Astah", - "Bisheng", - "codedoc", - "Docsy", - "Doku", - "Gitea", - "Gitgraph", - "Grav", - "Inkdrop", - "Jaoude", + "knut", + "laganeckas", + "lintstagedrc", + "lucida", + "matthieu", "mdbook", "mermerd", + "mindaugas", + "mindmap", + "mindmaps", + "mitigations", "mkdocs", + "mult", + "orlandoni", "phpbb", - "Plantuml", - "Playfair's", - "Podlite", + "plantuml", + "playfair", + "pnpm", + "podlite", + "quence", + "ranksep", + "rect", + "rects", "redmine", + "roledescription", + "sandboxed", + "setupgraphviewbox", + "shiki", + "sidharth", "sphinxcontrib", - "Tuleap" + "statediagram", + "stylis", + "substate", + "sveidqvist", + "techn", + "teststr", + "textlength", + "treemap", + "ts-nocheck", + "tuleap", + "unist", + "verdana", + "viewports", + "vinod", + "visio", + "vitepress", + "xlink", + "yash" ], "patterns": [ - { - "name": "Markdown links", - "pattern": "\\((.*)\\)", - "description": "" - }, + { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" }, { "name": "Markdown code blocks", "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx", @@ -56,25 +110,14 @@ "pattern": "\\`([^\\`\\r\\n]+?)\\`", "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex" }, - { - "name": "Link contents", - "pattern": "\\", - "description": "" - }, - { - "name": "Snippet references", - "pattern": "-- snippet:(.*)", - "description": "" - }, + { "name": "Link contents", "pattern": "\\", "description": "" }, + { "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" }, { "name": "Snippet references 2", "pattern": "\\<\\[sample:(.*)", "description": "another kind of snippet reference" }, - { - "name": "Multi-line code blocks", - "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" - }, + { "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" }, { "name": "HTML Tags", "pattern": "<[^>]*>", @@ -91,5 +134,8 @@ "Multi-line code blocks", "HTML Tags" ], - "ignorePaths": ["packages/mermaid/src/docs/CHANGELOG.md"] + "ignorePaths": [ + "packages/mermaid/src/docs/CHANGELOG.md", + "packages/mermaid/src/docs/.vitepress/redirect.ts" + ] } diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index 551cabd1c3..5213f634ab 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -47,7 +47,6 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => options.fontSize = '16px'; } const useAppli = Cypress.env('useAppli'); - //const useAppli = false; cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); @@ -64,7 +63,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => const url = mermaidUrl(graphStr, options, api); cy.visit(url); - if (validation) cy.get('svg').should(validation); + if (validation) { + cy.get('svg').should(validation); + } cy.get('svg'); // Default name to test title @@ -117,7 +118,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => { } cy.visit(url); - if (validation) cy.get('svg').should(validation); + if (validation) { + cy.get('svg').should(validation); + } cy.get('body'); // Default name to test title diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 3a6c37e881..be69dfc982 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -1,13 +1,10 @@ +import { urlSnapshotTest } from '../../helpers/util'; + describe('mermaid', () => { describe('registerDiagram', () => { it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { const url = 'http://localhost:9000/external-diagrams-mindmap.html'; - cy.visit(url); - - cy.get('svg', { - // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram - timeout: 10000, - }).matchImageSnapshot(); + urlSnapshotTest(url, {}, false, false); }); }); }); diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 5b168a8a8f..4fadc78554 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -7,4 +7,10 @@ describe('CSS injections', () => { flowchart: { htmlLabels: false }, }); }); + it('should not allow adding styletags affecting the page', () => { + urlSnapshotTest('http://localhost:9000/ghsa3.html', { + logLevel: 1, + flowchart: { htmlLabels: false }, + }); + }); }); diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js index d6a83eb8bb..462fe869cd 100644 --- a/cypress/integration/rendering/appli.spec.js +++ b/cypress/integration/rendering/appli.spec.js @@ -21,7 +21,7 @@ describe('Git Graph diagram', () => { // // Call Open on eyes to initialize a test session // cy.eyesOpen({ // appName: 'Demo App', - // testName: 'Ultrafast grid demo', + // testName: 'UltraFast grid demo', // }); // // check the login page with fluent api, see more info here diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index d285a92374..9536a074dc 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -478,4 +478,33 @@ describe('Class diagram V2', () => { ); cy.get('svg'); }); + + it('18: should render a simple class diagram with notes', () => { + imgSnapshotTest( + ` + classDiagram-v2 + note "I love this diagram!\nDo you love it?" + class Class10 { + int id + size() + } + note for Class10 "Cool class\nI said it's very cool class!" + + `, + { logLevel: 1, flowchart: { htmlLabels: false } } + ); + cy.get('svg'); + }); + + it('1433: should render a simple class with a title', () => { + imgSnapshotTest( + `--- +title: simple class diagram +--- +classDiagram-v2 +class Class10 +`, + {} + ); + }); }); diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 8cf410d052..e21be67ec4 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -407,4 +407,20 @@ describe('Class diagram', () => { // // expect(svg).to.not.have.attr('style'); // }); // }); + + it('19: should render a simple class diagram with notes', () => { + imgSnapshotTest( + ` + classDiagram + note "I love this diagram!\nDo you love it?" + class Class10 { + int id + size() + } + note for Class10 "Cool class\nI said it's very cool class!" + `, + { logLevel: 1 } + ); + cy.get('svg'); + }); }); diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index 56b5f774b3..033752c668 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -1,6 +1,6 @@ import { imgSnapshotTest } from '../../helpers/util'; -describe('State diagram', () => { +describe('Current diagram', () => { it('should render a state with states in it', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 0f9084e7c6..8e8946170b 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -167,7 +167,7 @@ describe('Entity Relationship Diagram', () => { cy.get('svg'); }); - it.only('should render entities with generic and array attributes', () => { + it('should render entities with generic and array attributes', () => { renderGraph( ` erDiagram @@ -255,4 +255,35 @@ describe('Entity Relationship Diagram', () => { ); cy.get('svg'); }); + + it('should render entities with aliases', () => { + renderGraph( + ` + erDiagram + T1 one or zero to one or more T2 : test + T2 one or many optionally to zero or one T3 : test + T3 zero or more to zero or many T4 : test + T4 many(0) to many(1) T5 : test + T5 many optionally to one T6 : test + T6 only one optionally to only one T1 : test + T4 0+ to 1+ T6 : test + T1 1 to 1 T3 : test + `, + { logLevel: 1 } + ); + cy.get('svg'); + }); + + it('1433: should render a simple ER diagram with a title', () => { + imgSnapshotTest( + `--- +title: simple ER diagram +--- +erDiagram +CUSTOMER ||--o{ ORDER : places +ORDER ||--|{ LINE-ITEM : contains +`, + {} + ); + }); }); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 61dccfb84b..30ae4f0d25 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -663,4 +663,15 @@ flowchart RL { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); + it('1433: should render a titled flowchart with titleTopMargin set to 0', () => { + imgSnapshotTest( + `--- +title: Simple flowchart +--- +flowchart TD +A --> B +`, + { titleTopMargin: 0 } + ); + }); }); diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 16a70ece0f..c0156eee36 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -310,35 +310,129 @@ describe('Gantt diagram', () => { ); }); - it('should render accessibility tags', function () { - const expectedTitle = 'Gantt Diagram'; - const expectedAccDescription = 'Tasks for Q4'; - renderGraph( + it('should render a gantt diagram with tick is 15 minutes', () => { + imgSnapshotTest( ` gantt - accTitle: ${expectedTitle} - accDescr: ${expectedAccDescription} - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %H:%M + tickInterval 15minute + excludes weekends + + section Section + A task : a1, 2022-10-03, 6h + Another task : after a1, 6h + section Another + Task in sec : 2022-10-03, 3h + another task : 3h `, {} ); - cy.get('svg').should((svg) => { - const el = svg.get(0); - const children = Array.from(el.children); - - const titleEl = children.find(function (node) { - return node.tagName === 'title'; - }); - const descriptionEl = children.find(function (node) { - return node.tagName === 'desc'; - }); - - expect(titleEl).to.exist; - expect(titleEl.textContent).to.equal(expectedTitle); - expect(descriptionEl).to.exist; - expect(descriptionEl.textContent).to.equal(expectedAccDescription); - }); + }); + + it('should render a gantt diagram with tick is 6 hours', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %d %H:%M + tickInterval 6hour + excludes weekends + + section Section + A task : a1, 2022-10-03, 1d + Another task : after a1, 2d + section Another + Task in sec : 2022-10-04, 2d + another task : 2d + `, + {} + ); + }); + + it('should render a gantt diagram with tick is 1 day', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1day + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + {} + ); + }); + + it('should render a gantt diagram with tick is 1 week', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1week + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + {} + ); + }); + + it('should render a gantt diagram with tick is 1 month', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1month + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + {} + ); + }); + + it('should render a gantt diagram with tick is 1 day and topAxis is true', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1day + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + { gantt: { topAxis: true } } + ); }); }); diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index afb39b62e6..43f91a983e 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -322,4 +322,15 @@ describe('Git Graph diagram', () => { {} ); }); + it('1433: should render a simple gitgraph with a title', () => { + imgSnapshotTest( + `--- +title: simple gitGraph +--- +gitGraph + commit id: "1-abcdefg" +`, + {} + ); + }); }); diff --git a/cypress/integration/rendering/mermaid.spec.js b/cypress/integration/rendering/mermaid.spec.js deleted file mode 100644 index 4b7de3027c..0000000000 --- a/cypress/integration/rendering/mermaid.spec.js +++ /dev/null @@ -1,75 +0,0 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; - -describe('Mindmap', () => { - it('square shape', () => { - imgSnapshotTest( - ` -mindmap - root[ - The root - ] - `, - {} - ); - cy.get('svg'); - }); - it('rounded rect shape', () => { - imgSnapshotTest( - ` -mindmap - root(( - The root - )) - `, - {} - ); - cy.get('svg'); - }); - it('circle shape', () => { - imgSnapshotTest( - ` -mindmap - root( - The root - ) - `, - {} - ); - cy.get('svg'); - }); - it('default shape', () => { - imgSnapshotTest( - ` -mindmap - The root - `, - {} - ); - cy.get('svg'); - }); - it('adding children', () => { - imgSnapshotTest( - ` -mindmap - The root - child1 - child2 - `, - {} - ); - cy.get('svg'); - }); - it('adding grand children', () => { - imgSnapshotTest( - ` -mindmap - The root - child1 - child2 - child3 - `, - {} - ); - cy.get('svg'); - }); -}); diff --git a/cypress/integration/rendering/mindmap.spec.js b/cypress/integration/rendering/mindmap.spec.js deleted file mode 100644 index f0cc2bc3f8..0000000000 --- a/cypress/integration/rendering/mindmap.spec.js +++ /dev/null @@ -1,115 +0,0 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; - -describe('Mindmaps', () => { - it('Only a root', () => { - imgSnapshotTest( - `mindmap -root - `, - {} - ); - }); - - it('a root with a shape', () => { - imgSnapshotTest( - `mindmap -root[root] - `, - {} - ); - }); - - it('a root with wrapping text and a shape', () => { - imgSnapshotTest( - `mindmap -root[A root with a long text that wraps to keep the node size in check] - `, - {} - ); - }); - - it('a root with an icon', () => { - imgSnapshotTest( - `mindmap -root[root] -::icon(mdi mdi-fire) - `, - {} - ); - }); - - it('Blang and cloud shape', () => { - imgSnapshotTest( - `mindmap -root))bang(( - ::icon(mdi mdi-fire) - a))Another bang(( - ::icon(mdi mdi-fire) - a)A cloud( - ::icon(mdi mdi-fire) - `, - {} - ); - }); - - it('Blang and cloud shape with icons', () => { - imgSnapshotTest( - `mindmap -root))bang(( - - a))Another bang(( - a)A cloud( - `, - {} - ); - }); - - it('braches', () => { - imgSnapshotTest( - `mindmap -root - child1 - grandchild 1 - grandchild 2 - child2 - grandchild 3 - grandchild 4 - child3 - grandchild 5 - grandchild 6 - `, - {} - ); - }); - - it('braches with shapes and labels', () => { - imgSnapshotTest( - `mindmap -root - child1((Circle)) - grandchild 1 - grandchild 2 - child2(Round rectangle) - grandchild 3 - grandchild 4 - child3[Square] - grandchild 5 - ::icon(mdi mdi-fire) - gc6((grand
child 6)) - ::icon(mdi mdi-fire) - `, - {} - ); - }); - it('text shouhld wrap with icon', () => { - imgSnapshotTest( - `mindmap -root - Child3(A node with an icon and with a long text that wraps to keep the node size in check) - `, - {} - ); - }); - - /* The end */ -}); diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts new file mode 100644 index 0000000000..62c7e785b6 --- /dev/null +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -0,0 +1,233 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; + +/** + * Check whether the SVG Element has a Mindmap root + * + * Sometimes, Cypress takes a snapshot before the mermaid mindmap has finished + * generating the SVG. + * + * @param $p - The element to check. + */ +function shouldHaveRoot($p: JQuery) { + // get HTML Element from jquery element + const svgElement = $p[0]; + expect(svgElement.nodeName).equal('svg'); + + const sectionRoots = svgElement.getElementsByClassName('mindmap-node section-root'); + // mindmap should have at least one root section + expect(sectionRoots).to.have.lengthOf.at.least(1); +} + +describe('Mindmaps', () => { + it('Only a root', () => { + imgSnapshotTest( + `mindmap +root + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('a root with a shape', () => { + imgSnapshotTest( + `mindmap +root[root] + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('a root with wrapping text and a shape', () => { + imgSnapshotTest( + `mindmap +root[A root with a long text that wraps to keep the node size in check] + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('a root with an icon', () => { + imgSnapshotTest( + `mindmap +root[root] +::icon(mdi mdi-fire) + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('Blang and cloud shape', () => { + imgSnapshotTest( + `mindmap +root))bang(( + ::icon(mdi mdi-fire) + a))Another bang(( + ::icon(mdi mdi-fire) + a)A cloud( + ::icon(mdi mdi-fire) + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('Blang and cloud shape with icons', () => { + imgSnapshotTest( + `mindmap +root))bang(( + + a))Another bang(( + a)A cloud( + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('braches', () => { + imgSnapshotTest( + `mindmap +root + child1 + grandchild 1 + grandchild 2 + child2 + grandchild 3 + grandchild 4 + child3 + grandchild 5 + grandchild 6 + `, + {}, + undefined, + shouldHaveRoot + ); + }); + + it('braches with shapes and labels', () => { + imgSnapshotTest( + `mindmap +root + child1((Circle)) + grandchild 1 + grandchild 2 + child2(Round rectangle) + grandchild 3 + grandchild 4 + child3[Square] + grandchild 5 + ::icon(mdi mdi-fire) + gc6((grand
child 6)) + ::icon(mdi mdi-fire) + `, + {}, + undefined, + shouldHaveRoot + ); + }); + it('text shouhld wrap with icon', () => { + imgSnapshotTest( + `mindmap +root + Child3(A node with an icon and with a long text that wraps to keep the node size in check) + `, + {}, + undefined, + shouldHaveRoot + ); + }); + it('square shape', () => { + imgSnapshotTest( + ` +mindmap + root[ + The root + ] + `, + {}, + undefined, + shouldHaveRoot + ); + cy.get('svg'); + }); + it('rounded rect shape', () => { + imgSnapshotTest( + ` +mindmap + root(( + The root + )) + `, + {}, + undefined, + shouldHaveRoot + ); + cy.get('svg'); + }); + it('circle shape', () => { + imgSnapshotTest( + ` +mindmap + root( + The root + ) + `, + {}, + undefined, + shouldHaveRoot + ); + cy.get('svg'); + }); + it('default shape', () => { + imgSnapshotTest( + ` +mindmap + The root + `, + {}, + undefined, + shouldHaveRoot + ); + cy.get('svg'); + }); + it('adding children', () => { + imgSnapshotTest( + ` +mindmap + The root + child1 + child2 + `, + {}, + undefined, + shouldHaveRoot + ); + cy.get('svg'); + }); + it('adding grand children', () => { + imgSnapshotTest( + ` +mindmap + The root + child1 + child2 + child3 + `, + {}, + undefined, + shouldHaveRoot + ); + cy.get('svg'); + }); + /* The end */ +}); diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index be27f39faa..0bf9014bf9 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -46,69 +46,4 @@ describe('Requirement diagram', () => { ); cy.get('svg'); }); - - it('should render accessibility tags', function () { - const expectedTitle = 'Gantt Diagram'; - const expectedAccDescription = 'Tasks for Q4'; - renderGraph( - ` - requirementDiagram - accTitle: ${expectedTitle} - accDescr: ${expectedAccDescription} - - requirement test_req { - id: 1 - text: the test text. - risk: high - verifymethod: test - } - - functionalRequirement test_req2 { - id: 1.1 - text: the second test text. - risk: low - verifymethod: inspection - } - - performanceRequirement test_req3 { - id: 1.2 - text: the third test text. - risk: medium - verifymethod: demonstration - } - - element test_entity { - type: simulation - } - - element test_entity2 { - type: word doc - docRef: reqs/test_entity - } - - - test_entity - satisfies -> test_req2 - test_req - traces -> test_req2 - test_req - contains -> test_req3 - test_req <- copies - test_entity2 - `, - {} - ); - cy.get('svg').should((svg) => { - const el = svg.get(0); - const children = Array.from(el.children); - - const titleEl = children.find(function (node) { - return node.tagName === 'title'; - }); - const descriptionEl = children.find(function (node) { - return node.tagName === 'desc'; - }); - - expect(titleEl).to.exist; - expect(titleEl.textContent).to.equal(expectedTitle); - expect(descriptionEl).to.exist; - expect(descriptionEl.textContent).to.equal(expectedAccDescription); - }); - }); }); diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index aa2bc06ef6..047e240fc8 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -328,7 +328,7 @@ describe('State diagram', () => { } ); }); - it('v2 it should be possibel to use a choice', () => { + it('v2 it should be possible to use a choice', () => { imgSnapshotTest( ` stateDiagram-v2 @@ -521,4 +521,54 @@ stateDiagram-v2 { logLevel: 0, fontFamily: 'courier' } ); }); + + describe('classDefs and applying classes', () => { + it('v2 states can have a class applied', () => { + imgSnapshotTest( + ` + stateDiagram-v2 + [*] --> A + A --> B: test({ foo#colon; 'far' }) + B --> [*] + classDef badBadEvent fill:#f00,color:white,font-weight:bold + class B badBadEvent + `, + { logLevel: 0, fontFamily: 'courier' } + ); + }); + it('v2 can have multiple classes applied to multiple states', () => { + imgSnapshotTest( + ` + stateDiagram-v2 + classDef notMoving fill:white + classDef movement font-style:italic; + classDef badBadEvent fill:#f00,color:white,font-weight:bold + + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] + + class Still notMoving + class Moving, Crash movement + class Crash badBadEvent + `, + { logLevel: 0, fontFamily: 'courier' } + ); + }); + }); + it('1433: should render a simple state diagram with a title', () => { + imgSnapshotTest( + `--- +title: simple state diagram +--- +stateDiagram-v2 +[*] --> State1 +State1 --> [*] +`, + {} + ); + }); }); diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index 0eb8d111b0..ef3bd9a4b0 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -25,6 +25,7 @@ describe('themeCSS balancing, it', () => { }); }); +// TODO: Delete/Rename this describe, keeping the inner contents. describe('Pie Chart', () => { // beforeEach(()=>{ // cy.clock((new Date('2014-06-09')).getTime()); diff --git a/cypress/platform/ghsa1.html b/cypress/platform/ghsa1.html index c543588621..890a8e0dd2 100644 --- a/cypress/platform/ghsa1.html +++ b/cypress/platform/ghsa1.html @@ -4,7 +4,7 @@
-

This element does not belong to the SVG but we can style it

+

Background should be yellow!!!

diff --git a/cypress/platform/ghsa3.html b/cypress/platform/ghsa3.html new file mode 100644 index 0000000000..63dfa0d01e --- /dev/null +++ b/cypress/platform/ghsa3.html @@ -0,0 +1,100 @@ + + + + + + + + + +

PAGE SHOULD NOT BE RED

+
+
+
+
+ + + + diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index de9780185d..83472039df 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -56,63 +56,65 @@
Security check
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+flowchart LR
+    %% Actors
+    A
+    subgraph Sub
+        B --> C
+    end
+
+    %% Accusations
+    A --L --> Sub
+
+    %% Offense
+    B --> A
+
+
+ 
+      stateDiagram-v2
+
+      [*] --> S1
+      S1 --> S2: long line using
should work
+      S1 --> S3: long line using 
should work
+      S1 --> S4: long line using \\nshould work
+
     
-mindmap
-  root
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand
child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand
grand
child 8))
-
- 
-      example-diagram
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
- + - diff --git a/cypress/platform/knsv3.html b/cypress/platform/knsv3.html index 0c1afadb72..e5ca66c87a 100644 --- a/cypress/platform/knsv3.html +++ b/cypress/platform/knsv3.html @@ -6,6 +6,10 @@ rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> + -
info below
-
- 
-flowchart TB;subgraph "number as labels";1;end;
-
- 
-flowchart TB;a[APA];
-
- 
-graph TD
-      work --> sleep
-      sleep --> work
-      eat --> sleep
-      work --> eat
-
- 
-flowchart TD
-      work --> sleep
-      sleep --> work
-      eat --> sleep
-      work --> eat
-
- 
- graph TB
-      A
-      B
-      subgraph foo[Foo SubGraph]
-        C
-        D
-      end
-      subgraph bar[Bar SubGraph]
-        E
-        F
-      end
-      G
-
-      A-->B
-      B-->C
-      C-->D
-      B-->D
-      D-->E
-      E-->A
-      E-->F
-      F-->D
-      F-->G
-      B-->G
-      G-->D
-
-      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
-      style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
-
- 
-      graph TB
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-      A
-      B
-      subgraph foo[Foo SubGraph]
-        C
-        D
-      end
-      subgraph bar[Bar SubGraph]
-        E
-        F
-      end
-      G
+    
Security check

+    
+      graph TD
+        A["test"] --"
test
"--> B
+    

 
-      A-->B
-      B-->C
-      C-->D
-      B-->D
-      D-->E
-      E-->A
-      E-->F
-      F-->D
-      F-->G
-      B-->G
-      G-->D
+    
+    
+    
+    
+    
 
-      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
-      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-
- 
-      graph TD
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-
- 
-      graph TD
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-
- 
-      flowchart TD
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-
- 
-      flowchart TD
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-
- 
-flowchart LR
-        a["Haiya"]---->b
-
- 
-flowchart LR
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        a["Haiya"]---->b
-
- 
-      flowchart TD
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-
- 
-      flowchart TD
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-
- 
-      %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-classDiagram-v2
-      Class01 <|-- AveryLongClass : Cool
-      <<interface>> Class01
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        <<service>>
-        int id
-        test()
-      }
-
- 
-classDiagram-v2
-      Class01 <|-- AveryLongClass : Cool
-      <<interface>> Class01
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        <<service>>
-        int id
-        test()
-      }
-
- 
-flowchart BT
-   subgraph S1
-    sub1 -->sub2
-   end
-  subgraph S2
-    sub4
-   end
-   S1 --> S2
-   sub1 --> sub4
-
-
- - diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 603ef26fff..c06976e972 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -54,7 +54,7 @@ function merge(current, update) { if ( current.hasOwnProperty(key) && typeof current[key] === 'object' && - !(current[key] instanceof Array) + !Array.isArray(current[key]) ) { merge(current[key], update[key]); @@ -120,7 +120,9 @@ const contentLoadedApi = function () { (svgCode, bindFunctions) => { div.innerHTML = svgCode; - if (bindFunctions) bindFunctions(div); + if (bindFunctions) { + bindFunctions(div); + } }, div ); diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html index fed0e42893..b2f67cd93c 100644 --- a/cypress/platform/xss21.html +++ b/cypress/platform/xss21.html @@ -94,7 +94,7 @@ } // var diagram = ` graph TD - // A --> B["<a href='javasc`; + // A --> B["<a href='javascript`; // diagram += `ript#colon;xssAttack()'>AAA</a>"]`; let diagram = ` graph TD A --> B[" + + + +

Mindmap diagram demo

+ 
+        mindmap
+        root
+            child1((Circle))
+                grandchild 1
+                grandchild 2
+            child2(Round rectangle)
+                grandchild 3
+                grandchild 4
+            child3[Square]
+                grandchild 5
+                ::icon(mdi mdi-fire)
+                gc6((grand
child 6))
+                ::icon(mdi mdi-fire)
+                gc7((grand
grand
child 8))
+
+ +

Mindmap with root wrapping text and a shape

+ 
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+
+ + + + diff --git a/demos/state.html b/demos/state.html index 7f85fceb1e..7aaa7516a9 100644 --- a/demos/state.html +++ b/demos/state.html @@ -1,5 +1,5 @@ - + @@ -15,7 +15,11 @@

State diagram demos

+

Very simple showing change from State1 to State2

+---
+title: Very simple diagram
+---
 		stateDiagram
 		  accTitle: This is the accessible title
       accDescr:This is an accessible description
@@ -24,59 +28,193 @@ 
State diagram demos

 
     

 
+    
This has classDef statements to apply style classes to specific states

+    
Here are the classDef statements:

+    

+      
+        classDef notMoving fill:white

+        classDef movement font-style:italic

+        classDef badBadEvent
+        fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

+      
+    

+    
And these are how they are applied:

+    

+      
+        class Still notMoving

+        class Moving, Crash movement

+        class Crash badBadEvent

+      
+    

     
-		stateDiagram-v2
+---
+title: Very simple diagram
+---
+		stateDiagram
+      direction TB
+
 		  accTitle: This is the accessible title
       accDescr: This is an accessible description
-      [*] --> Still
+
+      classDef notMoving fill:white
+      classDef movement font-style:italic
+      classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+      [*]--> Still
       Still --> [*]
       Still --> Moving
       Moving --> Still
       Moving --> Crash
       Crash --> [*]
+
+      class Still notMoving
+      class Moving, Crash movement
+      class Crash badBadEvent
+      class end badBadEvent
     

 
     

 
+    
Here is a diagram that uses the ::: operator to apply styles to states

+    
Here are the classDef statements:

+    

+      
+        classDef notMoving fill:white

+        classDef movement font-style:italic

+        classDef badBadEvent
+        fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

+      
+    

+    
And these are how they are applied:

+    

+      
+        [*] --> Still:::notMoving

+        ...

+        Still --> Moving:::movement

+        ...

+        Moving --> Crash:::movement

+        Crash:::badBadEvent --> [*]

+      
+    

+    

+      Note that both the starting state and the end state have styles applied:

+      The start state has the start classDef style
and the end state has the
+      stop classDef style applied.
+    

     
     stateDiagram
+      direction TB
+
+		  accTitle: This is the accessible title
+      accDescr: This is an accessible description
+
+      classDef notMoving fill:white
+      classDef movement font-style:italic
+      classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+      [*] --> Still:::notMoving
+      Still --> [*]
+      Still --> Moving:::movement
+      Moving --> Still
+      Moving --> Crash:::movement
+      Crash:::badBadEvent --> [*]
+    

+    

+
+    
+    stateDiagram-v2
       accTitle: very very simple state
-    accDescr: This is a state diagram showing one state
-    State1
+      accDescr: This is a state diagram showing one state
+      State1
     

+    

+
+    
States with spaces in them

+    
+      stateDiagram
+        classDef yourState font-style:italic,font-weight:bold,fill:white
 
+        yswsii: Your state with spaces in it
+        [*] --> yswsii:::yourState
+        [*] --> SomeOtherState
+        SomeOtherState --> YetAnotherState
+        yswsii --> YetAnotherState
+        YetAnotherState --> [*]
+    

     

 
+    
You can label the relationships

     
-    stateDiagram
+    stateDiagram-v2
+    [*] --> State1
+    State1 --> State2 : Transition 1
+    State1 --> State3 : Transition 2
+    State1 --> State4 : Transition 3
+    State1 --> [*]
+    

+    

+
+    
This shows Composite states

+    
+    stateDiagram-v2
     [*] --> First
+    First --> Second
+    First --> Third
+
     state First {
-    [*] --> second
-    second --> [*]
+        [*] --> 1st
+        1st --> [*]
+    }
+    state Second {
+        [*] --> 2nd
+        2nd --> [*]
+    }
+    state Third {
+        [*] --> 3rd
+        3rd --> [*]
     }
     

+    

+
+    
Compsite states can link to themselves

     
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-    Important information! You can write
-    notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
+      stateDiagram-v2
+            state Active {
+              Idle
+            }
+            Inactive --> Idle: ACT
+            Active --> Active: LOG
     

+    

+
+    
transition labels can span multiple lines using "br" tags or \n

     
-    stateDiagram
-    State1
-    note right of State1
-    Line1
Line2
Line3
Line4
Line5
-    end note
+      stateDiagram-v2
+      [*] --> S1
+      S1 --> S2: This long line uses a br tag
to create multiple
lines.
+      S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
+
+    

+    

+
+    
You can add Notes

+    
+    stateDiagram-v2
+      direction LR
+      State1: A state with a note
+      note right of State1
+        Important information!
You can write notes.
And\nthey\ncan\nbe\nmulti-\nline.
+      end note
+      State1 --> State2
+      note left of State2 : Notes can be to the left of a state\n(like this one).
+      note right of State2 : Notes can be to the right of a state\n(like this one).
     

+
- -A summary of all options and their defaults is found [here][3]. -A description of each option follows below. - -## theme - -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".
 "theme": "forest",
-"themeCSS": ".node rect { fill: red; }"
- -## fontFamily - -| 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;'. - -## logLevel - -| 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) - -## securityLevel - -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | -| securityLevel | Level of trust for parsed diagram | string | Required | `sandbox`, `strict`, `loose`, `antiscript` | - -**Notes**: - -- **`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 from 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. - -## startOnLoad - -| Parameter | Description | Type | Required | Values | -| ----------- | -------------------------------------------- | ------- | -------- | ----------- | -| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | - -**Notes:** Default value: true - -## arrowMarkerAbsolute - -| 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 - -## secure - -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'] - -## deterministicIds - -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 - -## deterministicIDSeed - -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. - -## flowchart - -The object containing configurations specific for flowcharts - -### diagramPadding - -| 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 - -### htmlLabels - -| 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. - -### nodeSpacing - -| 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 - -### rankSpacing - -| 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 - -### curve - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | -| curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | - -**Notes:** - -Default Value: 'basis' - -### useMaxWidth - -| 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 - -### defaultRenderer - -| 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-wrapper` - -## sequence - -The object containing configurations specific for sequence diagrams - -### activationWidth - -| Parameter | Description | Type | Required | Values | -| --------------- | ---------------------------- | ------- | -------- | ------------------ | -| activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | - -**Notes:** Default value :10 - -### diagramMarginX - -| 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 - -### diagramMarginY - -| Parameter | Description | Type | Required | Values | -| -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | -| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### actorMargin - -| Parameter | Description | Type | Required | Values | -| ----------- | --------------------- | ------- | -------- | ------------------ | -| actorMargin | Margin between actors | Integer | Required | Any Positive Value | - -**Notes:** Default value: 50 - -### width - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------- | ------- | -------- | ------------------ | -| width | Width of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 150 - -### height - -| Parameter | Description | Type | Required | Values | -| --------- | --------------------- | ------- | -------- | ------------------ | -| height | Height of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 65 - -### boxMargin - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------------ | ------- | -------- | ------------------ | -| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### boxTextMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | -| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 5 - -### noteMargin - -| Parameter | Description | Type | Required | Values | -| ---------- | ------------------- | ------- | -------- | ------------------ | -| noteMargin | margin around notes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### messageMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | ---------------------- | ------- | -------- | ------------------ | -| messageMargin | Space between messages | Integer | Required | Any Positive Value | - -**Notes:** Default value: 35 - -### messageAlign - -| Parameter | Description | Type | Required | Values | -| ------------ | --------------------------- | ------ | -------- | ------------------------- | -| messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | - -**Notes:** Default value: 'center' - -### mirrorActors - -| Parameter | Description | Type | Required | Values | -| ------------ | --------------------------- | ------- | -------- | ----------- | -| mirrorActors | Mirror actors under diagram | boolean | Required | true, false | - -**Notes:** Default value: true - -### forceMenus - -| 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. - -### bottomMarginAdj - -| 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 - -### useMaxWidth - -| 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 - -### rightAngles - -| 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 - -### showSequenceNumbers - -| Parameter | Description | Type | Required | Values | -| ------------------- | ------------------------------- | ------- | -------- | ----------- | -| showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | - -**Notes:** Default value: false - -### actorFontSize - -| 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**.. - -### actorFontFamily - -| 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' - -### actorFontWeight - -This sets the font weight of the actor's description - -**Notes:** Default value: 400. - -### noteFontSize - -| Parameter | Description | Type | Required | Values | -| ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | -| noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 14 - -### noteFontFamily - -| 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' - -### noteFontWeight - -This sets the font weight of the note's description - -**Notes:** Default value: 400 - -### noteAlign - -| Parameter | Description | Type | Required | Values | -| --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | -| noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | - -**Notes:** Default value: 'center' - -### messageFontSize - -| Parameter | Description | Type | Required | Values | -| --------------- | ----------------------------------------- | ------- | -------- | ------------------- | -| messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | - -**Notes:** Default value: 16 - -### messageFontFamily - -| 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' - -### messageFontWeight - -This sets the font weight of the message's description - -**Notes:** Default value: 400. - -### wrap - -This sets the auto-wrap state for the diagram - -**Notes:** Default value: false. - -### wrapPadding - -This sets the auto-wrap padding for the diagram (sides only) - -**Notes:** Default value: 0. - -### labelBoxWidth - -This sets the width of the loop-box (loop, alt, opt, par) - -**Notes:** Default value: 50. - -### labelBoxHeight - -This sets the height of the loop-box (loop, alt, opt, par) - -**Notes:** Default value: 20. - -## gantt - -The object containing configurations specific for gantt diagrams - -### titleTopMargin - -### 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 - -### barHeight - -| Parameter | Description | Type | Required | Values | -| --------- | ----------------------------------- | ------- | -------- | ------------------ | -| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | - -**Notes:** Default value: 20 - -### barGap - -| 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 - -### topPadding - -| 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 - -### rightPadding - -| 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 - -### leftPadding - -| 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 - -### gridLineStartPadding - -| Parameter | Description | Type | Required | Values | -| -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | -| gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | - -**Notes:** Default value: 35 - -### fontSize - -| Parameter | Description | Type | Required | Values | -| --------- | ----------- | ------- | -------- | ------------------ | -| fontSize | Font size | Integer | Required | Any Positive Value | - -**Notes:** Default value: 11 - -### sectionFontSize - -| Parameter | Description | Type | Required | Values | -| --------------- | ---------------------- | ------- | -------- | ------------------ | -| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | - -**Notes:** Default value: 11 - -### numberSectionStyles - -| Parameter | Description | Type | Required | Values | -| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | -| numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | - -**Notes:** Default value: 4 - -### axisFormat - -| Parameter | Description | Type | Required | Values | -| ---------- | --------------------------- | ---- | -------- | ---------------- | -| axisFormat | Datetime 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'. - -### useMaxWidth - -| 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 - -### topAxis - -| 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**. - -## journey - -The object containing configurations specific for journey diagrams - -### diagramMarginX - -| 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 - -### diagramMarginY - -| Parameter | Description | Type | Required | Values | -| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | -| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### leftMargin - -| Parameter | Description | Type | Required | Values | -| ----------- | --------------------- | ------- | -------- | ------------------ | -| actorMargin | Margin between actors | Integer | Required | Any Positive Value | - -**Notes:** Default value: 50 - -### width - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------- | ------- | -------- | ------------------ | -| width | Width of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 150 - -### height - -| Parameter | Description | Type | Required | Values | -| --------- | --------------------- | ------- | -------- | ------------------ | -| height | Height of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 65 - -### boxMargin - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------------ | ------- | -------- | ------------------ | -| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### boxTextMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | -| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 5 - -### noteMargin - -| Parameter | Description | Type | Required | Values | -| ---------- | ------------------- | ------- | -------- | ------------------ | -| noteMargin | Margin around notes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### messageMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | ----------------------- | ------- | -------- | ------------------ | -| messageMargin | Space between messages. | Integer | Required | Any Positive Value | - -**Notes:** - -Space between messages. - -Default value: 35 - -### messageAlign - -| Parameter | Description | Type | Required | Values | -| ------------ | --------------------------- | ---- | -------- | ------------------------- | -| messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - -**Notes:** Default value: 'center' - -### bottomMarginAdj - -| 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 - -### useMaxWidth - -| 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 - -### rightAngles - -| 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 - -## useMaxWidth - -| 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 - -## defaultRenderer - -| 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` - -## useMaxWidth - -| 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 - -## defaultRenderer - -| 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` - -## er - -The object containing configurations specific for entity relationship diagrams - -### diagramPadding - -| 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 - -### layoutDirection - -| 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' - -### minEntityWidth - -| 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 - -### minEntityHeight - -| 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 - -### entityPadding - -| 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 - -### stroke - -| Parameter | Description | Type | Required | Values | -| --------- | ----------------------------------- | ------ | -------- | -------------------- | -| stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | - -**Notes:** Default value: 'gray' - -### fill - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------------- | ------ | -------- | -------------------- | -| fill | Fill color of entity boxes | string | 4 | Any recognized color | - -**Notes:** Default value: 'honeydew' - -### fontSize - -| 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 - -### useMaxWidth - -| 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 - -## pie - -The object containing configurations specific for pie diagrams - -### useMaxWidth - -| 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 - -## requirement - -The object containing configurations specific for req diagrams - -### useMaxWidth - -| 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 - -## c4 - -The object containing configurations specific for c4 diagrams - -### diagramMarginX - -| 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 - -### diagramMarginY - -| Parameter | Description | Type | Required | Values | -| -------------- | ------------------------------------------- | ------- | -------- | ------------------ | -| diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### c4ShapeMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------- | ------- | -------- | ------------------ | -| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 50 - -### c4ShapePadding - -| Parameter | Description | Type | Required | Values | -| -------------- | ---------------------- | ------- | -------- | ------------------ | -| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 20 - -### width - -| Parameter | Description | Type | Required | Values | -| --------- | --------------------- | ------- | -------- | ------------------ | -| width | Width of person boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 216 - -### height - -| Parameter | Description | Type | Required | Values | -| --------- | ---------------------- | ------- | -------- | ------------------ | -| height | Height of person boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 60 - -### boxMargin - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------- | ------- | -------- | ------------------ | -| boxMargin | Margin around boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### useMaxWidth - -| 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 - -### c4ShapeInRow - -| 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 - -### c4BoundaryInRow - -| 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 - -### personFontSize - -This sets the font size of Person shape for the diagram - -**Notes:** Default value: 14. - -### personFontFamily - -This sets the font family of Person shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### personFontWeight - -This sets the font weight of Person shape for the diagram - -**Notes:** Default value: normal. - -### external_personFontSize - -This sets the font size of External Person shape for the diagram - -**Notes:** Default value: 14. - -### external_personFontFamily - -This sets the font family of External Person shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_personFontWeight - -This sets the font weight of External Person shape for the diagram - -**Notes:** Default value: normal. - -### systemFontSize - -This sets the font size of System shape for the diagram - -**Notes:** Default value: 14. - -### systemFontFamily - -This sets the font family of System shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### systemFontWeight - -This sets the font weight of System shape for the diagram - -**Notes:** Default value: normal. - -### external_systemFontSize - -This sets the font size of External System shape for the diagram - -**Notes:** Default value: 14. - -### external_systemFontFamily - -This sets the font family of External System shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_systemFontWeight - -This sets the font weight of External System shape for the diagram - -**Notes:** Default value: normal. - -### system_dbFontSize - -This sets the font size of System DB shape for the diagram - -**Notes:** Default value: 14. - -### system_dbFontFamily - -This sets the font family of System DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### system_dbFontWeight - -This sets the font weight of System DB shape for the diagram - -**Notes:** Default value: normal. - -### external_system_dbFontSize - -This sets the font size of External System DB shape for the diagram - -**Notes:** Default value: 14. - -### external_system_dbFontFamily - -This sets the font family of External System DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_system_dbFontWeight - -This sets the font weight of External System DB shape for the diagram - -**Notes:** Default value: normal. - -### system_queueFontSize - -This sets the font size of System Queue shape for the diagram - -**Notes:** Default value: 14. - -### system_queueFontFamily - -This sets the font family of System Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### system_queueFontWeight - -This sets the font weight of System Queue shape for the diagram - -**Notes:** Default value: normal. - -### external_system_queueFontSize - -This sets the font size of External System Queue shape for the diagram - -**Notes:** Default value: 14. - -### external_system_queueFontFamily - -This sets the font family of External System Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_system_queueFontWeight - -This sets the font weight of External System Queue shape for the diagram - -**Notes:** Default value: normal. - -### boundaryFontSize - -This sets the font size of Boundary shape for the diagram - -**Notes:** Default value: 14. - -### boundaryFontFamily - -This sets the font family of Boundary shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### boundaryFontWeight - -This sets the font weight of Boundary shape for the diagram - -**Notes:** Default value: normal. - -### messageFontSize - -This sets the font size of Message shape for the diagram - -**Notes:** Default value: 12. - -### messageFontFamily - -This sets the font family of Message shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### messageFontWeight - -This sets the font weight of Message shape for the diagram - -**Notes:** Default value: normal. - -### containerFontSize - -This sets the font size of Container shape for the diagram - -**Notes:** Default value: 14. - -### containerFontFamily - -This sets the font family of Container shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### containerFontWeight - -This sets the font weight of Container shape for the diagram - -**Notes:** Default value: normal. - -### external_containerFontSize - -This sets the font size of External Container shape for the diagram - -**Notes:** Default value: 14. - -### external_containerFontFamily - -This sets the font family of External Container shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_containerFontWeight - -This sets the font weight of External Container shape for the diagram - -**Notes:** Default value: normal. - -### container_dbFontSize - -This sets the font size of Container DB shape for the diagram - -**Notes:** Default value: 14. - -### container_dbFontFamily - -This sets the font family of Container DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### container_dbFontWeight - -This sets the font weight of Container DB shape for the diagram - -**Notes:** Default value: normal. - -### external_container_dbFontSize - -This sets the font size of External Container DB shape for the diagram - -**Notes:** Default value: 14. - -### external_container_dbFontFamily - -This sets the font family of External Container DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_container_dbFontWeight - -This sets the font weight of External Container DB shape for the diagram - -**Notes:** Default value: normal. - -### container_queueFontSize - -This sets the font size of Container Queue shape for the diagram - -**Notes:** Default value: 14. - -### container_queueFontFamily - -This sets the font family of Container Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### container_queueFontWeight - -This sets the font weight of Container Queue shape for the diagram - -**Notes:** Default value: normal. - -### external_container_queueFontSize - -This sets the font size of External Container Queue shape for the diagram - -**Notes:** Default value: 14. - -### external_container_queueFontFamily - -This sets the font family of External Container Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_container_queueFontWeight - -This sets the font weight of External Container Queue shape for the diagram - -**Notes:** Default value: normal. - -### componentFontSize - -This sets the font size of Component shape for the diagram - -**Notes:** Default value: 14. - -### componentFontFamily - -This sets the font family of Component shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### componentFontWeight - -This sets the font weight of Component shape for the diagram - -**Notes:** Default value: normal. - -### external_componentFontSize - -This sets the font size of External Component shape for the diagram - -**Notes:** Default value: 14. - -### external_componentFontFamily - -This sets the font family of External Component shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_componentFontWeight - -This sets the font weight of External Component shape for the diagram - -**Notes:** Default value: normal. - -### component_dbFontSize - -This sets the font size of Component DB shape for the diagram - -**Notes:** Default value: 14. - -### component_dbFontFamily - -This sets the font family of Component DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### component_dbFontWeight - -This sets the font weight of Component DB shape for the diagram - -**Notes:** Default value: normal. - -### external_component_dbFontSize - -This sets the font size of External Component DB shape for the diagram - -**Notes:** Default value: 14. - -### external_component_dbFontFamily - -This sets the font family of External Component DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_component_dbFontWeight - -This sets the font weight of External Component DB shape for the diagram - -**Notes:** Default value: normal. - -### component_queueFontSize - -This sets the font size of Component Queue shape for the diagram - -**Notes:** Default value: 14. - -### component_queueFontFamily - -This sets the font family of Component Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### component_queueFontWeight - -This sets the font weight of Component Queue shape for the diagram - -**Notes:** Default value: normal. - -### external_component_queueFontSize - -This sets the font size of External Component Queue shape for the diagram - -**Notes:** Default value: 14. - -### external_component_queueFontFamily - -This sets the font family of External Component Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_component_queueFontWeight - -This sets the font weight of External Component Queue shape for the diagram - -**Notes:** Default value: normal. - -### wrap - -This sets the auto-wrap state for the diagram - -**Notes:** Default value: true. - -### wrapPadding - -This sets the auto-wrap padding for the diagram (sides only) - -**Notes:** Default value: 0. - -## parse - -### Parameters - -- `text` **[string][4]** -- `parseError` **[Function][5]?** - -Returns **[boolean][6]** - -## setSiteConfig - -## setSiteConfig - -| Function | Description | Type | Values | -| ------------- | ------------------------------------- | ----------- | --------------------------------------- | -| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | - -**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls -to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) -will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this -function _Default value: At default, will mirror Global Config_ - -### Parameters - -- `conf` **MermaidConfig** The base currentConfig to use as siteConfig - -Returns **[object][7]** The siteConfig - -## getSiteConfig - -## getSiteConfig - -| Function | Description | Type | Values | -| ------------- | ------------------------------------------------- | ----------- | -------------------------------- | -| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig | - -**Notes**: Returns **any** values in siteConfig. - -Returns **[object][7]** The siteConfig - -## setConfig - -## setConfig - -| Function | Description | Type | Values | -| ------------- | ------------------------------------- | ----------- | --------------------------------------- | -| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | - -**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure -keys. Any values found in conf with key found in siteConfig.secure will be replaced with the -corresponding siteConfig value. - -### Parameters - -- `conf` **any** The potential currentConfig - -Returns **any** The currentConfig merged with the sanitized conf - -## render - -Function that renders an svg with a graph from a chart definition. Usage example below. - -```javascript -mermaidAPI.initialize({ - startOnLoad: true, -}); -$(function () { - const graphDefinition = 'graph TB\na-->b'; - const cb = function (svgGraph) { - console.log(svgGraph); - }; - mermaidAPI.render('id1', graphDefinition, cb); -}); -``` - -### Parameters - -- `id` **[string][4]** The id of the element to be rendered -- `text` **[string][4]** The graph definition -- `cb` **function (svgCode: [string][4], bindFunctions: function (element: [Element][8]): void): void** -- `container` **[Element][8]** Selector to element in which a div with the graph temporarily will be - inserted. If one is provided a hidden div will be inserted in the body of the page instead. The - element will be removed when rendering is completed. - -Returns **void** - -## getConfig - -## getConfig - -| Function | Description | Type | Return Values | -| --------- | ------------------------- | ----------- | ------------------------------ | -| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config | - -**Notes**: Returns **any** the currentConfig - -Returns **any** The currentConfig - -## sanitize - -## sanitize - -| Function | Description | Type | Values | -| -------- | -------------------------------------- | ----------- | ------ | -| sanitize | Sets the siteConfig to desired values. | Put Request | None | - -Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies -options in-place - -### Parameters - -- `options` **any** The potential setConfig parameter - -## addDirective - -Pushes in a directive to the configuration - -### Parameters - -- `directive` **[object][7]** The directive to push in - -## reset - -## reset - -| Function | Description | Type | Required | Values | -| -------- | ---------------------------- | ----------- | -------- | ------ | -| reset | Resets currentConfig to conf | Put Request | Required | None | - -## conf - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- | -| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array | - -**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`) - -### Parameters - -- `config` (optional, default `siteConfig`) - -Returns **void** - -## initialize - -### Parameters - -- `options` **MermaidConfig** - -## - -## mermaidAPI configuration defaults - -```html - -``` - -[1]: Setup.md?id=render -[2]: 8.6.0_docs.md -[3]: #mermaidapi-configuration-defaults -[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function -[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean -[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[8]: https://developer.mozilla.org/docs/Web/API/Element diff --git a/docs/_navbar.md b/docs/_navbar.md deleted file mode 100644 index 7f9f495a7b..0000000000 --- a/docs/_navbar.md +++ /dev/null @@ -1,15 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -- Getting started - - - [Quick start](quickstart.md) - - [Writing more pages](more-pages.md) - - [Custom navbar](custom-navbar.md) - - [Cover page](cover.md) - -- Configuration - - [Configuration](configuration.md) - - [Themes](themes.md) - - [Using plugins](plugins.md) - - [Markdown configuration](markdown.md) - - [Language highlight](language-highlight.md) diff --git a/docs/_sidebar.md b/docs/_sidebar.md deleted file mode 100644 index 17cde68c9d..0000000000 --- a/docs/_sidebar.md +++ /dev/null @@ -1,46 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -- 📔 Introduction - - - [About Mermaid](README.md) - - [Deployment](n00b-gettingStarted.md) - - [Syntax and Configuration](n00b-syntaxReference.md) - -- 📊 Diagram Syntax - - - [Flowchart](flowchart.md) - - [Sequence Diagram](sequenceDiagram.md) - - [Class Diagram](classDiagram.md) - - [State Diagram](stateDiagram.md) - - [Entity Relationship Diagram](entityRelationshipDiagram.md) - - [User Journey](user-journey.md) - - [Gantt](gantt.md) - - [Pie Chart](pie.md) - - [Requirement Diagram](requirementDiagram.md) - - [Gitgraph (Git) Diagram 🔥](gitgraph.md) - - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md) - - [Mindmaps 🦺⚠️](mindmap.md) - - [Other Examples](examples.md) - -- ⚙️ Deployment and Configuration - - - [Tutorials](Tutorials.md) - - [API-Usage](usage.md) - - [Mermaid API Configuration](Setup.md) - - [Directives](directives.md) - - [Theming](theming.md) - - [Accessibility](accessibility.md) - - [Mermaid CLI](mermaidCLI.md) - - [Advanced usage](n00b-advanced.md) - -- 📚 Misc - - - [Use-Cases and Integrations](integrations.md) - - [FAQ](faq.md) - -- 🙌 Contributions and Community - - [Overview for Beginners](n00b-overview.md) - - [Development and Contribution ](development.md) - - [Changelog](CHANGELOG.md) - - [Adding Diagrams ](newDiagram.md) - - [Security ](security.md) diff --git a/docs/accessibility.md b/docs/accessibility.md deleted file mode 100644 index 09d80df652..0000000000 --- a/docs/accessibility.md +++ /dev/null @@ -1,356 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# Accessibility Options - -## Accessibility - -Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community. - -To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**. - -This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain. - -## Defining Accessibility Options - -### Single line accessibility values - -The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like: - -- `accTitle: "Your Accessibility Title"` or -- `accDescr: "Your Accessibility Description"` - -**When these two options are defined, they will add a corresponding `` and `<desc>` tag in the SVG.** - -Let us take a look at the following example with a flowchart diagram: - -```mermaid-example - graph LR - accTitle: Big decisions - accDescr: Flow chart of the decision making process - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - -``` - -```mermaid - graph LR - accTitle: Big decisions - accDescr: Flow chart of the decision making process - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - -``` - -See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code: - -![Accessibility options rendered inside SVG](img/accessibility-div-example.png) - -### Multi-line Accessibility title/description - -You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`. - -`accTitle: My single line title value` (**_single line format_**) - -vs - -`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**) - -Let us look at it in the following example, with same flowchart: - -```mermaid-example - graph LR - accTitle: Big decisions - - accDescr { - My multi-line description - of the diagram - } - - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - -``` - -```mermaid - graph LR - accTitle: Big decisions - - accDescr { - My multi-line description - of the diagram - } - - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - -``` - -See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code: - -![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png) - -### Sample Code Snippet for other diagram types - -#### Sequence Diagram - -```mermaid-example - sequenceDiagram - accTitle: My Sequence Diagram - accDescr: My Sequence Diagram Description - - Alice->>John: Hello John, how are you? - John-->>Alice: Great! - Alice-)John: See you later! -``` - -```mermaid - sequenceDiagram - accTitle: My Sequence Diagram - accDescr: My Sequence Diagram Description - - Alice->>John: Hello John, how are you? - John-->>Alice: Great! - Alice-)John: See you later! -``` - -#### Class Diagram - -```mermaid-example - classDiagram - accTitle: My Class Diagram - accDescr: My Class Diagram Description - - Vehicle <|-- Car -``` - -```mermaid - classDiagram - accTitle: My Class Diagram - accDescr: My Class Diagram Description - - Vehicle <|-- Car -``` - -#### State Diagram - -```mermaid-example - stateDiagram - accTitle: My State Diagram - accDescr: My State Diagram Description - - s1 --> s2 - -``` - -```mermaid - stateDiagram - accTitle: My State Diagram - accDescr: My State Diagram Description - - s1 --> s2 - -``` - -#### Entity Relationship Diagram - -```mermaid-example - erDiagram - accTitle: My Entity Relationship Diagram - accDescr: My Entity Relationship Diagram Description - - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -```mermaid - erDiagram - accTitle: My Entity Relationship Diagram - accDescr: My Entity Relationship Diagram Description - - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -#### User Journey Diagram - -```mermaid-example - journey - accTitle: My User Journey Diagram - accDescr: My User Journey Diagram Description - - 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 - accTitle: My User Journey Diagram - accDescr: My User Journey Diagram Description - - 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 - -``` - -#### Gantt Chart - -```mermaid-example - gantt - accTitle: My Gantt Chart Accessibility Title - accDescr: My Gantt Chart Accessibility Description - - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - another task : 24d - -``` - -```mermaid - gantt - accTitle: My Gantt Chart Accessibility Title - accDescr: My Gantt Chart Accessibility Description - - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - another task : 24d - -``` - -#### Pie Chart - -```mermaid-example - pie - accTitle: My Pie Chart Accessibility Title - accDescr: My Pie Chart Accessibility Description - - title Key elements in Product X - "Calcium" : 42.96 - "Potassium" : 50.05 - "Magnesium" : 10.01 - "Iron" : 5 - -``` - -```mermaid - pie - accTitle: My Pie Chart Accessibility Title - accDescr: My Pie Chart Accessibility Description - - title Key elements in Product X - "Calcium" : 42.96 - "Potassium" : 50.05 - "Magnesium" : 10.01 - "Iron" : 5 - -``` - -#### Requirement Diagram - -```mermaid-example - requirementDiagram - accTitle: My Requirement Diagram - accDescr: My Requirement Diagram Description - - requirement test_req { - id: 1 - text: the test text. - risk: high - verifymethod: test - } - - element test_entity { - type: simulation - } - - test_entity - satisfies -> test_req - -``` - -```mermaid - requirementDiagram - accTitle: My Requirement Diagram - accDescr: My Requirement Diagram Description - - requirement test_req { - id: 1 - text: the test text. - risk: high - verifymethod: test - } - - element test_entity { - type: simulation - } - - test_entity - satisfies -> test_req - -``` - -#### Gitgraph - -```mermaid-example - gitGraph - accTitle: My Gitgraph Accessibility Title - accDescr: My Gitgraph Accessibility Description - - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit - -``` - -```mermaid - gitGraph - accTitle: My Gitgraph Accessibility Title - accDescr: My Gitgraph Accessibility Description - - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit - -``` diff --git a/docs/breakingChanges.md b/docs/breakingChanges.md deleted file mode 100644 index 964d89e4fa..0000000000 --- a/docs/breakingChanges.md +++ /dev/null @@ -1,51 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# Breaking changes - -### Breaking changes from history version to latest version: - -## #1 - -```javascript -mermaid.initialize({ - sequenceDiagram:{ - ... - } -}) -``` - -has been changed to - -```javascript -mermaid.initialize({ - sequence:{ - ... - } -}) -``` - -## #2 - -In old versions you needed to reference a CSS file in your HTML: - -```html -<link rel="stylesheet" href="mermaid.min.css" /> -``` - -or - -```html -<link rel="stylesheet" href="mermaid.forest.min.css" /> -``` - -Now it is not needed, and there are no more CSS files in the distribution files. - -You just: - -```javascript -mermaid.initialize({ - theme: 'forest', -}); -``` - -and it works like a charm because now the CSS is inline with the SVG to allow simpler portability. diff --git a/docs/development.md b/docs/community/development.md similarity index 82% rename from docs/development.md rename to docs/community/development.md index 3f2033d618..58ca4670bc 100644 --- a/docs/development.md +++ b/docs/community/development.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/development.md](../../packages/mermaid/src/docs/community/development.md). # Development and Contribution 🙌 @@ -8,7 +12,7 @@ So you want to help? That's great! Here are a few things to get you started on the right path. -**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)** +**The Docs Structure is dictated by [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. **Note: Commits and Pull Requests should be directed to the develop branch.** @@ -28,7 +32,7 @@ We make all changes via Pull Requests. As we have many Pull Requests from develo - Large changes reviewed by knsv or other developer asked to review by knsv - Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators -- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits) +- Documentation (we encourage updates to the `/packages/mermaid/src/docs` folder; you can submit them via direct commits) When you commit code, create a branch with the following naming convention: @@ -46,9 +50,9 @@ Start with the type, such as **feature** or **bug**, followed by the issue numbe If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature? -The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**. +The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via **[.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. -> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**. +> **All the documents displayed in the GitHub.io page are listed in [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released. @@ -60,7 +64,7 @@ The documentation is located in the `src/docs` directory and organized according The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually. -We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s) +We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s) ### Add Unit Tests for Parsing @@ -113,7 +117,7 @@ Markdown is used to format the text, for more information about Markdown [see th To edit Docs on your computer: -1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch. +1. Find the Markdown file (.md) to edit in the [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) directory in the `develop` branch. 2. Create a fork of the develop branch. 3. Make changes or add new documentation. 4. Commit changes to your fork and push it to GitHub. @@ -122,7 +126,7 @@ To edit Docs on your computer: To edit Docs on GitHub: 1. Login to [GitHub.com](https://www.github.com). -2. Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). +2. Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). 3. To edit a file, click the pencil icon at the top-right of the file contents panel. 4. Describe what you changed in the **Propose file change** section, located at the bottom of the page. 5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch). diff --git a/vdocs/community/img/er.png b/docs/community/img/er.png similarity index 100% rename from vdocs/community/img/er.png rename to docs/community/img/er.png diff --git a/docs/n00b-overview.md b/docs/community/n00b-overview.md similarity index 85% rename from docs/n00b-overview.md rename to docs/community/n00b-overview.md index df400e4bb6..e0056d9123 100644 --- a/docs/n00b-overview.md +++ b/docs/community/n00b-overview.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/n00b-overview.md](../../packages/mermaid/src/docs/community/n00b-overview.md). # Overview for Beginners @@ -41,7 +45,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof **Nodes** -> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference) +> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](../intro/n00b-syntaxReference.md) ## Advantages of using Mermaid @@ -65,6 +69,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a ## Mermaid is for everyone. -Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). +Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. diff --git a/docs/newDiagram.md b/docs/community/newDiagram.md similarity index 76% rename from docs/newDiagram.md rename to docs/community/newDiagram.md index 0708657020..288af42cdb 100644 --- a/docs/newDiagram.md +++ b/docs/community/newDiagram.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/newDiagram.md](../../packages/mermaid/src/docs/community/newDiagram.md). # Adding a New Diagram/Chart 📊 @@ -10,8 +14,8 @@ This would be to define a jison grammar for the new diagram type. That should st For instance: -- the flowchart starts with the keyword graph. -- the sequence diagram starts with the keyword sequenceDiagram +- the flowchart starts with the keyword _graph_ +- the sequence diagram starts with the keyword _sequenceDiagram_ #### Store data found during parsing @@ -28,9 +32,8 @@ statement In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered. -```tip -Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user. -``` +> **Note** +> Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user. For more info look in the example diagram type: @@ -45,8 +48,7 @@ exports.parseError = function (err, hash) { when parsing the `yy` object is initialized as per below: ```javascript -var parser; -parser = exampleParser.parser; +const parser = exampleParser.parser; parser.yy = db; ``` @@ -59,6 +61,11 @@ Place the renderer in the diagram folder. ### Step 3: Detection of the new diagram type The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type. +[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type. +For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader +would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram. + +Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same. ### Step 4: The final piece - triggering the rendering @@ -69,8 +76,8 @@ At this point when mermaid is trying to render the diagram, it will detect it as ### Setup ```javascript -var graph = require('./graphDb'); -var flow = require('./parser/flow'); +const graph = require('./graphDb'); +const flow = require('./parser/flow'); flow.parser.yy = graph; ``` @@ -91,7 +98,7 @@ graph.getEdges(); The parser is also exposed in the mermaid api by calling: ```javascript -var parser = mermaid.getParser(); +const parser = mermaid.getParser(); ``` Note that the parse needs a graph object to store the data as per: @@ -117,13 +124,12 @@ There are a few features that are common between the different types of diagrams Here some pointers on how to handle these different areas. -#### [Directives](./directives.md) +#### [Directives](../config/directives.md) Here is example handling from flowcharts: Jison: ```jison - /* lexical grammar */ %lex %x open_directive @@ -167,19 +173,26 @@ It is probably a good idea to keep the handling similar to this in your new diag ## Accessibility -The syntax for adding title and description looks like this: +Mermaid automatically adds the following accessibility information for the diagram SVG HTML element: - accTitle: The title - accDescr: The description +- aria-roledescription +- accessible title +- accessible description - accDescr { - Syntax for a description text - written on multiple lines. - } +### aria-roledescription + +The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element. -In a similar way to the directives the jison syntax are quite similar between the diagrams. +See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/) + +### accessible title and description + +The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md) + +In a similar way to the directives, the jison syntax are quite similar between the diagrams. ```jison + * lexical grammar */ %lex %x acc_title @@ -199,6 +212,7 @@ statement : acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } + ``` The functions for setting title and description are provided by a common module. This is the import from flowDb.js: @@ -211,22 +225,11 @@ The functions for setting title and description are provided by a common module. clear as commonClear, } from '../../commonDb'; -For rendering the accessibility tags you have again an existing function you can use. - -**In the renderer:** - -```js -import addSVGAccessibilityFields from '../../accessibility'; - -/* ... */ - -// Adds title and description to the flow chart -addSVGAccessibilityFields(parser.yy, svg, id); -``` +The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI. ## Theming -Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](./theming.md). +Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md). When adding themes to a diagram it comes down to a few important locations in the code. diff --git a/docs/security.md b/docs/community/security.md similarity index 64% rename from docs/security.md rename to docs/community/security.md index cac6d8da29..07adbfbf8b 100644 --- a/docs/security.md +++ b/docs/community/security.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/security.md](../../packages/mermaid/src/docs/community/security.md). # Security @@ -6,13 +10,13 @@ The Mermaid team takes the security of Mermaid and the applications that use Mer ## Reporting vulnerabilities -To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. +To report a vulnerability, please e-mail <security@mermaid.live> with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. We aim to reply within three working days, probably much sooner. -You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates. +You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to <security@mermaid.live> again if you do not receive prompt attention and regular updates. -You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. +You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail <security@mermaid.live> when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. ## Best practices diff --git a/docs/8.6.0_docs.md b/docs/config/8.6.0_docs.md similarity index 76% rename from docs/8.6.0_docs.md rename to docs/config/8.6.0_docs.md index cc812901e4..abd1587129 100644 --- a/docs/8.6.0_docs.md +++ b/docs/config/8.6.0_docs.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/8.6.0_docs.md](../../packages/mermaid/src/docs/config/8.6.0_docs.md). # Version 8.6.0 Changes @@ -8,8 +12,8 @@ With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. -`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md). -This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams. +`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](../config/configuration.md). +This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](directives.md), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams. **A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.** @@ -48,9 +52,8 @@ Implementors can only modify configurations using directives, and cannot change The Two types of directives: are `init` (or `initialize`) and `wrap`. -```note -All directives are enclosed in `%%{ }%%` -``` +> **Note** +> All directives are enclosed in `%%{ }%%` Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible. @@ -62,18 +65,17 @@ Older versions of mermaid will not parse directives because `%%` will comment ou | --------- | ----------------------- | --------- | -------- | ----------------------------------------------- | | init | modifies configurations | Directive | Optional | Any parameters not included in the secure array | -```note -init would be an argument-directive: `%%{init: { **insert argument here**}}%%` - -The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. - **for example**: - -`%%{init: {"theme": "default", "logLevel": 1 }}%%` - -Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict. - -When deployed within code, init is called before the graph/diagram description. -``` +> **Note** +> init would be an argument-directive: `%%{init: { **insert argument here**}}%%` +> +> The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. +> **for example**: +> +> `%%{init: {"theme": "default", "logLevel": 1 }}%%` +> +> Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict. +> +> When deployed within code, init is called before the graph/diagram description. **for example**: @@ -107,19 +109,18 @@ When deployed within code, init is called before the graph/diagram description. | --------- | ----------------------------- | --------- | -------- | ---------- | | wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% | -```note -Wrap is a function that is currently only deployable for sequence diagrams. - -Wrap respects a manually added <br\>, so if the user wants to break up their text, they have full control over line breaks by adding <br\> tags. - -It is a non-argument directive and can be executed thusly: - -`%%{wrap}%%` . -``` +> **Note** +> Wrap is a function that is currently only deployable for sequence diagrams. +> +> `Wrap respects a manually added <br>, so if the user wants to break up their text, they have full control over line breaks by adding <br> tags.` +> +> It is a non-argument directive and can be executed thusly: +> +> `%%{wrap}%%` . **An example of text wrapping in a sequence diagram**: -![Image showing wrapped text](img/wrapped%20text.png) +!\[Image showing wrapped text]\(img/wrapped text.png) # Resetting Configurations: @@ -143,7 +144,7 @@ Example of **assignWithDepth**: Example of **object.Assign**: -![Image showing object.assign without depth](img/object.assign%20without%20depth.png) +!\[Image showing object.assign without depth]\(img/object.assign without depth.png) • **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height. @@ -157,13 +158,12 @@ Example of **object.Assign**: | --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- | | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig | -```note -Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset -the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig -to the defaultConfig -Note: currentConfig is set in this function。 -Default value: will mirror Global Config -``` +> **Note** +> Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset +> the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig +> to the defaultConfig +> Note: currentConfig is set in this function。 +> Default value: will mirror Global Config ## getSiteConfig @@ -171,9 +171,8 @@ Default value: will mirror Global Config | --------------- | --------------------------------------------------- | ----------- | ---------------------------------- | | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` | -```note -Returns any values in siteConfig. -``` +> **Note** +> Returns any values in siteConfig. ## setConfig @@ -181,11 +180,10 @@ Returns any values in siteConfig. | ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- | | `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf | -```note -Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any -values found in conf with key found in siteConfig.secure will be replaced with the corresponding -siteConfig value. -``` +> **Note** +> Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any +> values found in conf with key found in siteConfig.secure will be replaced with the corresponding +> siteConfig value. ## getConfig @@ -193,9 +191,8 @@ siteConfig value. | ----------- | --------------------------- | ----------- | ------------------------------- | | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` | -```note -Returns any values in currentConfig. -``` +> **Note** +> Returns any values in currentConfig. ## sanitize @@ -203,10 +200,9 @@ Returns any values in currentConfig. | ---------- | ---------------------------------------- | -------------- | ------ | | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None | -```note -modifies options in-place -Ensures options parameter does not attempt to override siteConfig secure keys. -``` +> **Note** +> modifies options in-place +> Ensures options parameter does not attempt to override siteConfig secure keys. ## reset @@ -220,8 +216,7 @@ Ensures options parameter does not attempt to override siteConfig secure keys. | --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- | | `conf` | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array | -```note -default: current siteConfig (optional, default `getSiteConfig()`) -``` +> **Note** +> default: current siteConfig (optional, default `getSiteConfig()`) -## For more information, read [Setup](Setup.md). +## For more information, read [Setup](./setup/README.md). diff --git a/docs/Tutorials.md b/docs/config/Tutorials.md similarity index 87% rename from docs/Tutorials.md rename to docs/config/Tutorials.md index 0f9465a35c..41e0508cbe 100644 --- a/docs/Tutorials.md +++ b/docs/config/Tutorials.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/Tutorials.md](../../packages/mermaid/src/docs/config/Tutorials.md). # Tutorials @@ -6,7 +10,7 @@ This is list of publicly available Tutorials for using Mermaid.JS . This is inte **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.** -For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. +For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram. ## Live-Editor Tutorials @@ -24,7 +28,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati ## Mermaid with HTML -Examples are provided in [Getting Started](n00b-gettingStarted.md) +Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md) **CodePen Examples:** diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md new file mode 100644 index 0000000000..e5b96670eb --- /dev/null +++ b/docs/config/accessibility.md @@ -0,0 +1,433 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/accessibility.md](../../packages/mermaid/src/docs/config/accessibility.md). + +# Accessibility Options + +## Accessibility + +Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community. + +Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines). +[Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/) + +Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description) + +### aria-roledescription + +The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.) + +For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ + +```html +<svg + aria-roledescription="stateDiagram" + class="statediagram" + xmlns="http://www.w3.org/2000/svg" + width="100%" + id="mermaid-1668720491568" +></svg> +``` + +### Accessible Title and Description + +Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain. + +The accessible title and description will add `<title>` and `<desc>` elements within the SVG element and the [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) and [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) attributes in the SVG tag. + +Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = `chart-title-mermaid-1668725057758`) +and described by the accessible description (id = `chart-desc-mermaid-1668725057758` ); +and the accessible title element (text = "This is the accessible title") +and the accessible description element (text = "This is an accessible description"). + +_(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_ + +```html +<svg + aria-labelledby="chart-title-mermaid-1668725057758" + aria-describedby="chart-desc-mermaid-1668725057758" + xmlns="http://www.w3.org/2000/svg" + width="100%" + id="mermaid-1668725057758" +> + <title id="chart-title-mermaid-1668725057758">This is the accessible title + This is an accessible description + +``` + +Details for the syntax follow. + +#### accessible title + +The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title. +The string value ends at the end of the line. (It can only be a single line.) + +Ex: `accTitle: This is a single line title` + +See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. + +#### accessible description + +An accessible description can be 1 line long (a single line) or many lines long. + +The **single line accessible description** is specified with the **accDescr** _keyword_, followed by a colon (`:`), followed by the string value for the description. + +Ex: `accDescr: This is a single line description.` + +A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`). + +Ex: + + accDescr { The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: see the big decision and then make the big decision.} + +See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. + +#### accTitle and accDescr Usage Examples + +- Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions" + +```mermaid-example + graph LR + accTitle: Big Decisions + accDescr: Bob's Burgers process for making big decisions + A[Identify Big Descision] --> B{Make Big Decision} + B --> D[Be done] +``` + +```mermaid + graph LR + accTitle: Big Decisions + accDescr: Bob's Burgers process for making big decisions + A[Identify Big Descision] --> B{Make Big Decision} + B --> D[Be done] +``` + +Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ + +```html + + Big decisions + Bob's Burgers process for making big decisions + +``` + +- Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: identify the big decision and then make the big decision." + +```mermaid-example + graph LR + accTitle: Bob's Burger's Making Big Decisions + accDescr { + The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: identify the big decision and then make the big decision. + } + A[Identify Big Descision] --> B{Make Big Decision} + B --> D[Be done] +``` + +```mermaid + graph LR + accTitle: Bob's Burger's Making Big Decisions + accDescr { + The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: identify the big decision and then make the big decision. + } + A[Identify Big Descision] --> B{Make Big Decision} + B --> D[Be done] +``` + +Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ + +```html + + Big decisions + + The official Bob's Burgers corporate processes that are used for making very, very big + decisions. This is actually a very simple flow: identify the big decision and then make the big + decision. + + +``` + +#### Sample Code Snippets for other diagram types + +##### Class Diagram + +```mermaid-example + classDiagram + accTitle: My Class Diagram + accDescr: My Class Diagram Description + + Vehicle <|-- Car +``` + +```mermaid + classDiagram + accTitle: My Class Diagram + accDescr: My Class Diagram Description + + Vehicle <|-- Car +``` + +##### Entity Relationship Diagram + +```mermaid-example + erDiagram + accTitle: My Entity Relationship Diagram + accDescr: My Entity Relationship Diagram Description + + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses + +``` + +```mermaid + erDiagram + accTitle: My Entity Relationship Diagram + accDescr: My Entity Relationship Diagram Description + + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses + +``` + +##### Gantt Chart + +```mermaid-example + gantt + accTitle: My Gantt Chart Accessibility Title + accDescr: My Gantt Chart Accessibility Description + + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + +``` + +```mermaid + gantt + accTitle: My Gantt Chart Accessibility Title + accDescr: My Gantt Chart Accessibility Description + + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + +``` + +##### Gitgraph + +```mermaid-example + gitGraph + accTitle: My Gitgraph Accessibility Title + accDescr: My Gitgraph Accessibility Description + + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit + +``` + +```mermaid + gitGraph + accTitle: My Gitgraph Accessibility Title + accDescr: My Gitgraph Accessibility Description + + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit + +``` + +##### Pie Chart + +```mermaid-example + pie + accTitle: My Pie Chart Accessibility Title + accDescr: My Pie Chart Accessibility Description + + title Key elements in Product X + "Calcium" : 42.96 + "Potassium" : 50.05 + "Magnesium" : 10.01 + "Iron" : 5 + +``` + +```mermaid + pie + accTitle: My Pie Chart Accessibility Title + accDescr: My Pie Chart Accessibility Description + + title Key elements in Product X + "Calcium" : 42.96 + "Potassium" : 50.05 + "Magnesium" : 10.01 + "Iron" : 5 + +``` + +##### Requirement Diagram + +```mermaid-example + requirementDiagram + accTitle: My Requirement Diagram + accDescr: My Requirement Diagram Description + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + +``` + +```mermaid + requirementDiagram + accTitle: My Requirement Diagram + accDescr: My Requirement Diagram Description + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + +``` + +##### Sequence Diagram + +```mermaid-example + sequenceDiagram + accTitle: My Sequence Diagram + accDescr: My Sequence Diagram Description + + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +```mermaid + sequenceDiagram + accTitle: My Sequence Diagram + accDescr: My Sequence Diagram Description + + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +##### State Diagram + +```mermaid-example + stateDiagram + accTitle: My State Diagram + accDescr: My State Diagram Description + + s1 --> s2 + +``` + +```mermaid + stateDiagram + accTitle: My State Diagram + accDescr: My State Diagram Description + + s1 --> s2 + +``` + +##### User Journey Diagram + +```mermaid-example + journey + accTitle: My User Journey Diagram + accDescr: My User Journey Diagram Description + + 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 + accTitle: My User Journey Diagram + accDescr: My User Journey Diagram Description + + 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 + +``` diff --git a/docs/developer-docs/configuration.md b/docs/config/configuration.md similarity index 85% rename from docs/developer-docs/configuration.md rename to docs/config/configuration.md index ba3422f6d9..c7b780143d 100644 --- a/docs/developer-docs/configuration.md +++ b/docs/config/configuration.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md). # Configuration diff --git a/docs/directives.md b/docs/config/directives.md similarity index 92% rename from docs/directives.md rename to docs/config/directives.md index f814782f09..5507070801 100644 --- a/docs/directives.md +++ b/docs/config/directives.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md). # Directives @@ -26,7 +30,7 @@ Mermaid basically supports two types of configuration options to be overridden b 2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. -**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. +**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs @@ -84,7 +88,13 @@ 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: -```mmd2 +```mermaid-example +%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% +%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% +... +``` + +```mermaid %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% ... @@ -92,11 +102,11 @@ Note: You can use 'init' or 'initialize' as both acceptable as init directives. parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`: -```json5 +```json { - logLevel: 'fatal', - theme: 'dark', - startOnLoad: true, + "logLevel": "fatal", + "theme": "dark", + "startOnLoad": true } ``` @@ -223,7 +233,7 @@ Some common flowchart configurations are: - _diagramPadding_: number - _useMaxWidth_: number -For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. +For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ The following code snippet changes flowchart config: @@ -267,7 +277,7 @@ Some common sequence configurations are: - _showSequenceNumbers_: boolean - _wrap_: boolean -For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. +For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code. _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ So, `wrap` by default has a value of `false` for sequence diagrams. diff --git a/docs/img/accessibility-div-example-2.png b/docs/config/img/accessibility-div-example-2.png similarity index 100% rename from docs/img/accessibility-div-example-2.png rename to docs/config/img/accessibility-div-example-2.png diff --git a/docs/img/accessibility-div-example.png b/docs/config/img/accessibility-div-example.png similarity index 100% rename from docs/img/accessibility-div-example.png rename to docs/config/img/accessibility-div-example.png diff --git a/docs/img/assignWithDepth.png b/docs/config/img/assignWithDepth.png similarity index 100% rename from docs/img/assignWithDepth.png rename to docs/config/img/assignWithDepth.png diff --git a/docs/img/object.assign without depth.png b/docs/config/img/object.assign without depth.png similarity index 100% rename from docs/img/object.assign without depth.png rename to docs/config/img/object.assign without depth.png diff --git a/docs/img/python-mermaid-integration.png b/docs/config/img/python-mermaid-integration.png similarity index 100% rename from docs/img/python-mermaid-integration.png rename to docs/config/img/python-mermaid-integration.png diff --git a/docs/img/wrapped text.png b/docs/config/img/wrapped text.png similarity index 100% rename from docs/img/wrapped text.png rename to docs/config/img/wrapped text.png diff --git a/docs/config/mermaidCLI.md b/docs/config/mermaidCLI.md new file mode 100644 index 0000000000..530ac93ab3 --- /dev/null +++ b/docs/config/mermaidCLI.md @@ -0,0 +1,9 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/mermaidCLI.md](../../packages/mermaid/src/docs/config/mermaidCLI.md). + +# mermaid CLI + +mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead. diff --git a/docs/n00b-advanced.md b/docs/config/n00b-advanced.md similarity index 63% rename from docs/n00b-advanced.md rename to docs/config/n00b-advanced.md index e6a6adcc37..5dd9074297 100644 --- a/docs/n00b-advanced.md +++ b/docs/config/n00b-advanced.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/n00b-advanced.md](../../packages/mermaid/src/docs/config/n00b-advanced.md). # Advanced n00b mermaid (Coming soon..) diff --git a/docs/config/setup/README.md b/docs/config/setup/README.md new file mode 100644 index 0000000000..1cf82797de --- /dev/null +++ b/docs/config/setup/README.md @@ -0,0 +1,13 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/README.md](../../../packages/mermaid/src/docs/config/setup/README.md). + +# mermaid + +## Modules + +- [config](modules/config.md) +- [defaultConfig](modules/defaultConfig.md) +- [mermaidAPI](modules/mermaidAPI.md) diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md new file mode 100644 index 0000000000..8381dc8c73 --- /dev/null +++ b/docs/config/setup/modules/config.md @@ -0,0 +1,276 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/config.md](../../../../packages/mermaid/src/docs/config/setup/modules/config.md). + +# Module: config + +## Variables + +### defaultConfig + +• `Const` **defaultConfig**: `MermaidConfig` + +#### Defined in + +[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7) + +## Functions + +### addDirective + +▸ **addDirective**(`directive`): `void` + +Pushes in a directive to the configuration + +#### Parameters + +| Name | Type | Description | +| :---------- | :---- | :----------------------- | +| `directive` | `any` | The directive to push in | + +#### Returns + +`void` + +#### Defined in + +[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191) + +--- + +### getConfig + +▸ **getConfig**(): `MermaidConfig` + +## getConfig + +| Function | Description | Type | Return Values | +| --------- | ------------------------- | ----------- | ------------------------------ | +| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config | + +**Notes**: Returns **any** the currentConfig + +#### Returns + +`MermaidConfig` + +The currentConfig + +#### Defined in + +[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137) + +--- + +### getSiteConfig + +▸ **getSiteConfig**(): `MermaidConfig` + +## getSiteConfig + +| Function | Description | Type | Values | +| ------------- | ------------------------------------------------- | ----------- | -------------------------------- | +| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig | + +**Notes**: Returns **any** values in siteConfig. + +#### Returns + +`MermaidConfig` + +The siteConfig + +#### Defined in + +[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96) + +--- + +### reset + +▸ **reset**(`config?`): `void` + +## reset + +| Function | Description | Type | Required | Values | +| -------- | ---------------------------- | ----------- | -------- | ------ | +| reset | Resets currentConfig to conf | Put Request | Required | None | + +## conf + +| Parameter | Description | Type | Required | Values | +| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- | +| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array | + +**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`) + +#### Parameters + +| Name | Type | Default value | Description | +| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `config` | `MermaidConfig` | `siteConfig` | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). | + +#### Returns + +`void` + +#### Defined in + +[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223) + +--- + +### sanitize + +▸ **sanitize**(`options`): `void` + +## sanitize + +| Function | Description | Type | Values | +| -------- | -------------------------------------- | ----------- | ------ | +| sanitize | Sets the siteConfig to desired values. | Put Request | None | + +Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies +options in-place + +#### Parameters + +| Name | Type | Description | +| :-------- | :---- | :-------------------------------- | +| `options` | `any` | The potential setConfig parameter | + +#### Returns + +`void` + +#### Defined in + +[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152) + +--- + +### saveConfigFromInitialize + +▸ **saveConfigFromInitialize**(`conf`): `void` + +#### Parameters + +| Name | Type | +| :----- | :-------------- | +| `conf` | `MermaidConfig` | + +#### Returns + +`void` + +#### Defined in + +[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75) + +--- + +### setConfig + +▸ **setConfig**(`conf`): `MermaidConfig` + +## setConfig + +| Function | Description | Type | Values | +| ------------- | ------------------------------------- | ----------- | --------------------------------------- | +| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | + +**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure +keys. Any values found in conf with key found in siteConfig.secure will be replaced with the +corresponding siteConfig value. + +#### Parameters + +| Name | Type | Description | +| :----- | :-------------- | :-------------------------- | +| `conf` | `MermaidConfig` | The potential currentConfig | + +#### Returns + +`MermaidConfig` + +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) + +--- + +### setSiteConfig + +▸ **setSiteConfig**(`conf`): `MermaidConfig` + +## setSiteConfig + +| Function | Description | Type | Values | +| ------------- | ------------------------------------- | ----------- | --------------------------------------- | +| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | + +**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls +to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) +will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this +function _Default value: At default, will mirror Global Config_ + +#### Parameters + +| Name | Type | Description | +| :----- | :-------------- | :------------------------------------------ | +| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig | + +#### Returns + +`MermaidConfig` + +The new siteConfig + +#### Defined in + +[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61) + +--- + +### updateCurrentConfig + +▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig` + +#### Parameters + +| Name | Type | +| :------------ | :-------------- | +| `siteCfg` | `MermaidConfig` | +| `_directives` | `any`\[] | + +#### Returns + +`MermaidConfig` + +#### Defined in + +[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14) + +--- + +### updateSiteConfig + +▸ **updateSiteConfig**(`conf`): `MermaidConfig` + +#### Parameters + +| Name | Type | +| :----- | :-------------- | +| `conf` | `MermaidConfig` | + +#### Returns + +`MermaidConfig` + +#### Defined in + +[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md new file mode 100644 index 0000000000..05f6f8a2c6 --- /dev/null +++ b/docs/config/setup/modules/defaultConfig.md @@ -0,0 +1,56 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/defaultConfig.md](../../../../packages/mermaid/src/docs/config/setup/modules/defaultConfig.md). + +# Module: defaultConfig + +## Variables + +### configKeys + +• `Const` **configKeys**: `string`\[] + +#### Defined in + +[defaultConfig.ts:1933](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1933) + +--- + +### default + +• `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)].** + +## **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. + +#### Defined in + +[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md new file mode 100644 index 0000000000..40e4b567f3 --- /dev/null +++ b/docs/config/setup/modules/mermaidAPI.md @@ -0,0 +1,317 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md). + +# Module: mermaidAPI + +## References + +### default + +Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) + +## Type Aliases + +### D3Element + +Ƭ **D3Element**: `any` + +#### Defined in + +[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72) + +## Variables + +### mermaidAPI + +• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseAsync`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `string` ; `renderAsync`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> + +## mermaidAPI configuration defaults + +```ts +const config = { + theme: 'default', + logLevel: 'fatal', + securityLevel: 'strict', + startOnLoad: true, + arrowMarkerAbsolute: false, + + er: { + diagramPadding: 20, + layoutDirection: 'TB', + minEntityWidth: 100, + minEntityHeight: 75, + entityPadding: 15, + stroke: 'gray', + fill: 'honeydew', + fontSize: 12, + useMaxWidth: true, + }, + flowchart: { + diagramPadding: 8, + htmlLabels: true, + curve: 'basis', + }, + sequence: { + diagramMarginX: 50, + diagramMarginY: 10, + actorMargin: 50, + width: 150, + height: 65, + boxMargin: 10, + boxTextMargin: 5, + noteMargin: 10, + messageMargin: 35, + messageAlign: 'center', + mirrorActors: true, + bottomMarginAdj: 1, + useMaxWidth: true, + rightAngles: false, + showSequenceNumbers: false, + }, + gantt: { + titleTopMargin: 25, + barHeight: 20, + barGap: 4, + topPadding: 50, + leftPadding: 75, + gridLineStartPadding: 35, + fontSize: 11, + fontFamily: '"Open Sans", sans-serif', + numberSectionStyles: 4, + axisFormat: '%Y-%m-%d', + topAxis: false, + }, +}; +mermaid.initialize(config); +``` + +#### Defined in + +[mermaidAPI.ts:961](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L961) + +## Functions + +### appendDivSvgG + +▸ **appendDivSvgG**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any` + +Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes. +Only set the style attribute on the enclosing div if divStyle is given. +Only set the xmlns:xlink attribute on svg if svgXlink is given. +Return the last node appended + +#### Parameters + +| Name | Type | Description | +| :--------------- | :------- | :----------------------------------------------- | +| `parentRoot` | `any` | the d3 node to append things to | +| `id` | `string` | the value to set the id attr to | +| `enclosingDivId` | `string` | the id to set the enclosing div to | +| `divStyle?` | `string` | if given, the style to set the enclosing div to | +| `svgXlink?` | `string` | if given, the link to set the new svg element to | + +#### Returns + +`any` + +- returns the parentRoot that had nodes appended + +#### Defined in + +[mermaidAPI.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L285) + +--- + +### cleanUpSvgCode + +▸ **cleanUpSvgCode**(`svgCode?`, `inSandboxMode`, `useArrowMarkerUrls`): `string` + +Clean up svgCode. Do replacements needed + +#### Parameters + +| Name | Type | Default value | Description | +| :------------------- | :-------- | :------------ | :---------------------------------------------------------- | +| `svgCode` | `string` | `''` | the code to clean up | +| `inSandboxMode` | `boolean` | `undefined` | security level | +| `useArrowMarkerUrls` | `boolean` | `undefined` | should arrow marker's use full urls? (vs. just the anchors) | + +#### Returns + +`string` + +the cleaned up svgCode + +#### Defined in + +[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236) + +--- + +### createCssStyles + +▸ **createCssStyles**(`config`, `graphType`, `classDefs?`): `string` + +Create the user styles + +#### Parameters + +| Name | Type | Description | +| :---------- | :-------------- | :----------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | +| `config` | `MermaidConfig` | configuration that has style and theme settings to use | +| `graphType` | `string` | used for checking if classDefs should be applied | +| `classDefs` | `undefined` | `null` | `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) | + +#### Returns + +`string` + +the string with all the user styles + +#### Defined in + +[mermaidAPI.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L165) + +--- + +### createUserStyles + +▸ **createUserStyles**(`config`, `graphType`, `classDefs`, `svgId`): `string` + +#### Parameters + +| Name | Type | +| :---------- | :----------------------------------------- | +| `config` | `MermaidConfig` | +| `graphType` | `string` | +| `classDefs` | `Record`<`string`, `DiagramStyleClassDef`> | +| `svgId` | `string` | + +#### Returns + +`string` + +#### Defined in + +[mermaidAPI.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L213) + +--- + +### cssImportantStyles + +▸ **cssImportantStyles**(`cssClass`, `element`, `cssClasses?`): `string` + +Create a CSS style that starts with the given class name, then the element, +with an enclosing block that has each of the cssClasses followed by !important; + +#### Parameters + +| Name | Type | Default value | Description | +| :----------- | :---------- | :------------ | :--------------------------------------------- | +| `cssClass` | `string` | `undefined` | CSS class name | +| `element` | `string` | `undefined` | CSS element | +| `cssClasses` | `string`\[] | `[]` | list of CSS styles to append after the element | + +#### Returns + +`string` + +- the constructed string + +#### Defined in + +[mermaidAPI.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L149) + +--- + +### decodeEntities + +▸ **decodeEntities**(`text`): `string` + +#### Parameters + +| Name | Type | Description | +| :----- | :------- | :----------------- | +| `text` | `string` | text to be decoded | + +#### Returns + +`string` + +#### Defined in + +[mermaidAPI.ts:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L129) + +--- + +### encodeEntities + +▸ **encodeEntities**(`text`): `string` + +#### Parameters + +| Name | Type | Description | +| :----- | :------- | :----------------- | +| `text` | `string` | text to be encoded | + +#### Returns + +`string` + +#### Defined in + +[mermaidAPI.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L100) + +--- + +### putIntoIFrame + +▸ **putIntoIFrame**(`svgCode?`, `svgElement?`): `string` + +Put the svgCode into an iFrame. Return the iFrame code + +#### Parameters + +| Name | Type | Default value | Description | +| :------------ | :------- | :------------ | :--------------------------------------------------------------------------- | +| `svgCode` | `string` | `''` | the svg code to put inside the iFrame | +| `svgElement?` | `any` | `undefined` | the d3 node that has the current svgElement so we can get the height from it | + +#### Returns + +`string` + +- the code with the iFrame that now contains the svgCode + TODO replace btoa(). Replace with buf.toString('base64')? + +#### Defined in + +[mermaidAPI.ts:264](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L264) + +--- + +### removeExistingElements + +▸ **removeExistingElements**(`doc`, `id`, `divId`, `iFrameId`): `void` + +Remove any existing elements from the given document + +#### Parameters + +| Name | Type | Description | +| :--------- | :--------- | :------------------------------------ | +| `doc` | `Document` | the document to removed elements from | +| `id` | `string` | id for any existing SVG element | +| `divId` | `string` | - | +| `iFrameId` | `string` | - | + +#### Returns + +`void` + +#### Defined in + +[mermaidAPI.ts:335](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L335) diff --git a/docs/config/theming.md b/docs/config/theming.md new file mode 100644 index 0000000000..b34913af56 --- /dev/null +++ b/docs/config/theming.md @@ -0,0 +1,219 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md). + +# Theme Configuration + +Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0. + +Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used. + +## Available Themes + +1. **default** - This is the default theme for all diagrams. + +2. **neutral** - This theme is great for black and white documents that will be printed. + +3. **dark** - This theme goes well with dark-colored elements or dark-mode. + +4. **forest** - This theme contains shades of green. + +5. **base** - This is the only theme that can be modified. Use this theme as the base for customizations. + +## Site-wide Theme + +To customize themes site-wide, call the `initialize` method on the `mermaidAPI`. + +Example of `initialize` call setting `theme` to `base`: + +```javascript +mermaidAPI.initialize({ + securityLevel: 'loose', + theme: 'base', +}); +``` + +## Diagram-specific Themes + +To customize the theme of an individual diagram, use the `init` directive. + +Example of `init` directive setting the `theme` to `forest`: + +```mermaid-example +%%{init: {'theme':'forest'}}%% + graph TD + a --> b +``` + +```mermaid +%%{init: {'theme':'forest'}}%% + graph TD + a --> b +``` + +> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations. + +## Customizing Themes with `themeVariables` + +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)) | + +Example of modifying `themeVariables` using the `init` directive: + +```mermaid-example +%%{ + init: { + 'theme': 'base', + 'themeVariables': { + 'primaryColor': '#BB2528', + 'primaryTextColor': '#fff', + 'primaryBorderColor': '#7C0000', + 'lineColor': '#F8B229', + 'secondaryColor': '#006100', + 'tertiaryColor': '#fff' + } + } +}%% + graph TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + B --> G[/Another/] + C ==>|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] + subgraph section + C + D + E + F + G + end +``` + +```mermaid +%%{ + init: { + 'theme': 'base', + 'themeVariables': { + 'primaryColor': '#BB2528', + 'primaryTextColor': '#fff', + 'primaryBorderColor': '#7C0000', + 'lineColor': '#F8B229', + 'secondaryColor': '#006100', + 'tertiaryColor': '#fff' + } + } +}%% + graph TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + B --> G[/Another/] + C ==>|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] + subgraph section + C + D + E + F + G + end +``` + +## Color and Color Calculation + +To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc. + +The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not. + +## Theme Variables + +| Variable | Default value | Description | +| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | +| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | +| fontFamily | trebuchet ms, verdana, arial | | +| fontSize | 16px | Font size in pixels | +| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | +| secondaryColor | calculated from primaryColor | | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | +| tertiaryColor | calculated from primaryColor | | +| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | +| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | +| noteBkgColor | #fff5ad | Color used as background in notes | +| noteTextColor | #333 | Text color in note rectangles | +| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | +| lineColor | calculated from background | | +| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | +| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | +| errorBkgColor | tertiaryColor | Color for syntax error message | +| errorTextColor | tertiaryTextColor | Color for syntax error message | + +## Flowchart Variables + +| Variable | Default value | Description | +| ------------------- | ------------------------------ | --------------------------- | +| nodeBorder | primaryBorderColor | Node Border Color | +| clusterBkg | tertiaryColor | Background in subgraphs | +| clusterBorder | tertiaryBorderColor | Cluster Border Color | +| defaultLinkColor | lineColor | Link Color | +| titleColor | tertiaryTextColor | Title Color | +| edgeLabelBackground | calculated from secondaryColor | | +| nodeTextColor | primaryTextColor | Color for text inside Nodes | + +## Sequence Diagram Variables + +| Variable | Default value | Description | +| --------------------- | ------------------------------ | --------------------------- | +| actorBkg | mainBkg | Actor Background Color | +| actorBorder | primaryBorderColor | Actor Border Color | +| actorTextColor | primaryTextColor | Actor Text Color | +| actorLineColor | grey | Actor Line Color | +| signalColor | textColor | Signal Color | +| signalTextColor | textColor | Signal Text Color | +| labelBoxBkgColor | actorBkg | Label Box Background Color | +| labelBoxBorderColor | actorBorder | Label Box Border Color | +| labelTextColor | actorTextColor | Label Text Color | +| loopTextColor | actorTextColor | Loop Text Color | +| activationBorderColor | calculated from secondaryColor | Activation Border Color | +| activationBkgColor | secondaryColor | Activation Background Color | +| sequenceNumberColor | calculated from lineColor | Sequence Number Color | + +## State Colors + +| Variable | Default value | Description | +| ------------- | ---------------- | -------------------------------------------- | +| labelColor | primaryTextColor | | +| altBackground | tertiaryColor | Used for background in deep composite states | + +## Class Colors + +| Variable | Default value | Description | +| --------- | ------------- | ------------------------------- | +| classText | textColor | Color of Text in class diagrams | + +## User Journey Colors + +| Variable | Default value | Description | +| --------- | ------------------------------ | --------------------------------------- | +| fillType0 | primaryColor | Fill for 1st section in journey diagram | +| fillType1 | secondaryColor | Fill for 2nd section in journey diagram | +| fillType2 | calculated from primaryColor | Fill for 3rd section in journey diagram | +| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram | +| fillType4 | calculated from primaryColor | Fill for 5th section in journey diagram | +| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram | +| fillType6 | calculated from primaryColor | Fill for 7th section in journey diagram | +| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram | diff --git a/docs/usage.md b/docs/config/usage.md similarity index 86% rename from docs/usage.md rename to docs/config/usage.md index 1f22963249..476806d8f8 100644 --- a/docs/usage.md +++ b/docs/config/usage.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/usage.md](../../packages/mermaid/src/docs/config/usage.md). # Usage @@ -14,7 +18,7 @@ Please note that you can switch versions through the dropdown box at the top rig ## Using mermaid -For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md). +For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md). We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor. @@ -37,7 +41,7 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai **Hosting mermaid on a web page.** -> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md) +> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md) The easiest way to integrate mermaid on a web page requires two elements: @@ -58,7 +62,7 @@ Example: ```html ``` @@ -81,7 +85,7 @@ Example: B-->D(fa:fa-spinner); @@ -115,10 +119,9 @@ Values: - **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. -```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. -**sandbox** security level is still in the beta version. -``` +> **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. +> **sandbox** security level is still in the beta version. **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.** @@ -183,9 +186,8 @@ Or with no config object, and a jQuery selection: mermaid.init(undefined, $('#someId .yetAnotherClass')); ``` -```warning -This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead. -``` +> **Warning** +> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead. ## Usage with webpack @@ -224,7 +226,7 @@ The example code below is an extract of what mermaid does when using the API. Th bind events to an SVG when using the API for rendering. ```javascript -var insertSvg = function (svgCode, bindFunctions) { +const insertSvg = function (svgCode, bindFunctions) { element.innerHTML = svgCode; if (typeof callback !== 'undefined') { callback(id); @@ -232,7 +234,7 @@ var insertSvg = function (svgCode, bindFunctions) { bindFunctions(element); }; -var id = 'theGraph'; +const id = 'theGraph'; mermaidAPI.render(id, txt, insertSvg, element); ``` @@ -248,7 +250,7 @@ mermaidAPI.render(id, txt, insertSvg, element); This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html. ```javascript -var renderer = new marked.Renderer(); +const renderer = new marked.Renderer(); renderer.code = function (code, language) { if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { return '
' + code + '
'; @@ -299,8 +301,8 @@ mermaid.parseError = function (err, hash) { displayErrorInGui(err); }; -var textFieldUpdated = function () { - var textStr = getTextFromFormField('code'); +const textFieldUpdated = function () { + const textStr = getTextFromFormField('code'); if (mermaid.parse(textStr)) { reRender(textStr); @@ -324,7 +326,7 @@ setting the options in mermaid. 4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated** The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of -configuration objects are described [in the mermaidAPI documentation](Setup.md). +configuration objects are described [in the mermaidAPI documentation](./setup/README.md). ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call @@ -339,15 +341,14 @@ on what kind of integration you use. ``` -```tip -This is the preferred way of configuring mermaid. -``` +> **Note** +> This is the preferred way of configuring mermaid. ### The following methods are deprecated and are kept only for backwards compatibility. ## Using the mermaid object -Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this +It is possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: - mermaid.startOnLoad @@ -357,9 +358,8 @@ approach are: mermaid.startOnLoad = true; ``` -```warning -This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. -``` +> **Warning** +> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. ## Using the mermaid_config @@ -373,9 +373,8 @@ approach are: mermaid_config.startOnLoad = true; ``` -```warning -This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. -``` +> **Warning** +> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. ## Using the mermaid.init call @@ -388,6 +387,5 @@ To set some configuration via the mermaid object. The two parameters that are su mermaid_config.startOnLoad = true; ``` -```warning -This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. -``` +> **Warning** +> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md deleted file mode 100644 index fee683551b..0000000000 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ /dev/null @@ -1,927 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - ---- - -sort: 3 -title: Flowchart - ---- - -# Flowcharts - Basic Syntax - -## Graph - -This statement declares the direction of the flowchart, either from top to bottom (`TD` or `TB`): - -```mermaid-example -graph TD - Start --> Stop -``` - -```mermaid -graph TD - Start --> Stop -``` - -or left to right (`LR`): - -```mermaid-example -graph LR - Start --> Stop -``` - -```mermaid -graph 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 - -## Flowcharts - -This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs. - -Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts. - -> **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).\*\* - -## Nodes and shapes - -### A node (default) - -```mermaid-example -graph LR - id -``` - -```mermaid -graph LR - id -``` - -> **Note** The id is what is displayed in the box. - -### A node with text - -It is also possible to set text in the box that differs from the id. If this is done several times, only the last text -found for the node will be rendered. Also if you define edges for the node later on, you can omit text definitions. The -text previously defined will be used when rendering the box. - -```mermaid-example -graph LR - id1[This is the text in the box] -``` - -```mermaid -graph LR - id1[This is the text in the box] -``` - -## Node Shapes - -### A node with round edges - -```mermaid-example -graph LR - id1(This is the text in the box) -``` - -```mermaid -graph LR - id1(This is the text in the box) -``` - -### A stadium-shaped node - -```mermaid-example -graph LR - id1([This is the text in the box]) -``` - -```mermaid -graph LR - id1([This is the text in the box]) -``` - -### A node in a subroutine shape - -```mermaid-example -graph LR - id1[[This is the text in the box]] -``` - -```mermaid -graph LR - id1[[This is the text in the box]] -``` - -### A node in a cylindrical shape - -```mermaid-example -graph LR - id1[(Database)] -``` - -```mermaid -graph LR - id1[(Database)] -``` - -### A node in the form of a circle - -```mermaid-example -graph LR - id1((This is the text in the circle)) -``` - -```mermaid -graph LR - id1((This is the text in the circle)) -``` - -### A node in an asymmetric shape - -```mermaid-example -graph LR - id1>This is the text in the box] -``` - -```mermaid -graph LR - id1>This is the text in the box] -``` - -Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._ - -### A node (rhombus) - -```mermaid-example -graph LR - id1{This is the text in the box} -``` - -```mermaid -graph LR - id1{This is the text in the box} -``` - -### A hexagonal node - -```mermaid-example -graph LR - id1{{This is the text in the box}} -``` - -```mermaid -graph LR - id1{{This is the text in the box}} -``` - -### Parallelogram - -```mermaid-example -graph TD - id1[/This is the text in the box/] -``` - -```mermaid -graph TD - id1[/This is the text in the box/] -``` - -### Parallelogram alt - -```mermaid-example -graph TD - id1[\This is the text in the box\] -``` - -```mermaid -graph TD - id1[\This is the text in the box\] -``` - -### Trapezoid - -```mermaid-example -graph TD - A[/Christmas\] -``` - -```mermaid -graph TD - A[/Christmas\] -``` - -### Trapezoid alt - -```mermaid-example -graph TD - B[\Go shopping/] -``` - -```mermaid -graph TD - B[\Go shopping/] -``` - -## Links between nodes - -Nodes can be connected with links/edges. It is possible to have different types of links, or attach a text string on a link. - -### Link with arrow head - -```mermaid-example -graph LR - A-->B -``` - -```mermaid -graph LR - A-->B -``` - -### Open link - -```mermaid-example -graph LR - A --- B -``` - -```mermaid -graph LR - A --- B -``` - -### Text on links - -```mermaid-example -graph LR - A-- This is the text! ---B -``` - -```mermaid -graph LR - A-- This is the text! ---B -``` - -or - -```mermaid-example -graph LR - A---|This is the text|B -``` - -```mermaid -graph LR - A---|This is the text|B -``` - -### Link with arrow head and text - -```mermaid-example -graph LR - A-->|text|B -``` - -```mermaid -graph LR - A-->|text|B -``` - -or - -```mermaid-example -graph LR - A-- text -->B -``` - -```mermaid -graph LR - A-- text -->B -``` - -### Dotted link - -```mermaid-example -graph LR; - A-.->B; -``` - -```mermaid -graph LR; - A-.->B; -``` - -### Dotted link with text - -```mermaid-example -graph LR - A-. text .-> B -``` - -```mermaid -graph LR - A-. text .-> B -``` - -### Thick link - -```mermaid-example -graph LR - A ==> B -``` - -```mermaid -graph LR - A ==> B -``` - -### Thick link with text - -```mermaid-example -graph LR - A == text ==> B -``` - -```mermaid -graph LR - A == text ==> B -``` - -### Chaining of links - -It is possible to declare many links on the same line as per below: - -```mermaid-example -graph LR - A -- text --> B -- text2 --> C -``` - -```mermaid -graph LR - A -- text --> B -- text2 --> C -``` - -It is also possible to declare multiple nodes links in the same line as per below: - -```mermaid-example -graph LR - a --> b & c--> d -``` - -```mermaid -graph LR - a --> b & c--> d -``` - -You can then describe dependencies in a very expressive way. Like the one-liner below: - -```mermaid-example -graph TB - A & B--> C & D -``` - -```mermaid -graph TB - A & B--> C & D -``` - -If you describe the same diagram using the the basic syntax, it will take four lines: - -```mermaid-example -graph TB - A --> C - A --> D - B --> C - B --> D -``` - -```mermaid -graph TB - A --> C - A --> D - B --> C - B --> D -``` - -A word of warning, one could go overboard with this, making the graph harder to read in -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. - -### New arrow types - -When using flowchart instead of graph there are new types of arrows supported as per below: - -```mermaid-example -flowchart LR - A --o B - B --x C -``` - -```mermaid -flowchart LR - A --o B - B --x C -``` - -### Multi directional arrows - -When using flowchart instead of graph there is the possibility to use multidirectional arrows. - -```mermaid-example -flowchart LR - A o--o B - B <--> C - C x--x D -``` - -```mermaid -flowchart LR - A o--o B - B <--> C - C x--x D -``` - -### Minimum length of a link - -Each node in the flowchart is ultimately assigned to a rank in the rendered -graph, i.e. to a vertical or horizontal level (depending on the flowchart -orientation), based on the nodes to which it is linked. By default, links -can span any number of ranks, but you can ask for any link to be longer -than the others by adding extra dashes in the link definition. - -In the following example, two extra dashes are added in the link from node _B_ -to node _E_, so that it spans two more ranks than regular links: - -```mermaid-example -graph TD - A[Start] --> B{Is it?}; - B -->|Yes| C[OK]; - C --> D[Rethink]; - D --> B; - B ---->|No| E[End]; -``` - -```mermaid -graph TD - A[Start] --> B{Is it?}; - B -->|Yes| C[OK]; - C --> D[Rethink]; - D --> B; - B ---->|No| E[End]; -``` - -> **Note** The rendering engine may cause some links to be longer than -> the number of ranks requested in order to accommodate the overall topology. - -When the link label is written in the middle of the link, the extra dashes must -be added on the right side of the link. The following example is equivalent to -the previous one: - -```mermaid-example -graph TD - A[Start] --> B{Is it?}; - B -- Yes --> C[OK]; - C --> D[Rethink]; - D --> B; - B -- No ----> E[End]; -``` - -```mermaid -graph TD - A[Start] --> B{Is it?}; - B -- Yes --> C[OK]; - C --> D[Rethink]; - D --> B; - B -- No ----> E[End]; -``` - -For dotted or thick links, the characters to add are equals signs or dots, -as summed up in the following table: - -| Length | 1 | 2 | 3 | -| ----------------- | :----: | :-----: | :------: | -| Normal | `---` | `----` | `-----` | -| Normal with arrow | `-->` | `--->` | `---->` | -| Thick | `===` | `====` | `=====` | -| Thick with arrow | `==>` | `===>` | `====>` | -| Dotted | `-.-` | `-..-` | `-...-` | -| Dotted with arrow | `-.->` | `-..->` | `-...->` | - -## Special characters that break syntax - -Use quotes around text in order to render more troublesome characters, as in the example below: - -```mermaid-example -graph LR - id1["This is the (text) in the box"] -``` - -```mermaid -graph LR - id1["This is the (text) in the box"] -``` - -### Entity codes to escape characters - -Special characters (including Unicode) can be included by using HTML escaping syntax: - -```mermaid-example - graph LR - A["A double quote:#quot;"] -->B["A dec char:#9829;"] -``` - -```mermaid - graph LR - A["A double quote:#quot;"] -->B["A dec char:#9829;"] -``` - -## Subgraphs - - subgraph title - graph definition - end - -An example: - -```mermaid-example -graph TB - c1-->a2 - subgraph one - a1-->a2 - end - subgraph two - b1-->b2 - end - subgraph three - c1-->c2 - end -``` - -```mermaid -graph TB - c1-->a2 - subgraph one - a1-->a2 - end - subgraph two - b1-->b2 - end - subgraph three - c1-->c2 - end -``` - -You can also set an explicit id for the subgraph: - -```mermaid-example -graph TB - c1-->a2 - subgraph ide1 [one] - a1-->a2 - end -``` - -```mermaid -graph 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: - -```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 -``` - -```mermaid -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 -``` - -## Interaction - -A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. - - click nodeId callback - click nodeId call callback() - -- nodeId is the id of the node -- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. - -```html - -``` - -Examples of tooltip usage: - -The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. - -```mermaid-example -graph LR; - 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" -``` - -```mermaid -graph LR; - 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" -``` - -> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. - -?> 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/). - -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): - -```mermaid-example -graph LR; - 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 -``` - -```mermaid -graph LR; - 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 -``` - -Beginner's tip—here's a full example of using interactive links in HTML: - -```html - - 
-    graph LR;
-        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"
-
- - - -``` - -### 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax. - -```mermaid-example -graph LR -%% this is a comment A -- text --> B{node} - A -- text --> B -- text2 --> C -``` - -```mermaid -graph LR -%% this is a comment A -- text --> B{node} - A -- text --> B -- text2 --> C -``` - -## Styling and classes - -### Styling links - -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 nodes, some other way of attaching style is required. -So instead of ids, the order number of when the link was defined in the graph is used, starting with zero. Here's a linkStyle statement that would apply style to the fourth link in the graph: - - linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; - -You can specify a `default` to apply to all links, or you can give a comma-separated list of link order numbers. - -Instead of giving a styles option, you can also use custom d3 curve types with the following syntax: - - linkStyle default|numList|num interpolate curveType - -If you want to add both D3 and style options, instead of writing: - - linkStyle default interpolate cardinal - linkStyle default stroke:#ff3,stroke-width:4px,color:red; - -You can combine them: - - linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red; - -### Styling a node - -It is possible to apply specific styles such as a thicker border or a different background color to a node. - -```mermaid-example -graph LR - 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 -``` - -```mermaid -graph LR - 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 reference to multiple nodes. - -here's a class definition: - - classDef className fill:#f9f,stroke:#333,stroke-width:4px; - -and then attaching this class to a node is simply: - - class nodeId1 className; - -It is also possible to attach a class to multiple nodes in one statement: - - class nodeId1,nodeId2 className; - -An even shorter form of adding a class is to attach the classname to the node using the `:::`operator: - -```mermaid-example -graph LR - A:::someclass --> B - classDef someclass fill:#f96; -``` - -```mermaid -graph LR - A:::someclass --> B - classDef someclass fill:#f96; -``` - -### Css classes - -It is also possible to predefine classes in css styles that can be applied from the graph definition: - -**Example style** - -```css -.cssClass > rect { - fill: #ff0000; - stroke: #ffff00; - stroke-width: 4px; -} -``` - -**Example definition** - -```mermaid-example -graph LR; - A-->B[AAABBB]; - B-->D; - class A cssClass; -``` - -```mermaid -graph LR; - A-->B[AAABBB]; - B-->D; - class A cssClass; -``` - -### Default class - -If a class is named `default` it will be assigned to all nodes that do not have a specific class definition. - - classDef default fill:#f9f,stroke:#333,stroke-width:4px; - -## Basic support for fontawesome - -It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#. - -```mermaid-example -graph TD - B["fa:fa-twitter for peace"] - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); - B-->E(A fa:fa-camera-retro perhaps?); -``` - -```mermaid -graph TD - B["fa:fa-twitter for peace"] - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); - B-->E(A fa:fa-camera-retro perhaps?); -``` - -## Graph declarations with spaces between vertices and link and without semicolon - -- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations. - -- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. - -Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges. - -```mermaid-example -graph LR - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -``` - -```mermaid -graph LR - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -``` - -## Configuration... - -Is it 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 (which is described in the mermaidCLI page). -In Javascript config parameters can be set by using `mermaid.flowchartConfig`: - -```javascript -mermaid.flowchartConfig = { - width: '100%', -}; -``` diff --git a/docs/img/Configuration.png b/docs/img/Configuration.png deleted file mode 100644 index 60a808f2c3..0000000000 Binary files a/docs/img/Configuration.png and /dev/null differ diff --git a/docs/img/Editing-process.png b/docs/img/Editing-process.png deleted file mode 100644 index a49b352248..0000000000 Binary files a/docs/img/Editing-process.png and /dev/null differ diff --git a/docs/img/EditingHistory+Links.png b/docs/img/EditingHistory+Links.png deleted file mode 100644 index 3891f39c16..0000000000 Binary files a/docs/img/EditingHistory+Links.png and /dev/null differ diff --git a/docs/img/GitHub-Mark-32px.png b/docs/img/GitHub-Mark-32px.png deleted file mode 100644 index 790fa77108..0000000000 Binary files a/docs/img/GitHub-Mark-32px.png and /dev/null differ diff --git a/docs/img/Live-Editor-Usage.png b/docs/img/Live-Editor-Usage.png deleted file mode 100644 index 04df642dc7..0000000000 Binary files a/docs/img/Live-Editor-Usage.png and /dev/null differ diff --git a/docs/img/book-banner-post-release.jpeg b/docs/img/book-banner-post-release.jpeg deleted file mode 100644 index 005a3282b6..0000000000 Binary files a/docs/img/book-banner-post-release.jpeg and /dev/null differ diff --git a/docs/img/book-banner-post-release.png b/docs/img/book-banner-post-release.png deleted file mode 100644 index 7db35ea7aa..0000000000 Binary files a/docs/img/book-banner-post-release.png and /dev/null differ diff --git a/docs/img/book-banner-pre-release.jpg b/docs/img/book-banner-pre-release.jpg deleted file mode 100644 index 6dc996fd91..0000000000 Binary files a/docs/img/book-banner-pre-release.jpg and /dev/null differ diff --git a/docs/img/book-banner-pre-release.png b/docs/img/book-banner-pre-release.png deleted file mode 100644 index b85b165db0..0000000000 Binary files a/docs/img/book-banner-pre-release.png and /dev/null differ diff --git a/docs/img/class.png b/docs/img/class.png deleted file mode 100644 index fde265f63b..0000000000 Binary files a/docs/img/class.png and /dev/null differ diff --git a/docs/img/flow.png b/docs/img/flow.png deleted file mode 100644 index 37537c18f9..0000000000 Binary files a/docs/img/flow.png and /dev/null differ diff --git a/docs/img/gantt.png b/docs/img/gantt.png deleted file mode 100644 index 304b598b8c..0000000000 Binary files a/docs/img/gantt.png and /dev/null differ diff --git a/docs/img/git.png b/docs/img/git.png deleted file mode 100644 index 2da331a1ed..0000000000 Binary files a/docs/img/git.png and /dev/null differ diff --git a/docs/img/n00b-firstFlow.png b/docs/img/n00b-firstFlow.png deleted file mode 100644 index 5d3c7738d5..0000000000 Binary files a/docs/img/n00b-firstFlow.png and /dev/null differ diff --git a/docs/img/new-diagrams.png b/docs/img/new-diagrams.png deleted file mode 100644 index bd9c8c97ab..0000000000 Binary files a/docs/img/new-diagrams.png and /dev/null differ diff --git a/docs/img/sequence.png b/docs/img/sequence.png deleted file mode 100644 index f37d523f8d..0000000000 Binary files a/docs/img/sequence.png and /dev/null differ diff --git a/docs/img/simple-er.png b/docs/img/simple-er.png deleted file mode 100644 index 6ebf413526..0000000000 Binary files a/docs/img/simple-er.png and /dev/null differ diff --git a/docs/img/user-journey.png b/docs/img/user-journey.png deleted file mode 100644 index 825d467d85..0000000000 Binary files a/docs/img/user-journey.png and /dev/null differ diff --git a/docs/img/without wrap.png b/docs/img/without wrap.png deleted file mode 100644 index 038408d2ba..0000000000 Binary files a/docs/img/without wrap.png and /dev/null differ diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 7adf7225ef..0000000000 --- a/docs/index.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - - mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, - gantt charts and git graphs. - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - diff --git a/docs/integrations.md b/docs/integrations.md deleted file mode 100644 index 09df7cf9fe..0000000000 --- a/docs/integrations.md +++ /dev/null @@ -1,183 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# Integrations - -The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. - -They also serve as proof of concept, for the variety of things that can be built with mermaid. - -## Productivity - -- [GitHub](https://github.com) (**Native support**) - - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) - - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) - - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) -- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) -- [Gitea](https://gitea.io) (**Native support**) -- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) -- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**) -- [Joplin](https://joplinapp.org) (**Native support**) -- [Notion](https://notion.so) (**Native support**) -- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) -- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**) -- [GitBook](https://gitbook.com) - - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) - - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) -- [LiveBook](https://livebook.dev) (**Native support**) -- [Atlassian Products](https://www.atlassian.com) - - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) - - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid) -- [Redmine](https://redmine.org) - - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) -- [mermerd](https://github.com/KarnerTh/mermerd) - -## CRM/ERP/Similar - -- [coreBOS](https://blog.corebos.org/blog/december2019) - -## Blogs - -- [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) - - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) - - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid) - - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams) - -## CMS - -- [VitePress](https://vitepress.vuejs.org/) - - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/) -- [VuePress](https://vuepress.vuejs.org/) - - [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) - -## Communication - -- [Discourse](https://discourse.org) - - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) -- [Mattermost](https://mattermost.com/) - - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid) -- [phpBB](https://phpbb.com) - - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) -- [NodeBB](https://nodebb.org) - - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) - -## Wikis - -- [MediaWiki](https://www.mediawiki.org) - - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) - - [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) - - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) -- [DokuWiki](https://dokuwiki.org) - - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid) - - [ComboStrap](https://combostrap.com/mermaid) -- [TiddlyWiki](https://tiddlywiki.com/) - - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) - - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) - -## Editor Plugins - -- [Vs Code](https://code.visualstudio.com/) - - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) - - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview) - - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting) - - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor) - - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export) - - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf) - - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode) - - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode) -- [Markdown-It](https://github.com/markdown-it/markdown-it) - - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml) - - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid) - - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid) - - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new) - - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less) -- [Atom](https://atom.io) - - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced) - - [Atom Mermaid](https://atom.io/packages/atom-mermaid) - - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid) -- [Sublime Text 3](https://sublimetext.com) - - [Mermaid Package](https://packagecontrol.io/packages/Mermaid) -- [Astah](https://astah.net) - - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-) -- [Light Table](http://lighttable.com/) - - [Mermaid Plugin](https://github.com/cldwalker/Mermaid) -- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) -- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) -- [Vim](https://www.vim.org) - - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) -- [GNU Emacs](https://www.gnu.org/software/emacs/) - - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode) - - [Org-Mode integration](https://github.com/arnm/ob-mermaid) -- [Brackets](https://brackets.io/) - - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview) -- [Iodide](https://github.com/iodide-project/iodide) - - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin) -- [Google docs](https://docs.google.com/) - - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856) -- [Podlite](https://github.com/zag/podlite-desktop) - - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams) -- [GNU Nano](https://www.nano-editor.org/) - - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) - -## Document Generation - -- [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) -- [jSDoc](https://jsdoc.app/) - - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) -- [MkDocs](https://mkdocs.org) - - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) - - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) -- [Type Doc](https://typedoc.org/) - - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) -- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme) -- [Codedoc](https://codedoc.cc/) - - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) -- [mdbook](https://rust-lang.github.io/mdBook/index.html) - - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - -## Browser Extensions - -| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | -| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) | -| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - | -| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) | -| Markdown Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | -| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) | -| Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | -| Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | -| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | -| Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - | -| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | -| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | - -## Other - -- [Jekyll](https://jekyllrb.com/) - - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) -- [Reveal.js](https://github.com/hakimel/reveal.js) - - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) -- [Bisheng](https://www.npmjs.com/package/bisheng) - - [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-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/docs/img/Code-Preview-Config.png b/docs/intro/img/Code-Preview-Config.png similarity index 100% rename from docs/img/Code-Preview-Config.png rename to docs/intro/img/Code-Preview-Config.png diff --git a/docs/img/Live-Editor-Choices.png b/docs/intro/img/Live-Editor-Choices.png similarity index 100% rename from docs/img/Live-Editor-Choices.png rename to docs/intro/img/Live-Editor-Choices.png diff --git a/docs/img/book-banner-post-release.jpg b/docs/intro/img/book-banner-post-release.jpg similarity index 100% rename from docs/img/book-banner-post-release.jpg rename to docs/intro/img/book-banner-post-release.jpg diff --git a/docs/README.md b/docs/intro/index.md similarity index 80% rename from docs/README.md rename to docs/intro/index.md index 0a1691179d..5aa068e27c 100644 --- a/docs/README.md +++ b/docs/intro/index.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/index.md](../../packages/mermaid/src/docs/intro/index.md). # About Mermaid @@ -6,11 +10,11 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. -> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md). +> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference.md). - + -[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) @@ -26,12 +30,12 @@ Diagramming and documentation costs precious developer time and gets outdated qu But not having diagrams or docs ruins productivity and hurts organizational learning.
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).

Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).
-[Tutorials](./Tutorials.md) has video tutorials. -Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md). +[Tutorials](../config/Tutorials.md) has video tutorials. +Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md). -For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md). +For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md). -🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md) +🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../misc/integrations.md) > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). @@ -47,7 +51,7 @@ In our release process we rely heavily on visual regression tests using [applito ## Diagram Types -### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax) +### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax) ```mermaid-example graph TD; @@ -65,9 +69,7 @@ graph TD; C-->D; ``` -![Flowchart](img/flow.png) - -### [Sequence diagram](./sequenceDiagram.md) +### [Sequence diagram](../syntax/sequenceDiagram.md) ```mermaid-example sequenceDiagram @@ -97,9 +99,7 @@ sequenceDiagram Bob-->>John: Jolly good! ``` -![Sequence diagram](img/sequence.png) - -### [Gantt diagram](./gantt.md) +### [Gantt diagram](../syntax/gantt.md) ```mermaid-example gantt @@ -127,9 +127,7 @@ Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ``` -![Gantt diagram](img/gantt.png) - -### [Class diagram](./classDiagram.md) +### [Class diagram](../syntax/classDiagram.md) ```mermaid-example classDiagram @@ -165,9 +163,7 @@ Class01 : int gorilla Class08 <--> C2: Cool label ``` -![Class diagram](img/class.png) - -### Git graph +### [Git graph](../syntax/gitgraph.md) ```mermaid-example gitGraph @@ -195,7 +191,7 @@ Class08 <--> C2: Cool label commit ``` -### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) +### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md) ```mermaid-example erDiagram @@ -213,9 +209,7 @@ erDiagram ``` -![ER diagram](img/simple-er.png) - -### [User Journey Diagram](./user-journey.md) +### [User Journey Diagram](../syntax/userJourney.md) ```mermaid-example journey @@ -241,13 +235,11 @@ journey Sit down: 5: Me ``` -![Journey diagram](img/user-journey.png) - ## Installation -**In depth guides and examples can be found at [Getting Started](/n00b-gettingStarted) and [Usage](/usage).** +**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).** -**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).** +**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).** ### CDN @@ -264,25 +256,25 @@ Latest Version: To Deploy Mermaid: 1. You will need to install node v16, which would have npm -2. Download yarn using npm -3. Enter the following command: `yarn add mermaid` -4. You can then add mermaid as a dev dependency using this command: - `yarn add --dev mermaid` +2. Install mermaid + - NPM: `npm i mermaid` + - Yarn: `yarn add mermaid` + - Pnpm: `pnpm add mermaid` -### [Mermaid API](./Setup.md): +### [Mermaid API](../config/setup/README.md): **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:** ```html ``` **Doing so will command the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
-**Examples can be found at** [Other examples](/examples)
+**Examples can be found at** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 
@@ -308,22 +300,26 @@ Don't hesitate to contact me if you want to get involved!
 
 ## For contributors
 
-### Setup
+### Requirements
 
-```sh
-yarn install
-```
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
 
-### Build
+## Development Installation
 
-```sh
-yarn build:watch
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+# npx is required for first install as volta support for pnpm is not added yet.
+npx pnpm install
+pnpm test
 ```
 
 ### Lint
 
 ```sh
-yarn lint
+pnpm lint
 ```
 
 We use [eslint](https://eslint.org/).
@@ -332,7 +328,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
 ### Test
 
 ```sh
-yarn test
+pnpm test
 ```
 
 Manual test in browser: open `dist/index.html`
@@ -359,7 +355,7 @@ The above command generates files into the `dist` folder and publishes them to \
 
 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
 
-Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
+Detailed information about how to contribute can be found in the [contribution guide](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 
 ## Security and safe diagrams
 
@@ -377,10 +373,33 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
 
 A quick note from Knut Sveidqvist:
 
-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
+>
+> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
+>
+> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
 > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 
 _Mermaid was created by Knut Sveidqvist for easier documentation._
+
+
diff --git a/docs/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md
similarity index 80%
rename from docs/n00b-gettingStarted.md
rename to docs/intro/n00b-gettingStarted.md
index e4e98d0827..2a05a1fdd0 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -1,35 +1,59 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-gettingStarted.md](../../packages/mermaid/src/docs/intro/n00b-gettingStarted.md).
 
 # A Mermaid User-Guide for Beginners
 
 Mermaid is composed of three parts: Deployment, Syntax and Configuration.
 
-This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) would be of great help to the beginner.
+This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
 
 > Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 
-**Absolute beginners are advised to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
+**Absolute beginners are advised to view the Video [Tutorials](../config/Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
 
 ## Four ways of using mermaid:
 
 1.  Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2.  Using [mermaid plugins](./integrations.md) with programs you are familiar with.
+2.  Using [mermaid plugins](../misc/integrations.md) with programs you are familiar with.
 3.  Calling the Mermaid JavaScript API.
 4.  Deploying Mermaid as a dependency.
 
 **Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
 
-> More in depth information can be found at [Usage](./usage.md).
+> More in depth information can be found at [Usage](../config/usage.md).
 
 ## 1. Using the Live Editor
 
 Available at [mermaid.live](https://mermaid.live)
 
-![EditingProcess](./img/Editing-process.png)
+```mermaid-example
+graph TD
+    A[Enter Chart Definition] --> B(Preview)
+    B --> C{decide}
+    C --> D[Keep]
+    C --> E[Edit Definition]
+    E --> B
+    D --> F[Save Image and Code]
+    F --> B
+```
+
+```mermaid
+graph TD
+    A[Enter Chart Definition] --> B(Preview)
+    B --> C{decide}
+    C --> D[Keep]
+    C --> E[Edit Definition]
+    E --> B
+    D --> F[Save Image and Code]
+    F --> B
+```
 
 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
 
-The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](Setup.md) page.
+The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
 
 ![Code,Config and Preview](./img/Code-Preview-Config.png)
 
@@ -61,9 +85,9 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/
 
 ## 2. Using Mermaid Plugins:
 
-You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md).
+You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations.md).
 
-**This is covered in greater detail in the [Usage section](usage.md)**
+**This is covered in greater detail in the [Usage section](../config/usage.md)**
 
 ## 3. Calling the JavaScript API
 
@@ -104,7 +128,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```html
 
   
 
@@ -121,7 +145,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 
 ### Adding external diagrams to mermaid
 
-Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
 
 ### Working Examples
 
@@ -148,7 +172,7 @@ Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsi
diff --git a/docs/n00b-syntaxReference.md b/docs/intro/n00b-syntaxReference.md similarity index 65% rename from docs/n00b-syntaxReference.md rename to docs/intro/n00b-syntaxReference.md index 2c9ef72074..c51b1680e8 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/intro/n00b-syntaxReference.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-syntaxReference.md](../../packages/mermaid/src/docs/intro/n00b-syntaxReference.md). # Diagram Syntax @@ -6,7 +10,7 @@ Mermaid's syntax is used to create diagrams. You'll find that it is not too tric Syntax, together with Deployment and Configuration constitute the whole of Mermaid. -Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area. +Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live), it is also a great practice area. ## Syntax Structure @@ -44,27 +48,27 @@ The [Getting Started](./n00b-gettingStarted.md) section can also provide some pr One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated. -| Diagram Breakers | Reason | Solution | -| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- | -| **Comments** | | | -| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". | -| **Flow-Charts** | | | -| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. | -| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking | +| Diagram Breakers | Reason | Solution | +| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- | +| **Comments** | | | +| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". | +| **Flow-Charts** | | | +| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. | +| [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking | ### Mermaid Live Editor -Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor). +Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid.live). # Configuration Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. -If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes. +If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes. This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. -### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor). +### Configuration Section in the [Live Editor](https://mermaid.live). Here you can edit certain values to change the behavior and appearance of the diagram. @@ -72,10 +76,10 @@ Here you can edit certain values to change the behavior and appearance of the di Used when Mermaid is called via an API, or through a ` - - - - - - -
-
- -
-
-
-

MermaidPress

-

- The Official Guide to Mermaid.js -

-

- Learn to create complex diagrams and beautiful flowcharts easily using text and code - using Mermaid.js. -

- - - -
-
-
- -
- -
-
-
-
- - - - - - - - - - - - -
-
-
-

- Get up to speed with using Mermaid diagrams along with real-world examples and expert tips - from the authors to facilitate a seamless development workflow -

-
-
-
-
-
-

- Flowcharts is a diagram type that visualizes a process or an algorithm by showing the - steps in order, as well as the different paths the execution can take. -

-
-
- -
-
-
-
- -
-
-
-

- Sequence diagrams lets you model and visualize interactions between different actors - or objects in a system, as well as the order of those interactions -

-
-
-
-
-
-

- A class diagram is a graphical representation that is used to visualize and describe - an object-oriented system. -

-
-
- -
-
-
-
- -
-
-
-

- An entity-relationship diagram is a graphical representation that is used to - visualize the different types of entities that exist within a system. -

-
-
-
-
-
-

- Use State diagrams to model and document state machines, an abstract way of - representing a system or an algorithm. -

-
-
- -
-
-
-
- -
-
-
-

- A Gantt chart is a graphical representation that is used to visualize and describe - tasks (events or activities) over time. -

-
-
-
-
-

- These were a few of the diagrams supported by Mermaid. -

-
- -
-
-

- Book description -

-
-

- Mermaid lets you represent diagrams using text and code which simplifies the maintenance - of complex diagrams. This is a great option for developers as they’re more familiar with - code, rather than special tools for generating diagrams. Besides, diagrams in code - simplify maintenance and ensure that the code is supported by version control systems. - In some cases, Mermaid makes refactoring support for name changes possible while also - enabling team collaboration for review distribution and updates. -

-

- Developers working with any system will be able to put their knowledge to work with this - practical guide to using Mermaid for documentation. The book is also a great reference - for looking up the syntax for specific diagrams when authoring diagrams. -

-

- You’ll start by getting up to speed with the importance of accurate and visual - documentation. Next, the book introduces Mermaid and establishes how to use it to create - effective documentation. By using different tools, editors, or a custom documentation - platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later - chapters cover advanced configuration settings and theme options to manipulate your - diagram as per your needs. -

-

- By the end of this Mermaid book, you’ll have become well-versed with the different types - of Mermaid diagrams and how they can be used in your workflows. -

-
-
-
-
-
-

- What you will learn -

-
-
-
-
-
-
-
    -
  • - Understand good and bad documentation, and the art of effective documentation -
    • -
  • - Become well-versed with maintaining complex diagrams with ease -
    • -
  • - Learn how to set up a custom documentation system -
    • -
  • - Learn how to implement Mermaid diagrams in your workflows -
    • -
  • - Understand how to set up themes for a Mermaid diagram for an entire site -
    • -
  • - Discover how to draw different types of diagrams such as flowcharts, class - diagrams, Gantt charts, and more -
    • -
-
-
-
-
-
- - - - - - - - - - - - - - - - - -
-

- Purchase The Official Guide to Mermaid.js -

-
-
-
-

-

Written by Knut Sveidqvist and Ashish Jain.

-

- Knut is the creator of Mermaid and both authors are active core team members of the - Mermaid open-source project. -

-

- - - -
- - - diff --git a/docs/landing/sequence-diagram.png b/docs/landing/sequence-diagram.png deleted file mode 100644 index 8c51ac1c5d..0000000000 Binary files a/docs/landing/sequence-diagram.png and /dev/null differ diff --git a/docs/landing/state.png b/docs/landing/state.png deleted file mode 100644 index 2ef66ea2f1..0000000000 Binary files a/docs/landing/state.png and /dev/null differ diff --git a/docs/mermaidCLI.md b/docs/mermaidCLI.md deleted file mode 100644 index 01860cab2d..0000000000 --- a/docs/mermaidCLI.md +++ /dev/null @@ -1,5 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# mermaid CLI - -mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead. diff --git a/docs/faq.md b/docs/misc/faq.md similarity index 83% rename from docs/faq.md rename to docs/misc/faq.md index a24b436b6a..c7155a5b0e 100644 --- a/docs/faq.md +++ b/docs/misc/faq.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/misc/faq.md](../../packages/mermaid/src/docs/misc/faq.md). # Frequently Asked Questions diff --git a/packages/mermaid/src/docs/integrations.md b/docs/misc/integrations.md similarity index 96% rename from packages/mermaid/src/docs/integrations.md rename to docs/misc/integrations.md index fc300cd6be..007b9e7780 100644 --- a/packages/mermaid/src/docs/integrations.md +++ b/docs/misc/integrations.md @@ -1,3 +1,9 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/misc/integrations.md](../../packages/mermaid/src/docs/misc/integrations.md). + # Integrations The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. @@ -33,6 +39,7 @@ They also serve as proof of concept, for the variety of things that can be built - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) - [mermerd](https://github.com/KarnerTh/mermerd) +- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) ## CRM/ERP/Similar @@ -115,6 +122,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) - [Vim](https://www.vim.org) + - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid) - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) - [GNU Emacs](https://www.gnu.org/software/emacs/) - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode) @@ -161,7 +169,6 @@ They also serve as proof of concept, for the variety of things that can be built | Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | | Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | | Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | -| Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - | | Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | | Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | diff --git a/docs/.nojekyll b/docs/public/.nojekyll similarity index 100% rename from docs/.nojekyll rename to docs/public/.nojekyll diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico new file mode 100644 index 0000000000..d41818c5b6 Binary files /dev/null and b/docs/public/favicon.ico differ diff --git a/docs/public/favicon.png b/docs/public/favicon.png new file mode 100644 index 0000000000..05d8a737be Binary files /dev/null and b/docs/public/favicon.png differ diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg new file mode 100644 index 0000000000..993c56b940 --- /dev/null +++ b/docs/public/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/img/header.png b/docs/public/header.png similarity index 100% rename from docs/img/header.png rename to docs/public/header.png diff --git a/docs/public/manifest.json b/docs/public/manifest.json new file mode 100644 index 0000000000..85c11395ce --- /dev/null +++ b/docs/public/manifest.json @@ -0,0 +1,14 @@ +{ + "short_name": "Mermaid", + "name": "Mermaid JS", + "icons": [ + { + "src": "/favicon.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "background_color": "#6366F1", + "display": "standalone", + "theme_color": "#6366F1" +} diff --git a/docs/public/mermaid-logo.svg b/docs/public/mermaid-logo.svg new file mode 100644 index 0000000000..5ac259968e --- /dev/null +++ b/docs/public/mermaid-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md deleted file mode 100644 index ecea7cf5db..0000000000 --- a/docs/stateDiagram.md +++ /dev/null @@ -1,446 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# State diagrams - -> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia - -Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml. - -```mermaid-example -stateDiagram-v2 - [*] --> Still - Still --> [*] - - Still --> Moving - Moving --> Still - Moving --> Crash - Crash --> [*] -``` - -```mermaid -stateDiagram-v2 - [*] --> Still - Still --> [*] - - Still --> Moving - Moving --> Still - Moving --> Crash - Crash --> [*] -``` - -Older renderer: - -```mermaid-example -stateDiagram - [*] --> Still - Still --> [*] - - Still --> Moving - Moving --> Still - Moving --> Crash - Crash --> [*] -``` - -```mermaid -stateDiagram - [*] --> Still - Still --> [*] - - Still --> Moving - Moving --> Still - Moving --> Crash - Crash --> [*] -``` - -In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash. - -## States - -A state can be declared in multiple ways. The simplest way is to define a state id as a description. - -```mermaid-example -stateDiagram-v2 - s1 -``` - -```mermaid -stateDiagram-v2 - s1 -``` - -Another way is by using the state keyword with a description as per below: - -```mermaid-example -stateDiagram-v2 - state "This is a state description" as s2 -``` - -```mermaid -stateDiagram-v2 - state "This is a state description" as s2 -``` - -Another way to define a state with a description is to define the state id followed by a colon and the description: - -```mermaid-example -stateDiagram-v2 - s2 : This is a state description -``` - -```mermaid -stateDiagram-v2 - s2 : This is a state description -``` - -## Transitions - -Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->". - -When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way. - -```mermaid-example -stateDiagram-v2 - s1 --> s2 -``` - -```mermaid -stateDiagram-v2 - s1 --> s2 -``` - -It is possible to add text to a transition. To describe what it represents. - -```mermaid-example -stateDiagram-v2 - s1 --> s2: A transition -``` - -```mermaid -stateDiagram-v2 - s1 --> s2: A transition -``` - -## Start and End - -There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and the direction of the transition to it defines it either as a start or a stop state. - -```mermaid-example -stateDiagram-v2 - [*] --> s1 - s1 --> [*] -``` - -```mermaid -stateDiagram-v2 - [*] --> s1 - s1 --> [*] -``` - -## Composite states - -In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can -have several internal states. These are called composite states in this terminology. - -In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between {}. See the example below: - -```mermaid-example -stateDiagram-v2 - [*] --> First - state First { - [*] --> second - second --> [*] - } -``` - -```mermaid -stateDiagram-v2 - [*] --> First - state First { - [*] --> second - second --> [*] - } -``` - -You can do this in several layers: - -```mermaid-example -stateDiagram-v2 - [*] --> First - - state First { - [*] --> Second - - state Second { - [*] --> second - second --> Third - - state Third { - [*] --> third - third --> [*] - } - } - } -``` - -```mermaid -stateDiagram-v2 - [*] --> First - - state First { - [*] --> Second - - state Second { - [*] --> second - second --> Third - - state Third { - [*] --> third - third --> [*] - } - } - } -``` - -You can also define transitions also between composite states: - -```mermaid-example -stateDiagram-v2 - [*] --> First - First --> Second - First --> Third - - state First { - [*] --> fir - fir --> [*] - } - state Second { - [*] --> sec - sec --> [*] - } - state Third { - [*] --> thi - thi --> [*] - } -``` - -```mermaid -stateDiagram-v2 - [*] --> First - First --> Second - First --> Third - - state First { - [*] --> fir - fir --> [*] - } - state Second { - [*] --> sec - sec --> [*] - } - state Third { - [*] --> thi - thi --> [*] - } -``` - -_You can not define transitions between internal states belonging to different composite states_ - -## Choice - -Sometimes you need to model a choice between two or more paths, you can do so using <\>. - -```mermaid-example -stateDiagram-v2 - state if_state <> - [*] --> IsPositive - IsPositive --> if_state - if_state --> False: if n < 0 - if_state --> True : if n >= 0 -``` - -```mermaid -stateDiagram-v2 - state if_state <> - [*] --> IsPositive - IsPositive --> if_state - if_state --> False: if n < 0 - if_state --> True : if n >= 0 -``` - -## Forks - -It is possible to specify a fork in the diagram using <\> <\>. - -```mermaid-example - stateDiagram-v2 - state fork_state <> - [*] --> fork_state - fork_state --> State2 - fork_state --> State3 - - state join_state <> - State2 --> join_state - State3 --> join_state - join_state --> State4 - State4 --> [*] -``` - -```mermaid - stateDiagram-v2 - state fork_state <> - [*] --> fork_state - fork_state --> State2 - fork_state --> State3 - - state join_state <> - State2 --> join_state - State3 --> join_state - join_state --> State4 - State4 --> [*] -``` - -## Notes - -Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams. - -Here you can choose to put the note to the _right of_ or to the _left of_ a node. - -```mermaid-example - stateDiagram-v2 - State1: The state with a note - note right of State1 - Important information! You can write - notes. - end note - State1 --> State2 - note left of State2 : This is the note to the left. -``` - -```mermaid - stateDiagram-v2 - State1: The state with a note - note right of State1 - Important information! You can write - notes. - end note - State1 --> State2 - note left of State2 : This is the note to the left. -``` - -## Concurrency - -As in plantUml you can specify concurrency using the -- symbol. - -```mermaid-example -stateDiagram-v2 - [*] --> Active - - state Active { - [*] --> NumLockOff - NumLockOff --> NumLockOn : EvNumLockPressed - NumLockOn --> NumLockOff : EvNumLockPressed - -- - [*] --> CapsLockOff - CapsLockOff --> CapsLockOn : EvCapsLockPressed - CapsLockOn --> CapsLockOff : EvCapsLockPressed - -- - [*] --> ScrollLockOff - ScrollLockOff --> ScrollLockOn : EvScrollLockPressed - ScrollLockOn --> ScrollLockOff : EvScrollLockPressed - } -``` - -```mermaid -stateDiagram-v2 - [*] --> Active - - state Active { - [*] --> NumLockOff - NumLockOff --> NumLockOn : EvNumLockPressed - NumLockOn --> NumLockOff : EvNumLockPressed - -- - [*] --> CapsLockOff - CapsLockOff --> CapsLockOn : EvCapsLockPressed - CapsLockOn --> CapsLockOff : EvCapsLockPressed - -- - [*] --> ScrollLockOff - ScrollLockOff --> ScrollLockOn : EvScrollLockPressed - ScrollLockOn --> ScrollLockOff : EvScrollLockPressed - } -``` - -## Setting the direction of the diagram - -With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example. - -```mermaid-example -stateDiagram - direction LR - [*] --> A - A --> B - B --> C - state B { - direction LR - a --> b - } - B --> D -``` - -```mermaid -stateDiagram - direction LR - [*] --> A - A --> B - B --> C - state B { - direction LR - a --> b - } - B --> D -``` - -## Comments - -Comments can be entered within a state diagram 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 - -```mermaid-example -stateDiagram-v2 - [*] --> Still - Still --> [*] -%% this is a comment - Still --> Moving - Moving --> Still %% another comment - Moving --> Crash - Crash --> [*] -``` - -```mermaid -stateDiagram-v2 - [*] --> Still - Still --> [*] -%% this is a comment - Still --> Moving - Moving --> Still %% another comment - Moving --> Crash - Crash --> [*] -``` - -## Styling - -Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss - -## Spaces in state names - -Spaces can be added to a state by defining it at the top and referencing the acronym later. - -```mermaid-example -stateDiagram-v2 - Yswsii: Your state with spaces in it - [*] --> Yswsii -``` - -```mermaid -stateDiagram-v2 - Yswsii: Your state with spaces in it - [*] --> Yswsii -``` diff --git a/docs/c4c.md b/docs/syntax/c4c.md similarity index 98% rename from docs/c4c.md rename to docs/syntax/c4c.md index 4f9e09ab5e..e946aedb66 100644 --- a/docs/c4c.md +++ b/docs/syntax/c4c.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4c.md](../../packages/mermaid/src/docs/syntax/c4c.md). # C4 Diagrams @@ -563,7 +567,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") } - Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){ + Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){ Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
Apple Safari or Microsoft Edge"){ Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") } @@ -615,7 +619,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60") Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") } - Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){ + Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){ Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
Apple Safari or Microsoft Edge"){ Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") } diff --git a/docs/classDiagram.md b/docs/syntax/classDiagram.md similarity index 94% rename from docs/classDiagram.md rename to docs/syntax/classDiagram.md index 60dc6c3906..b6d48c9deb 100644 --- a/docs/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -1,17 +1,27 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md). # Class diagrams > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." -> Wikipedia +> +> \-Wikipedia The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. Mermaid can render class diagrams. ```mermaid-example +--- +title: Animal example +--- classDiagram + note "From Duck till Zebra" Animal <|-- Duck + note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age @@ -34,8 +44,13 @@ classDiagram ``` ```mermaid +--- +title: Animal example +--- classDiagram + note "From Duck till Zebra" Animal <|-- Duck + note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age @@ -69,6 +84,9 @@ A single instance of a class in the diagram contains three compartments: - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. ```mermaid-example +--- +title: Bank example +--- classDiagram class BankAccount BankAccount : +String owner @@ -79,6 +97,9 @@ classDiagram ``` ```mermaid +--- +title: Bank example +--- classDiagram class BankAccount BankAccount : +String owner @@ -247,16 +268,16 @@ A relationship is a general term covering the specific types of logical connecti There are eight different types of relations defined for classes under UML which are currently supported: -| Type | Description | -| ---- | ------------- | ----------- | -| < | -- | Inheritance | -| \*-- | Composition | -| o-- | Aggregation | -| --> | Association | -| -- | Link (Solid) | -| ..> | Dependency | -| .. | > | Realization | -| .. | Link (Dashed) | +| Type | Description | +| ------- | ------------- | +| `<\|--` | Inheritance | +| `\*--` | Composition | +| `o--` | Aggregation | +| `-->` | Association | +| `--` | Link (Solid) | +| `..>` | Dependency | +| `..\|>` | Realization | +| `..` | Link (Dashed) | ```mermaid-example classDiagram @@ -352,14 +373,14 @@ Here is the syntax: Where `Relation Type` can be one of: -| Type | Description | -| ---- | ----------- | ----------- | -| < | | Inheritance | -| \* | Composition | -| o | Aggregation | -| > | Association | -| < | Association | -| | > | Realization | +| Type | Description | +| ----- | ----------- | +| `<\|` | Inheritance | +| `\*` | Composition | +| `o` | Aggregation | +| `>` | Association | +| `<` | Association | +| `\|>` | Realization | And `Link` can be one of: @@ -549,6 +570,10 @@ You would define these actions on a separate line after all classes have been de - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) - note: callback function will be called with the nodeId as parameter. +## Notes + +It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"` + ### Examples _URL Link:_ @@ -833,4 +858,4 @@ g.classGroup line { ## Configuration -`Coming soon` +`Coming soon!` diff --git a/docs/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md similarity index 90% rename from docs/entityRelationshipDiagram.md rename to docs/syntax/entityRelationshipDiagram.md index 78d058e786..9b938bc368 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md](../../packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md). # Entity Relationship Diagrams @@ -9,6 +13,9 @@ Note that practitioners of ER modelling almost always refer to _entity types_ si Mermaid can render ER diagrams ```mermaid-example +--- +title: Order example +--- erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains @@ -16,6 +23,9 @@ erDiagram ``` ```mermaid +--- +title: Order example +--- erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains @@ -110,10 +120,34 @@ Cardinality is a property that describes how many elements of another entity can | `}o` | `o{` | Zero or more (no upper limit) | | `}\|` | `\|{` | One or more (no upper limit) | +**Aliases** + +| Value (left) | Value (right) | Alias for | +| :----------: | :-----------: | ------------ | +| one or zero | one or zero | Zero or one | +| zero or one | zero or one | Zero or one | +| one or more | one or more | One or more | +| one or many | one or many | One or more | +| many(1) | many(1) | One or more | +| 1+ | 1+ | One or more | +| zero or more | zero or more | Zero or more | +| zero or many | zero or many | Zero or more | +| many(0) | many(1) | Zero or more | +| 0+ | 0+ | Zero or more | +| only one | only one | Exactly one | +| 1 | 1 | Exactly one | + ### Identification Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: +**Aliases** + +| Value | Alias for | +| :-----------: | :---------------: | +| to | _identifying_ | +| optionally to | _non-identifying_ | + ```mermaid-example erDiagram CAR ||--o{ NAMED-DRIVER : allows @@ -218,6 +252,7 @@ erDiagram string lastName int age } + MANUFACTURER only one to zero or more CAR ``` ```mermaid @@ -236,6 +271,7 @@ erDiagram string lastName int age } + MANUFACTURER only one to zero or more CAR ``` ### Other Things diff --git a/docs/examples.md b/docs/syntax/examples.md similarity index 95% rename from docs/examples.md rename to docs/syntax/examples.md index b3175edac6..ae2ba0ed38 100644 --- a/docs/examples.md +++ b/docs/syntax/examples.md @@ -1,12 +1,16 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md). # Examples This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications. -**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).** +**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).** -**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](/flowchart?id=flowcharts-basic-syntax) section.** +**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.** ## Basic Pie Chart diff --git a/docs/flowchart.md b/docs/syntax/flowchart.md similarity index 95% rename from docs/flowchart.md rename to docs/syntax/flowchart.md index fe4231ede6..8b3859f8a1 100644 --- a/docs/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/flowchart.md](../../packages/mermaid/src/docs/syntax/flowchart.md). # Flowcharts - Basic Syntax @@ -6,16 +10,22 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th 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).\*\* +> **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). ### A node (default) ```mermaid-example +--- +title: Node +--- flowchart LR id ``` ```mermaid +--- +title: Node +--- flowchart LR id ``` @@ -29,11 +39,17 @@ found for the node that will be used. Also if you define edges for the node late one previously defined will be used when rendering the box. ```mermaid-example +--- +title: Node with text +--- flowchart LR id1[This is the text in the box] ``` ```mermaid +--- +title: Node with text +--- flowchart LR id1[This is the text in the box] ``` @@ -166,6 +182,20 @@ flowchart LR ### A hexagon node +Code: + +```mermaid-example +flowchart LR + id1{{This is the text in the box}} +``` + +```mermaid +flowchart LR + id1{{This is the text in the box}} +``` + +Render: + ```mermaid-example flowchart LR id1{{This is the text in the box}} @@ -264,20 +294,6 @@ flowchart LR A --- B ``` -### An invisisble link - -This can be a usefull tool in some instances where you want to alter the default positining of a node. - -```mermaid-example -flowchart LR - A ~~~ B -``` - -```mermaid -flowchart LR - A ~~~ B -``` - ### Text on links ```mermaid-example @@ -329,12 +345,12 @@ flowchart LR ### Dotted link ```mermaid-example -flowchart LR; +flowchart LR A-.->B; ``` ```mermaid -flowchart LR; +flowchart LR A-.->B; ``` @@ -693,8 +709,6 @@ flowchart LR B1 --> B2 ``` -**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link. - ## Interaction It is possible to bind a click event to a node, 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'`. @@ -880,13 +894,13 @@ A shorter form of adding a class is to attach the classname to the node using th ```mermaid-example flowchart LR A:::someclass --> B - classDef someclass fill:#f96; + classDef someclass fill:#f96 ``` ```mermaid flowchart LR A:::someclass --> B - classDef someclass fill:#f96; + classDef someclass fill:#f96 ``` ### Css classes @@ -909,14 +923,14 @@ below: **Example definition** ```mermaid-example -flowchart LR; +flowchart LR A-->B[AAABBB] B-->D class A cssClass ``` ```mermaid -flowchart LR; +flowchart LR A-->B[AAABBB] B-->D class A cssClass @@ -938,7 +952,7 @@ The icons are accessed via the syntax fa:#icon class name#. flowchart TD B["fab:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); + B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) ``` @@ -946,7 +960,7 @@ flowchart TD flowchart TD B["fab:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); + B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) ``` @@ -978,7 +992,7 @@ flowchart LR ## Configuration... -Is it possible to adjust the width of the rendered flowchart. +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. diff --git a/docs/gantt.md b/docs/syntax/gantt.md similarity index 93% rename from docs/gantt.md rename to docs/syntax/gantt.md index 9d4fe8a096..b20b6b7760 100644 --- a/docs/gantt.md +++ b/docs/syntax/gantt.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gantt.md](../../packages/mermaid/src/docs/syntax/gantt.md). # Gantt diagrams @@ -197,7 +201,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/ ### Output date format on the axis -The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020. +The default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020. axisFormat %Y-%m-%d @@ -228,7 +232,19 @@ The following formatting strings are supported: %Z - time zone offset, such as "-0700". %% - a literal "%" character. -More info in: https://github.com/mbostock/d3/wiki/Time-Formatting +More info in: + +### Axis ticks + +The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. + + tickInterval 1day + +The pattern is: + + /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + +More info in: ## Comments @@ -264,7 +280,7 @@ gantt ## Styling -Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/gantt.scss +Styling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js ### Classes used @@ -341,7 +357,7 @@ To hide the marker, set `todayMarker` to `off`. It is possible to adjust the margins for rendering the gantt diagram. This is done by defining the `ganttConfig` part of the configuration object. -How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page. +How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page. mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object. diff --git a/docs/gitgraph.md b/docs/syntax/gitgraph.md similarity index 98% rename from docs/gitgraph.md rename to docs/syntax/gitgraph.md index 8efbf9fa5c..964fe3886c 100644 --- a/docs/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md). # Gitgraph Diagrams @@ -9,31 +13,37 @@ These kind of diagram are particularly helpful to developers and devops teams to Mermaid can render Git diagrams ```mermaid-example - gitGraph - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit +--- +title: Example Git diagram +--- +gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit ``` ```mermaid - gitGraph - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit +--- +title: Example Git diagram +--- +gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit ``` In Mermaid, we support the basic git operations like: @@ -165,7 +175,7 @@ In this example, we have given custom tags to the commits. Also, see how we have ### Create a new branch -In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop` +In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `""`. Usage examples: `branch develop`, `branch "cherry-pick"` When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world. @@ -817,7 +827,7 @@ Here, we have changed the default main branch name to `MetroLine1`. ## Themes -Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md). +Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md). The following are the different pre-defined theme options: @@ -827,7 +837,7 @@ The following are the different pre-defined theme options: - `default` - `neutral` -**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md) +**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md) Let's put them to use, and see how our sample diagram looks in different themes: ### Base Theme diff --git a/docs/img/Gantt-excluded-days-within.png b/docs/syntax/img/Gantt-excluded-days-within.png similarity index 100% rename from docs/img/Gantt-excluded-days-within.png rename to docs/syntax/img/Gantt-excluded-days-within.png diff --git a/docs/img/Gantt-long-weekend-look.png b/docs/syntax/img/Gantt-long-weekend-look.png similarity index 100% rename from docs/img/Gantt-long-weekend-look.png rename to docs/syntax/img/Gantt-long-weekend-look.png diff --git a/docs/mindmap.md b/docs/syntax/mindmap.md similarity index 81% rename from docs/mindmap.md rename to docs/syntax/mindmap.md index 935572ddc4..0214a55126 100644 --- a/docs/mindmap.md +++ b/docs/syntax/mindmap.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/mindmap.md](../../packages/mermaid/src/docs/syntax/mindmap.md). # Mindmap @@ -17,7 +21,7 @@ mindmap Popularisation British popular psychology author Tony Buzan Research - On effectivness
and eatures + On effectiveness
and features On Automatic creation Uses Creative techniques @@ -26,6 +30,7 @@ mindmap Tools Pen and paper Mermaid + ``` ```mermaid @@ -37,7 +42,7 @@ mindmap Popularisation British popular psychology author Tony Buzan Research - On effectivness
and eatures + On effectiveness
and features On Automatic creation Uses Creative techniques @@ -46,13 +51,14 @@ mindmap Tools Pen and paper Mermaid + ``` ## Syntax The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy. -In the following example you can see how there are 3 different levels of indentation. The leftmost indentation is the root of the mindmap. There can only be one root and if you by misstake add two of them on the same level there will be a syntax error. Rows with larger indentation will be connected as children to the previous row with lower indentation. Based on that you can see in the example how the nodes B and C both are children to node A whci in turn is a child of the node Root. +In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C. mindmap Root @@ -60,7 +66,7 @@ In the following example you can see how there are 3 different levels of indenta B C -In the diagram below you can see the example rendered as a mindmap. +In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap. ```mermaid-example mindmap @@ -146,6 +152,18 @@ mindmap id)I am a cloud( ``` +### Hexagon + +```mermaid-example +mindmap + id{{I am a hexagon}} +``` + +```mermaid +mindmap + id{{I am a hexagon}} +``` + ### Default ```mermaid-example @@ -218,7 +236,7 @@ The actual indentation does not really matter only compared with the previous ro B C -This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Mermaid will rely on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings. +This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings. ```mermaid-example mindmap @@ -242,8 +260,8 @@ Mindmap uses the experimental lazy loading & async rendering features which coul ```html ``` diff --git a/docs/pie.md b/docs/syntax/pie.md similarity index 81% rename from docs/pie.md rename to docs/syntax/pie.md index f59efd93ad..63f371e87c 100644 --- a/docs/pie.md +++ b/docs/syntax/pie.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md). # Pie chart diagrams @@ -28,10 +32,10 @@ Drawing a pie chart is really simple in mermaid. - Start with `pie` keyword to begin the diagram - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_** - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_** -- Followed by dataSet +- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels. - `label` for a section in the pie diagram within `" "` quotes. - Followed by `:` colon as separator - - Followed by `positive numeric value` (supported upto two decimal places) + - Followed by `positive numeric value` (supported up to two decimal places) \[pie] \[showData] (OPTIONAL) \[title] \[titlevalue] (OPTIONAL) diff --git a/docs/requirementDiagram.md b/docs/syntax/requirementDiagram.md similarity index 96% rename from docs/requirementDiagram.md rename to docs/syntax/requirementDiagram.md index cf4c4bdc60..f8a0cafa95 100644 --- a/docs/requirementDiagram.md +++ b/docs/syntax/requirementDiagram.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/requirementDiagram.md](../../packages/mermaid/src/docs/syntax/requirementDiagram.md). # Requirement Diagram diff --git a/docs/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md similarity index 96% rename from docs/sequenceDiagram.md rename to docs/syntax/sequenceDiagram.md index 619f33243e..ad88249be4 100644 --- a/docs/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sequenceDiagram.md](../../packages/mermaid/src/docs/syntax/sequenceDiagram.md). # Sequence diagrams @@ -20,11 +24,10 @@ sequenceDiagram Alice-)John: See you later! ``` -```note -A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted. - -If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}. -``` +> **Note** +> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted. +> +> If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}. ## Syntax @@ -724,10 +727,10 @@ text.actor { ## Configuration -Is it possible to adjust the margins for rendering the sequence diagram. +It is possible to adjust the margins for rendering the sequence diagram. This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration. -How to use the CLI is described in the [mermaidCLI](mermaidCLI) page. +How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page. `mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object. ```javascript diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md new file mode 100644 index 0000000000..72d7ec63bd --- /dev/null +++ b/docs/syntax/stateDiagram.md @@ -0,0 +1,650 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/stateDiagram.md](../../packages/mermaid/src/docs/syntax/stateDiagram.md). + +# State diagrams + +> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. +> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the +> case, while at other times this is a reasonable abstraction." Wikipedia + +Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make +it easier for users to share diagrams between mermaid and plantUml. + +```mermaid-example +--- +title: Simple sample +--- +stateDiagram-v2 + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +``` + +```mermaid +--- +title: Simple sample +--- +stateDiagram-v2 + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +``` + +Older renderer: + +```mermaid-example +stateDiagram + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +``` + +```mermaid +stateDiagram + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +``` + +In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via +a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the +**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to +the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.) + +## States + +A state can be declared in multiple ways. The simplest way is to define a state with just an id: + +```mermaid-example +stateDiagram-v2 + stateId +``` + +```mermaid +stateDiagram-v2 + stateId +``` + +Another way is by using the state keyword with a description as per below: + +```mermaid-example +stateDiagram-v2 + state "This is a state description" as s2 +``` + +```mermaid +stateDiagram-v2 + state "This is a state description" as s2 +``` + +Another way to define a state with a description is to define the state id followed by a colon and the description: + +```mermaid-example +stateDiagram-v2 + s2 : This is a state description +``` + +```mermaid +stateDiagram-v2 + s2 : This is a state description +``` + +## Transitions + +Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->". + +When you define a transition between two states and the states are not already defined, the undefined states are defined +with the id from the transition. You can later add descriptions to states defined this way. + +```mermaid-example +stateDiagram-v2 + s1 --> s2 +``` + +```mermaid +stateDiagram-v2 + s1 --> s2 +``` + +It is possible to add text to a transition to describe what it represents: + +```mermaid-example +stateDiagram-v2 + s1 --> s2: A transition +``` + +```mermaid +stateDiagram-v2 + s1 --> s2: A transition +``` + +## Start and End + +There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and +the direction of the transition to it defines it either as a start or a stop state. + +```mermaid-example +stateDiagram-v2 + [*] --> s1 + s1 --> [*] +``` + +```mermaid +stateDiagram-v2 + [*] --> s1 + s1 --> [*] +``` + +## Composite states + +In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can +have several internal states. These are called composite states in this terminology. + +In order to define a composite state you need to use the state keyword followed by an id and the body of the composite +state between {}. See the example below: + +```mermaid-example +stateDiagram-v2 + [*] --> First + state First { + [*] --> second + second --> [*] + } +``` + +```mermaid +stateDiagram-v2 + [*] --> First + state First { + [*] --> second + second --> [*] + } +``` + +You can do this in several layers: + +```mermaid-example +stateDiagram-v2 + [*] --> First + + state First { + [*] --> Second + + state Second { + [*] --> second + second --> Third + + state Third { + [*] --> third + third --> [*] + } + } + } +``` + +```mermaid +stateDiagram-v2 + [*] --> First + + state First { + [*] --> Second + + state Second { + [*] --> second + second --> Third + + state Third { + [*] --> third + third --> [*] + } + } + } +``` + +You can also define transitions also between composite states: + +```mermaid-example +stateDiagram-v2 + [*] --> First + First --> Second + First --> Third + + state First { + [*] --> fir + fir --> [*] + } + state Second { + [*] --> sec + sec --> [*] + } + state Third { + [*] --> thi + thi --> [*] + } +``` + +```mermaid +stateDiagram-v2 + [*] --> First + First --> Second + First --> Third + + state First { + [*] --> fir + fir --> [*] + } + state Second { + [*] --> sec + sec --> [*] + } + state Third { + [*] --> thi + thi --> [*] + } +``` + +_You can not define transitions between internal states belonging to different composite states_ + +## Choice + +Sometimes you need to model a choice between two or more paths, you can do so using <\>. + +```mermaid-example +stateDiagram-v2 + state if_state <> + [*] --> IsPositive + IsPositive --> if_state + if_state --> False: if n < 0 + if_state --> True : if n >= 0 +``` + +```mermaid +stateDiagram-v2 + state if_state <> + [*] --> IsPositive + IsPositive --> if_state + if_state --> False: if n < 0 + if_state --> True : if n >= 0 +``` + +## Forks + +It is possible to specify a fork in the diagram using <\> <\>. + +```mermaid-example + stateDiagram-v2 + state fork_state <> + [*] --> fork_state + fork_state --> State2 + fork_state --> State3 + + state join_state <> + State2 --> join_state + State3 --> join_state + join_state --> State4 + State4 --> [*] +``` + +```mermaid + stateDiagram-v2 + state fork_state <> + [*] --> fork_state + fork_state --> State2 + fork_state --> State3 + + state join_state <> + State2 --> join_state + State3 --> join_state + join_state --> State4 + State4 --> [*] +``` + +## Notes + +Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams. + +Here you can choose to put the note to the _right of_ or to the _left of_ a node. + +```mermaid-example + stateDiagram-v2 + State1: The state with a note + note right of State1 + Important information! You can write + notes. + end note + State1 --> State2 + note left of State2 : This is the note to the left. +``` + +```mermaid + stateDiagram-v2 + State1: The state with a note + note right of State1 + Important information! You can write + notes. + end note + State1 --> State2 + note left of State2 : This is the note to the left. +``` + +## Concurrency + +As in plantUml you can specify concurrency using the -- symbol. + +```mermaid-example +stateDiagram-v2 + [*] --> Active + + state Active { + [*] --> NumLockOff + NumLockOff --> NumLockOn : EvNumLockPressed + NumLockOn --> NumLockOff : EvNumLockPressed + -- + [*] --> CapsLockOff + CapsLockOff --> CapsLockOn : EvCapsLockPressed + CapsLockOn --> CapsLockOff : EvCapsLockPressed + -- + [*] --> ScrollLockOff + ScrollLockOff --> ScrollLockOn : EvScrollLockPressed + ScrollLockOn --> ScrollLockOff : EvScrollLockPressed + } +``` + +```mermaid +stateDiagram-v2 + [*] --> Active + + state Active { + [*] --> NumLockOff + NumLockOff --> NumLockOn : EvNumLockPressed + NumLockOn --> NumLockOff : EvNumLockPressed + -- + [*] --> CapsLockOff + CapsLockOff --> CapsLockOn : EvCapsLockPressed + CapsLockOn --> CapsLockOff : EvCapsLockPressed + -- + [*] --> ScrollLockOff + ScrollLockOff --> ScrollLockOn : EvScrollLockPressed + ScrollLockOn --> ScrollLockOff : EvScrollLockPressed + } +``` + +## Setting the direction of the diagram + +With state diagrams you can use the direction statement to set the direction which the diagram will render like in this +example. + +```mermaid-example +stateDiagram + direction LR + [*] --> A + A --> B + B --> C + state B { + direction LR + a --> b + } + B --> D +``` + +```mermaid +stateDiagram + direction LR + [*] --> A + A --> B + B --> C + state B { + direction LR + a --> b + } + B --> D +``` + +## Comments + +Comments can be entered within a state diagram 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 + +```mermaid-example +stateDiagram-v2 + [*] --> Still + Still --> [*] +%% this is a comment + Still --> Moving + Moving --> Still %% another comment + Moving --> Crash + Crash --> [*] +``` + +```mermaid +stateDiagram-v2 + [*] --> Still + Still --> [*] +%% this is a comment + Still --> Moving + Moving --> Still %% another comment + Moving --> Crash + Crash --> [*] +``` + +## Styling with classDefs + +As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a +state or states in the diagram. + +**These are the current limitations with state diagram classDefs:** + +1. Cannot be applied to start or end states +2. Cannot be applied to or within composite states + +_These are in development and will be available in a future version._ + +You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something +like a _CSS class_) +followed by _a name for the style,_ +and then one or more _property-value pairs_. Each _property-value pair_ is +a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._ + +Here is an example of a classDef with just one property-value pair: + + classDef movement font-style:italic; + +where + +- the _name_ of the style is `movement` +- the only _property_ is `font-style` and its _value_ is `italic` + +If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._ + +Here is an example with three property-value pairs: + + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + +where + +- the _name_ of the style is `badBadEvent` +- the first _property_ is `fill` and its _value_ is `#f00` +- 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` + +### Apply classDef styles to states + +There are two ways to apply a `classDef` style to a state: + +1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or +2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow + to/from another state) + +#### 1. `class` statement + +A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is: + +```text + class [one or more state names, separated by commas] [name of a style defined with classDef] +``` + +Here is an example applying the `badBadEvent` style to a state named `Crash`: + +```text +class Crash badBadEvent +``` + +Here is an example applying the `movement` style to the two states `Moving` and `Crash`: + +```text +class Moving, Crash movement +``` + +Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement` +and `badBadEvent` + +```mermaid-example + stateDiagram + direction TB + + accTitle: This is the accessible title + accDescr: This is an accessible description + + classDef notMoving fill:white + classDef movement font-style:italic + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + + [*]--> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] + + class Still notMoving + class Moving, Crash movement + class Crash badBadEvent + class end badBadEvent +``` + +```mermaid + stateDiagram + direction TB + + accTitle: This is the accessible title + accDescr: This is an accessible description + + classDef notMoving fill:white + classDef movement font-style:italic + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + + [*]--> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] + + class Still notMoving + class Moving, Crash movement + class Crash badBadEvent + class end badBadEvent +``` + +#### 2. `:::` operator to apply a style to a state + +You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is + +```text +[state]:::[style name] +``` + +You can use this in a diagram within a statement using a class. This includes the start and end states. For example: + +```mermaid-example +stateDiagram + direction TB + + accTitle: This is the accessible title + accDescr: This is an accessible description + + classDef notMoving fill:white + classDef movement font-style:italic; + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + + [*] --> Still:::notMoving + Still --> [*] + Still --> Moving:::movement + Moving --> Still + Moving --> Crash:::movement + Crash:::badBadEvent --> [*] +``` + +```mermaid +stateDiagram + direction TB + + accTitle: This is the accessible title + accDescr: This is an accessible description + + classDef notMoving fill:white + classDef movement font-style:italic; + classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow + + [*] --> Still:::notMoving + Still --> [*] + Still --> Moving:::movement + Moving --> Still + Moving --> Crash:::movement + Crash:::badBadEvent --> [*] +``` + +## Spaces in state names + +Spaces can be added to a state by first defining the state with an id and then referencing the id later. + +In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**. +After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`) +and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\ +(**yswsii** has been styled so that it is different from the other states.) + +```mermaid-example +stateDiagram + classDef yourState font-style:italic,font-weight:bold,fill:white + + yswsii: Your state with spaces in it + [*] --> yswsii:::yourState + [*] --> SomeOtherState + SomeOtherState --> YetAnotherState + yswsii --> YetAnotherState + YetAnotherState --> [*] +``` + +```mermaid +stateDiagram + classDef yourState font-style:italic,font-weight:bold,fill:white + + yswsii: Your state with spaces in it + [*] --> yswsii:::yourState + [*] --> SomeOtherState + SomeOtherState --> YetAnotherState + yswsii --> YetAnotherState + YetAnotherState --> [*] +``` diff --git a/docs/user-journey.md b/docs/syntax/userJourney.md similarity index 81% rename from docs/user-journey.md rename to docs/syntax/userJourney.md index e40efc5a9a..73fcb7468e 100644 --- a/docs/user-journey.md +++ b/docs/syntax/userJourney.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/userJourney.md](../../packages/mermaid/src/docs/syntax/userJourney.md). # User Journey Diagram diff --git a/docs/theme.css b/docs/theme.css deleted file mode 100644 index 28dbc0ab51..0000000000 --- a/docs/theme.css +++ /dev/null @@ -1,827 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); -* { - -webkit-font-smoothing: antialiased; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: none; - -webkit-touch-callout: none; - box-sizing: border-box; -} - -body:not(.ready) { - overflow: hidden; -} -body:not(.ready) .app-nav, -body:not(.ready) > nav, -body:not(.ready) [data-cloak] { - display: none; -} -div#app { - font-size: 30px; - font-weight: lighter; - margin: 40vh auto; - text-align: center; -} -div#app:empty:before { - content: 'Loading...'; -} -.emoji { - height: 1.2rem; - vertical-align: middle; -} -.progress { - background-color: var(--theme-color, #42b983); - height: 2px; - left: 0; - position: fixed; - right: 0; - top: 0; - transition: width 0.2s, opacity 0.4s; - width: 0; - z-index: 999999; -} -.search .search-keyword, -.search a:hover { - color: var(--theme-color, #42b983); -} -.search .search-keyword { - font-style: normal; - font-weight: 700; -} -body, -html { - height: 100%; -} -body { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #34495e; - font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; - font-size: 15px; - letter-spacing: 0; - margin: 0; - overflow-x: hidden; -} -img { - max-width: 100%; -} -a[disabled] { - cursor: not-allowed; - opacity: 0.6; -} -kbd { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-block; - font-size: 12px !important; - line-height: 12px; - margin-bottom: 3px; - padding: 3px 5px; - vertical-align: middle; -} -li input[type='checkbox'] { - margin: 0 0.2em 0.25em 0; - vertical-align: middle; -} -.app-nav { - margin: 25px 60px 0 0; - position: absolute; - right: 0; - text-align: right; - z-index: 10; -} -.app-nav.no-badge { - margin-right: 25px; -} -.app-nav p { - margin: 0; -} -.app-nav > a { - margin: 0 1rem; - padding: 5px 0; -} -.app-nav li, -.app-nav ul { - display: inline-block; - list-style: none; - margin: 0; -} -.app-nav a { - color: inherit; - font-size: 16px; - text-decoration: none; - transition: color 0.3s; -} -.app-nav a.active, -.app-nav a:hover { - color: var(--theme-color, #42b983); -} -.app-nav a.active { - border-bottom: 2px solid var(--theme-color, #42b983); -} -.app-nav li { - display: inline-block; - margin: 0 1rem; - padding: 5px 0; - position: relative; - cursor: pointer; -} -.app-nav li ul { - background-color: #fff; - border: 1px solid; - border-color: #ddd #ddd #ccc; - border-radius: 4px; - box-sizing: border-box; - display: none; - max-height: calc(100vh - 61px); - overflow-y: auto; - padding: 10px 0; - position: absolute; - right: -15px; - text-align: left; - top: 100%; - white-space: nowrap; -} -.app-nav li ul li { - display: block; - font-size: 14px; - line-height: 1rem; - margin: 8px 14px; - white-space: nowrap; -} -.app-nav li ul a { - display: block; - font-size: inherit; - margin: 0; - padding: 0; -} -.app-nav li ul a.active { - border-bottom: 0; -} -.app-nav li:hover ul { - display: block; -} -.github-corner { - border-bottom: 0; - position: fixed; - right: 0; - text-decoration: none; - top: 0; - z-index: 1; -} -.github-corner:hover .octo-arm { - -webkit-animation: octocat-wave 0.56s ease-in-out; - animation: octocat-wave 0.56s ease-in-out; -} -.github-corner svg { - color: #fff; - fill: var(--theme-color, #42b983); - height: 80px; - width: 80px; -} -main { - display: block; - position: relative; - width: 100vw; - height: 100%; - z-index: 0; -} -main.hidden { - display: none; -} -.anchor { - display: inline-block; - text-decoration: none; - transition: all 0.3s; -} -.anchor span { - color: #34495e; -} -.anchor:hover { - text-decoration: underline; -} -.sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); - overflow-y: auto; - padding: 40px 0 0; - position: absolute; - top: 0; - bottom: 0; - left: 0; - transition: transform 0.25s ease-out; - width: 300px; - z-index: 20; -} -.sidebar > h1 { - margin: 0 auto 1rem; - font-size: 1.5rem; - font-weight: 300; - text-align: center; -} -.sidebar > h1 a { - color: inherit; - text-decoration: none; -} -.sidebar > h1 .app-nav { - display: block; - position: static; -} -.sidebar .sidebar-nav { - line-height: 2em; - padding-bottom: 40px; -} -.sidebar li.collapse .app-sub-sidebar { - display: none; -} -.sidebar ul { - margin: 0 0 0 15px; - padding: 0; -} -.sidebar li > p { - font-weight: 700; - margin: 0; -} -.sidebar ul, -.sidebar ul li { - list-style: none; -} -.sidebar ul li a { - border-bottom: none; - display: block; -} -.sidebar ul li ul { - padding-left: 20px; -} -.sidebar::-webkit-scrollbar { - width: 4px; -} -.sidebar::-webkit-scrollbar-thumb { - background: transparent; - border-radius: 4px; -} -.sidebar:hover::-webkit-scrollbar-thumb { - background: hsla(0, 0%, 53.3%, 0.4); -} -.sidebar:hover::-webkit-scrollbar-track { - background: hsla(0, 0%, 53.3%, 0.1); -} -.sidebar-toggle { - background-color: transparent; - background-color: hsla(0, 0%, 100%, 0.8); - border: 0; - outline: none; - padding: 10px; - position: absolute; - bottom: 0; - left: 0; - text-align: center; - transition: opacity 0.3s; - width: 284px; - z-index: 30; - cursor: pointer; -} -.sidebar-toggle:hover .sidebar-toggle-button { - opacity: 0.4; -} -.sidebar-toggle span { - background-color: var(--theme-color, #42b983); - display: block; - margin-bottom: 4px; - width: 16px; - height: 2px; -} -body.sticky .sidebar, -body.sticky .sidebar-toggle { - position: fixed; -} -.content { - padding-top: 60px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 300px; - transition: left 0.25s ease; -} -.markdown-section { - margin: 0 auto; - max-width: 80%; - padding: 30px 15px 40px; - position: relative; -} -.markdown-section > * { - box-sizing: border-box; - font-size: inherit; -} -.markdown-section > :first-child { - margin-top: 0 !important; -} -.markdown-section hr { - border: none; - border-bottom: 1px solid #eee; - margin: 2em 0; -} -.markdown-section iframe { - border: 1px solid #eee; - width: 1px; - min-width: 100%; -} -.markdown-section table { - border-collapse: collapse; - border-spacing: 0; - display: block; - margin-bottom: 1rem; - overflow: auto; - width: 100%; -} -.markdown-section th { - font-weight: 700; -} -.markdown-section td, -.markdown-section th { - border: 1px solid #ddd; - padding: 6px 13px; -} -.markdown-section tr { - border-top: 1px solid #ccc; -} -.markdown-section p.tip, -.markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; -} -.markdown-section p.tip { - border-bottom-right-radius: 2px; - border-left: 4px solid #f66; - border-top-right-radius: 2px; - margin: 2em 0; - padding: 12px 24px 12px 30px; - position: relative; -} -.markdown-section p.tip:before { - background-color: #f66; - border-radius: 100%; - color: #fff; - content: '!'; - font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; - font-size: 14px; - font-weight: 700; - left: -12px; - line-height: 20px; - position: absolute; - height: 20px; - width: 20px; - text-align: center; - top: 14px; -} -.markdown-section p.tip code { - background-color: #efefef; -} -.markdown-section p.tip em { - color: #34495e; -} -.markdown-section p.warn { - background: rgba(66, 185, 131, 0.1); - border-radius: 2px; - padding: 1rem; -} -.markdown-section ul.task-list > li { - list-style-type: none; -} -body.close .sidebar { - transform: translateX(-300px); -} -body.close .sidebar-toggle { - width: auto; -} -body.close .content { - left: 0; -} -@media print { - .app-nav, - .github-corner, - .sidebar, - .sidebar-toggle { - display: none; - } -} -@media screen and (max-width: 768px) { - .github-corner, - .sidebar, - .sidebar-toggle { - position: fixed; - } - .app-nav { - margin-top: 16px; - } - .app-nav li ul { - top: 30px; - } - main { - height: auto; - overflow-x: hidden; - } - .sidebar { - left: -300px; - transition: transform 0.25s ease-out; - } - .content { - left: 0; - max-width: 100vw; - position: static; - padding-top: 20px; - transition: transform 0.25s ease; - } - .app-nav, - .github-corner { - transition: transform 0.25s ease-out; - } - .sidebar-toggle { - background-color: transparent; - width: auto; - padding: 30px 30px 10px 10px; - } - body.close .sidebar { - transform: translateX(300px); - } - body.close .sidebar-toggle { - background-color: hsla(0, 0%, 100%, 0.8); - transition: background-color 1s; - width: 284px; - padding: 10px; - } - body.close .content { - transform: translateX(300px); - } - body.close .app-nav, - body.close .github-corner { - display: none; - } - .github-corner:hover .octo-arm { - -webkit-animation: none; - animation: none; - } - .github-corner .octo-arm { - -webkit-animation: octocat-wave 0.56s ease-in-out; - animation: octocat-wave 0.56s ease-in-out; - } -} -@-webkit-keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } -} -@keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } -} -section.cover { - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - height: 100vh; - width: 100vw; - display: none; -} -section.cover.show { - display: flex; -} -section.cover.has-mask .mask { - background-color: #fff; - opacity: 0.8; - position: absolute; - top: 0; - height: 100%; - width: 100%; -} -section.cover .cover-main { - flex: 1; - margin: -20px 16px 0; - text-align: center; -} -section.cover a { - color: inherit; -} -section.cover a, -section.cover a:hover { - text-decoration: none; -} -section.cover p { - line-height: 1.5rem; - margin: 1em 0; -} -section.cover h1 { - color: inherit; - font-size: 2.5rem; - font-weight: 300; - margin: 0.625rem 0 2.5rem; - position: relative; - text-align: center; -} -section.cover h1 a { - display: block; -} -section.cover h1 small { - bottom: -0.4375rem; - font-size: 1rem; - position: absolute; -} -section.cover blockquote { - font-size: 1.5rem; - text-align: center; -} -section.cover ul { - line-height: 1.8; - list-style-type: none; - margin: 1em auto; - max-width: 500px; - padding: 0; -} -section.cover .cover-main > p:last-child a { - border-radius: 2rem; - border: 1px solid var(--theme-color, #42b983); - box-sizing: border-box; - color: var(--theme-color, #42b983); - display: inline-block; - font-size: 1.05rem; - letter-spacing: 0.1rem; - margin: 0.5rem 1rem; - padding: 0.75em 2rem; - text-decoration: none; - transition: all 0.15s ease; -} -section.cover .cover-main > p:last-child a:last-child { - background-color: var(--theme-color, #42b983); - color: #fff; -} -section.cover .cover-main > p:last-child a:last-child:hover { - color: inherit; - opacity: 0.8; -} -section.cover .cover-main > p:last-child a:hover { - color: inherit; -} -section.cover blockquote > p > a { - border-bottom: 2px solid var(--theme-color, #42b983); - transition: color 0.3s; -} -section.cover blockquote > p > a:hover { - color: var(--theme-color, #42b983); -} -.sidebar, -body { - background-color: #fff; -} -.sidebar { - color: #364149; -} -.sidebar li { - margin: 6px 0; -} -.sidebar ul li a { - color: #505d6b; - font-size: 14px; - font-weight: 400; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; -} -.sidebar ul li a:hover { - text-decoration: underline; -} -.sidebar ul li ul { - padding: 0; -} -.sidebar ul li.active > a { - border-right: 2px solid; - color: var(--theme-color, #42b983); - font-weight: 600; -} -.app-sub-sidebar li:before { - content: '-'; - padding-right: 4px; - float: left; -} -.markdown-section h1, -.markdown-section h2, -.markdown-section h3, -.markdown-section h4, -.markdown-section strong { - color: #2c3e50; - font-weight: 600; -} -.markdown-section a { - color: var(--theme-color, #42b983); - font-weight: 600; -} -.markdown-section h1 { - font-size: 2rem; - margin: 0 0 1rem; -} -.markdown-section h2 { - font-size: 1.75rem; - margin: 45px 0 0.8rem; -} -.markdown-section h3 { - font-size: 1.5rem; - margin: 40px 0 0.6rem; -} -.markdown-section h4 { - font-size: 1.25rem; -} -.markdown-section h5 { - font-size: 1rem; -} -.markdown-section h6 { - color: #777; - font-size: 1rem; -} -.markdown-section figure, -.markdown-section p { - margin: 1.2em 0; -} -.markdown-section ol, -.markdown-section p, -.markdown-section ul { - line-height: 1.6rem; - word-spacing: 0.05rem; -} -.markdown-section ol, -.markdown-section ul { - padding-left: 1.5rem; -} -.markdown-section blockquote { - border-left: 4px solid var(--theme-color, #42b983); - color: #858585; - margin: 2em 0; - padding-left: 20px; -} -.markdown-section blockquote p { - font-weight: 600; - margin-left: 0; -} -.markdown-section iframe { - margin: 1em 0; -} -.markdown-section em { - color: #7f8c8d; -} -.markdown-section code { - border-radius: 2px; - color: #e96900; - font-size: 0.8rem; - margin: 0 2px; - padding: 3px 5px; - white-space: pre-wrap; -} -.markdown-section code, -.markdown-section pre { - background-color: #f8f8f8; - font-family: Roboto Mono, Monaco, courier, monospace; -} -.markdown-section pre { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - line-height: 1.5rem; - margin: 1.2em 0; - overflow: auto; - padding: 0 1.4rem; - position: relative; - word-wrap: normal; -} -.token.cdata, -.token.comment, -.token.doctype, -.token.prolog { - color: #8e908c; -} -.token.namespace { - opacity: 0.7; -} -.token.boolean, -.token.number { - color: #c76b29; -} -.token.punctuation { - color: #525252; -} -.token.property { - color: #c08b30; -} -.token.tag { - color: #2973b7; -} -.token.string { - color: var(--theme-color, #42b983); -} -.token.selector { - color: #6679cc; -} -.token.attr-name { - color: #2973b7; -} -.language-css .token.string, -.style .token.string, -.token.entity, -.token.url { - color: #22a2c9; -} -.token.attr-value, -.token.control, -.token.directive, -.token.unit { - color: var(--theme-color, #42b983); -} -.token.function, -.token.keyword { - color: #e96900; -} -.token.atrule, -.token.regex, -.token.statement { - color: #22a2c9; -} -.token.placeholder, -.token.variable { - color: #3d8fd1; -} -.token.deleted { - text-decoration: line-through; -} -.token.inserted { - border-bottom: 1px dotted #202746; - text-decoration: none; -} -.token.italic { - font-style: italic; -} -.token.bold, -.token.important { - font-weight: 700; -} -.token.important { - color: #c94922; -} -.token.entity { - cursor: help; -} -.markdown-section pre > code { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - background-color: #f8f8f8; - border-radius: 2px; - color: #525252; - display: block; - font-family: Roboto Mono, Monaco, courier, monospace; - font-size: 0.8rem; - line-height: inherit; - margin: 0 2px; - max-width: inherit; - overflow: inherit; - padding: 2.2em 5px; - white-space: inherit; -} -.markdown-section code:after, -.markdown-section code:before { - letter-spacing: 0.05rem; -} -code .token { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - min-height: 1.5rem; - position: relative; - left: auto; -} -pre:after { - color: #ccc; - content: attr(data-lang); - font-size: 0.6rem; - font-weight: 600; - height: 15px; - line-height: 15px; - padding: 5px 10px 0; - position: absolute; - right: 0; - text-align: right; - top: 0; -} diff --git a/docs/theme_themed.css b/docs/theme_themed.css deleted file mode 100644 index 9cb520ed7e..0000000000 --- a/docs/theme_themed.css +++ /dev/null @@ -1,1653 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); -* { - -webkit-font-smoothing: antialiased; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: none; - -webkit-touch-callout: none; - box-sizing: border-box; -} - -@media (prefers-color-scheme: dark2) { - body:not(.ready) { - overflow: hidden; - } - body:not(.ready) .app-nav, - body:not(.ready) > nav, - body:not(.ready) [data-cloak] { - display: none; - } - div#app { - font-size: 30px; - font-weight: lighter; - margin: 40vh auto; - text-align: center; - } - div#app:empty:before { - content: 'Loading...'; - } - .emoji { - height: 1.2rem; - vertical-align: middle; - } - .progress { - background-color: var(--theme-color, #ea6f5a); - height: 2px; - left: 0; - position: fixed; - right: 0; - top: 0; - transition: width 0.2s, opacity 0.4s; - width: 0; - z-index: 999999; - } - .search .search-keyword, - .search a:hover { - color: var(--theme-color, #ea6f5a); - } - .search .search-keyword { - font-style: normal; - font-weight: 700; - } - body, - html { - height: 100%; - } - body { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #c8c8c8; - font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; - font-size: 15px; - letter-spacing: 0; - margin: 0; - overflow-x: hidden; - } - img { - max-width: 100%; - } - a[disabled] { - cursor: not-allowed; - opacity: 0.6; - } - kbd { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-block; - font-size: 12px !important; - line-height: 12px; - margin-bottom: 3px; - padding: 3px 5px; - vertical-align: middle; - } - li input[type='checkbox'] { - margin: 0 0.2em 0.25em 0; - vertical-align: middle; - } - .app-nav { - margin: 25px 60px 0 0; - position: absolute; - right: 0; - text-align: right; - z-index: 10; - } - .app-nav.no-badge { - margin-right: 25px; - } - .app-nav p { - margin: 0; - } - .app-nav > a { - margin: 0 1rem; - padding: 5px 0; - } - .app-nav li, - .app-nav ul { - display: inline-block; - list-style: none; - margin: 0; - } - .app-nav a { - color: inherit; - font-size: 16px; - text-decoration: none; - transition: color 0.3s; - } - .app-nav a.active, - .app-nav a:hover { - color: var(--theme-color, #ea6f5a); - } - .app-nav a.active { - border-bottom: 2px solid var(--theme-color, #ea6f5a); - } - .app-nav li { - display: inline-block; - margin: 0 1rem; - padding: 5px 0; - position: relative; - cursor: pointer; - } - .app-nav li ul { - background-color: #fff; - border: 1px solid; - border-color: #ddd #ddd #ccc; - border-radius: 4px; - box-sizing: border-box; - display: none; - max-height: calc(100vh - 61px); - overflow-y: auto; - padding: 10px 0; - position: absolute; - right: -15px; - text-align: left; - top: 100%; - white-space: nowrap; - } - .app-nav li ul li { - display: block; - font-size: 14px; - line-height: 1rem; - margin: 8px 14px; - white-space: nowrap; - } - .app-nav li ul a { - display: block; - font-size: inherit; - margin: 0; - padding: 0; - } - .app-nav li ul a.active { - border-bottom: 0; - } - .app-nav li:hover ul { - display: block; - } - .github-corner { - border-bottom: 0; - position: fixed; - right: 0; - text-decoration: none; - top: 0; - z-index: 1; - } - .github-corner:hover .octo-arm { - -webkit-animation: octocat-wave 0.56s ease-in-out; - animation: octocat-wave 0.56s ease-in-out; - } - .github-corner svg { - color: #3f3f3f; - fill: var(--theme-color, #ea6f5a); - height: 80px; - width: 80px; - } - main { - display: block; - position: relative; - width: 100vw; - height: 100%; - z-index: 0; - } - main.hidden { - display: none; - } - .anchor { - display: inline-block; - text-decoration: none; - transition: all 0.3s; - } - .anchor span { - color: #c8c8c8; - } - .anchor:hover { - text-decoration: underline; - } - .sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); - overflow-y: auto; - padding: 40px 0 0; - position: absolute; - top: 0; - bottom: 0; - left: 0; - transition: transform 0.25s ease-out; - width: 300px; - z-index: 20; - } - .sidebar > h1 { - margin: 0 auto 1rem; - font-size: 1.5rem; - font-weight: 300; - text-align: center; - } - .sidebar > h1 a { - color: inherit; - text-decoration: none; - } - .sidebar > h1 .app-nav { - display: block; - position: static; - } - .sidebar .sidebar-nav { - line-height: 2em; - padding-bottom: 40px; - } - .sidebar li.collapse .app-sub-sidebar { - display: none; - } - .sidebar ul { - margin: 0 0 0 15px; - padding: 0; - } - .sidebar li > p { - font-weight: 700; - margin: 0; - } - .sidebar ul, - .sidebar ul li { - list-style: none; - } - .sidebar ul li a { - border-bottom: none; - display: block; - } - .sidebar ul li ul { - padding-left: 20px; - } - .sidebar::-webkit-scrollbar { - width: 4px; - } - .sidebar::-webkit-scrollbar-thumb { - background: transparent; - border-radius: 4px; - } - .sidebar:hover::-webkit-scrollbar-thumb { - background: hsla(0, 0%, 53.3%, 0.4); - } - .sidebar:hover::-webkit-scrollbar-track { - background: hsla(0, 0%, 53.3%, 0.1); - } - .sidebar-toggle { - background-color: transparent; - background-color: rgba(63, 63, 63, 0.8); - border: 0; - outline: none; - padding: 10px; - position: absolute; - bottom: 0; - left: 0; - text-align: center; - transition: opacity 0.3s; - width: 284px; - z-index: 30; - cursor: pointer; - } - .sidebar-toggle:hover .sidebar-toggle-button { - opacity: 0.4; - } - .sidebar-toggle span { - background-color: var(--theme-color, #ea6f5a); - display: block; - margin-bottom: 4px; - width: 16px; - height: 2px; - } - body.sticky .sidebar, - body.sticky .sidebar-toggle { - position: fixed; - } - .content { - padding-top: 60px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 300px; - transition: left 0.25s ease; - } - .markdown-section { - margin: 0 auto; - max-width: 80%; - padding: 30px 15px 40px; - position: relative; - } - .markdown-section > * { - box-sizing: border-box; - font-size: inherit; - } - .markdown-section > :first-child { - margin-top: 0 !important; - } - .markdown-section hr { - border: none; - border-bottom: 1px solid #eee; - margin: 2em 0; - } - .markdown-section iframe { - border: 1px solid #eee; - width: 1px; - min-width: 100%; - } - .markdown-section table { - border-collapse: collapse; - border-spacing: 0; - display: block; - margin-bottom: 1rem; - overflow: auto; - width: 100%; - } - .markdown-section th { - font-weight: 700; - } - .markdown-section td, - .markdown-section th { - border: 1px solid #ddd; - padding: 6px 13px; - } - .markdown-section tr { - border-top: 1px solid #ccc; - } - .markdown-section p.tip, - .markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; - } - .markdown-section p.tip { - border-bottom-right-radius: 2px; - border-left: 4px solid #f66; - border-top-right-radius: 2px; - margin: 2em 0; - padding: 12px 24px 12px 30px; - position: relative; - } - .markdown-section p.tip:before { - background-color: #f66; - border-radius: 100%; - color: #3f3f3f; - content: '!'; - font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; - font-size: 14px; - font-weight: 700; - left: -12px; - line-height: 20px; - position: absolute; - height: 20px; - width: 20px; - text-align: center; - top: 14px; - } - .markdown-section p.tip code { - background-color: #efefef; - } - .markdown-section p.tip em { - color: #c8c8c8; - } - .markdown-section p.warn { - background: rgba(234, 111, 90, 0.1); - border-radius: 2px; - padding: 1rem; - } - .markdown-section ul.task-list > li { - list-style-type: none; - } - body.close .sidebar { - transform: translateX(-300px); - } - body.close .sidebar-toggle { - width: auto; - } - body.close .content { - left: 0; - } - @media print { - .app-nav, - .github-corner, - .sidebar, - .sidebar-toggle { - display: none; - } - } - @media screen and (max-width: 768px) { - .github-corner, - .sidebar, - .sidebar-toggle { - position: fixed; - } - .app-nav { - margin-top: 16px; - } - .app-nav li ul { - top: 30px; - } - main { - height: auto; - overflow-x: hidden; - } - .sidebar { - left: -300px; - transition: transform 0.25s ease-out; - } - .content { - left: 0; - max-width: 100vw; - position: static; - padding-top: 20px; - transition: transform 0.25s ease; - } - .app-nav, - .github-corner { - transition: transform 0.25s ease-out; - } - .sidebar-toggle { - background-color: transparent; - width: auto; - padding: 30px 30px 10px 10px; - } - body.close .sidebar { - transform: translateX(300px); - } - body.close .sidebar-toggle { - background-color: rgba(63, 63, 63, 0.8); - transition: background-color 1s; - width: 284px; - padding: 10px; - } - body.close .content { - transform: translateX(300px); - } - body.close .app-nav, - body.close .github-corner { - display: none; - } - .github-corner:hover .octo-arm { - -webkit-animation: none; - animation: none; - } - .github-corner .octo-arm { - -webkit-animation: octocat-wave 0.56s ease-in-out; - animation: octocat-wave 0.56s ease-in-out; - } - } - @-webkit-keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } - } - @keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } - } - section.cover { - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - height: 100vh; - width: 100vw; - display: none; - } - section.cover.show { - display: flex; - } - section.cover.has-mask .mask { - background-color: #3f3f3f; - opacity: 0.8; - position: absolute; - top: 0; - height: 100%; - width: 100%; - } - section.cover .cover-main { - flex: 1; - margin: -20px 16px 0; - text-align: center; - } - section.cover a { - color: inherit; - } - section.cover a, - section.cover a:hover { - text-decoration: none; - } - section.cover p { - line-height: 1.5rem; - margin: 1em 0; - } - section.cover h1 { - color: inherit; - font-size: 2.5rem; - font-weight: 300; - margin: 0.625rem 0 2.5rem; - position: relative; - text-align: center; - } - section.cover h1 a { - display: block; - } - section.cover h1 small { - bottom: -0.4375rem; - font-size: 1rem; - position: absolute; - } - section.cover blockquote { - font-size: 1.5rem; - text-align: center; - } - section.cover ul { - line-height: 1.8; - list-style-type: none; - margin: 1em auto; - max-width: 500px; - padding: 0; - } - section.cover .cover-main > p:last-child a { - border-radius: 2rem; - border: 1px solid var(--theme-color, #ea6f5a); - box-sizing: border-box; - color: var(--theme-color, #ea6f5a); - display: inline-block; - font-size: 1.05rem; - letter-spacing: 0.1rem; - margin: 0.5rem 1rem; - padding: 0.75em 2rem; - text-decoration: none; - transition: all 0.15s ease; - } - section.cover .cover-main > p:last-child a:last-child { - background-color: var(--theme-color, #ea6f5a); - color: #fff; - } - section.cover .cover-main > p:last-child a:last-child:hover { - color: inherit; - opacity: 0.8; - } - section.cover .cover-main > p:last-child a:hover { - color: inherit; - } - section.cover blockquote > p > a { - border-bottom: 2px solid var(--theme-color, #ea6f5a); - transition: color 0.3s; - } - section.cover blockquote > p > a:hover { - color: var(--theme-color, #ea6f5a); - } - .sidebar, - body { - background-color: #3f3f3f; - } - .sidebar { - color: #c8c8c8; - } - .sidebar li { - margin: 6px 15px 6px 0; - } - .sidebar ul li a { - color: #c8c8c8; - font-size: 14px; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - .sidebar ul li a:hover { - text-decoration: underline; - } - .sidebar ul li ul { - padding: 0; - } - .sidebar ul li.active > a { - color: var(--theme-color, #ea6f5a); - font-weight: 600; - } - .markdown-section h1, - .markdown-section h2, - .markdown-section h3, - .markdown-section h4, - .markdown-section strong { - color: #657b83; - font-weight: 600; - } - .markdown-section a { - color: var(--theme-color, #ea6f5a); - font-weight: 600; - } - .markdown-section h1 { - font-size: 2rem; - margin: 0 0 1rem; - } - .markdown-section h2 { - font-size: 1.75rem; - margin: 45px 0 0.8rem; - } - .markdown-section h3 { - font-size: 1.5rem; - margin: 40px 0 0.6rem; - } - .markdown-section h4 { - font-size: 1.25rem; - } - .markdown-section h5 { - font-size: 1rem; - } - .markdown-section h6 { - color: #777; - font-size: 1rem; - } - .markdown-section figure, - .markdown-section ol, - .markdown-section p, - .markdown-section ul { - margin: 1.2em 0; - } - .markdown-section ol, - .markdown-section p, - .markdown-section ul { - line-height: 1.6rem; - word-spacing: 0.05rem; - } - .markdown-section ol, - .markdown-section ul { - padding-left: 1.5rem; - } - .markdown-section blockquote { - border-left: 4px solid var(--theme-color, #ea6f5a); - color: #858585; - margin: 2em 0; - padding-left: 20px; - } - .markdown-section blockquote p { - font-weight: 600; - margin-left: 0; - } - .markdown-section iframe { - margin: 1em 0; - } - .markdown-section em { - color: #7f8c8d; - } - .markdown-section code { - border-radius: 2px; - color: #657b83; - font-size: 0.8rem; - margin: 0 2px; - padding: 3px 5px; - white-space: pre-wrap; - } - .markdown-section code, - .markdown-section pre { - background-color: #282828; - font-family: Roboto Mono, Monaco, courier, monospace; - } - .markdown-section pre { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - line-height: 1.5rem; - margin: 1.2em 0; - overflow: auto; - padding: 0 1.4rem; - position: relative; - word-wrap: normal; - } - .token.cdata, - .token.comment, - .token.doctype, - .token.prolog { - color: #8e908c; - } - .token.namespace { - opacity: 0.7; - } - .token.boolean, - .token.number { - color: #c76b29; - } - .token.punctuation { - color: #525252; - } - .token.property { - color: #c08b30; - } - .token.tag { - color: #2973b7; - } - .token.string { - color: var(--theme-color, #ea6f5a); - } - .token.selector { - color: #6679cc; - } - .token.attr-name { - color: #2973b7; - } - .language-css .token.string, - .style .token.string, - .token.entity, - .token.url { - color: #22a2c9; - } - .token.attr-value, - .token.control, - .token.directive, - .token.unit { - color: var(--theme-color, #ea6f5a); - } - .token.keyword { - color: #e96900; - } - .token.atrule, - .token.regex, - .token.statement { - color: #22a2c9; - } - .token.placeholder, - .token.variable { - color: #3d8fd1; - } - .token.deleted { - text-decoration: line-through; - } - .token.inserted { - border-bottom: 1px dotted #202746; - text-decoration: none; - } - .token.italic { - font-style: italic; - } - .token.bold, - .token.important { - font-weight: 700; - } - .token.important { - color: #c94922; - } - .token.entity { - cursor: help; - } - .markdown-section pre > code { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - background-color: #282828; - border-radius: 2px; - color: #657b83; - display: block; - font-family: Roboto Mono, Monaco, courier, monospace; - font-size: 0.8rem; - line-height: inherit; - margin: 0 2px; - max-width: inherit; - overflow: inherit; - padding: 2.2em 5px; - white-space: inherit; - } - .markdown-section code:after, - .markdown-section code:before { - letter-spacing: 0.05rem; - } - code .token { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - min-height: 1.5rem; - position: relative; - left: auto; - } - pre:after { - color: #ccc; - content: attr(data-lang); - font-size: 0.6rem; - font-weight: 600; - height: 15px; - line-height: 15px; - padding: 5px 10px 0; - position: absolute; - right: 0; - text-align: right; - top: 0; - } - .markdown-section p.tip { - background-color: #282828; - color: #657b83; - } - input[type='search'] { - background: #4f4f4f; - border-color: #4f4f4f; - color: #c8c8c8; - } -} - -@media (prefers-color-scheme: light or prefers-color-scheme: dark) { - /* @media (screen) { */ - body:not(.ready) { - overflow: hidden; - } - body:not(.ready) .app-nav, - body:not(.ready) > nav, - body:not(.ready) [data-cloak] { - display: none; - } - div#app { - font-size: 30px; - font-weight: lighter; - margin: 40vh auto; - text-align: center; - } - div#app:empty:before { - content: 'Loading...'; - } - .emoji { - height: 1.2rem; - vertical-align: middle; - } - .progress { - background-color: var(--theme-color, #42b983); - height: 2px; - left: 0; - position: fixed; - right: 0; - top: 0; - transition: width 0.2s, opacity 0.4s; - width: 0; - z-index: 999999; - } - .search .search-keyword, - .search a:hover { - color: var(--theme-color, #42b983); - } - .search .search-keyword { - font-style: normal; - font-weight: 700; - } - body, - html { - height: 100%; - } - body { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #34495e; - font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; - font-size: 15px; - letter-spacing: 0; - margin: 0; - overflow-x: hidden; - } - img { - max-width: 100%; - } - a[disabled] { - cursor: not-allowed; - opacity: 0.6; - } - kbd { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-block; - font-size: 12px !important; - line-height: 12px; - margin-bottom: 3px; - padding: 3px 5px; - vertical-align: middle; - } - li input[type='checkbox'] { - margin: 0 0.2em 0.25em 0; - vertical-align: middle; - } - .app-nav { - margin: 25px 60px 0 0; - position: absolute; - right: 0; - text-align: right; - z-index: 10; - } - .app-nav.no-badge { - margin-right: 25px; - } - .app-nav p { - margin: 0; - } - .app-nav > a { - margin: 0 1rem; - padding: 5px 0; - } - .app-nav li, - .app-nav ul { - display: inline-block; - list-style: none; - margin: 0; - } - .app-nav a { - color: inherit; - font-size: 16px; - text-decoration: none; - transition: color 0.3s; - } - .app-nav a.active, - .app-nav a:hover { - color: var(--theme-color, #42b983); - } - .app-nav a.active { - border-bottom: 2px solid var(--theme-color, #42b983); - } - .app-nav li { - display: inline-block; - margin: 0 1rem; - padding: 5px 0; - position: relative; - cursor: pointer; - } - .app-nav li ul { - background-color: #fff; - border: 1px solid; - border-color: #ddd #ddd #ccc; - border-radius: 4px; - box-sizing: border-box; - display: none; - max-height: calc(100vh - 61px); - overflow-y: auto; - padding: 10px 0; - position: absolute; - right: -15px; - text-align: left; - top: 100%; - white-space: nowrap; - } - .app-nav li ul li { - display: block; - font-size: 14px; - line-height: 1rem; - margin: 8px 14px; - white-space: nowrap; - } - .app-nav li ul a { - display: block; - font-size: inherit; - margin: 0; - padding: 0; - } - .app-nav li ul a.active { - border-bottom: 0; - } - .app-nav li:hover ul { - display: block; - } - .github-corner { - border-bottom: 0; - position: fixed; - right: 0; - text-decoration: none; - top: 0; - z-index: 1; - } - .github-corner:hover .octo-arm { - -webkit-animation: octocat-wave 0.56s ease-in-out; - animation: octocat-wave 0.56s ease-in-out; - } - .github-corner svg { - color: #fff; - fill: var(--theme-color, #42b983); - height: 80px; - width: 80px; - } - main { - display: block; - position: relative; - width: 100vw; - height: 100%; - z-index: 0; - } - main.hidden { - display: none; - } - .anchor { - display: inline-block; - text-decoration: none; - transition: all 0.3s; - } - .anchor span { - color: #34495e; - } - .anchor:hover { - text-decoration: underline; - } - .sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); - overflow-y: auto; - padding: 40px 0 0; - position: absolute; - top: 0; - bottom: 0; - left: 0; - transition: transform 0.25s ease-out; - width: 300px; - z-index: 20; - } - .sidebar > h1 { - margin: 0 auto 1rem; - font-size: 1.5rem; - font-weight: 300; - text-align: center; - } - .sidebar > h1 a { - color: inherit; - text-decoration: none; - } - .sidebar > h1 .app-nav { - display: block; - position: static; - } - .sidebar .sidebar-nav { - line-height: 2em; - padding-bottom: 40px; - } - .sidebar li.collapse .app-sub-sidebar { - display: none; - } - .sidebar ul { - margin: 0 0 0 15px; - padding: 0; - } - .sidebar li > p { - font-weight: 700; - margin: 0; - } - .sidebar ul, - .sidebar ul li { - list-style: none; - } - .sidebar ul li a { - border-bottom: none; - display: block; - } - .sidebar ul li ul { - padding-left: 20px; - } - .sidebar::-webkit-scrollbar { - width: 4px; - } - .sidebar::-webkit-scrollbar-thumb { - background: transparent; - border-radius: 4px; - } - .sidebar:hover::-webkit-scrollbar-thumb { - background: hsla(0, 0%, 53.3%, 0.4); - } - .sidebar:hover::-webkit-scrollbar-track { - background: hsla(0, 0%, 53.3%, 0.1); - } - .sidebar-toggle { - background-color: transparent; - background-color: hsla(0, 0%, 100%, 0.8); - border: 0; - outline: none; - padding: 10px; - position: absolute; - bottom: 0; - left: 0; - text-align: center; - transition: opacity 0.3s; - width: 284px; - z-index: 30; - cursor: pointer; - } - .sidebar-toggle:hover .sidebar-toggle-button { - opacity: 0.4; - } - .sidebar-toggle span { - background-color: var(--theme-color, #42b983); - display: block; - margin-bottom: 4px; - width: 16px; - height: 2px; - } - body.sticky .sidebar, - body.sticky .sidebar-toggle { - position: fixed; - } - .content { - padding-top: 60px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 300px; - transition: left 0.25s ease; - } - .markdown-section { - margin: 0 auto; - max-width: 80%; - padding: 30px 15px 40px; - position: relative; - } - .markdown-section > * { - box-sizing: border-box; - font-size: inherit; - } - .markdown-section > :first-child { - margin-top: 0 !important; - } - .markdown-section hr { - border: none; - border-bottom: 1px solid #eee; - margin: 2em 0; - } - .markdown-section iframe { - border: 1px solid #eee; - width: 1px; - min-width: 100%; - } - .markdown-section table { - border-collapse: collapse; - border-spacing: 0; - display: block; - margin-bottom: 1rem; - overflow: auto; - width: 100%; - } - .markdown-section th { - font-weight: 700; - } - .markdown-section td, - .markdown-section th { - border: 1px solid #ddd; - padding: 6px 13px; - } - .markdown-section tr { - border-top: 1px solid #ccc; - } - .markdown-section p.tip, - .markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; - } - .markdown-section p.tip { - border-bottom-right-radius: 2px; - border-left: 4px solid #f66; - border-top-right-radius: 2px; - margin: 2em 0; - padding: 12px 24px 12px 30px; - position: relative; - } - .markdown-section p.tip:before { - background-color: #f66; - border-radius: 100%; - color: #fff; - content: '!'; - font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; - font-size: 14px; - font-weight: 700; - left: -12px; - line-height: 20px; - position: absolute; - height: 20px; - width: 20px; - text-align: center; - top: 14px; - } - .markdown-section p.tip code { - background-color: #efefef; - } - .markdown-section p.tip em { - color: #34495e; - } - .markdown-section p.warn { - background: rgba(66, 185, 131, 0.1); - border-radius: 2px; - padding: 1rem; - } - .markdown-section ul.task-list > li { - list-style-type: none; - } - body.close .sidebar { - transform: translateX(-300px); - } - body.close .sidebar-toggle { - width: auto; - } - body.close .content { - left: 0; - } - @media print { - .app-nav, - .github-corner, - .sidebar, - .sidebar-toggle { - display: none; - } - } - @media screen and (max-width: 768px) { - .github-corner, - .sidebar, - .sidebar-toggle { - position: fixed; - } - .app-nav { - margin-top: 16px; - } - .app-nav li ul { - top: 30px; - } - main { - height: auto; - overflow-x: hidden; - } - .sidebar { - left: -300px; - transition: transform 0.25s ease-out; - } - .content { - left: 0; - max-width: 100vw; - position: static; - padding-top: 20px; - transition: transform 0.25s ease; - } - .app-nav, - .github-corner { - transition: transform 0.25s ease-out; - } - .sidebar-toggle { - background-color: transparent; - width: auto; - padding: 30px 30px 10px 10px; - } - body.close .sidebar { - transform: translateX(300px); - } - body.close .sidebar-toggle { - background-color: hsla(0, 0%, 100%, 0.8); - transition: background-color 1s; - width: 284px; - padding: 10px; - } - body.close .content { - transform: translateX(300px); - } - body.close .app-nav, - body.close .github-corner { - display: none; - } - .github-corner:hover .octo-arm { - -webkit-animation: none; - animation: none; - } - .github-corner .octo-arm { - -webkit-animation: octocat-wave 0.56s ease-in-out; - animation: octocat-wave 0.56s ease-in-out; - } - } - @-webkit-keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } - } - @keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } - } - section.cover { - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - height: 100vh; - width: 100vw; - display: none; - } - section.cover.show { - display: flex; - } - section.cover.has-mask .mask { - background-color: #fff; - opacity: 0.8; - position: absolute; - top: 0; - height: 100%; - width: 100%; - } - section.cover .cover-main { - flex: 1; - margin: -20px 16px 0; - text-align: center; - } - section.cover a { - color: inherit; - } - section.cover a, - section.cover a:hover { - text-decoration: none; - } - section.cover p { - line-height: 1.5rem; - margin: 1em 0; - } - section.cover h1 { - color: inherit; - font-size: 2.5rem; - font-weight: 300; - margin: 0.625rem 0 2.5rem; - position: relative; - text-align: center; - } - section.cover h1 a { - display: block; - } - section.cover h1 small { - bottom: -0.4375rem; - font-size: 1rem; - position: absolute; - } - section.cover blockquote { - font-size: 1.5rem; - text-align: center; - } - section.cover ul { - line-height: 1.8; - list-style-type: none; - margin: 1em auto; - max-width: 500px; - padding: 0; - } - section.cover .cover-main > p:last-child a { - border-radius: 2rem; - border: 1px solid var(--theme-color, #42b983); - box-sizing: border-box; - color: var(--theme-color, #42b983); - display: inline-block; - font-size: 1.05rem; - letter-spacing: 0.1rem; - margin: 0.5rem 1rem; - padding: 0.75em 2rem; - text-decoration: none; - transition: all 0.15s ease; - } - section.cover .cover-main > p:last-child a:last-child { - background-color: var(--theme-color, #42b983); - color: #fff; - } - section.cover .cover-main > p:last-child a:last-child:hover { - color: inherit; - opacity: 0.8; - } - section.cover .cover-main > p:last-child a:hover { - color: inherit; - } - section.cover blockquote > p > a { - border-bottom: 2px solid var(--theme-color, #42b983); - transition: color 0.3s; - } - section.cover blockquote > p > a:hover { - color: var(--theme-color, #42b983); - } - .sidebar, - body { - background-color: #fff; - } - .sidebar { - color: #364149; - } - .sidebar li { - margin: 6px 0; - } - .sidebar ul li a { - color: #505d6b; - font-size: 14px; - font-weight: 400; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - .sidebar ul li a:hover { - text-decoration: underline; - } - .sidebar ul li ul { - padding: 0; - } - .sidebar ul li.active > a { - border-right: 2px solid; - color: var(--theme-color, #42b983); - font-weight: 600; - } - .app-sub-sidebar li:before { - content: '-'; - padding-right: 4px; - float: left; - } - .markdown-section h1, - .markdown-section h2, - .markdown-section h3, - .markdown-section h4, - .markdown-section strong { - color: #2c3e50; - font-weight: 600; - } - .markdown-section a { - color: var(--theme-color, #42b983); - font-weight: 600; - } - .markdown-section h1 { - font-size: 2rem; - margin: 0 0 1rem; - } - .markdown-section h2 { - font-size: 1.75rem; - margin: 45px 0 0.8rem; - } - .markdown-section h3 { - font-size: 1.5rem; - margin: 40px 0 0.6rem; - } - .markdown-section h4 { - font-size: 1.25rem; - } - .markdown-section h5 { - font-size: 1rem; - } - .markdown-section h6 { - color: #777; - font-size: 1rem; - } - .markdown-section figure, - .markdown-section p { - margin: 1.2em 0; - } - .markdown-section ol, - .markdown-section p, - .markdown-section ul { - line-height: 1.6rem; - word-spacing: 0.05rem; - } - .markdown-section ol, - .markdown-section ul { - padding-left: 1.5rem; - } - .markdown-section blockquote { - border-left: 4px solid var(--theme-color, #42b983); - color: #858585; - margin: 2em 0; - padding-left: 20px; - } - .markdown-section blockquote p { - font-weight: 600; - margin-left: 0; - } - .markdown-section iframe { - margin: 1em 0; - } - .markdown-section em { - color: #7f8c8d; - } - .markdown-section code { - border-radius: 2px; - color: #e96900; - font-size: 0.8rem; - margin: 0 2px; - padding: 3px 5px; - white-space: pre-wrap; - } - .markdown-section code, - .markdown-section pre { - background-color: #f8f8f8; - font-family: Roboto Mono, Monaco, courier, monospace; - } - .markdown-section pre { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - line-height: 1.5rem; - margin: 1.2em 0; - overflow: auto; - padding: 0 1.4rem; - position: relative; - word-wrap: normal; - } - .token.cdata, - .token.comment, - .token.doctype, - .token.prolog { - color: #8e908c; - } - .token.namespace { - opacity: 0.7; - } - .token.boolean, - .token.number { - color: #c76b29; - } - .token.punctuation { - color: #525252; - } - .token.property { - color: #c08b30; - } - .token.tag { - color: #2973b7; - } - .token.string { - color: var(--theme-color, #42b983); - } - .token.selector { - color: #6679cc; - } - .token.attr-name { - color: #2973b7; - } - .language-css .token.string, - .style .token.string, - .token.entity, - .token.url { - color: #22a2c9; - } - .token.attr-value, - .token.control, - .token.directive, - .token.unit { - color: var(--theme-color, #42b983); - } - .token.function, - .token.keyword { - color: #e96900; - } - .token.atrule, - .token.regex, - .token.statement { - color: #22a2c9; - } - .token.placeholder, - .token.variable { - color: #3d8fd1; - } - .token.deleted { - text-decoration: line-through; - } - .token.inserted { - border-bottom: 1px dotted #202746; - text-decoration: none; - } - .token.italic { - font-style: italic; - } - .token.bold, - .token.important { - font-weight: 700; - } - .token.important { - color: #c94922; - } - .token.entity { - cursor: help; - } - .markdown-section pre > code { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - background-color: #f8f8f8; - border-radius: 2px; - color: #525252; - display: block; - font-family: Roboto Mono, Monaco, courier, monospace; - font-size: 0.8rem; - line-height: inherit; - margin: 0 2px; - max-width: inherit; - overflow: inherit; - padding: 2.2em 5px; - white-space: inherit; - } - .markdown-section code:after, - .markdown-section code:before { - letter-spacing: 0.05rem; - } - code .token { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - min-height: 1.5rem; - position: relative; - left: auto; - } - pre:after { - color: #ccc; - content: attr(data-lang); - font-size: 0.6rem; - font-weight: 600; - height: 15px; - line-height: 15px; - padding: 5px 10px 0; - position: absolute; - right: 0; - text-align: right; - top: 0; - } -} diff --git a/docs/theming.md b/docs/theming.md deleted file mode 100644 index c2dd3f2ae6..0000000000 --- a/docs/theming.md +++ /dev/null @@ -1,776 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# Theme Configuration - -With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams. - -The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive - -Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md). - -## Deployable Themes - -The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls. - -1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. - -2. **forest**- A theme full of light greens that is easy on the eyes. - -3. **dark**- A theme that would go well with other dark-colored elements. - -4. **default**- The default theme for all diagrams. - -5. **neutral**- The theme to be used for black and white printing. - -## Site-wide Themes - -Site-wide themes are declared via `initialize` by site owners. - -Example of `Initialize` call setting `theme` to `base`: - -```javascript -mermaidAPI.initialize({ - securityLevel: 'loose', - theme: 'base', -}); -``` - -**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams. - -## Themes at the Local or Current Level - -When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. - -```mermaid-example -%%{init: {'theme':'base'}}%% - graph TD - a --> b -``` - -```mermaid -%%{init: {'theme':'base'}}%% - graph TD - a --> b -``` - -Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default: - -```mermaid-example -%%{init: {'theme':'base'}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'theme':'base'}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -# List of Themes - -# Customizing Themes with `themeVariables` - -The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`. - -| Parameter | Description | Type | Required | Objects contained | -| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- | -| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor | - -**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.** - -```mermaid-example -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -**Notes:** -Leaving it empty will set all variable values to default. - -## Color and Color Calculation: - -Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability. - -**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc. - -You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently. - -## Theme Variables Reference Table - -```note -Variables that are unique to some diagrams can be affected by changes in Theme Variables -``` - -| Variable | Default/Base/Factor value | Calc | Description | -| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | -| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. | -| background | #f4f4f4 | | Used to calculate color for items that should either be background colored or contrasting to the background. | -| fontFamily | "trebuchet ms", verdana, arial | | | -| fontSize | 16px | | Font Size, in pixels | -| primaryColor | #fff4dd | | Color to be used as background in nodes, other colors will be derived from this | -| primaryBorderColor | based on primaryColor | \* | Color to be used as border in nodes using primaryColor | -| primaryTextColor | based on darkMode #ddd/#333 | \* | Color to be used as text color in nodes using primaryColor | -| secondaryColor | based on primaryColor | \* | | -| secondaryBorderColor | based on secondaryColor | \* | Color to be used as border in nodes using secondaryColor | -| secondaryTextColor | based on secondaryColor | \* | Color to be used as text color in nodes using secondaryColor | -| tertiaryColor | based on primaryColor | \* | | -| tertiaryBorderColor | based on tertiaryColor | \* | Color to be used as border in nodes using tertiaryColor | -| tertiaryTextColor | based on tertiaryColor | \* | Color to be used as text color in nodes using tertiaryColor | -| noteBkgColor | #fff5ad | | Color used as background in notes | -| noteTextColor | #333 | | Text color in note rectangles. | -| noteBorderColor | based on noteBkgColor | \* | Border color in note rectangles. | -| lineColor | based on background | \* | | -| textColor | based on primaryTextColor | \* | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram | -| mainBkg | based on primaryColor | \* | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | -| errorBkgColor | tertiaryColor | \* | Color for syntax error message | -| errorTextColor | tertiaryTextColor | \* | Color for syntax error message | - -# What follows are Variables, specific to different diagrams and charts. - -## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` . - -## Flowchart - -| Variable | Default/ Associated Value | Calc | Description | -| ------------------- | ------------------------- | ---- | ---------------------------- | -| nodeBorder | primaryBorderColor | \* | Node Border Color | -| clusterBkg | tertiaryColor | \* | Background in subgraphs | -| clusterBorder | tertiaryBorderColor | \* | Cluster Border Color | -| defaultLinkColor | lineColor | \* | Link Color | -| titleColor | tertiaryTextColor | \* | Title Color | -| edgeLabelBackground | based on secondaryColor | \* | | -| nodeTextColor | primaryTextColor | \* | Color for text inside Nodes. | - -# sequence diagram - -| name | Default value | Calc | Description | -| --------------------- | ----------------------- | ---- | --------------------------- | -| actorBorder | primaryBorderColor | \* | Actor Border Color | -| actorBkg | mainBkg | \* | Actor Background Color | -| actorTextColor | primaryTextColor | \* | Actor Text Color | -| actorLineColor | grey | \* | Actor Line Color | -| signalColor | textColor | \* | Signal Color | -| signalTextColor | textColor | \* | Signal Text Color | -| labelBoxBkgColor | actorBkg | \* | Label Box Background Color | -| labelBoxBorderColor | actorBorder | \* | Label Box Border Color | -| labelTextColor | actorTextColor | \* | Label Text Color | -| loopTextColor | actorTextColor | \* | Loop ext Color | -| activationBorderColor | based on secondaryColor | \* | Activation Border Color | -| activationBkgColor | secondaryColor | \* | Activation Background Color | -| sequenceNumberColor | based on lineColor | \* | Sequence Number Color | - -# state colors - -| name | Default value | Calc | Description | -| ------------- | ---------------- | ---- | -------------------------------------------- | -| labelColor | primaryTextColor | \* | | -| altBackground | tertiaryColor | \* | Used for background in deep composite states | - -# class colors - -| name | Default value | Calc | Description | -| --------- | ------------- | ---- | ------------------------------- | -| classText | textColor | \* | Color of Text in class diagrams | - -# User journey colors - -| name | Default value | Calc | Description | -| --------- | ----------------------- | ---- | --------------------------------------- | -| fillType0 | primaryColor | \* | Fill for 1st section in journey diagram | -| fillType1 | secondaryColor | \* | Fill for 2nd section in journey diagram | -| fillType2 | based on primaryColor | \* | Fill for 3rd section in journey diagram | -| fillType3 | based on secondaryColor | \* | Fill for 4th section in journey diagram | -| fillType4 | based on primaryColor | \* | Fill for 5th section in journey diagram | -| fillType5 | based on secondaryColor | \* | Fill for 6th section in journey diagram | -| fillType6 | based on primaryColor | \* | Fill for 7th section in journey diagram | -| fillType7 | based on secondaryColor | \* | Fill for 8th section in journey diagram | - -\*\*Notes: Values are meant to create an alternating look. - -# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. - -```mermaid-example -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed: - -- Make the primary color a little lighter -- set the tertiary color to a reddish shade as well -- make the edge label background differ from the subgraph by setting the edgeLabelBackground - -```mermaid-example -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work. - -# Common theming activities - -## How to change the color of the arrows - -# Examples: - -When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good. -In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md) - -### Flowchart - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -### Flowchart (beta) - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - flowchart TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[Another] - C ==>|One| D[Laptop] - C x--x|Two| E[iPhone] - C o--o|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - flowchart TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[Another] - C ==>|One| D[Laptop] - C x--x|Two| E[iPhone] - C o--o|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -### Sequence diagram - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - sequenceDiagram - autonumber - par Action 1 - Alice->>John: Hello John, how are you? - and Action 2 - Alice->>Bob: Hello Bob, how are you? - end - Alice->>+John: Hello John, how are you? - Alice->>+John: John, can you hear me? - John-->>-Alice: Hi Alice, I can hear you! - Note right of John: John is perceptive - John-->>-Alice: I feel great! - loop Every minute - John-->Alice: Great! - end -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - sequenceDiagram - autonumber - par Action 1 - Alice->>John: Hello John, how are you? - and Action 2 - Alice->>Bob: Hello Bob, how are you? - end - Alice->>+John: Hello John, how are you? - Alice->>+John: John, can you hear me? - John-->>-Alice: Hi Alice, I can hear you! - Note right of John: John is perceptive - John-->>-Alice: I feel great! - loop Every minute - John-->Alice: Great! - end -``` - -### Class diagram - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - -classDiagram - Animal "1" <|-- Duck - Animal <|-- Fish - Animal <--o Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - -classDiagram - Animal "1" <|-- Duck - Animal <|-- Fish - Animal <--o Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -``` - -### Gantt - -```mermaid-example -gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - excludes :excludes the named dates/days from being included in a charted task.. - 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 - - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - - section Documentation - Describe gantt syntax :active, a1, after des1, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :doc1, after a1 , 48h - - section Last section - Describe gantt syntax :after doc1, 3d - Add gantt diagram to demo page :20h - Add another diagram to demo page :48h -``` - -```mermaid -gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - excludes :excludes the named dates/days from being included in a charted task.. - 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 - - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - - section Documentation - Describe gantt syntax :active, a1, after des1, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :doc1, after a1 , 48h - - section Last section - Describe gantt syntax :after doc1, 3d - Add gantt diagram to demo page :20h - Add another diagram to demo page :48h -``` - -### State diagram - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - stateDiagram - [*] --> Active - - state Active { - [*] --> NumLockOff - NumLockOff --> NumLockOn : EvNumLockPressed - NumLockOn --> NumLockOff : EvNumLockPressed - -- - [*] --> CapsLockOff - CapsLockOff --> CapsLockOn : EvCapsLockPressed - CapsLockOn --> CapsLockOff : EvCapsLockPressed - -- - [*] --> ScrollLockOff - ScrollLockOff --> ScrollLockOn : EvCapsLockPressed - ScrollLockOn --> ScrollLockOff : EvCapsLockPressed - } - state SomethingElse { - A --> B - B --> A - } - - Active --> SomethingElse - note right of SomethingElse : This is the note to the right. - - SomethingElse --> [*] - -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% - stateDiagram - [*] --> Active - - state Active { - [*] --> NumLockOff - NumLockOff --> NumLockOn : EvNumLockPressed - NumLockOn --> NumLockOff : EvNumLockPressed - -- - [*] --> CapsLockOff - CapsLockOff --> CapsLockOn : EvCapsLockPressed - CapsLockOn --> CapsLockOff : EvCapsLockPressed - -- - [*] --> ScrollLockOff - ScrollLockOff --> ScrollLockOn : EvCapsLockPressed - ScrollLockOn --> ScrollLockOff : EvCapsLockPressed - } - state SomethingElse { - A --> B - B --> A - } - - Active --> SomethingElse - note right of SomethingElse : This is the note to the right. - - SomethingElse --> [*] - -``` - -### State diagram (beta) - -```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% -stateDiagram-v2 - [*] --> Active - - state Active { - [*] --> NumLockOff - NumLockOff --> NumLockOn : EvNumLockPressed - NumLockOn --> NumLockOff : EvNumLockPressed - -- - [*] --> CapsLockOff - CapsLockOff --> CapsLockOn : EvCapsLockPressed - CapsLockOn --> CapsLockOff : EvCapsLockPressed - -- - [*] --> ScrollLockOff - ScrollLockOff --> ScrollLockOn : EvCapsLockPressed - ScrollLockOn --> ScrollLockOff : EvCapsLockPressed - } - state SomethingElse { - A --> B - B --> A - } - - Active --> SomethingElse2 - note right of SomethingElse2 : This is the note to the right. - - SomethingElse2 --> [*] -``` - -```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% -stateDiagram-v2 - [*] --> Active - - state Active { - [*] --> NumLockOff - NumLockOff --> NumLockOn : EvNumLockPressed - NumLockOn --> NumLockOff : EvNumLockPressed - -- - [*] --> CapsLockOff - CapsLockOff --> CapsLockOn : EvCapsLockPressed - CapsLockOn --> CapsLockOff : EvCapsLockPressed - -- - [*] --> ScrollLockOff - ScrollLockOff --> ScrollLockOn : EvCapsLockPressed - ScrollLockOn --> ScrollLockOff : EvCapsLockPressed - } - state SomethingElse { - A --> B - B --> A - } - - Active --> SomethingElse2 - note right of SomethingElse2 : This is the note to the right. - - SomethingElse2 --> [*] -``` - -### Entity Relations diagram - -```mermaid-example - erDiagram - CUSTOMER }|..|{ DELIVERY-ADDRESS : has - CUSTOMER ||--o{ ORDER : places - CUSTOMER ||--o{ INVOICE : "liable for" - DELIVERY-ADDRESS ||--o{ ORDER : receives - INVOICE ||--|{ ORDER : covers - ORDER ||--|{ ORDER-ITEM : includes - PRODUCT-CATEGORY ||--|{ PRODUCT : contains - PRODUCT ||--o{ ORDER-ITEM : "ordered in" -``` - -```mermaid - erDiagram - CUSTOMER }|..|{ DELIVERY-ADDRESS : has - CUSTOMER ||--o{ ORDER : places - CUSTOMER ||--o{ INVOICE : "liable for" - DELIVERY-ADDRESS ||--o{ ORDER : receives - INVOICE ||--|{ ORDER : covers - ORDER ||--|{ ORDER-ITEM : includes - PRODUCT-CATEGORY ||--|{ PRODUCT : contains - PRODUCT ||--o{ ORDER-ITEM : "ordered in" -``` - -### User journey diagram - -```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 -``` diff --git a/docs/upgrading.md b/docs/upgrading.md deleted file mode 100644 index 884326fb77..0000000000 --- a/docs/upgrading.md +++ /dev/null @@ -1,27 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs. - -# Upgrading - -Some of the interfaces has been upgraded. - -## From version 0.4.0 to 0.5.0 - -### Initialization - -`mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below: - -#### version 0.4.0 - -```javascript -mermaid_config = { - startOnLoad: true, -}; -``` - -#### version 0.5.0 - -```javascript -mermaid.initialize({ - startOnLoad: true, -}); -``` diff --git a/package.json b/package.json index ce5b12ce4f..c027fa71fc 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "mermaid-monorepo", "private": true, - "version": "9.2.2", + "version": "9.3.0-rc1", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@7.15.0", + "packageManager": "pnpm@7.17.1", "keywords": [ "diagram", "markdown", @@ -15,23 +15,17 @@ "git graph" ], "scripts": { - "build:mermaid": "ts-node-esm --transpileOnly .vite/build.ts --mermaid", "build:vite": "ts-node-esm --transpileOnly .vite/build.ts", + "build:mermaid": "pnpm build:vite --mermaid", + "build:viz": "pnpm build:mermaid --visualize", "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly", "build:watch": "pnpm build:vite --watch", "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", - "docs:build": "ts-node-esm --transpileOnly packages/mermaid/src/docs.mts", - "docs:verify": "pnpm docs:build --verify", - "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md", "release": "pnpm build", - "lint": "eslint --cache --ignore-path .gitignore . && pnpm run lint:jison && prettier --check .", - "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .", + "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .", + "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts", "lint:jison": "ts-node-esm ./scripts/jison/lint.mts", - "vdocs:dev": "vitepress dev vdocs", - "vdocs:build": "vitepress build vdocs", - "vdocs:serve": "vitepress serve vdocs", - "postbuild": "echo 'building docs from code here soon'", "cypress": "cypress run", "cypress:open": "cypress open", "e2e": "start-server-and-test dev http://localhost:9000/ cypress", @@ -41,7 +35,6 @@ "test:coverage": "vitest --coverage", "prepublishOnly": "pnpm build && pnpm test", "prepare": "concurrently \"husky install\" \"pnpm build\"", - "postinstall": "./scripts/fixPnpmLock.sh", "pre-commit": "lint-staged" }, "repository": { @@ -61,70 +54,61 @@ ] }, "devDependencies": { - "@applitools/eyes-cypress": "^3.27.1", - "@commitlint/cli": "^17.1.2", - "@commitlint/config-conventional": "^17.1.0", - "@types/d3": "^7.4.0", - "@types/dompurify": "^2.3.4", - "@types/eslint": "^8.4.6", + "@applitools/eyes-cypress": "^3.27.6", + "@commitlint/cli": "^17.2.0", + "@commitlint/config-conventional": "^17.2.0", + "@cspell/eslint-plugin": "^6.14.2", + "@types/eslint": "^8.4.10", "@types/express": "^4.17.14", - "@types/jsdom": "^20.0.0", - "@types/lodash": "^4.14.186", + "@types/js-yaml": "^4.0.5", + "@types/jsdom": "^20.0.1", + "@types/lodash": "^4.14.188", "@types/mdast": "^3.0.10", "@types/node": "^18.11.9", "@types/prettier": "^2.7.1", - "@types/stylis": "^4.0.2", - "@types/uuid": "^8.3.4", - "@typescript-eslint/eslint-plugin": "^5.39.0", - "@typescript-eslint/parser": "^5.39.0", - "@vitest/coverage-c8": "^0.23.4", - "@vitest/ui": "^0.23.4", - "concurrently": "^7.4.0", + "@types/rollup-plugin-visualizer": "^4.2.1", + "@typescript-eslint/eslint-plugin": "^5.42.1", + "@typescript-eslint/parser": "^5.42.1", + "@vitest/coverage-c8": "^0.25.1", + "@vitest/ui": "^0.25.1", + "concurrently": "^7.5.0", "coveralls": "^3.1.1", - "cypress": "^10.0.0", + "cypress": "^10.11.0", "cypress-image-snapshot": "^4.0.1", - "documentation": "13.2.0", - "esbuild": "^0.15.10", - "eslint": "^8.24.0", + "esbuild": "^0.15.13", + "eslint": "^8.27.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-html": "^7.1.0", - "eslint-plugin-jest": "^27.1.0", - "eslint-plugin-jsdoc": "^39.3.6", + "eslint-plugin-jest": "^27.1.5", + "eslint-plugin-jsdoc": "^39.6.2", "eslint-plugin-json": "^3.1.0", + "eslint-plugin-lodash": "^7.4.0", "eslint-plugin-markdown": "^3.0.0", - "express": "^4.18.1", + "eslint-plugin-no-only-tests": "^3.1.0", + "eslint-plugin-tsdoc": "^0.2.17", + "eslint-plugin-unicorn": "^45.0.0", + "express": "^4.18.2", "globby": "^13.1.2", - "husky": "^8.0.1", - "identity-obj-proxy": "^3.0.0", - "jest": "29.x", + "husky": "^8.0.2", + "jest": "^29.3.1", "jison": "^0.4.18", - "jsdom": "^20.0.1", + "js-yaml": "^4.1.0", + "jsdom": "^20.0.2", "lint-staged": "^13.0.3", - "markdown-it": "^13.0.1", + "path-browserify": "^1.0.1", "pnpm": "^7.15.0", "prettier": "^2.7.1", "prettier-plugin-jsdoc": "^0.4.2", - "remark": "^14.0.2", "rimraf": "^3.0.2", + "rollup-plugin-visualizer": "^5.8.3", "start-server-and-test": "^1.14.0", "ts-node": "^10.9.1", "typescript": "^4.8.4", - "unist-util-flatmap": "^1.0.0", - "vite": "^3.1.4", - "vitepress": "^1.0.0-alpha.19", - "vitepress-plugin-mermaid": "^2.0.8", - "vitepress-plugin-search": "^1.0.4-alpha.11", - "vitest": "^0.23.4" + "vite": "^3.2.3", + "vitest": "^0.25.3" }, - "resolutions": { - "d3": "^7.0.0" - }, - "sideEffects": [ - "**/*.css", - "**/*.scss" - ], "volta": { - "node": "18.5.0" + "node": "18.12.1" } } diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json index 8898a66f65..8e958806a7 100644 --- a/packages/mermaid-example-diagram/package.json +++ b/packages/mermaid-example-diagram/package.json @@ -50,7 +50,7 @@ }, "dependencies": {}, "devDependencies": { - "concurrently": "^7.4.0", + "concurrently": "^7.5.0", "rimraf": "^3.0.2" }, "resolutions": { diff --git a/packages/mermaid-example-diagram/src/detector.ts b/packages/mermaid-example-diagram/src/detector.ts index 4d857ac26c..d30b99fba2 100644 --- a/packages/mermaid-example-diagram/src/detector.ts +++ b/packages/mermaid-example-diagram/src/detector.ts @@ -2,9 +2,9 @@ export const id = 'example-diagram'; /** - * Detector function that will be called by mermaid to determine if the diagram is this type of digram. + * Detector function that will be called by mermaid to determine if the diagram is this type of diagram. * - * @param txt The diagram text will be passed to the detector + * @param txt - The diagram text will be passed to the detector * @returns True if the diagram text matches a diagram of this type */ diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js index 4eaf49d5c5..0d73406778 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js +++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js @@ -16,7 +16,7 @@ export const draw = (text, id, version) => { log.debug('Rendering example diagram\n' + text, 'Conf: '); const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT; const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts index 03de59ef97..8894abdff5 100644 --- a/packages/mermaid-example-diagram/src/mermaidUtils.ts +++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts @@ -35,18 +35,19 @@ export let setupGraphViewbox: ( /** * Function called by mermaid that injects utility functions that help the diagram to be a good citizen. - * @param _log - * @param _setLogLevel - * @param _getConfig - * @param _sanitizeText - * @param _setupGraphViewbox + * + * @param _log - log from mermaid/src/diagramAPI.ts + * @param _setLogLevel - setLogLevel from mermaid/src/diagramAPI.ts + * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts + * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts + * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts */ export const injectUtils = ( _log: Record, - _setLogLevel: any, - _getConfig: any, - _sanitizeText: any, - _setupGraphViewbox: any + _setLogLevel: typeof setLogLevel, + _getConfig: typeof getConfig, + _sanitizeText: typeof sanitizeText, + _setupGraphViewbox: typeof setupGraphViewbox ) => { _log.debug('Mermaid utils injected into example-diagram'); log.trace = _log.trace; diff --git a/packages/mermaid-example-diagram/src/styles.js b/packages/mermaid-example-diagram/src/styles.js index 9ebb77ee50..02dc4db4ea 100644 --- a/packages/mermaid-example-diagram/src/styles.js +++ b/packages/mermaid-example-diagram/src/styles.js @@ -1,5 +1,3 @@ -import { darken, lighten, isDark } from 'khroma'; - const genSections = (options) => { let sections = ''; diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json index 24adb608a6..0f1a98303b 100644 --- a/packages/mermaid-mindmap/package.json +++ b/packages/mermaid-mindmap/package.json @@ -1,7 +1,7 @@ { "name": "@mermaid-js/mermaid-mindmap", - "version": "9.2.2", - "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", + "version": "9.3.0", + "description": "Mindmap diagram module for MermaidJS.", "module": "dist/mermaid-mindmap.core.mjs", "types": "dist/detector.d.ts", "type": "module", @@ -47,7 +47,7 @@ "non-layered-tidy-tree-layout": "^2.0.2" }, "devDependencies": { - "concurrently": "^7.4.0", + "concurrently": "^7.5.0", "mermaid": "workspace:*", "rimraf": "^3.0.2" }, diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts index 51f545c757..b575c201b1 100644 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ b/packages/mermaid-mindmap/src/mermaidUtils.ts @@ -1,8 +1,7 @@ -import type { MermaidConfig } from 'mermaid'; - const warning = (s: string) => { // Todo remove debug code - console.error('Log function was called before initialization', s); // eslint-disable-line + // eslint-disable-next-line no-console + console.error('Log function was called before initialization', s); }; export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; @@ -26,7 +25,7 @@ export const log: Record = { }; export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; -export let getConfig: () => MermaidConfig; +export let getConfig: () => object; export let sanitizeText: (str: string) => string; // eslint-disable @typescript-eslint/no-explicit-any export let setupGraphViewbox: ( diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid-mindmap/src/mindmap.spec.js index b9e9abf6ec..e3f018350b 100644 --- a/packages/mermaid-mindmap/src/mindmap.spec.js +++ b/packages/mermaid-mindmap/src/mindmap.spec.js @@ -172,6 +172,18 @@ root expect(mm.children.length).toEqual(0); expect(mm.type).toEqual(mindmap.yy.nodeType.BANG); }); + + it('MMP-12-a mutiple types (hexagon)', function () { + let str = `mindmap + root{{the root}} +`; + + mindmap.parse(str); + const mm = mindmap.yy.getMindmap(); + expect(mm.type).toEqual(mindmap.yy.nodeType.HEXAGON); + expect(mm.descr).toEqual('the root'); + expect(mm.children.length).toEqual(0); + }); }); describe('decorations', function () { it('MMP-13 should be possible to set an icon for the node', function () { diff --git a/packages/mermaid-mindmap/src/mindmapDb.ts b/packages/mermaid-mindmap/src/mindmapDb.js similarity index 67% rename from packages/mermaid-mindmap/src/mindmapDb.ts rename to packages/mermaid-mindmap/src/mindmapDb.js index c73019cfa8..16861cd233 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.ts +++ b/packages/mermaid-mindmap/src/mindmapDb.js @@ -1,28 +1,16 @@ -/** Created by knut on 23-07-2022. */ +/** Created by knut on 15-01-14. */ import { sanitizeText, getConfig, log } from './mermaidUtils'; -import type { DetailedError } from 'mermaid'; -interface Node { - id: number; - nodeId: string; - level: number; - descr: string; - type: number; - children: Node[]; - width: number; - padding: number; - icon?: string; - class?: string; -} - -let nodes: Node[] = []; +let nodes = []; let cnt = 0; +let elements = {}; export const clear = () => { nodes = []; cnt = 0; + elements = {}; }; -const getParent = function (level: number) { +const getParent = function (level) { for (let i = nodes.length - 1; i >= 0; i--) { if (nodes[i].level < level) { return nodes[i]; @@ -35,21 +23,31 @@ const getParent = function (level: number) { export const getMindmap = () => { return nodes.length > 0 ? nodes[0] : null; }; - -export const addNode = (level: number, id: string, descr: string, type: number) => { +export const addNode = (level, id, descr, type) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); - const padding = conf.mindmap?.padding ?? 15; - const node: Node = { + const node = { id: cnt++, nodeId: sanitizeText(id), level, descr: sanitizeText(descr), type, children: [], - width: getConfig().mindmap?.maxNodeWidth ?? 200, - padding: type === nodeType.ROUNDED_RECT || type === nodeType.RECT ? 2 * padding : padding, + 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; + } const parent = getParent(level); if (parent) { parent.children.push(node); @@ -61,10 +59,9 @@ export const addNode = (level: number, id: string, descr: string, type: number) nodes.push(node); } else { // Syntax error ... there can only bee one root - const error = new Error( + let error = new Error( 'There can be only one root. No parent could be found for ("' + node.descr + '")' ); - // @ts-ignore TODO: Add mermaid error error.hash = { text: 'branch ' + name, token: 'branch ' + name, @@ -85,9 +82,10 @@ export const nodeType = { CIRCLE: 3, CLOUD: 4, BANG: 5, + HEXAGON: 6, }; -export const getType = (startStr: string, endStr: string): number => { +export const getType = (startStr, endStr) => { log.debug('In get type', startStr, endStr); switch (startStr) { case '[': @@ -100,12 +98,18 @@ export const getType = (startStr: string, endStr: string): number => { return nodeType.CLOUD; case '))': return nodeType.BANG; + case '{{': + return nodeType.HEXAGON; default: return nodeType.DEFAULT; } }; -export const decorateNode = (decoration: { icon: string; class: string }) => { +export const setElementForId = (id, element) => { + elements[id] = element; +}; + +export const decorateNode = (decoration) => { const node = nodes[nodes.length - 1]; if (decoration && decoration.icon) { node.icon = sanitizeText(decoration.icon); @@ -115,7 +119,7 @@ export const decorateNode = (decoration: { icon: string; class: string }) => { } }; -export const type2Str = (type: number) => { +export const type2Str = (type) => { switch (type) { case nodeType.DEFAULT: return 'no-border'; @@ -129,18 +133,20 @@ export const type2Str = (type: number) => { return 'cloud'; case nodeType.BANG: return 'bang'; + case nodeType.HEXAGON: + return 'hexgon'; default: return 'no-border'; } }; -export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void; -export let parseError: ParseErrorFunction; -export const setErrorHandler = (handler: ParseErrorFunction) => { +export let parseError; +export const setErrorHandler = (handler) => { parseError = handler; }; // Expose logger to grammar export const getLogger = () => log; -export const getNodeById = (id: number): Node => nodes[id]; +export const getNodeById = (id) => nodes[id]; +export const getElementById = (id) => elements[id]; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js index 1c3add3793..9fd557e516 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid-mindmap/src/mindmapRenderer.js @@ -1,16 +1,17 @@ -/** Created by knut on 23-07-2022. */ +/** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; -import svgDraw, { getElementById, clearElementRefs } from './svgDraw'; +import svgDraw from './svgDraw'; import cytoscape from 'cytoscape'; import coseBilkent from 'cytoscape-cose-bilkent'; +import * as db from './mindmapDb'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); /** * @param {any} svg The svg element to draw the diagram onto - * @param {object} mindmap The maindmap data and hierarchy + * @param {object} mindmap The mindmap data and hierarchy * @param section * @param {object} conf The configuration object */ @@ -24,16 +25,11 @@ function drawNodes(svg, mindmap, section, conf) { } /** - * @param edgesElem - * @param mindmap - * @param parent - * @param depth - * @param section * @param edgesEl * @param cy */ function drawEdges(edgesEl, cy) { - cy?.edges().map((edge, id) => { + cy.edges().map((edge, id) => { const data = edge.data(); if (edge[0]._private.bodyBounds) { const bounds = edge[0]._private.rscratch; @@ -50,11 +46,9 @@ function drawEdges(edgesEl, cy) { } /** - * @param {any} svg The svg element to draw the diagram onto - * @param {object} mindmap The maindmap data and hierarchy - * @param section + * @param mindmap The mindmap data and hierarchy * @param cy - * @param {object} conf The configuration object + * @param conf The configuration object * @param level */ function addNodes(mindmap, cy, conf, level) { @@ -95,15 +89,9 @@ function addNodes(mindmap, cy, conf, level) { /** * @param node * @param conf - * @param cy */ function layoutMindmap(node, conf) { return new Promise((resolve) => { - // if (node.children.length === 0) { - // resolve(node); - // return; - // } - // Add temporary render element const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); const cy = cytoscape({ @@ -121,7 +109,7 @@ function layoutMindmap(node, conf) { renderEl.remove(); addNodes(node, cy, conf, 0); - // Make cytoscape care about the dimensisions of the nodes + // Make cytoscape care about the dimensions of the nodes cy.nodes().forEach(function (n) { n.layoutDimensions = () => { const data = n.data(); @@ -143,10 +131,7 @@ function layoutMindmap(node, conf) { }); } /** - * @param node * @param cy - * @param positionedMindmap - * @param conf */ function positionNodes(cy) { cy.nodes().map((node, id) => { @@ -154,7 +139,7 @@ function positionNodes(cy) { data.x = node.position().x; data.y = node.position().y; svgDraw.positionNode(data); - const el = getElementById(data.nodeId); + const el = db.getElementById(data.nodeId); log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data); el.attr( 'transform', @@ -178,14 +163,13 @@ export const draw = async (text, id, version, diagObj) => { // This is done only for throwing the error if the text is not valid. diagObj.db.clear(); - clearElementRefs(); // Parse the graph definition diagObj.parser.parse(text); log.debug('Renering info diagram\n' + text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid-mindmap/src/parser/mindmap.jison index bd008db7f2..a96ee62614 100644 --- a/packages/mermaid-mindmap/src/parser/mindmap.jison +++ b/packages/mermaid-mindmap/src/parser/mindmap.jison @@ -33,11 +33,12 @@ "))" { yy.getLogger().trace('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; } ")" { yy.getLogger().trace('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; } "((" { this.begin('NODE');return 'NODE_DSTART'; } +"{{" { this.begin('NODE');return 'NODE_DSTART'; } "(" { this.begin('NODE');return 'NODE_DSTART'; } "[" { this.begin('NODE');return 'NODE_DSTART'; } [\s]+ return 'SPACELIST' /* skip all whitespace */ ; // !(-\() return 'NODE_ID'; -[^\(\[\n\-\)]+ return 'NODE_ID'; +[^\(\[\n\-\)\{\}]+ return 'NODE_ID'; <> return 'EOF'; ["] { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");} [^"]+ { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";} @@ -45,11 +46,12 @@ [\)]\) {this.popState();yy.getLogger().trace('node end ))');return "NODE_DEND";} [\)] {this.popState();yy.getLogger().trace('node end )');return "NODE_DEND";} [\]] {this.popState();yy.getLogger().trace('node end ...',yytext);return "NODE_DEND";} +"}}" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} "(-" {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";} "-)" {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";} "((" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} -"(" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} -[^\)\]\(]+ { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';} +"(" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} +[^\)\]\(\}]+ { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';} .+(?!\(\() { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';} // [\[] return 'NODE_START'; // .+ return 'TXT' ; diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js index a409aa4e54..986a04514d 100644 --- a/packages/mermaid-mindmap/src/styles.js +++ b/packages/mermaid-mindmap/src/styles.js @@ -17,7 +17,7 @@ const genSections = (options) => { sections += ` .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${ i - 1 - } path { + } polygon, .section-${i - 1} path { fill: ${options['cScale' + i]}; } .section-${i - 1} text { @@ -55,7 +55,7 @@ const getStyles = (options) => stroke-width: 3; } ${genSections(options)} - .section-root rect, .section-root path, .section-root circle { + .section-root rect, .section-root path, .section-root circle, .section-root polygon { fill: ${options.git0}; } .section-root text { diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js index 176f8e61a6..d4f57f1f17 100644 --- a/packages/mermaid-mindmap/src/svgDraw.js +++ b/packages/mermaid-mindmap/src/svgDraw.js @@ -145,6 +145,45 @@ const circleBkg = function (elem, node) { .attr('class', 'node-bkg node-' + db.type2Str(node.type)) .attr('r', node.width / 2); }; + +/** + * + * @param parent + * @param w + * @param h + * @param points + * @param node + */ +function insertPolygonShape(parent, w, h, points, node) { + return parent + .insert('polygon', ':first-child') + .attr( + 'points', + points + .map(function (d) { + return d.x + ',' + d.y; + }) + .join(' ') + ) + .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')'); +} + +const hexagonBkg = function (elem, node) { + const h = node.height; + const f = 4; + const m = h / f; + const w = node.width - node.padding + 2 * m; + 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 shapeSvg = insertPolygonShape(elem, w, h, points, node); +}; + const roundedRectBkg = function (elem, node) { elem .append('rect') @@ -159,7 +198,6 @@ const roundedRectBkg = function (elem, node) { /** * @param {object} elem The D3 dom element in which the node is to be added * @param {object} node The node to be added - * @param section * @param fullSection * @param {object} conf The configuration object * @returns {number} The height nodes dom element @@ -253,13 +291,16 @@ export const drawNode = function (elem, node, fullSection, conf) { case db.nodeType.BANG: bangBkg(bkgElem, node, section, conf); break; + case db.nodeType.HEXAGON: + hexagonBkg(bkgElem, node, section, 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 + ')'); // } - setElementById(node.id, nodeElem); + db.setElementForId(node.id, nodeElem); return node.height; }; @@ -286,7 +327,7 @@ export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, ful }; export const positionNode = function (node) { - const nodeElem = getElementById(node.id); + const nodeElem = db.getElementById(node.id); const x = node.x || 0; const y = node.y || 0; @@ -294,18 +335,4 @@ export const positionNode = function (node) { nodeElem.attr('transform', 'translate(' + x + ',' + y + ')'); }; -let elements = {}; - -const setElementById = (id, element) => { - elements[id] = element; -}; - -export const getElementById = (id) => { - return elements[id]; -}; - -export const clearElementRefs = () => { - elements = {}; -}; - export default { drawNode, positionNode, drawEdge }; diff --git a/packages/mermaid/.gitignore b/packages/mermaid/.gitignore new file mode 100644 index 0000000000..1a961ffe08 --- /dev/null +++ b/packages/mermaid/.gitignore @@ -0,0 +1,2 @@ +src/vitepress +src/docs/config/setup \ No newline at end of file diff --git a/packages/mermaid/.lintstagedrc.mjs b/packages/mermaid/.lintstagedrc.mjs new file mode 100644 index 0000000000..fe79ad2546 --- /dev/null +++ b/packages/mermaid/.lintstagedrc.mjs @@ -0,0 +1,7 @@ +import baseConfig from '../../.lintstagedrc.mjs'; +export default { + ...baseConfig, + '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'], +}; diff --git a/packages/mermaid/README.md b/packages/mermaid/README.md index 90ae1ad4cd..91c2d16401 100644 --- a/packages/mermaid/README.md +++ b/packages/mermaid/README.md @@ -1,23 +1,6 @@ # mermaid -[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) - -# Whoa, what's going on here? - -We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will: - -- Make it possible to select which diagrams to include on your site -- Open up for lazy loading -- Make it possible to add diagrams from outside of the Mermaid repository -- Separate the release flow between different diagrams and the Mermaid core - -As such be aware of some changes.. - -# We use pnpm now - -# The source code has moved - -It is now located in the src folder for each respective package located as subfolders in packages. +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) English | [简体中文](./README.zh-CN.md) diff --git a/packages/mermaid/README.zh-CN.md b/packages/mermaid/README.zh-CN.md index fcaa1f5234..0ccef27e48 100644 --- a/packages/mermaid/README.zh-CN.md +++ b/packages/mermaid/README.zh-CN.md @@ -1,6 +1,6 @@ # mermaid -[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) [English](./README.md) | 简体中文 diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index f8ff463250..24d17fd36e 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,7 +1,7 @@ { "name": "mermaid", - "version": "9.2.3-rc.1", - "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", + "version": "9.3.0", + "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "./dist/mermaid.min.js", "module": "./dist/mermaid.core.mjs", "types": "./dist/mermaid.d.ts", @@ -24,9 +24,14 @@ ], "scripts": { "clean": "rimraf dist", - "docs:build": "ts-node-esm src/docs.mts", - "docs:verify": "pnpm docs:build --verify", - "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md", + "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 && vitepress build src/vitepress", + "docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"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\"", "release": "pnpm build", "prepublishOnly": "pnpm -w run build" }, @@ -49,57 +54,47 @@ "dependencies": { "@braintree/sanitize-url": "^6.0.0", "d3": "^7.0.0", - "dagre": "^0.8.5", - "dagre-d3": "^0.6.4", - "dompurify": "2.4.0", - "fast-clone": "^1.5.13", - "graphlib": "^2.1.8", + "dagre-d3-es": "7.0.6", + "dompurify": "2.4.1", "khroma": "^2.0.0", - "lodash": "^4.17.21", + "lodash-es": "^4.17.21", "moment-mini": "^2.24.0", "non-layered-tidy-tree-layout": "^2.0.2", "stylis": "^4.1.2", "uuid": "^9.0.0" }, "devDependencies": { - "@applitools/eyes-cypress": "^3.25.7", - "@commitlint/cli": "^17.1.2", - "@commitlint/config-conventional": "^17.0.0", "@types/d3": "^7.4.0", - "@types/dompurify": "^2.3.4", - "@types/eslint": "^8.4.6", - "@types/express": "^4.17.13", - "@types/jsdom": "^20.0.0", - "@types/lodash": "^4.14.185", - "@types/prettier": "^2.7.0", + "@types/dompurify": "^2.4.0", + "@types/jsdom": "^20.0.1", + "@types/lodash-es": "^4.17.6", + "@types/micromatch": "^4.0.2", + "@types/prettier": "^2.7.1", "@types/stylis": "^4.0.2", "@types/uuid": "^8.3.4", - "@typescript-eslint/eslint-plugin": "^5.37.0", - "@typescript-eslint/parser": "^5.37.0", - "concurrently": "^7.4.0", + "@typescript-eslint/eslint-plugin": "^5.42.1", + "@typescript-eslint/parser": "^5.42.1", + "chokidar": "^3.5.3", + "concurrently": "^7.5.0", "coveralls": "^3.1.1", - "documentation": "13.2.0", - "eslint": "^8.23.1", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-cypress": "^2.12.1", - "eslint-plugin-html": "^7.1.0", - "eslint-plugin-jest": "^27.0.4", - "eslint-plugin-jsdoc": "^39.3.6", - "eslint-plugin-json": "^3.1.0", - "eslint-plugin-markdown": "^3.0.0", - "identity-obj-proxy": "^3.0.0", + "cspell": "^6.14.3", + "globby": "^13.1.2", "jison": "^0.4.18", - "js-base64": "3.7.2", - "jsdom": "^20.0.0", + "js-base64": "^3.7.2", + "jsdom": "^20.0.2", + "micromatch": "^4.0.5", + "moment": "^2.29.4", + "path-browserify": "^1.0.1", + "prettier": "^2.7.1", "remark": "^14.0.2", "rimraf": "^3.0.2", - "start-server-and-test": "^1.12.6", - "ts-node": "^10.9.1", - "typescript": "^4.8.3", - "unist-util-flatmap": "^1.0.0" - }, - "resolutions": { - "d3": "^7.0.0" + "start-server-and-test": "^1.14.0", + "typedoc": "^0.23.18", + "typedoc-plugin-markdown": "^3.13.6", + "typescript": "^4.8.4", + "unist-util-flatmap": "^1.0.0", + "vitepress": "^1.0.0-alpha.28", + "vitepress-plugin-search": "^1.0.4-alpha.15" }, "files": [ "dist", diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index ebba8c9e37..83412e4aac 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -1,16 +1,19 @@ import * as configApi from './config'; import { log } from './logger'; -import { DiagramNotFoundError, getDiagram, registerDiagram } from './diagram-api/diagramAPI'; +import { getDiagram, registerDiagram } from './diagram-api/diagramAPI'; import { detectType, getDiagramLoader } from './diagram-api/detectType'; -import { isDetailedError } from './utils'; +import { extractFrontMatter } from './diagram-api/frontmatter'; +import { isDetailedError, type DetailedError } from './utils'; + +export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void; + export class Diagram { type = 'graph'; parser; renderer; db; private detectTypeFailed = false; - // eslint-disable-next-line @typescript-eslint/ban-types - constructor(public txt: string, parseError?: Function) { + constructor(public txt: string, parseError?: ParseErrorFunction) { const cnf = configApi.getConfig(); this.txt = txt; try { @@ -27,6 +30,16 @@ export class Diagram { this.db.clear?.(); this.renderer = diagram.renderer; this.parser = diagram.parser; + const originalParse = this.parser.parse.bind(this.parser); + // Wrap the jison parse() method to handle extracting frontmatter. + // + // This can't be done in this.parse() because some code + // directly calls diagram.parser.parse(), bypassing this.parse(). + // + // Similarly, we can't do this in getDiagramFromText() because some code + // calls diagram.db.clear(), which would reset anything set by + // extractFrontMatter(). + this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db)); this.parser.parser.yy = this.db; if (diagram.init) { diagram.init(cnf); @@ -37,14 +50,13 @@ export class Diagram { this.parse(this.txt, parseError); } - // eslint-disable-next-line @typescript-eslint/ban-types - parse(text: string, parseError?: Function): boolean { + parse(text: string, parseError?: ParseErrorFunction): boolean { if (this.detectTypeFailed) { return false; } try { text = text + '\n'; - this.db.clear(); + this.db.clear?.(); this.parser.parse(text); return true; } catch (error) { @@ -53,23 +65,24 @@ export class Diagram { return false; } - // eslint-disable-next-line @typescript-eslint/ban-types - handleError(error: unknown, parseError?: Function) { - // Is this the correct way to access mermiad's parseError() + handleError(error: unknown, parseError?: ParseErrorFunction) { + // Is this the correct way to access mermaid's parseError() // method ? (or global.mermaid.parseError()) ? - if (parseError) { - if (isDetailedError(error)) { - // handle case where error string and hash were - // wrapped in object like`const error = { str, hash };` - parseError(error.str, error.hash); - } else { - // assume it is just error string and pass it on - parseError(error); - } - } else { + + if (parseError === undefined) { // No mermaid.parseError() handler defined, so re-throw it throw error; } + + if (isDetailedError(error)) { + // Handle case where error string and hash were + // wrapped in object like`const error = { str, hash };` + parseError(error.str, error.hash); + return; + } + + // Otherwise, assume it is just an error string and pass it on + parseError(error as string); } getParser() { @@ -83,22 +96,16 @@ export class Diagram { export const getDiagramFromText = ( txt: string, - // eslint-disable-next-line @typescript-eslint/ban-types - parseError?: Function + parseError?: ParseErrorFunction ): Diagram | Promise => { const type = detectType(txt, configApi.getConfig()); try { // Trying to find the diagram getDiagram(type); - return new Diagram(txt, parseError); } catch (error) { - if (!(error instanceof DiagramNotFoundError)) { - log.error(error); - throw error; - } const loader = getDiagramLoader(type); if (!loader) { - throw new Error(`Loader for ${type} not found.`); + throw new Error(`Diagram ${type} not found.`); } // TODO: Uncomment for v10 // // Diagram not available, loading it @@ -110,6 +117,7 @@ export const getDiagramFromText = ( return new Diagram(txt, parseError); }); } + return new Diagram(txt, parseError); }; export default Diagram; diff --git a/packages/mermaid/src/__mocks__/mermaidAPI.ts b/packages/mermaid/src/__mocks__/mermaidAPI.ts index 6eccaac488..12c1652bcf 100644 --- a/packages/mermaid/src/__mocks__/mermaidAPI.ts +++ b/packages/mermaid/src/__mocks__/mermaidAPI.ts @@ -6,17 +6,13 @@ import * as configApi from '../config'; import { vi } from 'vitest'; import { addDiagrams } from '../diagram-api/diagram-orchestration'; -import Diagram from '../Diagram'; +import Diagram, { type ParseErrorFunction } from '../Diagram'; // Normally, we could just do the following to get the original `parse()` // implementation, however, requireActual returns a promise and it's not documented how to use withing mock file. -/** - * @param text - * @param parseError - */ -// eslint-disable-next-line @typescript-eslint/ban-types -function parse(text: string, parseError?: Function): boolean { +/** {@inheritDoc mermaidAPI.parse} */ +function parse(text: string, parseError?: ParseErrorFunction): boolean { addDiagrams(); const diagram = new Diagram(text, parseError); return diagram.parse(text, parseError); diff --git a/packages/mermaid/src/accessibility.js b/packages/mermaid/src/accessibility.js deleted file mode 100644 index c59ba270c4..0000000000 --- a/packages/mermaid/src/accessibility.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * This method will add a basic title and description element to a chart. The yy parser will need to - * respond to getAccTitle and getAccDescription, where the title is the title element on the chart, - * which is generally not displayed and the accDescription is the description element on the chart, - * which is never displayed. - * - * The following charts display their title as a visual and accessibility element: gantt - * - * @param yy_parser - * @param svg - * @param id - */ -export default function addSVGAccessibilityFields(yy_parser, svg, id) { - if (typeof svg.insert === 'undefined') { - return; - } - - let title_string = yy_parser.getAccTitle(); - let description = yy_parser.getAccDescription(); - svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id); - svg - .insert('desc', ':first-child') - .attr('id', 'chart-desc-' + id) - .text(description); - svg - .insert('title', ':first-child') - .attr('id', 'chart-title-' + id) - .text(title_string); -} diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts new file mode 100644 index 0000000000..c633d0e15e --- /dev/null +++ b/packages/mermaid/src/accessibility.spec.ts @@ -0,0 +1,219 @@ +import { MockedD3 } from './tests/MockedD3'; +import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility'; +import { D3Element } from './mermaidAPI'; + +describe('accessibility', () => { + const fauxSvgNode = new MockedD3(); + + describe('setA11yDiagramInfo', () => { + it('sets the aria-roledescription to the diagram type', () => { + // @ts-ignore Required to easily handle the d3 select types + const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); + setA11yDiagramInfo(fauxSvgNode, 'flowchart'); + expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart'); + }); + + it('does nothing if the diagram type is empty', () => { + // @ts-ignore Required to easily handle the d3 select types + const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); + setA11yDiagramInfo(fauxSvgNode, ''); + expect(svgAttrSpy).not.toHaveBeenCalled(); + }); + }); + + describe('addSVGa11yTitleDescription', () => { + const givenId = 'theBaseId'; + + describe('with the given svg d3 object:', () => { + it('does nothing if there is no insert defined', () => { + const noInsertSvg = { + attr: vi.fn(), + }; + const noInsertAttrSpy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg); + addSVGa11yTitleDescription(noInsertSvg, 'some title', 'some desc', givenId); + expect(noInsertAttrSpy).not.toHaveBeenCalled(); + }); + + // ---------------- + // Convenience functions to DRY up the spec + + function expectAriaLabelledByIsTitleId( + svgD3Node: D3Element, + title: string | null | undefined, + desc: string | null | undefined, + givenId: string + ) { + // @ts-ignore Required to easily handle the d3 select types + const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); + addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); + expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`); + } + + function expectAriaDescribedByIsDescId( + svgD3Node: D3Element, + title: string | null | undefined, + desc: string | null | undefined, + givenId: string + ) { + // @ts-ignore Required to easily handle the d3 select types + const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); + addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); + expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`); + } + + function a11yTitleTagInserted( + svgD3Node: D3Element, + title: string | null | undefined, + desc: string | null | undefined, + givenId: string, + callNumber: number + ) { + a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title); + } + + function a11yDescTagInserted( + svgD3Node: D3Element, + title: string | null | undefined, + desc: string | null | undefined, + givenId: string, + callNumber: number + ) { + a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc); + } + + function a11yTagInserted( + svgD3Node: D3Element, + title: string | null | undefined, + desc: string | null | 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 + 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(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`); + expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText); + } + // ---------------- + + describe('given an a11y title', () => { + const a11yTitle = 'a11y title'; + + describe('given an a11y description', () => { + const a11yDesc = 'a11y description'; + + it('sets aria-labelledby to the title id inserted as a child', () => { + expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + }); + + it('sets aria-describedby to the description id inserted as a child', () => { + expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + }); + + it('inserts a 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', () => { + a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); + }); + }); + + describe(`no a11y description`, () => { + const a11yDesc = undefined; + + it('sets aria-labelledby to the title id inserted as a child', () => { + expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + }); + + it('no aria-describedby is set', () => { + // @ts-ignore Required to easily handle the d3 select types + 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', () => { + a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); + }); + + it('no description tag is inserted', () => { + const fauxTitle = new MockedD3(); + const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); + addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); + expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child'); + }); + }); + }); + + describe('no a11y title', () => { + const a11yTitle = undefined; + + describe('given an a11y description', () => { + const a11yDesc = 'a11y description'; + + it('no aria-labelledby is set', () => { + // @ts-ignore Required to easily handle the d3 select types + 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); + addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); + expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child'); + }); + + it('sets aria-describedby to the description id inserted as a child', () => { + expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + }); + + it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => { + a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); + }); + }); + + describe('no a11y description', () => { + const a11yDesc = undefined; + + it('no aria-labelledby is set', () => { + // @ts-ignore Required to easily handle the d3 select types + 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 + 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); + addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); + expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child'); + }); + + it('no description tag inserted', () => { + const fauxDesc = new MockedD3(); + const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc); + addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); + expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child'); + }); + }); + }); + }); + }); +}); diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts new file mode 100644 index 0000000000..ed28ff6893 --- /dev/null +++ b/packages/mermaid/src/accessibility.ts @@ -0,0 +1,55 @@ +/** + * Accessibility (a11y) functions, types, helpers + * + */ +import { D3Element } from './mermaidAPI'; + +import isEmpty from 'lodash-es/isEmpty.js'; + +/** + * Add aria-roledescription to the svg element to the diagramType + * + * @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) { + if (!isEmpty(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 + * + * @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 baseId - id used to construct the a11y title and description id + */ +export function addSVGa11yTitleDescription( + svg: D3Element, + a11yTitle: string | null | undefined, + a11yDesc: string | null | undefined, + baseId: string +) { + 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; + } +} diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.js index eff568d3e6..898481c30a 100644 --- a/packages/mermaid/src/assignWithDepth.js +++ b/packages/mermaid/src/assignWithDepth.js @@ -32,20 +32,20 @@ const assignWithDepth = function (dst, src, config) { return dst; } else if (Array.isArray(src) && Array.isArray(dst)) { src.forEach((s) => { - if (dst.indexOf(s) === -1) { + if (!dst.includes(s)) { dst.push(s); } }); return dst; } - if (typeof dst === 'undefined' || depth <= 0) { + if (dst === undefined || depth <= 0) { if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') { return Object.assign(dst, src); } else { return src; } } - if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') { + if (src !== undefined && typeof dst === 'object' && typeof src === 'object') { Object.keys(src).forEach((key) => { if ( typeof src[key] === 'object' && diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 791d5ee81f..8750c8fa59 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -18,8 +18,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[]) // Join directives let sumOfDirectives: MermaidConfig = {}; - for (let i = 0; i < _directives.length; i++) { - const d = _directives[i]; + for (const d of _directives) { sanitize(d); // Apply the data from the directive where the the overrides the themeVariables @@ -57,7 +56,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[]) * function _Default value: At default, will mirror Global Config_ * * @param conf - The base currentConfig to use as siteConfig - * @returns {object} - The siteConfig + * @returns The new siteConfig */ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => { siteConfig = assignWithDepth({}, defaultConfig); @@ -92,7 +91,7 @@ export const updateSiteConfig = (conf: MermaidConfig): MermaidConfig => { * * **Notes**: Returns **any** values in siteConfig. * - * @returns {object} - The siteConfig + * @returns The siteConfig */ export const getSiteConfig = (): MermaidConfig => { return assignWithDepth({}, siteConfig); @@ -108,8 +107,8 @@ export const getSiteConfig = (): MermaidConfig => { * keys. Any values found in conf with key found in siteConfig.secure will be replaced with the * corresponding siteConfig value. * - * @param {any} conf - The potential currentConfig - * @returns {any} - The currentConfig merged with the sanitized conf + * @param conf - The potential currentConfig + * @returns The currentConfig merged with the sanitized conf */ export const setConfig = (conf: MermaidConfig): MermaidConfig => { // sanitize(conf); @@ -133,7 +132,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => { * * **Notes**: Returns **any** the currentConfig * - * @returns {any} - The currentConfig + * @returns The currentConfig */ export const getConfig = (): MermaidConfig => { return assignWithDepth({}, currentConfig); @@ -148,12 +147,12 @@ export const getConfig = (): MermaidConfig => { * Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies * options in-place * - * @param {any} options - The potential setConfig parameter + * @param options - The potential setConfig parameter */ export const sanitize = (options: any) => { // Checking that options are not in the list of excluded options ['secure', ...(siteConfig.secure ?? [])].forEach((key) => { - if (typeof options[key] !== 'undefined') { + if (options[key] !== undefined) { // DO NOT attempt to print options[key] within `${}` as a malicious script // can exploit the logger's attempt to stringify the value and execute arbitrary code log.debug(`Denied attempt to modify a secure key ${key}`, options[key]); @@ -168,16 +167,15 @@ export const sanitize = (options: any) => { } }); // Check that there no attempts of xss, there should be no tags at all in the directive - // blocking data urls as base64 urls can contain svgs with inline script tags + // blocking data urls as base64 urls can contain svg's with inline script tags Object.keys(options).forEach((key) => { - if (typeof options[key] === 'string') { - if ( - options[key].indexOf('<') > -1 || - options[key].indexOf('>') > -1 || - options[key].indexOf('url(data:') > -1 - ) { - delete options[key]; - } + if ( + typeof options[key] === 'string' && + (options[key].includes('<') || + options[key].includes('>') || + options[key].includes('url(data:')) + ) { + delete options[key]; } if (typeof options[key] === 'object') { sanitize(options[key]); @@ -188,7 +186,7 @@ export const sanitize = (options: any) => { /** * Pushes in a directive to the configuration * - * @param {object} directive The directive to push in + * @param directive - The directive to push in */ export const addDirective = (directive: any) => { if (directive.fontFamily) { @@ -219,7 +217,8 @@ export const addDirective = (directive: any) => { * * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`) * - * @param config + * @param config - base set of values, which currentConfig could be **reset** to. + * Defaults to the current siteConfig (e.g returned by {@link getSiteConfig}). */ export const reset = (config = siteConfig): void => { // Replace current config with siteConfig diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 07ca023118..ff199ca8b1 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -189,6 +189,7 @@ export interface C4DiagramConfig extends BaseDiagramConfig { } export interface GitGraphDiagramConfig extends BaseDiagramConfig { + titleTopMargin?: number; diagramPadding?: number; nodeLabel?: NodeLabel; mainBranchName?: string; @@ -227,6 +228,7 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig { export type PieDiagramConfig = BaseDiagramConfig; export interface ErDiagramConfig extends BaseDiagramConfig { + titleTopMargin?: number; diagramPadding?: number; layoutDirection?: string; minEntityWidth?: number; @@ -238,6 +240,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig { } export interface StateDiagramConfig extends BaseDiagramConfig { + titleTopMargin?: number; arrowMarkerAbsolute?: boolean; dividerMargin?: number; sizeUnit?: number; @@ -258,6 +261,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig { } export interface ClassDiagramConfig extends BaseDiagramConfig { + titleTopMargin?: number; arrowMarkerAbsolute?: boolean; dividerMargin?: number; padding?: number; @@ -300,6 +304,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { sectionFontSize?: string | number; numberSectionStyles?: number; axisFormat?: string; + tickInterval?: string; topAxis?: boolean; } @@ -342,6 +347,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { } export interface FlowchartDiagramConfig extends BaseDiagramConfig { + titleTopMargin?: number; arrowMarkerAbsolute?: boolean; diagramPadding?: number; htmlLabels?: boolean; diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js index 40729deadc..57c3ff5138 100644 --- a/packages/mermaid/src/dagre-wrapper/clusters.js +++ b/packages/mermaid/src/dagre-wrapper/clusters.js @@ -59,11 +59,9 @@ const rect = (parent, node) => { // Center the label label.attr( 'transform', - 'translate(' + - (node.x - bbox.width / 2) + - ', ' + - (node.y - node.height / 2 + node.padding / 3) + - ')' + // This puts the labal on top of the box instead of inside it + // 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')' + 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')' ); const rectBox = rect.node().getBBox(); diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js index ba0ce4a5d1..af5032096b 100644 --- a/packages/mermaid/src/dagre-wrapper/createLabel.js +++ b/packages/mermaid/src/dagre-wrapper/createLabel.js @@ -44,7 +44,9 @@ function addHtmlLabel(node) { const createLabel = (_vertexText, style, isTitle, isNode) => { let vertexText = _vertexText || ''; - if (typeof vertexText === 'object') vertexText = vertexText[0]; + if (typeof vertexText === 'object') { + vertexText = vertexText[0]; + } if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? vertexText = vertexText.replace(/\\n|\n/g, '
'); @@ -52,7 +54,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => { const node = { isNode, label: decodeEntities(vertexText).replace( - /fa[lrsb]?:fa-[\w-]+/g, + /fa[blrs]?:fa-[\w-]+/g, (s) => `` ), labelStyle: style.replace('fill:', 'color:'), @@ -72,7 +74,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => { rows = []; } - for (let j = 0; j < rows.length; j++) { + for (const row of rows) { const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); tspan.setAttribute('dy', '1em'); @@ -82,7 +84,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => { } else { tspan.setAttribute('class', 'row'); } - tspan.textContent = rows[j].trim(); + tspan.textContent = row.trim(); svgLabel.appendChild(tspan); } return svgLabel; diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 6a75b8b28d..bb22cee838 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -130,9 +130,21 @@ export const positionEdgeLabel = (edge, paths) => { if (path) { // // debugger; const pos = utils.calcLabelPosition(path); - log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78'); - // x = pos.x; - // y = pos.y; + log.info( + 'Moving label ' + edge.label + ' from (', + x, + ',', + y, + ') to (', + pos.x, + ',', + pos.y, + ') abc78' + ); + if (paths.updatedPath) { + x = pos.x; + y = pos.y; + } } el.attr('transform', 'translate(' + x + ', ' + y + ')'); } @@ -310,7 +322,7 @@ const cutPathAtIntersect = (_points, boundryNode) => { // const node = clusterDb[edge.toCluster].node; log.info('abc88 checking point', point, boundryNode); - // check if point is inside the boundry rect + // check if point is inside the boundary rect if (!outsideNode(boundryNode, point) && !isInside) { // First point inside the rect found // Calc the intersection coord between the point anf the last point outside the rect @@ -324,7 +336,7 @@ const cutPathAtIntersect = (_points, boundryNode) => { pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y); }); // // if (!pointPresent) { - if (!points.find((e) => e.x === inter.x && e.y === inter.y)) { + if (!points.some((e) => e.x === inter.x && e.y === inter.y)) { points.push(inter); } else { log.warn('abc88 no intersect', inter, points); @@ -336,7 +348,9 @@ const cutPathAtIntersect = (_points, boundryNode) => { log.warn('abc88 outside', point, lastPointOutside); lastPointOutside = point; // points.push(point); - if (!isInside) points.push(point); + if (!isInside) { + points.push(point); + } } }); log.warn('abc88 returning points', points); @@ -429,7 +443,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph }) .curve(curve); - // Contruct stroke classes based on properties + // Construct stroke classes based on properties let strokeClasses; switch (edge.thickness) { case 'normal': @@ -438,9 +452,6 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph case 'thick': strokeClasses = 'edge-thickness-thick'; break; - case 'invisible': - strokeClasses = 'edge-thickness-thick'; - break; default: strokeClasses = ''; } @@ -464,7 +475,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph .attr('style', edge.style); // DEBUG code, adds a red circle at each edge coordinate - // edge.points.forEach(point => { + // edge.points.forEach((point) => { // elem // .append('circle') // .style('stroke', 'red') diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js index 72652ff8c5..ce3ef6014a 100644 --- a/packages/mermaid/src/dagre-wrapper/index.js +++ b/packages/mermaid/src/dagre-wrapper/index.js @@ -1,5 +1,5 @@ -import dagre from 'dagre'; -import graphlib from 'graphlib'; +import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; +import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js'; import insertMarkers from './markers'; import { updateNodeBounds } from './shapes/util'; import { @@ -15,7 +15,7 @@ import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } f import { log } from '../logger'; const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { - log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster); + log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster); const dir = graph.graph().rankdir; log.trace('Dir in recursive render - dir:', dir); @@ -37,7 +37,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { // to the abstract node and is later used by dagre for the layout graph.nodes().forEach(function (v) { const node = graph.node(v); - if (typeof parentCluster !== 'undefined') { + if (parentCluster !== undefined) { const data = JSON.parse(JSON.stringify(parentCluster.clusterData)); // data.clusterPositioning = true; log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster); @@ -95,8 +95,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { log.info('### Layout ###'); log.info('#############################################'); log.info(graph); - dagre.layout(graph); - log.info('Graph after layout:', graphlib.json.write(graph)); + dagreLayout(graph); + log.info('Graph after layout:', graphlibJson.write(graph)); // Move the nodes to the correct place let diff = 0; sortNodesByHierarchy(graph).forEach(function (v) { @@ -153,10 +153,10 @@ export const render = (elem, graph, markers, diagramtype, id) => { clearClusters(); clearGraphlib(); - log.warn('Graph at first:', graphlib.json.write(graph)); + log.warn('Graph at first:', graphlibJson.write(graph)); adjustClustersAndEdges(graph); - log.warn('Graph after:', graphlib.json.write(graph)); - // log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph)); + log.warn('Graph after:', graphlibJson.write(graph)); + // log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph)); recursiveRender(elem, graph, diagramtype); }; diff --git a/packages/mermaid/src/dagre-wrapper/intersect/index.js b/packages/mermaid/src/dagre-wrapper/intersect/index.js index 9acff666c2..e33b6dd510 100644 --- a/packages/mermaid/src/dagre-wrapper/intersect/index.js +++ b/packages/mermaid/src/dagre-wrapper/intersect/index.js @@ -1,5 +1,5 @@ /* - * Borrowed with love from from dagrge-d3. Many thanks to cpettitt! + * Borrowed with love from from dagre-d3. Many thanks to cpettitt! */ import node from './intersect-node.js'; diff --git a/packages/mermaid/src/dagre-wrapper/intersect/intersect-line.js b/packages/mermaid/src/dagre-wrapper/intersect/intersect-line.js index f9ef0b15f8..e97ae6f0dc 100644 --- a/packages/mermaid/src/dagre-wrapper/intersect/intersect-line.js +++ b/packages/mermaid/src/dagre-wrapper/intersect/intersect-line.js @@ -28,7 +28,7 @@ function intersectLine(p1, p2, q1, q2) { // Check signs of r3 and r4. If both point 3 and point 4 lie on // same side of line 1, the line segments do not intersect. if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) { - return /*DONT_INTERSECT*/; + return /*DON'T_INTERSECT*/; } // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0 @@ -44,7 +44,7 @@ function intersectLine(p1, p2, q1, q2) { // on same side of second line segment, the line segments do // not intersect. if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) { - return /*DONT_INTERSECT*/; + return /*DON'T_INTERSECT*/; } // Line segments intersect: compute intersection point. diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js index 4c283b12f1..875ac4deff 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js @@ -1,50 +1,50 @@ /** Decorates with functions required by mermaids dagre-wrapper. */ import { log } from '../logger'; -import graphlib from 'graphlib'; +import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; export let clusterDb = {}; -let decendants = {}; +let descendants = {}; let parents = {}; export const clear = () => { - decendants = {}; + descendants = {}; parents = {}; clusterDb = {}; }; -const isDecendant = (id, ancenstorId) => { +const isDescendant = (id, ancenstorId) => { // if (id === ancenstorId) return true; - log.trace( - 'In isDecendant', - ancenstorId, - ' ', - id, - ' = ', - decendants[ancenstorId].indexOf(id) >= 0 - ); - if (decendants[ancenstorId].indexOf(id) >= 0) return true; + log.trace('In isDecendant', ancenstorId, ' ', id, ' = ', descendants[ancenstorId].includes(id)); + if (descendants[ancenstorId].includes(id)) { + return true; + } return false; }; const edgeInCluster = (edge, clusterId) => { - log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]); + log.info('Decendants of ', clusterId, ' is ', descendants[clusterId]); log.info('Edge is ', edge); // Edges to/from the cluster is not in the cluster, they are in the parent - if (edge.v === clusterId) return false; - if (edge.w === clusterId) return false; + if (edge.v === clusterId) { + return false; + } + if (edge.w === clusterId) { + return false; + } - if (!decendants[clusterId]) { + if (!descendants[clusterId]) { log.debug('Tilt, ', clusterId, ',not in decendants'); return false; } - if (decendants[clusterId].indexOf(edge.v) >= 0) return true; - if (isDecendant(edge.v, clusterId)) return true; - if (isDecendant(edge.w, clusterId)) return true; - if (decendants[clusterId].indexOf(edge.w) >= 0) return true; - - return false; + return ( + descendants[clusterId].includes(edge.v) || + isDescendant(edge.v, clusterId) || + isDescendant(edge.w, clusterId) || + descendants[clusterId].includes(edge.w) + ); }; const copy = (clusterId, graph, newGraph, rootId) => { @@ -125,14 +125,14 @@ const copy = (clusterId, graph, newGraph, rootId) => { graph.removeNode(node); }); }; -export const extractDecendants = (id, graph) => { +export const extractDescendants = (id, graph) => { // log.debug('Extracting ', id); const children = graph.children(id); - let res = [].concat(children); + let res = [...children]; - for (let i = 0; i < children.length; i++) { - parents[children[i]] = id; - res = res.concat(extractDecendants(children[i], graph)); + for (const child of children) { + parents[child] = id; + res = [...res, ...extractDescendants(child, graph)]; } return res; @@ -147,13 +147,13 @@ export const extractDecendants = (id, graph) => { export const validate = (graph) => { const edges = graph.edges(); log.trace('Edges: ', edges); - for (let i = 0; i < edges.length; i++) { - if (graph.children(edges[i].v).length > 0) { - log.trace('The node ', edges[i].v, ' is part of and edge even though it has children'); + for (const edge of edges) { + if (graph.children(edge.v).length > 0) { + log.trace('The node ', edge.v, ' is part of and edge even though it has children'); return false; } - if (graph.children(edges[i].w).length > 0) { - log.trace('The node ', edges[i].w, ' is part of and edge even though it has children'); + if (graph.children(edge.w).length > 0) { + log.trace('The node ', edge.w, ' is part of and edge even though it has children'); return false; } } @@ -176,8 +176,8 @@ export const findNonClusterChild = (id, graph) => { log.trace('This is a valid node', id); return id; } - for (let i = 0; i < children.length; i++) { - const _id = findNonClusterChild(children[i], graph); + for (const child of children) { + const _id = findNonClusterChild(child, graph); if (_id) { log.trace('Found replacement for', id, ' => ', _id); return _id; @@ -219,7 +219,7 @@ export const adjustClustersAndEdges = (graph, depth) => { ' Replacement id in edges: ', findNonClusterChild(id, graph) ); - decendants[id] = extractDecendants(id, graph); + descendants[id] = extractDescendants(id, graph); clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) }; } }); @@ -229,28 +229,28 @@ export const adjustClustersAndEdges = (graph, depth) => { const children = graph.children(id); const edges = graph.edges(); if (children.length > 0) { - log.debug('Cluster identified', id, decendants); + log.debug('Cluster identified', id, descendants); edges.forEach((edge) => { // log.debug('Edge, decendants: ', edge, decendants[id]); // Check if any edge leaves the cluster (not the actual cluster, that's a link from the box) if (edge.v !== id && edge.w !== id) { - // Any edge where either the one of the nodes is decending to the cluster but not the other + // Any edge where either the one of the nodes is descending to the cluster but not the other // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) { - const d1 = isDecendant(edge.v, id); - const d2 = isDecendant(edge.w, id); + const d1 = isDescendant(edge.v, id); + const d2 = isDescendant(edge.w, id); // d1 xor d2 - if either d1 is true and d2 is false or the other way around if (d1 ^ d2) { log.warn('Edge: ', edge, ' leaves cluster ', id); - log.warn('Decendants of XXX ', id, ': ', decendants[id]); + log.warn('Decendants of XXX ', id, ': ', descendants[id]); clusterDb[id].externalConnections = true; } } }); } else { - log.debug('Not a cluster ', id, decendants); + log.debug('Not a cluster ', id, descendants); } }); @@ -270,7 +270,7 @@ export const adjustClustersAndEdges = (graph, depth) => { 'ids:', e.v, e.w, - 'Translateing: ', + 'Translating: ', clusterDb[e.v], ' --- ', clusterDb[e.w] @@ -306,13 +306,17 @@ export const adjustClustersAndEdges = (graph, depth) => { v = getAnchorId(e.v); w = getAnchorId(e.w); graph.removeEdge(e.v, e.w, e.name); - if (v !== e.v) edge.fromCluster = e.v; - if (w !== e.w) edge.toCluster = e.w; + if (v !== e.v) { + edge.fromCluster = e.v; + } + if (w !== e.w) { + edge.toCluster = e.w; + } log.warn('Fix Replacing with XXX', v, w, e.name); graph.setEdge(v, w, edge, e.name); } }); - log.warn('Adjusted Graph', graphlib.json.write(graph)); + log.warn('Adjusted Graph', graphlibJson.write(graph)); extractor(graph, 0); log.trace(clusterDb); @@ -326,7 +330,7 @@ export const adjustClustersAndEdges = (graph, depth) => { }; export const extractor = (graph, depth) => { - log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D')); + log.warn('extractor - ', depth, graphlibJson.write(graph), graph.children('D')); if (depth > 10) { log.error('Bailing out'); return; @@ -336,8 +340,7 @@ export const extractor = (graph, depth) => { // for (let i = 0;) let nodes = graph.nodes(); let hasChildren = false; - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i]; + for (const node of nodes) { const children = graph.children(node); hasChildren = hasChildren || children.length > 0; } @@ -349,9 +352,7 @@ export const extractor = (graph, depth) => { // const clusters = Object.keys(clusterDb); // clusters.forEach(clusterId => { log.debug('Nodes = ', nodes, depth); - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i]; - + for (const node of nodes) { log.debug( 'Extracting node', node, @@ -383,11 +384,9 @@ export const extractor = (graph, depth) => { const graphSettings = graph.graph(); let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB'; - if (clusterDb[node]) { - if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) { - dir = clusterDb[node].clusterData.dir; - log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir); - } + if (clusterDb[node] && clusterDb[node].clusterData && clusterDb[node].clusterData.dir) { + dir = clusterDb[node].clusterData.dir; + log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir); } const clusterGraph = new graphlib.Graph({ @@ -405,7 +404,7 @@ export const extractor = (graph, depth) => { return {}; }); - log.warn('Old graph before copy', graphlib.json.write(graph)); + log.warn('Old graph before copy', graphlibJson.write(graph)); copy(node, graph, clusterGraph, node); graph.setNode(node, { clusterNode: true, @@ -414,8 +413,8 @@ export const extractor = (graph, depth) => { labelText: clusterDb[node].labelText, graph: clusterGraph, }); - log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph)); - log.debug('Old graph after copy', graphlib.json.write(graph)); + log.warn('New graph after copy node: (', node, ')', graphlibJson.write(clusterGraph)); + log.debug('Old graph after copy', graphlibJson.write(graph)); } else { log.warn( 'Cluster ** ', @@ -435,8 +434,7 @@ export const extractor = (graph, depth) => { nodes = graph.nodes(); log.warn('New list of nodes', nodes); - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i]; + for (const node of nodes) { const data = graph.node(node); log.warn(' Now next level', node, data); if (data.clusterNode) { @@ -446,12 +444,14 @@ export const extractor = (graph, depth) => { }; const sorter = (graph, nodes) => { - if (nodes.length === 0) return []; + if (nodes.length === 0) { + return []; + } let result = Object.assign(nodes); nodes.forEach((node) => { const children = graph.children(node); const sorted = sorter(graph, children); - result = result.concat(sorted); + result = [...result, ...sorted]; }); return result; diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js index 8155bbf700..25fb75d643 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js @@ -1,9 +1,9 @@ -import graphlib from 'graphlib'; -import dagre from 'dagre'; +import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { validate, adjustClustersAndEdges, - extractDecendants, + extractDescendants, sortNodesByHierarchy, } from './mermaid-graphlib'; import { setLogLevel, log } from '../logger'; @@ -233,9 +233,9 @@ describe('Graphlib decorations', () => { g.setParent('D', 'C'); // log.info('Graph before', g.node('D')) - // log.info('Graph before', graphlib.json.write(g)) + // log.info('Graph before', graphlibJson.write(g)) adjustClustersAndEdges(g); - // log.info('Graph after', graphlib.json.write(g), g.node('C').graph) + // log.info('Graph after', graphlibJson.write(g), g.node('C').graph) const CGraph = g.node('C').graph; const DGraph = CGraph.node('D').graph; @@ -279,9 +279,9 @@ describe('Graphlib decorations', () => { g.setEdge('A', 'C', { data: 'link2' }, '2'); log.info('Graph before', g.node('D')); - log.info('Graph before', graphlib.json.write(g)); + log.info('Graph before', graphlibJson.write(g)); adjustClustersAndEdges(g); - log.trace('Graph after', graphlib.json.write(g)); + log.trace('Graph after', graphlibJson.write(g)); expect(g.nodes()).toEqual(['C', 'B', 'A']); expect(g.nodes().length).toBe(3); expect(g.edges().length).toBe(2); @@ -334,11 +334,11 @@ describe('Graphlib decorations', () => { g.setEdge('c', 'd', { data: 'link2' }, '2'); g.setEdge('d', 'e', { data: 'link2' }, '2'); - log.info('Graph before', graphlib.json.write(g)); + log.info('Graph before', graphlibJson.write(g)); adjustClustersAndEdges(g); const bGraph = g.node('b').graph; - // log.trace('Graph after', graphlib.json.write(g)) - log.info('Graph after', graphlib.json.write(bGraph)); + // log.trace('Graph after', graphlibJson.write(g)) + log.info('Graph after', graphlibJson.write(bGraph)); expect(bGraph.nodes().length).toBe(3); expect(bGraph.edges().length).toBe(2); }); @@ -360,13 +360,13 @@ describe('Graphlib decorations', () => { g.setParent('c', 'b'); g.setParent('e', 'c'); - log.info('Graph before', graphlib.json.write(g)); + log.info('Graph before', graphlibJson.write(g)); adjustClustersAndEdges(g); const aGraph = g.node('a').graph; const bGraph = aGraph.node('b').graph; - log.info('Graph after', graphlib.json.write(aGraph)); + log.info('Graph after', graphlibJson.write(aGraph)); const cGraph = bGraph.node('c').graph; - // log.trace('Graph after', graphlib.json.write(g)) + // log.trace('Graph after', graphlibJson.write(g)) expect(aGraph.nodes().length).toBe(1); expect(bGraph.nodes().length).toBe(1); expect(cGraph.nodes().length).toBe(1); @@ -388,19 +388,19 @@ flowchart TB const exportedGraph = JSON.parse( '{"options":{"directed":true,"multigraph":true,"compound":true},"nodes":[{"v":"A","value":{"labelStyle":"","shape":"rect","labelText":"A","rx":0,"ry":0,"class":"default","style":"","id":"A","width":500,"type":"group","padding":15}},{"v":"B","value":{"labelStyle":"","shape":"rect","labelText":"B","rx":0,"ry":0,"class":"default","style":"","id":"B","width":500,"type":"group","padding":15},"parent":"A"},{"v":"b","value":{"labelStyle":"","shape":"rect","labelText":"b","rx":0,"ry":0,"class":"default","style":"","id":"b","padding":15},"parent":"A"},{"v":"c","value":{"labelStyle":"","shape":"rect","labelText":"c","rx":0,"ry":0,"class":"default","style":"","id":"c","padding":15},"parent":"B"},{"v":"a","value":{"labelStyle":"","shape":"rect","labelText":"a","rx":0,"ry":0,"class":"default","style":"","id":"a","padding":15},"parent":"A"}],"edges":[{"v":"b","w":"B","name":"1","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-b-B","classes":"flowchart-link LS-b LE-B"}},{"v":"a","w":"c","name":"2","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-a-c","classes":"flowchart-link LS-a LE-c"}}],"value":{"rankdir":"TB","nodesep":50,"ranksep":50,"marginx":8,"marginy":8}}' ); - const gr = graphlib.json.read(exportedGraph); + const gr = graphlibJson.read(exportedGraph); - log.info('Graph before', graphlib.json.write(gr)); + log.info('Graph before', graphlibJson.write(gr)); adjustClustersAndEdges(gr); const aGraph = gr.node('A').graph; const bGraph = aGraph.node('B').graph; - log.info('Graph after', graphlib.json.write(aGraph)); - // log.trace('Graph after', graphlib.json.write(g)) + log.info('Graph after', graphlibJson.write(aGraph)); + // log.trace('Graph after', graphlibJson.write(g)) expect(aGraph.parent('c')).toBe('B'); expect(aGraph.parent('B')).toBe(undefined); }); }); -describe('extractDecendants', function () { +describe('extractDescendants', function () { let g; beforeEach(function () { setLogLevel(1); @@ -443,9 +443,9 @@ describe('extractDecendants', function () { g.setEdge('A', 'C', { data: 'link2' }, '2'); // log.info(g.edges()) - const d1 = extractDecendants('A', g); - const d2 = extractDecendants('B', g); - const d3 = extractDecendants('C', g); + const d1 = extractDescendants('A', g); + const d2 = extractDescendants('B', g); + const d3 = extractDescendants('C', g); expect(d1).toEqual(['a']); expect(d2).toEqual(['b']); diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index f25eb2e86b..fda7893236 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -291,11 +291,15 @@ const cylinder = (parent, node) => { (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry)) ) { // ellipsis equation: x*x / a*a + y*y / b*b = 1 - // solve for y to get adjustion value for pos.y + // solve for y to get adjusted value for pos.y let y = ry * ry * (1 - (x * x) / (rx * rx)); - if (y != 0) y = Math.sqrt(y); + if (y != 0) { + y = Math.sqrt(y); + } y = ry - y; - if (point.y - node.y > 0) y = -y; + if (point.y - node.y > 0) { + y = -y; + } pos.y += y; } @@ -387,12 +391,10 @@ const labelRect = (parent, node) => { function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) { const strokeDashArray = []; const addBorder = (length) => { - strokeDashArray.push(length); - strokeDashArray.push(0); + strokeDashArray.push(length, 0); }; const skipBorder = (length) => { - strokeDashArray.push(0); - strokeDashArray.push(length); + strokeDashArray.push(0, length); }; if (borders.includes('t')) { log.debug('add top border'); diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index dfd1a93baf..6de0da6382 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -21,7 +21,7 @@ export const labelHelper = (parent, node, _classes, isNode) => { // Replace labelText with default value if undefined let labelText; - if (typeof node.labelText === 'undefined') { + if (node.labelText === undefined) { labelText = ''; } else { labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0]; diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 9d085b40fd..37d4f71fff 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -8,19 +8,27 @@ import { MermaidConfig } from './config.type'; * * These are the default options which can be overridden with the initialization call like so: * - * **Example 1:**
 mermaid.initialize({ flowchart:{ htmlLabels: false } });
+ * **Example 1:** * - * **Example 2:**
+ * ```html + * + * ``` * * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). * A description of each option follows below. - * - * @name Configuration */ const config: Partial = { /** @@ -30,8 +38,16 @@ const config: Partial = { * | --------- | --------------- | ------ | -------- | ---------------------------------------------- | * | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' | * - * **Notes:** To disable any pre-defined mermaid theme, use "null".
 "theme": "forest",
-   * "themeCSS": ".node rect { fill: red; }"
+ * **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(), @@ -118,11 +134,11 @@ const config: Partial = { /** * 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 behaviour. + * deterministic. This is the default behavior. * * **Notes**: * - * This matters if your files are checked into sourcecontrol e.g. git and should not change unless + * This matters if your files are checked into source control e.g. git and should not change unless * content is changed. * * Default value: false @@ -138,6 +154,17 @@ const config: Partial = { /** 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 | * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | @@ -632,9 +659,9 @@ const config: Partial = { numberSectionStyles: 4, /** - * | Parameter | Description | Type | Required | Values | - * | ---------- | --------------------------- | ---- | -------- | ---------------- | - * | axisFormat | Datetime format of the axis | 3 | Required | Date in yy-mm-dd | + * | Parameter | Description | Type | Required | Values | + * | ---------- | ---------------------------- | ---- | -------- | ---------------- | + * | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd | * * **Notes:** * @@ -644,6 +671,19 @@ const config: Partial = { */ 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 + */ + tickInterval: undefined, + /** * | Parameter | Description | Type | Required | Values | * | ----------- | ----------- | ------- | -------- | ----------- | @@ -822,6 +862,16 @@ const config: Partial = { sectionColours: ['#fff'], }, 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, @@ -855,6 +905,16 @@ const config: Partial = { 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, @@ -903,6 +963,17 @@ const config: Partial = { /** 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 | * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ | @@ -1056,6 +1127,16 @@ const config: Partial = { 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, @@ -1167,7 +1248,7 @@ const config: Partial = { * | --------------- | ----------- | ------- | -------- | ------------------ | * | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value | * - * **Notes:** How many boundarys to place in each row. + * **Notes:** How many boundaries to place in each row. * * Default value: 2 */ @@ -1832,8 +1913,12 @@ const config: Partial = { fontSize: 16, }; -if (config.class) config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; -if (config.gitGraph) config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute; +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[] => { diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts index 9536fded21..2ff0b55321 100644 --- a/packages/mermaid/src/diagram-api/detectType.ts +++ b/packages/mermaid/src/diagram-api/detectType.ts @@ -1,18 +1,21 @@ import { MermaidConfig } from '../config.type'; import { log } from '../logger'; import { DetectorRecord, DiagramDetector, DiagramLoader } from './types'; +import { frontMatterRegex } from './frontmatter'; -const directive = - /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi; +const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi; const anyComment = /\s*%%.*\n/gm; const detectors: Record = {}; /** - * @function detectType Detects the type of the graph text. Takes into consideration the possible - * existence of an %%init directive + * Detects the type of the graph text. * - * ```mermaid + * Takes into consideration the possible existence of an `%%init` directive + * + * @param text - The text defining the graph. For example: + * + * ```mermaid * %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% * graph LR * a-->b @@ -23,16 +26,12 @@ const detectors: Record = {}; * f-->g * g-->h * ``` - * @param {string} text The text defining the graph - * @param {{ - * class: { defaultRenderer: string } | undefined; - * state: { defaultRenderer: string } | undefined; - * flowchart: { defaultRenderer: string } | undefined; - * }} [config] - * @returns {string} A graph definition key + * + * @param config - The mermaid config. + * @returns A graph definition key */ export const detectType = function (text: string, config?: MermaidConfig): string { - text = text.replace(directive, '').replace(anyComment, '\n'); + text = text.replace(frontMatterRegex, '').replace(directive, '').replace(anyComment, '\n'); for (const [key, { detector }] of Object.entries(detectors)) { const diagram = detector(text, config); if (diagram) { diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 2727ae4ef4..748cc5f962 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -7,9 +7,9 @@ import { addStylesForDiagram } from '../styles'; import { DiagramDefinition, DiagramDetector } from './types'; /* - Packaging and exposing resources for externa diagrams so that they can import - diagramAPI and have access to selct parts of mermaid common code reqiored to - create diagrams worling like the internal diagrams. + Packaging and exposing resources for external diagrams so that they can import + diagramAPI and have access to select parts of mermaid common code required to + create diagrams working like the internal diagrams. */ export const log = _log; export const setLogLevel = _setLogLevel; @@ -36,14 +36,8 @@ export const registerDiagram = ( diagram: DiagramDefinition, detector?: DiagramDetector ) => { - log.debug(`Registering diagram ${id}`); if (diagrams[id]) { - log.warn(`Diagram ${id} already registered.`); - // The error throw is commented out to as it breaks pages where you have multiple diagrams, - // it can happen that rendering of the same type of diagram is initiated while the previous - // one is still being imported. import deals with this and only one diagram is imported in - // the end. - // throw new Error(`Diagram ${id} already registered.`); + throw new Error(`Diagram ${id} already registered.`); } diagrams[id] = diagram; if (detector) { @@ -54,19 +48,11 @@ export const registerDiagram = ( if (diagram.injectUtils) { diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox); } - log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`); }; export const getDiagram = (name: string): DiagramDefinition => { - log.debug(`Getting diagram ${name}. ${Object.keys(diagrams).join(', ')} diagrams registered.`); if (name in diagrams) { return diagrams[name]; } - throw new DiagramNotFoundError(name); + throw new Error(`Diagram ${name} not found.`); }; - -export class DiagramNotFoundError extends Error { - constructor(message: string) { - super(`Diagram ${message} not found.`); - } -} diff --git a/packages/mermaid/src/diagram-api/frontmatter.spec.ts b/packages/mermaid/src/diagram-api/frontmatter.spec.ts new file mode 100644 index 0000000000..4eb9789e2b --- /dev/null +++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts @@ -0,0 +1,78 @@ +import { vi } from 'vitest'; +import { extractFrontMatter } from './frontmatter'; + +const dbMock = () => ({ setDiagramTitle: vi.fn() }); + +describe('extractFrontmatter', () => { + it('returns text unchanged if no frontmatter', () => { + expect(extractFrontMatter('diagram', dbMock())).toEqual('diagram'); + }); + + it('returns text unchanged if frontmatter lacks closing delimiter', () => { + const text = `---\ntitle: foo\ndiagram`; + expect(extractFrontMatter(text, dbMock())).toEqual(text); + }); + + it('handles empty frontmatter', () => { + const db = dbMock(); + const text = `---\n\n---\ndiagram`; + expect(extractFrontMatter(text, db)).toEqual('diagram'); + expect(db.setDiagramTitle).not.toHaveBeenCalled(); + }); + + it('handles frontmatter without mappings', () => { + const db = dbMock(); + const text = `---\n1\n---\ndiagram`; + expect(extractFrontMatter(text, db)).toEqual('diagram'); + expect(db.setDiagramTitle).not.toHaveBeenCalled(); + }); + + it('does not try to parse frontmatter at the end', () => { + const db = dbMock(); + const text = `diagram\n---\ntitle: foo\n---\n`; + expect(extractFrontMatter(text, db)).toEqual(text); + expect(db.setDiagramTitle).not.toHaveBeenCalled(); + }); + + it('handles frontmatter with multiple delimiters', () => { + const db = dbMock(); + const text = `---\ntitle: foo---bar\n---\ndiagram\n---\ntest`; + expect(extractFrontMatter(text, db)).toEqual('diagram\n---\ntest'); + expect(db.setDiagramTitle).toHaveBeenCalledWith('foo---bar'); + }); + + it('handles frontmatter with multi-line string and multiple delimiters', () => { + const db = dbMock(); + const text = `---\ntitle: |\n multi-line string\n ---\n---\ndiagram`; + expect(extractFrontMatter(text, db)).toEqual('diagram'); + expect(db.setDiagramTitle).toHaveBeenCalledWith('multi-line string\n---\n'); + }); + + it('handles frontmatter with title', () => { + const db = dbMock(); + const text = `---\ntitle: foo\n---\ndiagram`; + expect(extractFrontMatter(text, db)).toEqual('diagram'); + expect(db.setDiagramTitle).toHaveBeenCalledWith('foo'); + }); + + it('handles booleans in frontmatter properly', () => { + const db = dbMock(); + const text = `---\ntitle: true\n---\ndiagram`; + expect(extractFrontMatter(text, db)).toEqual('diagram'); + expect(db.setDiagramTitle).toHaveBeenCalledWith('true'); + }); + + it('ignores unspecified frontmatter keys', () => { + const db = dbMock(); + const text = `---\ninvalid: true\ntitle: foo\ntest: bar\n---\ndiagram`; + expect(extractFrontMatter(text, db)).toEqual('diagram'); + expect(db.setDiagramTitle).toHaveBeenCalledWith('foo'); + }); + + it('throws exception for invalid YAML syntax', () => { + const text = `---\n!!!\n---\ndiagram`; + expect(() => extractFrontMatter(text, dbMock())).toThrow( + 'tag suffix cannot contain exclamation marks' + ); + }); +}); diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts new file mode 100644 index 0000000000..d6811388c1 --- /dev/null +++ b/packages/mermaid/src/diagram-api/frontmatter.ts @@ -0,0 +1,40 @@ +import { DiagramDb } from './types'; +// The "* as yaml" part is necessary for tree-shaking +import * as yaml from 'js-yaml'; + +// Match Jekyll-style front matter blocks (https://jekyllrb.com/docs/front-matter/). +// Based on regex used by Jekyll: https://github.com/jekyll/jekyll/blob/6dd3cc21c40b98054851846425af06c64f9fb466/lib/jekyll/document.rb#L10 +// Note that JS doesn't support the "\A" anchor, which means we can't use +// multiline mode. +// Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents +export const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s; + +type FrontMatterMetadata = { + title?: string; +}; + +/** + * Extract and parse frontmatter from text, if present, and sets appropriate + * properties in the provided db. + * @param text - The text that may have a YAML frontmatter. + * @param db - Diagram database, could be of any diagram. + * @returns text with frontmatter stripped out + */ +export function extractFrontMatter(text: string, db: DiagramDb): string { + const matches = text.match(frontMatterRegex); + if (matches) { + const parsed: FrontMatterMetadata = yaml.load(matches[1], { + // To keep things simple, only allow strings, arrays, and plain objects. + // https://www.yaml.org/spec/1.2/spec.html#id2802346 + schema: yaml.FAILSAFE_SCHEMA, + }) as FrontMatterMetadata; + + if (parsed?.title) { + db.setDiagramTitle?.(parsed.title); + } + + return text.slice(matches[0].length); + } else { + return text; + } +} diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index d45eac6aa0..3449782e20 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -8,8 +8,18 @@ export interface InjectUtils { _setupGraphViewbox: any; } +/** + * Generic Diagram DB that may apply to any diagram type. + */ +export interface DiagramDb { + clear?: () => void; + setDiagramTitle?: (title: string) => void; + getAccTitle?: () => string; + getAccDescription?: () => string; +} + export interface DiagramDefinition { - db: any; + db: DiagramDb; renderer: any; parser: any; styles: any; diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts new file mode 100644 index 0000000000..ebe088a868 --- /dev/null +++ b/packages/mermaid/src/diagram.spec.ts @@ -0,0 +1,67 @@ +import { describe, test, expect } from 'vitest'; +import Diagram, { getDiagramFromText } from './Diagram'; +import { addDetector } from './diagram-api/detectType'; +import { addDiagrams } from './diagram-api/diagram-orchestration'; + +addDiagrams(); + +describe('diagram detection', () => { + test('should detect inbuilt diagrams', () => { + const graph = getDiagramFromText('graph TD; A-->B') as Diagram; + expect(graph).toBeInstanceOf(Diagram); + expect(graph.type).toBe('flowchart-v2'); + const sequence = getDiagramFromText( + 'sequenceDiagram; Alice->>+John: Hello John, how are you?' + ) as Diagram; + expect(sequence).toBeInstanceOf(Diagram); + expect(sequence.type).toBe('sequence'); + }); + + test('should detect external diagrams', async () => { + addDetector( + 'loki', + (str) => str.startsWith('loki'), + () => + Promise.resolve({ + id: 'loki', + diagram: { + db: {}, + parser: { + parse: () => { + // no-op + }, + parser: { + yy: {}, + }, + }, + renderer: {}, + styles: {}, + }, + }) + ); + const diagram = (await getDiagramFromText('loki TD; A-->B')) as Diagram; + expect(diagram).toBeInstanceOf(Diagram); + expect(diagram.type).toBe('loki'); + }); + + test('should throw the right error for incorrect diagram', () => { + expect(() => getDiagramFromText('graph TD; A-->')).toThrowErrorMatchingInlineSnapshot(` +"Parse error on line 3: +graph TD; A--> +--------------^ +Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'" + `); + expect(() => getDiagramFromText('sequenceDiagram; A-->B')).toThrowErrorMatchingInlineSnapshot(` +"Parse error on line 1: +...quenceDiagram; A-->B +-----------------------^ +Expecting 'TXT', got 'NEWLINE'" + `); + }); + + test('should throw the right error for unregistered diagrams', () => { + expect(() => getDiagramFromText('thor TD; A-->B')).toThrowError( + 'No diagram type detected for text: thor TD; A-->B' + ); + }); +}); diff --git a/packages/mermaid/src/diagrams/c4/c4Db.js b/packages/mermaid/src/diagrams/c4/c4Db.js index 79028a0c5c..d337b15c0d 100644 --- a/packages/mermaid/src/diagrams/c4/c4Db.js +++ b/packages/mermaid/src/diagrams/c4/c4Db.js @@ -49,8 +49,9 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag to === null || label === undefined || label === null - ) + ) { return; + } let rel = {}; const old = rels.find((rel) => rel.from === from && rel.to === to); @@ -111,7 +112,9 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag //type, alias, label, ?descr, ?sprite, ?tags, $link export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, sprite, tags, link) { // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let personOrSystem = {}; const old = c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias); @@ -166,7 +169,9 @@ export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, spr //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link export const addContainer = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) { // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let container = {}; const old = c4ShapeArray.find((container) => container.alias === alias); @@ -232,7 +237,9 @@ export const addContainer = function (typeC4Shape, alias, label, techn, descr, s //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link export const addComponent = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) { // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let component = {}; const old = c4ShapeArray.find((component) => component.alias === alias); @@ -300,7 +307,9 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin // if (parentBoundary === null) return; // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let boundary = {}; const old = boundarys.find((boundary) => boundary.alias === alias); @@ -354,7 +363,9 @@ export const addContainerBoundary = function (alias, label, type, tags, link) { // if (parentBoundary === null) return; // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let boundary = {}; const old = boundarys.find((boundary) => boundary.alias === alias); @@ -417,7 +428,9 @@ export const addDeploymentNode = function ( // if (parentBoundary === null) return; // Don't allow label nulling - if (alias === null || label === null) return; + if (alias === null || label === null) { + return; + } let boundary = {}; const old = boundarys.find((boundary) => boundary.alias === alias); @@ -646,8 +659,12 @@ export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4Bo c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam); } - if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue; - if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue; + if (c4ShapeInRowValue >= 1) { + c4ShapeInRow = c4ShapeInRowValue; + } + if (c4BoundaryInRowValue >= 1) { + c4BoundaryInRow = c4BoundaryInRowValue; + } }; export const getC4ShapeInRow = function () { @@ -665,11 +682,13 @@ export const getParentBoundaryParse = function () { }; export const getC4ShapeArray = function (parentBoundary) { - if (parentBoundary === undefined || parentBoundary === null) return c4ShapeArray; - else + if (parentBoundary === undefined || parentBoundary === null) { + return c4ShapeArray; + } else { return c4ShapeArray.filter((personOrSystem) => { return personOrSystem.parentBoundary === parentBoundary; }); + } }; export const getC4Shape = function (alias) { return c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias); @@ -679,8 +698,11 @@ export const getC4ShapeKeys = function (parentBoundary) { }; export const getBoundarys = function (parentBoundary) { - if (parentBoundary === undefined || parentBoundary === null) return boundarys; - else return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary); + if (parentBoundary === undefined || parentBoundary === null) { + return boundarys; + } else { + return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary); + } }; export const getRels = function () { diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js index dceca28871..a51fe0b6af 100644 --- a/packages/mermaid/src/diagrams/c4/c4Renderer.js +++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js @@ -8,7 +8,6 @@ import * as configApi from '../../config'; import assignWithDepth from '../../assignWithDepth'; import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils'; import { configureSvgSize } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; let globalBoundaryMaxX = 0, globalBoundaryMaxY = 0; @@ -48,7 +47,7 @@ class Bounds { } updateVal(obj, key, val, fun) { - if (typeof obj[key] === 'undefined') { + if (obj[key] === undefined) { obj[key] = val; } else { obj[key] = fun(val, obj[key]); @@ -177,12 +176,12 @@ function calcC4ShapeTextWH(textType, c4Shape, c4ShapeTextWrap, textConf, textLim let lineHeight = 0; c4Shape[textType].height = 0; c4Shape[textType].width = 0; - for (let i = 0; i < lines.length; i++) { + for (const line of lines) { c4Shape[textType].width = Math.max( - calculateTextWidth(lines[i], textConf), + calculateTextWidth(line, textConf), c4Shape[textType].width ); - lineHeight = calculateTextHeight(lines[i], textConf); + lineHeight = calculateTextHeight(line, textConf); c4Shape[textType].height = c4Shape[textType].height + lineHeight; } // c4Shapes[textType].height = c4Shapes[textType].textLines * textConf.fontSize; @@ -212,9 +211,9 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray, // Upper Y is relative point let Y = 0; // Draw the c4ShapeArray - for (let i = 0; i < c4ShapeKeys.length; i++) { + for (const c4ShapeKey of c4ShapeKeys) { Y = 0; - const c4Shape = c4ShapeArray[c4ShapeKeys[i]]; + const c4Shape = c4ShapeArray[c4ShapeKey]; // calc c4 shape type width and height @@ -414,7 +413,9 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) { let relTextWrap = rel.wrap && conf.wrap; let relConf = messageFont(conf); let diagramType = diagObj.db.getC4Type(); - if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text; + if (diagramType === 'C4Dynamic') { + rel.label.text = i + ': ' + rel.label.text; + } let textLimitWidth = calculateTextWidth(rel.label.text, relConf); calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth); @@ -441,20 +442,25 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) { * @param diagram * @param parentBoundaryAlias * @param parentBounds - * @param currentBoundarys + * @param currentBoundaries * @param diagObj */ -function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) { +function drawInsideBoundary( + diagram, + parentBoundaryAlias, + parentBounds, + currentBoundaries, + diagObj +) { let currentBounds = new Bounds(diagObj); - // Calculate the width limit of the boundar. label/type 的长度， + // Calculate the width limit of the boundary. label/type 的长度， currentBounds.data.widthLimit = - parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length); + parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundaries.length); // Math.min( // conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2, - // parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length) + // parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundaries.length) // ); - for (let i = 0; i < currentBoundarys.length; i++) { - let currentBoundary = currentBoundarys[i]; + for (let [i, currentBoundary] of currentBoundaries.entries()) { let Y = 0; currentBoundary.image = { width: 0, height: 0, Y: 0 }; if (currentBoundary.sprite) { @@ -508,13 +514,13 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB } if (i == 0 || i % c4BoundaryInRow === 0) { - // Calculate the drawing start point of the currentBoundarys. + // Calculate the drawing start point of the currentBoundaries. let _x = parentBounds.data.startx + conf.diagramMarginX; let _y = parentBounds.data.stopy + conf.diagramMarginY + Y; currentBounds.setData(_x, _x, _y, _y); } else { - // Calculate the drawing start point of the currentBoundarys. + // Calculate the drawing start point of the currentBoundaries. let _x = currentBounds.data.stopx !== currentBounds.data.startx ? currentBounds.data.stopx + conf.diagramMarginX @@ -540,8 +546,6 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB if (nextCurrentBoundarys.length > 0) { // draw boundary inside currentBoundary - // bounds.init(); - // parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx; drawInsideBoundary( diagram, parentBoundaryAlias, @@ -551,7 +555,9 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB ); } // draw boundary - if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds); + if (currentBoundary.alias !== 'global') { + drawBoundary(diagram, currentBoundary, currentBounds); + } parentBounds.data.stopy = Math.max( currentBounds.data.stopy + conf.c4ShapeMargin, parentBounds.data.stopy @@ -576,7 +582,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB export const draw = function (_text, id, _version, diagObj) { conf = configApi.getConfig().c4; const securityLevel = configApi.getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -616,10 +622,10 @@ export const draw = function (_text, id, _version, diagObj) { globalBoundaryMaxY = conf.diagramMarginY; const title = diagObj.db.getTitle(); - let currentBoundarys = diagObj.db.getBoundarys(''); + let currentBoundaries = diagObj.db.getBoundarys(''); // switch (c4type) { // case 'C4Context': - drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj); + drawInsideBoundary(diagram, '', screenBounds, currentBoundaries, diagObj); // break; // } @@ -668,7 +674,6 @@ export const draw = function (_text, id, _version, diagObj) { (height + extraVertForTitle) ); - addSVGAccessibilityFields(parser.yy, diagram, id); log.debug(`models:`, box); }; diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js index 5666d9f844..d3d66a80d3 100644 --- a/packages/mermaid/src/diagrams/c4/svgDraw.js +++ b/packages/mermaid/src/diagrams/c4/svgDraw.js @@ -13,7 +13,9 @@ export const drawRect = function (elem, rectData) { rectElem.attr('ry', rectData.ry); if (rectData.attrs !== 'undefined' && rectData.attrs !== null) { - for (let attrKey in rectData.attrs) rectElem.attr(attrKey, rectData.attrs[attrKey]); + for (let attrKey in rectData.attrs) { + rectElem.attr(attrKey, rectData.attrs[attrKey]); + } } if (rectData.class !== 'undefined') { @@ -33,184 +35,6 @@ export const drawImage = function (elem, width, height, x, y, link) { imageElem.attr('xlink:href', sanitizedLink); }; -export const drawEmbeddedImage = function (elem, x, y, link) { - const imageElem = elem.append('use'); - imageElem.attr('x', x); - imageElem.attr('y', y); - var sanitizedLink = sanitizeUrl(link); - imageElem.attr('xlink:href', '#' + sanitizedLink); -}; - -export const drawText = function (elem, textData) { - let prevTextHeight = 0, - textHeight = 0; - const lines = textData.text.split(common.lineBreakRegex); - - let textElems = []; - let dy = 0; - let yfunc = () => textData.y; - if ( - typeof textData.valign !== 'undefined' && - typeof textData.textMargin !== 'undefined' && - textData.textMargin > 0 - ) { - switch (textData.valign) { - case 'top': - case 'start': - yfunc = () => Math.round(textData.y + textData.textMargin); - break; - case 'middle': - case 'center': - yfunc = () => - Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2); - break; - case 'bottom': - case 'end': - yfunc = () => - Math.round( - textData.y + - (prevTextHeight + textHeight + 2 * textData.textMargin) - - textData.textMargin - ); - break; - } - } - if ( - typeof textData.anchor !== 'undefined' && - typeof textData.textMargin !== 'undefined' && - typeof textData.width !== 'undefined' - ) { - switch (textData.anchor) { - case 'left': - case 'start': - textData.x = Math.round(textData.x + textData.textMargin); - textData.anchor = 'start'; - textData.dominantBaseline = 'text-after-edge'; - textData.alignmentBaseline = 'middle'; - break; - case 'middle': - case 'center': - textData.x = Math.round(textData.x + textData.width / 2); - textData.anchor = 'middle'; - textData.dominantBaseline = 'middle'; - textData.alignmentBaseline = 'middle'; - break; - case 'right': - case 'end': - textData.x = Math.round(textData.x + textData.width - textData.textMargin); - textData.anchor = 'end'; - textData.dominantBaseline = 'text-before-edge'; - textData.alignmentBaseline = 'middle'; - break; - } - } - for (let i = 0; i < lines.length; i++) { - let line = lines[i]; - if ( - typeof textData.textMargin !== 'undefined' && - textData.textMargin === 0 && - typeof textData.fontSize !== 'undefined' - ) { - dy = i * textData.fontSize; - } - - const textElem = elem.append('text'); - textElem.attr('x', textData.x); - textElem.attr('y', yfunc()); - if (typeof textData.anchor !== 'undefined') { - textElem - .attr('text-anchor', textData.anchor) - .attr('dominant-baseline', textData.dominantBaseline) - .attr('alignment-baseline', textData.alignmentBaseline); - } - if (typeof textData.fontFamily !== 'undefined') { - textElem.style('font-family', textData.fontFamily); - } - if (typeof textData.fontSize !== 'undefined') { - textElem.style('font-size', textData.fontSize); - } - if (typeof textData.fontWeight !== 'undefined') { - textElem.style('font-weight', textData.fontWeight); - } - if (typeof textData.fill !== 'undefined') { - textElem.attr('fill', textData.fill); - } - if (typeof textData.class !== 'undefined') { - textElem.attr('class', textData.class); - } - if (typeof textData.dy !== 'undefined') { - textElem.attr('dy', textData.dy); - } else if (dy !== 0) { - textElem.attr('dy', dy); - } - - if (textData.tspan) { - const span = textElem.append('tspan'); - span.attr('x', textData.x); - if (typeof textData.fill !== 'undefined') { - span.attr('fill', textData.fill); - } - span.text(line); - } else { - textElem.text(line); - } - if ( - typeof textData.valign !== 'undefined' && - typeof textData.textMargin !== 'undefined' && - textData.textMargin > 0 - ) { - textHeight += (textElem._groups || textElem)[0][0].getBBox().height; - prevTextHeight = textHeight; - } - - textElems.push(textElem); - } - - return textElems; -}; - -export const drawLabel = function (elem, txtObject) { - /** - * @param {any} x - * @param {any} y - * @param {any} width - * @param {any} height - * @param {any} cut - * @returns {any} - */ - function genPoints(x, y, width, height, cut) { - return ( - x + - ',' + - y + - ' ' + - (x + width) + - ',' + - y + - ' ' + - (x + width) + - ',' + - (y + height - cut) + - ' ' + - (x + width - cut * 1.2) + - ',' + - (y + height) + - ' ' + - x + - ',' + - (y + height) - ); - } - const polygon = elem.append('polygon'); - polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7)); - polygon.attr('class', 'labelBox'); - - txtObject.y = txtObject.y + txtObject.height / 2; - - drawText(elem, txtObject); - return polygon; -}; - export const drawRels = (elem, rels, conf) => { const relsElem = elem.append('g'); let i = 0; @@ -231,9 +55,12 @@ export const drawRels = (elem, rels, conf) => { line.attr('stroke-width', '1'); line.attr('stroke', strokeColor); line.style('fill', 'none'); - if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)'); - if (rel.type === 'birel' || rel.type === 'rel_b') + if (rel.type !== 'rel_b') { + line.attr('marker-end', 'url(' + url + '#arrowhead)'); + } + if (rel.type === 'birel' || rel.type === 'rel_b') { line.attr('marker-start', 'url(' + url + '#arrowend)'); + } i = -1; } else { let line = relsElem.append('path'); @@ -256,9 +83,12 @@ export const drawRels = (elem, rels, conf) => { .replaceAll('stopx', rel.endPoint.x) .replaceAll('stopy', rel.endPoint.y) ); - if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)'); - if (rel.type === 'birel' || rel.type === 'rel_b') + if (rel.type !== 'rel_b') { + line.attr('marker-end', 'url(' + url + '#arrowhead)'); + } + if (rel.type === 'birel' || rel.type === 'rel_b') { line.attr('marker-start', 'url(' + url + '#arrowend)'); + } } let messageConf = conf.messageFont(); @@ -314,7 +144,9 @@ const drawBoundary = function (elem, boundary, conf) { let fontColor = boundary.fontColor ? boundary.fontColor : 'black'; let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' }; - if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 }; + if (boundary.nodeType) { + attrsValue = { 'stroke-width': 1.0 }; + } let rectData = { x: boundary.x, y: boundary.y, @@ -735,23 +567,6 @@ export const insertArrowCrossHead = function (elem) { // this is actual shape for arrowhead }; -export const getTextObj = function () { - return { - x: 0, - y: 0, - fill: undefined, - anchor: undefined, - style: '#666', - width: undefined, - height: undefined, - textMargin: 0, - rx: 0, - ry: 0, - tspan: true, - valign: undefined, - }; -}; - export const getNoteRect = function () { return { x: 0, @@ -886,13 +701,10 @@ const _drawTextCandidateFunc = (function () { export default { drawRect, - drawText, - drawLabel, drawBoundary, drawC4Shape, drawRels, drawImage, - drawEmbeddedImage, insertArrowHead, insertArrowEnd, insertArrowFilledHead, @@ -901,7 +713,6 @@ export default { insertDatabaseIcon, insertComputerIcon, insertClockIcon, - getTextObj, getNoteRect, - sanitizeUrl, + sanitizeUrl, // TODO why is this exported? }; diff --git a/packages/mermaid/src/diagrams/class/classDb.js b/packages/mermaid/src/diagrams/class/classDb.js index 223bfe067a..2c6690e395 100644 --- a/packages/mermaid/src/diagrams/class/classDb.js +++ b/packages/mermaid/src/diagrams/class/classDb.js @@ -10,12 +10,15 @@ import { getAccDescription, setAccDescription, clear as commonClear, + setDiagramTitle, + getDiagramTitle, } from '../../commonDb'; const MERMAID_DOM_ID_PREFIX = 'classid-'; let relations = []; let classes = {}; +let notes = []; let classCounter = 0; let funs = []; @@ -49,7 +52,9 @@ const splitClassNameAndType = function (id) { export const addClass = function (id) { let classId = splitClassNameAndType(id); // Only add class if not exists - if (typeof classes[classId.className] !== 'undefined') return; + if (classes[classId.className] !== undefined) { + return; + } classes[classId.className] = { id: classId.className, @@ -72,9 +77,9 @@ export const addClass = function (id) { */ export const lookUpDomId = function (id) { const classKeys = Object.keys(classes); - for (let i = 0; i < classKeys.length; i++) { - if (classes[classKeys[i]].id === id) { - return classes[classKeys[i]].domId; + for (const classKey of classKeys) { + if (classes[classKey].id === id) { + return classes[classKey].domId; } } }; @@ -82,6 +87,7 @@ export const lookUpDomId = function (id) { export const clear = function () { relations = []; classes = {}; + notes = []; funs = []; funs.push(setupToolTips); commonClear(); @@ -98,6 +104,10 @@ export const getRelations = function () { return relations; }; +export const getNotes = function () { + return notes; +}; + export const addRelation = function (relation) { log.debug('Adding relation: ' + JSON.stringify(relation)); addClass(relation.id1); @@ -168,6 +178,15 @@ export const addMembers = function (className, members) { } }; +export const addNote = function (text, className) { + const note = { + id: `note${notes.length}`, + class: className, + text: text, + }; + notes.push(note); +}; + export const cleanupLabel = function (label) { if (label.substring(0, 1) === ':') { return common.sanitizeText(label.substr(1).trim(), configApi.getConfig()); @@ -185,8 +204,10 @@ export const cleanupLabel = function (label) { export const setCssClass = function (ids, className) { ids.split(',').forEach(function (_id) { let id = _id; - if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; - if (typeof classes[id] !== 'undefined') { + if (_id[0].match(/\d/)) { + id = MERMAID_DOM_ID_PREFIX + id; + } + if (classes[id] !== undefined) { classes[id].cssClasses.push(className); } }); @@ -201,7 +222,7 @@ export const setCssClass = function (ids, className) { const setTooltip = function (ids, tooltip) { const config = configApi.getConfig(); ids.split(',').forEach(function (id) { - if (typeof tooltip !== 'undefined') { + if (tooltip !== undefined) { classes[id].tooltip = common.sanitizeText(tooltip, config); } }); @@ -220,8 +241,10 @@ export const setLink = function (ids, linkStr, target) { const config = configApi.getConfig(); ids.split(',').forEach(function (_id) { let id = _id; - if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; - if (typeof classes[id] !== 'undefined') { + if (_id[0].match(/\d/)) { + id = MERMAID_DOM_ID_PREFIX + id; + } + if (classes[id] !== undefined) { classes[id].link = utils.formatUrl(linkStr, config); if (config.securityLevel === 'sandbox') { classes[id].linkTarget = '_top'; @@ -258,10 +281,10 @@ const setClickFunc = function (domId, functionName, functionArgs) { if (config.securityLevel !== 'loose') { return; } - if (typeof functionName === 'undefined') { + if (functionName === undefined) { return; } - if (typeof classes[id] !== 'undefined') { + if (classes[id] !== undefined) { let argList = []; if (typeof functionArgs === 'string') { /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */ @@ -369,7 +392,9 @@ export default { clear, getClass, getClasses, + getNotes, addAnnotation, + addNote, getRelations, addRelation, getDirection, @@ -385,4 +410,6 @@ export default { getTooltip, setTooltip, lookUpDomId, + setDiagramTitle, + getDiagramTitle, }; diff --git a/packages/mermaid/src/diagrams/class/classDetector-V2.ts b/packages/mermaid/src/diagrams/class/classDetector-V2.ts index d65caf9a87..7100f6c665 100644 --- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts +++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts @@ -1,9 +1,13 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const classDetectorV2: DiagramDetector = (txt, config) => { - // If we have confgured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram - if (txt.match(/^\s*classDiagram/) !== null && config?.class?.defaultRenderer === 'dagre-wrapper') + // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram + if ( + txt.match(/^\s*classDiagram/) !== null && + config?.class?.defaultRenderer === 'dagre-wrapper' + ) { return true; + } // We have not opted to use the new renderer so we should return true if we detect a class diagram return txt.match(/^\s*classDiagram-v2/) !== null; }; diff --git a/packages/mermaid/src/diagrams/class/classDetector.ts b/packages/mermaid/src/diagrams/class/classDetector.ts index ef6389a604..c3833ed28c 100644 --- a/packages/mermaid/src/diagrams/class/classDetector.ts +++ b/packages/mermaid/src/diagrams/class/classDetector.ts @@ -1,8 +1,10 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const classDetector: DiagramDetector = (txt, config) => { - // If we have confgured to use dagre-wrapper then we should never return true in this function - if (config?.class?.defaultRenderer === 'dagre-wrapper') return false; + // If we have configured to use dagre-wrapper then we should never return true in this function + if (config?.class?.defaultRenderer === 'dagre-wrapper') { + return false; + } // We have not opted to use the new renderer so we should return true if we detect a class diagram return txt.match(/^\s*classDiagram/) !== null; }; diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.js b/packages/mermaid/src/diagrams/class/classDiagram.spec.js index 3f47701e60..04a8e9bf3c 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.js +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.js @@ -529,6 +529,16 @@ foo() parser.parse(str); }); + + it('should handle "note for"', function () { + const str = 'classDiagram\n' + 'Class11 <|.. Class12\n' + 'note for Class11 "test"\n'; + parser.parse(str); + }); + + it('should handle "note"', function () { + const str = 'classDiagram\n' + 'note "test"\n'; + parser.parse(str); + }); }); describe('when fetching data from a classDiagram graph it', function () { diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js index 20722e6d05..d95c29fd5f 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js @@ -1,15 +1,13 @@ import { select } from 'd3'; -import graphlib from 'graphlib'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger'; import { getConfig } from '../../config'; import { render } from '../../dagre-wrapper/index.js'; +import utils from '../../utils'; import { curveLinear } from 'd3'; import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { setupGraphViewbox } from '../../setupGraphViewbox'; import common from '../common/common'; -import addSVGAccessibilityFields from '../../accessibility'; - -let idCache = {}; const sanitizeText = (txt) => common.sanitizeText(txt, getConfig()); @@ -64,6 +62,7 @@ export const addClasses = function (classes, g, _id, diagObj) { // if (evaluate(getConfig().flowchart.htmlLabels)) { // const node = { // label: vertexText.replace( + // eslint-disable-next-line @cspell/spellchecker // /fa[lrsb]?:fa-[\w-]+/g, // s => `` // ) @@ -133,6 +132,99 @@ export const addClasses = function (classes, g, _id, diagObj) { }); }; +/** + * Function that adds the additional vertices (notes) found during parsing to the graph to be rendered. + * + * @param {{text: string; class: string; placement: number}[]} notes + * Object containing the additional vertices (notes). + * @param {SVGGElement} g The graph that is to be drawn. + * @param {number} startEdgeId starting index for note edge + * @param classes + */ +export const addNotes = function (notes, g, startEdgeId, classes) { + log.info(notes); + + // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition + notes.forEach(function (note, i) { + const vertex = note; + + /** + * Variable for storing the classes for the vertex + * + * @type {string} + */ + let cssNoteStr = ''; + + const styles = { labelStyle: '', style: '' }; + + // Use vertex id as text in the box if no text is provided by the graph definition + let vertexText = vertex.text; + + let radious = 0; + let _shape = 'note'; + // Add the node + g.setNode(vertex.id, { + labelStyle: styles.labelStyle, + shape: _shape, + labelText: sanitizeText(vertexText), + noteData: vertex, + rx: radious, + ry: radious, + class: cssNoteStr, + style: styles.style, + id: vertex.id, + domId: vertex.id, + tooltip: '', + type: 'note', + padding: getConfig().flowchart.padding, + }); + + log.info('setNode', { + labelStyle: styles.labelStyle, + shape: _shape, + labelText: vertexText, + rx: radious, + ry: radious, + style: styles.style, + id: vertex.id, + type: 'note', + padding: getConfig().flowchart.padding, + }); + + if (!vertex.class || !(vertex.class in classes)) { + return; + } + const edgeId = startEdgeId + i; + const edgeData = {}; + //Set relationship style and line type + edgeData.classes = 'relation'; + edgeData.pattern = 'dotted'; + + edgeData.id = `edgeNote${edgeId}`; + // Set link type for rendering + edgeData.arrowhead = 'none'; + + log.info(`Note edge: ${JSON.stringify(edgeData)}, ${JSON.stringify(vertex)}`); + //Set edge extra labels + edgeData.startLabelRight = ''; + edgeData.endLabelLeft = ''; + + //Set relation arrow types + edgeData.arrowTypeStart = 'none'; + edgeData.arrowTypeEnd = 'none'; + let style = 'fill:none'; + let labelStyle = ''; + + edgeData.style = style; + edgeData.labelStyle = labelStyle; + + edgeData.curve = interpolateToCurve(conf.curve, curveLinear); + + // Add the edge to the graph + g.setEdge(vertex.id, vertex.class, edgeData, edgeId); + }); +}; + /** * Add edges to graph based on parsed graph definition * @@ -180,16 +272,16 @@ export const addRelations = function (relations, g) { let style = ''; let labelStyle = ''; - if (typeof edge.style !== 'undefined') { + if (edge.style !== undefined) { const styles = getStylesFromArray(edge.style); style = styles.style; labelStyle = styles.labelStyle; } else { style = 'fill:none'; - if (typeof defaultStyle !== 'undefined') { + if (defaultStyle !== undefined) { style = defaultStyle; } - if (typeof defaultLabelStyle !== 'undefined') { + if (defaultLabelStyle !== undefined) { labelStyle = defaultLabelStyle; } } @@ -197,17 +289,17 @@ export const addRelations = function (relations, g) { edgeData.style = style; edgeData.labelStyle = labelStyle; - if (typeof edge.interpolate !== 'undefined') { + if (edge.interpolate !== undefined) { edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); - } else if (typeof relations.defaultInterpolate !== 'undefined') { + } else if (relations.defaultInterpolate !== undefined) { edgeData.curve = interpolateToCurve(relations.defaultInterpolate, curveLinear); } else { edgeData.curve = interpolateToCurve(conf.curve, curveLinear); } edge.text = edge.title; - if (typeof edge.text === 'undefined') { - if (typeof edge.style !== 'undefined') { + if (edge.text === undefined) { + if (edge.style !== undefined) { edgeData.arrowheadStyle = 'fill: #333'; } } else { @@ -221,7 +313,7 @@ export const addRelations = function (relations, g) { edgeData.labelType = 'text'; edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); - if (typeof edge.style === 'undefined') { + if (edge.style === undefined) { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; } @@ -304,10 +396,12 @@ export const draw = function (text, id, _version, diagObj) { // Fetch the vertices/nodes and edges/links from the parsed graph definition const classes = diagObj.db.getClasses(); const relations = diagObj.db.getRelations(); + const notes = diagObj.db.getNotes(); log.info(relations); addClasses(classes, g, id, diagObj); addRelations(relations, g); + addNotes(notes, g, relations.length + 1, classes); // Add custom shapes // flowChartShapes.addToRenderV2(addShape); @@ -333,15 +427,15 @@ export const draw = function (text, id, _version, diagObj) { id ); + utils.insertTitle(svg, 'classTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); + setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth); // Add label rects for non html labels if (!conf.htmlLabels) { const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); - for (let k = 0; k < labels.length; k++) { - const label = labels[k]; - + for (const label of labels) { // Get dimensions of label const dim = label.getBBox(); @@ -356,7 +450,6 @@ export const draw = function (text, id, _version, diagObj) { } } - addSVGAccessibilityFields(diagObj.db, svg, id); // If node has a link, wrap it in an anchor SVG object. // const keys = Object.keys(classes); // keys.forEach(function(key) { diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js index c1236afea7..80a7f26e46 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer.js +++ b/packages/mermaid/src/diagrams/class/classRenderer.js @@ -1,11 +1,10 @@ import { select } from 'd3'; -import dagre from 'dagre'; -import graphlib from 'graphlib'; +import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger'; import svgDraw from './svgDraw'; import { configureSvgSize } from '../../setupGraphViewbox'; import { getConfig } from '../../config'; -import addSVGAccessibilityFields from '../../accessibility'; let idCache = {}; const padding = 20; @@ -148,7 +147,7 @@ export const draw = function (text, id, _version, diagObj) { log.info('Rendering diagram ' + text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -180,8 +179,8 @@ export const draw = function (text, id, _version, diagObj) { const classes = diagObj.db.getClasses(); const keys = Object.keys(classes); - for (let i = 0; i < keys.length; i++) { - const classDef = classes[keys[i]]; + for (const key of keys) { + const classDef = classes[key]; const node = svgDraw.drawClass(diagram, classDef, conf, diagObj); idCache[node.id] = node; @@ -208,12 +207,42 @@ export const draw = function (text, id, _version, diagObj) { ); }); - dagre.layout(g); + const notes = diagObj.db.getNotes(); + notes.forEach(function (note) { + log.debug(`Adding note: ${JSON.stringify(note)}`); + const node = svgDraw.drawNote(diagram, note, conf, diagObj); + idCache[node.id] = node; + + // Add nodes to the graph. The first argument is the node id. The second is + // metadata about the node. In this case we're going to add labels to each of + // our nodes. + g.setNode(node.id, node); + if (note.class && note.class in classes) { + g.setEdge( + note.id, + getGraphId(note.class), + { + relation: { + id1: note.id, + id2: note.class, + relation: { + type1: 'none', + type2: 'none', + lineType: 10, + }, + }, + }, + 'DEFAULT' + ); + } + }); + + dagreLayout(g); g.nodes().forEach(function (v) { - if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { + if (v !== undefined && g.node(v) !== undefined) { log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))); root - .select('#' + diagObj.db.lookUpDomId(v)) + .select('#' + (diagObj.db.lookUpDomId(v) || v)) .attr( 'transform', 'translate(' + @@ -226,7 +255,7 @@ export const draw = function (text, id, _version, diagObj) { }); g.edges().forEach(function (e) { - if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') { + if (e !== undefined && g.edge(e) !== undefined) { log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e))); svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf, diagObj); } @@ -242,7 +271,6 @@ export const draw = function (text, id, _version, diagObj) { const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`; log.debug(`viewBox ${vBox}`); diagram.attr('viewBox', vBox); - addSVGAccessibilityFields(diagObj.db, diagram, id); }; export default { diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index ba0e69fbab..157e3d7d81 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -56,6 +56,8 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili "callback" return 'CALLBACK'; "link" return 'LINK'; "click" return 'CLICK'; +"note for" return 'NOTE_FOR'; +"note" return 'NOTE'; "<<" return 'ANNOTATION_START'; ">>" return 'ANNOTATION_END'; [~] this.begin("generic"); @@ -263,6 +265,7 @@ statement | annotationStatement | clickStatement | cssClassStatement + | noteStatement | directive | direction | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } @@ -300,6 +303,11 @@ relationStatement | className STR relation STR className { $$ = {id1:$1, id2:$5, relation:$3, relationTitle1:$2, relationTitle2:$4} } ; +noteStatement + : NOTE_FOR className noteText { yy.addNote($3, $2); } + | NOTE noteText { yy.addNote($2); } + ; + relation : relationType lineType relationType { $$={type1:$1,type2:$3,lineType:$2}; } | lineType relationType { $$={type1:'none',type2:$2,lineType:$1}; } @@ -351,4 +359,6 @@ alphaNumToken : UNICODE_TEXT | NUM | ALPHA; classLiteralName : BQUOTE_STR; +noteText : STR; + %% diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js index 9e7665c586..981cd7b730 100644 --- a/packages/mermaid/src/diagrams/class/styles.js +++ b/packages/mermaid/src/diagrams/class/styles.js @@ -80,6 +80,10 @@ g.classGroup line { stroke-dasharray: 3; } +.dotted-line{ + stroke-dasharray: 1 2; +} + #compositionStart, .composition { fill: ${options.lineColor} !important; stroke: ${options.lineColor} !important; @@ -105,13 +109,13 @@ g.classGroup line { } #extensionStart, .extension { - fill: ${options.lineColor} !important; + fill: ${options.mainBkg} !important; stroke: ${options.lineColor} !important; stroke-width: 1; } #extensionEnd, .extension { - fill: ${options.lineColor} !important; + fill: ${options.mainBkg} !important; stroke: ${options.lineColor} !important; stroke-width: 1; } @@ -144,6 +148,11 @@ g.classGroup line { font-size: 11px; } +.classTitleText { + text-anchor: middle; + font-size: 18px; + fill: ${options.textColor}; +} `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/class/svgDraw.js b/packages/mermaid/src/diagrams/class/svgDraw.js index 9a4dc761e2..cc6909280f 100644 --- a/packages/mermaid/src/diagrams/class/svgDraw.js +++ b/packages/mermaid/src/diagrams/class/svgDraw.js @@ -9,13 +9,13 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { switch (type) { case diagObj.db.relationType.AGGREGATION: return 'aggregation'; - case diagObj.db.EXTENSION: + case diagObj.db.relationType.EXTENSION: return 'extension'; - case diagObj.db.COMPOSITION: + case diagObj.db.relationType.COMPOSITION: return 'composition'; - case diagObj.db.DEPENDENCY: + case diagObj.db.relationType.DEPENDENCY: return 'dependency'; - case diagObj.db.LOLLIPOP: + case diagObj.db.relationType.LOLLIPOP: return 'lollipop'; } }; @@ -55,6 +55,9 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { if (relation.relation.lineType == 1) { svgPath.attr('class', 'relation dashed-line'); } + if (relation.relation.lineType == 10) { + svgPath.attr('class', 'relation dotted-line'); + } if (relation.relation.type1 !== 'none') { svgPath.attr( 'marker-start', @@ -99,7 +102,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { p2_card_y = cardinality_2_point.y; } - if (typeof relation.title !== 'undefined') { + if (relation.title !== undefined) { const g = elem.append('g').attr('class', 'classLabel'); const label = g .append('text') @@ -122,7 +125,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { } log.info('Rendering relation ' + JSON.stringify(relation)); - if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') { + if (relation.relationTitle1 !== undefined && relation.relationTitle1 !== 'none') { const g = elem.append('g').attr('class', 'cardinality'); g.append('text') .attr('class', 'type1') @@ -132,7 +135,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) { .attr('font-size', '6') .text(relation.relationTitle1); } - if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') { + if (relation.relationTitle2 !== undefined && relation.relationTitle2 !== 'none') { const g = elem.append('g').attr('class', 'cardinality'); g.append('text') .attr('class', 'type2') @@ -190,7 +193,9 @@ export const drawClass = function (elem, classDef, conf, diagObj) { let isFirst = true; classDef.annotations.forEach(function (member) { const titleText2 = title.append('tspan').text('«' + member + '»'); - if (!isFirst) titleText2.attr('dy', conf.textHeight); + if (!isFirst) { + titleText2.attr('dy', conf.textHeight); + } isFirst = false; }); @@ -203,7 +208,9 @@ export const drawClass = function (elem, classDef, conf, diagObj) { const classTitle = title.append('tspan').text(classTitleString).attr('class', 'title'); // If class has annotations the title needs to have an offset of the text height - if (!isFirst) classTitle.attr('dy', conf.textHeight); + if (!isFirst) { + classTitle.attr('dy', conf.textHeight); + } const titleHeight = title.node().getBBox().height; @@ -284,9 +291,72 @@ export const drawClass = function (elem, classDef, conf, diagObj) { return classInfo; }; +/** + * Renders a note diagram + * + * @param {SVGSVGElement} elem The element to draw it into + * @param {{id: string; text: string; class: string;}} note + * @param conf + * @param diagObj + * @todo Add more information in the JSDOC here + */ +export const drawNote = function (elem, note, conf, diagObj) { + log.debug('Rendering note ', note, conf); + + const id = note.id; + const noteInfo = { + id: id, + text: note.text, + width: 0, + height: 0, + }; + + // add class group + const g = elem.append('g').attr('id', id).attr('class', 'classGroup'); + + // add text + let text = g + .append('text') + .attr('y', conf.textHeight + conf.padding) + .attr('x', 0); + + const lines = JSON.parse(`"${note.text}"`).split('\n'); + + lines.forEach(function (line) { + log.debug(`Adding line: ${line}`); + text.append('tspan').text(line).attr('class', 'title').attr('dy', conf.textHeight); + }); + + const noteBox = g.node().getBBox(); + + const rect = g + .insert('rect', ':first-child') + .attr('x', 0) + .attr('y', 0) + .attr('width', noteBox.width + 2 * conf.padding) + .attr( + 'height', + noteBox.height + lines.length * conf.textHeight + conf.padding + 0.5 * conf.dividerMargin + ); + + const rectWidth = rect.node().getBBox().width; + + // Center title + // We subtract the width of each text element from the class box width and divide it by 2 + text.node().childNodes.forEach(function (x) { + x.setAttribute('x', (rectWidth - x.getBBox().width) / 2); + }); + + noteInfo.width = rectWidth; + noteInfo.height = + noteBox.height + lines.length * conf.textHeight + conf.padding + 0.5 * conf.dividerMargin; + + return noteInfo; +}; + export const parseMember = function (text) { - const fieldRegEx = /^(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+) *(\*|\$)?$/; - const methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/; + const fieldRegEx = /^([#+~-])?(\w+)(~\w+~|\[])?\s+(\w+) *([$*])?$/; + const methodRegEx = /^([#+|~-])?(\w+) *\( *(.*)\) *([$*])? *(\w*[[\]|~]*\s*\w*~?)$/; let fieldMatch = text.match(fieldRegEx); let methodMatch = text.match(methodRegEx); @@ -347,10 +417,9 @@ const buildMethodDisplay = function (parsedText) { }; const buildLegacyDisplay = function (text) { - // if for some reason we dont have any match, use old format to parse text + // if for some reason we don't have any match, use old format to parse text let displayText = ''; let cssStyle = ''; - let memberText = ''; let returnType = ''; let methodStart = text.indexOf('('); let methodEnd = text.indexOf(')'); @@ -363,7 +432,7 @@ const buildLegacyDisplay = function (text) { if (firstChar.match(/\w/)) { methodName = text.substring(0, methodStart).trim(); } else { - if (firstChar.match(/\+|-|~|#/)) { + if (firstChar.match(/[#+~-]/)) { visibility = firstChar; } @@ -435,5 +504,6 @@ const parseClassifier = function (classifier) { export default { drawClass, drawEdge, + drawNote, parseMember, }; diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 9f6ae2cdbb..628908aab6 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -4,11 +4,13 @@ import { MermaidConfig } from '../../config.type'; /** * Gets the rows of lines in a string * - * @param {string | undefined} s The string to check the lines for - * @returns {string[]} The rows in that string + * @param s - The string to check the lines for + * @returns The rows in that string */ export const getRows = (s?: string): string[] => { - if (!s) return ['']; + if (!s) { + return ['']; + } const str = breakToPlaceholder(s).replace(/\\n/g, '#br#'); return str.split('#br#'); }; @@ -16,8 +18,8 @@ export const getRows = (s?: string): string[] => { /** * Removes script tags from a text * - * @param {string} txt The text to sanitize - * @returns {string} The safer text + * @param txt - The text to sanitize + * @returns The safer text */ export const removeScript = (txt: string): string => { return DOMPurify.sanitize(txt); @@ -39,11 +41,15 @@ const sanitizeMore = (text: string, config: MermaidConfig) => { }; export const sanitizeText = (text: string, config: MermaidConfig): string => { - if (!text) return text; + if (!text) { + return text; + } if (config.dompurifyConfig) { text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString(); } else { - text = DOMPurify.sanitize(sanitizeMore(text, config)); + text = DOMPurify.sanitize(sanitizeMore(text, config), { + FORBID_TAGS: ['style'], + }).toString(); } return text; }; @@ -52,7 +58,9 @@ export const sanitizeTextOrArray = ( a: string | string[] | string[][], config: MermaidConfig ): string | string[] => { - if (typeof a === 'string') return sanitizeText(a, config); + if (typeof a === 'string') { + return sanitizeText(a, config); + } // TODO: Refactor to avoid flat. return a.flat().map((x: string) => sanitizeText(x, config)); }; @@ -60,10 +68,10 @@ export const sanitizeTextOrArray = ( export const lineBreakRegex = //gi; /** - * Whether or not a text has any linebreaks + * Whether or not a text has any line breaks * - * @param {string} text The text to test - * @returns {boolean} Whether or not the text has breaks + * @param text - The text to test + * @returns Whether or not the text has breaks */ export const hasBreaks = (text: string): boolean => { return lineBreakRegex.test(text); @@ -72,18 +80,18 @@ export const hasBreaks = (text: string): boolean => { /** * Splits on
tags * - * @param {string} text Text to split - * @returns {string[]} List of lines as strings + * @param text - Text to split + * @returns List of lines as strings */ export const splitBreaks = (text: string): string[] => { return text.split(lineBreakRegex); }; /** - * Converts placeholders to linebreaks in HTML + * Converts placeholders to line breaks in HTML * - * @param {string} s HTML with placeholders - * @returns {string} HTML with breaks instead of placeholders + * @param s - HTML with placeholders + * @returns HTML with breaks instead of placeholders */ const placeholderToBreak = (s: string): string => { return s.replace(/#br#/g, '
'); @@ -92,8 +100,8 @@ const placeholderToBreak = (s: string): string => { /** * Opposite of `placeholderToBreak`, converts breaks to placeholders * - * @param {string} s HTML string - * @returns {string} String with placeholders + * @param s - HTML string + * @returns String with placeholders */ const breakToPlaceholder = (s: string): string => { return s.replace(lineBreakRegex, '#br#'); @@ -102,8 +110,8 @@ const breakToPlaceholder = (s: string): string => { /** * Gets the current URL * - * @param {boolean} useAbsolute Whether to return the absolute URL or not - * @returns {string} The current URL + * @param useAbsolute - Whether to return the absolute URL or not + * @returns The current URL */ const getUrl = (useAbsolute: boolean): string => { let url = ''; @@ -124,8 +132,8 @@ const getUrl = (useAbsolute: boolean): string => { /** * Converts a string/boolean into a boolean * - * @param {string | boolean} val String or boolean to convert - * @returns {boolean} The result from the input + * @param val - String or boolean to convert + * @returns The result from the input */ export const evaluate = (val?: string | boolean): boolean => val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true; @@ -133,17 +141,20 @@ export const evaluate = (val?: string | boolean): boolean => /** * Makes generics in typescript syntax * - * @example
- * // returns "Array>" - * parseGenericTypes('Array~Array~string~~'); + * @example + * Array of array of strings in typescript syntax * - * @param {string} text The text to convert - * @returns {string} The converted string + * ```js + * // returns "Array>" + * parseGenericTypes('Array~Array~string~~'); + * ``` + * @param text - The text to convert + * @returns The converted string */ export const parseGenericTypes = function (text: string): string { let cleanedText = text; - if (text.indexOf('~') !== -1) { + if (text.includes('~')) { cleanedText = cleanedText.replace(/~([^~].*)/, '<$1'); cleanedText = cleanedText.replace(/~([^~]*)$/, '>$1'); diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js index ad3454f846..026e084204 100644 --- a/packages/mermaid/src/diagrams/er/erDb.js +++ b/packages/mermaid/src/diagrams/er/erDb.js @@ -8,6 +8,8 @@ import { getAccDescription, setAccDescription, clear as commonClear, + setDiagramTitle, + getDiagramTitle, } from '../../commonDb'; let entities = {}; @@ -30,7 +32,7 @@ export const parseDirective = function (statement, context, type) { }; const addEntity = function (name) { - if (typeof entities[name] === 'undefined') { + if (entities[name] === undefined) { entities[name] = { attributes: [] }; log.info('Added new entity :', name); } @@ -94,4 +96,6 @@ export default { getAccTitle, setAccDescription, getAccDescription, + setDiagramTitle, + getDiagramTitle, }; diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index a6277f27da..e8b80b6468 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -1,16 +1,16 @@ -import graphlib from 'graphlib'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { line, curveBasis, select } from 'd3'; -import dagre from 'dagre'; +import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; import { getConfig } from '../../config'; import { log } from '../../logger'; +import utils from '../../utils'; import erMarkers from './erMarkers'; import { configureSvgSize } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; import { parseGenericTypes } from '../common/common'; import { v4 as uuid4 } from 'uuid'; /** Regex used to remove chars from the entity name so the result can be used in an id */ -const BAD_ID_CHARS_REGEXP = /[^A-Za-z0-9]([\W])*/g; +const BAD_ID_CHARS_REGEXP = /[^\dA-Za-z](\W)*/g; // Configuration let conf = {}; @@ -27,8 +27,8 @@ let entityNameIds = new Map(); */ export const setConf = function (cnf) { const keys = Object.keys(cnf); - for (let i = 0; i < keys.length; i++) { - conf[keys[i]] = cnf[keys[i]]; + for (const key of keys) { + conf[key] = cnf[key]; } }; @@ -77,31 +77,27 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Add a text node for the attribute type const typeNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-type`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(attributeType); // Add a text node for the attribute name const nameNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-name`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(item.attributeName); const attributeNode = {}; @@ -118,16 +114,14 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { if (hasKeyType) { const keyTypeNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-key`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(item.attributeKeyType || ''); attributeNode.kn = keyTypeNode; @@ -139,16 +133,14 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { if (hasComment) { const commentNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-comment`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(item.attributeComment || ''); attributeNode.cn = commentNode; @@ -217,10 +209,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the type const typeRect = groupNode .insert('rect', '#' + attributeNode.tn.node().id) - .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .classed(`er ${attribStyle}`, true) .attr('x', 0) .attr('y', heightOffset) .attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth) @@ -237,10 +226,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the name const nameRect = groupNode .insert('rect', '#' + attributeNode.nn.node().id) - .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .classed(`er ${attribStyle}`, true) .attr('x', nameXOffset) .attr('y', heightOffset) .attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth) @@ -259,10 +245,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the key type const keyTypeRect = groupNode .insert('rect', '#' + attributeNode.kn.node().id) - .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .classed(`er ${attribStyle}`, true) .attr('x', keyTypeAndCommentXOffset) .attr('y', heightOffset) .attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth) @@ -282,10 +265,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the comment groupNode .insert('rect', '#' + attributeNode.cn.node().id) - .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .classed(`er ${attribStyle}`, 'true') .attr('x', keyTypeAndCommentXOffset) .attr('y', heightOffset) .attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth) @@ -335,16 +315,14 @@ const drawEntities = function (svgNode, entities, graph) { const textId = 'text-' + entityId; const textNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', textId) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'middle') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'middle') + .style('font-family', getConfig().fontFamily) + .style('font-size', conf.fontSize + 'px') .text(entityName); const { width: entityWidth, height: entityHeight } = drawAttributes( @@ -356,10 +334,7 @@ const drawEntities = function (svgNode, entities, graph) { // Draw the rectangle - insert it before the text so that the text is not obscured const rectNode = groupNode .insert('rect', '#' + textId) - .attr('class', 'er entityBox') - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .classed('er entityBox', true) .attr('x', 0) .attr('y', 0) .attr('width', entityWidth) @@ -380,7 +355,7 @@ const drawEntities = function (svgNode, entities, graph) { const adjustEntities = function (svgNode, graph) { graph.nodes().forEach(function (v) { - if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') { + if (v !== undefined && graph.node(v) !== undefined) { svgNode .select('#' + v) .attr( @@ -411,7 +386,7 @@ const getEdgeName = function (rel) { * Add each relationship to the graph * * @param relationships The relationships to be added - * @param {Graph} g The graph + * @param g The graph * @returns {Array} The array of relationships */ const addRelationships = function (relationships, g) { @@ -460,10 +435,10 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { // Insert the line at the right place const svgPath = svg .insert('path', '#' + insert) - .attr('class', 'er relationshipLine') + .classed('er relationshipLine', true) .attr('d', lineFunction(edge.points)) - .attr('stroke', conf.stroke) - .attr('fill', 'none'); + .style('stroke', conf.stroke) + .style('fill', 'none'); // ...and with dashes if necessary if (rel.relSpec.relType === diagObj.db.Identification.NON_IDENTIFYING) { @@ -537,16 +512,14 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { const labelNode = svg .append('text') - .attr('class', 'er relationshipLabel') + .classed('er relationshipLabel', true) .attr('id', labelId) .attr('x', labelPoint.x) .attr('y', labelPoint.y) - .attr('text-anchor', 'middle') - .attr('dominant-baseline', 'middle') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px' - ) + .style('text-anchor', 'middle') + .style('dominant-baseline', 'middle') + .style('font-family', getConfig().fontFamily) + .style('font-size', conf.fontSize + 'px') .text(rel.roleA); // Figure out how big the opaque 'container' rectangle needs to be @@ -555,13 +528,11 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { // Insert the opaque rectangle before the text label svg .insert('rect', '#' + labelId) - .attr('class', 'er relationshipLabelBox') + .classed('er relationshipLabelBox', true) .attr('x', labelPoint.x - labelBBox.width / 2) .attr('y', labelPoint.y - labelBBox.height / 2) .attr('width', labelBBox.width) - .attr('height', labelBBox.height) - .attr('fill', 'white') - .attr('fill-opacity', '85%'); + .attr('height', labelBBox.height); }; /** @@ -644,12 +615,12 @@ export const draw = function (text, id, _version, diagObj) { // inserted - this represents the insertion point for relationship paths const firstEntity = drawEntities(svg, diagObj.db.getEntities(), g); - // TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above + // TODO: externalize the addition of entities to the graph - it's a bit 'buried' in the above // Add all the relationships to the graph const relationships = addRelationships(diagObj.db.getRelationships(), g); - dagre.layout(g); // Node and edge positions will be updated + dagreLayout(g); // Node and edge positions will be updated // Adjust the positions of the entities so that they adhere to the layout adjustEntities(svg, g); @@ -661,6 +632,8 @@ export const draw = function (text, id, _version, diagObj) { const padding = conf.diagramPadding; + utils.insertTitle(svg, 'entityTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); + const svgBounds = svg.node().getBBox(); const width = svgBounds.width + padding * 2; const height = svgBounds.height + padding * 2; @@ -668,8 +641,6 @@ export const draw = function (text, id, _version, diagObj) { configureSvgSize(svg, height, width, conf.useMaxWidth); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); - - addSVGAccessibilityFields(diagObj.db, svg, id); }; // draw /** @@ -678,10 +649,8 @@ export const draw = function (text, id, _version, diagObj) { * Although the official XML standard for ids says that many more characters are valid in the id, * this keeps things simple by accepting only A-Za-z0-9. * - * @param {string} [str?=''] Given string to use as the basis for the id. Default is `''` - * @param {string} [prefix?=''] String to put at the start, followed by '-'. Default is `''` - * @param str - * @param prefix + * @param {string} str Given string to use as the basis for the id. Default is `''` + * @param {string} prefix String to put at the start, followed by '-'. Default is `''` * @returns {string} * @see https://www.w3.org/TR/xml/#NT-Name */ diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison index 6294599b56..f0411fd724 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison @@ -36,15 +36,32 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\n]+ /* nothing */ "}" { this.popState(); return 'BLOCK_STOP'; } . return yytext[0]; + +"one or zero" return 'ZERO_OR_ONE'; +"one or more" return 'ONE_OR_MORE'; +"one or many" return 'ONE_OR_MORE'; +"1+" return 'ONE_OR_MORE'; \|o return 'ZERO_OR_ONE'; +"zero or one" return 'ZERO_OR_ONE'; +"zero or more" return 'ZERO_OR_MORE'; +"zero or many" return 'ZERO_OR_MORE'; +"0+" return 'ZERO_OR_MORE'; \}o return 'ZERO_OR_MORE'; +"many(0)" return 'ZERO_OR_MORE'; +"many(1)" return 'ONE_OR_MORE'; +"many" return 'ZERO_OR_MORE'; \}\| return 'ONE_OR_MORE'; +"one" return 'ONLY_ONE'; +"only one" return 'ONLY_ONE'; +"1" return 'ONLY_ONE'; \|\| return 'ONLY_ONE'; o\| return 'ZERO_OR_ONE'; o\{ return 'ZERO_OR_MORE'; \|\{ return 'ONE_OR_MORE'; \.\. return 'NON_IDENTIFYING'; \-\- return 'IDENTIFYING'; +"to" return 'IDENTIFYING'; +"optionally to" return 'NON_IDENTIFYING'; \.\- return 'NON_IDENTIFYING'; \-\. return 'NON_IDENTIFYING'; [A-Za-z][A-Za-z0-9\-_]* return 'ALPHANUM'; diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 1d891ffeab..43bc13e6dc 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -323,34 +323,34 @@ describe('when parsing ER diagram it...', function () { expect(Object.keys(erDb.getEntities()).length).toBe(1); }); - it('should allow for a accessibility title and description (accDescr)', function () { + describe('accessible title and description', () => { const teacherRole = 'is teacher of'; const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`; - erDiagram.parser.parse( - `erDiagram + it('should allow for a accessibility title and description (accDescr)', function () { + erDiagram.parser.parse( + `erDiagram accTitle: graph title accDescr: this graph is about stuff ${line1}` - ); - expect(erDb.getAccTitle()).toBe('graph title'); - expect(erDb.getAccDescription()).toBe('this graph is about stuff'); - }); - - it('should allow for a accessibility title and multi line description (accDescr)', function () { - const teacherRole = 'is teacher of'; - const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`; + ); + expect(erDb.getAccTitle()).toBe('graph title'); + expect(erDb.getAccDescription()).toBe('this graph is about stuff'); + }); - erDiagram.parser.parse( - `erDiagram + it('parses a multi line description (accDescr)', function () { + erDiagram.parser.parse( + `erDiagram accTitle: graph title - accDescr { - this graph is about stuff - }\n + accDescr { this graph is + about + stuff + }\n ${line1}` - ); - expect(erDb.getAccTitle()).toBe('graph title'); - expect(erDb.getAccDescription()).toBe('this graph is about stuff'); + ); + expect(erDb.getAccTitle()).toEqual('graph title'); + expect(erDb.getAccDescription()).toEqual('this graph is\nabout\nstuff'); + }); }); it('should allow more than one relationship between the same two entities', function () { @@ -532,18 +532,100 @@ describe('when parsing ER diagram it...', function () { expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONE_OR_MORE); }); + it('should handle zero-or-one-to-zero-or-more relationships (aliases "one or zero" and "zero or many")', function () { + erDiagram.parser.parse('erDiagram\nA one or zero to many B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_ONE); + }); + + it('should handle one-or-more-to-zero-or-one relationships (aliases "one or many" and "zero or one")', function () { + erDiagram.parser.parse('erDiagram\nA one or many optionally to zero or one B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_ONE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONE_OR_MORE); + }); + + it('should handle zero-or-more-to-zero-or-more relationships (aliases "zero or more" and "zero or many")', function () { + erDiagram.parser.parse('erDiagram\nA zero or more to zero or many B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + + it('should handle zero-or-more-to-one-or-more relationships (aliases "many(0)" and "many(1)")', function () { + erDiagram.parser.parse('erDiagram\nA many(0) to many(1) B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONE_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + + it('should handle zero-or-more-to-only-one relationships (aliases "many(0)" and "many(1)")', function () { + erDiagram.parser.parse('erDiagram\nA many optionally to one B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONLY_ONE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + + it('should handle only-one-to-only-one relationships (aliases "only one" and "1+")', function () { + erDiagram.parser.parse('erDiagram\nA only one optionally to 1+ B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONE_OR_MORE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONLY_ONE); + }); + + it('should handle zero-or-more-to-only-one relationships (aliases "0+" and "1")', function () { + erDiagram.parser.parse('erDiagram\nA 0+ optionally to 1 B : has'); + const rels = erDb.getRelationships(); + + expect(Object.keys(erDb.getEntities()).length).toBe(2); + expect(rels.length).toBe(1); + expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONLY_ONE); + expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE); + }); + it('should represent identifying relationships properly', function () { erDiagram.parser.parse('erDiagram\nHOUSE ||--|{ ROOM : contains'); const rels = erDb.getRelationships(); expect(rels[0].relSpec.relType).toBe(erDb.Identification.IDENTIFYING); }); + it('should represent identifying relationships properly (alias "to")', function () { + erDiagram.parser.parse('erDiagram\nHOUSE one to one ROOM : contains'); + const rels = erDb.getRelationships(); + expect(rels[0].relSpec.relType).toBe(erDb.Identification.IDENTIFYING); + }); + it('should represent non-identifying relationships properly', function () { erDiagram.parser.parse('erDiagram\n PERSON ||..o{ POSSESSION : owns'); const rels = erDb.getRelationships(); expect(rels[0].relSpec.relType).toBe(erDb.Identification.NON_IDENTIFYING); }); + it('should represent non-identifying relationships properly (alias "optionally to")', function () { + erDiagram.parser.parse('erDiagram\n PERSON many optionally to many POSSESSION : owns'); + const rels = erDb.getRelationships(); + expect(rels[0].relSpec.relType).toBe(erDb.Identification.NON_IDENTIFYING); + }); + it('should not accept a syntax error', function () { const doc = 'erDiagram\nA xxx B : has'; expect(() => { diff --git a/packages/mermaid/src/diagrams/er/styles.js b/packages/mermaid/src/diagrams/er/styles.js index 907d813b67..42dbcebdee 100644 --- a/packages/mermaid/src/diagrams/er/styles.js +++ b/packages/mermaid/src/diagrams/er/styles.js @@ -27,6 +27,12 @@ const getStyles = (options) => .relationshipLine { stroke: ${options.lineColor}; } + + .entityTitleText { + text-anchor: middle; + font-size: 18px; + fill: ${options.textColor}; + } `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index df9ce2c6e6..b4e267684d 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -8,7 +8,7 @@ let conf = {}; /** * Merges the value of `conf` with the passed `cnf` * - * @param {object} cnf Config to merge + * @param cnf - Config to merge */ export const setConf = function (cnf: any) { conf = { ...conf, ...cnf }; @@ -17,11 +17,11 @@ export const setConf = function (cnf: any) { /** * Draws a an info picture in the tag with id: id based on the graph definition in text. * - * @param text - * @param {string} id The text for the error - * @param {string} mermaidVersion The version + * @param _text - Mermaid graph definition. + * @param id - The text for the error + * @param mermaidVersion - The version */ -export const draw = (text: string, id: string, mermaidVersion: string) => { +export const draw = (_text: string, id: string, mermaidVersion: string) => { try { log.debug('Renering svg for syntax error\n'); diff --git a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js index 083c52a03b..d02d484c4f 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js +++ b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js @@ -1,4 +1,5 @@ -import dagreD3 from 'dagre-d3'; +import { intersectPolygon } from 'dagre-d3-es/src/dagre-js/intersect/intersect-polygon.js'; +import { intersectRect } from 'dagre-d3-es/src/dagre-js/intersect/intersect-rect.js'; /** * @param parent @@ -17,7 +18,7 @@ function question(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, s, s, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -42,7 +43,7 @@ function hexagon(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -64,7 +65,7 @@ function rect_left_inv_arrow(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -85,7 +86,7 @@ function lean_right(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -106,7 +107,7 @@ function lean_left(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -127,7 +128,7 @@ function trapezoid(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -148,7 +149,7 @@ function inv_trapezoid(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -170,7 +171,7 @@ function rect_right_inv_arrow(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -194,7 +195,7 @@ function stadium(parent, bbox, node) { .attr('height', h); node.intersect = function (point) { - return dagreD3.intersect.rect(node, point); + return intersectRect(node, point); }; return shapeSvg; } @@ -221,7 +222,7 @@ function subroutine(parent, bbox, node) { ]; const shapeSvg = insertPolygonShape(parent, w, h, points); node.intersect = function (point) { - return dagreD3.intersect.polygon(node, points, point); + return intersectPolygon(node, points, point); }; return shapeSvg; } @@ -270,7 +271,7 @@ function cylinder(parent, bbox, node) { .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')'); node.intersect = function (point) { - const pos = dagreD3.intersect.rect(node, point); + const pos = intersectRect(node, point); const x = pos.x - node.x; if ( @@ -279,11 +280,15 @@ function cylinder(parent, bbox, node) { (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry)) ) { // ellipsis equation: x*x / a*a + y*y / b*b = 1 - // solve for y to get adjustion value for pos.y + // solve for y to get adjusted value for pos.y let y = ry * ry * (1 - (x * x) / (rx * rx)); - if (y != 0) y = Math.sqrt(y); + if (y != 0) { + y = Math.sqrt(y); + } y = ry - y; - if (point.y - node.y > 0) y = -y; + if (point.y - node.y > 0) { + y = -y; + } pos.y += y; } diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 4712994d5a..9181ab9cca 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -10,6 +10,8 @@ import { getAccDescription, setAccDescription, clear as commonClear, + setDiagramTitle, + getDiagramTitle, } from '../../commonDb'; const MERMAID_DOM_ID_PREFIX = 'flowchart-'; @@ -17,7 +19,7 @@ let vertexCounter = 0; let config = configApi.getConfig(); let vertices = {}; let edges = []; -let classes = []; +let classes = {}; let subGraphs = []; let subGraphLookup = {}; let tooltips = {}; @@ -44,9 +46,9 @@ export const parseDirective = function (statement, context, type) { */ export const lookUpDomId = function (id) { const veritceKeys = Object.keys(vertices); - for (let i = 0; i < veritceKeys.length; i++) { - if (vertices[veritceKeys[i]].id === id) { - return vertices[veritceKeys[i]].domId; + for (const veritceKey of veritceKeys) { + if (vertices[veritceKey].id === id) { + return vertices[veritceKey].domId; } } return id; @@ -66,7 +68,7 @@ export const lookUpDomId = function (id) { export const addVertex = function (_id, text, type, style, classes, dir, props = {}) { let txt; let id = _id; - if (typeof id === 'undefined') { + if (id === undefined) { return; } if (id.trim().length === 0) { @@ -75,7 +77,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props = // if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; - if (typeof vertices[id] === 'undefined') { + if (vertices[id] === undefined) { vertices[id] = { id: id, domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter, @@ -84,7 +86,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props = }; } vertexCounter++; - if (typeof text !== 'undefined') { + if (text !== undefined) { config = configApi.getConfig(); txt = sanitizeText(text.trim()); @@ -95,31 +97,31 @@ export const addVertex = function (_id, text, type, style, classes, dir, props = vertices[id].text = txt; } else { - if (typeof vertices[id].text === 'undefined') { + if (vertices[id].text === undefined) { vertices[id].text = _id; } } - if (typeof type !== 'undefined') { + if (type !== undefined) { vertices[id].type = type; } - if (typeof style !== 'undefined') { - if (style !== null) { - style.forEach(function (s) { - vertices[id].styles.push(s); - }); - } + if (style !== undefined && style !== null) { + style.forEach(function (s) { + vertices[id].styles.push(s); + }); } - if (typeof classes !== 'undefined') { - if (classes !== null) { - classes.forEach(function (s) { - vertices[id].classes.push(s); - }); - } + if (classes !== undefined && classes !== null) { + classes.forEach(function (s) { + vertices[id].classes.push(s); + }); } - if (typeof dir !== 'undefined') { + if (dir !== undefined) { vertices[id].dir = dir; } - vertices[id].props = props; + if (vertices[id].props === undefined) { + vertices[id].props = props; + } else if (props !== undefined) { + Object.assign(vertices[id].props, props); + } }; /** @@ -128,9 +130,9 @@ export const addVertex = function (_id, text, type, style, classes, dir, props = * @param _start * @param _end * @param type - * @param linktext + * @param linkText */ -export const addSingleLink = function (_start, _end, type, linktext) { +export const addSingleLink = function (_start, _end, type, linkText) { let start = _start; let end = _end; // if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start; @@ -138,18 +140,18 @@ export const addSingleLink = function (_start, _end, type, linktext) { // log.info('Got edge...', start, end); const edge = { start: start, end: end, type: undefined, text: '' }; - linktext = type.text; + linkText = type.text; - if (typeof linktext !== 'undefined') { - edge.text = sanitizeText(linktext.trim()); + if (linkText !== undefined) { + edge.text = sanitizeText(linkText.trim()); - // strip quotes if string starts and exnds with a quote + // strip quotes if string starts and ends with a quote if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') { edge.text = edge.text.substring(1, edge.text.length - 1); } } - if (typeof type !== 'undefined') { + if (type !== undefined) { edge.type = type.type; edge.stroke = type.stroke; edge.length = type.length; @@ -201,21 +203,19 @@ export const updateLink = function (positions, style) { }; export const addClass = function (id, style) { - if (typeof classes[id] === 'undefined') { + if (classes[id] === undefined) { classes[id] = { id: id, styles: [], textStyles: [] }; } - if (typeof style !== 'undefined') { - if (style !== null) { - style.forEach(function (s) { - if (s.match('color')) { - const newStyle1 = s.replace('fill', 'bgFill'); - const newStyle2 = newStyle1.replace('color', 'fill'); - classes[id].textStyles.push(newStyle2); - } - classes[id].styles.push(s); - }); - } + if (style !== undefined && style !== null) { + style.forEach(function (s) { + if (s.match('color')) { + const newStyle1 = s.replace('fill', 'bgFill'); + const newStyle2 = newStyle1.replace('color', 'fill'); + classes[id].textStyles.push(newStyle2); + } + classes[id].styles.push(s); + }); } }; @@ -251,11 +251,11 @@ export const setClass = function (ids, className) { // let id = version === 'gen-2' ? lookUpDomId(_id) : _id; let id = _id; // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; - if (typeof vertices[id] !== 'undefined') { + if (vertices[id] !== undefined) { vertices[id].classes.push(className); } - if (typeof subGraphLookup[id] !== 'undefined') { + if (subGraphLookup[id] !== undefined) { subGraphLookup[id].classes.push(className); } }); @@ -263,7 +263,7 @@ export const setClass = function (ids, className) { const setTooltip = function (ids, tooltip) { ids.split(',').forEach(function (id) { - if (typeof tooltip !== 'undefined') { + if (tooltip !== undefined) { tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = sanitizeText(tooltip); } }); @@ -275,7 +275,7 @@ const setClickFun = function (id, functionName, functionArgs) { if (configApi.getConfig().securityLevel !== 'loose') { return; } - if (typeof functionName === 'undefined') { + if (functionName === undefined) { return; } let argList = []; @@ -298,7 +298,7 @@ const setClickFun = function (id, functionName, functionArgs) { argList.push(id); } - if (typeof vertices[id] !== 'undefined') { + if (vertices[id] !== undefined) { vertices[id].haveCallback = true; funs.push(function () { const elem = document.querySelector(`[id="${domId}"]`); @@ -324,7 +324,7 @@ const setClickFun = function (id, functionName, functionArgs) { */ export const setLink = function (ids, linkStr, target) { ids.split(',').forEach(function (id) { - if (typeof vertices[id] !== 'undefined') { + if (vertices[id] !== undefined) { vertices[id].link = utils.formatUrl(linkStr, config); vertices[id].linkTarget = target; } @@ -456,8 +456,8 @@ export const defaultStyle = function () { export const addSubGraph = function (_id, list, _title) { // console.log('addSubGraph', _id, list, _title); let id = _id.trim(); - let title = _title.trim(); - if (id === title && title.match(/\s/)) { + let title = _title; + if (_id === _title && _title.match(/\s/)) { id = undefined; } /** @param a */ @@ -478,7 +478,7 @@ export const addSubGraph = function (_id, list, _title) { if (type in prims) { return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); } else { - return objs.indexOf(item) >= 0 ? false : objs.push(item); + return objs.includes(item) ? false : objs.push(item); } }); return { nodeList, dir }; @@ -524,8 +524,8 @@ export const addSubGraph = function (_id, list, _title) { }; const getPosForId = function (id) { - for (let i = 0; i < subGraphs.length; i++) { - if (subGraphs[i].id === id) { + for (const [i, subGraph] of subGraphs.entries()) { + if (subGraph.id === id) { return i; } } @@ -616,11 +616,11 @@ const destructStartLink = (_str) => { let stroke = 'normal'; - if (str.indexOf('=') !== -1) { + if (str.includes('=')) { stroke = 'thick'; } - if (str.indexOf('.') !== -1) { + if (str.includes('.')) { stroke = 'dotted'; } @@ -674,10 +674,6 @@ const destructEndLink = (_str) => { stroke = 'thick'; } - if (line[0] === '~') { - stroke = 'invisible'; - } - let dots = countChar('.', line); if (dots) { @@ -703,7 +699,9 @@ const destructLink = (_str, _startStr) => { startInfo.type = info.type; } else { // x-- xyz --> - not supported - if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' }; + if (startInfo.type !== info.type) { + return { type: 'INVALID', stroke: 'INVALID' }; + } startInfo.type = 'double_' + startInfo.type; } @@ -783,4 +781,6 @@ export default { }, exists, makeUniq, + setDiagramTitle, + getDiagramTitle, }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts index c2ec736c76..c88a63fa68 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts @@ -1,8 +1,9 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const flowDetectorV2: DiagramDetector = (txt, config) => { - // If we have confgured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram - if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null) + // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram + if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null) { return true; + } return txt.match(/^\s*flowchart/) !== null; }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts index 740d12847f..02ef63f994 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts @@ -1,8 +1,10 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const flowDetector: DiagramDetector = (txt, config) => { - // If we have confired to only use new flow charts this function shohuld always return false + // If we have conferred to only use new flow charts this function should always return false // as in not signalling true for a legacy flowchart - if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false; + if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') { + return false; + } return txt.match(/^\s*graph/) !== null; }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index ce206ce02d..29c7ba07a9 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -1,22 +1,22 @@ -import graphlib from 'graphlib'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; import flowDb from './flowDb'; import { getConfig } from '../../config'; +import utils from '../../utils'; import { render } from '../../dagre-wrapper/index.js'; -import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js'; +import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; import { log } from '../../logger'; import common, { evaluate } from '../common/common'; import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { setupGraphViewbox } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; const conf = {}; export const setConf = function (cnf) { const keys = Object.keys(cnf); - for (let i = 0; i < keys.length; i++) { - conf[keys[i]] = cnf[keys[i]]; + for (const key of keys) { + conf[key] = cnf[key]; } }; @@ -59,7 +59,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { label: vertexText.replace( - /fa[lrsb]?:fa-[\w-]+/g, + /fa[blrs]?:fa-[\w-]+/g, (s) => `` ), }; @@ -71,12 +71,12 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) { const rows = vertexText.split(common.lineBreakRegex); - for (let j = 0; j < rows.length; j++) { + 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 = rows[j]; + tspan.textContent = row; svgLabel.appendChild(tspan); } vertexNode = svgLabel; @@ -197,7 +197,7 @@ export const addEdges = function (edges, g, diagObj) { let defaultStyle; let defaultLabelStyle; - if (typeof edges.defaultStyle !== 'undefined') { + if (edges.defaultStyle !== undefined) { const defaultStyles = getStylesFromArray(edges.defaultStyle); defaultStyle = defaultStyles.style; defaultLabelStyle = defaultStyles.labelStyle; @@ -209,7 +209,7 @@ export const addEdges = function (edges, g, diagObj) { // Identify Link var linkIdBase = 'L-' + edge.start + '-' + edge.end; // count the links from+to the same node to give unique id - if (typeof linkIdCnt[linkIdBase] === 'undefined') { + if (linkIdCnt[linkIdBase] === undefined) { linkIdCnt[linkIdBase] = 0; log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]); } else { @@ -261,10 +261,10 @@ export const addEdges = function (edges, g, diagObj) { switch (edge.stroke) { case 'normal': style = 'fill:none;'; - if (typeof defaultStyle !== 'undefined') { + if (defaultStyle !== undefined) { style = defaultStyle; } - if (typeof defaultLabelStyle !== 'undefined') { + if (defaultLabelStyle !== undefined) { labelStyle = defaultLabelStyle; } edgeData.thickness = 'normal'; @@ -280,13 +280,8 @@ export const addEdges = function (edges, g, diagObj) { edgeData.pattern = 'solid'; edgeData.style = 'stroke-width: 3.5px;fill:none;'; break; - case 'invisible': - edgeData.thickness = 'invisible'; - edgeData.pattern = 'solid'; - edgeData.style = 'stroke-width: 0;fill:none;'; - break; } - if (typeof edge.style !== 'undefined') { + if (edge.style !== undefined) { const styles = getStylesFromArray(edge.style); style = styles.style; labelStyle = styles.labelStyle; @@ -295,16 +290,16 @@ export const addEdges = function (edges, g, diagObj) { edgeData.style = edgeData.style += style; edgeData.labelStyle = edgeData.labelStyle += labelStyle; - if (typeof edge.interpolate !== 'undefined') { + if (edge.interpolate !== undefined) { edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); - } else if (typeof edges.defaultInterpolate !== 'undefined') { + } else if (edges.defaultInterpolate !== undefined) { edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear); } else { edgeData.curve = interpolateToCurve(conf.curve, curveLinear); } - if (typeof edge.text === 'undefined') { - if (typeof edge.style !== 'undefined') { + if (edge.text === undefined) { + if (edge.style !== undefined) { edgeData.arrowheadStyle = 'fill: #333'; } } else { @@ -315,7 +310,7 @@ export const addEdges = function (edges, g, diagObj) { edgeData.labelType = 'text'; edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); - if (typeof edge.style === 'undefined') { + if (edge.style === undefined) { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; } @@ -364,7 +359,7 @@ export const draw = function (text, id, _version, diagObj) { // Fetch the default direction, use TD if none was found let dir = diagObj.db.getDirection(); - if (typeof dir === 'undefined') { + if (dir === undefined) { dir = 'TD'; } @@ -435,13 +430,12 @@ export const draw = function (text, id, _version, diagObj) { // Set up an SVG group so that we can translate the final graph. const svg = root.select(`[id="${id}"]`); - // Adds title and description to the flow chart - addSVGAccessibilityFields(diagObj.db, svg, id); - // Run the renderer. This is what draws the final graph. const element = root.select('#' + id + ' g'); render(element, g, ['point', 'circle', 'cross'], 'flowchart', id); + utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); + setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth); // Index nodes @@ -450,9 +444,7 @@ export const draw = function (text, id, _version, diagObj) { // Add label rects for non html labels if (!conf.htmlLabels) { const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); - for (let k = 0; k < labels.length; k++) { - const label = labels[k]; - + for (const label of labels) { // Get dimensions of label const dim = label.getBBox(); diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index 0c3aa3623e..63234b57cc 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -1,20 +1,20 @@ -import graphlib from 'graphlib'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; import { getConfig } from '../../config'; -import dagreD3 from 'dagre-d3'; -import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.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'; import common, { evaluate } from '../common/common'; import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { setupGraphViewbox } from '../../setupGraphViewbox'; import flowChartShapes from './flowChartShapes'; -import addSVGAccessibilityFields from '../../accessibility'; const conf = {}; export const setConf = function (cnf) { const keys = Object.keys(cnf); - for (let i = 0; i < keys.length; i++) { - conf[keys[i]] = cnf[keys[i]]; + for (const key of keys) { + conf[key] = cnf[key]; } }; @@ -58,7 +58,7 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { label: vertexText.replace( - /fa[lrsb]?:fa-[\w-]+/g, + /fa[blrs]?:fa-[\w-]+/g, (s) => `` ), }; @@ -70,12 +70,12 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) { const rows = vertexText.split(common.lineBreakRegex); - for (let j = 0; j < rows.length; j++) { + 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 = rows[j]; + tspan.textContent = row; svgLabel.appendChild(tspan); } vertexNode = svgLabel; @@ -166,7 +166,7 @@ export const addEdges = function (edges, g, diagObj) { let defaultStyle; let defaultLabelStyle; - if (typeof edges.defaultStyle !== 'undefined') { + if (edges.defaultStyle !== undefined) { const defaultStyles = getStylesFromArray(edges.defaultStyle); defaultStyle = defaultStyles.style; defaultLabelStyle = defaultStyles.labelStyle; @@ -192,7 +192,7 @@ export const addEdges = function (edges, g, diagObj) { let style = ''; let labelStyle = ''; - if (typeof edge.style !== 'undefined') { + if (edge.style !== undefined) { const styles = getStylesFromArray(edge.style); style = styles.style; labelStyle = styles.labelStyle; @@ -200,10 +200,10 @@ export const addEdges = function (edges, g, diagObj) { switch (edge.stroke) { case 'normal': style = 'fill:none'; - if (typeof defaultStyle !== 'undefined') { + if (defaultStyle !== undefined) { style = defaultStyle; } - if (typeof defaultLabelStyle !== 'undefined') { + if (defaultLabelStyle !== undefined) { labelStyle = defaultLabelStyle; } break; @@ -219,16 +219,16 @@ export const addEdges = function (edges, g, diagObj) { edgeData.style = style; edgeData.labelStyle = labelStyle; - if (typeof edge.interpolate !== 'undefined') { + if (edge.interpolate !== undefined) { edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); - } else if (typeof edges.defaultInterpolate !== 'undefined') { + } else if (edges.defaultInterpolate !== undefined) { edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear); } else { edgeData.curve = interpolateToCurve(conf.curve, curveLinear); } - if (typeof edge.text === 'undefined') { - if (typeof edge.style !== 'undefined') { + if (edge.text === undefined) { + if (edge.style !== undefined) { edgeData.arrowheadStyle = 'fill: #333'; } } else { @@ -240,14 +240,14 @@ export const addEdges = function (edges, g, diagObj) { edgeData.label = `${edge.text.replace( - /fa[lrsb]?:fa-[\w-]+/g, + /fa[blrs]?:fa-[\w-]+/g, (s) => `` )}`; } else { edgeData.labelType = 'text'; edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); - if (typeof edge.style === 'undefined') { + if (edge.style === undefined) { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; } @@ -279,7 +279,8 @@ export const getClasses = function (text, diagObj) { diagObj.parse(text); return diagObj.db.getClasses(); } catch (e) { - return; + log.error(e); + return {}; } }; @@ -314,7 +315,7 @@ export const draw = function (text, id, _version, diagObj) { // Fetch the default direction, use TD if none was found let dir = diagObj.db.getDirection(); - if (typeof dir === 'undefined') { + if (dir === undefined) { dir = 'TD'; } const nodeSpacing = conf.nodeSpacing || 50; @@ -369,7 +370,6 @@ export const draw = function (text, id, _version, diagObj) { addEdges(edges, g, diagObj); // Create the renderer - const Render = dagreD3.render; const render = new Render(); // Add custom shapes @@ -389,7 +389,7 @@ export const draw = function (text, id, _version, diagObj) { .attr('orient', 'auto'); const path = marker.append('path').attr('d', 'M 0 0 L 0 0 L 0 0 z'); - dagreD3.util.applyStyle(path, edge[type + 'Style']); + applyStyle(path, edge[type + 'Style']); }; // Override normal arrowhead defined in d3. Remove style & add class to allow css styling. @@ -416,9 +416,6 @@ export const draw = function (text, id, _version, diagObj) { // Set up an SVG group so that we can translate the final graph. const svg = root.select(`[id="${id}"]`); - // Adds title and description to the flow chart - addSVGAccessibilityFields(diagObj.db, svg, id); - // Run the renderer. This is what draws the final graph. const element = root.select('#' + id + ' g'); render(element, g); @@ -458,9 +455,7 @@ export const draw = function (text, id, _version, diagObj) { // Add label rects for non html labels if (!conf.htmlLabels) { const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); - for (let k = 0; k < labels.length; k++) { - const label = labels[k]; - + for (const label of labels) { // Get dimensions of label const dim = label.getBBox(); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js index a56184f110..7726ce0f79 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js @@ -1,12 +1,7 @@ import flowDb from '../flowDb'; import flow from './flow'; -import filter from 'lodash/filter'; import { setConfig } from '../../../config'; -// import DOMPurify from 'dompurify'; -// const domPurify = DOMPurify.createDOMPurify(window); - -// const clean = DOMPurify.sanitize(dirty); setConfig({ securityLevel: 'strict', }); @@ -83,8 +78,8 @@ describe('when parsing directions', function () { const subgraphs = flow.parser.yy.getSubGraphs(); expect(subgraphs.length).toBe(2); - const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0]; - const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0]; + const subgraphA = subgraphs.find((o) => o.id === 'A'); + const subgraphB = subgraphs.find((o) => o.id === 'B'); expect(subgraphB.nodes[0]).toBe('c'); expect(subgraphB.dir).toBe('LR'); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index e461165c40..fae7c6cf26 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison @@ -120,7 +120,6 @@ that id. \s*[xo<]?\-\-+[-xo>]\s* return 'LINK'; \s*[xo<]?\=\=+[=xo>]\s* return 'LINK'; \s*[xo<]?\-?\.+\-[xo>]?\s* return 'LINK'; -\s*\~\~[\~]+\s* return 'LINK'; \s*[xo<]?\-\-\s* return 'START_LINK'; \s*[xo<]?\=\=\s* return 'START_LINK'; \s*[xo<]?\-\.\s* return 'START_LINK'; diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js index aa8e9217fe..ae6f178b89 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js @@ -1,6 +1,5 @@ import flowDb from '../flowDb'; import flow from './flow'; -import filter from 'lodash/filter'; import { setConfig } from '../../../config'; setConfig({ @@ -254,8 +253,8 @@ describe('when parsing subgraphs', function () { const subgraphs = flow.parser.yy.getSubGraphs(); expect(subgraphs.length).toBe(2); - const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0]; - const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0]; + const subgraphA = subgraphs.find((o) => o.id === 'A'); + const subgraphB = subgraphs.find((o) => o.id === 'B'); expect(subgraphB.nodes[0]).toBe('c'); expect(subgraphA.nodes).toContain('B'); @@ -279,8 +278,8 @@ describe('when parsing subgraphs', function () { const subgraphs = flow.parser.yy.getSubGraphs(); expect(subgraphs.length).toBe(2); - const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0]; - const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0]; + const subgraphA = subgraphs.find((o) => o.id === 'A'); + const subgraphB = subgraphs.find((o) => o.id === 'B'); expect(subgraphB.nodes[0]).toBe('c'); expect(subgraphA.nodes).toContain('B'); @@ -302,8 +301,8 @@ describe('when parsing subgraphs', function () { const subgraphs = flow.parser.yy.getSubGraphs(); expect(subgraphs.length).toBe(2); - const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0]; - const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0]; + const subgraphA = subgraphs.find((o) => o.id === 'A'); + const subgraphB = subgraphs.find((o) => o.id === 'B'); expect(subgraphB.nodes[0]).toBe('c'); expect(subgraphA.nodes).toContain('B'); expect(subgraphA.nodes).toContain('b'); diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts index 82fb1f8759..a89d33d3dc 100644 --- a/packages/mermaid/src/diagrams/flowchart/styles.ts +++ b/packages/mermaid/src/diagrams/flowchart/styles.ts @@ -103,6 +103,12 @@ const getStyles = (options: FlowChartStyleOptions) => 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/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 9183cc7661..a1c74dd62f 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -17,6 +17,7 @@ import { let dateFormat = ''; let axisFormat = ''; +let tickInterval = undefined; let todayMarker = ''; let includes = []; let excludes = []; @@ -47,6 +48,7 @@ export const clear = function () { rawTasks = []; dateFormat = ''; axisFormat = ''; + tickInterval = undefined; todayMarker = ''; includes = []; excludes = []; @@ -65,6 +67,14 @@ export const getAxisFormat = function () { return axisFormat; }; +export const setTickInterval = function (txt) { + tickInterval = txt; +}; + +export const getTickInterval = function () { + return tickInterval; +}; + export const setTodayMarker = function (txt) { todayMarker = txt; }; @@ -140,20 +150,22 @@ export const getTasks = function () { }; export const isInvalidDate = function (date, dateFormat, excludes, includes) { - if (includes.indexOf(date.format(dateFormat.trim())) >= 0) { + if (includes.includes(date.format(dateFormat.trim()))) { return false; } - if (date.isoWeekday() >= 6 && excludes.indexOf('weekends') >= 0) { + if (date.isoWeekday() >= 6 && excludes.includes('weekends')) { return true; } - if (excludes.indexOf(date.format('dddd').toLowerCase()) >= 0) { + if (excludes.includes(date.format('dddd').toLowerCase())) { return true; } - return excludes.indexOf(date.format(dateFormat.trim())) >= 0; + return excludes.includes(date.format(dateFormat.trim())); }; const checkTaskDates = function (task, dateFormat, excludes, includes) { - if (!excludes.length || task.manualEndTime) return; + if (!excludes.length || task.manualEndTime) { + return; + } let startTime = moment(task.startTime, dateFormat, true); startTime.add(1, 'd'); let endTime = moment(task.endTime, dateFormat, true); @@ -190,7 +202,7 @@ const getStartDate = function (prevTime, dateFormat, str) { let latestEndingTask = null; afterStatement[1].split(' ').forEach(function (id) { let task = findTaskById(id); - if (typeof task !== 'undefined') { + if (task !== undefined) { if (!latestEndingTask) { latestEndingTask = task; } else { @@ -218,7 +230,7 @@ const getStartDate = function (prevTime, dateFormat, str) { log.debug('Invalid date:' + str); log.debug('With date format:' + dateFormat.trim()); const d = new Date(str); - if (typeof d === 'undefined' || isNaN(d.getTime())) { + if (d === undefined || isNaN(d.getTime())) { throw new Error('Invalid date:' + str); } return d; @@ -229,7 +241,7 @@ const getStartDate = function (prevTime, dateFormat, str) { * Parse a string as a moment duration. * * The string have to be compound by a value and a shorthand duration unit. For example `5d` - * representes 5 days. + * represents 5 days. * * Shorthand unit supported are: * @@ -246,15 +258,14 @@ const getStartDate = function (prevTime, dateFormat, str) { * string. */ const parseDuration = function (str) { - const statement = /^(\d+(?:\.\d+)?)([yMwdhms]|ms)$/.exec(str.trim()); + const statement = /^(\d+(?:\.\d+)?)([Mdhmswy]|ms)$/.exec(str.trim()); if (statement !== null) { return moment.duration(Number.parseFloat(statement[1]), statement[2]); } return moment.duration.invalid(); }; -const getEndDate = function (prevTime, dateFormat, str, inclusive) { - inclusive = inclusive || false; +const getEndDate = function (prevTime, dateFormat, str, inclusive = false) { str = str.trim(); // Check for actual date @@ -276,7 +287,7 @@ const getEndDate = function (prevTime, dateFormat, str, inclusive) { let taskCnt = 0; const parseId = function (idStr) { - if (typeof idStr === 'undefined') { + if (idStr === undefined) { taskCnt = taskCnt + 1; return 'task' + taskCnt; } @@ -498,10 +509,10 @@ const compileTasks = function () { }; let allProcessed = true; - for (let i = 0; i < rawTasks.length; i++) { + for (const [i, rawTask] of rawTasks.entries()) { compileTask(i); - allProcessed = allProcessed && rawTasks[i].processed; + allProcessed = allProcessed && rawTask.processed; } return allProcessed; }; @@ -519,7 +530,7 @@ export const setLink = function (ids, _linkStr) { } ids.split(',').forEach(function (id) { let rawTask = findTaskById(id); - if (typeof rawTask !== 'undefined') { + if (rawTask !== undefined) { pushFun(id, () => { window.open(linkStr, '_self'); }); @@ -538,7 +549,7 @@ export const setLink = function (ids, _linkStr) { export const setClass = function (ids, className) { ids.split(',').forEach(function (id) { let rawTask = findTaskById(id); - if (typeof rawTask !== 'undefined') { + if (rawTask !== undefined) { rawTask.classes.push(className); } }); @@ -548,7 +559,7 @@ const setClickFun = function (id, functionName, functionArgs) { if (configApi.getConfig().securityLevel !== 'loose') { return; } - if (typeof functionName === 'undefined') { + if (functionName === undefined) { return; } @@ -573,7 +584,7 @@ const setClickFun = function (id, functionName, functionArgs) { } let rawTask = findTaskById(id); - if (typeof rawTask !== 'undefined') { + if (rawTask !== undefined) { pushFun(id, () => { utils.runFunc(functionName, ...argList); }); @@ -588,24 +599,26 @@ const setClickFun = function (id, functionName, functionArgs) { * @param callbackFunction A function to be executed when clicked on the task or the task's text */ const pushFun = function (id, callbackFunction) { - funs.push(function () { - // const elem = d3.select(element).select(`[id="${id}"]`) - const elem = document.querySelector(`[id="${id}"]`); - if (elem !== null) { - elem.addEventListener('click', function () { - callbackFunction(); - }); - } - }); - funs.push(function () { - // const elem = d3.select(element).select(`[id="${id}-text"]`) - const elem = document.querySelector(`[id="${id}-text"]`); - if (elem !== null) { - elem.addEventListener('click', function () { - callbackFunction(); - }); + funs.push( + function () { + // const elem = d3.select(element).select(`[id="${id}"]`) + const elem = document.querySelector(`[id="${id}"]`); + if (elem !== null) { + elem.addEventListener('click', function () { + callbackFunction(); + }); + } + }, + function () { + // const elem = d3.select(element).select(`[id="${id}-text"]`) + const elem = document.querySelector(`[id="${id}-text"]`); + if (elem !== null) { + elem.addEventListener('click', function () { + callbackFunction(); + }); + } } - }); + ); }; /** @@ -645,6 +658,8 @@ export default { topAxisEnabled, setAxisFormat, getAxisFormat, + setTickInterval, + getTickInterval, setTodayMarker, getTodayMarker, setAccTitle, diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 3b12bc1911..faec35a862 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -10,11 +10,15 @@ import { axisBottom, axisTop, timeFormat, + timeMinute, + timeHour, + timeDay, + timeWeek, + timeMonth, } from 'd3'; import common from '../common/common'; import { getConfig } from '../../config'; import { configureSvgSize } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; export const setConf = function () { log.debug('Something is calling, setConf, remove the call'); @@ -27,7 +31,7 @@ export const draw = function (text, id, version, diagObj) { // parser.parse(text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -41,11 +45,11 @@ export const draw = function (text, id, version, diagObj) { const elem = doc.getElementById(id); w = elem.parentElement.offsetWidth; - if (typeof w === 'undefined') { + if (w === undefined) { w = 1200; } - if (typeof conf.useWidth !== 'undefined') { + if (conf.useWidth !== undefined) { w = conf.useWidth; } @@ -72,8 +76,8 @@ export const draw = function (text, id, version, diagObj) { let categories = []; - for (let i = 0; i < taskArray.length; i++) { - categories.push(taskArray[i].type); + for (const element of taskArray) { + categories.push(element.type); } const catsUnfiltered = categories; // for vert labels @@ -111,8 +115,6 @@ export const draw = function (text, id, version, diagObj) { .attr('y', conf.titleTopMargin) .attr('class', 'titleText'); - addSVGAccessibilityFields(diagObj.db, svg, id); - /** * @param tasks * @param pageWidth @@ -173,8 +175,8 @@ export const draw = function (text, id, version, diagObj) { }) .attr('height', theGap) .attr('class', function (d) { - for (let i = 0; i < categories.length; i++) { - if (d.type === categories[i]) { + for (const [i, category] of categories.entries()) { + if (d.type === category) { return 'section section' + (i % conf.numberSectionStyles); } } @@ -242,8 +244,8 @@ export const draw = function (text, id, version, diagObj) { } let secNum = 0; - for (let i = 0; i < categories.length; i++) { - if (d.type === categories[i]) { + for (const [i, category] of categories.entries()) { + if (d.type === category) { secNum = i % conf.numberSectionStyles; } } @@ -334,8 +336,8 @@ export const draw = function (text, id, version, diagObj) { } let secNum = 0; - for (let i = 0; i < categories.length; i++) { - if (d.type === categories[i]) { + for (const [i, category] of categories.entries()) { + if (d.type === category) { secNum = i % conf.numberSectionStyles; } } @@ -395,7 +397,7 @@ export const draw = function (text, id, version, diagObj) { rectangles .filter(function (d) { - return typeof links[d.id] !== 'undefined'; + return links[d.id] !== undefined; }) .each(function (o) { var taskRect = doc.querySelector('#' + o.id); @@ -427,7 +429,9 @@ export const draw = function (text, id, version, diagObj) { ); const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0); const dateFormat = diagObj.db.getDateFormat(); - if (!minTime || !maxTime) return; + if (!minTime || !maxTime) { + return; + } const excludeRanges = []; let range = null; @@ -493,6 +497,33 @@ export const draw = function (text, id, version, diagObj) { .tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + const reTickInterval = /^([1-9]\d*)(minute|hour|day|week|month)$/; + const resultTickInterval = reTickInterval.exec( + diagObj.db.getTickInterval() || conf.tickInterval + ); + + if (resultTickInterval !== null) { + const every = resultTickInterval[1]; + const interval = resultTickInterval[2]; + switch (interval) { + case 'minute': + bottomXAxis.ticks(timeMinute.every(every)); + break; + case 'hour': + bottomXAxis.ticks(timeHour.every(every)); + break; + case 'day': + bottomXAxis.ticks(timeDay.every(every)); + break; + case 'week': + bottomXAxis.ticks(timeWeek.every(every)); + break; + case 'month': + bottomXAxis.ticks(timeMonth.every(every)); + break; + } + } + svg .append('g') .attr('class', 'grid') @@ -510,6 +541,28 @@ export const draw = function (text, id, version, diagObj) { .tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + if (resultTickInterval !== null) { + const every = resultTickInterval[1]; + const interval = resultTickInterval[2]; + switch (interval) { + case 'minute': + topXAxis.ticks(timeMinute.every(every)); + break; + case 'hour': + topXAxis.ticks(timeHour.every(every)); + break; + case 'day': + topXAxis.ticks(timeDay.every(every)); + break; + case 'week': + topXAxis.ticks(timeWeek.every(every)); + break; + case 'month': + topXAxis.ticks(timeMonth.every(every)); + break; + } + } + svg .append('g') .attr('class', 'grid') @@ -532,8 +585,8 @@ export const draw = function (text, id, version, diagObj) { const numOccurances = []; let prevGap = 0; - for (let i = 0; i < categories.length; i++) { - numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)]; + for (const [i, category] of categories.entries()) { + numOccurances[i] = [category, getCount(category, catsUnfiltered)]; } svg @@ -548,12 +601,14 @@ export const draw = function (text, id, version, diagObj) { const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text'); svgLabel.setAttribute('dy', dy + 'em'); - for (let j = 0; j < rows.length; j++) { + for (const [j, row] of rows.entries()) { const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan'); tspan.setAttribute('alignment-baseline', 'central'); tspan.setAttribute('x', '10'); - if (j > 0) tspan.setAttribute('dy', '1em'); - tspan.textContent = rows[j]; + if (j > 0) { + tspan.setAttribute('dy', '1em'); + } + tspan.textContent = row; svgLabel.appendChild(tspan); } return svgLabel; @@ -572,8 +627,8 @@ export const draw = function (text, id, version, diagObj) { .attr('font-size', conf.sectionFontSize) .attr('font-size', conf.sectionFontSize) .attr('class', function (d) { - for (let i = 0; i < categories.length; i++) { - if (d[0] === categories[i]) { + for (const [i, category] of categories.entries()) { + if (d[0] === category) { return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles); } } @@ -610,7 +665,7 @@ export const draw = function (text, id, version, diagObj) { } /** - * From this stackexchange question: + * From this stack exchange question: * http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript * * @param arr @@ -629,7 +684,7 @@ export const draw = function (text, id, version, diagObj) { } /** - * From this stackexchange question: + * From this stack exchange question: * http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array * * @param arr diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index f256564531..2223aa3789 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -82,6 +82,7 @@ that id. "inclusiveEndDates" return 'inclusiveEndDates'; "topAxis" return 'topAxis'; "axisFormat"\s[^#\n;]+ return 'axisFormat'; +"tickInterval"\s[^#\n;]+ return 'tickInterval'; "includes"\s[^#\n;]+ return 'includes'; "excludes"\s[^#\n;]+ return 'excludes'; "todayMarker"\s[^\n;]+ return 'todayMarker'; @@ -125,6 +126,7 @@ statement | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} | topAxis {yy.TopAxis();$$=$1.substr(8);} | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);} + | tickInterval {yy.setTickInterval($1.substr(13));$$=$1.substr(13);} | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js index 9e56752491..9a1401cada 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js @@ -65,17 +65,6 @@ describe('when parsing a gantt diagram it', function () { expect(parserFnConstructor(str)).not.toThrow(); }); - /** - * Beslutsflöde inligt nedan. Obs bla bla bla - * - * graph TD - * A[Hard pledge] -- text on link -->B(Round edge) - * B --> C{to do or not to do} - * C -->|Too| D[Result one] - * C -->|Doo| E[Result two] - * - * Params bapa - a unique bapap - */ it('should handle a task definition', function () { const str = 'gantt\n' + diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js index 41130c7800..dded48efae 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.js +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js @@ -10,6 +10,8 @@ import { getAccDescription, setAccDescription, clear as commonClear, + setDiagramTitle, + getDiagramTitle, } from '../../commonDb'; let mainBranchName = getConfig().gitGraph.mainBranchName; @@ -39,6 +41,7 @@ export const parseDirective = function (statement, context, type) { // * @param currentCommit // * @param otherCommit // */ +// eslint-disable-next-line @cspell/spellchecker // function isfastforwardable(currentCommit, otherCommit) { // log.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id); // let cnt = 0; @@ -128,7 +131,7 @@ export const commit = function (msg, id, type, tag) { export const branch = function (name, order) { name = common.sanitizeText(name, configApi.getConfig()); - if (typeof branches[name] === 'undefined') { + if (branches[name] === undefined) { branches[name] = head != null ? head.id : null; branchesConfig[name] = { name, order: order ? parseInt(order, 10) : null }; checkout(name); @@ -166,7 +169,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag expected: ['branch abc'], }; throw error; - } else if (typeof currentCommit === 'undefined' || !currentCommit) { + } else if (currentCommit === undefined || !currentCommit) { let error = new Error( 'Incorrect usage of "merge". Current branch (' + curBranch + ')has no commits' ); @@ -178,7 +181,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag expected: ['commit'], }; throw error; - } else if (typeof branches[otherBranch] === 'undefined') { + } else if (branches[otherBranch] === undefined) { let error = new Error( 'Incorrect usage of "merge". Branch to be merged (' + otherBranch + ') does not exist' ); @@ -190,7 +193,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag expected: ['branch ' + otherBranch], }; throw error; - } else if (typeof otherCommit === 'undefined' || !otherCommit) { + } else if (otherCommit === undefined || !otherCommit) { let error = new Error( 'Incorrect usage of "merge". Branch to be merged (' + otherBranch + ') has no commits' ); @@ -212,7 +215,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag expected: ['branch abc'], }; throw error; - } else if (custom_id && typeof commits[custom_id] !== 'undefined') { + } else if (custom_id && commits[custom_id] !== undefined) { let error = new Error( 'Incorrect usage of "merge". Commit with id:' + custom_id + @@ -264,7 +267,7 @@ export const cherryPick = function (sourceId, targetId, tag) { targetId = common.sanitizeText(targetId, configApi.getConfig()); tag = common.sanitizeText(tag, configApi.getConfig()); - if (!sourceId || typeof commits[sourceId] === 'undefined') { + if (!sourceId || commits[sourceId] === undefined) { let error = new Error( 'Incorrect usage of "cherryPick". Source commit id should exist and provided' ); @@ -293,7 +296,7 @@ export const cherryPick = function (sourceId, targetId, tag) { }; throw error; } - if (!targetId || typeof commits[targetId] === 'undefined') { + if (!targetId || commits[targetId] === undefined) { // cherry-pick source commit to current branch if (sourceCommitBranch === curBranch) { @@ -310,7 +313,7 @@ export const cherryPick = function (sourceId, targetId, tag) { throw error; } const currentCommit = commits[branches[curBranch]]; - if (typeof currentCommit === 'undefined' || !currentCommit) { + if (currentCommit === undefined || !currentCommit) { let error = new Error( 'Incorrect usage of "cherry-pick". Current branch (' + curBranch + ')has no commits' ); @@ -341,7 +344,7 @@ export const cherryPick = function (sourceId, targetId, tag) { }; export const checkout = function (branch) { branch = common.sanitizeText(branch, configApi.getConfig()); - if (typeof branches[branch] === 'undefined') { + if (branches[branch] === undefined) { let error = new Error( 'Trying to checkout branch which is not yet created. (Help try using "branch ' + branch + '")' ); @@ -384,21 +387,23 @@ export const checkout = function (branch) { /** * @param arr * @param key - * @param newval + * @param newVal */ -function upsert(arr, key, newval) { +function upsert(arr, key, newVal) { const index = arr.indexOf(key); if (index === -1) { - arr.push(newval); + arr.push(newVal); } else { - arr.splice(index, 1, newval); + arr.splice(index, 1, newVal); } } /** @param commitArr */ function prettyPrintCommitHistory(commitArr) { const commit = commitArr.reduce((out, commit) => { - if (out.seq > commit.seq) return out; + if (out.seq > commit.seq) { + return out; + } return commit; }, commitArr[0]); let line = ''; @@ -411,7 +416,9 @@ function prettyPrintCommitHistory(commitArr) { }); const label = [line, commit.id, commit.seq]; for (let branch in branches) { - if (branches[branch] === commit.id) label.push(branch); + if (branches[branch] === commit.id) { + label.push(branch); + } } log.debug(label.join(' ')); if (commit.parents && commit.parents.length == 2) { @@ -451,7 +458,9 @@ export const clear = function () { export const getBranchesAsObjArray = function () { const branchesArray = Object.values(branchesConfig) .map((branchConfig, i) => { - if (branchConfig.order !== null) return branchConfig; + if (branchConfig.order !== null) { + return branchConfig; + } return { ...branchConfig, order: parseFloat(`0.${i}`, 10), @@ -522,5 +531,7 @@ export default { getAccTitle, getAccDescription, setAccDescription, + setDiagramTitle, + getDiagramTitle, commitType, }; diff --git a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js index 7aab8fc7ce..cad44ea1fd 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js +++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js @@ -334,6 +334,31 @@ describe('when parsing a gitGraph', function () { expect(Object.keys(parser.yy.getBranches()).length).toBe(2); }); + it('should allow quoted branch names', function () { + const str = `gitGraph: + commit + branch "branch" + checkout "branch" + commit + checkout main + merge "branch" + `; + + parser.parse(str); + const commits = parser.yy.getCommits(); + expect(Object.keys(commits).length).toBe(3); + expect(parser.yy.getCurrentBranch()).toBe('main'); + expect(parser.yy.getDirection()).toBe('LR'); + expect(Object.keys(parser.yy.getBranches()).length).toBe(2); + const commit1 = Object.keys(commits)[0]; + const commit2 = Object.keys(commits)[1]; + const commit3 = Object.keys(commits)[2]; + expect(commits[commit1].branch).toBe('main'); + expect(commits[commit2].branch).toBe('branch'); + expect(commits[commit3].branch).toBe('main'); + expect(parser.yy.getBranchesAsObjArray()).toStrictEqual([{ name: 'main' }, { name: 'branch' }]); + }); + it('should allow _-./ characters in branch names', function () { const str = `gitGraph: commit diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js index eefaf5ad84..ca288bfae7 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js @@ -218,18 +218,18 @@ function cloneNode(svg, selector) { /** * @param svg - * @param commitid + * @param commitId * @param branches * @param direction */ -function renderCommitHistory(svg, commitid, branches, direction) { +function renderCommitHistory(svg, commitId, branches, direction) { let commit; const numCommits = Object.keys(allCommitsDict).length; - if (typeof commitid === 'string') { + if (typeof commitId === 'string') { do { - commit = allCommitsDict[commitid]; + commit = allCommitsDict[commitId]; logger.debug('in renderCommitHistory', commit.id, commit.seq); - if (svg.select('#node-' + commitid).size() > 0) { + if (svg.select('#node-' + commitId).size() > 0) { return; } svg @@ -291,15 +291,15 @@ function renderCommitHistory(svg, commitid, branches, direction) { .attr('class', 'commit-msg') .text(', ' + commit.message); } - commitid = commit.parent; - } while (commitid && allCommitsDict[commitid]); + commitId = commit.parent; + } while (commitId && allCommitsDict[commitId]); } - if (Array.isArray(commitid)) { - logger.debug('found merge commmit', commitid); - renderCommitHistory(svg, commitid[0], branches, direction); + if (Array.isArray(commitId)) { + logger.debug('found merge commmit', commitId); + renderCommitHistory(svg, commitId[0], branches, direction); branchNum++; - renderCommitHistory(svg, commitid[1], branches, direction); + renderCommitHistory(svg, commitId[1], branches, direction); branchNum--; } } @@ -310,8 +310,7 @@ function renderCommitHistory(svg, commitid, branches, direction) { * @param direction * @param branchColor */ -function renderLines(svg, commit, direction, branchColor) { - branchColor = branchColor || 0; +function renderLines(svg, commit, direction, branchColor = 0) { while (commit.seq > 0 && !commit.lineDrawn) { if (typeof commit.parent === 'string') { svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor); @@ -357,7 +356,9 @@ export const draw = function (txt, id, ver) { branchNum++; } svg.attr('height', function () { - if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing; + if (direction === 'BT') { + return Object.keys(allCommitsDict).length * config.nodeSpacing; + } return (branches.length + 1) * config.branchOffset; }); } catch (e) { diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index e15e43ac3b..787eb24901 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -1,7 +1,7 @@ import { select } from 'd3'; import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI'; import { log } from '../../logger'; -import addSVGAccessibilityFields from '../../accessibility'; +import utils from '../../utils'; let allCommitsDict = {}; @@ -46,13 +46,13 @@ const drawText = (txt) => { rows = []; } - for (let j = 0; j < rows.length; j++) { + for (const row of rows) { const tspan = document.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', '0'); tspan.setAttribute('class', 'row'); - tspan.textContent = rows[j].trim(); + tspan.textContent = row.trim(); svgLabel.appendChild(tspan); } /** @@ -90,7 +90,7 @@ const drawCommits = (svg, commits, modifyGraph) => { if (modifyGraph) { let typeClass; let commitSymbolType = - typeof commit.customType !== 'undefined' && commit.customType !== '' + commit.customType !== undefined && commit.customType !== '' ? commit.customType : commit.type; switch (commitSymbolType) { @@ -318,23 +318,16 @@ const hasOverlappingCommits = (commit1, commit2, allCommits) => { * * @param {any} y1 * @param {any} y2 - * @param {any} _depth + * @param {any} depth * @returns {number} Y value between y1 and y2 */ -const findLane = (y1, y2, _depth) => { - const depth = _depth || 0; - +const findLane = (y1, y2, depth = 0) => { const candidate = y1 + Math.abs(y1 - y2) / 2; if (depth > 5) { return candidate; } - let ok = true; - for (let i = 0; i < lanes.length; i++) { - if (Math.abs(lanes[i] - candidate) < 10) { - ok = false; - } - } + let ok = lanes.every((lane) => Math.abs(lane - candidate) >= 10); if (ok) { lanes.push(candidate); return candidate; @@ -496,7 +489,7 @@ const drawBranches = (svg, branches) => { export const draw = function (txt, id, ver, diagObj) { clear(); const conf = getConfig(); - const gitGraphConfig = getConfig().gitGraph; + const gitGraphConfig = conf.gitGraph; // try { log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver); @@ -512,18 +505,26 @@ export const draw = function (txt, id, ver, diagObj) { const diagram = select(`[id="${id}"]`); - // Adds title and description to the flow chart - addSVGAccessibilityFields(diagObj.db, diagram, id); - drawCommits(diagram, allCommitsDict, false); if (gitGraphConfig.showBranches) { drawBranches(diagram, branches); } drawArrows(diagram, allCommitsDict); drawCommits(diagram, allCommitsDict, true); + utils.insertTitle( + diagram, + 'gitTitleText', + gitGraphConfig.titleTopMargin, + diagObj.db.getDiagramTitle() + ); // Setup the view box and size of the svg element - setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, conf.useMaxWidth); + setupGraphViewbox( + undefined, + diagram, + gitGraphConfig.diagramPadding, + gitGraphConfig.useMaxWidth ?? conf.useMaxWidth + ); }; export default { diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js index 5714c2b96a..de866a72b5 100644 --- a/packages/mermaid/src/diagrams/git/layout.js +++ b/packages/mermaid/src/diagrams/git/layout.js @@ -1,12 +1,12 @@ import { getConfig } from '../../config'; -export default (dir, _branches, _commits) => { +export default (dir, _branches) => { const config = getConfig().gitGraph; const branches = []; const commits = []; - for (let i = 0; i < _branches.length; i++) { - const branch = Object.assign({}, _branches[i]); + for (const [i, _branch] of _branches.entries()) { + const branch = Object.assign({}, _branch); if (dir === 'TB' || dir === 'BT') { branch.x = config.branchOffset * i; branch.y = -1; diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison index dbe220e151..1c87f3bf35 100644 --- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison +++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison @@ -109,12 +109,12 @@ statement | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | section {yy.addSection($1.substr(8));$$=$1.substr(8);} | branchStatement - | CHECKOUT ID {yy.checkout($2)} + | CHECKOUT ref {yy.checkout($2)} // | RESET reset_arg {yy.reset($2)} ; branchStatement - : BRANCH ID {yy.branch($2)} - | BRANCH ID ORDER NUM {yy.branch($2, $4)} + : BRANCH ref {yy.branch($2)} + | BRANCH ref ORDER NUM {yy.branch($2, $4)} ; cherryPickStatement @@ -126,22 +126,22 @@ cherryPickStatement ; mergeStatement - : MERGE ID {yy.merge($2,'','','')} - | MERGE ID COMMIT_ID STR {yy.merge($2, $4,'','')} - | MERGE ID COMMIT_TYPE commitType {yy.merge($2,'', $4,'')} - | MERGE ID COMMIT_TAG STR {yy.merge($2, '','',$4)} - | MERGE ID COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $6,'', $4)} - | MERGE ID COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, '',$6, $4)} - | MERGE ID COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, '',$4, $6)} - | MERGE ID COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $4, $6, '')} - | MERGE ID COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $4, '', $6)} - | MERGE ID COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $6,$4, '')} - | MERGE ID COMMIT_ID STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, $4, $6, $8)} - | MERGE ID COMMIT_TYPE commitType COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $8, $4, $6)} - | MERGE ID COMMIT_ID STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, $4, $8, $6)} - | MERGE ID COMMIT_TYPE commitType COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $6, $4, $8)} - | MERGE ID COMMIT_TAG STR COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $8, $6, $4)} - | MERGE ID COMMIT_TAG STR COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $6, $8, $4)} + : MERGE ref {yy.merge($2,'','','')} + | MERGE ref COMMIT_ID STR {yy.merge($2, $4,'','')} + | MERGE ref COMMIT_TYPE commitType {yy.merge($2,'', $4,'')} + | MERGE ref COMMIT_TAG STR {yy.merge($2, '','',$4)} + | MERGE ref COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $6,'', $4)} + | MERGE ref COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, '',$6, $4)} + | MERGE ref COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, '',$4, $6)} + | MERGE ref COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $4, $6, '')} + | MERGE ref COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $4, '', $6)} + | MERGE ref COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $6,$4, '')} + | MERGE ref COMMIT_ID STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.merge($2, $4, $6, $8)} + | MERGE ref COMMIT_TYPE commitType COMMIT_TAG STR COMMIT_ID STR {yy.merge($2, $8, $4, $6)} + | MERGE ref COMMIT_ID STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.merge($2, $4, $8, $6)} + | MERGE ref COMMIT_TYPE commitType COMMIT_ID STR COMMIT_TAG STR {yy.merge($2, $6, $4, $8)} + | MERGE ref COMMIT_TAG STR COMMIT_TYPE commitType COMMIT_ID STR {yy.merge($2, $8, $6, $4)} + | MERGE ref COMMIT_TAG STR COMMIT_ID STR COMMIT_TYPE commitType {yy.merge($2, $6, $8, $4)} ; commitStatement @@ -261,6 +261,11 @@ closeDirective : close_directive { yy.parseDirective('}%%', 'close_directive', 'gitGraph'); } ; +ref + : ID + | STR + ; + eol : NL | ';' diff --git a/packages/mermaid/src/diagrams/git/styles.js b/packages/mermaid/src/diagrams/git/styles.js index 7e09ff7e0e..7417602356 100644 --- a/packages/mermaid/src/diagrams/git/styles.js +++ b/packages/mermaid/src/diagrams/git/styles.js @@ -51,6 +51,11 @@ const getStyles = (options) => } .arrow { stroke-width: 8; stroke-linecap: round; fill: none} + .gitTitleText { + text-anchor: middle; + font-size: 18px; + fill: ${options.textColor}; + } } `; diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.js b/packages/mermaid/src/diagrams/info/infoRenderer.js index b50178481b..1caa7222cc 100644 --- a/packages/mermaid/src/diagrams/info/infoRenderer.js +++ b/packages/mermaid/src/diagrams/info/infoRenderer.js @@ -9,16 +9,15 @@ import { getConfig } from '../../config'; * @param {any} text * @param {any} id * @param {any} version - * @param diagObj */ -export const draw = (text, id, version, diagObj) => { +export const draw = (text, id, version) => { try { // const parser = infoParser.parser; // parser.yy = db; log.debug('Rendering info diagram\n' + text); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); diff --git a/packages/mermaid/src/diagrams/pie/pieDb.js b/packages/mermaid/src/diagrams/pie/pieDb.js index 8ef4d9efc0..5ccf6d29ed 100644 --- a/packages/mermaid/src/diagrams/pie/pieDb.js +++ b/packages/mermaid/src/diagrams/pie/pieDb.js @@ -21,7 +21,7 @@ export const parseDirective = function (statement, context, type) { const addSection = function (id, value) { id = common.sanitizeText(id, configApi.getConfig()); - if (typeof sections[id] === 'undefined') { + if (sections[id] === undefined) { sections[id] = value; log.debug('Added new section :', id); } diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts index 65a011c7a0..e267c710ab 100644 --- a/packages/mermaid/src/diagrams/pie/pieDetector.ts +++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts @@ -1,5 +1,6 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const pieDetector: DiagramDetector = (txt) => { - return txt.match(/^\s*pie/) !== null; + const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null; + return logOutput; }; diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js index f8e21bc9d1..83f301207a 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.js +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js @@ -3,7 +3,6 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3'; import { log } from '../../logger'; import { configureSvgSize } from '../../setupGraphViewbox'; import * as configApi from '../../config'; -import addSVGAccessibilityFields from '../../accessibility'; let conf = configApi.getConfig(); @@ -21,7 +20,7 @@ export const draw = (txt, id, _version, diagObj) => { log.debug('Rendering info diagram\n' + txt); const securityLevel = configApi.getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -39,21 +38,20 @@ export const draw = (txt, id, _version, diagObj) => { const elem = doc.getElementById(id); width = elem.parentElement.offsetWidth; - if (typeof width === 'undefined') { + if (width === undefined) { width = 1200; } - if (typeof conf.useWidth !== 'undefined') { + if (conf.useWidth !== undefined) { width = conf.useWidth; } - if (typeof conf.pie.useWidth !== 'undefined') { + if (conf.pie.useWidth !== undefined) { width = conf.pie.useWidth; } const diagram = root.select('#' + id); configureSvgSize(diagram, height, width, conf.pie.useMaxWidth); - addSVGAccessibilityFields(diagObj.db, diagram, id); // Set viewBox elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); @@ -94,10 +92,22 @@ export const draw = (txt, id, _version, diagObj) => { var color = scaleOrdinal().range(myGeneratedColors); // Compute the position of each group on the pie: - var pie = d3pie().value(function (d) { - return d[1]; + var pieData = Object.entries(data).map(function (el, idx) { + return { + order: idx, + name: el[0], + value: el[1], + }; }); - var dataReady = pie(Object.entries(data)); + var pie = d3pie() + .value(function (d) { + return d.value; + }) + .sort(function (a, b) { + // Sort slices in clockwise direction + return a.order - b.order; + }); + var dataReady = pie(pieData); // Shape helper to build arcs: var arcGenerator = arc().innerRadius(0).outerRadius(radius); @@ -110,7 +120,7 @@ export const draw = (txt, id, _version, diagObj) => { .append('path') .attr('d', arcGenerator) .attr('fill', function (d) { - return color(d.data[0]); + return color(d.data.name); }) .attr('class', 'pieCircle'); @@ -122,7 +132,7 @@ export const draw = (txt, id, _version, diagObj) => { .enter() .append('text') .text(function (d) { - return ((d.data[1] / sum) * 100).toFixed(0) + '%'; + return ((d.data.value / sum) * 100).toFixed(0) + '%'; }) .attr('transform', function (d) { return 'translate(' + arcGenerator.centroid(d) + ')'; @@ -145,11 +155,11 @@ export const draw = (txt, id, _version, diagObj) => { .append('g') .attr('class', 'legend') .attr('transform', function (d, i) { - var height = legendRectSize + legendSpacing; - var offset = (height * color.domain().length) / 2; - var horz = 12 * legendRectSize; - var vert = i * height - offset; - return 'translate(' + horz + ',' + vert + ')'; + const height = legendRectSize + legendSpacing; + const offset = (height * color.domain().length) / 2; + const horizontal = 12 * legendRectSize; + const vertical = i * height - offset; + return 'translate(' + horizontal + ',' + vertical + ')'; }); legend @@ -166,9 +176,9 @@ export const draw = (txt, id, _version, diagObj) => { .attr('y', legendRectSize - legendSpacing) .text(function (d) { if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) { - return d.data[0] + ' [' + d.data[1] + ']'; + return d.data.name + ' [' + d.data.value + ']'; } else { - return d.data[0]; + return d.data.name; } }); } catch (e) { diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js index 9d48f0b2dc..df5eb0ab9d 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementDb.js +++ b/packages/mermaid/src/diagrams/requirement/requirementDb.js @@ -53,7 +53,7 @@ export const parseDirective = function (statement, context, type) { }; const addRequirement = (name, type) => { - if (typeof requirements[name] === 'undefined') { + if (requirements[name] === undefined) { requirements[name] = { name, type, @@ -72,31 +72,31 @@ const addRequirement = (name, type) => { const getRequirements = () => requirements; const setNewReqId = (id) => { - if (typeof latestRequirement != 'undefined') { + if (latestRequirement !== undefined) { latestRequirement.id = id; } }; const setNewReqText = (text) => { - if (typeof latestRequirement != 'undefined') { + if (latestRequirement !== undefined) { latestRequirement.text = text; } }; const setNewReqRisk = (risk) => { - if (typeof latestRequirement != 'undefined') { + if (latestRequirement !== undefined) { latestRequirement.risk = risk; } }; const setNewReqVerifyMethod = (verifyMethod) => { - if (typeof latestRequirement != 'undefined') { + if (latestRequirement !== undefined) { latestRequirement.verifyMethod = verifyMethod; } }; const addElement = (name) => { - if (typeof elements[name] === 'undefined') { + if (elements[name] === undefined) { elements[name] = { name, @@ -113,13 +113,13 @@ const addElement = (name) => { const getElements = () => elements; const setNewElementType = (type) => { - if (typeof latestElement != 'undefined') { + if (latestElement !== undefined) { latestElement.type = type; } }; const setNewElementDocRef = (docRef) => { - if (typeof latestElement != 'undefined') { + if (latestElement !== undefined) { latestElement.docRef = docRef; } }; diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js index d10c43066c..9fd746bd1a 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js +++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js @@ -1,12 +1,11 @@ import { line, select } from 'd3'; -import dagre from 'dagre'; -import graphlib from 'graphlib'; +import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger'; import { configureSvgSize } from '../../setupGraphViewbox'; import common from '../common/common'; import markers from './requirementMarkers'; import { getConfig } from '../../config'; -import addSVGAccessibilityFields from '../../accessibility'; let conf = {}; let relCnt = 0; @@ -284,7 +283,7 @@ const addRelationships = (relationships, g) => { const adjustEntities = function (svgNode, graph) { graph.nodes().forEach(function (v) { - if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') { + if (v !== undefined && graph.node(v) !== undefined) { svgNode.select('#' + v); svgNode .select('#' + v) @@ -311,7 +310,7 @@ export const draw = (text, id, _version, diagObj) => { diagObj.parser.parse(text); const securityLevel = conf.securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -348,7 +347,7 @@ export const draw = (text, id, _version, diagObj) => { drawReqs(requirements, g, svg); drawElements(elements, g, svg); addRelationships(relationships, g); - dagre.layout(g); + dagreLayout(g); adjustEntities(svg, g); relationships.forEach(function (rel) { @@ -363,8 +362,6 @@ export const draw = (text, id, _version, diagObj) => { configureSvgSize(svg, height, width, conf.useMaxWidth); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); - // Adds title and description to the requirements diagram - addSVGAccessibilityFields(diagObj.db, svg, id); }; export default { diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js index 6c863e204e..fadd9f3918 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js @@ -26,7 +26,9 @@ export const parseDirective = function (statement, context, type) { export const addActor = function (id, name, description, type) { // Don't allow description nulling const old = actors[id]; - if (old && name === old.name && description == null) return; + if (old && name === old.name && description == null) { + return; + } // Don't allow null descriptions, either if (description == null || description.text == null) { @@ -58,15 +60,11 @@ const activationCount = (part) => { let i; let count = 0; for (i = 0; i < messages.length; i++) { - if (messages[i].type === LINETYPE.ACTIVE_START) { - if (messages[i].from.actor === part) { - count++; - } + if (messages[i].type === LINETYPE.ACTIVE_START && messages[i].from.actor === part) { + count++; } - if (messages[i].type === LINETYPE.ACTIVE_END) { - if (messages[i].from.actor === part) { - count--; - } + if (messages[i].type === LINETYPE.ACTIVE_END && messages[i].from.actor === part) { + count--; } } return count; @@ -141,7 +139,7 @@ export const setWrap = function (wrapSetting) { export const autoWrap = () => { // if setWrap has been called, use that value, otherwise use the value from the config // TODO: refactor, always use the config value let setWrap update the config value - if (typeof wrapEnabled !== 'undefined') { + if (wrapEnabled !== undefined) { return wrapEnabled; } return configApi.getConfig().sequence.wrap; @@ -157,11 +155,11 @@ export const clear = function () { export const parseMessage = function (str) { const _str = str.trim(); const message = { - text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(), + text: _str.replace(/^:?(?:no)?wrap:/, '').trim(), wrap: - _str.match(/^[:]?wrap:/) !== null + _str.match(/^:?wrap:/) !== null ? true - : _str.match(/^[:]?nowrap:/) !== null + : _str.match(/^:?nowrap:/) !== null ? false : undefined, }; @@ -221,6 +219,7 @@ export const addNote = function (actor, placement, message) { }; // Coerce actor into a [to, from, ...] array + // eslint-disable-next-line unicorn/prefer-spread const actors = [].concat(actor, actor); notes.push(note); @@ -335,7 +334,7 @@ export const addDetails = function (actorId, text) { }; export const getActorProperty = function (actor, key) { - if (typeof actor !== 'undefined' && typeof actor.properties !== 'undefined') { + if (actor !== undefined && actor.properties !== undefined) { return actor.properties[key]; } @@ -343,7 +342,7 @@ export const getActorProperty = function (actor, key) { }; export const apply = function (param) { - if (param instanceof Array) { + if (Array.isArray(param)) { param.forEach(function (item) { apply(item); }); diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 5aebd1e3a5..6395940b05 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -1,8 +1,62 @@ +import { vi } from 'vitest'; + import * as configApi from '../../config'; import mermaidAPI from '../../mermaidAPI'; import Diagram from '../../Diagram'; import { addDiagrams } from '../../diagram-api/diagram-orchestration'; + +/** + * Sequence diagrams require their own very special version of a mocked d3 module + * diagrams/sequence/svgDraw uses statements like this with d3 nodes: (note the [0][0]) + * + * // in drawText(...) + * textHeight += (textElem._groups || textElem)[0][0].getBBox().height; + */ +vi.mock('d3', () => { + const NewD3 = function () { + function returnThis() { + return this; + } + return { + append: function () { + return NewD3(); + }, + lower: returnThis, + attr: returnThis, + style: returnThis, + text: returnThis, + // [0][0] (below) is required by drawText() in packages/mermaid/src/diagrams/sequence/svgDraw.js + 0: { + 0: { + getBBox: function () { + return { + height: 10, + width: 20, + }; + }, + }, + }, + }; + }; + + return { + select: function () { + return new NewD3(); + }, + + selectAll: function () { + return new NewD3(); + }, + + curveBasis: 'basis', + curveLinear: 'linear', + curveCardinal: 'cardinal', + }; +}); +// ------------------------------- + addDiagrams(); + /** * @param conf * @param key @@ -130,7 +184,7 @@ Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`; mermaidAPI.parse(str); - diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility autonumbers + diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers expect(diagram.db.showSequenceNumbers()).toBe(false); }); it('should show sequence numbers when autonumber is enabled', function () { @@ -142,7 +196,7 @@ Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`; mermaidAPI.parse(str); - diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility autonumbers + diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers expect(diagram.db.showSequenceNumbers()).toBe(true); }); it('should handle a sequenceDiagram definition with a title:', function () { @@ -1871,7 +1925,7 @@ Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!`; mermaidAPI.parse(str1, diagram); - diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility autonumbers + diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers expect(diagram.db.showSequenceNumbers()).toBe(true); const str2 = ` diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 19352ca723..1f6164b92a 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -9,7 +9,7 @@ import * as configApi from '../../config'; import assignWithDepth from '../../assignWithDepth'; import utils from '../../utils'; import { configureSvgSize } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; +import Diagram from '../../Diagram'; let conf = {}; @@ -90,7 +90,7 @@ export const bounds = { setConf(configApi.getConfig()); }, updateVal: function (obj, key, val, fun) { - if (typeof obj[key] === 'undefined') { + if (obj[key] === undefined) { obj[key] = val; } else { obj[key] = fun(val, obj[key]); @@ -100,8 +100,8 @@ export const bounds = { // eslint-disable-next-line @typescript-eslint/no-this-alias const _self = this; let cnt = 0; - /** @param {any} type */ - function updateFn(type) { + /** @param type - Either `activation` or `undefined` */ + function updateFn(type?: 'activation') { return function updateItemBounds(item) { cnt++; // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems @@ -200,15 +200,25 @@ export const bounds = { }, }; +/** Options for drawing a note in {@link drawNote} */ +interface NoteModel { + /** x axis start position */ + startx: number; + /** y axis position */ + starty: number; + /** the message to be shown */ + message: string; + /** Set this with a custom width to override the default configured width. */ + width: number; +} + /** * Draws an note in the diagram with the attached line * - * @param {any} elem - The diagram to draw to. - * @param {{ x: number; y: number; message: string; width: number }} noteModel - Startx: x axis - * start position, verticalPos: y axis position, messsage: the message to be shown, width: Set - * this with a custom width to override the default configured width. + * @param elem - The diagram to draw to. + * @param noteModel - Note model options. */ -const drawNote = function (elem, noteModel) { +const drawNote = function (elem: any, noteModel: NoteModel) { bounds.bumpVerticalPos(conf.boxMargin); noteModel.height = conf.boxMargin; noteModel.starty = bounds.getVerticalPos(); @@ -278,11 +288,11 @@ const actorFont = (cnf) => { * message so it can be drawn later. We do not draw the message at this point so the arrowhead can * be on top of the activation box. * - * @param {any} diagram - The parent of the message element - * @param {any} msgModel - The model containing fields describing a message - * @returns {number} LineStarty - The Y coordinate at which the message line starts + * @param _diagram - The parent of the message element. + * @param msgModel - The model containing fields describing a message + * @returns `lineStartY` - The Y coordinate at which the message line starts */ -const boundMessage = function (diagram, msgModel) { +function boundMessage(_diagram, msgModel): number { bounds.bumpVerticalPos(10); const { startx, stopx, message } = msgModel; const lines = common.splitBreaks(message).length; @@ -292,15 +302,15 @@ const boundMessage = function (diagram, msgModel) { bounds.bumpVerticalPos(lineHeight); - let lineStarty; + let lineStartY; let totalOffset = textDims.height - 10; const textWidth = textDims.width; if (startx === stopx) { - lineStarty = bounds.getVerticalPos() + totalOffset; + lineStartY = bounds.getVerticalPos() + totalOffset; if (!conf.rightAngles) { totalOffset += conf.boxMargin; - lineStarty = bounds.getVerticalPos() + totalOffset; + lineStartY = bounds.getVerticalPos() + totalOffset; } totalOffset += 30; const dx = Math.max(textWidth / 2, conf.width / 2); @@ -312,26 +322,26 @@ const boundMessage = function (diagram, msgModel) { ); } else { totalOffset += conf.boxMargin; - lineStarty = bounds.getVerticalPos() + totalOffset; - bounds.insert(startx, lineStarty - 10, stopx, lineStarty); + lineStartY = bounds.getVerticalPos() + totalOffset; + bounds.insert(startx, lineStartY - 10, stopx, lineStartY); } bounds.bumpVerticalPos(totalOffset); msgModel.height += totalOffset; msgModel.stopy = msgModel.starty + msgModel.height; bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy); - return lineStarty; -}; + return lineStartY; +} /** * Draws a message. Note that the bounds have previously been updated by boundMessage. * - * @param {any} diagram - The parent of the message element - * @param {any} msgModel - The model containing fields describing a message - * @param {number} lineStarty - The Y coordinate at which the message line starts - * @param diagObj + * @param diagram - The parent of the message element + * @param msgModel - The model containing fields describing a message + * @param lineStartY - The Y coordinate at which the message line starts + * @param diagObj - The diagram object. */ -const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { +const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Diagram) { const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel; const textDims = utils.calculateTextDimensions(message, messageFont(conf)); const textObj = svgDraw.getTextObj(); @@ -360,8 +370,8 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { .append('path') .attr( 'd', - `M ${startx},${lineStarty} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${ - lineStarty + 25 + `M ${startx},${lineStartY} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${ + lineStartY + 25 } H ${startx}` ); } else { @@ -372,27 +382,27 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { 'M ' + startx + ',' + - lineStarty + + lineStartY + ' C ' + (startx + 60) + ',' + - (lineStarty - 10) + + (lineStartY - 10) + ' ' + (startx + 60) + ',' + - (lineStarty + 30) + + (lineStartY + 30) + ' ' + startx + ',' + - (lineStarty + 20) + (lineStartY + 20) ); } } else { line = diagram.append('line'); line.attr('x1', startx); - line.attr('y1', lineStarty); + line.attr('y1', lineStartY); line.attr('x2', stopx); - line.attr('y2', lineStarty); + line.attr('y2', lineStartY); } // Make an SVG Container // Draw the line @@ -440,7 +450,7 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) { diagram .append('text') .attr('x', startx) - .attr('y', lineStarty + 4) + .attr('y', lineStartY + 4) .attr('font-family', 'sans-serif') .attr('font-size', '12px') .attr('text-anchor', 'middle') @@ -470,8 +480,8 @@ export const drawActors = function ( let prevWidth = 0; let prevMargin = 0; let maxHeight = 0; - for (let i = 0; i < actorKeys.length; i++) { - const actor = actors[actorKeys[i]]; + for (const actorKey of actorKeys) { + const actor = actors[actorKey]; // Add some rendering data to the object actor.width = actor.width || conf.width; @@ -498,8 +508,8 @@ export const drawActors = function ( export const drawActorsPopup = function (diagram, actors, actorKeys, doc) { let maxHeight = 0; let maxWidth = 0; - for (let i = 0; i < actorKeys.length; i++) { - const actor = actors[actorKeys[i]]; + for (const actorKey of actorKeys) { + const actor = actors[actorKey]; const minMenuWidth = getRequiredPopupWidth(actor); const menuDimensions = svgDraw.drawPopup( diagram, @@ -554,13 +564,6 @@ const activationBounds = function (actor, actors) { return [left, right]; }; -/** - * @param {any} loopWidths - * @param {any} msg - * @param {any} preMargin - * @param {any} postMargin - * @param {any} addLoopFn - */ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) { bounds.bumpVerticalPos(preMargin); let heightAdjust = postMargin; @@ -584,15 +587,15 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop /** * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text. * - * @param {any} _text The text of the diagram - * @param {any} id The id of the diagram which will be used as a DOM element id¨ - * @param {any} _version Mermaid version from package.json - * @param {any} diagObj A stanard diagram containing the db and the text and type etc of the 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, id, _version, diagObj) { +export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) { const { securityLevel, sequence } = configApi.getConfig(); conf = sequence; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -632,10 +635,10 @@ export const draw = function (_text, id, _version, diagObj) { svgDraw.insertSequenceNumber(diagram); /** - * @param {any} msg - * @param {any} verticalPos + * @param msg - The message to draw. + * @param verticalPos - The vertical position of the message. */ - function activeEnd(msg, verticalPos) { + function activeEnd(msg: any, verticalPos: number) { const activationData = bounds.endActivation(msg); if (activationData.starty + 18 > verticalPos) { activationData.starty = verticalPos - 6; @@ -762,8 +765,11 @@ export const draw = function (_text, id, _version, diagObj) { case diagObj.db.LINETYPE.AUTONUMBER: sequenceIndex = msg.message.start || sequenceIndex; sequenceIndexStep = msg.message.step || sequenceIndexStep; - if (msg.message.visible) diagObj.db.enableSequenceNumbers(); - else diagObj.db.disableSequenceNumbers(); + if (msg.message.visible) { + diagObj.db.enableSequenceNumbers(); + } else { + diagObj.db.disableSequenceNumbers(); + } break; case diagObj.db.LINETYPE.CRITICAL_START: adjustLoopHeightForWrap( @@ -811,8 +817,8 @@ export const draw = function (_text, id, _version, diagObj) { msgModel.starty = bounds.getVerticalPos(); msgModel.sequenceIndex = sequenceIndex; msgModel.sequenceVisible = diagObj.db.showSequenceNumbers(); - const lineStarty = boundMessage(diagram, msgModel); - messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty }); + const lineStartY = boundMessage(diagram, msgModel); + messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY }); bounds.models.addMessage(msgModel); } catch (e) { log.error('error while drawing message', e); @@ -836,7 +842,7 @@ export const draw = function (_text, id, _version, diagObj) { } }); - messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty, diagObj)); + messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj)); if (conf.mirrorActors) { // Draw actors below diagram @@ -897,7 +903,6 @@ export const draw = function (_text, id, _version, diagObj) { (height + extraVertForTitle) ); - addSVGAccessibilityFields(diagObj.db, diagram, id); log.debug(`models:`, bounds.models); }; @@ -907,12 +912,16 @@ export const draw = function (_text, id, _version, diagObj) { * It will enumerate each given message, and will determine its text width, in relation to the actor * it originates from, and destined to. * - * @param {any} actors - The actors map - * @param {Array} messages - A list of message objects to iterate - * @param diagObj - * @returns {any} + * @param actors - The actors map + * @param messages - A list of message objects to iterate + * @param diagObj - The diagram object. + * @returns The max message width of each actor. */ -const getMaxMessageWidthPerActor = function (actors, messages, diagObj) { +function getMaxMessageWidthPerActor( + actors: { [id: string]: any }, + messages: any[], + diagObj: Diagram +): { [id: string]: number } { const maxMessageWidthPerActor = {}; messages.forEach(function (msg) { @@ -1005,7 +1014,7 @@ const getMaxMessageWidthPerActor = function (actors, messages, diagObj) { log.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor); return maxMessageWidthPerActor; -}; +} const getRequiredPopupWidth = function (actor) { let requiredPopupWidth = 0; @@ -1022,15 +1031,19 @@ const getRequiredPopupWidth = function (actor) { }; /** - * This will calculate the optimal margin for each given actor, for a given actor->messageWidth map. + * This will calculate the optimal margin for each given actor, + * for a given actor → messageWidth map. * * An actor's margin is determined by the width of the actor, the width of the largest message that * originates from it, and the configured conf.actorMargin. * - * @param {any} actors - The actors map to calculate margins for - * @param {any} actorToMessageWidth - A map of actor key -> max message width it holds + * @param actors - The actors map to calculate margins for + * @param actorToMessageWidth - A map of actor key → max message width it holds */ -const calculateActorMargins = function (actors, actorToMessageWidth) { +function calculateActorMargins( + actors: { [id: string]: any }, + actorToMessageWidth: ReturnType +) { let maxHeight = 0; Object.keys(actors).forEach((prop) => { const actor = actors[prop]; @@ -1071,7 +1084,7 @@ const calculateActorMargins = function (actors, actorToMessageWidth) { } return Math.max(maxHeight, conf.height); -}; +} const buildNoteModel = function (msg, actors, diagObj) { const startx = actors[msg.from].x; @@ -1165,7 +1178,7 @@ const buildMessageModel = function (msg, actors, diagObj) { const toBounds = activationBounds(msg.to, actors); const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0; const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1; - const allBounds = fromBounds.concat(toBounds); + const allBounds = [...fromBounds, ...toBounds]; const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]); if (msg.wrap && msg.message) { msg.message = utils.wrapLabel( diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index fd70871e04..ce1caea69b 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -13,7 +13,7 @@ export const drawRect = function (elem, rectData) { rectElem.attr('rx', rectData.rx); rectElem.attr('ry', rectData.ry); - if (typeof rectData.class !== 'undefined') { + if (rectData.class !== undefined) { rectElem.attr('class', rectData.class); } @@ -31,7 +31,9 @@ const addPopupInteraction = (id, actorCnt) => { addFunction(() => { const arr = document.querySelectorAll(id); // This will be the case when running in sandboxed mode - if (arr.length === 0) return; + if (arr.length === 0) { + return; + } arr[0].addEventListener('mouseover', function () { popupMenuUpFunc('actor' + actorCnt + '_popup'); }); @@ -60,7 +62,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe g.attr('display', displayValue); addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt); var actorClass = ''; - if (typeof rectData.class !== 'undefined') { + if (rectData.class !== undefined) { actorClass = ' ' + rectData.class; } @@ -158,8 +160,8 @@ export const drawText = function (elem, textData) { let dy = 0; let yfunc = () => textData.y; if ( - typeof textData.valign !== 'undefined' && - typeof textData.textMargin !== 'undefined' && + textData.valign !== undefined && + textData.textMargin !== undefined && textData.textMargin > 0 ) { switch (textData.valign) { @@ -184,9 +186,9 @@ export const drawText = function (elem, textData) { } } if ( - typeof textData.anchor !== 'undefined' && - typeof textData.textMargin !== 'undefined' && - typeof textData.width !== 'undefined' + textData.anchor !== undefined && + textData.textMargin !== undefined && + textData.width !== undefined ) { switch (textData.anchor) { case 'left': @@ -212,12 +214,11 @@ export const drawText = function (elem, textData) { break; } } - for (let i = 0; i < lines.length; i++) { - let line = lines[i]; + for (let [i, line] of lines.entries()) { if ( - typeof textData.textMargin !== 'undefined' && + textData.textMargin !== undefined && textData.textMargin === 0 && - typeof textData.fontSize !== 'undefined' + textData.fontSize !== undefined ) { dy = i * textData.fontSize; } @@ -225,28 +226,28 @@ export const drawText = function (elem, textData) { const textElem = elem.append('text'); textElem.attr('x', textData.x); textElem.attr('y', yfunc()); - if (typeof textData.anchor !== 'undefined') { + if (textData.anchor !== undefined) { textElem .attr('text-anchor', textData.anchor) .attr('dominant-baseline', textData.dominantBaseline) .attr('alignment-baseline', textData.alignmentBaseline); } - if (typeof textData.fontFamily !== 'undefined') { + if (textData.fontFamily !== undefined) { textElem.style('font-family', textData.fontFamily); } - if (typeof textData.fontSize !== 'undefined') { + if (textData.fontSize !== undefined) { textElem.style('font-size', textData.fontSize); } - if (typeof textData.fontWeight !== 'undefined') { + if (textData.fontWeight !== undefined) { textElem.style('font-weight', textData.fontWeight); } - if (typeof textData.fill !== 'undefined') { + if (textData.fill !== undefined) { textElem.attr('fill', textData.fill); } - if (typeof textData.class !== 'undefined') { + if (textData.class !== undefined) { textElem.attr('class', textData.class); } - if (typeof textData.dy !== 'undefined') { + if (textData.dy !== undefined) { textElem.attr('dy', textData.dy); } else if (dy !== 0) { textElem.attr('dy', dy); @@ -255,7 +256,7 @@ export const drawText = function (elem, textData) { if (textData.tspan) { const span = textElem.append('tspan'); span.attr('x', textData.x); - if (typeof textData.fill !== 'undefined') { + if (textData.fill !== undefined) { span.attr('fill', textData.fill); } span.text(line); @@ -263,8 +264,8 @@ export const drawText = function (elem, textData) { textElem.text(line); } if ( - typeof textData.valign !== 'undefined' && - typeof textData.textMargin !== 'undefined' && + textData.valign !== undefined && + textData.textMargin !== undefined && textData.textMargin > 0 ) { textHeight += (textElem._groups || textElem)[0][0].getBBox().height; @@ -322,7 +323,9 @@ export const drawLabel = function (elem, txtObject) { let actorCnt = -1; export const fixLifeLineHeights = (diagram, bounds) => { - if (!diagram.selectAll) return; + if (!diagram.selectAll) { + return; + } diagram .selectAll('.actor-line') .attr('class', '200') @@ -509,7 +512,7 @@ export const anchorElement = function (elem) { * * @param {any} elem - Element to append activation rect. * @param {any} bounds - Activation box bounds. - * @param {any} verticalPos - Precise y cooridnate of bottom activation box edge. + * @param {any} verticalPos - Precise y coordinate of bottom activation box edge. * @param {any} conf - Sequence diagram config object. * @param {any} actorActivations - Number of activations on the actor. */ @@ -527,10 +530,10 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc /** * Draws a loop in the diagram * - * @param {any} elem - Elemenet to append the loop to. + * @param {any} elem - Element to append the loop to. * @param {any} loopModel - LoopModel of the given loop. * @param {any} labelText - Text within the loop. - * @param {any} conf - Diagrom configuration + * @param {any} conf - Diagram configuration * @returns {any} */ export const drawLoop = function (elem, loopModel, labelText, conf) { @@ -557,7 +560,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) { drawLoopLine(loopModel.stopx, loopModel.starty, loopModel.stopx, loopModel.stopy); drawLoopLine(loopModel.startx, loopModel.stopy, loopModel.stopx, loopModel.stopy); drawLoopLine(loopModel.startx, loopModel.starty, loopModel.startx, loopModel.stopy); - if (typeof loopModel.sections !== 'undefined') { + if (loopModel.sections !== undefined) { loopModel.sections.forEach(function (item) { drawLoopLine(loopModel.startx, item.y, loopModel.stopx, item.y).style( 'stroke-dasharray', @@ -597,7 +600,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) { let textElem = drawText(g, txt); - if (typeof loopModel.sectionTitles !== 'undefined') { + if (loopModel.sectionTitles !== undefined) { loopModel.sectionTitles.forEach(function (item, idx) { if (item.message) { txt.text = item.message; @@ -748,7 +751,7 @@ export const insertSequenceNumber = function (elem) { // .style("fill", '#f00'); }; /** - * Setup arrow head and define the marker. The result is appended to the svg. + * Setup cross head and define the marker. The result is appended to the svg. * * @param {any} elem */ @@ -760,26 +763,16 @@ export const insertArrowCrossHead = function (elem) { .attr('markerWidth', 15) .attr('markerHeight', 8) .attr('orient', 'auto') - .attr('refX', 16) - .attr('refY', 4); - - // The arrow - marker - .append('path') - .attr('fill', 'black') - .attr('stroke', '#000000') - .style('stroke-dasharray', '0, 0') - .attr('stroke-width', '1px') - .attr('d', 'M 9,2 V 6 L16,4 Z'); - + .attr('refX', 4) + .attr('refY', 5); // The cross marker .append('path') .attr('fill', 'none') .attr('stroke', '#000000') .style('stroke-dasharray', '0, 0') - .attr('stroke-width', '1px') - .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7'); + .attr('stroke-width', '1pt') + .attr('d', 'M 1,2 L 6,7 M 6,2 L 1,7'); // this is actual shape for arrowhead }; diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js index 580dafe896..8e5f5f32bc 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js @@ -1,5 +1,31 @@ +import { vi } from 'vitest'; import svgDraw from './svgDraw'; -import { MockD3 } from 'd3'; + +// This is the only place that uses this mock +export const MockD3 = (name, parent) => { + const children = []; + const elem = { + get __children() { + return children; + }, + get __name() { + return name; + }, + get __parent() { + return parent; + }, + }; + elem.append = (name) => { + const mockElem = MockD3(name, elem); + children.push(mockElem); + return mockElem; + }; + elem.lower = vi.fn(() => elem); + elem.attr = vi.fn(() => elem); + elem.text = vi.fn(() => elem); + elem.style = vi.fn(() => elem); + return elem; +}; describe('svgDraw', function () { describe('drawRect', function () { diff --git a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js new file mode 100644 index 0000000000..75ecb4b13f --- /dev/null +++ b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js @@ -0,0 +1,210 @@ +import stateDb from '../stateDb'; +import stateDiagram from './stateDiagram'; +import { setConfig } from '../../../config'; + +setConfig({ + securityLevel: 'strict', +}); + +describe('ClassDefs and classes when parsing a State diagram', () => { + beforeEach(function () { + stateDiagram.parser.yy = stateDb; + stateDiagram.parser.yy.clear(); + }); + + describe('class for a state (classDef)', () => { + describe('defining (classDef)', () => { + it('has "classDef" as a keyword, an id, and can set a css style attribute', function () { + stateDiagram.parser.parse('stateDiagram-v2\n classDef exampleClass background:#bbb;'); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const styleClasses = stateDb.getClasses(); + expect(styleClasses['exampleClass'].styles.length).toEqual(1); + expect(styleClasses['exampleClass'].styles[0]).toEqual('background:#bbb'); + }); + + it('can define multiple attributes separated by commas', function () { + stateDiagram.parser.parse( + 'stateDiagram-v2\n classDef exampleClass background:#bbb, font-weight:bold, font-style:italic;' + ); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const styleClasses = stateDb.getClasses(); + expect(styleClasses['exampleClass'].styles.length).toEqual(3); + expect(styleClasses['exampleClass'].styles[0]).toEqual('background:#bbb'); + expect(styleClasses['exampleClass'].styles[1]).toEqual('font-weight:bold'); + expect(styleClasses['exampleClass'].styles[2]).toEqual('font-style:italic'); + }); + + // need to look at what the lexer is doing + it('an attribute can have a dot in the style', function () { + stateDiagram.parser.parse( + 'stateDiagram-v2\n classDef exampleStyleClass background:#bbb,border:1.5px solid red;' + ); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const classes = stateDiagram.parser.yy.getClasses(); + expect(classes['exampleStyleClass'].styles.length).toBe(2); + expect(classes['exampleStyleClass'].styles[0]).toBe('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toBe('border:1.5px solid red'); + }); + + it('an attribute can have a space in the style', function () { + stateDiagram.parser.parse( + 'stateDiagram-v2\n classDef exampleStyleClass background: #bbb,border:1.5px solid red;' + ); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const classes = stateDiagram.parser.yy.getClasses(); + expect(classes['exampleStyleClass'].styles.length).toBe(2); + expect(classes['exampleStyleClass'].styles[0]).toBe('background: #bbb'); + expect(classes['exampleStyleClass'].styles[1]).toBe('border:1.5px solid red'); + }); + }); + + describe('applying to states in the diagram', () => { + it('can apply a class to a state', function () { + let diagram = ''; + diagram += 'stateDiagram-v2\n' + '\n'; + diagram += 'classDef exampleStyleClass background:#bbb,border:1px solid red;\n'; + diagram += 'a --> b '; + diagram += 'class a exampleStyleClass'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const classes = stateDb.getClasses(); + expect(classes['exampleStyleClass'].styles.length).toEqual(2); + expect(classes['exampleStyleClass'].styles[0]).toEqual('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toEqual('border:1px solid red'); + + const state_a = stateDb.getState('a'); + expect(state_a.classes.length).toEqual(1); + expect(state_a.classes[0]).toEqual('exampleStyleClass'); + }); + + it('can be applied to a state with an id containing _', function () { + let diagram = ''; + + diagram += 'stateDiagram-v2\n' + '\n'; + diagram += 'classDef exampleStyleClass background:#bbb,border:1px solid red;\n'; + diagram += 'a_a --> b_b' + '\n'; + diagram += 'class a_a exampleStyleClass'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const classes = stateDiagram.parser.yy.getClasses(); + expect(classes['exampleStyleClass'].styles.length).toBe(2); + expect(classes['exampleStyleClass'].styles[0]).toBe('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toBe('border:1px solid red'); + + const state_a_a = stateDiagram.parser.yy.getState('a_a'); + expect(state_a_a.classes.length).toEqual(1); + expect(state_a_a.classes[0]).toEqual('exampleStyleClass'); + }); + + describe('::: syntax', () => { + it('can be applied to a state using ::: syntax', () => { + let diagram = ''; + diagram += 'stateDiagram-v2\n' + '\n'; + diagram += 'classDef exampleStyleClass background:#bbb,border:1px solid red;' + '\n'; + diagram += 'a --> b:::exampleStyleClass' + '\n'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const states = stateDiagram.parser.yy.getStates(); + const classes = stateDiagram.parser.yy.getClasses(); + + expect(classes['exampleStyleClass'].styles.length).toEqual(2); + expect(classes['exampleStyleClass'].styles[0]).toEqual('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toEqual('border:1px solid red'); + + expect(states['b'].classes[0]).toEqual('exampleStyleClass'); + }); + + it('can be applied to a [*] state', () => { + let diagram = ''; + diagram += 'stateDiagram-v2\n\n'; + diagram += 'classDef exampleStyleClass background:#bbb,border:1px solid red;\n'; + diagram += '[*]:::exampleStyleClass --> b\n'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const states = stateDiagram.parser.yy.getStates(); + const classes = stateDiagram.parser.yy.getClasses(); + + expect(classes['exampleStyleClass'].styles.length).toEqual(2); + expect(classes['exampleStyleClass'].styles[0]).toEqual('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toEqual('border:1px solid red'); + + expect(states['root_start'].classes[0]).toEqual('exampleStyleClass'); + }); + + it('can be applied to a comma separated list of states', function () { + let diagram = ''; + diagram += 'stateDiagram-v2\n\n'; + diagram += 'classDef exampleStyleClass background:#bbb,border:1px solid red;\n'; + diagram += 'a-->b\n'; + diagram += 'class a,b exampleStyleClass'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + let classes = stateDiagram.parser.yy.getClasses(); + let states = stateDiagram.parser.yy.getStates(); + + expect(classes['exampleStyleClass'].styles.length).toEqual(2); + expect(classes['exampleStyleClass'].styles[0]).toEqual('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toEqual('border:1px solid red'); + expect(states['a'].classes[0]).toEqual('exampleStyleClass'); + expect(states['b'].classes[0]).toEqual('exampleStyleClass'); + }); + + it('a comma separated list of states may or may not have spaces after commas', function () { + let diagram = ''; + diagram += 'stateDiagram-v2\n\n'; + diagram += 'classDef exampleStyleClass background:#bbb,border:1px solid red;\n'; + diagram += 'a-->b\n'; + diagram += 'class a,b,c, d, e exampleStyleClass'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + const classes = stateDiagram.parser.yy.getClasses(); + const states = stateDiagram.parser.yy.getStates(); + + expect(classes['exampleStyleClass'].styles.length).toEqual(2); + expect(classes['exampleStyleClass'].styles[0]).toEqual('background:#bbb'); + expect(classes['exampleStyleClass'].styles[1]).toEqual('border:1px solid red'); + + const statesList = ['a', 'b', 'c', 'd', 'e']; + statesList.forEach((stateId) => { + expect(states[stateId].classes[0]).toEqual('exampleStyleClass'); + }); + }); + }); + + describe('comments parsing', () => { + it('working inside states', function () { + let diagram = ''; + diagram += 'stateDiagram-v2\n\n'; + diagram += '[*] --> Moving\n'; + diagram += 'Moving --> Still\n'; + diagram += 'Moving --> Crash\n'; + diagram += 'state Moving {\n'; + diagram += '%% comment inside state\n'; + diagram += 'slow --> fast\n'; + diagram += '}\n'; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const states = stateDiagram.parser.yy.getStates(); + + expect(states['Moving'].doc.length).toEqual(1); + }); + }); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/state/parser/stateDiagram.jison b/packages/mermaid/src/diagrams/state/parser/stateDiagram.jison index e2a984ca1f..67073210bf 100644 --- a/packages/mermaid/src/diagrams/state/parser/stateDiagram.jison +++ b/packages/mermaid/src/diagrams/state/parser/stateDiagram.jison @@ -23,6 +23,10 @@ %x acc_title %x acc_descr %x acc_descr_multiline +%x CLASSDEF +%x CLASSDEFID +%x CLASS +%x CLASS_STYLE %x NOTE %x NOTE_ID %x NOTE_TEXT @@ -39,6 +43,8 @@ %% +"default" return 'DEFAULT'; + .*direction\s+TB[^\n]* return 'direction_tb'; .*direction\s+BT[^\n]* return 'direction_bt'; .*direction\s+RL[^\n]* return 'direction_rl'; @@ -69,6 +75,20 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\}] { this.popState(); } [^\}]* return "acc_descr_multiline_value"; +"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' } + +"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; } +\d+ return 'WIDTH'; +\s+"width" {this.popState();} + + "state"\s+ { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); } .*"<>" {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';} .*"<>" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';} @@ -89,6 +109,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [^\n\s\{]+ {/*console.log('COMPOSIT_STATE', yytext);*/return 'COMPOSIT_STATE';} \n {this.popState();} \{ {this.popState();this.pushState('struct'); /*console.log('begin struct', yytext);*/return 'STRUCT_START';} +\%\%(?!\{)[^\n]* /* skip comments inside state*/ \} { /*console.log('Ending struct');*/ this.popState(); return 'STRUCT_STOP';}} [\n] /* nothing */ @@ -111,10 +132,12 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [^:\n\s\-\{]+ { /*console.log('=>ID=',yytext);*/ return 'ID';} // \s*":"[^\+\->:\n;]+ { yytext = yytext.trim(); /*console.log('Descr = ', yytext);*/ return 'DESCR'; } \s*":"[^:\n;]+ { yytext = yytext.trim(); /*console.log('Descr = ', yytext);*/ return 'DESCR'; } + "-->" return '-->'; -"--" return 'CONCURRENT'; -<> return 'NL'; -. return 'INVALID'; +"--" return 'CONCURRENT'; +":::" return 'STYLE_SEPARATOR'; +<> return 'NL'; +. return 'INVALID'; /lex @@ -124,20 +147,23 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili %% /* language grammar */ +/* $$ is the value of the symbol being evaluated (= what is to the left of the : in the rule */ + start : SPACE start | NL start | directive start - | SD document { /*console.warn('Root document', $2);*/ yy.setRootDoc($2);return $2; } + | SD document { /* console.log('--> Root document', $2); */ yy.setRootDoc($2); return $2; } ; document - : /* empty */ { $$ = [] } + : /* empty */ { /*console.log('empty document'); */ $$ = [] } | document line { - if($2!='nl'){ - $1.push($2);$$ = $1 + if($2 !='nl'){ + /* console.log(' document: 1: ', $1, ' pushing 2: ', $2); */ + $1.push($2); $$ = $1 } - // console.warn('Got document',$1, $2); + /* console.log('Got document',$1, $2); */ } ; @@ -148,24 +174,34 @@ line ; statement - : idStatement { /*console.warn('got id and descr', $1);*/$$={ stmt: 'state', id: $1, type: 'default', description: ''};} - | idStatement DESCR { /*console.warn('got id and descr', $1, $2.trim());*/$$={ stmt: 'state', id: $1, type: 'default', description: yy.trimColon($2)};} + : classDefStatement + | cssClassStatement + | idStatement { /* console.log('got id', $1); */ + $$=$1; + } + | idStatement DESCR { + const stateStmt = $1; + stateStmt.description = yy.trimColon($2); + $$ = stateStmt; + } | idStatement '-->' idStatement - { - /*console.warn('got id', $1);yy.addRelation($1, $3);*/ - $$={ stmt: 'relation', state1: { stmt: 'state', id: $1, type: 'default', description: '' }, state2:{ stmt: 'state', id: $3 ,type: 'default', description: ''}}; - } + { + /* console.info('got ids: 1: ', $1, ' 2:', $2,' 3: ', $3); */ + // console.log(' idStatement --> idStatement : state1 =', $1, ' state2 =', $3); + $$={ stmt: 'relation', state1: $1, state2: $3}; + } | idStatement '-->' idStatement DESCR - { - /*yy.addRelation($1, $3, $4.substr(1).trim());*/ - $$={ stmt: 'relation', state1: { stmt: 'state', id: $1, type: 'default', description: '' }, state2:{ stmt: 'state', id: $3 ,type: 'default', description: ''}, description: $4.substr(1).trim()}; - } + { + const relDescription = yy.trimColon($4); + /* console.log(' idStatement --> idStatement DESCR : state1 =', $1, ' state2stmt =', $3, ' description: ', relDescription); */ + $$={ stmt: 'relation', state1: $1, state2: $3, description: relDescription}; + } | HIDE_EMPTY | scale WIDTH | COMPOSIT_STATE | COMPOSIT_STATE STRUCT_START document STRUCT_STOP { - /* console.warn('Adding document for state without id ', $1);*/ + /* console.log('Adding document for state without id ', $1); */ $$={ stmt: 'state', id: $1, type: 'default', description: '', doc: $3 } } | STATE_DESCR AS ID { @@ -181,7 +217,7 @@ statement } | STATE_DESCR AS ID STRUCT_START document STRUCT_STOP { - // console.warn('Adding document for state with id zxzx', $3, $4, yy.getDirection()); yy.addDocument($3); + /* console.log('Adding document for state with id zxzx', $3, $4, yy.getDirection()); yy.addDocument($3);*/ $$={ stmt: 'state', id: $3, type: 'default', description: $1, doc: $5 } } | FORK { @@ -208,6 +244,23 @@ statement | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } ; + +classDefStatement + : classDef CLASSDEF_ID CLASSDEF_STYLEOPTS { + $$ = { stmt: 'classDef', id: $2.trim(), classes: $3.trim() }; + } + | classDef DEFAULT CLASSDEF_STYLEOPTS { + $$ = { stmt: 'classDef', id: $2.trim(), classes: $3.trim() }; + } + ; + +cssClassStatement + : class CLASSENTITY_IDS STYLECLASS { + //console.log('apply class: id(s): ',$2, ' style class: ', $3); + $$={ stmt: 'applyClass', id: $2.trim(), styleClass: $3.trim() }; + } + ; + directive : openDirective typeDirective closeDirective | openDirective typeDirective ':' argDirective closeDirective @@ -229,8 +282,22 @@ eol ; idStatement - : ID {$$=$1;} - | EDGE_STATE {$$=$1;} + : ID + { /* console.log('idStatement id: ', $1); */ + $$={ stmt: 'state', id: $1.trim(), type: 'default', description: '' }; + } + | EDGE_STATE + { /* console.log('idStatement id: ', $1); */ + $$={ stmt: 'state', id: $1.trim(), type: 'default', description: '' }; + } + | ID STYLE_SEPARATOR ID + { /*console.log('idStatement ID STYLE_SEPARATOR ID'); */ + $$={ stmt: 'state', id: $1.trim(), classes: [$3.trim()], type: 'default', description: '' }; + } + | EDGE_STATE STYLE_SEPARATOR ID + { /*console.log('idStatement EDGE_STATE STYLE_SEPARATOR ID'); */ + $$={ stmt: 'state', id: $1.trim(), classes: [$3.trim()], type: 'default', description: '' }; + } ; notePosition diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js index e2286bb511..0a495e56c6 100644 --- a/packages/mermaid/src/diagrams/state/shapes.js +++ b/packages/mermaid/src/diagrams/state/shapes.js @@ -137,7 +137,7 @@ export const drawDescrState = (g, stateDef) => { /** Adds the creates a box around the existing content and adds a panel for the id on top of the content. */ /** - * Function that creates an title row and a frame around a substate for a composit state diagram. + * Function that creates an title row and a frame around a substate for a composite state diagram. * The function returns a new d3 svg object with updated width and height properties; * * @param {any} g The d3 svg object for the substate to framed @@ -178,7 +178,7 @@ export const addTitleAndBox = (g, stateDef, altBkg) => { // descrLine.attr('x2', graphBox.width + getConfig().state.padding); if (stateDef.doc) { - // cnsole.warn( + // console.warn( // stateDef.id, // 'orgX: ', // orgX, @@ -197,10 +197,8 @@ export const addTitleAndBox = (g, stateDef, altBkg) => { if (titleWidth > orgWidth) { startX = (orgWidth - width) / 2 + pad; } - if (Math.abs(orgX - graphBox.x) < pad) { - if (titleWidth > orgWidth) { - startX = orgX - (titleWidth - orgWidth) / 2; - } + if (Math.abs(orgX - graphBox.x) < pad && titleWidth > orgWidth) { + startX = orgX - (titleWidth - orgWidth) / 2; } const lineY = 1 - getConfig().state.textHeight; @@ -217,7 +215,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => { .attr('rx', '0'); title.attr('x', startX + pad); - if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad); + if (titleWidth <= orgWidth) { + title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad); + } // Title background g.insert('rect', ':first-child') @@ -299,7 +299,7 @@ export const drawText = function (elem, textData) { textElem.attr('y', textData.y); textElem.style('text-anchor', textData.anchor); textElem.attr('fill', textData.fill); - if (typeof textData.class !== 'undefined') { + if (textData.class !== undefined) { textElem.attr('class', textData.class); } @@ -379,14 +379,27 @@ export const drawState = function (elem, stateDef) { const g = elem.append('g').attr('id', id).attr('class', 'stateGroup'); - if (stateDef.type === 'start') drawStartState(g); - if (stateDef.type === 'end') drawEndState(g); - if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g, stateDef); - if (stateDef.type === 'note') drawNote(stateDef.note.text, g); - if (stateDef.type === 'divider') drawDivider(g); - if (stateDef.type === 'default' && stateDef.descriptions.length === 0) + if (stateDef.type === 'start') { + drawStartState(g); + } + if (stateDef.type === 'end') { + drawEndState(g); + } + if (stateDef.type === 'fork' || stateDef.type === 'join') { + drawForkJoinState(g, stateDef); + } + if (stateDef.type === 'note') { + drawNote(stateDef.note.text, g); + } + if (stateDef.type === 'divider') { + drawDivider(g); + } + if (stateDef.type === 'default' && stateDef.descriptions.length === 0) { drawSimpleState(g, stateDef); - if (stateDef.type === 'default' && stateDef.descriptions.length > 0) drawDescrState(g, stateDef); + } + if (stateDef.type === 'default' && stateDef.descriptions.length > 0) { + drawDescrState(g, stateDef); + } const stateBox = g.node().getBBox(); stateInfo.width = stateBox.width + 2 * getConfig().state.padding; @@ -449,7 +462,7 @@ export const drawEdge = function (elem, path, relation) { 'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')' ); - if (typeof relation.title !== 'undefined') { + if (relation.title !== undefined) { const label = elem.append('g').attr('class', 'stateLabel'); const { x, y } = utils.calcLabelPosition(path.points); diff --git a/packages/mermaid/src/diagrams/state/stateCommon.ts b/packages/mermaid/src/diagrams/state/stateCommon.ts new file mode 100644 index 0000000000..2df19eee8d --- /dev/null +++ b/packages/mermaid/src/diagrams/state/stateCommon.ts @@ -0,0 +1,32 @@ +/** + * Constants common to all State Diagram code + */ + +// default diagram direction +export const DEFAULT_DIAGRAM_DIRECTION = 'LR'; + +// default direction for any nested documents (composites) +export const DEFAULT_NESTED_DOC_DIR = 'TB'; + +// parsed statement type for a state +export const STMT_STATE = 'state'; +// parsed statement type for a relation +export const STMT_RELATION = 'relation'; +// parsed statement type for a classDef +export const STMT_CLASSDEF = 'classDef'; +// parsed statement type for applyClass +export const STMT_APPLYCLASS = 'applyClass'; + +export const DEFAULT_STATE_TYPE = 'default'; +export const DIVIDER_TYPE = 'divider'; + +export default { + DEFAULT_DIAGRAM_DIRECTION, + DEFAULT_NESTED_DOC_DIR, + STMT_STATE, + STMT_RELATION, + STMT_CLASSDEF, + STMT_APPLYCLASS, + DEFAULT_STATE_TYPE, + DIVIDER_TYPE, +}; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 96f92af8a8..991aba078f 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -9,10 +9,73 @@ import { getAccDescription, setAccDescription, clear as commonClear, + setDiagramTitle, + getDiagramTitle, } from '../../commonDb'; -const clone = (o) => JSON.parse(JSON.stringify(o)); +import { + DEFAULT_DIAGRAM_DIRECTION, + STMT_STATE, + STMT_RELATION, + STMT_CLASSDEF, + STMT_APPLYCLASS, + DEFAULT_STATE_TYPE, + DIVIDER_TYPE, +} from './stateCommon'; + +const START_NODE = '[*]'; +const START_TYPE = 'start'; +const END_NODE = START_NODE; +const END_TYPE = 'end'; + +const COLOR_KEYWORD = 'color'; +const FILL_KEYWORD = 'fill'; +const BG_FILL = 'bgFill'; +const STYLECLASS_SEP = ','; + +/** + * Returns a new list of classes. + * In the future, this can be replaced with a class common to all diagrams. + * ClassDef information = { id: id, styles: [], textStyles: [] } + * + * @returns {{}} + */ +function newClassesList() { + return {}; +} + +let direction = DEFAULT_DIAGRAM_DIRECTION; let rootDoc = []; +let classes = newClassesList(); // style classes defined by a classDef + +const newDoc = () => { + return { + relations: [], + states: {}, + documents: {}, + }; +}; +let documents = { + root: newDoc(), +}; + +let currentDocument = documents.root; +let startEndCount = 0; +let dividerCnt = 0; + +export const lineType = { + LINE: 0, + DOTTED_LINE: 1, +}; + +export const relationType = { + AGGREGATION: 0, + EXTENSION: 1, + COMPOSITION: 2, + DEPENDENCY: 3, +}; + +const clone = (o) => JSON.parse(JSON.stringify(o)); export const parseDirective = function (statement, context, type) { mermaidAPI.parseDirective(this, statement, context, type); @@ -27,24 +90,22 @@ const setRootDoc = (o) => { const getRootDoc = () => rootDoc; const docTranslator = (parent, node, first) => { - if (node.stmt === 'relation') { + if (node.stmt === STMT_RELATION) { docTranslator(parent, node.state1, true); docTranslator(parent, node.state2, false); } else { - if (node.stmt === 'state') { - if (node.id === '[*]') { - node.id = first ? parent.id + '_start' : parent.id + '_end'; - node.start = first; - } + if (node.stmt === STMT_STATE && node.id === '[*]') { + node.id = first ? parent.id + '_start' : parent.id + '_end'; + node.start = first; } if (node.doc) { const doc = []; // Check for concurrency - let i = 0; let currentDoc = []; + let i; for (i = 0; i < node.doc.length; i++) { - if (node.doc[i].type === 'divider') { + if (node.doc[i].type === DIVIDER_TYPE) { // debugger; const newNode = clone(node.doc[i]); newNode.doc = clone(currentDoc); @@ -58,7 +119,7 @@ const docTranslator = (parent, node, first) => { // If any divider was encountered if (doc.length > 0 && currentDoc.length > 0) { const newNode = { - stmt: 'state', + stmt: STMT_STATE, id: generateId(), type: 'divider', doc: clone(currentDoc), @@ -77,6 +138,17 @@ const getRootDocV2 = () => { // Here }; +/** + * Convert all of the statements (stmts) that were parsed into states and relationships. + * This is done because a state diagram may have nested sections, + * where each section is a 'document' and has its own set of statements. + * Ex: the section within a fork has its own statements, and incoming and outgoing statements + * refer to the fork as a whole (document). + * See the parser grammar: the definition of a document is a document then a 'line', where a line can be a statement. + * This will push the statement into the the list of statements for the current document. + * + * @param _doc + */ const extract = (_doc) => { // const res = { states: [], relations: [] }; let doc; @@ -95,48 +167,66 @@ const extract = (_doc) => { log.info('Extract', doc); doc.forEach((item) => { - if (item.stmt === 'state') { - addState(item.id, item.type, item.doc, item.description, item.note); - } - if (item.stmt === 'relation') { - addRelation(item.state1.id, item.state2.id, item.description); + switch (item.stmt) { + case STMT_STATE: + addState( + item.id, + item.type, + item.doc, + item.description, + item.note, + item.classes, + item.styles, + item.textStyles + ); + break; + case STMT_RELATION: + addRelation(item.state1, item.state2, item.description); + break; + case STMT_CLASSDEF: + addStyleClass(item.id, item.classes); + break; + case STMT_APPLYCLASS: + setCssClass(item.id, item.styleClass); + break; } }); }; -const newDoc = () => { - return { - relations: [], - states: {}, - documents: {}, - }; -}; - -let documents = { - root: newDoc(), -}; - -let currentDocument = documents.root; - -let startCnt = 0; - /** * Function called by parser when a node definition has been found. * - * @param {any} id - * @param {any} type - * @param {any} doc - * @param {any} descr - * @param {any} note + * @param {null | string} id + * @param {null | string} type + * @param {null | string} doc + * @param {null | string | string[]} descr - description for the state. Can be a string or a list or strings + * @param {null | string} note + * @param {null | string | string[]} classes - class styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 class, convert it to an array of that 1 class. + * @param {null | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style. + * @param {null | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style. */ -export const addState = function (id, type, doc, descr, note) { - if (typeof currentDocument.states[id] === 'undefined') { +export const addState = function ( + id, + type = DEFAULT_STATE_TYPE, + doc = null, + descr = null, + note = null, + classes = null, + styles = null, + textStyles = null +) { + // add the state if needed + if (currentDocument.states[id] === undefined) { + log.info('Adding state ', id, descr); currentDocument.states[id] = { id: id, descriptions: [], type, doc, note, + classes: [], + styles: [], + textStyles: [], }; } else { if (!currentDocument.states[id].doc) { @@ -146,9 +236,12 @@ export const addState = function (id, type, doc, descr, note) { currentDocument.states[id].type = type; } } + if (descr) { - log.info('Adding state ', id, descr); - if (typeof descr === 'string') addDescription(id, descr.trim()); + log.info('Setting state description', id, descr); + if (typeof descr === 'string') { + addDescription(id, descr.trim()); + } if (typeof descr === 'object') { descr.forEach((des) => addDescription(id, des.trim())); @@ -162,6 +255,24 @@ export const addState = function (id, type, doc, descr, note) { configApi.getConfig() ); } + + if (classes) { + log.info('Setting state classes', id, classes); + const classesList = typeof classes === 'string' ? [classes] : classes; + classesList.forEach((klass) => setCssClass(id, klass.trim())); + } + + if (styles) { + log.info('Setting state styles', id, styles); + const stylesList = typeof styles === 'string' ? [styles] : styles; + stylesList.forEach((style) => setStyle(id, style.trim())); + } + + if (textStyles) { + log.info('Setting state styles', id, styles); + const textStylesList = typeof textStyles === 'string' ? [textStyles] : textStyles; + textStylesList.forEach((textStyle) => setTextStyle(id, textStyle.trim())); + } }; export const clear = function (saveCommon) { @@ -170,10 +281,9 @@ export const clear = function (saveCommon) { }; currentDocument = documents.root; - currentDocument = documents.root; - - startCnt = 0; - classes = []; + // number of start and end nodes; used to construct ids + startEndCount = 0; + classes = newClassesList(); if (!saveCommon) { commonClear(); } @@ -193,36 +303,134 @@ export const getRelations = function () { return currentDocument.relations; }; -export const addRelation = function (_id1, _id2, title) { - let id1 = _id1; - let id2 = _id2; - let type1 = 'default'; - let type2 = 'default'; - if (_id1 === '[*]') { - startCnt++; - id1 = 'start' + startCnt; - type1 = 'start'; +/** + * If the id is a start node ( [*] ), then return a new id constructed from + * the start node name and the current start node count. + * else return the given id + * + * @param {string} id + * @returns {string} - the id (original or constructed) + */ +function startIdIfNeeded(id = '') { + let fixedId = id; + if (id === START_NODE) { + startEndCount++; + fixedId = `${START_TYPE}${startEndCount}`; } - if (_id2 === '[*]') { - id2 = 'end' + startCnt; - type2 = 'end'; + return fixedId; +} + +/** + * If the id is a start node ( [*] ), then return the start type ('start') + * else return the given type + * + * @param {string} id + * @param {string} type + * @returns {string} - the type that should be used + */ +function startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) { + return id === START_NODE ? START_TYPE : type; +} + +/** + * If the id is an end node ( [*] ), then return a new id constructed from + * the end node name and the current start_end node count. + * else return the given id + * + * @param {string} id + * @returns {string} - the id (original or constructed) + */ +function endIdIfNeeded(id = '') { + let fixedId = id; + if (id === END_NODE) { + startEndCount++; + fixedId = `${END_TYPE}${startEndCount}`; } - addState(id1, type1); - addState(id2, type2); + return fixedId; +} + +/** + * If the id is an end node ( [*] ), then return the end type + * else return the given type + * + * @param {string} id + * @param {string} type + * @returns {string} - the type that should be used + */ +function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) { + return id === END_NODE ? END_TYPE : type; +} + +/** + * + * @param item1 + * @param item2 + * @param relationTitle + */ +export function addRelationObjs(item1, item2, relationTitle) { + let id1 = startIdIfNeeded(item1.id); + let type1 = startTypeIfNeeded(item1.id, item1.type); + let id2 = startIdIfNeeded(item2.id); + let type2 = startTypeIfNeeded(item2.id, item2.type); + + addState( + id1, + type1, + item1.doc, + item1.description, + item1.note, + item1.classes, + item1.styles, + item1.textStyles + ); + addState( + id2, + type2, + item2.doc, + item2.description, + item2.note, + item2.classes, + item2.styles, + item2.textStyles + ); + currentDocument.relations.push({ id1, id2, - title: common.sanitizeText(title, configApi.getConfig()), + relationTitle: common.sanitizeText(relationTitle, configApi.getConfig()), }); +} + +/** + * Add a relation between two items. The items may be full objects or just the string id of a state. + * + * @param {string | object} item1 + * @param {string | object} item2 + * @param {string} title + */ +export const addRelation = function (item1, item2, title) { + if (typeof item1 === 'object') { + addRelationObjs(item1, item2, title); + } else { + const id1 = startIdIfNeeded(item1); + const type1 = startTypeIfNeeded(item1); + const id2 = endIdIfNeeded(item2); + const type2 = endTypeIfNeeded(item2); + + addState(id1, type1); + addState(id2, type2); + currentDocument.relations.push({ + id1, + id2, + title: common.sanitizeText(title, configApi.getConfig()), + }); + } }; -const addDescription = function (id, _descr) { +export const addDescription = function (id, descr) { const theState = currentDocument.states[id]; - let descr = _descr; - if (descr[0] === ':') { - descr = descr.substr(1).trim(); - } - theState.descriptions.push(common.sanitizeText(descr, configApi.getConfig())); + const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr; + theState.descriptions.push(common.sanitizeText(_descr, configApi.getConfig())); }; export const cleanupLabel = function (label) { @@ -233,34 +441,103 @@ export const cleanupLabel = function (label) { } }; -export const lineType = { - LINE: 0, - DOTTED_LINE: 1, -}; - -let dividerCnt = 0; const getDividerId = () => { dividerCnt++; return 'divider-id-' + dividerCnt; }; -let classes = []; +/** + * 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, 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); + }); + } +}; + +/** + * Return all of the style classes + * @returns {{} | any | classes} + */ +export const getClasses = function () { + return classes; +}; + +/** + * 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, cssClassName) { + itemIds.split(',').forEach(function (id) { + let foundState = getState(id); + if (foundState === undefined) { + const trimmedId = id.trim(); + addState(trimmedId); + foundState = getState(trimmedId); + } + foundState.classes.push(cssClassName); + }); +}; + +/** + * 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); + } +}; -const getClasses = () => classes; +/** + * 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); + } +}; -let direction = 'TB'; const getDirection = () => direction; const setDirection = (dir) => { direction = dir; }; -export const relationType = { - AGGREGATION: 0, - EXTENSION: 1, - COMPOSITION: 2, - DEPENDENCY: 3, -}; - const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); export default { @@ -289,4 +566,9 @@ export default { setAccTitle, getAccDescription, setAccDescription, + addStyleClass, + setCssClass, + addDescription, + setDiagramTitle, + getDiagramTitle, }; diff --git a/packages/mermaid/src/diagrams/state/stateDb.spec.js b/packages/mermaid/src/diagrams/state/stateDb.spec.js new file mode 100644 index 0000000000..d51d919c33 --- /dev/null +++ b/packages/mermaid/src/diagrams/state/stateDb.spec.js @@ -0,0 +1,75 @@ +import stateDb from './stateDb'; + +describe('State Diagram stateDb', () => { + beforeEach(() => { + stateDb.clear(); + }); + + describe('addStyleClass', () => { + it('is added to the list of style classes', () => { + const newStyleClassId = 'newStyleClass'; + const newStyleClassAttribs = 'font-weight:bold, border:blue;'; + + stateDb.addStyleClass(newStyleClassId, newStyleClassAttribs); + const styleClasses = stateDb.getClasses(); + expect(styleClasses[newStyleClassId].id).toEqual(newStyleClassId); + expect(styleClasses[newStyleClassId].styles.length).toEqual(2); + expect(styleClasses[newStyleClassId].styles[0]).toEqual('font-weight:bold'); + expect(styleClasses[newStyleClassId].styles[1]).toEqual('border:blue'); + }); + }); + + describe('addDescription to a state', () => { + beforeEach(() => { + stateDb.clear(); + stateDb.addState('state1'); + }); + + const testStateId = 'state1'; + + it('removes only the first leading :', () => { + const restOfTheDescription = 'rest of the description'; + const oneLeadingColon = `:${restOfTheDescription}`; + const twoLeadingColons = `::${restOfTheDescription}`; + + stateDb.addDescription(testStateId, restOfTheDescription); + let states = stateDb.getStates(); + expect(states[testStateId].descriptions[0]).toEqual(restOfTheDescription); + + stateDb.addDescription(testStateId, oneLeadingColon); + states = stateDb.getStates(); + expect(states[testStateId].descriptions[1]).toEqual(restOfTheDescription); + + stateDb.addDescription(testStateId, twoLeadingColons); + states = stateDb.getStates(); + expect(states[testStateId].descriptions[2]).toEqual(`:${restOfTheDescription}`); + }); + + it('adds each description to the array of descriptions', () => { + stateDb.addDescription(testStateId, 'description 0'); + stateDb.addDescription(testStateId, 'description 1'); + stateDb.addDescription(testStateId, 'description 2'); + + let states = stateDb.getStates(); + expect(states[testStateId].descriptions.length).toEqual(3); + expect(states[testStateId].descriptions[0]).toEqual('description 0'); + expect(states[testStateId].descriptions[1]).toEqual('description 1'); + expect(states[testStateId].descriptions[2]).toEqual('description 2'); + }); + + it('sanitizes on the description', () => { + stateDb.addDescription( + testStateId, + 'desc outside the script ' + ); + let states = stateDb.getStates(); + expect(states[testStateId].descriptions[0]).toEqual('desc outside the script '); + }); + + it('adds the description to the state with the given id', () => { + stateDb.addDescription(testStateId, 'the description'); + let states = stateDb.getStates(); + expect(states[testStateId].descriptions[0]).toEqual('the description'); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts index 7fd9633c6b..9e59c4a04d 100644 --- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts +++ b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts @@ -1,8 +1,11 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const stateDetectorV2: DiagramDetector = (text, config) => { - if (text.match(/^\s*stateDiagram-v2/) !== null) return true; - if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') + if (text.match(/^\s*stateDiagram-v2/) !== null) { return true; + } + if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') { + return true; + } return false; }; diff --git a/packages/mermaid/src/diagrams/state/stateDetector.ts b/packages/mermaid/src/diagrams/state/stateDetector.ts index 614f327c2b..85338c6df9 100644 --- a/packages/mermaid/src/diagrams/state/stateDetector.ts +++ b/packages/mermaid/src/diagrams/state/stateDetector.ts @@ -1,8 +1,10 @@ import type { DiagramDetector } from '../../diagram-api/types'; export const stateDetector: DiagramDetector = (txt, config) => { - // If we have confired to only use new state diagrams this function should always return false + // If we have confirmed to only use new state diagrams this function should always return false // as in not signalling true for a legacy state diagram - if (config?.state?.defaultRenderer === 'dagre-wrapper') return false; + if (config?.state?.defaultRenderer === 'dagre-wrapper') { + return false; + } return txt.match(/^\s*stateDiagram/) !== null; }; diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js index ad224f14da..7ed5555dba 100644 --- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js +++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js @@ -1,10 +1,14 @@ import { parser } from './parser/stateDiagram'; import stateDb from './stateDb'; +import stateDiagram from './parser/stateDiagram.jison'; -describe('state diagram, ', function () { +describe('state diagram V2, ', function () { + // TODO - these examples should be put into ./parser/stateDiagram.spec.js describe('when parsing an info graph it', function () { beforeEach(function () { parser.yy = stateDb; + stateDiagram.parser.yy = stateDb; + stateDiagram.parser.yy.clear(); }); it('super simple', function () { @@ -121,6 +125,30 @@ describe('state diagram, ', function () { parser.parse(str); }); + describe('relationship labels', () => { + it('simple states with : labels', () => { + const diagram = ` + stateDiagram-v2 + [*] --> State1 + State1 --> State2 : Transition 1 + State1 --> State3 : Transition 2 + State1 --> State4 : Transition 3 + State1 --> [*] + `; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const rels = stateDb.getRelations(); + const rel_1_2 = rels.find((rel) => rel.id1 === 'State1' && rel.id2 === 'State2'); + expect(rel_1_2.relationTitle).toEqual('Transition 1'); + const rel_1_3 = rels.find((rel) => rel.id1 === 'State1' && rel.id2 === 'State3'); + expect(rel_1_3.relationTitle).toEqual('Transition 2'); + const rel_1_4 = rels.find((rel) => rel.id1 === 'State1' && rel.id2 === 'State4'); + expect(rel_1_4.relationTitle).toEqual('Transition 3'); + }); + }); + it('scale', function () { const str = `stateDiagram-v2\n scale 350 width @@ -355,7 +383,7 @@ describe('state diagram, ', function () { parser.parse(str); }); - it('should handle notes for composit states', function () { + it('should handle notes for composite (nested) states', function () { const str = `stateDiagram-v2\n [*] --> NotShooting @@ -372,5 +400,28 @@ describe('state diagram, ', function () { parser.parse(str); }); + + it('A composite state should be able to link to itself', () => { + const diagram = ` + stateDiagram-v2 + state Active { + Idle + } + Inactive --> Idle: ACT + Active --> Active: LOG + `; + + stateDiagram.parser.parse(diagram); + stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); + + const states = stateDb.getStates(); + expect(states['Active'].doc[0].id).toEqual('Idle'); + + const rels = stateDb.getRelations(); + const rel_Inactive_Idle = rels.find((rel) => rel.id1 === 'Inactive' && rel.id2 === 'Idle'); + expect(rel_Inactive_Idle.relationTitle).toEqual('ACT'); + const rel_Active_Active = rels.find((rel) => rel.id1 === 'Active' && rel.id2 === 'Active'); + expect(rel_Active_Active.relationTitle).toEqual('LOG'); + }); }); }); diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 13c474b5e1..ebe18535d9 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -1,237 +1,377 @@ -import graphlib from 'graphlib'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select } from 'd3'; import { getConfig } from '../../config'; import { render } from '../../dagre-wrapper/index.js'; import { log } from '../../logger'; import { configureSvgSize } from '../../setupGraphViewbox'; import common from '../common/common'; -import addSVGAccessibilityFields from '../../accessibility'; +import utils from '../../utils'; + +import { + DEFAULT_DIAGRAM_DIRECTION, + DEFAULT_NESTED_DOC_DIR, + STMT_STATE, + STMT_RELATION, + DEFAULT_STATE_TYPE, + DIVIDER_TYPE, +} from './stateCommon'; + +// -------------------------------------- +// Shapes +const SHAPE_STATE = 'rect'; +const SHAPE_STATE_WITH_DESC = 'rectWithTitle'; +const SHAPE_START = 'start'; +const SHAPE_END = 'end'; +const SHAPE_DIVIDER = 'divider'; +const SHAPE_GROUP = 'roundedWithTitle'; +const SHAPE_NOTE = 'note'; +const SHAPE_NOTEGROUP = 'noteGroup'; + +// -------------------------------------- +// CSS classes +const CSS_DIAGRAM = 'statediagram'; +const CSS_STATE = 'state'; +const CSS_DIAGRAM_STATE = `${CSS_DIAGRAM}-${CSS_STATE}`; +const CSS_EDGE = 'transition'; +const CSS_NOTE = 'note'; +const CSS_NOTE_EDGE = 'note-edge'; +const CSS_EDGE_NOTE_EDGE = `${CSS_EDGE} ${CSS_NOTE_EDGE}`; +const CSS_DIAGRAM_NOTE = `${CSS_DIAGRAM}-${CSS_NOTE}`; +const CSS_CLUSTER = 'cluster'; +const CSS_DIAGRAM_CLUSTER = `${CSS_DIAGRAM}-${CSS_CLUSTER}`; +const CSS_CLUSTER_ALT = 'cluster-alt'; +const CSS_DIAGRAM_CLUSTER_ALT = `${CSS_DIAGRAM}-${CSS_CLUSTER_ALT}`; + +// -------------------------------------- +// DOM and element IDs +const PARENT = 'parent'; +const NOTE = 'note'; +const DOMID_STATE = 'state'; +const DOMID_TYPE_SPACER = '----'; +const NOTE_ID = `${DOMID_TYPE_SPACER}${NOTE}`; +const PARENT_ID = `${DOMID_TYPE_SPACER}${PARENT}`; +// -------------------------------------- +// Graph edge settings +const G_EDGE_STYLE = 'fill:none'; +const G_EDGE_ARROWHEADSTYLE = 'fill: #333'; +const G_EDGE_LABELPOS = 'c'; +const G_EDGE_LABELTYPE = 'text'; +const G_EDGE_THICKNESS = 'normal'; + +// -------------------------------------- +// List of nodes created from the parsed diagram statement items +let nodeDb = {}; + +let graphItemCount = 0; // used to construct ids, etc. +// Configuration const conf = {}; + +// ----------------------------------------------------------------------- + export const setConf = function (cnf) { const keys = Object.keys(cnf); - for (let i = 0; i < keys.length; i++) { - conf[keys[i]] = cnf[keys[i]]; + for (const key of keys) { + conf[key] = cnf[key]; } }; -let nodeDb = {}; - /** - * Returns the all the styles from classDef statements in the graph definition. + * Returns the all the classdef styles (a.k.a. classes) from classDef statements in the graph definition. * - * @param {any} text - * @param diag - * @returns {object} ClassDef styles + * @param {string} text - the diagram text to be parsed + * @param diagramObj + * @returns {object} ClassDef styles (a Map with keys = strings, values = ) */ -export const getClasses = function (text, diag) { +export const getClasses = function (text, diagramObj) { log.trace('Extracting classes'); - diag.sb.clear(); - - // Parse the graph definition - diag.parser.parse(text); - return diag.sb.getClasses(); + diagramObj.db.clear(); + try { + // Parse the graph definition + diagramObj.parser.parse(text); + // must run extract() to turn the parsed statements into states, relationships, classes, etc. + diagramObj.db.extract(diagramObj.db.getRootDocV2()); + return diagramObj.db.getClasses(); + } catch (e) { + return e; + } }; -const setupNode = (g, parent, node, altFlag) => { - // Add the node - if (node.id !== 'root') { - let shape = 'rect'; - if (node.start === true) { - shape = 'start'; +/** + * Get classes from the db for the info item. + * If there aren't any or if dbInfoItem isn't defined, return an empty string. + * Else create 1 string from the list of classes found + * + * @param {undefined | null | object} dbInfoItem + * @returns {string} + */ +function getClassesFromDbInfo(dbInfoItem) { + if (dbInfoItem === undefined || dbInfoItem === null) { + return ''; + } else { + if (dbInfoItem.classes) { + return dbInfoItem.classes.join(' '); + } else { + return ''; + } + } +} + +/** + * Create a standard string for the dom ID of an item. + * If a type is given, insert that before the counter, preceded by the type spacer + * + * @param itemId + * @param counter + * @param {string | null} type + * @param typeSpacer + * @returns {string} + */ +export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOMID_TYPE_SPACER) { + const typeStr = type !== null && type.length > 0 ? `${typeSpacer}${type}` : ''; + return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`; +} + +/** + * Create a graph node based on the statement information + * + * @param g - graph + * @param {object} parent + * @param {object} parsedItem - parsed statement item + * @param {object[]} diagramStates - the list of all known states for the diagram + * @param {object} diagramDb + * @param {boolean} altFlag - for clusters, add the "statediagram-cluster-alt" CSS class + */ +const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => { + const itemId = parsedItem.id; + const classStr = getClassesFromDbInfo(diagramStates[itemId]); + + if (itemId !== 'root') { + let shape = SHAPE_STATE; + if (parsedItem.start === true) { + shape = SHAPE_START; } - if (node.start === false) { - shape = 'end'; + if (parsedItem.start === false) { + shape = SHAPE_END; } - if (node.type !== 'default') { - shape = node.type; + if (parsedItem.type !== DEFAULT_STATE_TYPE) { + shape = parsedItem.type; } - if (!nodeDb[node.id]) { - nodeDb[node.id] = { - id: node.id, + // Add the node to our list (nodeDb) + if (!nodeDb[itemId]) { + nodeDb[itemId] = { + id: itemId, shape, - description: common.sanitizeText(node.id, getConfig()), - classes: 'statediagram-state', + description: common.sanitizeText(itemId, getConfig()), + classes: `${classStr} ${CSS_DIAGRAM_STATE}`, }; } - // Build of the array of description strings accordinging - if (node.description) { - if (Array.isArray(nodeDb[node.id].description)) { + const newNode = nodeDb[itemId]; + + // Save data for description and group so that for instance a statement without description overwrites + // one with description @todo TODO What does this mean? If important, add a test for it + + // Build of the array of description strings + if (parsedItem.description) { + if (Array.isArray(newNode.description)) { // There already is an array of strings,add to it - nodeDb[node.id].shape = 'rectWithTitle'; - nodeDb[node.id].description.push(node.description); + newNode.shape = SHAPE_STATE_WITH_DESC; + newNode.description.push(parsedItem.description); } else { - if (nodeDb[node.id].description.length > 0) { - // if there is a description already transformit to an array - nodeDb[node.id].shape = 'rectWithTitle'; - if (nodeDb[node.id].description === node.id) { - // If the previous description was the is, remove it - nodeDb[node.id].description = [node.description]; + if (newNode.description.length > 0) { + // if there is a description already transform it to an array + newNode.shape = SHAPE_STATE_WITH_DESC; + if (newNode.description === itemId) { + // If the previous description was this, remove it + newNode.description = [parsedItem.description]; } else { - nodeDb[node.id].description = [nodeDb[node.id].description, node.description]; + newNode.description = [newNode.description, parsedItem.description]; } } else { - nodeDb[node.id].shape = 'rect'; - nodeDb[node.id].description = node.description; + newNode.shape = SHAPE_STATE; + newNode.description = parsedItem.description; } } - nodeDb[node.id].description = common.sanitizeTextOrArray( - nodeDb[node.id].description, - getConfig() - ); + newNode.description = common.sanitizeTextOrArray(newNode.description, getConfig()); } - // - if (nodeDb[node.id].description.length === 1 && nodeDb[node.id].shape === 'rectWithTitle') { - nodeDb[node.id].shape = 'rect'; + // If there's only 1 description entry, just use a regular state shape + if (newNode.description.length === 1 && newNode.shape === SHAPE_STATE_WITH_DESC) { + newNode.shape = SHAPE_STATE; } - // Save data for description and group so that for instance a statement without description overwrites - // one with description - // group - if (!nodeDb[node.id].type && node.doc) { - log.info('Setting cluster for ', node.id, getDir(node)); - nodeDb[node.id].type = 'group'; - nodeDb[node.id].dir = getDir(node); - nodeDb[node.id].shape = node.type === 'divider' ? 'divider' : 'roundedWithTitle'; - nodeDb[node.id].classes = - nodeDb[node.id].classes + + if (!newNode.type && parsedItem.doc) { + log.info('Setting cluster for ', itemId, getDir(parsedItem)); + newNode.type = 'group'; + newNode.dir = getDir(parsedItem); + newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP; + newNode.classes = + newNode.classes + + ' ' + + CSS_DIAGRAM_CLUSTER + ' ' + - (altFlag ? 'statediagram-cluster statediagram-cluster-alt' : 'statediagram-cluster'); + (altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''); } + // This is what will be added to the graph const nodeData = { labelStyle: '', - shape: nodeDb[node.id].shape, - labelText: nodeDb[node.id].description, - // typeof nodeDb[node.id].description === 'object' - // ? nodeDb[node.id].description[0] - // : nodeDb[node.id].description, - classes: nodeDb[node.id].classes, //classStr, + shape: newNode.shape, + labelText: newNode.description, + // typeof newNode.description === 'object' + // ? newNode.description[0] + // : newNode.description, + classes: newNode.classes, style: '', //styles.style, - id: node.id, - dir: nodeDb[node.id].dir, - domId: 'state-' + node.id + '-' + cnt, - type: nodeDb[node.id].type, + id: itemId, + dir: newNode.dir, + domId: stateDomId(itemId, graphItemCount), + type: newNode.type, padding: 15, //getConfig().flowchart.padding }; - if (node.note) { + if (parsedItem.note) { // Todo: set random id const noteData = { labelStyle: '', - shape: 'note', - labelText: node.note.text, - classes: 'statediagram-note', //classStr, - style: '', //styles.style, - id: node.id + '----note-' + cnt, - domId: 'state-' + node.id + '----note-' + cnt, - type: nodeDb[node.id].type, + shape: SHAPE_NOTE, + labelText: parsedItem.note.text, + classes: CSS_DIAGRAM_NOTE, + style: '', // styles.style, + id: itemId + NOTE_ID + '-' + graphItemCount, + domId: stateDomId(itemId, graphItemCount, NOTE), + type: newNode.type, padding: 15, //getConfig().flowchart.padding }; const groupData = { labelStyle: '', - shape: 'noteGroup', - labelText: node.note.text, - classes: nodeDb[node.id].classes, //classStr, - style: '', //styles.style, - id: node.id + '----parent', - domId: 'state-' + node.id + '----parent-' + cnt, + shape: SHAPE_NOTEGROUP, + labelText: parsedItem.note.text, + classes: newNode.classes, + style: '', // styles.style, + id: itemId + PARENT_ID, + domId: stateDomId(itemId, graphItemCount, PARENT), type: 'group', padding: 0, //getConfig().flowchart.padding }; - cnt++; + graphItemCount++; - g.setNode(node.id + '----parent', groupData); + const parentNodeId = itemId + PARENT_ID; + g.setNode(parentNodeId, groupData); g.setNode(noteData.id, noteData); - g.setNode(node.id, nodeData); + g.setNode(itemId, nodeData); - g.setParent(node.id, node.id + '----parent'); - g.setParent(noteData.id, node.id + '----parent'); + g.setParent(itemId, parentNodeId); + g.setParent(noteData.id, parentNodeId); - let from = node.id; + let from = itemId; let to = noteData.id; - if (node.note.position === 'left of') { + if (parsedItem.note.position === 'left of') { from = noteData.id; - to = node.id; + to = itemId; } g.setEdge(from, to, { arrowhead: 'none', arrowType: '', - style: 'fill:none', + style: G_EDGE_STYLE, labelStyle: '', - classes: 'transition note-edge', - arrowheadStyle: 'fill: #333', - labelpos: 'c', - labelType: 'text', - thickness: 'normal', + classes: CSS_EDGE_NOTE_EDGE, + arrowheadStyle: G_EDGE_ARROWHEADSTYLE, + labelpos: G_EDGE_LABELPOS, + labelType: G_EDGE_LABELTYPE, + thickness: G_EDGE_THICKNESS, }); } else { - g.setNode(node.id, nodeData); + g.setNode(itemId, nodeData); } } - if (parent) { - if (parent.id !== 'root') { - log.trace('Setting node ', node.id, ' to be child of its parent ', parent.id); - g.setParent(node.id, parent.id); - } + if (parent && parent.id !== 'root') { + log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id); + g.setParent(itemId, parent.id); } - if (node.doc) { + if (parsedItem.doc) { log.trace('Adding nodes children '); - setupDoc(g, node, node.doc, !altFlag); + setupDoc(g, parsedItem, parsedItem.doc, diagramStates, diagramDb, !altFlag); } }; -let cnt = 0; -const setupDoc = (g, parent, doc, altFlag) => { - // cnt = 0; + +/** + * Turn parsed statements (item.stmt) into nodes, relationships, etc. for a document. + * (A document may be nested within others.) + * + * @param g + * @param parentParsedItem - parsed Item that is the parent of this document (doc) + * @param doc - the document to set up + * @param {object} diagramStates - the list of all known states for the diagram + * @param diagramDb + * @param {boolean} altFlag + * @todo This duplicates some of what is done in stateDb.js extract method + */ +const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) => { + // graphItemCount = 0; log.trace('items', doc); doc.forEach((item) => { - if (item.stmt === 'state' || item.stmt === 'default') { - setupNode(g, parent, item, altFlag); - } else if (item.stmt === 'relation') { - setupNode(g, parent, item.state1, altFlag); - setupNode(g, parent, item.state2, altFlag); - const edgeData = { - id: 'edge' + cnt, - arrowhead: 'normal', - arrowTypeEnd: 'arrow_barb', - style: 'fill:none', - labelStyle: '', - label: common.sanitizeText(item.description, getConfig()), - arrowheadStyle: 'fill: #333', - labelpos: 'c', - labelType: 'text', - thickness: 'normal', - classes: 'transition', - }; - let startId = item.state1.id; - let endId = item.state2.id; - - g.setEdge(startId, endId, edgeData, cnt); - cnt++; + switch (item.stmt) { + case STMT_STATE: + setupNode(g, parentParsedItem, item, diagramStates, diagramDb, altFlag); + break; + case DEFAULT_STATE_TYPE: + setupNode(g, parentParsedItem, item, diagramStates, diagramDb, altFlag); + break; + case STMT_RELATION: + { + setupNode(g, parentParsedItem, item.state1, diagramStates, diagramDb, altFlag); + setupNode(g, parentParsedItem, item.state2, diagramStates, diagramDb, altFlag); + const edgeData = { + id: 'edge' + graphItemCount, + arrowhead: 'normal', + arrowTypeEnd: 'arrow_barb', + style: G_EDGE_STYLE, + labelStyle: '', + label: common.sanitizeText(item.description, getConfig()), + arrowheadStyle: G_EDGE_ARROWHEADSTYLE, + labelpos: G_EDGE_LABELPOS, + labelType: G_EDGE_LABELTYPE, + thickness: G_EDGE_THICKNESS, + classes: CSS_EDGE, + }; + g.setEdge(item.state1.id, item.state2.id, edgeData, graphItemCount); + graphItemCount++; + } + break; } }); }; -const getDir = (nodes, defaultDir) => { - let dir = defaultDir || 'TB'; - if (nodes.doc) { - for (let i = 0; i < nodes.doc.length; i++) { - const node = nodes.doc[i]; - if (node.stmt === 'dir') { - dir = node.value; + +/** + * Get the direction from the statement items. + * 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 + * @returns {string} + */ +const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => { + let dir = defaultDir; + if (parsedItem.doc) { + for (let i = 0; i < parsedItem.doc.length; i++) { + const parsedItemDoc = parsedItem.doc[i]; + if (parsedItemDoc.stmt === 'dir') { + dir = parsedItemDoc.value; } } } return dir; }; + /** - * Draws a flowchart in the tag with id: id based on the graph definition in text. + * Draws a state diagram in the tag with id: id based on the graph definition in text. * * @param {any} text * @param {any} id @@ -244,8 +384,8 @@ export const draw = function (text, id, _version, diag) { nodeDb = {}; // Fetch the default direction, use TD if none was found let dir = diag.db.getDirection(); - if (typeof dir === 'undefined') { - dir = 'LR'; + if (dir === undefined) { + dir = DEFAULT_DIAGRAM_DIRECTION; } const { securityLevel, state: conf } = getConfig(); @@ -253,9 +393,13 @@ export const draw = function (text, id, _version, diag) { const rankSpacing = conf.rankSpacing || 50; log.info(diag.db.getRootDocV2()); + + // This parses the diagram text and sets the classes, relations, styles, classDefs, etc. diag.db.extract(diag.db.getRootDocV2()); log.info(diag.db.getRootDocV2()); + const diagramStates = diag.db.getStates(); + // Create the input mermaid.graph const g = new graphlib.Graph({ multigraph: true, @@ -272,7 +416,7 @@ export const draw = function (text, id, _version, diag) { return {}; }); - setupNode(g, undefined, diag.db.getRootDocV2(), true); + setupNode(g, undefined, diag.db.getRootDocV2(), diagramStates, diag.db, true); // Set up an SVG group so that we can translate the final graph. let sandboxElement; @@ -288,17 +432,18 @@ export const draw = function (text, id, _version, diag) { // Run the renderer. This is what draws the final graph. const element = root.select('#' + id + ' g'); - render(element, g, ['barb'], 'statediagram', id); + render(element, g, ['barb'], CSS_DIAGRAM, id); const padding = 8; - const bounds = svg.node().getBBox(); + utils.insertTitle(svg, 'statediagramTitleText', conf.titleTopMargin, diag.db.getDiagramTitle()); + const bounds = svg.node().getBBox(); const width = bounds.width + padding * 2; const height = bounds.height + padding * 2; // Zoom in a bit - svg.attr('class', 'statediagram'); + svg.attr('class', CSS_DIAGRAM); const svgBounds = svg.node().getBBox(); @@ -312,13 +457,11 @@ export const draw = function (text, id, _version, diag) { // Add label rects for non html labels // if (!evaluate(conf.htmlLabels) || true) { const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); - for (let k = 0; k < labels.length; k++) { - const label = labels[k]; - + for (const label of labels) { // Get dimensions of label const dim = label.getBBox(); - const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); + const rect = document.createElementNS('http://www.w3.org/2000/svg', SHAPE_STATE); rect.setAttribute('rx', 0); rect.setAttribute('ry', 0); rect.setAttribute('width', dim.width); @@ -327,7 +470,6 @@ export const draw = function (text, id, _version, diag) { label.insertBefore(rect, label.firstChild); // } } - addSVGAccessibilityFields(diag.db, svg, id); }; export default { diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js new file mode 100644 index 0000000000..3a118e607d --- /dev/null +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.spec.js @@ -0,0 +1,31 @@ +import { expectTypeOf } from 'vitest'; + +import { parser } from './parser/stateDiagram'; +import stateDb from './stateDb'; +import stateRendererV2 from './stateRenderer-v2'; + +// Can use this instead of having to register diagrams and load/orchestrate them, etc. +class FauxDiagramObj { + db = stateDb; + parser = parser; + renderer = stateRendererV2; + + constructor(options = { db: stateDb, parser: parser, renderer: stateRendererV2 }) { + this.db = options.db; + this.parser = options.parser; + this.renderer = options.renderer; + this.parser.yy = this.db; + } +} + +describe('stateRenderer-v2', () => { + describe('getClasses', () => { + const diagramText = 'statediagram-v2\n'; + const fauxStateDiagram = new FauxDiagramObj(); + + it('returns a {}', () => { + const result = stateRendererV2.getClasses(diagramText, fauxStateDiagram); + expectTypeOf(result).toBeObject(); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 75368c5576..8d410fdd98 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -1,12 +1,11 @@ import { select } from 'd3'; -import dagre from 'dagre'; -import graphlib from 'graphlib'; +import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; +import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger'; import common from '../common/common'; import { drawState, addTitleAndBox, drawEdge } from './shapes'; import { getConfig } from '../../config'; import { configureSvgSize } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; // TODO Move conf object to main conf in mermaidAPI let conf; @@ -47,7 +46,7 @@ const insertMarkers = function (elem) { export const draw = function (text, id, _version, diagObj) { conf = getConfig().state; const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -97,7 +96,6 @@ export const draw = function (text, id, _version, diagObj) { 'viewBox', `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height ); - addSVGAccessibilityFields(diagObj.db, diagram, id); }; const getLabelWidth = (text) => { return text ? text.length * conf.fontSizeFactor : 1; @@ -120,7 +118,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = } // Set an object for the graph label - if (parentId) + if (parentId) { graph.setGraph({ rankdir: 'LR', multigraph: true, @@ -133,7 +131,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = // ranksep: 5, // nodesep: 1 }); - else { + } else { graph.setGraph({ rankdir: 'TB', multigraph: true, @@ -162,8 +160,8 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = let first = true; - for (let i = 0; i < keys.length; i++) { - const stateDef = states[keys[i]]; + for (const key of keys) { + const stateDef = states[key]; if (parentId) { stateDef.parentId = parentId; @@ -239,13 +237,13 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = ); }); - dagre.layout(graph); + dagreLayout(graph); log.debug('Graph after layout', graph.nodes()); const svgElem = diagram.node(); graph.nodes().forEach(function (v) { - if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') { + if (v !== undefined && graph.node(v) !== undefined) { log.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v))); root .select('#' + svgElem.id + ' #' + v) @@ -268,7 +266,9 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = let pWidth = 0; let pShift = 0; if (parent) { - if (parent.parentElement) pWidth = parent.parentElement.getBBox().width; + if (parent.parentElement) { + pWidth = parent.parentElement.getBBox().width; + } pShift = parseInt(parent.getAttribute('data-x-shift'), 10); if (Number.isNaN(pShift)) { pShift = 0; @@ -285,7 +285,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) = let stateBox = svgElem.getBBox(); graph.edges().forEach(function (e) { - if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') { + if (e !== undefined && graph.edge(e) !== undefined) { log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e))); drawEdge(diagram, graph.edge(e), graph.edge(e).relation); } diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js index 4a1c465122..f4783b477b 100644 --- a/packages/mermaid/src/diagrams/state/styles.js +++ b/packages/mermaid/src/diagrams/state/styles.js @@ -194,6 +194,12 @@ g.stateGroup line { stroke: ${options.lineColor}; stroke-width: 1; } + +.statediagramTitleText { + text-anchor: middle; + font-size: 18px; + fill: ${options.textColor}; +} `; export default getStyles; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.js index 0707636f56..ce87050948 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyDb.js +++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.js @@ -105,10 +105,10 @@ const compileTasks = function () { }; let allProcessed = true; - for (let i = 0; i < rawTasks.length; i++) { + for (const [i, rawTask] of rawTasks.entries()) { compileTask(i); - allProcessed = allProcessed && rawTasks[i].processed; + allProcessed = allProcessed && rawTask.processed; } return allProcessed; }; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index e3ebb839cf..df46fc9c6f 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -3,7 +3,6 @@ import { select } from 'd3'; import svgDraw from './svgDraw'; import { getConfig } from '../../config'; import { configureSvgSize } from '../../setupGraphViewbox'; -import addSVGAccessibilityFields from '../../accessibility'; export const setConf = function (cnf) { const keys = Object.keys(cnf); @@ -15,7 +14,7 @@ export const setConf = function (cnf) { const actors = {}; -/** @param {any} diagram */ +/** @param diagram - The diagram to draw to. */ function drawActorLegend(diagram) { const conf = getConfig().journey; // Draw the actors @@ -54,7 +53,7 @@ export const draw = function (text, id, version, diagObj) { diagObj.parser.parse(text + '\n'); const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sanbox mode + // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -74,7 +73,9 @@ export const draw = function (text, id, version, diagObj) { const title = diagObj.db.getDiagramTitle(); const actorNames = diagObj.db.getActors(); - for (const member in actors) delete actors[member]; + for (const member in actors) { + delete actors[member]; + } let actorPos = 0; actorNames.forEach((actorName) => { actors[actorName] = { @@ -119,8 +120,6 @@ export const draw = function (text, id, version, diagObj) { diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`); diagram.attr('preserveAspectRatio', 'xMinYMin meet'); diagram.attr('height', height + extraVertForTitle + 25); - - addSVGAccessibilityFields(diagObj.db, diagram, id); }; export const bounds = { @@ -144,7 +143,7 @@ export const bounds = { this.verticalPos = 0; }, updateVal: function (obj, key, val, fun) { - if (typeof obj[key] === 'undefined') { + if (obj[key] === undefined) { obj[key] = val; } else { obj[key] = fun(val, obj[key]); @@ -155,8 +154,8 @@ export const bounds = { // eslint-disable-next-line @typescript-eslint/no-this-alias const _self = this; let cnt = 0; - /** @param {any} type */ - function updateFn(type) { + /** @param type - Set to `activation` if activation */ + function updateFn(type?: 'activation') { return function updateItemBounds(item) { cnt++; // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems @@ -219,8 +218,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) { let num = 0; // Draw the tasks - for (let i = 0; i < tasks.length; i++) { - const task = tasks[i]; + for (const [i, task] of tasks.entries()) { if (lastSection !== task.section) { fill = fills[sectionNumber % fills.length]; num = sectionNumber % fills.length; @@ -261,7 +259,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) { // Draw the box with the attached line svgDraw.drawTask(diagram, task, conf); - bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopy is the length of the descenders. + bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopY is the length of the descenders. } }; diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js index f655b9c3a9..74d5d2a02c 100644 --- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js +++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js @@ -11,7 +11,7 @@ export const drawRect = function (elem, rectData) { rectElem.attr('rx', rectData.rx); rectElem.attr('ry', rectData.ry); - if (typeof rectData.class !== 'undefined') { + if (rectData.class !== undefined) { rectElem.attr('class', rectData.class); } @@ -116,11 +116,11 @@ export const drawCircle = function (element, circleData) { circleElement.attr('stroke', circleData.stroke); circleElement.attr('r', circleData.r); - if (typeof circleElement.class !== 'undefined') { + if (circleElement.class !== undefined) { circleElement.attr('class', circleElement.class); } - if (typeof circleData.title !== 'undefined') { + if (circleData.title !== undefined) { circleElement.append('title').text(circleData.title); } @@ -138,7 +138,7 @@ export const drawText = function (elem, textData) { textElem.style('text-anchor', textData.anchor); - if (typeof textData.class !== 'undefined') { + if (textData.class !== undefined) { textElem.attr('class', textData.class); } @@ -218,7 +218,7 @@ export const drawSection = function (elem, section, conf) { let taskCount = -1; /** - * Draws an actor in the diagram with the attaced line + * Draws an actor in the diagram with the attached line * * @param {any} elem The HTML element * @param {any} task The task to render diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index e89e933a4c..313d1f2dec 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -30,48 +30,58 @@ * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with * it.) */ -import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs'; +import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs'; import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; import type { Code, Root } from 'mdast'; -import { join, dirname } from 'path'; +import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; +import chokidar from 'chokidar'; +import mm from 'micromatch'; // @ts-ignore No typescript declaration file import flatmap from 'unist-util-flatmap'; const MERMAID_MAJOR_VERSION = ( - JSON.parse(readFileSync('packages/mermaid/package.json', 'utf8')).version as string + JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string ).split('.')[0]; -const CDN_URL = 'https://unpkg.com'; // https://cdn.jsdelivr.net/npm +const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com'; + +const verifyOnly: boolean = process.argv.includes('--verify'); +const git: boolean = process.argv.includes('--git'); +const watch: boolean = process.argv.includes('--watch'); +const vitepress: boolean = process.argv.includes('--vitepress'); +const noHeader: boolean = process.argv.includes('--noHeader') || vitepress; // These paths are from the root of the mono-repo, not from the // mermaid sub-directory -const SOURCE_DOCS_DIR = 'packages/mermaid/src/docs'; -const FINAL_DOCS_DIR = 'docs'; - -const AUTOGENERATED_TEXT = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in ${SOURCE_DOCS_DIR}.`; +const SOURCE_DOCS_DIR = 'src/docs'; +const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs'; const LOGMSG_TRANSFORMED = 'transformed'; const LOGMSG_TO_BE_TRANSFORMED = 'to be transformed'; const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`; -const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run yarn docs:build after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`; +const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`; -const verifyOnly: boolean = process.argv.includes('--verify'); -const git: boolean = process.argv.includes('--git'); +const prettierConfig = prettier.resolveConfig.sync('.') ?? {}; +// From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21 +const includesRE = //g; +const includedFiles: Set = new Set(); -// TODO: Read from .prettierrc? -const prettierConfig: prettier.Config = { - useTabs: false, - tabWidth: 2, - endOfLine: 'auto', - printWidth: 100, - singleQuote: true, -}; +const filesTransformed: Set = new Set(); -let filesWereTransformed = false; +const generateHeader = (file: string): string => { + // path from file in docs/* to repo root, e.g ../ or ../../ */ + const relativePath = relative(file, SOURCE_DOCS_DIR); + const filePathFromRoot = posix.join('/packages/mermaid', file); + const sourcePathRelativeToGenerated = posix.join(relativePath, filePathFromRoot); + return ` +> **Warning** +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> ## Please edit the corresponding file in [${filePathFromRoot}](${sourcePathRelativeToGenerated}).`; +}; /** * Given a source file name and path, return the documentation destination full path and file name @@ -110,10 +120,10 @@ const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => { * transformed contents to the final documentation directory if the doCopy flag is true. Log * messages to the console. * - * @param {string} filename Name of the file that will be verified - * @param {boolean} [doCopy=false] Whether we should copy that transformedContents to the final + * @param filename Name of the file that will be verified + * @param doCopy?=false Whether we should copy that transformedContents to the final * documentation directory. Default is `false` - * @param {string} [transformedContent] New contents for the file + * @param transformedContent? New contents for the file */ const copyTransformedContents = (filename: string, doCopy = false, transformedContent?: string) => { const fileInFinalDocDir = changeToFinalDocDir(filename); @@ -125,7 +135,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo return; // Files are same, skip. } - filesWereTransformed = true; + filesTransformed.add(fileInFinalDocDir); if (doCopy) { writeFileSync(fileInFinalDocDir, newBuffer); } @@ -136,9 +146,27 @@ const readSyncedUTF8file = (filename: string): string => { return readFileSync(filename, 'utf8'); }; +const transformToBlockQuote = (content: string, type: string) => { + const title = type === 'warning' ? 'Warning' : 'Note'; + return `> **${title}** \n> ${content.replace(/\n/g, '\n> ')}`; +}; + const injectPlaceholders = (text: string): string => text.replace(//g, MERMAID_MAJOR_VERSION).replace(//g, CDN_URL); +const transformIncludeStatements = (file: string, text: string): string => { + // resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76 + return text.replace(includesRE, (m, m1) => { + try { + const includePath = join(dirname(file), m1); + const content = readSyncedUTF8file(includePath); + includedFiles.add(changeToFinalDocDir(includePath)); + return content; + } catch (error) { + throw new Error(`Failed to resolve include "${m1}" in "${file}": ${error}`); + } + }); +}; /** * Transform a markdown file and write the transformed file to the directory for published * documentation @@ -152,24 +180,38 @@ const injectPlaceholders = (text: string): string => * @param file {string} name of the file that will be verified */ const transformMarkdown = (file: string) => { - const doc = injectPlaceholders(readSyncedUTF8file(file)); - + const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file))); const ast: Root = remark.parse(doc); const out = flatmap(ast, (c: Code) => { - if (c.type !== 'code') { + if (c.type !== 'code' || !c.lang) { return [c]; } - if (c.lang === 'mermaid' || c.lang === 'mmd') { + + // Convert mermaid code blocks to mermaid-example blocks + if (['mermaid', 'mmd', 'mermaid-example'].includes(c.lang)) { c.lang = 'mermaid-example'; + return [c, Object.assign({}, c, { lang: 'mermaid' })]; } - if (c.lang !== 'mermaid-example') { - return [c]; + + // Transform codeblocks into block quotes. + if (['note', 'tip', 'warning'].includes(c.lang)) { + return [remark.parse(transformToBlockQuote(c.value, c.lang))]; } - return [c, Object.assign({}, c, { lang: 'mermaid' })]; + + return [c]; }); - // Add the AUTOGENERATED_TEXT to the start of the file - const transformed = `${AUTOGENERATED_TEXT}\n${remark.stringify(out)}`; + let transformed = remark.stringify(out); + if (!noHeader) { + // Add the header to the start of the file + transformed = `${generateHeader(file)}\n${transformed}`; + } + + if (vitepress && file === 'src/docs/index.md') { + // Skip transforming index if vitepress is enabled + transformed = doc; + } + const formatted = prettier.format(transformed, { parser: 'markdown', ...prettierConfig, @@ -195,9 +237,14 @@ const transformHtml = (filename: string) => { */ const insertAutoGeneratedComment = (fileName: string): string => { const fileContents = injectPlaceholders(readSyncedUTF8file(fileName)); + + if (noHeader) { + return fileContents; + } + const jsdom = new JSDOM(fileContents); const htmlDoc = jsdom.window.document; - const autoGeneratedComment = jsdom.window.document.createComment(AUTOGENERATED_TEXT); + const autoGeneratedComment = jsdom.window.document.createComment(generateHeader(fileName)); const rootElement = htmlDoc.documentElement; rootElement.prepend(autoGeneratedComment); @@ -212,42 +259,86 @@ const transformHtml = (filename: string) => { copyTransformedContents(filename, !verifyOnly, formattedHTML); }; +const getGlobs = (globs: string[]): string[] => { + globs.push('!**/dist', '!**/redirect.spec.ts'); + if (!vitepress) { + globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md'); + } + return globs; +}; + +const getFilesFromGlobs = async (globs: string[]): Promise => { + return await globby(globs, { dot: true }); +}; + /** Main method (entry point) */ (async () => { if (verifyOnly) { console.log('Verifying that all files are in sync with the source files'); } - const sourceDirGlob = join('.', SOURCE_DOCS_DIR, '**'); - const includeFilesStartingWithDot = true; - console.log('Transforming markdown files...'); - const mdFiles = await globby([join(sourceDirGlob, '*.md')], { - dot: includeFilesStartingWithDot, - }); + const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); + const action = verifyOnly ? 'Verifying' : 'Transforming'; + + const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); + const mdFiles = await getFilesFromGlobs(mdFileGlobs); + console.log(`${action} ${mdFiles.length} markdown files...`); mdFiles.forEach(transformMarkdown); - console.log('Transforming html files...'); - const htmlFiles = await globby([join(sourceDirGlob, '*.html')], { - dot: includeFilesStartingWithDot, - }); + for (const includedFile of includedFiles) { + rmSync(includedFile, { force: true }); + filesTransformed.delete(includedFile); + console.log(`Removed ${includedFile} as it was used inside an @include block.`); + } + + const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]); + const htmlFiles = await getFilesFromGlobs(htmlFileGlobs); + console.log(`${action} ${htmlFiles.length} html files...`); htmlFiles.forEach(transformHtml); - console.log('Transforming all other files...'); - const otherFiles = await globby([sourceDirGlob, '!**/*.md', '!**/*.html'], { - dot: includeFilesStartingWithDot, - }); + const otherFileGlobs = getGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']); + const otherFiles = await getFilesFromGlobs(otherFileGlobs); + console.log(`${action} ${otherFiles.length} other files...`); otherFiles.forEach((file: string) => { copyTransformedContents(file, !verifyOnly); // no transformation }); - if (filesWereTransformed) { + if (filesTransformed.size > 0) { if (verifyOnly) { console.log(WARN_DOCSDIR_DOESNT_MATCH); process.exit(1); } if (git) { - console.log('Adding changes in ${FINAL_DOCS_DIR} folder to git'); - exec('git add docs'); + console.log(`Adding changes in ${FINAL_DOCS_DIR} folder to git`); + exec(`git add ${FINAL_DOCS_DIR}`); } } + + if (watch) { + console.log(`Watching for changes in ${SOURCE_DOCS_DIR}`); + + const matcher = (globs: string[]) => (file: string) => mm.every(file, globs); + const isMd = matcher(mdFileGlobs); + const isHtml = matcher(htmlFileGlobs); + const isOther = matcher(otherFileGlobs); + + chokidar + .watch(SOURCE_DOCS_DIR) + // Delete files from the final docs dir if they are deleted from the source dir + .on('unlink', (file: string) => rmSync(changeToFinalDocDir(file))) + .on('unlinkDir', (file: string) => rmdirSync(changeToFinalDocDir(file))) + .on('all', (event, path) => { + // Ignore other events. + if (!['add', 'change'].includes(event)) { + return; + } + if (isMd(path)) { + transformMarkdown(path); + } else if (isHtml(path)) { + transformHtml(path); + } else if (isOther(path)) { + copyTransformedContents(path, true); + } + }); + } })(); diff --git a/vdocs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts similarity index 79% rename from vdocs/.vitepress/config.ts rename to packages/mermaid/src/docs/.vitepress/config.ts index d3cdccc9a4..216541d52e 100644 --- a/vdocs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -1,34 +1,32 @@ -import { version } from '../../package.json'; -import ExampleMarkdown from './mermaid-markdown-all'; -import { defineConfig } from 'vitepress'; -import { update } from 'lodash'; +import { version } from '../../../package.json'; +import MermaidExample from './mermaid-markdown-all'; +import { defineConfig, MarkdownOptions } from 'vitepress'; + +const allMarkdownTransformers: MarkdownOptions = { + // the shiki theme to highlight code blocks + theme: 'github-dark', + config: async (md) => { + await MermaidExample(md); + }, +}; export default defineConfig({ lang: 'en-US', title: 'Mermaid', description: 'Create diagrams and visualizations using text and code.', - base: '/mermaid-docs/', - lastUpdated: true, - markdown: ExampleMarkdown, + base: '/mermaid/', + markdown: allMarkdownTransformers, + head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/mermaid/favicon.ico' }]], themeConfig: { nav: nav(), - - sidebar: { - '/': sidebarAll(), - // "/intro/": sidebarIntro(), - // "/syntax/": sidebarSyntax(), - // "/config": sidebarConfig(), - // "/misc/": sidebarMisc(), - // "/community/": sidebarCommunity(), - }, - - // TODO: update to mermaid editLink: { - pattern: 'https://github.com/emersonbottero/mermaid/edit/develop/vdocs/:path', + pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path', text: 'Edit this page on GitHub', }, - socialLinks: [{ icon: 'github', link: 'https://github.com/emersonbottero/mermaid' }], + sidebar: { + '/': sidebarAll(), + }, }, }); @@ -37,7 +35,7 @@ function nav() { { text: 'Intro', link: '/intro/', activeMatch: '/intro/' }, { text: 'Configuration', - link: '/config/Tutorials', + link: '/config/configuration', activeMatch: '/config/', }, { text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' }, @@ -56,13 +54,13 @@ function nav() { }, { text: 'Contributing', - link: 'https://github.com/knsv/mermaid/issues/866', + link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md', }, ], }, { text: '💻 Live Editor', - link: '/edit', + link: 'https://mermaid.live', }, ]; } @@ -106,8 +104,9 @@ function sidebarSyntax() { { text: 'Gantt', link: '/syntax/gantt' }, { text: 'Pie Chart', link: '/syntax/pie' }, { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' }, - { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitGraph' }, + { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' }, { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' }, + { text: 'Mindmaps 🔥', link: '/syntax/mindmap' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, @@ -120,9 +119,10 @@ function sidebarConfig() { text: '⚙️ Deployment and Configuration', collapsible: true, items: [ + { text: 'Configuration', link: '/config/configuration' }, { text: 'Tutorials', link: '/config/Tutorials' }, { text: 'API-Usage', link: '/config/usage' }, - { text: 'Mermaid API Configuration', link: '/config/Setup' }, + { text: 'Mermaid API Configuration', link: '/config/setup/README' }, { text: 'Directives', link: '/config/directives' }, { text: 'Theming', link: '/config/theming' }, { text: 'Accessibility', link: '/config/accessibility' }, @@ -157,7 +157,6 @@ function sidebarCommunity() { text: 'Development and Contribution', link: '/community/development', }, - { text: 'Changelog', link: '/community/CHANGELOG' }, { text: 'Adding Diagrams', link: '/community/newDiagram' }, { text: 'Security', link: '/community/security' }, ], diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts new file mode 100644 index 0000000000..14340462c5 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts @@ -0,0 +1,71 @@ +import type { MarkdownRenderer } from 'vitepress'; + +const MermaidExample = async (md: MarkdownRenderer) => { + const defaultRenderer = md.renderer.rules.fence; + + if (!defaultRenderer) { + throw new Error('defaultRenderer is undefined'); + } + + md.renderer.rules.fence = (tokens, index, options, env, slf) => { + const token = tokens[index]; + + if (token.info.trim() === 'mermaid-example') { + if (!md.options.highlight) { + // this function is always created by vitepress, but we need to check it + // anyway to make TypeScript happy + throw new Error( + 'Missing MarkdownIt highlight function (should be automatically created by vitepress' + ); + } + + // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported + const langAttrs = ''; + return ` +
Code:
+
+ + mermaid + ${ + // html is pre-escaped by the highlight function + // (it also adds `v-pre` to ignore Vue template syntax) + md.options.highlight(token.content, 'mermaid', langAttrs) + } +
`; + } else if (token.info.trim() === 'mermaid') { + const key = index; + return ` + + + + + +`; + } + if (token.info.trim() === 'warning') { + return `

WARNING

${token.content}}

`; + } + + if (token.info.trim() === 'note') { + return `

NOTE

${token.content}}

`; + } + + if (token.info.trim() === 'jison') { + return `
+ + jison + 
+      ${token.content.replace(//g, '>')}
+
+
`; + } + + return defaultRenderer(tokens, index, options, env, slf); + }; +}; + +export default MermaidExample; diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue new file mode 100644 index 0000000000..85c13393c2 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -0,0 +1,72 @@ + + + diff --git a/packages/mermaid/src/docs/.vitepress/theme/custom.css b/packages/mermaid/src/docs/.vitepress/theme/custom.css new file mode 100644 index 0000000000..e1ef049cdf --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/custom.css @@ -0,0 +1,27 @@ +:root { + --vp-c-brand: #ff3670; + --vp-c-brand-light: #ff5e8c; + --vp-c-brand-lighter: #ff85a8; + --vp-c-brand-lightest: #ff9bb7; + --vp-c-brand-dark: #bd34fe; + --vp-c-brand-darker: #9339bd; + --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); +} + +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670); + + --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%); + --vp-home-hero-image-filter: blur(72px); +} + +.vp-doc > div { + width: 100%; +} + +a.edit { + margin: 12px; + position: relative; + top: 10px; +} diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts new file mode 100644 index 0000000000..efb065feaa --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -0,0 +1,26 @@ +import DefaultTheme from 'vitepress/theme'; +import './custom.css'; +// @ts-ignore +import Mermaid from './Mermaid.vue'; +import { getRedirect } from './redirect'; + +export default { + ...DefaultTheme, + enhanceApp({ app, router }) { + // register global components + app.component('Mermaid', Mermaid); + router.onBeforeRouteChange = (to) => { + if (router.route.path !== '/') { + return; + } + try { + const newPath = getRedirect(to); + if (newPath) { + console.log(`Redirecting to ${newPath} from ${window.location}`); + // router.go isn't loading the ID properly. + window.location.href = `/mermaid/${newPath}`; + } + } catch (e) {} + }; + }, +} as typeof DefaultTheme; diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts new file mode 100644 index 0000000000..b287346f94 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -0,0 +1,14 @@ +import mermaid, { type MermaidConfig } from 'mermaid'; +import mindmap from '@mermaid-js/mermaid-mindmap'; + +try { + await mermaid.registerExternalDiagrams([mindmap]); +} catch (e) { + console.error(e); +} + +export const render = async (id: string, code: string, config: MermaidConfig): Promise => { + mermaid.initialize(config); + const svg = await mermaid.renderAsync(id, code); + return svg; +}; diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts new file mode 100644 index 0000000000..c263641082 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts @@ -0,0 +1,37 @@ +// This file should be moved into .vitepress folder once https://github.com/vitest-dev/vitest/issues/2344 is resolved. +// Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed + +import { expect, test } from 'vitest'; +import { getRedirect } from './redirect'; + +test.each([ + ['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'], + ['http://localhost/mermaid/#/flowchart.md', 'syntax/flowchart.html'], + ['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'syntax/flowchart.html'], + ['https://mermaid-js.github.io/mermaid/#/./flowchart', 'syntax/flowchart.html'], + ['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'], + ['https://mermaid-js.github.io/mermaid/#flowchart', 'syntax/flowchart.html'], + ['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'], + ['https://mermaid-js.github.io/mermaid/#/flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'], + ['https://mermaid-js.github.io/mermaid/#/./flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'], + [ + 'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more', + 'syntax/flowchart.html#my-id', + ], + ['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'], + ['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'], + [ + 'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle', + 'syntax/flowchart.html#a-node-in-the-form-of-a-circle', + ], +])('should process url %s to %s', (link: string, path: string) => { + expect(getRedirect(link)).toBe(path); +}); + +test('should throw for invalid URL', () => { + // Not mermaid domain + expect(() => getRedirect('https://www.google.com')).toThrowError(); + + // Not `/mermaid/` path + expect(() => getRedirect('http://localhost/#/flowchart.md')).toThrowError(); +}); diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts new file mode 100644 index 0000000000..ca4606be0d --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts @@ -0,0 +1,89 @@ +export interface Redirect { + path: string; + id?: string; +} + +/** + * Extracts the base slug from the old URL. + * @param link - The old URL. + */ +const getBaseFile = (link: string): Redirect => { + const url = new URL(link); + if ( + (url.hostname !== 'mermaid-js.github.io' && url.hostname !== 'localhost') || + url.pathname !== '/mermaid/' + ) { + throw new Error('Not mermaidjs url'); + } + const [path, params, ...rest] = url.hash + .toLowerCase() + .replace('.md', '') + .replace(/^#\/?/g, '') + .replace(/^\.\//g, '') + .split('?'); + + // Find id in params + const id = params + ?.split('&') + .find((param) => param.startsWith('id=')) + ?.split('=')[1]; + + return { path, id }; +}; + +const redirectMap: Record = { + '8.6.0_docs': '', + accessibility: 'config/theming', + breakingchanges: '', + c4c: 'syntax/c4c', + classdiagram: 'syntax/classDiagram', + configuration: 'config/configuration', + demos: 'misc/integrations', + development: 'community/development', + directives: 'config/directives', + entityrelationshipdiagram: 'syntax/entityRelationshipDiagram', + examples: 'syntax/examples', + faq: 'misc/faq', + flowchart: 'syntax/flowchart', + gantt: 'syntax/gantt', + gitgraph: 'syntax/gitgraph', + integrations: 'misc/integrations', + 'language-highlight': '', + markdown: '', + mermaidapi: 'config/usage', + mermaidcli: 'config/mermaidCLI', + mindmap: 'syntax/mindmap', + 'more-pages': '', + 'n00b-advanced': 'config/n00b-advanced', + 'n00b-gettingstarted': 'intro/n00b-gettingStarted', + 'n00b-overview': 'community/n00b-overview', + 'n00b-syntaxreference': '', + newdiagram: 'community/newDiagram', + pie: 'syntax/pie', + plugins: '', + quickstart: 'intro/n00b-gettingStarted', + requirementdiagram: 'syntax/requirementDiagram', + security: 'community/security', + sequencediagram: 'syntax/sequenceDiagram', + setup: 'config/setup/README', + statediagram: 'syntax/stateDiagram', + themes: 'config/theming', + theming: 'config/theming', + tutorials: 'config/Tutorials', + upgrading: '', + usage: 'config/usage', + 'user-journey': 'syntax/userJourney', +}; + +/** + * + * @param link - The old documentation URL. + * @returns The new documentation path. + */ +export const getRedirect = (link: string): string | undefined => { + const { path, id } = getBaseFile(link); + if (!(path in redirectMap)) { + return; + } + return `${redirectMap[path]}.html${id ? `#${id}` : ''}`; +}; diff --git a/packages/mermaid/src/docs/8.6.0_docs.md b/packages/mermaid/src/docs/8.6.0_docs.md deleted file mode 100644 index 6ba835c2ed..0000000000 --- a/packages/mermaid/src/docs/8.6.0_docs.md +++ /dev/null @@ -1,213 +0,0 @@ -# Version 8.6.0 Changes - -## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) - -## [CDN](https://unpkg.com/mermaid/) - -With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. - -`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md). -This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams. - -**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.** - -the `init` directive is the main method of configuration for Site and Current Levels. - -The three levels of are Configuration, Global, Site and Current. - -| Level of Configuration | Description | -| ---------------------- | ----------------------------------- | -| Global Configuration | Default Mermaid Configurations | -| Site Configuration | Configurations made by site owner | -| Current Configuration | Configurations made by Implementors | - -# Limits to Modifying Configurations - -**secure Array** - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------------------------------------ | ----- | -------- | -------------- | -| secure | Array of parameters excluded from init directive | Array | Required | Any parameters | - -The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners. - -**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array holding the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it. - -# Secure Arrays - -Site owners can add to the **secure** array using this command: -mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } ); - -Default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable. - -Implementors can only modify configurations using directives, and cannot change the `secure` array. - -# Modifying Configurations and directives: - -The Two types of directives: are `init` (or `initialize`) and `wrap`. - -```note -All directives are enclosed in `%%{ }%%` -``` - -Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible. - -# Init - -`init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array. - -| Parameter | Description | Type | Required | Values | -| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- | -| init | modifies configurations | Directive | Optional | Any parameters not included in the secure array | - -```note -init would be an argument-directive: `%%{init: { **insert argument here**}}%%` - -The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. - **for example**: - -`%%{init: {"theme": "default", "logLevel": 1 }}%%` - -Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict. - -When deployed within code, init is called before the graph/diagram description. -``` - -**for example**: - -```mmd -%%{init: {"theme": "default", "logLevel": 1 }}%% - graph LR - a-->b - b-->c - c-->d - d-->e - e-->f - f-->g - g--> -``` - -# Wrap - -| Parameter | Description | Type | Required | Values | -| --------- | ----------------------------- | --------- | -------- | ---------- | -| wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% | - -```note -Wrap is a function that is currently only deployable for sequence diagrams. - -Wrap respects a manually added , so if the user wants to break up their text, they have full control over line breaks by adding tags. - -It is a non-argument directive and can be executed thusly: - -`%%{wrap}%%` . -``` - -**An example of text wrapping in a sequence diagram**: - -![Image showing wrapped text](img/wrapped%20text.png) - -# Resetting Configurations: - -There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**. - -**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes set from the last mermaidAPI.initialize({...}) configuration. - -**globalReset** will reset both the current configuration AND the site configuration back to the global defaults. - -**Notes**: Both `reset` and `globalReset` are only available to site owners, and as such implementors have to edit their configs using `init`. - -# Additional Utils to mermaid - -• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%. - -• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth. - -Example of **assignWithDepth**: - -![Image showing assignWithDepth](img/assignWithDepth.png) - -Example of **object.Assign**: - -![Image showing object.assign without depth](img/object.assign%20without%20depth.png) - -• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height. - -**Notes**: For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package. - -# New API Requests Introduced in Version 8.6.0 - -## setSiteConfig - -| Function | Description | Type | Values | Parameters | Returns | -| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- | -| `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig | - -```note -Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset -the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig -to the defaultConfig -Note: currentConfig is set in this function。 -Default value: will mirror Global Config -``` - -## getSiteConfig - -| Function | Description | Type | Values | -| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- | -| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` | - -```note -Returns any values in siteConfig. -``` - -## setConfig - -| Function | Description | Type | Values | Parameters | Returns | -| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- | -| `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf | - -```note -Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any -values found in conf with key found in siteConfig.secure will be replaced with the corresponding -siteConfig value. -``` - -## getConfig - -| Function | Description | Type | Return Values | -| ----------- | --------------------------- | ----------- | ------------------------------- | -| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` | - -```note -Returns any values in currentConfig. -``` - -## sanitize - -| Function | Description | Type | Values | -| ---------- | ---------------------------------------- | -------------- | ------ | -| `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None | - -```note -modifies options in-place -Ensures options parameter does not attempt to override siteConfig secure keys. -``` - -## reset - -| Function | Description | Type | Required | Values | Parameter | -| -------- | ------------------------------ | ----------- | -------- | ------ | --------- | -| `reset` | Resets `currentConfig` to conf | Put Request | Required | None | conf | - -## conf - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- | -| `conf` | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array | - -```note -default: current siteConfig (optional, default `getSiteConfig()`) -``` - -## For more information, read [Setup](Setup.md). diff --git a/packages/mermaid/src/docs/CHANGELOG.md b/packages/mermaid/src/docs/CHANGELOG.md index b80e52b30c..cc725bf005 100644 --- a/packages/mermaid/src/docs/CHANGELOG.md +++ b/packages/mermaid/src/docs/CHANGELOG.md @@ -11,10 +11,10 @@ All changes are in descending order, beginning with the newest (latest) version. 🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) | 📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0) -This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md). +This version brings with it a system for [dynamic and integrated configuration of the diagram themes](config/theming.md). The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls. -Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md). +Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](config/8.6.0_docs.md). **These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.** diff --git a/packages/mermaid/src/docs/Configuration.md b/packages/mermaid/src/docs/Configuration.md deleted file mode 100644 index 6eaab8e47c..0000000000 --- a/packages/mermaid/src/docs/Configuration.md +++ /dev/null @@ -1,20 +0,0 @@ -# Configuration - -Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. - -This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. -The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. - -## Configuration Section in the [Live Editor](https://mermaid.live/). - -## The `initialize()` call, for when Mermaid is called via an API, or through a - -A summary of all options and their defaults is found [here][3]. -A description of each option follows below. - -## theme - -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".
 "theme": "forest",
-"themeCSS": ".node rect { fill: red; }"
- -## fontFamily - -| 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;'. - -## logLevel - -| 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) - -## securityLevel - -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ | -| securityLevel | Level of trust for parsed diagram | string | Required | `sandbox`, `strict`, `loose`, `antiscript` | - -**Notes**: - -- **`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 from 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. - -## startOnLoad - -| Parameter | Description | Type | Required | Values | -| ----------- | -------------------------------------------- | ------- | -------- | ----------- | -| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false | - -**Notes:** Default value: true - -## arrowMarkerAbsolute - -| 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 - -## secure - -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'] - -## deterministicIds - -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 - -## deterministicIDSeed - -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. - -## flowchart - -The object containing configurations specific for flowcharts - -### diagramPadding - -| 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 - -### htmlLabels - -| 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. - -### nodeSpacing - -| 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 - -### rankSpacing - -| 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 - -### curve - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- | -| curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' | - -**Notes:** - -Default Value: 'basis' - -### useMaxWidth - -| 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 - -### defaultRenderer - -| 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-wrapper` - -## sequence - -The object containing configurations specific for sequence diagrams - -### activationWidth - -| Parameter | Description | Type | Required | Values | -| --------------- | ---------------------------- | ------- | -------- | ------------------ | -| activationWidth | Width of the activation rect | Integer | Required | Any Positive Value | - -**Notes:** Default value :10 - -### diagramMarginX - -| 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 - -### diagramMarginY - -| Parameter | Description | Type | Required | Values | -| -------------- | ------------------------------------------------- | ------- | -------- | ------------------ | -| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### actorMargin - -| Parameter | Description | Type | Required | Values | -| ----------- | --------------------- | ------- | -------- | ------------------ | -| actorMargin | Margin between actors | Integer | Required | Any Positive Value | - -**Notes:** Default value: 50 - -### width - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------- | ------- | -------- | ------------------ | -| width | Width of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 150 - -### height - -| Parameter | Description | Type | Required | Values | -| --------- | --------------------- | ------- | -------- | ------------------ | -| height | Height of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 65 - -### boxMargin - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------------ | ------- | -------- | ------------------ | -| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### boxTextMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | -| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 5 - -### noteMargin - -| Parameter | Description | Type | Required | Values | -| ---------- | ------------------- | ------- | -------- | ------------------ | -| noteMargin | margin around notes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### messageMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | ---------------------- | ------- | -------- | ------------------ | -| messageMargin | Space between messages | Integer | Required | Any Positive Value | - -**Notes:** Default value: 35 - -### messageAlign - -| Parameter | Description | Type | Required | Values | -| ------------ | --------------------------- | ------ | -------- | ------------------------- | -| messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' | - -**Notes:** Default value: 'center' - -### mirrorActors - -| Parameter | Description | Type | Required | Values | -| ------------ | --------------------------- | ------- | -------- | ----------- | -| mirrorActors | Mirror actors under diagram | boolean | Required | true, false | - -**Notes:** Default value: true - -### forceMenus - -| 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. - -### bottomMarginAdj - -| 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 - -### useMaxWidth - -| 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 - -### rightAngles - -| 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 - -### showSequenceNumbers - -| Parameter | Description | Type | Required | Values | -| ------------------- | ------------------------------- | ------- | -------- | ----------- | -| showSequenceNumbers | This will show the node numbers | boolean | Required | true, false | - -**Notes:** Default value: false - -### actorFontSize - -| 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**.. - -### actorFontFamily - -| 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' - -### actorFontWeight - -This sets the font weight of the actor's description - -**Notes:** Default value: 400. - -### noteFontSize - -| Parameter | Description | Type | Required | Values | -| ------------ | ----------------------------------------------- | ------- | -------- | ------------------ | -| noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 14 - -### noteFontFamily - -| 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' - -### noteFontWeight - -This sets the font weight of the note's description - -**Notes:** Default value: 400 - -### noteAlign - -| Parameter | Description | Type | Required | Values | -| --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- | -| noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' | - -**Notes:** Default value: 'center' - -### messageFontSize - -| Parameter | Description | Type | Required | Values | -| --------------- | ----------------------------------------- | ------- | -------- | ------------------- | -| messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number | - -**Notes:** Default value: 16 - -### messageFontFamily - -| 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' - -### messageFontWeight - -This sets the font weight of the message's description - -**Notes:** Default value: 400. - -### wrap - -This sets the auto-wrap state for the diagram - -**Notes:** Default value: false. - -### wrapPadding - -This sets the auto-wrap padding for the diagram (sides only) - -**Notes:** Default value: 0. - -### labelBoxWidth - -This sets the width of the loop-box (loop, alt, opt, par) - -**Notes:** Default value: 50. - -### labelBoxHeight - -This sets the height of the loop-box (loop, alt, opt, par) - -**Notes:** Default value: 20. - -## gantt - -The object containing configurations specific for gantt diagrams - -### titleTopMargin - -### 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 - -### barHeight - -| Parameter | Description | Type | Required | Values | -| --------- | ----------------------------------- | ------- | -------- | ------------------ | -| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value | - -**Notes:** Default value: 20 - -### barGap - -| 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 - -### topPadding - -| 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 - -### rightPadding - -| 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 - -### leftPadding - -| 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 - -### gridLineStartPadding - -| Parameter | Description | Type | Required | Values | -| -------------------- | -------------------------------------------- | ------- | -------- | ------------------ | -| gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value | - -**Notes:** Default value: 35 - -### fontSize - -| Parameter | Description | Type | Required | Values | -| --------- | ----------- | ------- | -------- | ------------------ | -| fontSize | Font size | Integer | Required | Any Positive Value | - -**Notes:** Default value: 11 - -### sectionFontSize - -| Parameter | Description | Type | Required | Values | -| --------------- | ---------------------- | ------- | -------- | ------------------ | -| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value | - -**Notes:** Default value: 11 - -### numberSectionStyles - -| Parameter | Description | Type | Required | Values | -| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ | -| numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value | - -**Notes:** Default value: 4 - -### axisFormat - -| Parameter | Description | Type | Required | Values | -| ---------- | --------------------------- | ---- | -------- | ---------------- | -| axisFormat | Datetime 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'. - -### useMaxWidth - -| 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 - -### topAxis - -| 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**. - -## journey - -The object containing configurations specific for journey diagrams - -### diagramMarginX - -| 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 - -### diagramMarginY - -| Parameter | Description | Type | Required | Values | -| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ | -| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### leftMargin - -| Parameter | Description | Type | Required | Values | -| ----------- | --------------------- | ------- | -------- | ------------------ | -| actorMargin | Margin between actors | Integer | Required | Any Positive Value | - -**Notes:** Default value: 50 - -### width - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------- | ------- | -------- | ------------------ | -| width | Width of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 150 - -### height - -| Parameter | Description | Type | Required | Values | -| --------- | --------------------- | ------- | -------- | ------------------ | -| height | Height of actor boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 65 - -### boxMargin - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------------ | ------- | -------- | ------------------ | -| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### boxTextMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | -------------------------------------------- | ------- | -------- | ------------------ | -| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 5 - -### noteMargin - -| Parameter | Description | Type | Required | Values | -| ---------- | ------------------- | ------- | -------- | ------------------ | -| noteMargin | Margin around notes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### messageMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | ----------------------- | ------- | -------- | ------------------ | -| messageMargin | Space between messages. | Integer | Required | Any Positive Value | - -**Notes:** - -Space between messages. - -Default value: 35 - -### messageAlign - -| Parameter | Description | Type | Required | Values | -| ------------ | --------------------------- | ---- | -------- | ------------------------- | -| messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' | - -**Notes:** Default value: 'center' - -### bottomMarginAdj - -| 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 - -### useMaxWidth - -| 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 - -### rightAngles - -| 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 - -## useMaxWidth - -| 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 - -## defaultRenderer - -| 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` - -## useMaxWidth - -| 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 - -## defaultRenderer - -| 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` - -## er - -The object containing configurations specific for entity relationship diagrams - -### diagramPadding - -| 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 - -### layoutDirection - -| 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' - -### minEntityWidth - -| 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 - -### minEntityHeight - -| 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 - -### entityPadding - -| 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 - -### stroke - -| Parameter | Description | Type | Required | Values | -| --------- | ----------------------------------- | ------ | -------- | -------------------- | -| stroke | Stroke color of box edges and lines | string | 4 | Any recognized color | - -**Notes:** Default value: 'gray' - -### fill - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------------- | ------ | -------- | -------------------- | -| fill | Fill color of entity boxes | string | 4 | Any recognized color | - -**Notes:** Default value: 'honeydew' - -### fontSize - -| 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 - -### useMaxWidth - -| 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 - -## pie - -The object containing configurations specific for pie diagrams - -### useMaxWidth - -| 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 - -## requirement - -The object containing configurations specific for req diagrams - -### useMaxWidth - -| 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 - -## c4 - -The object containing configurations specific for c4 diagrams - -### diagramMarginX - -| 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 - -### diagramMarginY - -| Parameter | Description | Type | Required | Values | -| -------------- | ------------------------------------------- | ------- | -------- | ------------------ | -| diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### c4ShapeMargin - -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------- | ------- | -------- | ------------------ | -| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 50 - -### c4ShapePadding - -| Parameter | Description | Type | Required | Values | -| -------------- | ---------------------- | ------- | -------- | ------------------ | -| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 20 - -### width - -| Parameter | Description | Type | Required | Values | -| --------- | --------------------- | ------- | -------- | ------------------ | -| width | Width of person boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 216 - -### height - -| Parameter | Description | Type | Required | Values | -| --------- | ---------------------- | ------- | -------- | ------------------ | -| height | Height of person boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 60 - -### boxMargin - -| Parameter | Description | Type | Required | Values | -| --------- | ------------------- | ------- | -------- | ------------------ | -| boxMargin | Margin around boxes | Integer | Required | Any Positive Value | - -**Notes:** Default value: 10 - -### useMaxWidth - -| 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 - -### c4ShapeInRow - -| 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 - -### c4BoundaryInRow - -| 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 - -### personFontSize - -This sets the font size of Person shape for the diagram - -**Notes:** Default value: 14. - -### personFontFamily - -This sets the font family of Person shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### personFontWeight - -This sets the font weight of Person shape for the diagram - -**Notes:** Default value: normal. - -### external_personFontSize - -This sets the font size of External Person shape for the diagram - -**Notes:** Default value: 14. - -### external_personFontFamily - -This sets the font family of External Person shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_personFontWeight - -This sets the font weight of External Person shape for the diagram - -**Notes:** Default value: normal. - -### systemFontSize - -This sets the font size of System shape for the diagram - -**Notes:** Default value: 14. - -### systemFontFamily - -This sets the font family of System shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### systemFontWeight - -This sets the font weight of System shape for the diagram - -**Notes:** Default value: normal. - -### external_systemFontSize - -This sets the font size of External System shape for the diagram - -**Notes:** Default value: 14. - -### external_systemFontFamily - -This sets the font family of External System shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_systemFontWeight - -This sets the font weight of External System shape for the diagram - -**Notes:** Default value: normal. - -### system_dbFontSize - -This sets the font size of System DB shape for the diagram - -**Notes:** Default value: 14. - -### system_dbFontFamily - -This sets the font family of System DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### system_dbFontWeight - -This sets the font weight of System DB shape for the diagram - -**Notes:** Default value: normal. - -### external_system_dbFontSize - -This sets the font size of External System DB shape for the diagram - -**Notes:** Default value: 14. - -### external_system_dbFontFamily - -This sets the font family of External System DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_system_dbFontWeight - -This sets the font weight of External System DB shape for the diagram - -**Notes:** Default value: normal. - -### system_queueFontSize - -This sets the font size of System Queue shape for the diagram - -**Notes:** Default value: 14. - -### system_queueFontFamily - -This sets the font family of System Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### system_queueFontWeight - -This sets the font weight of System Queue shape for the diagram - -**Notes:** Default value: normal. - -### external_system_queueFontSize - -This sets the font size of External System Queue shape for the diagram - -**Notes:** Default value: 14. - -### external_system_queueFontFamily - -This sets the font family of External System Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_system_queueFontWeight - -This sets the font weight of External System Queue shape for the diagram - -**Notes:** Default value: normal. - -### boundaryFontSize - -This sets the font size of Boundary shape for the diagram - -**Notes:** Default value: 14. - -### boundaryFontFamily - -This sets the font family of Boundary shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### boundaryFontWeight - -This sets the font weight of Boundary shape for the diagram - -**Notes:** Default value: normal. - -### messageFontSize - -This sets the font size of Message shape for the diagram - -**Notes:** Default value: 12. - -### messageFontFamily - -This sets the font family of Message shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### messageFontWeight - -This sets the font weight of Message shape for the diagram - -**Notes:** Default value: normal. - -### containerFontSize - -This sets the font size of Container shape for the diagram - -**Notes:** Default value: 14. - -### containerFontFamily - -This sets the font family of Container shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### containerFontWeight - -This sets the font weight of Container shape for the diagram - -**Notes:** Default value: normal. - -### external_containerFontSize - -This sets the font size of External Container shape for the diagram - -**Notes:** Default value: 14. - -### external_containerFontFamily - -This sets the font family of External Container shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_containerFontWeight - -This sets the font weight of External Container shape for the diagram - -**Notes:** Default value: normal. - -### container_dbFontSize - -This sets the font size of Container DB shape for the diagram - -**Notes:** Default value: 14. - -### container_dbFontFamily - -This sets the font family of Container DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### container_dbFontWeight - -This sets the font weight of Container DB shape for the diagram - -**Notes:** Default value: normal. - -### external_container_dbFontSize - -This sets the font size of External Container DB shape for the diagram - -**Notes:** Default value: 14. - -### external_container_dbFontFamily - -This sets the font family of External Container DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_container_dbFontWeight - -This sets the font weight of External Container DB shape for the diagram - -**Notes:** Default value: normal. - -### container_queueFontSize - -This sets the font size of Container Queue shape for the diagram - -**Notes:** Default value: 14. - -### container_queueFontFamily - -This sets the font family of Container Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### container_queueFontWeight - -This sets the font weight of Container Queue shape for the diagram - -**Notes:** Default value: normal. - -### external_container_queueFontSize - -This sets the font size of External Container Queue shape for the diagram - -**Notes:** Default value: 14. - -### external_container_queueFontFamily - -This sets the font family of External Container Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_container_queueFontWeight - -This sets the font weight of External Container Queue shape for the diagram - -**Notes:** Default value: normal. - -### componentFontSize - -This sets the font size of Component shape for the diagram - -**Notes:** Default value: 14. - -### componentFontFamily - -This sets the font family of Component shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### componentFontWeight - -This sets the font weight of Component shape for the diagram - -**Notes:** Default value: normal. - -### external_componentFontSize - -This sets the font size of External Component shape for the diagram - -**Notes:** Default value: 14. - -### external_componentFontFamily - -This sets the font family of External Component shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_componentFontWeight - -This sets the font weight of External Component shape for the diagram - -**Notes:** Default value: normal. - -### component_dbFontSize - -This sets the font size of Component DB shape for the diagram - -**Notes:** Default value: 14. - -### component_dbFontFamily - -This sets the font family of Component DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### component_dbFontWeight - -This sets the font weight of Component DB shape for the diagram - -**Notes:** Default value: normal. - -### external_component_dbFontSize - -This sets the font size of External Component DB shape for the diagram - -**Notes:** Default value: 14. - -### external_component_dbFontFamily - -This sets the font family of External Component DB shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_component_dbFontWeight - -This sets the font weight of External Component DB shape for the diagram - -**Notes:** Default value: normal. - -### component_queueFontSize - -This sets the font size of Component Queue shape for the diagram - -**Notes:** Default value: 14. - -### component_queueFontFamily - -This sets the font family of Component Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### component_queueFontWeight - -This sets the font weight of Component Queue shape for the diagram - -**Notes:** Default value: normal. - -### external_component_queueFontSize - -This sets the font size of External Component Queue shape for the diagram - -**Notes:** Default value: 14. - -### external_component_queueFontFamily - -This sets the font family of External Component Queue shape for the diagram - -**Notes:** Default value: "Open Sans", sans-serif. - -### external_component_queueFontWeight - -This sets the font weight of External Component Queue shape for the diagram - -**Notes:** Default value: normal. - -### wrap - -This sets the auto-wrap state for the diagram - -**Notes:** Default value: true. - -### wrapPadding - -This sets the auto-wrap padding for the diagram (sides only) - -**Notes:** Default value: 0. - -## parse - -### Parameters - -- `text` **[string][4]** -- `parseError` **[Function][5]?** - -Returns **[boolean][6]** - -## setSiteConfig - -## setSiteConfig - -| Function | Description | Type | Values | -| ------------- | ------------------------------------- | ----------- | --------------------------------------- | -| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | - -**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls -to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) -will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this -function _Default value: At default, will mirror Global Config_ - -### Parameters - -- `conf` **MermaidConfig** The base currentConfig to use as siteConfig - -Returns **[object][7]** The siteConfig - -## getSiteConfig - -## getSiteConfig - -| Function | Description | Type | Values | -| ------------- | ------------------------------------------------- | ----------- | -------------------------------- | -| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig | - -**Notes**: Returns **any** values in siteConfig. - -Returns **[object][7]** The siteConfig - -## setConfig - -## setConfig - -| Function | Description | Type | Values | -| ------------- | ------------------------------------- | ----------- | --------------------------------------- | -| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | - -**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure -keys. Any values found in conf with key found in siteConfig.secure will be replaced with the -corresponding siteConfig value. - -### Parameters - -- `conf` **any** The potential currentConfig - -Returns **any** The currentConfig merged with the sanitized conf - -## render - -Function that renders an svg with a graph from a chart definition. Usage example below. - -```javascript -mermaidAPI.initialize({ - startOnLoad: true, -}); -$(function () { - const graphDefinition = 'graph TB\na-->b'; - const cb = function (svgGraph) { - console.log(svgGraph); - }; - mermaidAPI.render('id1', graphDefinition, cb); -}); -``` - -### Parameters - -- `id` **[string][4]** The id of the element to be rendered -- `text` **[string][4]** The graph definition -- `cb` **function (svgCode: [string][4], bindFunctions: function (element: [Element][8]): void): void** -- `container` **[Element][8]** Selector to element in which a div with the graph temporarily will be - inserted. If one is provided a hidden div will be inserted in the body of the page instead. The - element will be removed when rendering is completed. - -Returns **void** - -## getConfig - -## getConfig - -| Function | Description | Type | Return Values | -| --------- | ------------------------- | ----------- | ------------------------------ | -| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config | - -**Notes**: Returns **any** the currentConfig - -Returns **any** The currentConfig - -## sanitize - -## sanitize - -| Function | Description | Type | Values | -| -------- | -------------------------------------- | ----------- | ------ | -| sanitize | Sets the siteConfig to desired values. | Put Request | None | - -Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies -options in-place - -### Parameters - -- `options` **any** The potential setConfig parameter - -## addDirective - -Pushes in a directive to the configuration - -### Parameters - -- `directive` **[object][7]** The directive to push in - -## reset - -## reset - -| Function | Description | Type | Required | Values | -| -------- | ---------------------------- | ----------- | -------- | ------ | -| reset | Resets currentConfig to conf | Put Request | Required | None | - -## conf - -| Parameter | Description | Type | Required | Values | -| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- | -| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array | - -**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`) - -### Parameters - -- `config` (optional, default `siteConfig`) - -Returns **void** - -## initialize - -### Parameters - -- `options` **MermaidConfig** - -## - -## mermaidAPI configuration defaults - -```html - -``` - -[1]: Setup.md?id=render -[2]: 8.6.0_docs.md -[3]: #mermaidapi-configuration-defaults -[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function -[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean -[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[8]: https://developer.mozilla.org/docs/Web/API/Element diff --git a/packages/mermaid/src/docs/Tutorials.md b/packages/mermaid/src/docs/Tutorials.md deleted file mode 100644 index f4570d8b5a..0000000000 --- a/packages/mermaid/src/docs/Tutorials.md +++ /dev/null @@ -1,72 +0,0 @@ -# Tutorials - -This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML. - -**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.** - -For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. - -## Live-Editor Tutorials - -The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0. - -[Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA) - -[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s) - -[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE) - -[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s) - -[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) - -## Mermaid with HTML - -Examples are provided in [Getting Started](n00b-gettingStarted.md) - -**CodePen Examples:** - -https://codepen.io/CarlBoneri/pen/BQwZzq - -https://codepen.io/tdkn/pen/vZxQzd - -https://codepen.io/janzeteachesit/pen/OWWZKN - -## Mermaid with Text Area - -https://codepen.io/Ryuno-Ki/pen/LNxwgR - -## Mermaid in open source docs - -[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/) - -[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/) - -## Jupyter Integration with mermaid-js - -Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook. - -```python -import base64 -from IPython.display import Image, display -import matplotlib.pyplot as plt - -def mm(graph): - graphbytes = graph.encode("ascii") - base64_bytes = base64.b64encode(graphbytes) - base64_string = base64_bytes.decode("ascii") - display(Image(url="https://mermaid.ink/img/" + base64_string)) - -mm(""" -graph LR; - A--> B & C & D; - B--> A & E; - C--> A & E; - D--> A & E; - E--> B & C & D; -""") -``` - -**Output** - -![Example graph of the Python integration](img/python-mermaid-integration.png) diff --git a/packages/mermaid/src/docs/_navbar.md b/packages/mermaid/src/docs/_navbar.md deleted file mode 100644 index c77bde3bdc..0000000000 --- a/packages/mermaid/src/docs/_navbar.md +++ /dev/null @@ -1,13 +0,0 @@ -- Getting started - - - [Quick start](quickstart.md) - - [Writing more pages](more-pages.md) - - [Custom navbar](custom-navbar.md) - - [Cover page](cover.md) - -- Configuration - - [Configuration](configuration.md) - - [Themes](themes.md) - - [Using plugins](plugins.md) - - [Markdown configuration](markdown.md) - - [Language highlight](language-highlight.md) diff --git a/packages/mermaid/src/docs/_sidebar.md b/packages/mermaid/src/docs/_sidebar.md deleted file mode 100644 index f89f30318b..0000000000 --- a/packages/mermaid/src/docs/_sidebar.md +++ /dev/null @@ -1,44 +0,0 @@ -- 📔 Introduction - - - [About Mermaid](README.md) - - [Deployment](n00b-gettingStarted.md) - - [Syntax and Configuration](n00b-syntaxReference.md) - -- 📊 Diagram Syntax - - - [Flowchart](flowchart.md) - - [Sequence Diagram](sequenceDiagram.md) - - [Class Diagram](classDiagram.md) - - [State Diagram](stateDiagram.md) - - [Entity Relationship Diagram](entityRelationshipDiagram.md) - - [User Journey](user-journey.md) - - [Gantt](gantt.md) - - [Pie Chart](pie.md) - - [Requirement Diagram](requirementDiagram.md) - - [Gitgraph (Git) Diagram 🔥](gitgraph.md) - - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md) - - [Mindmaps 🦺⚠️](mindmap.md) - - [Other Examples](examples.md) - -- ⚙️ Deployment and Configuration - - - [Tutorials](Tutorials.md) - - [API-Usage](usage.md) - - [Mermaid API Configuration](Setup.md) - - [Directives](directives.md) - - [Theming](theming.md) - - [Accessibility](accessibility.md) - - [Mermaid CLI](mermaidCLI.md) - - [Advanced usage](n00b-advanced.md) - -- 📚 Misc - - - [Use-Cases and Integrations](integrations.md) - - [FAQ](faq.md) - -- 🙌 Contributions and Community - - [Overview for Beginners](n00b-overview.md) - - [Development and Contribution ](development.md) - - [Changelog](CHANGELOG.md) - - [Adding Diagrams ](newDiagram.md) - - [Security ](security.md) diff --git a/packages/mermaid/src/docs/accessibility.md b/packages/mermaid/src/docs/accessibility.md deleted file mode 100644 index ade20a8395..0000000000 --- a/packages/mermaid/src/docs/accessibility.md +++ /dev/null @@ -1,208 +0,0 @@ -# Accessibility Options - -## Accessibility - -Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community. - -To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**. - -This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain. - -## Defining Accessibility Options - -### Single line accessibility values - -The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like: - -- `accTitle: "Your Accessibility Title"` or -- `accDescr: "Your Accessibility Description"` - -**When these two options are defined, they will add a corresponding `` and `<desc>` tag in the SVG.** - -Let us take a look at the following example with a flowchart diagram: - -```mermaid-example - graph LR - accTitle: Big decisions - accDescr: Flow chart of the decision making process - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - -``` - -See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code: - -![Accessibility options rendered inside SVG](img/accessibility-div-example.png) - -### Multi-line Accessibility title/description - -You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`. - -`accTitle: My single line title value` (**_single line format_**) - -vs - -`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**) - -Let us look at it in the following example, with same flowchart: - -```mermaid-example - graph LR - accTitle: Big decisions - - accDescr { - My multi-line description - of the diagram - } - - A[Hard] -->|Text| B(Round) - B --> C{Decision} - C -->|One| D[Result 1] - -``` - -See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code: - -![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png) - -### Sample Code Snippet for other diagram types - -#### Sequence Diagram - -```mermaid-example - sequenceDiagram - accTitle: My Sequence Diagram - accDescr: My Sequence Diagram Description - - Alice->>John: Hello John, how are you? - John-->>Alice: Great! - Alice-)John: See you later! -``` - -#### Class Diagram - -```mermaid-example - classDiagram - accTitle: My Class Diagram - accDescr: My Class Diagram Description - - Vehicle <|-- Car -``` - -#### State Diagram - -```mermaid-example - stateDiagram - accTitle: My State Diagram - accDescr: My State Diagram Description - - s1 --> s2 - -``` - -#### Entity Relationship Diagram - -```mermaid-example - erDiagram - accTitle: My Entity Relationship Diagram - accDescr: My Entity Relationship Diagram Description - - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -#### User Journey Diagram - -```mermaid-example - journey - accTitle: My User Journey Diagram - accDescr: My User Journey Diagram Description - - 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 - -``` - -#### Gantt Chart - -```mermaid-example - gantt - accTitle: My Gantt Chart Accessibility Title - accDescr: My Gantt Chart Accessibility Description - - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - another task : 24d - -``` - -#### Pie Chart - -```mermaid-example - pie - accTitle: My Pie Chart Accessibility Title - accDescr: My Pie Chart Accessibility Description - - title Key elements in Product X - "Calcium" : 42.96 - "Potassium" : 50.05 - "Magnesium" : 10.01 - "Iron" : 5 - -``` - -#### Requirement Diagram - -```mermaid-example - requirementDiagram - accTitle: My Requirement Diagram - accDescr: My Requirement Diagram Description - - requirement test_req { - id: 1 - text: the test text. - risk: high - verifymethod: test - } - - element test_entity { - type: simulation - } - - test_entity - satisfies -> test_req - -``` - -#### Gitgraph - -```mermaid-example - gitGraph - accTitle: My Gitgraph Accessibility Title - accDescr: My Gitgraph Accessibility Description - - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit - -``` diff --git a/packages/mermaid/src/docs/breakingChanges.md b/packages/mermaid/src/docs/breakingChanges.md deleted file mode 100644 index 41b411df6e..0000000000 --- a/packages/mermaid/src/docs/breakingChanges.md +++ /dev/null @@ -1,49 +0,0 @@ -# Breaking changes - -### Breaking changes from history version to latest version: - -## #1 - -```javascript -mermaid.initialize({ - sequenceDiagram:{ - ... - } -}) -``` - -has been changed to - -```javascript -mermaid.initialize({ - sequence:{ - ... - } -}) -``` - -## #2 - -In old versions you needed to reference a CSS file in your HTML: - -```html -<link rel="stylesheet" href="mermaid.min.css" /> -``` - -or - -```html -<link rel="stylesheet" href="mermaid.forest.min.css" /> -``` - -Now it is not needed, and there are no more CSS files in the distribution files. - -You just: - -```javascript -mermaid.initialize({ - theme: 'forest', -}); -``` - -and it works like a charm because now the CSS is inline with the SVG to allow simpler portability. diff --git a/packages/mermaid/src/docs/development.md b/packages/mermaid/src/docs/community/development.md similarity index 85% rename from packages/mermaid/src/docs/development.md rename to packages/mermaid/src/docs/community/development.md index 80edb77197..bfa5ddfcf7 100644 --- a/packages/mermaid/src/docs/development.md +++ b/packages/mermaid/src/docs/community/development.md @@ -6,7 +6,7 @@ So you want to help? That's great! Here are a few things to get you started on the right path. -**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)** +**The Docs Structure is dictated by [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. **Note: Commits and Pull Requests should be directed to the develop branch.** @@ -26,7 +26,7 @@ We make all changes via Pull Requests. As we have many Pull Requests from develo - Large changes reviewed by knsv or other developer asked to review by knsv - Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators -- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits) +- Documentation (we encourage updates to the `/packages/mermaid/src/docs` folder; you can submit them via direct commits) When you commit code, create a branch with the following naming convention: @@ -44,9 +44,9 @@ Start with the type, such as **feature** or **bug**, followed by the issue numbe If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature? -The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**. +The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via **[.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. -> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**. +> **All the documents displayed in the GitHub.io page are listed in [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released. @@ -58,7 +58,7 @@ The documentation is located in the `src/docs` directory and organized according The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually. -We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s) +We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s) ### Add Unit Tests for Parsing @@ -111,7 +111,7 @@ Markdown is used to format the text, for more information about Markdown [see th To edit Docs on your computer: -1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch. +1. Find the Markdown file (.md) to edit in the [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) directory in the `develop` branch. 2. Create a fork of the develop branch. 3. Make changes or add new documentation. 4. Commit changes to your fork and push it to GitHub. @@ -120,7 +120,7 @@ To edit Docs on your computer: To edit Docs on GitHub: 1. Login to [GitHub.com](https://www.github.com). -2. Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). +2. Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). 3. To edit a file, click the pencil icon at the top-right of the file contents panel. 4. Describe what you changed in the **Propose file change** section, located at the bottom of the page. 5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch). diff --git a/packages/mermaid/src/docs/community/img/er.png b/packages/mermaid/src/docs/community/img/er.png new file mode 100644 index 0000000000..21c44c257a Binary files /dev/null and b/packages/mermaid/src/docs/community/img/er.png differ diff --git a/packages/mermaid/src/docs/n00b-overview.md b/packages/mermaid/src/docs/community/n00b-overview.md similarity index 91% rename from packages/mermaid/src/docs/n00b-overview.md rename to packages/mermaid/src/docs/community/n00b-overview.md index b784ba7374..a72e500bdc 100644 --- a/packages/mermaid/src/docs/n00b-overview.md +++ b/packages/mermaid/src/docs/community/n00b-overview.md @@ -39,7 +39,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof **Nodes** -> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference) +> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](../intro/n00b-syntaxReference.md) ## Advantages of using Mermaid @@ -63,6 +63,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a ## Mermaid is for everyone. -Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). +Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. diff --git a/packages/mermaid/src/docs/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md similarity index 80% rename from packages/mermaid/src/docs/newDiagram.md rename to packages/mermaid/src/docs/community/newDiagram.md index 4b6c7dfd6f..57a4546712 100644 --- a/packages/mermaid/src/docs/newDiagram.md +++ b/packages/mermaid/src/docs/community/newDiagram.md @@ -8,8 +8,8 @@ This would be to define a jison grammar for the new diagram type. That should st For instance: -- the flowchart starts with the keyword graph. -- the sequence diagram starts with the keyword sequenceDiagram +- the flowchart starts with the keyword _graph_ +- the sequence diagram starts with the keyword _sequenceDiagram_ #### Store data found during parsing @@ -26,7 +26,7 @@ statement In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered. -```tip +```note Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user. ``` @@ -43,8 +43,7 @@ exports.parseError = function (err, hash) { when parsing the `yy` object is initialized as per below: ```javascript -var parser; -parser = exampleParser.parser; +const parser = exampleParser.parser; parser.yy = db; ``` @@ -57,6 +56,11 @@ Place the renderer in the diagram folder. ### Step 3: Detection of the new diagram type The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type. +[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type. +For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader +would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram. + +Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same. ### Step 4: The final piece - triggering the rendering @@ -67,8 +71,8 @@ At this point when mermaid is trying to render the diagram, it will detect it as ### Setup ```javascript -var graph = require('./graphDb'); -var flow = require('./parser/flow'); +const graph = require('./graphDb'); +const flow = require('./parser/flow'); flow.parser.yy = graph; ``` @@ -89,7 +93,7 @@ graph.getEdges(); The parser is also exposed in the mermaid api by calling: ```javascript -var parser = mermaid.getParser(); +const parser = mermaid.getParser(); ``` Note that the parse needs a graph object to store the data as per: @@ -115,13 +119,12 @@ There are a few features that are common between the different types of diagrams Here some pointers on how to handle these different areas. -#### [Directives](./directives.md) +#### [Directives](../config/directives.md) Here is example handling from flowcharts: Jison: ```jison - /* lexical grammar */ %lex %x open_directive @@ -165,21 +168,26 @@ It is probably a good idea to keep the handling similar to this in your new diag ## Accessibility -The syntax for adding title and description looks like this: +Mermaid automatically adds the following accessibility information for the diagram SVG HTML element: -``` -accTitle: The title -accDescr: The description +- aria-roledescription +- accessible title +- accessible description -accDescr { - Syntax for a description text - written on multiple lines. -} -``` +### aria-roledescription + +The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element. -In a similar way to the directives the jison syntax are quite similar between the diagrams. +See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/) + +### accessible title and description + +The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md) + +In a similar way to the directives, the jison syntax are quite similar between the diagrams. ```jison + * lexical grammar */ %lex %x acc_title @@ -199,6 +207,7 @@ statement : acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } + ``` The functions for setting title and description are provided by a common module. This is the import from flowDb.js: @@ -213,22 +222,11 @@ import { } from '../../commonDb'; ``` -For rendering the accessibility tags you have again an existing function you can use. - -**In the renderer:** - -```js -import addSVGAccessibilityFields from '../../accessibility'; - -/* ... */ - -// Adds title and description to the flow chart -addSVGAccessibilityFields(parser.yy, svg, id); -``` +The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI. ## Theming -Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](./theming.md). +Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md). When adding themes to a diagram it comes down to a few important locations in the code. diff --git a/packages/mermaid/src/docs/security.md b/packages/mermaid/src/docs/community/security.md similarity index 71% rename from packages/mermaid/src/docs/security.md rename to packages/mermaid/src/docs/community/security.md index 7e61a60cf3..e7a0db6edb 100644 --- a/packages/mermaid/src/docs/security.md +++ b/packages/mermaid/src/docs/community/security.md @@ -4,13 +4,13 @@ The Mermaid team takes the security of Mermaid and the applications that use Mer ## Reporting vulnerabilities -To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. +To report a vulnerability, please e-mail <security@mermaid.live> with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. We aim to reply within three working days, probably much sooner. -You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates. +You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to <security@mermaid.live> again if you do not receive prompt attention and regular updates. -You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. +You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail <security@mermaid.live> when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. ## Best practices diff --git a/vdocs/config/8.6.0_docs.md b/packages/mermaid/src/docs/config/8.6.0_docs.md similarity index 95% rename from vdocs/config/8.6.0_docs.md rename to packages/mermaid/src/docs/config/8.6.0_docs.md index 9e5264c12d..bc19e08d59 100644 --- a/vdocs/config/8.6.0_docs.md +++ b/packages/mermaid/src/docs/config/8.6.0_docs.md @@ -6,8 +6,8 @@ With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. -`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md). -This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](../config/directives), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams. +`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](../config/configuration.md). +This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](directives.md), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams. **A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.** @@ -46,9 +46,9 @@ Implementors can only modify configurations using directives, and cannot change The Two types of directives: are `init` (or `initialize`) and `wrap`. -::: tip +```note All directives are enclosed in `%%{ }%%` -::: +``` Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible. @@ -60,7 +60,7 @@ Older versions of mermaid will not parse directives because `%%` will comment ou | --------- | ----------------------- | --------- | -------- | ----------------------------------------------- | | init | modifies configurations | Directive | Optional | Any parameters not included in the secure array | -::: tip +```note init would be an argument-directive: `%%{init: { **insert argument here**}}%%` The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored. @@ -71,7 +71,7 @@ The json object that is passed as {**argument** } must be valid, quoted json or Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict. When deployed within code, init is called before the graph/diagram description. -::: +``` **for example**: @@ -93,15 +93,15 @@ When deployed within code, init is called before the graph/diagram description. | --------- | ----------------------------- | --------- | -------- | ---------- | | wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% | -::: tip +```note Wrap is a function that is currently only deployable for sequence diagrams. -Wrap respects a manually added <br\>, so if the user wants to break up their text, they have full control over line breaks by adding <br\> tags. +`Wrap respects a manually added <br>, so if the user wants to break up their text, they have full control over line breaks by adding <br> tags.` It is a non-argument directive and can be executed thusly: `%%{wrap}%%` . -::: +``` **An example of text wrapping in a sequence diagram**: @@ -143,13 +143,13 @@ Example of **object.Assign**: | --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- | | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig | -::: tip +```note Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this function。 Default value: will mirror Global Config -::: +``` ## getSiteConfig @@ -157,9 +157,9 @@ Default value: will mirror Global Config | --------------- | --------------------------------------------------- | ----------- | ---------------------------------- | | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` | -::: tip +```note Returns any values in siteConfig. -::: +``` ## setConfig @@ -167,11 +167,11 @@ Returns any values in siteConfig. | ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- | | `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf | -::: tip +```note Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any values found in conf with key found in siteConfig.secure will be replaced with the corresponding siteConfig value. -::: +``` ## getConfig @@ -179,9 +179,9 @@ siteConfig value. | ----------- | --------------------------- | ----------- | ------------------------------- | | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` | -::: tip +```note Returns any values in currentConfig. -::: +``` ## sanitize @@ -189,10 +189,10 @@ Returns any values in currentConfig. | ---------- | ---------------------------------------- | -------------- | ------ | | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None | -::: tip +```note modifies options in-place Ensures options parameter does not attempt to override siteConfig secure keys. -::: +``` ## reset @@ -206,8 +206,8 @@ Ensures options parameter does not attempt to override siteConfig secure keys. | --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- | | `conf` | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array | -::: tip +```note default: current siteConfig (optional, default `getSiteConfig()`) -::: +``` -## For more information, read [Setup](Setup.md). +## For more information, read [Setup](./setup/README.md). diff --git a/vdocs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md similarity index 96% rename from vdocs/config/Tutorials.md rename to packages/mermaid/src/docs/config/Tutorials.md index bfaa4facf9..e07635641a 100644 --- a/vdocs/config/Tutorials.md +++ b/packages/mermaid/src/docs/config/Tutorials.md @@ -4,7 +4,7 @@ This is list of publicly available Tutorials for using Mermaid.JS . This is inte **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.** -For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. +For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram. ## Live-Editor Tutorials @@ -22,7 +22,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati ## Mermaid with HTML -Examples are provided in [Getting Started](../intro/n00b-gettingStarted) +Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md) **CodePen Examples:** diff --git a/packages/mermaid/src/docs/config/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md new file mode 100644 index 0000000000..e7947adec9 --- /dev/null +++ b/packages/mermaid/src/docs/config/accessibility.md @@ -0,0 +1,288 @@ +# Accessibility Options + +## Accessibility + +Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community. + +Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines). +[Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/) + +Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description) + +### aria-roledescription + +The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.) + +For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ + +```html +<svg + aria-roledescription="stateDiagram" + class="statediagram" + xmlns="http://www.w3.org/2000/svg" + width="100%" + id="mermaid-1668720491568" +></svg> +``` + +### Accessible Title and Description + +Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain. + +The accessible title and description will add `<title>` and `<desc>` elements within the SVG element and the [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) and [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) attributes in the SVG tag. + +Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = `chart-title-mermaid-1668725057758`) +and described by the accessible description (id = `chart-desc-mermaid-1668725057758` ); +and the accessible title element (text = "This is the accessible title") +and the accessible description element (text = "This is an accessible description"). + +_(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_ + +```html +<svg + aria-labelledby="chart-title-mermaid-1668725057758" + aria-describedby="chart-desc-mermaid-1668725057758" + xmlns="http://www.w3.org/2000/svg" + width="100%" + id="mermaid-1668725057758" +> + <title id="chart-title-mermaid-1668725057758">This is the accessible title + This is an accessible description + +``` + +Details for the syntax follow. + +#### accessible title + +The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title. +The string value ends at the end of the line. (It can only be a single line.) + +Ex: `accTitle: This is a single line title` + +See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. + +#### accessible description + +An accessible description can be 1 line long (a single line) or many lines long. + +The **single line accessible description** is specified with the **accDescr** _keyword_, followed by a colon (`:`), followed by the string value for the description. + +Ex: `accDescr: This is a single line description.` + +A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`). + +Ex: + +``` +accDescr { The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: see the big decision and then make the big decision.} +``` + +See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. + +#### accTitle and accDescr Usage Examples + +- Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions" + +```mermaid-example + graph LR + accTitle: Big Decisions + accDescr: Bob's Burgers process for making big decisions + A[Identify Big Descision] --> B{Make Big Decision} + B --> D[Be done] +``` + +Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ + +```html + + Big decisions + Bob's Burgers process for making big decisions + +``` + +- Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: identify the big decision and then make the big decision." + +```mermaid-example + graph LR + accTitle: Bob's Burger's Making Big Decisions + accDescr { + The official Bob's Burgers corporate processes that are used + for making very, very big decisions. + This is actually a very simple flow: identify the big decision and then make the big decision. + } + A[Identify Big Descision] --> B{Make Big Decision} + B --> D[Be done] +``` + +Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ + +```html + + Big decisions + + The official Bob's Burgers corporate processes that are used for making very, very big + decisions. This is actually a very simple flow: identify the big decision and then make the big + decision. + + +``` + +#### Sample Code Snippets for other diagram types + +##### Class Diagram + +```mermaid-example + classDiagram + accTitle: My Class Diagram + accDescr: My Class Diagram Description + + Vehicle <|-- Car +``` + +##### Entity Relationship Diagram + +```mermaid-example + erDiagram + accTitle: My Entity Relationship Diagram + accDescr: My Entity Relationship Diagram Description + + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses + +``` + +##### Gantt Chart + +```mermaid-example + gantt + accTitle: My Gantt Chart Accessibility Title + accDescr: My Gantt Chart Accessibility Description + + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + +``` + +##### Gitgraph + +```mermaid-example + gitGraph + accTitle: My Gitgraph Accessibility Title + accDescr: My Gitgraph Accessibility Description + + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit + +``` + +##### Pie Chart + +```mermaid-example + pie + accTitle: My Pie Chart Accessibility Title + accDescr: My Pie Chart Accessibility Description + + title Key elements in Product X + "Calcium" : 42.96 + "Potassium" : 50.05 + "Magnesium" : 10.01 + "Iron" : 5 + +``` + +##### Requirement Diagram + +```mermaid-example + requirementDiagram + accTitle: My Requirement Diagram + accDescr: My Requirement Diagram Description + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + +``` + +##### Sequence Diagram + +```mermaid-example + sequenceDiagram + accTitle: My Sequence Diagram + accDescr: My Sequence Diagram Description + + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +##### State Diagram + +```mermaid-example + stateDiagram + accTitle: My State Diagram + accDescr: My State Diagram Description + + s1 --> s2 + +``` + +##### User Journey Diagram + +```mermaid-example + journey + accTitle: My User Journey Diagram + accDescr: My User Journey Diagram Description + + 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 + +``` diff --git a/packages/mermaid/src/docs/developer-docs/configuration.md b/packages/mermaid/src/docs/config/configuration.md similarity index 100% rename from packages/mermaid/src/docs/developer-docs/configuration.md rename to packages/mermaid/src/docs/config/configuration.md diff --git a/vdocs/config/directives.md b/packages/mermaid/src/docs/config/directives.md similarity index 96% rename from vdocs/config/directives.md rename to packages/mermaid/src/docs/config/directives.md index 9060afdcfc..bc74ad3094 100644 --- a/vdocs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -24,7 +24,7 @@ Mermaid basically supports two types of configuration options to be overridden b 2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. -**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. +**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. ``` Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs @@ -188,7 +188,7 @@ Some common flowchart configurations are: - _diagramPadding_: number - _useMaxWidth_: number -For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. +For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ The following code snippet changes flowchart config: @@ -221,7 +221,7 @@ Some common sequence configurations are: - _showSequenceNumbers_: boolean - _wrap_: boolean -For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. +For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code. _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ So, `wrap` by default has a value of `false` for sequence diagrams. diff --git a/packages/mermaid/src/docs/img/accessibility-div-example-2.png b/packages/mermaid/src/docs/config/img/accessibility-div-example-2.png similarity index 100% rename from packages/mermaid/src/docs/img/accessibility-div-example-2.png rename to packages/mermaid/src/docs/config/img/accessibility-div-example-2.png diff --git a/packages/mermaid/src/docs/img/accessibility-div-example.png b/packages/mermaid/src/docs/config/img/accessibility-div-example.png similarity index 100% rename from packages/mermaid/src/docs/img/accessibility-div-example.png rename to packages/mermaid/src/docs/config/img/accessibility-div-example.png diff --git a/packages/mermaid/src/docs/img/assignWithDepth.png b/packages/mermaid/src/docs/config/img/assignWithDepth.png similarity index 100% rename from packages/mermaid/src/docs/img/assignWithDepth.png rename to packages/mermaid/src/docs/config/img/assignWithDepth.png diff --git a/packages/mermaid/src/docs/img/object.assign without depth.png b/packages/mermaid/src/docs/config/img/object.assign without depth.png similarity index 100% rename from packages/mermaid/src/docs/img/object.assign without depth.png rename to packages/mermaid/src/docs/config/img/object.assign without depth.png diff --git a/packages/mermaid/src/docs/img/python-mermaid-integration.png b/packages/mermaid/src/docs/config/img/python-mermaid-integration.png similarity index 100% rename from packages/mermaid/src/docs/img/python-mermaid-integration.png rename to packages/mermaid/src/docs/config/img/python-mermaid-integration.png diff --git a/packages/mermaid/src/docs/img/wrapped text.png b/packages/mermaid/src/docs/config/img/wrapped text.png similarity index 100% rename from packages/mermaid/src/docs/img/wrapped text.png rename to packages/mermaid/src/docs/config/img/wrapped text.png diff --git a/packages/mermaid/src/docs/mermaidCLI.md b/packages/mermaid/src/docs/config/mermaidCLI.md similarity index 100% rename from packages/mermaid/src/docs/mermaidCLI.md rename to packages/mermaid/src/docs/config/mermaidCLI.md diff --git a/packages/mermaid/src/docs/n00b-advanced.md b/packages/mermaid/src/docs/config/n00b-advanced.md similarity index 100% rename from packages/mermaid/src/docs/n00b-advanced.md rename to packages/mermaid/src/docs/config/n00b-advanced.md diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md new file mode 100644 index 0000000000..2d4da9530c --- /dev/null +++ b/packages/mermaid/src/docs/config/theming.md @@ -0,0 +1,177 @@ +# Theme Configuration + +Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0. + +Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used. + +## Available Themes + +1. **default** - This is the default theme for all diagrams. + +1. **neutral** - This theme is great for black and white documents that will be printed. + +1. **dark** - This theme goes well with dark-colored elements or dark-mode. + +1. **forest** - This theme contains shades of green. + +1. **base** - This is the only theme that can be modified. Use this theme as the base for customizations. + +## Site-wide Theme + +To customize themes site-wide, call the `initialize` method on the `mermaidAPI`. + +Example of `initialize` call setting `theme` to `base`: + +```javascript +mermaidAPI.initialize({ + securityLevel: 'loose', + theme: 'base', +}); +``` + +## Diagram-specific Themes + +To customize the theme of an individual diagram, use the `init` directive. + +Example of `init` directive setting the `theme` to `forest`: + +```mmd +%%{init: {'theme':'forest'}}%% + graph TD + a --> b +``` + +> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations. + +## Customizing Themes with `themeVariables` + +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)) | + +Example of modifying `themeVariables` using the `init` directive: + +```mermaid-example +%%{ + init: { + 'theme': 'base', + 'themeVariables': { + 'primaryColor': '#BB2528', + 'primaryTextColor': '#fff', + 'primaryBorderColor': '#7C0000', + 'lineColor': '#F8B229', + 'secondaryColor': '#006100', + 'tertiaryColor': '#fff' + } + } +}%% + graph TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + B --> G[/Another/] + C ==>|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] + subgraph section + C + D + E + F + G + end +``` + +## Color and Color Calculation + +To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc. + +The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not. + +## Theme Variables + +| Variable | Default value | Description | +| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | +| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | +| fontFamily | trebuchet ms, verdana, arial | | +| fontSize | 16px | Font size in pixels | +| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | +| secondaryColor | calculated from primaryColor | | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | +| tertiaryColor | calculated from primaryColor | | +| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | +| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | +| noteBkgColor | #fff5ad | Color used as background in notes | +| noteTextColor | #333 | Text color in note rectangles | +| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | +| lineColor | calculated from background | | +| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | +| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | +| errorBkgColor | tertiaryColor | Color for syntax error message | +| errorTextColor | tertiaryTextColor | Color for syntax error message | + +## Flowchart Variables + +| Variable | Default value | Description | +| ------------------- | ------------------------------ | --------------------------- | +| nodeBorder | primaryBorderColor | Node Border Color | +| clusterBkg | tertiaryColor | Background in subgraphs | +| clusterBorder | tertiaryBorderColor | Cluster Border Color | +| defaultLinkColor | lineColor | Link Color | +| titleColor | tertiaryTextColor | Title Color | +| edgeLabelBackground | calculated from secondaryColor | | +| nodeTextColor | primaryTextColor | Color for text inside Nodes | + +## Sequence Diagram Variables + +| Variable | Default value | Description | +| --------------------- | ------------------------------ | --------------------------- | +| actorBkg | mainBkg | Actor Background Color | +| actorBorder | primaryBorderColor | Actor Border Color | +| actorTextColor | primaryTextColor | Actor Text Color | +| actorLineColor | grey | Actor Line Color | +| signalColor | textColor | Signal Color | +| signalTextColor | textColor | Signal Text Color | +| labelBoxBkgColor | actorBkg | Label Box Background Color | +| labelBoxBorderColor | actorBorder | Label Box Border Color | +| labelTextColor | actorTextColor | Label Text Color | +| loopTextColor | actorTextColor | Loop Text Color | +| activationBorderColor | calculated from secondaryColor | Activation Border Color | +| activationBkgColor | secondaryColor | Activation Background Color | +| sequenceNumberColor | calculated from lineColor | Sequence Number Color | + +## State Colors + +| Variable | Default value | Description | +| ------------- | ---------------- | -------------------------------------------- | +| labelColor | primaryTextColor | | +| altBackground | tertiaryColor | Used for background in deep composite states | + +## Class Colors + +| Variable | Default value | Description | +| --------- | ------------- | ------------------------------- | +| classText | textColor | Color of Text in class diagrams | + +## User Journey Colors + +| Variable | Default value | Description | +| --------- | ------------------------------ | --------------------------------------- | +| fillType0 | primaryColor | Fill for 1st section in journey diagram | +| fillType1 | secondaryColor | Fill for 2nd section in journey diagram | +| fillType2 | calculated from primaryColor | Fill for 3rd section in journey diagram | +| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram | +| fillType4 | calculated from primaryColor | Fill for 5th section in journey diagram | +| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram | +| fillType6 | calculated from primaryColor | Fill for 7th section in journey diagram | +| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram | diff --git a/packages/mermaid/src/docs/usage.md b/packages/mermaid/src/docs/config/usage.md similarity index 96% rename from packages/mermaid/src/docs/usage.md rename to packages/mermaid/src/docs/config/usage.md index be2b94f728..3eac4ad6f3 100644 --- a/packages/mermaid/src/docs/usage.md +++ b/packages/mermaid/src/docs/config/usage.md @@ -12,7 +12,7 @@ Please note that you can switch versions through the dropdown box at the top rig ## Using mermaid -For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md). +For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md). We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor. @@ -37,7 +37,7 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai **Hosting mermaid on a web page.** -> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md) +> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md) The easiest way to integrate mermaid on a web page requires two elements: @@ -224,7 +224,7 @@ The example code below is an extract of what mermaid does when using the API. Th bind events to an SVG when using the API for rendering. ```javascript -var insertSvg = function (svgCode, bindFunctions) { +const insertSvg = function (svgCode, bindFunctions) { element.innerHTML = svgCode; if (typeof callback !== 'undefined') { callback(id); @@ -232,7 +232,7 @@ var insertSvg = function (svgCode, bindFunctions) { bindFunctions(element); }; -var id = 'theGraph'; +const id = 'theGraph'; mermaidAPI.render(id, txt, insertSvg, element); ``` @@ -248,7 +248,7 @@ mermaidAPI.render(id, txt, insertSvg, element); This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html. ```javascript -var renderer = new marked.Renderer(); +const renderer = new marked.Renderer(); renderer.code = function (code, language) { if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { return '
' + code + '
'; @@ -299,8 +299,8 @@ mermaid.parseError = function (err, hash) { displayErrorInGui(err); }; -var textFieldUpdated = function () { - var textStr = getTextFromFormField('code'); +const textFieldUpdated = function () { + const textStr = getTextFromFormField('code'); if (mermaid.parse(textStr)) { reRender(textStr); @@ -324,7 +324,7 @@ setting the options in mermaid. 4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated** The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of -configuration objects are described [in the mermaidAPI documentation](Setup.md). +configuration objects are described [in the mermaidAPI documentation](./setup/README.md). ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call @@ -339,7 +339,7 @@ on what kind of integration you use. ``` -```tip +```note This is the preferred way of configuring mermaid. ``` @@ -347,7 +347,7 @@ This is the preferred way of configuring mermaid. ## Using the mermaid object -Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this +It is possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: - mermaid.startOnLoad diff --git a/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md b/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md deleted file mode 100644 index cd6ab221bd..0000000000 --- a/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md +++ /dev/null @@ -1,645 +0,0 @@ ---- -sort: 3 -title: Flowchart ---- - -# Flowcharts - Basic Syntax - -## Graph - -This statement declares the direction of the flowchart, either from top to bottom (`TD` or `TB`): - -```mermaid-example -graph TD - Start --> Stop -``` - -or left to right (`LR`): - -```mermaid-example -graph 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 - -## Flowcharts - -This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs. - -Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts. - -> **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).\*\* - -## Nodes and shapes - -### A node (default) - -```mermaid-example -graph LR - id -``` - -> **Note** The id is what is displayed in the box. - -### A node with text - -It is also possible to set text in the box that differs from the id. If this is done several times, only the last text -found for the node will be rendered. Also if you define edges for the node later on, you can omit text definitions. The -text previously defined will be used when rendering the box. - -```mermaid-example -graph LR - id1[This is the text in the box] -``` - -## Node Shapes - -### A node with round edges - -```mermaid-example -graph LR - id1(This is the text in the box) -``` - -### A stadium-shaped node - -```mermaid-example -graph LR - id1([This is the text in the box]) -``` - -### A node in a subroutine shape - -```mermaid-example -graph LR - id1[[This is the text in the box]] -``` - -### A node in a cylindrical shape - -```mermaid-example -graph LR - id1[(Database)] -``` - -### A node in the form of a circle - -```mermaid-example -graph LR - id1((This is the text in the circle)) -``` - -### A node in an asymmetric shape - -```mermaid-example -graph LR - id1>This is the text in the box] -``` - -Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._ - -### A node (rhombus) - -```mermaid-example -graph LR - id1{This is the text in the box} -``` - -### A hexagonal node - -```mermaid-example -graph LR - id1{{This is the text in the box}} -``` - -### Parallelogram - -```mermaid-example -graph TD - id1[/This is the text in the box/] -``` - -### Parallelogram alt - -```mermaid-example -graph TD - id1[\This is the text in the box\] -``` - -### Trapezoid - -```mermaid-example -graph TD - A[/Christmas\] -``` - -### Trapezoid alt - -```mermaid-example -graph TD - B[\Go shopping/] -``` - -## Links between nodes - -Nodes can be connected with links/edges. It is possible to have different types of links, or attach a text string on a link. - -### Link with arrow head - -```mermaid-example -graph LR - A-->B -``` - -### Open link - -```mermaid-example -graph LR - A --- B -``` - -### Text on links - -```mermaid-example -graph LR - A-- This is the text! ---B -``` - -or - -```mermaid-example -graph LR - A---|This is the text|B -``` - -### Link with arrow head and text - -```mermaid-example -graph LR - A-->|text|B -``` - -or - -```mermaid-example -graph LR - A-- text -->B -``` - -### Dotted link - -```mermaid-example -graph LR; - A-.->B; -``` - -### Dotted link with text - -```mermaid-example -graph LR - A-. text .-> B -``` - -### Thick link - -```mermaid-example -graph LR - A ==> B -``` - -### Thick link with text - -```mermaid-example -graph LR - A == text ==> B -``` - -### Chaining of links - -It is possible to declare many links on the same line as per below: - -```mermaid-example -graph LR - A -- text --> B -- text2 --> C -``` - -It is also possible to declare multiple nodes links in the same line as per below: - -```mermaid-example -graph LR - a --> b & c--> d -``` - -You can then describe dependencies in a very expressive way. Like the one-liner below: - -```mermaid-example -graph TB - A & B--> C & D -``` - -If you describe the same diagram using the the basic syntax, it will take four lines: - -```mmd -graph TB - A --> C - A --> D - B --> C - B --> D -``` - -A word of warning, one could go overboard with this, making the graph harder to read in -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. - -### New arrow types - -When using flowchart instead of graph there are new types of arrows supported as per below: - -```mermaid-example -flowchart LR - A --o B - B --x C -``` - -### Multi directional arrows - -When using flowchart instead of graph there is the possibility to use multidirectional arrows. - -```mermaid-example -flowchart LR - A o--o B - B <--> C - C x--x D -``` - -### Minimum length of a link - -Each node in the flowchart is ultimately assigned to a rank in the rendered -graph, i.e. to a vertical or horizontal level (depending on the flowchart -orientation), based on the nodes to which it is linked. By default, links -can span any number of ranks, but you can ask for any link to be longer -than the others by adding extra dashes in the link definition. - -In the following example, two extra dashes are added in the link from node _B_ -to node _E_, so that it spans two more ranks than regular links: - -```mermaid-example -graph TD - A[Start] --> B{Is it?}; - B -->|Yes| C[OK]; - C --> D[Rethink]; - D --> B; - B ---->|No| E[End]; -``` - -> **Note** The rendering engine may cause some links to be longer than -> the number of ranks requested in order to accommodate the overall topology. - -When the link label is written in the middle of the link, the extra dashes must -be added on the right side of the link. The following example is equivalent to -the previous one: - -```mermaid-example -graph TD - A[Start] --> B{Is it?}; - B -- Yes --> C[OK]; - C --> D[Rethink]; - D --> B; - B -- No ----> E[End]; -``` - -For dotted or thick links, the characters to add are equals signs or dots, -as summed up in the following table: - -| Length | 1 | 2 | 3 | -| ----------------- | :----: | :-----: | :------: | -| Normal | `---` | `----` | `-----` | -| Normal with arrow | `-->` | `--->` | `---->` | -| Thick | `===` | `====` | `=====` | -| Thick with arrow | `==>` | `===>` | `====>` | -| Dotted | `-.-` | `-..-` | `-...-` | -| Dotted with arrow | `-.->` | `-..->` | `-...->` | - -## Special characters that break syntax - -Use quotes around text in order to render more troublesome characters, as in the example below: - -```mermaid-example -graph LR - id1["This is the (text) in the box"] -``` - -### Entity codes to escape characters - -Special characters (including Unicode) can be included by using HTML escaping syntax: - -```mermaid-example - graph LR - A["A double quote:#quot;"] -->B["A dec char:#9829;"] -``` - -## Subgraphs - -``` -subgraph title - graph definition -end -``` - -An example: - -```mermaid-example -graph TB - c1-->a2 - subgraph one - a1-->a2 - end - subgraph two - b1-->b2 - end - subgraph three - c1-->c2 - end -``` - -You can also set an explicit id for the subgraph: - -```mermaid-example -graph 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: - -```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 -``` - -## Interaction - -A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. - -``` -click nodeId callback -click nodeId call callback() -``` - -- nodeId is the id of the node -- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. - -```html - -``` - -Examples of tooltip usage: - -The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. - -```mermaid-example -graph LR; - 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" -``` - -> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. - -?> 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/). - -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): - -```mermaid-example -graph LR; - 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 -``` - -Beginner's tip—here's a full example of using interactive links in HTML: - -```html - - 
-    graph LR;
-        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"
-
- - - -``` - -### 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax. - -```mmd -graph LR -%% this is a comment A -- text --> B{node} - A -- text --> B -- text2 --> C -``` - -## Styling and classes - -### Styling links - -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 nodes, some other way of attaching style is required. -So instead of ids, the order number of when the link was defined in the graph is used, starting with zero. Here's a linkStyle statement that would apply style to the fourth link in the graph: - -``` -linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; -``` - -You can specify a `default` to apply to all links, or you can give a comma-separated list of link order numbers. - -Instead of giving a styles option, you can also use custom d3 curve types with the following syntax: - -``` -linkStyle default|numList|num interpolate curveType -``` - -If you want to add both D3 and style options, instead of writing: - -``` -linkStyle default interpolate cardinal -linkStyle default stroke:#ff3,stroke-width:4px,color:red; -``` - -You can combine them: - -``` -linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red; -``` - -### Styling a node - -It is possible to apply specific styles such as a thicker border or a different background color to a node. - -```mermaid-example -graph LR - 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 reference to multiple nodes. - -here's a class definition: - -``` - classDef className fill:#f9f,stroke:#333,stroke-width:4px; -``` - -and then attaching this class to a node is simply: - -``` - class nodeId1 className; -``` - -It is also possible to attach a class to multiple nodes in one statement: - -``` - class nodeId1,nodeId2 className; -``` - -An even shorter form of adding a class is to attach the classname to the node using the `:::`operator: - -```mermaid-example -graph LR - A:::someclass --> B - classDef someclass fill:#f96; -``` - -### Css classes - -It is also possible to predefine classes in css styles that can be applied from the graph definition: - -**Example style** - -```css -.cssClass > rect { - fill: #ff0000; - stroke: #ffff00; - stroke-width: 4px; -} -``` - -**Example definition** - -```mermaid-example -graph LR; - A-->B[AAABBB]; - B-->D; - class A cssClass; -``` - -### Default class - -If a class is named `default` it will be assigned to all nodes that do not have a specific class definition. - -``` - classDef default fill:#f9f,stroke:#333,stroke-width:4px; -``` - -## Basic support for fontawesome - -It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#. - -```mermaid-example -graph TD - B["fa:fa-twitter for peace"] - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); - B-->E(A fa:fa-camera-retro perhaps?); -``` - -## Graph declarations with spaces between vertices and link and without semicolon - -- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations. - -- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. - -Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges. - -```mermaid-example -graph LR - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -``` - -## Configuration... - -Is it 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 (which is described in the mermaidCLI page). -In Javascript config parameters can be set by using `mermaid.flowchartConfig`: - -```javascript -mermaid.flowchartConfig = { - width: '100%', -}; -``` diff --git a/packages/mermaid/src/docs/directives.md b/packages/mermaid/src/docs/directives.md deleted file mode 100644 index 47af50c310..0000000000 --- a/packages/mermaid/src/docs/directives.md +++ /dev/null @@ -1,255 +0,0 @@ -# Directives - -## Directives - -Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. - -The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level. - -While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives. - -## Types of Directives options - -Mermaid basically supports two types of configuration options to be overridden by directives. - -1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: - -- theme -- fontFamily -- logLevel -- securityLevel -- startOnLoad -- secure - -2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. - For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. - -**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. - -``` -Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs -``` - -## Declaring directives - -Now that we have defined the types of configurations that are available, we can learn how to declare directives. -A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`. - -Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section. - -Following code snippet shows the structure of a directive: - -``` -%%{ - init: { - "theme": "dark", - "fontFamily": "monospace", - "logLevel": "info", - "flowchart": { - "htmlLabels": true, - "curve": "linear" - }, - "sequence": { - "mirrorActors": true - } - } -}%% -``` - -You can also define the directives in a single line, like this: - -``` -%%{init: { **insert argument here**}}%% -``` - -For example, the following code snippet: - -``` -%%{init: { "sequence": { "mirrorActors":false }}}%% -``` - -**Notes:** -The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored. -Valid Key Value pairs can be found in config. - -Example with a simple graph: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% -graph LR -A-->B -``` - -Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself. - -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: - -```mmd2 -%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% -%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% -... -``` - -parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`: - -```json5 -{ - logLevel: 'fatal', - theme: 'dark', - startOnLoad: true, -} -``` - -This will then be sent to `mermaid.initialize(...)` for rendering. - -## Directive Examples - -More directive examples for diagram specific configuration overrides -Now that the concept of directives has been explained, Let us see some more examples for directives usage: - -### Changing Theme via directive - -The following code snippet changes theme to forest: - -`%%{init: { "theme": "forest" } }%%` - -Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`. -Default Value is `default`. - -Example: - -```mermaid-example -%%{init: { "theme": "forest" } }%% -graph TD -A(Forest) --> B[/Another/] -A --> C[End] - subgraph section - B - C - end - -``` - -### Changing fontFamily via directive - -The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif: - -`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%` - -Example: - -```mermaid-example -%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%% -graph TD -A(Forest) --> B[/Another/] -A --> C[End] - subgraph section - B - C - end - -``` - -### Changing logLevel via directive - -The following code snippet changes logLevel to 2: - -`%%{init: { "logLevel": 2 } }%%` - -Possible logLevel values are: - -- `1` for _debug_, -- `2` for _info_ -- `3` for _warn_ -- `4` for _error_ -- `5` for _only fatal errors_ - -Default Value is `5`. - -Example: - -```mermaid-example -%%{init: { "logLevel": 2 } }%% -graph TD -A(Forest) --> B[/Another/] -A --> C[End] - subgraph section - B - C - end -``` - -### Changing flowchart config via directive - -Some common flowchart configurations are: - -- _htmlLabels_: true/false -- _curve_: linear/curve -- _diagramPadding_: number -- _useMaxWidth_: number - -For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. -_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ - -The following code snippet changes flowchart config: - -`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%` - -Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear. - -```mermaid-example -%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% -graph TD -A(Forest) --> B[/Another/] -A --> C[End] - subgraph section - B - C - end -``` - -### Changing Sequence diagram config via directive - -Some common sequence configurations are: - -- _width_: number -- _height_: number -- _messageAlign_: left, center, right -- _mirrorActors_: boolean -- _useMaxWidth_: boolean -- _rightAngles_: boolean -- _showSequenceNumbers_: boolean -- _wrap_: boolean - -For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. -_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ - -So, `wrap` by default has a value of `false` for sequence diagrams. - -Let us see an example: - -```mermaid-example -sequenceDiagram - -Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? -Alice->Bob: Good. -Bob->Alice: Cool -``` - -Now let us enable wrap for sequence diagrams. - -The following code snippet changes sequence diagram config for `wrap` to `true`: - -`%%{init: { "sequence": { "wrap": true} } }%%` - -Using in the diagram above, the wrap will be enabled. - -```mermaid-example -%%{init: { "sequence": { "wrap": true, "width":300 } } }%% -sequenceDiagram -Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? -Alice->Bob: Good. -Bob->Alice: Cool -``` diff --git a/packages/mermaid/src/docs/entityRelationshipDiagram.md b/packages/mermaid/src/docs/entityRelationshipDiagram.md deleted file mode 100644 index 341c9147c4..0000000000 --- a/packages/mermaid/src/docs/entityRelationshipDiagram.md +++ /dev/null @@ -1,188 +0,0 @@ -# Entity Relationship Diagrams - -> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia. - -Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns. - -Mermaid can render ER diagrams - -```mermaid-example -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses -``` - -Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid. - -Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to. - -ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_. - -```mermaid-example -erDiagram - CUSTOMER ||--o{ ORDER : places - CUSTOMER { - string name - string custNumber - string sector - } - ORDER ||--|{ LINE-ITEM : contains - ORDER { - int orderNumber - string deliveryAddress - } - LINE-ITEM { - string productCode - int quantity - float pricePerUnit - } -``` - -When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice. - -## Syntax - -### Entities and Relationships - -Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts: - -``` - [ : ] -``` - -Where: - -- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. -- `relationship` describes the way that both entities inter-relate. See below. -- `second-entity` is the name of the other entity. -- `relationship-label` describes the relationship from the perspective of the first entity. - -For example: - -``` - PROPERTY ||--|{ ROOM : contains -``` - -This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous). - -Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory. - -### Relationship Syntax - -The `relationship` part of each statement can be broken down into three sub-components: - -- the cardinality of the first entity with respect to the second, -- whether the relationship confers identity on a 'child' entity -- the cardinality of the second entity with respect to the first - -Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities. - -| Value (left) | Value (right) | Meaning | -| :----------: | :-----------: | ----------------------------- | -| `\|o` | `o\|` | Zero or one | -| `\|\|` | `\|\|` | Exactly one | -| `}o` | `o{` | Zero or more (no upper limit) | -| `}\|` | `\|{` | One or more (no upper limit) | - -### Identification - -Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: - -```mmd -erDiagram - CAR ||--o{ NAMED-DRIVER : allows - PERSON ||--o{ NAMED-DRIVER : is -``` - -### Attributes - -Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example: - -```mermaid-example -erDiagram - CAR ||--o{ NAMED-DRIVER : allows - CAR { - string registrationNumber - string make - string model - } - PERSON ||--o{ NAMED-DRIVER : is - PERSON { - string firstName - string lastName - int age - } -``` - -The attributes are rendered inside the entity boxes: - -```mermaid-example -erDiagram - CAR ||--o{ NAMED-DRIVER : allows - CAR { - string registrationNumber - string make - string model - } - PERSON ||--o{ NAMED-DRIVER : is - PERSON { - string firstName - string lastName - int age - } -``` - -The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types. - -#### Attribute Keys and Comments - -Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them. - -```mermaid-example -erDiagram - CAR ||--o{ NAMED-DRIVER : allows - CAR { - string allowedDriver FK "The license of the allowed driver" - string registrationNumber - string make - string model - } - PERSON ||--o{ NAMED-DRIVER : is - PERSON { - string driversLicense PK "The license #" - string firstName - string lastName - int age - } -``` - -### Other Things - -- If you want the relationship label to be more than one word, you must use double quotes around the phrase -- If you don't want a label at all on a relationship, you must use an empty double-quoted string - -## Styling - -### Config options - -For simple color customization: - -| Name | Used as | -| :------- | :------------------------------------------------------------------- | -| `fill` | Background color of an entity or attribute | -| `stroke` | Border color of an entity or attribute, line color of a relationship | - -### Classes used - -The following CSS class selectors are available for richer styling: - -| Selector | Description | -| :------------------------- | :---------------------------------------------------- | -| `.er.attributeBoxEven` | The box containing attributes on even-numbered rows | -| `.er.attributeBoxOdd` | The box containing attributes on odd-numbered rows | -| `.er.entityBox` | The box representing an entity | -| `.er.entityLabel` | The label for an entity | -| `.er.relationshipLabel` | The label for a relationship | -| `.er.relationshipLabelBox` | The box surrounding a relationship label | -| `.er.relationshipLine` | The line representing a relationship between entities | diff --git a/packages/mermaid/src/docs/examples.md b/packages/mermaid/src/docs/examples.md deleted file mode 100644 index d22efc4076..0000000000 --- a/packages/mermaid/src/docs/examples.md +++ /dev/null @@ -1,158 +0,0 @@ -# Examples - -This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications. - -**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).** - -**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](/flowchart?id=flowcharts-basic-syntax) section.** - -## Basic Pie Chart - -```mermaid-example -pie title NETFLIX - "Time spent looking for movie" : 90 - "Time spent watching it" : 10 -``` - -```mermaid-example -pie title What Voldemort doesn't have? - "FRIENDS" : 2 - "FAMILY" : 3 - "NOSE" : 45 -``` - -## Basic sequence diagram - -```mermaid-example -sequenceDiagram - Alice ->> Bob: Hello Bob, how are you? - Bob-->>John: How about you John? - Bob--x Alice: I am good thanks! - Bob-x John: I am good thanks! - Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. - - Bob-->Alice: Checking with John... - Alice->John: Yes... John, how are you? -``` - -## Basic flowchart - -```mermaid-example -graph LR - A[Square Rect] -- Link text --> B((Circle)) - A --> C(Round Rect) - B --> D{Rhombus} - C --> D -``` - -## Larger flowchart with some styling - -```mermaid-example -graph TB - sq[Square shape] --> ci((Circle shape)) - - subgraph A - od>Odd shape]-- Two line
edge comment --> ro - di{Diamond with
line break} -.-> ro(Rounded
square
shape) - di==>ro2(Rounded square shape) - end - - %% Notice that no text in shape are added here instead that is appended further down - e --> od3>Really long text with linebreak
in an Odd shape] - - %% Comments after double percent signs - e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) - - cyr[Cyrillic]-->cyr2((Circle shape Начало)); - - classDef green fill:#9f6,stroke:#333,stroke-width:2px; - classDef orange fill:#f96,stroke:#333,stroke-width:4px; - class sq,e green - class di orange -``` - -## SequenceDiagram: Loops, alt and opt - -```mermaid-example -sequenceDiagram - loop Daily query - Alice->>Bob: Hello Bob, how are you? - alt is sick - Bob->>Alice: Not so good :( - else is well - Bob->>Alice: Feeling fresh like a daisy - end - - opt Extra response - Bob->>Alice: Thanks for asking - end - end -``` - -## SequenceDiagram: Message to self in loop - -```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! -``` - -## Sequence Diagram: Blogging app service communication - -```mermaid-example -sequenceDiagram - participant web as Web Browser - participant blog as Blog Service - participant account as Account Service - participant mail as Mail Service - participant db as Storage - - Note over web,db: The user must be logged in to submit blog posts - web->>+account: Logs in using credentials - account->>db: Query stored accounts - db->>account: Respond with query result - - alt Credentials not found - account->>web: Invalid credentials - else Credentials found - account->>-web: Successfully logged in - - Note over web,db: When the user is authenticated, they can now submit new posts - web->>+blog: Submit new post - blog->>db: Store post data - - par Notifications - blog--)mail: Send mail to blog subscribers - blog--)db: Store in-site notifications - and Response - blog-->>-web: Successfully posted - end - end - -``` - -## A commit flow diagram. - -```mermaid -gitGraph: - commit "Ashish" - branch newbranch - checkout newbranch - commit id:"1111" - commit tag:"test" - checkout main - commit type: HIGHLIGHT - commit - merge newbranch - commit - branch b2 - commit -``` diff --git a/packages/mermaid/src/docs/gantt.md b/packages/mermaid/src/docs/gantt.md deleted file mode 100644 index ad6573db66..0000000000 --- a/packages/mermaid/src/docs/gantt.md +++ /dev/null @@ -1,343 +0,0 @@ -# Gantt diagrams - -> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project. - -## A note to users - -Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed. - -It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task. -As shown here ![](./img/Gantt-excluded-days-within.png) - -However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. -As shown here ![](./img/Gantt-long-weekend-look.png) - -A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks. - -Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs. - -```mermaid-example -gantt - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - another task : 24d -``` - -## Syntax - -```mermaid-example -gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - excludes weekends - %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) - - 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 - - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - Functionality added :milestone, 2014-01-25, 0d - - section Documentation - Describe gantt syntax :active, a1, after des1, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :doc1, after a1 , 48h - - section Last section - Describe gantt syntax :after doc1, 3d - Add gantt diagram to demo page :20h - Add another diagram to demo page :48h -``` - -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 -``` - -### Title - -The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole. - -### Section statements - -You can divide the chart into various sections, for example to separate different parts of a project like development and documentation. - -To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_. - -### Milestones - -You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2. - -```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 -``` - -## Setting dates - -`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`. - -### Input date format - -The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`. - -``` -dateFormat YYYY-MM-DD -``` - -The following formatting options are supported: - -``` -Input Example Description: -YYYY 2014 4 digit year -YY 14 2 digit year -Q 1..4 Quarter of year. Sets month to first month in quarter. -M MM 1..12 Month number -MMM MMMM January..Dec Month name in locale set by moment.locale() -D DD 1..31 Day of month -Do 1st..31st Day of month with ordinal -DDD DDDD 1..365 Day of year -X 1410715640.579 Unix timestamp -x 1410715640579 Unix ms timestamp -H HH 0..23 24 hour time -h hh 1..12 12 hour time used with a A. -a A am pm Post or ante meridiem -m mm 0..59 Minutes -s ss 0..59 Seconds -S 0..9 Tenths of a second -SS 0..99 Hundreds of a second -SSS 0..999 Thousandths of a second -Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z -``` - -More info in: https://momentjs.com/docs/#/parsing/string-format/ - -### Output date format on the axis - -The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020. - -``` -axisFormat %Y-%m-%d -``` - -The following formatting strings are supported: - -``` -%a - abbreviated weekday name. -%A - full weekday name. -%b - abbreviated month name. -%B - full month name. -%c - date and time, as "%a %b %e %H:%M:%S %Y". -%d - zero-padded day of the month as a decimal number [01,31]. -%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d. -%H - hour (24-hour clock) as a decimal number [00,23]. -%I - hour (12-hour clock) as a decimal number [01,12]. -%j - day of the year as a decimal number [001,366]. -%m - month as a decimal number [01,12]. -%M - minute as a decimal number [00,59]. -%L - milliseconds as a decimal number [000, 999]. -%p - either AM or PM. -%S - second as a decimal number [00,61]. -%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. -%w - weekday as a decimal number [0(Sunday),6]. -%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53]. -%x - date, as "%m/%d/%Y". -%X - time, as "%H:%M:%S". -%y - year without century as a decimal number [00,99]. -%Y - year with century as a decimal number. -%Z - time zone offset, such as "-0700". -%% - a literal "%" character. -``` - -More info in: https://github.com/mbostock/d3/wiki/Time-Formatting - -## Comments - -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 -gantt - title A Gantt Diagram - %% this is a comment - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - another task : 24d - -``` - -## Styling - -Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/gantt.scss - -### Classes used - -| Class | Description | -| --------------------- | ---------------------------------------------------------------------- | -| grid.tick | Styling for the Grid Lines | -| grid.path | Styling for the Grid's borders | -| .taskText | Task Text Styling | -| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. | -| .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. | -| todayMarker | Toggle and Styling for the "Today Marker" | - -### Sample stylesheet - -```css -.grid .tick { - stroke: lightgrey; - opacity: 0.3; - shape-rendering: crispEdges; -} -.grid path { - stroke-width: 0; -} - -#tag { - color: white; - background: #fa283d; - width: 150px; - position: absolute; - display: none; - padding: 3px 6px; - margin-left: -80px; - font-size: 11px; -} - -#tag:before { - border: solid transparent; - content: ' '; - height: 0; - left: 50%; - margin-left: -5px; - position: absolute; - width: 0; - border-width: 10px; - border-bottom-color: #fa283d; - top: -20px; -} -.taskText { - fill: white; - text-anchor: middle; -} -.taskTextOutsideRight { - fill: black; - text-anchor: start; -} -.taskTextOutsideLeft { - fill: black; - text-anchor: end; -} -``` - -## Today marker - -You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key. - -``` -todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5 -``` - -To hide the marker, set `todayMarker` to `off`. - -``` -todayMarker off -``` - -## Configuration - -It is possible to adjust the margins for rendering the gantt diagram. - -This is done by defining the `ganttConfig` part of the configuration object. -How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page. - -mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object. - -```javascript -mermaid.ganttConfig = { - titleTopMargin: 25, - barHeight: 20, - barGap: 4, - topPadding: 75, - sidePadding: 75, -}; -``` - -### Possible configuration params: - -| Param | Description | Default value | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -| mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false | -| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 | - -## Interaction - -It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. - -``` -click taskId call callback(arguments) -click taskId href URL -``` - -- taskId is the id of the task -- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified. - -Beginner's tip—a full example using interactive links in an html context: - -```html - - 
-    gantt
-      dateFormat  YYYY-MM-DD
-
-      section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
-      Print arguments         :cl2, after cl1, 3d
-      Print task              :cl3, after cl2, 3d
-
-      click cl1 href "https://mermaidjs.github.io/"
-      click cl2 call printArguments("test1", "test2", test3)
-      click cl3 call printTask()
-
- - - -``` diff --git a/packages/mermaid/src/docs/gitgraph.md b/packages/mermaid/src/docs/gitgraph.md deleted file mode 100644 index f82b88ca1c..0000000000 --- a/packages/mermaid/src/docs/gitgraph.md +++ /dev/null @@ -1,1016 +0,0 @@ -# Gitgraph Diagrams - -> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. - -These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works. - -Mermaid can render Git diagrams - -```mermaid-example - gitGraph - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit -``` - -In Mermaid, we support the basic git operations like: - -- _commit_ : Representing a new commit on the current branch. -- _branch_ : To create & switch to a new branch, setting it as the current branch. -- _checkout_ : To checking out an existing branch and setting it as the current branch. -- _merge_ : To merge an existing branch onto the current branch. - -With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. -Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. - -## Syntax - -Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command. - -First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly. - -Each gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**. - -You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works: - -A simple gitgraph showing three commits on the default (**_main_**) branch: - -```mermaid-example - gitGraph - commit - commit - commit -``` - -If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid. - -### Adding custom commit id - -For a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within a `""` quote. For example: `commit id: "your_custom_id"` - -Let us see how this works with the help of the following diagram: - -```mermaid-example - gitGraph - commit id: "Alpha" - commit id: "Beta" - commit id: "Gamma" -``` - -In this example, we have given our custom IDs to the commits. - -### Modifying commit type - -In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are: - -- `NORMAL` : Default commit type. Represented by a solid circle in the diagram -- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. -- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. - -For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT` - -NOTE: If no commit type is specified, `NORMAL` is picked as default. - -Let us see how these different commit type look with the help of the following diagram: - -```mermaid-example - gitGraph - commit id: "Normal" - commit - commit id: "Reverse" type: REVERSE - commit - commit id: "Highlight" type: HIGHLIGHT - commit -``` - -In this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits. - -### Adding Tags - -For a given commit you may decorate it as a **tag**, similar to the concept of tags or release version in git world. -You can attach a custom tag at the time of declaring a commit using the `tag` attribute, followed by `:` and your custom value within `""` quote. For example: `commit tag: "your_custom_tag"` - -Let us see how this works with the help of the following diagram: - -```mermaid-example - gitGraph - commit - commit id: "Normal" tag: "v1.0.0" - commit - commit id: "Reverse" type: REVERSE tag: "RC_1" - commit - commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" - commit -``` - -In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like. - -### Create a new branch - -In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop` - -When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world. - -Let see this in an example: - -```mermaid-example - gitGraph - commit - commit - branch develop - commit - commit - commit -``` - -In this example, see how we started with default `main` branch, and pushed two commits on that. -Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch. - -### Checking out an existing branch - -In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop` - -When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world. - -Let see modify our previous example: - -```mermaid-example - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit -``` - -In this example, see how we started with default `main` branch, and pushed two commits on that. -Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. -After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`. - -### Merging two branches - -In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw. - -Usage example: `merge develop` - -When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**. - -Let us modify our previous example to merge our two branches: - -```mermaid-example - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit - merge develop - commit - commit -``` - -In this example, see how we started with default `main` branch, and pushed two commits on that. -Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. -After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`. -After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. -Since the current branch at this point is still `main`, the last two commits are registered against that. - -You can also decorate your merge with similar attributes as you did for the commit using: - -- `id`--> To override the default ID with custom ID -- `tag`--> To add a custom tag to your merge commit -- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. - -And you can choose to use none, some or all of these attributes together. -For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE` - -Let us see how this works with the help of the following diagram: - -```mermaid-example - gitGraph - commit id: "1" - commit id: "2" - branch nice_feature - checkout nice_feature - commit id: "3" - checkout main - commit id: "4" - checkout nice_feature - branch very_nice_feature - checkout very_nice_feature - commit id: "5" - checkout main - commit id: "6" - checkout nice_feature - commit id: "7" - checkout main - merge nice_feature id: "customID" tag: "customTag" type: REVERSE - checkout very_nice_feature - commit id: "8" - checkout main - commit id: "9" -``` - -### Cherry Pick commit from another branch - -Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword. - -To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example: - -`cherry-pick id: "your_custom_id"` - -Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from. - -A few important rules to note here are: - -1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above. -2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch. -3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw. - -Let see an example: - -```mermaid-example - gitGraph - commit id: "ZERO" - branch develop - commit id:"A" - checkout main - commit id:"ONE" - checkout develop - commit id:"B" - checkout main - commit id:"TWO" - cherry-pick id:"A" - commit id:"THREE" - checkout develop - commit id:"C" -``` - -## Gitgraph specific configuration options - -In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: - -- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. -- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. -- `mainBranchName` : String, default is `main`. The name of the default/root branch. -- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. - -Let's look at them one by one. - -## Hiding Branch names and lines - -Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives. - -Usage example: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%% - gitGraph - commit - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" tag:"abc" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -## Commit labels Layout: Rotated or Horizontal - -Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels. - -The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels. - -You can change the layout of the commit labels by using the `rotateCommitLabel` keyword in the directive. It defaults to `true`, which means the commit labels are rotated. - -Usage example: Rotated commit labels - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%% -gitGraph - commit id: "feat(api): ..." - commit id: "a" - commit id: "b" - commit id: "fix(client): .extra long label.." - branch c2 - commit id: "feat(modules): ..." - commit id: "test(client): ..." - checkout main - commit id: "fix(api): ..." - commit id: "ci: ..." - branch b1 - commit - branch b2 - commit -``` - -Usage example: Horizontal commit labels - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%% -gitGraph - commit id: "feat(api): ..." - commit id: "a" - commit id: "b" - commit id: "fix(client): .extra long label.." - branch c2 - commit id: "feat(modules): ..." - commit id: "test(client): ..." - checkout main - commit id: "fix(api): ..." - commit id: "ci: ..." - branch b1 - commit - branch b2 - commit -``` - -## Hiding commit labels - -Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives. - -Usage example: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%% - gitGraph - commit - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -## Customizing main branch name - -Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives. - -Usage example: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%% - gitGraph - commit id:"NewYork" - commit id:"Dallas" - branch MetroLine2 - commit id:"LosAngeles" - commit id:"Chicago" - commit id:"Houston" - branch MetroLine3 - commit id:"Phoenix" - commit type: HIGHLIGHT id:"Denver" - commit id:"Boston" - checkout MetroLine1 - commit id:"Atlanta" - merge MetroLine3 - commit id:"Miami" - commit id:"Washington" - merge MetroLine2 tag:"MY JUNCTION" - commit id:"Boston" - commit id:"Detroit" - commit type:REVERSE id:"SanFrancisco" -``` - -Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`. - -## Customizing branch ordering - -In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code. - -Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number. - -Mermaid follows the given precedence order of the `order` keyword. - -- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) -- Next, All branches without an `order` are shown in the order of their appearance in the diagram code. -- Next, All branches with an `order` are shown in the order of their `order` value. - -To fully control the order of all the branches, you must define `order` for all the branches. - -Usage example: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%% - gitGraph - commit - branch test1 order: 3 - branch test2 order: 2 - branch test3 order: 1 - -``` - -Look at the diagram, all the branches are following the order defined. - -Usage example: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%% - gitGraph - commit - branch test1 order: 3 - branch test2 - branch test3 - branch test4 order: 1 - -``` - -Look at the diagram, here, all the branches without a specified order are drawn in their order of definition. -Then, `test4` branch is drawn because the order of `1`. -Then, `main` branch is drawn because the order of `2`. -And, lastly `test1`is drawn because the order of `3`. - -NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering. - -Here, we have changed the default main branch name to `MetroLine1`. - -## Themes - -Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md). - -The following are the different pre-defined theme options: - -- `base` -- `forest` -- `dark` -- `default` -- `neutral` - -**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md) -Let's put them to use, and see how our sample diagram looks in different themes: - -### Base Theme - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%% - gitGraph - commit - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" tag:"abc" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -### Forest Theme - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% - gitGraph - commit - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" tag:"abc" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -### Default Theme - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% - gitGraph - commit type:HIGHLIGHT - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" tag:"abc" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -### Dark Theme - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% - gitGraph - commit - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" tag:"abc" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -### Neutral Theme - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% - gitGraph - commit - branch hotfix - checkout hotfix - commit - branch develop - checkout develop - commit id:"ash" tag:"abc" - branch featureB - checkout featureB - commit type:HIGHLIGHT - checkout main - checkout hotfix - commit type:NORMAL - checkout develop - commit type:REVERSE - checkout featureB - commit - checkout main - merge hotfix - checkout featureB - commit - checkout develop - branch featureA - commit - checkout develop - merge hotfix - checkout featureA - commit - checkout featureB - commit - checkout develop - merge featureA - branch release - checkout release - commit - checkout main - commit - checkout release - merge main - checkout develop - merge release -``` - -## Customize using Theme Variables - -Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram. - -For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables. - -See how the default theme is used to set the colors for the branches: - -```mermaid-example -%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit -``` - -> #### IMPORTANT: -> -> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'. -> _More on this in the next section. See examples on **Customizing branch label colors** below_ - -### Customizing branch colors - -You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on. - -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: - -Now let's override the default values for the `git0` to `git3` variables: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'git0': '#ff0000', - 'git1': '#00ff00', - 'git2': '#0000ff', - 'git3': '#ff00ff', - 'git4': '#00ffff', - 'git5': '#ffff00', - 'git6': '#ff00ff', - 'git7': '#00ffff' - } } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit - -``` - -See how the branch colors are changed to the values specified in the theme variables. - -### Customizing branch label colors - -You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on. - -Lets see how the default theme is used to set the colors for the branch labels: - -Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'gitBranchLabel0': '#ffffff', - 'gitBranchLabel1': '#ffffff', - 'gitBranchLabel2': '#ffffff', - 'gitBranchLabel3': '#ffffff', - 'gitBranchLabel4': '#ffffff', - 'gitBranchLabel5': '#ffffff', - 'gitBranchLabel6': '#ffffff', - 'gitBranchLabel7': '#ffffff', - 'gitBranchLabel8': '#ffffff', - 'gitBranchLabel9': '#ffffff' - } } }%% - gitGraph - checkout main - branch branch1 - branch branch2 - branch branch3 - branch branch4 - branch branch5 - branch branch6 - branch branch7 - branch branch8 - branch branch9 - checkout branch1 - commit -``` - -Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**. - -### Customizing Commit colors - -You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively. - -Example: -Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'commitLabelColor': '#ff0000', - 'commitLabelBackground': '#00ff00' - } } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit - -``` - -See how the commit label color and background color are changed to the values specified in the theme variables. - -### Customizing Commit Label Font Size - -You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label . - -Example: -Now let's override the default values for the `commitLabelFontSize` variable: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'commitLabelColor': '#ff0000', - 'commitLabelBackground': '#00ff00', - 'commitLabelFontSize': '16px' - } } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit - -``` - -See how the commit label font size changed. - -### Customizing Tag Label Font Size - -You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label . - -Example: -Now let's override the default values for the `tagLabelFontSize` variable: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'commitLabelColor': '#ff0000', - 'commitLabelBackground': '#00ff00', - 'tagLabelFontSize': '16px' - } } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit - -``` - -See how the tag label font size changed. - -### Customizing Tag colors - -You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively. -Example: -Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'tagLabelColor': '#ff0000', - 'tagLabelBackground': '#00ff00', - 'tagLabelBorder': '#0000ff' - } } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit - -``` - -See how the tag colors are changed to the values specified in the theme variables. - -### Customizing Highlight commit colors - -You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on. - -Example: - -Now let's override the default values for the `git0` to `git3` variables: - -```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'gitInv0': '#ff0000' - } } }%% - gitGraph - commit - branch develop - commit tag:"v1.0.0" - commit - checkout main - commit type: HIGHLIGHT - commit - merge develop - commit - branch featureA - commit - -``` - -See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`. diff --git a/packages/mermaid/src/docs/img/Configuration.png b/packages/mermaid/src/docs/img/Configuration.png deleted file mode 100644 index 60a808f2c3..0000000000 Binary files a/packages/mermaid/src/docs/img/Configuration.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/Editing-process.png b/packages/mermaid/src/docs/img/Editing-process.png deleted file mode 100644 index a49b352248..0000000000 Binary files a/packages/mermaid/src/docs/img/Editing-process.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/EditingHistory+Links.png b/packages/mermaid/src/docs/img/EditingHistory+Links.png deleted file mode 100644 index 3891f39c16..0000000000 Binary files a/packages/mermaid/src/docs/img/EditingHistory+Links.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/GitHub-Mark-32px.png b/packages/mermaid/src/docs/img/GitHub-Mark-32px.png deleted file mode 100644 index 790fa77108..0000000000 Binary files a/packages/mermaid/src/docs/img/GitHub-Mark-32px.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/Live-Editor-Usage.png b/packages/mermaid/src/docs/img/Live-Editor-Usage.png deleted file mode 100644 index 04df642dc7..0000000000 Binary files a/packages/mermaid/src/docs/img/Live-Editor-Usage.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/book-banner-post-release.jpeg b/packages/mermaid/src/docs/img/book-banner-post-release.jpeg deleted file mode 100644 index 005a3282b6..0000000000 Binary files a/packages/mermaid/src/docs/img/book-banner-post-release.jpeg and /dev/null differ diff --git a/packages/mermaid/src/docs/img/book-banner-post-release.png b/packages/mermaid/src/docs/img/book-banner-post-release.png deleted file mode 100644 index 7db35ea7aa..0000000000 Binary files a/packages/mermaid/src/docs/img/book-banner-post-release.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/book-banner-pre-release.jpg b/packages/mermaid/src/docs/img/book-banner-pre-release.jpg deleted file mode 100644 index 6dc996fd91..0000000000 Binary files a/packages/mermaid/src/docs/img/book-banner-pre-release.jpg and /dev/null differ diff --git a/packages/mermaid/src/docs/img/book-banner-pre-release.png b/packages/mermaid/src/docs/img/book-banner-pre-release.png deleted file mode 100644 index b85b165db0..0000000000 Binary files a/packages/mermaid/src/docs/img/book-banner-pre-release.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/class.png b/packages/mermaid/src/docs/img/class.png deleted file mode 100644 index fde265f63b..0000000000 Binary files a/packages/mermaid/src/docs/img/class.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/flow.png b/packages/mermaid/src/docs/img/flow.png deleted file mode 100644 index 37537c18f9..0000000000 Binary files a/packages/mermaid/src/docs/img/flow.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/gantt.png b/packages/mermaid/src/docs/img/gantt.png deleted file mode 100644 index 304b598b8c..0000000000 Binary files a/packages/mermaid/src/docs/img/gantt.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/git.png b/packages/mermaid/src/docs/img/git.png deleted file mode 100644 index 2da331a1ed..0000000000 Binary files a/packages/mermaid/src/docs/img/git.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/n00b-firstFlow.png b/packages/mermaid/src/docs/img/n00b-firstFlow.png deleted file mode 100644 index 5d3c7738d5..0000000000 Binary files a/packages/mermaid/src/docs/img/n00b-firstFlow.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/new-diagrams.png b/packages/mermaid/src/docs/img/new-diagrams.png deleted file mode 100644 index bd9c8c97ab..0000000000 Binary files a/packages/mermaid/src/docs/img/new-diagrams.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/sequence.png b/packages/mermaid/src/docs/img/sequence.png deleted file mode 100644 index f37d523f8d..0000000000 Binary files a/packages/mermaid/src/docs/img/sequence.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/simple-er.png b/packages/mermaid/src/docs/img/simple-er.png deleted file mode 100644 index 6ebf413526..0000000000 Binary files a/packages/mermaid/src/docs/img/simple-er.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/user-journey.png b/packages/mermaid/src/docs/img/user-journey.png deleted file mode 100644 index 825d467d85..0000000000 Binary files a/packages/mermaid/src/docs/img/user-journey.png and /dev/null differ diff --git a/packages/mermaid/src/docs/img/without wrap.png b/packages/mermaid/src/docs/img/without wrap.png deleted file mode 100644 index 038408d2ba..0000000000 Binary files a/packages/mermaid/src/docs/img/without wrap.png and /dev/null differ diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html deleted file mode 100644 index 81eeafb2a9..0000000000 --- a/packages/mermaid/src/docs/index.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - - mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, - gantt charts and git graphs. - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md new file mode 100644 index 0000000000..6c27639044 --- /dev/null +++ b/packages/mermaid/src/docs/index.md @@ -0,0 +1,184 @@ +--- +layout: home + +title: Mermaid +titleTemplate: Diagramming and charting tool + +hero: + name: Mermaid + text: Diagramming and charting tool + tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. + image: + src: /mermaid-logo.svg + alt: Mermaid + actions: + - theme: brand + text: Get Started + link: /intro/ + - theme: alt + text: View on GitHub + link: https://github.com/mermaid-js/mermaid + +features: + - title: ➕ Easy to use! + details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor. + - title: 🎥 Video Tutorials! + details: Has video tutorials for beginners and advanced users. + - title: 🏆 Award winner! + details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! + - title: 🧩 Integrations available! + details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid. +--- + + + +
+

Meet The Team

+ +
+ + diff --git a/packages/mermaid/src/docs/intro/examples.md b/packages/mermaid/src/docs/intro/examples.md new file mode 100644 index 0000000000..f4cb3b9294 --- /dev/null +++ b/packages/mermaid/src/docs/intro/examples.md @@ -0,0 +1,100 @@ +## Diagram Types + +### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax) + +```mermaid-example +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! +``` + +### [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 +``` + +### [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 +``` + +### [Git graph](../syntax/gitgraph.md) + +```mermaid-example + 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 + +``` + +### [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 +``` diff --git a/packages/mermaid/src/docs/img/Code-Preview-Config.png b/packages/mermaid/src/docs/intro/img/Code-Preview-Config.png similarity index 100% rename from packages/mermaid/src/docs/img/Code-Preview-Config.png rename to packages/mermaid/src/docs/intro/img/Code-Preview-Config.png diff --git a/packages/mermaid/src/docs/img/Live-Editor-Choices.png b/packages/mermaid/src/docs/intro/img/Live-Editor-Choices.png similarity index 100% rename from packages/mermaid/src/docs/img/Live-Editor-Choices.png rename to packages/mermaid/src/docs/intro/img/Live-Editor-Choices.png diff --git a/packages/mermaid/src/docs/img/book-banner-post-release.jpg b/packages/mermaid/src/docs/intro/img/book-banner-post-release.jpg similarity index 100% rename from packages/mermaid/src/docs/img/book-banner-post-release.jpg rename to packages/mermaid/src/docs/intro/img/book-banner-post-release.jpg diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/intro/index.md similarity index 72% rename from packages/mermaid/src/docs/README.md rename to packages/mermaid/src/docs/intro/index.md index b0435479f5..df1aa3b621 100644 --- a/packages/mermaid/src/docs/README.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -4,11 +4,11 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. -> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md). +> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference.md). - + -[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) @@ -25,12 +25,12 @@ But not having diagrams or docs ruins productivity and hurts organizational lear Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).

Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).
-[Tutorials](./Tutorials.md) has video tutorials. -Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md). +[Tutorials](../config/Tutorials.md) has video tutorials. +Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md). -For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md). +For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md). -🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md) +🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../misc/integrations.md) > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). @@ -44,124 +44,13 @@ In our release process we rely heavily on visual regression tests using [applito -## Diagram Types - -### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax) - -```mmd -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -![Flowchart](img/flow.png) - -### [Sequence diagram](./sequenceDiagram.md) - -```mmd -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! -``` - -![Sequence diagram](img/sequence.png) - -### [Gantt diagram](./gantt.md) - -```mmd -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 -``` - -![Gantt diagram](img/gantt.png) - -### [Class diagram](./classDiagram.md) - -```mmd -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 -``` - -![Class diagram](img/class.png) - -### Git graph - -```mermaid-example - gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit -``` - -### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) - -```mmd -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -![ER diagram](img/simple-er.png) - -### [User Journey Diagram](./user-journey.md) - -```mmd -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 -``` - -![Journey diagram](img/user-journey.png) + ## Installation -**In depth guides and examples can be found at [Getting Started](/n00b-gettingStarted) and [Usage](/usage).** +**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).** -**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).** +**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).** ### CDN @@ -180,12 +69,12 @@ Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/brow To Deploy Mermaid: 1. You will need to install node v16, which would have npm -2. Download yarn using npm -3. Enter the following command: `yarn add mermaid` -4. You can then add mermaid as a dev dependency using this command: - `yarn add --dev mermaid` +2. Install mermaid + - NPM: `npm i mermaid` + - Yarn: `yarn add mermaid` + - Pnpm: `pnpm add mermaid` -### [Mermaid API](./Setup.md): +### [Mermaid API](../config/setup/README.md): **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:** @@ -198,7 +87,7 @@ To Deploy Mermaid: **Doing so will command the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
-**Examples can be found at** [Other examples](/examples)
+**Examples can be found at** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 
@@ -224,22 +113,26 @@ Don't hesitate to contact me if you want to get involved!
 
 ## For contributors
 
-### Setup
+### Requirements
 
-```sh
-yarn install
-```
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
 
-### Build
+## Development Installation
 
-```sh
-yarn build:watch
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+# npx is required for first install as volta support for pnpm is not added yet.
+npx pnpm install
+pnpm test
 ```
 
 ### Lint
 
 ```sh
-yarn lint
+pnpm lint
 ```
 
 We use [eslint](https://eslint.org/).
@@ -248,7 +141,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
 ### Test
 
 ```sh
-yarn test
+pnpm test
 ```
 
 Manual test in browser: open `dist/index.html`
@@ -275,7 +168,7 @@ The above command generates files into the `dist` folder and publishes them to <
 
 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
 
-Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
+Detailed information about how to contribute can be found in the [contribution guide](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 
 ## Security and safe diagrams
 
@@ -293,10 +186,33 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
 
 A quick note from Knut Sveidqvist:
 
-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
+>
+> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
+>
+> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
 > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 
 _Mermaid was created by Knut Sveidqvist for easier documentation._
+
+
diff --git a/vdocs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
similarity index 91%
rename from vdocs/intro/n00b-gettingStarted.md
rename to packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index b5abe96d67..a4dd7662f2 100644
--- a/vdocs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -2,7 +2,7 @@
 
 Mermaid is composed of three parts: Deployment, Syntax and Configuration.
 
-This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) would be of great help to the beginner.
+This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
 
 > Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
 
@@ -17,7 +17,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
 
 **Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
 
-> More in depth information can be found at [Usage](../config/usage).
+> More in depth information can be found at [Usage](../config/usage.md).
 
 ## 1. Using the Live Editor
 
@@ -36,7 +36,7 @@ graph TD
 
 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
 
-The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/Setup) page.
+The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
 
 ![Code,Config and Preview](./img/Code-Preview-Config.png)
 
@@ -68,9 +68,9 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/
 
 ## 2. Using Mermaid Plugins:
 
-You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations).
+You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations.md).
 
-**This is covered in greater detail in the [Usage section](../config/usage)**
+**This is covered in greater detail in the [Usage section](../config/usage.md)**
 
 ## 3. Calling the JavaScript API
 
@@ -111,7 +111,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```html
 
   
 
@@ -126,6 +126,10 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
+### Adding external diagrams to mermaid
+
+Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**
@@ -151,7 +155,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
@@ -180,7 +184,7 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, B --> D[Server2] diff --git a/vdocs/intro/n00b-syntaxReference.md b/packages/mermaid/src/docs/intro/n00b-syntaxReference.md similarity index 65% rename from vdocs/intro/n00b-syntaxReference.md rename to packages/mermaid/src/docs/intro/n00b-syntaxReference.md index 8434ec6c1e..8e8c18a4d8 100644 --- a/vdocs/intro/n00b-syntaxReference.md +++ b/packages/mermaid/src/docs/intro/n00b-syntaxReference.md @@ -4,7 +4,7 @@ Mermaid's syntax is used to create diagrams. You'll find that it is not too tric Syntax, together with Deployment and Configuration constitute the whole of Mermaid. -Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area. +Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live), it is also a great practice area. ## Syntax Structure @@ -30,27 +30,27 @@ The [Getting Started](./n00b-gettingStarted.md) section can also provide some pr One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated. -| Diagram Breakers | Reason | Solution | -| -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------- | -| **Comments** | | | -| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". | -| **Flow-Charts** | | | -| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. | -| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking | +| Diagram Breakers | Reason | Solution | +| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- | +| **Comments** | | | +| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". | +| **Flow-Charts** | | | +| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. | +| [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking | ### Mermaid Live Editor -Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor). +Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid.live). # Configuration Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. -If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/Setup) here. It includes themes. +If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes. This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. -### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor). +### Configuration Section in the [Live Editor](https://mermaid.live). Here you can edit certain values to change the behavior and appearance of the diagram. @@ -58,10 +58,10 @@ Here you can edit certain values to change the behavior and appearance of the di Used when Mermaid is called via an API, or through a ` - - - - - - -
-
- -
-
-
-

MermaidPress

-

- The Official Guide to Mermaid.js -

-

- Learn to create complex diagrams and beautiful flowcharts easily using text and code - using Mermaid.js. -

- - - -
-
-
- -
- -
-
-
-
- - - - - - - - - - - - -
-
-
-

- Get up to speed with using Mermaid diagrams along with real-world examples and expert tips - from the authors to facilitate a seamless development workflow -

-
-
-
-
-
-

- Flowcharts is a diagram type that visualizes a process or an algorithm by showing the - steps in order, as well as the different paths the execution can take. -

-
-
- -
-
-
-
- -
-
-
-

- Sequence diagrams lets you model and visualize interactions between different actors - or objects in a system, as well as the order of those interactions -

-
-
-
-
-
-

- A class diagram is a graphical representation that is used to visualize and describe - an object-oriented system. -

-
-
- -
-
-
-
- -
-
-
-

- An entity-relationship diagram is a graphical representation that is used to - visualize the different types of entities that exist within a system. -

-
-
-
-
-
-

- Use State diagrams to model and document state machines, an abstract way of - representing a system or an algorithm. -

-
-
- -
-
-
-
- -
-
-
-

- A Gantt chart is a graphical representation that is used to visualize and describe - tasks (events or activities) over time. -

-
-
-
-
-

- These were a few of the diagrams supported by Mermaid. -

-
- -
-
-

- Book description -

-
-

- Mermaid lets you represent diagrams using text and code which simplifies the maintenance - of complex diagrams. This is a great option for developers as they’re more familiar with - code, rather than special tools for generating diagrams. Besides, diagrams in code - simplify maintenance and ensure that the code is supported by version control systems. - In some cases, Mermaid makes refactoring support for name changes possible while also - enabling team collaboration for review distribution and updates. -

-

- Developers working with any system will be able to put their knowledge to work with this - practical guide to using Mermaid for documentation. The book is also a great reference - for looking up the syntax for specific diagrams when authoring diagrams. -

-

- You’ll start by getting up to speed with the importance of accurate and visual - documentation. Next, the book introduces Mermaid and establishes how to use it to create - effective documentation. By using different tools, editors, or a custom documentation - platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later - chapters cover advanced configuration settings and theme options to manipulate your - diagram as per your needs. -

-

- By the end of this Mermaid book, you’ll have become well-versed with the different types - of Mermaid diagrams and how they can be used in your workflows. -

-
-
-
-
-
-

- What you will learn -

-
-
-
-
-
-
-
    -
  • - Understand good and bad documentation, and the art of effective documentation -
    • -
  • - Become well-versed with maintaining complex diagrams with ease -
    • -
  • - Learn how to set up a custom documentation system -
    • -
  • - Learn how to implement Mermaid diagrams in your workflows -
    • -
  • - Understand how to set up themes for a Mermaid diagram for an entire site -
    • -
  • - Discover how to draw different types of diagrams such as flowcharts, class - diagrams, Gantt charts, and more -
    • -
-
-
-
-
-
- - - - - - - - - - - - - - - - - -
-

- Purchase The Official Guide to Mermaid.js -

-
-
-
-

-

Written by Knut Sveidqvist and Ashish Jain.

-

- Knut is the creator of Mermaid and both authors are active core team members of the - Mermaid open-source project. -

-

- - - -
- - - diff --git a/packages/mermaid/src/docs/landing/sequence-diagram.png b/packages/mermaid/src/docs/landing/sequence-diagram.png deleted file mode 100644 index 8c51ac1c5d..0000000000 Binary files a/packages/mermaid/src/docs/landing/sequence-diagram.png and /dev/null differ diff --git a/packages/mermaid/src/docs/landing/state.png b/packages/mermaid/src/docs/landing/state.png deleted file mode 100644 index 2ef66ea2f1..0000000000 Binary files a/packages/mermaid/src/docs/landing/state.png and /dev/null differ diff --git a/packages/mermaid/src/docs/faq.md b/packages/mermaid/src/docs/misc/faq.md similarity index 100% rename from packages/mermaid/src/docs/faq.md rename to packages/mermaid/src/docs/misc/faq.md diff --git a/vdocs/misc/integrations.md b/packages/mermaid/src/docs/misc/integrations.md similarity index 96% rename from vdocs/misc/integrations.md rename to packages/mermaid/src/docs/misc/integrations.md index 4147059a03..06d09634ff 100644 --- a/vdocs/misc/integrations.md +++ b/packages/mermaid/src/docs/misc/integrations.md @@ -17,6 +17,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Joplin](https://joplinapp.org) (**Native support**) - [Notion](https://notion.so) (**Native support**) - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) +- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**) - [GitBook](https://gitbook.com) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) @@ -30,8 +31,9 @@ They also serve as proof of concept, for the variety of things that can be built - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) - [mermerd](https://github.com/KarnerTh/mermerd) +- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) ## CRM/ERP/Similar @@ -114,6 +116,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) - [Vim](https://www.vim.org) + - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid) - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) - [GNU Emacs](https://www.gnu.org/software/emacs/) - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode) @@ -160,7 +163,6 @@ They also serve as proof of concept, for the variety of things that can be built | Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | | Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | | Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | -| Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - | | Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | | Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md deleted file mode 100644 index 398541eb1d..0000000000 --- a/packages/mermaid/src/docs/n00b-gettingStarted.md +++ /dev/null @@ -1,202 +0,0 @@ -# A Mermaid User-Guide for Beginners - -Mermaid is composed of three parts: Deployment, Syntax and Configuration. - -This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) would be of great help to the beginner. - -> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning. - -**Absolute beginners are advised to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.** - -## Four ways of using mermaid: - -1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live). -2. Using [mermaid plugins](./integrations.md) with programs you are familiar with. -3. Calling the Mermaid JavaScript API. -4. Deploying Mermaid as a dependency. - -**Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.** - -> More in depth information can be found at [Usage](./usage.md). - -## 1. Using the Live Editor - -Available at [mermaid.live](https://mermaid.live) - -![EditingProcess](./img/Editing-process.png) - -In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it. - -The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](Setup.md) page. - -![Code,Config and Preview](./img/Code-Preview-Config.png) - -### Editing History - -Your code will be autosaved every minute into the Timeline tab of History which shows the most recent 30 items. - -You can manually save code by clicking the Save icon in the History section. It can also be accessed in the Saved tab. This is stored in the browser storage only. - -### Saving a Diagram: - -You may choose any of the methods below, to save it - -**We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.** - -![Flowchart](./img/Live-Editor-Choices.png) - -### Editing your diagrams - -Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`. - -### Loading from Gists - -The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a) - -To load a gist into the Editor, you can use https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a - -and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a - -## 2. Using Mermaid Plugins: - -You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md). - -**This is covered in greater detail in the [Usage section](usage.md)** - -## 3. Calling the JavaScript API - -This method can be used with any common web server like Apache, IIS, nginx, node express. - -You will also need a text editing tool like Notepad++ to generate a .html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer). - -The API works by pulling rendering instructions from the source `mermaid.js` in order to render diagrams on the page. - -### Requirements for the Mermaid API. - -When writing the .html file, we give two instructions inside the html code to the web browser: - -a. The mermaid code for the diagram we want to create. - -b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process . - -**a. The embedded mermaid diagram definition inside a `
`:**
-
-```html
-
-  Here is a mermaid diagram:
-  
-        graph TD 
-        A[Client] --> B[Load Balancer] 
-        B --> C[Server01] 
-        B --> D[Server02]
-  

-
-```
-
-**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `
` tags.
-
-**b. The import of mermaid and the `mermaid.initialize()` call.**
-
-`mermaid.initialize()` call takes all the definitions contained in all the `
` tags that it finds in the html body and renders them into diagrams. Example:
-
-```html
-
-  
-
-```
-
-**Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.min.js` for brevity. However, doing the opposite lets you control when it starts looking for `
`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `
` tags may have loaded on the execution of `mermaid.min.js` file.
-
-`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
-
-| Parameter   | Description                       | Type    | Values      |
-| ----------- | --------------------------------- | ------- | ----------- |
-| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
-
-### Adding external diagrams to mermaid
-
-Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
-
-### Working Examples
-
-**Here is a full working example of the mermaidAPI being called through the CDN:**
-
-```html
-
-  
-    Here is one mermaid diagram:
-    
-            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
-            B --> D[Server2]
-    

-
-    And here is another:
-    
-            graph TD 
-            A[Client] -->|tcp_123| B
-            B(Load Balancer) 
-            B -->|tcp_456| C[Server1] 
-            B -->|tcp_456| D[Server2]
-    

-
-    
-  
-
-```
-
-**Another Option:**
-In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path.
-
-```html
-
-  
-    
-  
-  
-    
-            graph LR 
-            A --- B 
-            B-->C[fa:fa-ban forbidden] 
-            B-->D(fa:fa-spinner);
-    

-    
-            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
-            B --> D[Server2]
-    

-    
-  
-
-```
-
----
-
-## 4. Adding Mermaid as a dependency.
-
-1. install node v16, which would have npm
-
-2. download yarn using npm by entering the command below:
-   npm install -g yarn
-
-3. After yarn installs, enter the following command:
-   yarn add mermaid
-
-4. To add Mermaid as a Dev Dependency
-   yarn add --dev mermaid
-
-**Comments from Knut Sveidqvist, creator of mermaid:**
-
-- In early versions of mermaid, the `
-```
-
-It can also be be turned on via the diagram code as in the diagram:
-
-```mermaid-example
-sequenceDiagram
-    autonumber
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-## Actor Menus
-
-Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
-
-This can be configured by adding one or more link lines with the format:
-
-```
-link :  @ 
-```
-
-```mmd
-sequenceDiagram
-    participant Alice
-    participant John
-    link Alice: Dashboard @ https://dashboard.contoso.com/alice
-    link Alice: Wiki @ https://wiki.contoso.com/alice
-    link John: Dashboard @ https://dashboard.contoso.com/john
-    link John: Wiki @ https://wiki.contoso.com/john
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-#### Advanced Menu Syntax
-
-There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
-
-This can be configured by adding the links lines with the format:
-
-```
-links : 
-```
-
-An example is below:
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant John
-    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
-    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-## Styling
-
-Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
-
-### Classes used
-
-| 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-line   | The vertical line for an actor.                             |
-| messageLine0 | Styles for the solid message line.                          |
-| messageLine1 | Styles for the dotted message line.                         |
-| messageText  | Defines styles for the text on the message arrows.          |
-| labelBox     | Defines styles label to left in a loop.                     |
-| labelText    | Styles for the text in label for loops.                     |
-| loopText     | Styles for the text in the loop box.                        |
-| loopLine     | Defines styles for the lines in the loop box.               |
-| note         | Styles for the note box.                                    |
-| noteText     | Styles for the text on in the note boxes.                   |
-
-### Sample stylesheet
-
-```css
-body {
-  background: white;
-}
-
-.actor {
-  stroke: #ccccff;
-  fill: #ececff;
-}
-text.actor {
-  fill: black;
-  stroke: none;
-  font-family: Helvetica;
-}
-
-.actor-line {
-  stroke: grey;
-}
-
-.messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: '2 2';
-  marker-end: 'url(#arrowhead)';
-  stroke: black;
-}
-
-.messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: '2 2';
-  stroke: black;
-}
-
-#arrowhead {
-  fill: black;
-}
-
-.messageText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-
-.labelBox {
-  stroke: #ccccff;
-  fill: #ececff;
-}
-
-.labelText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopLine {
-  stroke-width: 2;
-  stroke-dasharray: '2 2';
-  marker-end: 'url(#arrowhead)';
-  stroke: #ccccff;
-}
-
-.note {
-  stroke: #decc93;
-  fill: #fff5ad;
-}
-
-.noteText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-```
-
-## Configuration
-
-Is it possible to adjust the margins for rendering the sequence diagram.
-
-This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
-`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
-
-```javascript
-mermaid.sequenceConfig = {
-  diagramMarginX: 50,
-  diagramMarginY: 10,
-  boxTextMargin: 5,
-  noteMargin: 10,
-  messageMargin: 35,
-  mirrorActors: true,
-};
-```
-
-### Possible configuration parameters:
-
-| Parameter         | Description                                                                                                                                | Default value                  |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
-| bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
-| actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif        |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif        |
-| noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
-| noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
-| noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
-| noteAlign         | Sets the text alignment for text in actor-attached notes                                                                                   | center                         |
-| messageFontSize   | Sets the font size for actor<->actor messages                                                                                              | 16                             |
-| messageFontFamily | Sets the font family for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |
-| messageFontWeight | Sets the font weight for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |
diff --git a/packages/mermaid/src/docs/stateDiagram.md b/packages/mermaid/src/docs/stateDiagram.md
deleted file mode 100644
index e28819e7a2..0000000000
--- a/packages/mermaid/src/docs/stateDiagram.md
+++ /dev/null
@@ -1,260 +0,0 @@
-# State diagrams
-
-> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
-
-Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-Older renderer:
-
-```mermaid-example
-stateDiagram
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
-
-## States
-
-A state can be declared in multiple ways. The simplest way is to define a state id as a description.
-
-```mermaid-example
-stateDiagram-v2
-    s1
-```
-
-Another way is by using the state keyword with a description as per below:
-
-```mermaid-example
-stateDiagram-v2
-    state "This is a state description" as s2
-```
-
-Another way to define a state with a description is to define the state id followed by a colon and the description:
-
-```mermaid-example
-stateDiagram-v2
-    s2 : This is a state description
-```
-
-## Transitions
-
-Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
-
-When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
-
-```mermaid-example
-stateDiagram-v2
-    s1 --> s2
-```
-
-It is possible to add text to a transition. To describe what it represents.
-
-```mermaid-example
-stateDiagram-v2
-    s1 --> s2: A transition
-```
-
-## Start and End
-
-There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> s1
-    s1 --> [*]
-```
-
-## Composite states
-
-In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
-have several internal states. These are called composite states in this terminology.
-
-In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below:
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-```
-
-You can do this in several layers:
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> First
-
-    state First {
-        [*] --> Second
-
-        state Second {
-            [*] --> second
-            second --> Third
-
-            state Third {
-                [*] --> third
-                third --> [*]
-            }
-        }
-    }
-```
-
-You can also define transitions also between composite states:
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> First
-    First --> Second
-    First --> Third
-
-    state First {
-        [*] --> fir
-        fir --> [*]
-    }
-    state Second {
-        [*] --> sec
-        sec --> [*]
-    }
-    state Third {
-        [*] --> thi
-        thi --> [*]
-    }
-```
-
-_You can not define transitions between internal states belonging to different composite states_
-
-## Choice
-
-Sometimes you need to model a choice between two or more paths, you can do so using <<choice>>.
-
-```mermaid-example
-stateDiagram-v2
-    state if_state <>
-    [*] --> IsPositive
-    IsPositive --> if_state
-    if_state --> False: if n < 0
-    if_state --> True : if n >= 0
-```
-
-## Forks
-
-It is possible to specify a fork in the diagram using <<fork>> <<join>>.
-
-```mermaid-example
-   stateDiagram-v2
-    state fork_state <>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-```
-
-## Notes
-
-Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
-
-Here you can choose to put the note to the _right of_ or to the _left of_ a node.
-
-```mermaid-example
-    stateDiagram-v2
-        State1: The state with a note
-        note right of State1
-            Important information! You can write
-            notes.
-        end note
-        State1 --> State2
-        note left of State2 : This is the note to the left.
-```
-
-## Concurrency
-
-As in plantUml you can specify concurrency using the -- symbol.
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> Active
-
-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
-        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
-    }
-```
-
-## Setting the direction of the diagram
-
-With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
-
-```mermaid-example
-stateDiagram
-    direction LR
-    [*] --> A
-    A --> B
-    B --> C
-    state B {
-      direction LR
-      a --> b
-    }
-    B --> D
-```
-
-## Comments
-
-Comments can be entered within a state diagram 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
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-%% this is a comment
-    Still --> Moving
-    Moving --> Still %% another comment
-    Moving --> Crash
-    Crash --> [*]
-```
-
-## Styling
-
-Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
-
-## Spaces in state names
-
-Spaces can be added to a state by defining it at the top and referencing the acronym later.
-
-```mermaid-example
-stateDiagram-v2
-    Yswsii: Your state with spaces in it
-    [*] --> Yswsii
-```
diff --git a/packages/mermaid/src/docs/c4c.md b/packages/mermaid/src/docs/syntax/c4c.md
similarity index 99%
rename from packages/mermaid/src/docs/c4c.md
rename to packages/mermaid/src/docs/syntax/c4c.md
index f9850f2cd3..78528f7b99 100644
--- a/packages/mermaid/src/docs/c4c.md
+++ b/packages/mermaid/src/docs/syntax/c4c.md
@@ -318,7 +318,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
         Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
     }
 
-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
         Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
 Apple Safari or Microsoft Edge"){
             Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
         }
diff --git a/packages/mermaid/src/docs/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
similarity index 95%
rename from packages/mermaid/src/docs/classDiagram.md
rename to packages/mermaid/src/docs/syntax/classDiagram.md
index 362e90bc6c..a0f4e56111 100644
--- a/packages/mermaid/src/docs/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -1,15 +1,21 @@
 # Class diagrams
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
-> Wikipedia
+>
+> -Wikipedia
 
 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
 
 Mermaid can render class diagrams.
 
 ```mermaid-example
+---
+title: Animal example
+---
 classDiagram
+    note "From Duck till Zebra"
     Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -43,6 +49,9 @@ A single instance of a class in the diagram contains three compartments:
 - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
 
 ```mermaid-example
+---
+title: Bank example
+---
 classDiagram
     class BankAccount
     BankAccount : +String owner
@@ -164,16 +173,16 @@ A relationship is a general term covering the specific types of logical connecti
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
-| Type  | Description   |
-| ----- | ------------- |
-| <\|-- | Inheritance   |
-| \*--  | Composition   |
-| o--   | Aggregation   |
-| -->   | Association   |
-| --    | Link (Solid)  |
-| ..>   | Dependency    |
-| ..\|> | Realization   |
-| ..    | Link (Dashed) |
+| Type    | Description   |
+| ------- | ------------- |
+| `<\|--` | Inheritance   |
+| `\*--`  | Composition   |
+| `o--`   | Aggregation   |
+| `-->`   | Association   |
+| `--`    | Link (Solid)  |
+| `..>`   | Dependency    |
+| `..\|>` | Realization   |
+| `..`    | Link (Dashed) |
 
 ```mermaid-example
 classDiagram
@@ -235,14 +244,14 @@ Here is the syntax:
 
 Where `Relation Type` can be one of:
 
-| Type | Description |
-| ---- | ----------- |
-| <\|  | Inheritance |
-| \*   | Composition |
-| o    | Aggregation |
-| >    | Association |
-| <    | Association |
-| \|>  | Realization |
+| Type  | Description |
+| ----- | ----------- |
+| `<\|` | Inheritance |
+| `\*`  | Composition |
+| `o`   | Aggregation |
+| `>`   | Association |
+| `<`   | Association |
+| `\|>` | Realization |
 
 And `Link` can be one of:
 
@@ -375,6 +384,10 @@ click className href "url" "tooltip"
 - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
 - note: callback function will be called with the nodeId as parameter.
 
+## Notes
+
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+
 ### Examples
 
 _URL Link:_
@@ -622,4 +635,4 @@ g.classGroup line {
 
 ## Configuration
 
-`Coming soon`
+`Coming soon!`
diff --git a/vdocs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
similarity index 91%
rename from vdocs/syntax/entityRelationshipDiagram.md
rename to packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
index 341c9147c4..c666877c5f 100644
--- a/vdocs/syntax/entityRelationshipDiagram.md
+++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -7,6 +7,9 @@ Note that practitioners of ER modelling almost always refer to _entity types_ si
 Mermaid can render ER diagrams
 
 ```mermaid-example
+---
+title: Order example
+---
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
@@ -85,10 +88,34 @@ Cardinality is a property that describes how many elements of another entity can
 |     `}o`     |     `o{`      | Zero or more (no upper limit) |
 |    `}\|`     |     `\|{`     | One or more (no upper limit)  |
 
+**Aliases**
+
+| Value (left) | Value (right) | Alias for    |
+| :----------: | :-----------: | ------------ |
+| one or zero  |  one or zero  | Zero or one  |
+| zero or one  |  zero or one  | Zero or one  |
+| one or more  |  one or more  | One or more  |
+| one or many  |  one or many  | One or more  |
+|   many(1)    |    many(1)    | One or more  |
+|      1+      |      1+       | One or more  |
+| zero or more | zero or more  | Zero or more |
+| zero or many | zero or many  | Zero or more |
+|   many(0)    |    many(1)    | Zero or more |
+|      0+      |      0+       | Zero or more |
+|   only one   |   only one    | Exactly one  |
+|      1       |       1       | Exactly one  |
+
 ### Identification
 
 Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
+**Aliases**
+
+|     Value     |     Alias for     |
+| :-----------: | :---------------: |
+|      to       |   _identifying_   |
+| optionally to | _non-identifying_ |
+
 ```mmd
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
@@ -155,6 +182,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ### Other Things
diff --git a/vdocs/syntax/examples.md b/packages/mermaid/src/docs/syntax/examples.md
similarity index 96%
rename from vdocs/syntax/examples.md
rename to packages/mermaid/src/docs/syntax/examples.md
index 45fb06de38..d5f98093b7 100644
--- a/vdocs/syntax/examples.md
+++ b/packages/mermaid/src/docs/syntax/examples.md
@@ -2,9 +2,9 @@
 
 This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
 
-**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage?id=usage).**
+**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).**
 
-**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart?id=flowcharts-basic-syntax) section.**
+**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**
 
 ## Basic Pie Chart
 
diff --git a/packages/mermaid/src/docs/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
similarity index 95%
rename from packages/mermaid/src/docs/flowchart.md
rename to packages/mermaid/src/docs/syntax/flowchart.md
index edeabb6518..7f8284a2fb 100644
--- a/packages/mermaid/src/docs/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -4,11 +4,14 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
 
 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).\*\*
+> **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).
 
 ### A node (default)
 
 ```mermaid-example
+---
+title: Node
+---
 flowchart LR
     id
 ```
@@ -22,6 +25,9 @@ found for the node that will be used. Also if you define edges for the node late
 one previously defined will be used when rendering the box.
 
 ```mermaid-example
+---
+title: Node with text
+---
 flowchart LR
     id1[This is the text in the box]
 ```
@@ -109,7 +115,16 @@ flowchart LR
 
 ### A hexagon node
 
-```mermaid-example
+Code:
+
+```mmd
+flowchart LR
+    id1{{This is the text in the box}}
+```
+
+Render:
+
+```mermaid
 flowchart LR
     id1{{This is the text in the box}}
 ```
@@ -167,15 +182,6 @@ flowchart LR
     A --- B
 ```
 
-### An invisisble link
-
-This can be a usefull tool in some instances where you want to alter the default positining of a node.
-
-```mermaid-example
-flowchart LR
-    A ~~~ B
-```
-
 ### Text on links
 
 ```mermaid-example
@@ -207,7 +213,7 @@ flowchart LR
 ### Dotted link
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
    A-.->B;
 ```
 
@@ -433,8 +439,6 @@ flowchart LR
   B1 --> B2
 ```
 
-**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
-
 ## Interaction
 
 It is possible to bind a click event to a node, 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'`.
@@ -596,7 +600,7 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ### Css classes
@@ -619,7 +623,7 @@ below:
 **Example definition**
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
     A-->B[AAABBB]
     B-->D
     class A cssClass
@@ -643,7 +647,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
@@ -667,7 +671,7 @@ flowchart LR
 
 ## Configuration...
 
-Is it possible to adjust the width of the rendered flowchart.
+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.
diff --git a/vdocs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
similarity index 93%
rename from vdocs/syntax/gantt.md
rename to packages/mermaid/src/docs/syntax/gantt.md
index 755f50b1e1..c9301bfeee 100644
--- a/vdocs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -137,7 +137,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/
 
 ### Output date format on the axis
 
-The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
+The default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
 
 ```
 axisFormat  %Y-%m-%d
@@ -172,7 +172,23 @@ The following formatting strings are supported:
 %% - a literal "%" character.
 ```
 
-More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
+More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format)
+
+### Axis ticks
+
+The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
+
+```
+tickInterval 1day
+```
+
+The pattern is:
+
+```
+/^([1-9][0-9]*)(minute|hour|day|week|month)$/
+```
+
+More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)
 
 ## Comments
 
@@ -194,7 +210,7 @@ gantt
 
 ## Styling
 
-Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/gantt.scss
+Styling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js
 
 ### Classes used
 
@@ -275,7 +291,7 @@ todayMarker off
 It is possible to adjust the margins for rendering the gantt diagram.
 
 This is done by defining the `ganttConfig` part of the configuration object.
-How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
+How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
 
 mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
 
diff --git a/vdocs/syntax/gitGraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
similarity index 99%
rename from vdocs/syntax/gitGraph.md
rename to packages/mermaid/src/docs/syntax/gitgraph.md
index adfaabf40c..f1930bb275 100644
--- a/vdocs/syntax/gitGraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -7,17 +7,20 @@ These kind of diagram are particularly helpful to developers and devops teams to
 Mermaid can render Git diagrams
 
 ```mermaid-example
-    gitGraph
-       commit
-       commit
-       branch develop
-       checkout develop
-       commit
-       commit
-       checkout main
-       merge develop
-       commit
-       commit
+---
+title: Example Git diagram
+---
+gitGraph
+   commit
+   commit
+   branch develop
+   checkout develop
+   commit
+   commit
+   checkout main
+   merge develop
+   commit
+   commit
 ```
 
 In Mermaid, we support the basic git operations like:
@@ -114,7 +117,7 @@ In this example, we have given custom tags to the commits. Also, see how we have
 
 ### Create a new branch
 
-In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
+In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `""`. Usage examples: `branch develop`, `branch "cherry-pick"`
 
 When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
 
diff --git a/packages/mermaid/src/docs/img/Gantt-excluded-days-within.png b/packages/mermaid/src/docs/syntax/img/Gantt-excluded-days-within.png
similarity index 100%
rename from packages/mermaid/src/docs/img/Gantt-excluded-days-within.png
rename to packages/mermaid/src/docs/syntax/img/Gantt-excluded-days-within.png
diff --git a/packages/mermaid/src/docs/img/Gantt-long-weekend-look.png b/packages/mermaid/src/docs/syntax/img/Gantt-long-weekend-look.png
similarity index 100%
rename from packages/mermaid/src/docs/img/Gantt-long-weekend-look.png
rename to packages/mermaid/src/docs/syntax/img/Gantt-long-weekend-look.png
diff --git a/packages/mermaid/src/docs/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
similarity index 86%
rename from packages/mermaid/src/docs/mindmap.md
rename to packages/mermaid/src/docs/syntax/mindmap.md
index 2b47e3e198..beaae7ad56 100644
--- a/packages/mermaid/src/docs/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -15,7 +15,7 @@ mindmap
       Popularisation
         British popular psychology author Tony Buzan
     Research
-      On effectivness
and eatures
+      On effectiveness
and features
       On Automatic creation
         Uses
             Creative techniques
@@ -24,13 +24,14 @@ mindmap
     Tools
       Pen and paper
       Mermaid
+
 ```
 
 ## Syntax
 
 The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
 
-In the following example you can see how there are 3 different levels of indentation. The leftmost indentation is the root of the mindmap. There can only be one root and if you by misstake add two of them on the same level there will be a syntax error. Rows with larger indentation will be connected as children to the previous row with lower indentation. Based on that you can see in the example how the nodes B and C both are children to node A whci in turn is a child of the node Root.
+In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.
 
 ```
 mindmap
@@ -40,7 +41,7 @@ mindmap
             C
 ```
 
-In the diagram below you can see the example rendered as a mindmap.
+In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
 
 ```mermaid
 mindmap
@@ -93,6 +94,13 @@ mindmap
     id)I am a cloud(
 ```
 
+### Hexagon
+
+```mermaid-example
+mindmap
+    id{{I am a hexagon}}
+```
+
 ### Default
 
 ```mermaid-example
@@ -144,7 +152,7 @@ mindmap
           C
 ```
 
-This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Mermaid will rely on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
+This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
 
 ```mermaid
 mindmap
diff --git a/packages/mermaid/src/docs/pie.md b/packages/mermaid/src/docs/syntax/pie.md
similarity index 89%
rename from packages/mermaid/src/docs/pie.md
rename to packages/mermaid/src/docs/syntax/pie.md
index b7dcd7aa53..2fe8c3e544 100644
--- a/packages/mermaid/src/docs/pie.md
+++ b/packages/mermaid/src/docs/syntax/pie.md
@@ -19,10 +19,10 @@ Drawing a pie chart is really simple in mermaid.
 - Start with `pie` keyword to begin the diagram
   - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
-- Followed by dataSet
+- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
-  - Followed by `positive numeric value` (supported upto two decimal places)
+  - Followed by `positive numeric value` (supported up to two decimal places)
 
 [pie] [showData] (OPTIONAL)
 [title] [titlevalue] (OPTIONAL)
diff --git a/packages/mermaid/src/docs/requirementDiagram.md b/packages/mermaid/src/docs/syntax/requirementDiagram.md
similarity index 100%
rename from packages/mermaid/src/docs/requirementDiagram.md
rename to packages/mermaid/src/docs/syntax/requirementDiagram.md
diff --git a/vdocs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
similarity index 99%
rename from vdocs/syntax/sequenceDiagram.md
rename to packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 079eaa4d58..9c28883c96 100644
--- a/vdocs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -11,11 +11,11 @@ sequenceDiagram
     Alice-)John: See you later!
 ```
 
-::: warning
+```note
 A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
 
 If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
-:::
+```
 
 ## Syntax
 
@@ -534,10 +534,10 @@ text.actor {
 
 ## Configuration
 
-Is it possible to adjust the margins for rendering the sequence diagram.
+It is possible to adjust the margins for rendering the sequence diagram.
 
 This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
+How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
 `mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
 
 ```javascript
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
new file mode 100644
index 0000000000..29e355a72b
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -0,0 +1,412 @@
+# State diagrams
+
+> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
+> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the
+> case, while at other times this is a reasonable abstraction." Wikipedia
+
+Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make
+it easier for users to share diagrams between mermaid and plantUml.
+
+```mermaid-example
+---
+title: Simple sample
+---
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+Older renderer:
+
+```mermaid-example
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
+a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
+**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
+the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
+
+## States
+
+A state can be declared in multiple ways. The simplest way is to define a state with just an id:
+
+```mermaid-example
+stateDiagram-v2
+    stateId
+```
+
+Another way is by using the state keyword with a description as per below:
+
+```mermaid-example
+stateDiagram-v2
+    state "This is a state description" as s2
+```
+
+Another way to define a state with a description is to define the state id followed by a colon and the description:
+
+```mermaid-example
+stateDiagram-v2
+    s2 : This is a state description
+```
+
+## Transitions
+
+Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
+
+When you define a transition between two states and the states are not already defined, the undefined states are defined
+with the id from the transition. You can later add descriptions to states defined this way.
+
+```mermaid-example
+stateDiagram-v2
+    s1 --> s2
+```
+
+It is possible to add text to a transition to describe what it represents:
+
+```mermaid-example
+stateDiagram-v2
+    s1 --> s2: A transition
+```
+
+## Start and End
+
+There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and
+the direction of the transition to it defines it either as a start or a stop state.
+
+```mermaid-example
+stateDiagram-v2
+    [*] --> s1
+    s1 --> [*]
+```
+
+## Composite states
+
+In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can
+have several internal states. These are called composite states in this terminology.
+
+In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
+state between \{\}. See the example below:
+
+```mermaid-example
+stateDiagram-v2
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+```
+
+You can do this in several layers:
+
+```mermaid-example
+stateDiagram-v2
+    [*] --> First
+
+    state First {
+        [*] --> Second
+
+        state Second {
+            [*] --> second
+            second --> Third
+
+            state Third {
+                [*] --> third
+                third --> [*]
+            }
+        }
+    }
+```
+
+You can also define transitions also between composite states:
+
+```mermaid-example
+stateDiagram-v2
+    [*] --> First
+    First --> Second
+    First --> Third
+
+    state First {
+        [*] --> fir
+        fir --> [*]
+    }
+    state Second {
+        [*] --> sec
+        sec --> [*]
+    }
+    state Third {
+        [*] --> thi
+        thi --> [*]
+    }
+```
+
+_You can not define transitions between internal states belonging to different composite states_
+
+## Choice
+
+Sometimes you need to model a choice between two or more paths, you can do so using <<choice>>.
+
+```mermaid-example
+stateDiagram-v2
+    state if_state <>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+```
+
+## Forks
+
+It is possible to specify a fork in the diagram using <<fork>> <<join>>.
+
+```mermaid-example
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+```
+
+## Notes
+
+Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams.
+
+Here you can choose to put the note to the _right of_ or to the _left of_ a node.
+
+```mermaid-example
+    stateDiagram-v2
+        State1: The state with a note
+        note right of State1
+            Important information! You can write
+            notes.
+        end note
+        State1 --> State2
+        note left of State2 : This is the note to the left.
+```
+
+## Concurrency
+
+As in plantUml you can specify concurrency using the -- symbol.
+
+```mermaid-example
+stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+```
+
+## Setting the direction of the diagram
+
+With state diagrams you can use the direction statement to set the direction which the diagram will render like in this
+example.
+
+```mermaid-example
+stateDiagram
+    direction LR
+    [*] --> A
+    A --> B
+    B --> C
+    state B {
+      direction LR
+      a --> b
+    }
+    B --> D
+```
+
+## Comments
+
+Comments can be entered within a state diagram 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
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+%% this is a comment
+    Still --> Moving
+    Moving --> Still %% another comment
+    Moving --> Crash
+    Crash --> [*]
+```
+
+## Styling with classDefs
+
+As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a
+state or states in the diagram.
+
+**These are the current limitations with state diagram classDefs:**
+
+1. Cannot be applied to start or end states
+2. Cannot be applied to or within composite states
+
+_These are in development and will be available in a future version._
+
+You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
+like a _CSS class_)
+followed by _a name for the style,_
+and then one or more _property-value pairs_. Each _property-value pair_ is
+a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._
+
+Here is an example of a classDef with just one property-value pair:
+
+```
+    classDef movement font-style:italic;
+```
+
+where
+
+- the _name_ of the style is `movement`
+- the only _property_ is `font-style` and its _value_ is `italic`
+
+If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._
+
+Here is an example with three property-value pairs:
+
+```
+    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
+
+where
+
+- the _name_ of the style is `badBadEvent`
+- the first _property_ is `fill` and its _value_ is `#f00`
+- 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`
+
+### Apply classDef styles to states
+
+There are two ways to apply a `classDef` style to a state:
+
+1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
+2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
+   to/from another state)
+
+#### 1. `class` statement
+
+A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
+
+```text
+    class [one or more state names, separated by commas] [name of a style defined with classDef]
+```
+
+Here is an example applying the `badBadEvent` style to a state named `Crash`:
+
+```text
+class Crash badBadEvent
+```
+
+Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
+
+```text
+class Moving, Crash movement
+```
+
+Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
+and `badBadEvent`
+
+```mermaid-example
+   stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white
+   classDef movement font-style:italic
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*]--> Still
+   Still --> [*]
+   Still --> Moving
+   Moving --> Still
+   Moving --> Crash
+   Crash --> [*]
+
+   class Still notMoving
+   class Moving, Crash movement
+   class Crash badBadEvent
+   class end badBadEvent
+```
+
+#### 2. `:::` operator to apply a style to a state
+
+You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
+
+```text
+[state]:::[style name]
+```
+
+You can use this in a diagram within a statement using a class. This includes the start and end states. For example:
+
+```mermaid-example
+stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white
+   classDef movement font-style:italic;
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*] --> Still:::notMoving
+   Still --> [*]
+   Still --> Moving:::movement
+   Moving --> Still
+   Moving --> Crash:::movement
+   Crash:::badBadEvent --> [*]
+```
+
+## Spaces in state names
+
+Spaces can be added to a state by first defining the state with an id and then referencing the id later.
+
+In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
+After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
+and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).  
+(**yswsii** has been styled so that it is different from the other states.)
+
+```mermaid-example
+stateDiagram
+    classDef yourState font-style:italic,font-weight:bold,fill:white
+
+    yswsii: Your state with spaces in it
+    [*] --> yswsii:::yourState
+    [*] --> SomeOtherState
+    SomeOtherState --> YetAnotherState
+    yswsii --> YetAnotherState
+    YetAnotherState --> [*]
+```
diff --git a/vdocs/syntax/userJourney.md b/packages/mermaid/src/docs/syntax/userJourney.md
similarity index 100%
rename from vdocs/syntax/userJourney.md
rename to packages/mermaid/src/docs/syntax/userJourney.md
diff --git a/packages/mermaid/src/docs/theme.css b/packages/mermaid/src/docs/theme.css
deleted file mode 100644
index 28dbc0ab51..0000000000
--- a/packages/mermaid/src/docs/theme.css
+++ /dev/null
@@ -1,827 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
-* {
-  -webkit-font-smoothing: antialiased;
-  -webkit-overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-text-size-adjust: none;
-  -webkit-touch-callout: none;
-  box-sizing: border-box;
-}
-
-body:not(.ready) {
-  overflow: hidden;
-}
-body:not(.ready) .app-nav,
-body:not(.ready) > nav,
-body:not(.ready) [data-cloak] {
-  display: none;
-}
-div#app {
-  font-size: 30px;
-  font-weight: lighter;
-  margin: 40vh auto;
-  text-align: center;
-}
-div#app:empty:before {
-  content: 'Loading...';
-}
-.emoji {
-  height: 1.2rem;
-  vertical-align: middle;
-}
-.progress {
-  background-color: var(--theme-color, #42b983);
-  height: 2px;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition: width 0.2s, opacity 0.4s;
-  width: 0;
-  z-index: 999999;
-}
-.search .search-keyword,
-.search a:hover {
-  color: var(--theme-color, #42b983);
-}
-.search .search-keyword {
-  font-style: normal;
-  font-weight: 700;
-}
-body,
-html {
-  height: 100%;
-}
-body {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  color: #34495e;
-  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
-  font-size: 15px;
-  letter-spacing: 0;
-  margin: 0;
-  overflow-x: hidden;
-}
-img {
-  max-width: 100%;
-}
-a[disabled] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-kbd {
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  display: inline-block;
-  font-size: 12px !important;
-  line-height: 12px;
-  margin-bottom: 3px;
-  padding: 3px 5px;
-  vertical-align: middle;
-}
-li input[type='checkbox'] {
-  margin: 0 0.2em 0.25em 0;
-  vertical-align: middle;
-}
-.app-nav {
-  margin: 25px 60px 0 0;
-  position: absolute;
-  right: 0;
-  text-align: right;
-  z-index: 10;
-}
-.app-nav.no-badge {
-  margin-right: 25px;
-}
-.app-nav p {
-  margin: 0;
-}
-.app-nav > a {
-  margin: 0 1rem;
-  padding: 5px 0;
-}
-.app-nav li,
-.app-nav ul {
-  display: inline-block;
-  list-style: none;
-  margin: 0;
-}
-.app-nav a {
-  color: inherit;
-  font-size: 16px;
-  text-decoration: none;
-  transition: color 0.3s;
-}
-.app-nav a.active,
-.app-nav a:hover {
-  color: var(--theme-color, #42b983);
-}
-.app-nav a.active {
-  border-bottom: 2px solid var(--theme-color, #42b983);
-}
-.app-nav li {
-  display: inline-block;
-  margin: 0 1rem;
-  padding: 5px 0;
-  position: relative;
-  cursor: pointer;
-}
-.app-nav li ul {
-  background-color: #fff;
-  border: 1px solid;
-  border-color: #ddd #ddd #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-  display: none;
-  max-height: calc(100vh - 61px);
-  overflow-y: auto;
-  padding: 10px 0;
-  position: absolute;
-  right: -15px;
-  text-align: left;
-  top: 100%;
-  white-space: nowrap;
-}
-.app-nav li ul li {
-  display: block;
-  font-size: 14px;
-  line-height: 1rem;
-  margin: 8px 14px;
-  white-space: nowrap;
-}
-.app-nav li ul a {
-  display: block;
-  font-size: inherit;
-  margin: 0;
-  padding: 0;
-}
-.app-nav li ul a.active {
-  border-bottom: 0;
-}
-.app-nav li:hover ul {
-  display: block;
-}
-.github-corner {
-  border-bottom: 0;
-  position: fixed;
-  right: 0;
-  text-decoration: none;
-  top: 0;
-  z-index: 1;
-}
-.github-corner:hover .octo-arm {
-  -webkit-animation: octocat-wave 0.56s ease-in-out;
-  animation: octocat-wave 0.56s ease-in-out;
-}
-.github-corner svg {
-  color: #fff;
-  fill: var(--theme-color, #42b983);
-  height: 80px;
-  width: 80px;
-}
-main {
-  display: block;
-  position: relative;
-  width: 100vw;
-  height: 100%;
-  z-index: 0;
-}
-main.hidden {
-  display: none;
-}
-.anchor {
-  display: inline-block;
-  text-decoration: none;
-  transition: all 0.3s;
-}
-.anchor span {
-  color: #34495e;
-}
-.anchor:hover {
-  text-decoration: underline;
-}
-.sidebar {
-  border-right: 1px solid rgba(0, 0, 0, 0.07);
-  overflow-y: auto;
-  padding: 40px 0 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  transition: transform 0.25s ease-out;
-  width: 300px;
-  z-index: 20;
-}
-.sidebar > h1 {
-  margin: 0 auto 1rem;
-  font-size: 1.5rem;
-  font-weight: 300;
-  text-align: center;
-}
-.sidebar > h1 a {
-  color: inherit;
-  text-decoration: none;
-}
-.sidebar > h1 .app-nav {
-  display: block;
-  position: static;
-}
-.sidebar .sidebar-nav {
-  line-height: 2em;
-  padding-bottom: 40px;
-}
-.sidebar li.collapse .app-sub-sidebar {
-  display: none;
-}
-.sidebar ul {
-  margin: 0 0 0 15px;
-  padding: 0;
-}
-.sidebar li > p {
-  font-weight: 700;
-  margin: 0;
-}
-.sidebar ul,
-.sidebar ul li {
-  list-style: none;
-}
-.sidebar ul li a {
-  border-bottom: none;
-  display: block;
-}
-.sidebar ul li ul {
-  padding-left: 20px;
-}
-.sidebar::-webkit-scrollbar {
-  width: 4px;
-}
-.sidebar::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 4px;
-}
-.sidebar:hover::-webkit-scrollbar-thumb {
-  background: hsla(0, 0%, 53.3%, 0.4);
-}
-.sidebar:hover::-webkit-scrollbar-track {
-  background: hsla(0, 0%, 53.3%, 0.1);
-}
-.sidebar-toggle {
-  background-color: transparent;
-  background-color: hsla(0, 0%, 100%, 0.8);
-  border: 0;
-  outline: none;
-  padding: 10px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  text-align: center;
-  transition: opacity 0.3s;
-  width: 284px;
-  z-index: 30;
-  cursor: pointer;
-}
-.sidebar-toggle:hover .sidebar-toggle-button {
-  opacity: 0.4;
-}
-.sidebar-toggle span {
-  background-color: var(--theme-color, #42b983);
-  display: block;
-  margin-bottom: 4px;
-  width: 16px;
-  height: 2px;
-}
-body.sticky .sidebar,
-body.sticky .sidebar-toggle {
-  position: fixed;
-}
-.content {
-  padding-top: 60px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 300px;
-  transition: left 0.25s ease;
-}
-.markdown-section {
-  margin: 0 auto;
-  max-width: 80%;
-  padding: 30px 15px 40px;
-  position: relative;
-}
-.markdown-section > * {
-  box-sizing: border-box;
-  font-size: inherit;
-}
-.markdown-section > :first-child {
-  margin-top: 0 !important;
-}
-.markdown-section hr {
-  border: none;
-  border-bottom: 1px solid #eee;
-  margin: 2em 0;
-}
-.markdown-section iframe {
-  border: 1px solid #eee;
-  width: 1px;
-  min-width: 100%;
-}
-.markdown-section table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  display: block;
-  margin-bottom: 1rem;
-  overflow: auto;
-  width: 100%;
-}
-.markdown-section th {
-  font-weight: 700;
-}
-.markdown-section td,
-.markdown-section th {
-  border: 1px solid #ddd;
-  padding: 6px 13px;
-}
-.markdown-section tr {
-  border-top: 1px solid #ccc;
-}
-.markdown-section p.tip,
-.markdown-section tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-.markdown-section p.tip {
-  border-bottom-right-radius: 2px;
-  border-left: 4px solid #f66;
-  border-top-right-radius: 2px;
-  margin: 2em 0;
-  padding: 12px 24px 12px 30px;
-  position: relative;
-}
-.markdown-section p.tip:before {
-  background-color: #f66;
-  border-radius: 100%;
-  color: #fff;
-  content: '!';
-  font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  left: -12px;
-  line-height: 20px;
-  position: absolute;
-  height: 20px;
-  width: 20px;
-  text-align: center;
-  top: 14px;
-}
-.markdown-section p.tip code {
-  background-color: #efefef;
-}
-.markdown-section p.tip em {
-  color: #34495e;
-}
-.markdown-section p.warn {
-  background: rgba(66, 185, 131, 0.1);
-  border-radius: 2px;
-  padding: 1rem;
-}
-.markdown-section ul.task-list > li {
-  list-style-type: none;
-}
-body.close .sidebar {
-  transform: translateX(-300px);
-}
-body.close .sidebar-toggle {
-  width: auto;
-}
-body.close .content {
-  left: 0;
-}
-@media print {
-  .app-nav,
-  .github-corner,
-  .sidebar,
-  .sidebar-toggle {
-    display: none;
-  }
-}
-@media screen and (max-width: 768px) {
-  .github-corner,
-  .sidebar,
-  .sidebar-toggle {
-    position: fixed;
-  }
-  .app-nav {
-    margin-top: 16px;
-  }
-  .app-nav li ul {
-    top: 30px;
-  }
-  main {
-    height: auto;
-    overflow-x: hidden;
-  }
-  .sidebar {
-    left: -300px;
-    transition: transform 0.25s ease-out;
-  }
-  .content {
-    left: 0;
-    max-width: 100vw;
-    position: static;
-    padding-top: 20px;
-    transition: transform 0.25s ease;
-  }
-  .app-nav,
-  .github-corner {
-    transition: transform 0.25s ease-out;
-  }
-  .sidebar-toggle {
-    background-color: transparent;
-    width: auto;
-    padding: 30px 30px 10px 10px;
-  }
-  body.close .sidebar {
-    transform: translateX(300px);
-  }
-  body.close .sidebar-toggle {
-    background-color: hsla(0, 0%, 100%, 0.8);
-    transition: background-color 1s;
-    width: 284px;
-    padding: 10px;
-  }
-  body.close .content {
-    transform: translateX(300px);
-  }
-  body.close .app-nav,
-  body.close .github-corner {
-    display: none;
-  }
-  .github-corner:hover .octo-arm {
-    -webkit-animation: none;
-    animation: none;
-  }
-  .github-corner .octo-arm {
-    -webkit-animation: octocat-wave 0.56s ease-in-out;
-    animation: octocat-wave 0.56s ease-in-out;
-  }
-}
-@-webkit-keyframes octocat-wave {
-  0%,
-  to {
-    transform: rotate(0);
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-@keyframes octocat-wave {
-  0%,
-  to {
-    transform: rotate(0);
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-section.cover {
-  align-items: center;
-  background-position: 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 100vh;
-  width: 100vw;
-  display: none;
-}
-section.cover.show {
-  display: flex;
-}
-section.cover.has-mask .mask {
-  background-color: #fff;
-  opacity: 0.8;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 100%;
-}
-section.cover .cover-main {
-  flex: 1;
-  margin: -20px 16px 0;
-  text-align: center;
-}
-section.cover a {
-  color: inherit;
-}
-section.cover a,
-section.cover a:hover {
-  text-decoration: none;
-}
-section.cover p {
-  line-height: 1.5rem;
-  margin: 1em 0;
-}
-section.cover h1 {
-  color: inherit;
-  font-size: 2.5rem;
-  font-weight: 300;
-  margin: 0.625rem 0 2.5rem;
-  position: relative;
-  text-align: center;
-}
-section.cover h1 a {
-  display: block;
-}
-section.cover h1 small {
-  bottom: -0.4375rem;
-  font-size: 1rem;
-  position: absolute;
-}
-section.cover blockquote {
-  font-size: 1.5rem;
-  text-align: center;
-}
-section.cover ul {
-  line-height: 1.8;
-  list-style-type: none;
-  margin: 1em auto;
-  max-width: 500px;
-  padding: 0;
-}
-section.cover .cover-main > p:last-child a {
-  border-radius: 2rem;
-  border: 1px solid var(--theme-color, #42b983);
-  box-sizing: border-box;
-  color: var(--theme-color, #42b983);
-  display: inline-block;
-  font-size: 1.05rem;
-  letter-spacing: 0.1rem;
-  margin: 0.5rem 1rem;
-  padding: 0.75em 2rem;
-  text-decoration: none;
-  transition: all 0.15s ease;
-}
-section.cover .cover-main > p:last-child a:last-child {
-  background-color: var(--theme-color, #42b983);
-  color: #fff;
-}
-section.cover .cover-main > p:last-child a:last-child:hover {
-  color: inherit;
-  opacity: 0.8;
-}
-section.cover .cover-main > p:last-child a:hover {
-  color: inherit;
-}
-section.cover blockquote > p > a {
-  border-bottom: 2px solid var(--theme-color, #42b983);
-  transition: color 0.3s;
-}
-section.cover blockquote > p > a:hover {
-  color: var(--theme-color, #42b983);
-}
-.sidebar,
-body {
-  background-color: #fff;
-}
-.sidebar {
-  color: #364149;
-}
-.sidebar li {
-  margin: 6px 0;
-}
-.sidebar ul li a {
-  color: #505d6b;
-  font-size: 14px;
-  font-weight: 400;
-  overflow: hidden;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sidebar ul li a:hover {
-  text-decoration: underline;
-}
-.sidebar ul li ul {
-  padding: 0;
-}
-.sidebar ul li.active > a {
-  border-right: 2px solid;
-  color: var(--theme-color, #42b983);
-  font-weight: 600;
-}
-.app-sub-sidebar li:before {
-  content: '-';
-  padding-right: 4px;
-  float: left;
-}
-.markdown-section h1,
-.markdown-section h2,
-.markdown-section h3,
-.markdown-section h4,
-.markdown-section strong {
-  color: #2c3e50;
-  font-weight: 600;
-}
-.markdown-section a {
-  color: var(--theme-color, #42b983);
-  font-weight: 600;
-}
-.markdown-section h1 {
-  font-size: 2rem;
-  margin: 0 0 1rem;
-}
-.markdown-section h2 {
-  font-size: 1.75rem;
-  margin: 45px 0 0.8rem;
-}
-.markdown-section h3 {
-  font-size: 1.5rem;
-  margin: 40px 0 0.6rem;
-}
-.markdown-section h4 {
-  font-size: 1.25rem;
-}
-.markdown-section h5 {
-  font-size: 1rem;
-}
-.markdown-section h6 {
-  color: #777;
-  font-size: 1rem;
-}
-.markdown-section figure,
-.markdown-section p {
-  margin: 1.2em 0;
-}
-.markdown-section ol,
-.markdown-section p,
-.markdown-section ul {
-  line-height: 1.6rem;
-  word-spacing: 0.05rem;
-}
-.markdown-section ol,
-.markdown-section ul {
-  padding-left: 1.5rem;
-}
-.markdown-section blockquote {
-  border-left: 4px solid var(--theme-color, #42b983);
-  color: #858585;
-  margin: 2em 0;
-  padding-left: 20px;
-}
-.markdown-section blockquote p {
-  font-weight: 600;
-  margin-left: 0;
-}
-.markdown-section iframe {
-  margin: 1em 0;
-}
-.markdown-section em {
-  color: #7f8c8d;
-}
-.markdown-section code {
-  border-radius: 2px;
-  color: #e96900;
-  font-size: 0.8rem;
-  margin: 0 2px;
-  padding: 3px 5px;
-  white-space: pre-wrap;
-}
-.markdown-section code,
-.markdown-section pre {
-  background-color: #f8f8f8;
-  font-family: Roboto Mono, Monaco, courier, monospace;
-}
-.markdown-section pre {
-  -moz-osx-font-smoothing: initial;
-  -webkit-font-smoothing: initial;
-  line-height: 1.5rem;
-  margin: 1.2em 0;
-  overflow: auto;
-  padding: 0 1.4rem;
-  position: relative;
-  word-wrap: normal;
-}
-.token.cdata,
-.token.comment,
-.token.doctype,
-.token.prolog {
-  color: #8e908c;
-}
-.token.namespace {
-  opacity: 0.7;
-}
-.token.boolean,
-.token.number {
-  color: #c76b29;
-}
-.token.punctuation {
-  color: #525252;
-}
-.token.property {
-  color: #c08b30;
-}
-.token.tag {
-  color: #2973b7;
-}
-.token.string {
-  color: var(--theme-color, #42b983);
-}
-.token.selector {
-  color: #6679cc;
-}
-.token.attr-name {
-  color: #2973b7;
-}
-.language-css .token.string,
-.style .token.string,
-.token.entity,
-.token.url {
-  color: #22a2c9;
-}
-.token.attr-value,
-.token.control,
-.token.directive,
-.token.unit {
-  color: var(--theme-color, #42b983);
-}
-.token.function,
-.token.keyword {
-  color: #e96900;
-}
-.token.atrule,
-.token.regex,
-.token.statement {
-  color: #22a2c9;
-}
-.token.placeholder,
-.token.variable {
-  color: #3d8fd1;
-}
-.token.deleted {
-  text-decoration: line-through;
-}
-.token.inserted {
-  border-bottom: 1px dotted #202746;
-  text-decoration: none;
-}
-.token.italic {
-  font-style: italic;
-}
-.token.bold,
-.token.important {
-  font-weight: 700;
-}
-.token.important {
-  color: #c94922;
-}
-.token.entity {
-  cursor: help;
-}
-.markdown-section pre > code {
-  -moz-osx-font-smoothing: initial;
-  -webkit-font-smoothing: initial;
-  background-color: #f8f8f8;
-  border-radius: 2px;
-  color: #525252;
-  display: block;
-  font-family: Roboto Mono, Monaco, courier, monospace;
-  font-size: 0.8rem;
-  line-height: inherit;
-  margin: 0 2px;
-  max-width: inherit;
-  overflow: inherit;
-  padding: 2.2em 5px;
-  white-space: inherit;
-}
-.markdown-section code:after,
-.markdown-section code:before {
-  letter-spacing: 0.05rem;
-}
-code .token {
-  -moz-osx-font-smoothing: initial;
-  -webkit-font-smoothing: initial;
-  min-height: 1.5rem;
-  position: relative;
-  left: auto;
-}
-pre:after {
-  color: #ccc;
-  content: attr(data-lang);
-  font-size: 0.6rem;
-  font-weight: 600;
-  height: 15px;
-  line-height: 15px;
-  padding: 5px 10px 0;
-  position: absolute;
-  right: 0;
-  text-align: right;
-  top: 0;
-}
diff --git a/packages/mermaid/src/docs/theme_themed.css b/packages/mermaid/src/docs/theme_themed.css
deleted file mode 100644
index 9cb520ed7e..0000000000
--- a/packages/mermaid/src/docs/theme_themed.css
+++ /dev/null
@@ -1,1653 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
-* {
-  -webkit-font-smoothing: antialiased;
-  -webkit-overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-text-size-adjust: none;
-  -webkit-touch-callout: none;
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark2) {
-  body:not(.ready) {
-    overflow: hidden;
-  }
-  body:not(.ready) .app-nav,
-  body:not(.ready) > nav,
-  body:not(.ready) [data-cloak] {
-    display: none;
-  }
-  div#app {
-    font-size: 30px;
-    font-weight: lighter;
-    margin: 40vh auto;
-    text-align: center;
-  }
-  div#app:empty:before {
-    content: 'Loading...';
-  }
-  .emoji {
-    height: 1.2rem;
-    vertical-align: middle;
-  }
-  .progress {
-    background-color: var(--theme-color, #ea6f5a);
-    height: 2px;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    transition: width 0.2s, opacity 0.4s;
-    width: 0;
-    z-index: 999999;
-  }
-  .search .search-keyword,
-  .search a:hover {
-    color: var(--theme-color, #ea6f5a);
-  }
-  .search .search-keyword {
-    font-style: normal;
-    font-weight: 700;
-  }
-  body,
-  html {
-    height: 100%;
-  }
-  body {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    color: #c8c8c8;
-    font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
-    font-size: 15px;
-    letter-spacing: 0;
-    margin: 0;
-    overflow-x: hidden;
-  }
-  img {
-    max-width: 100%;
-  }
-  a[disabled] {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-  kbd {
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    display: inline-block;
-    font-size: 12px !important;
-    line-height: 12px;
-    margin-bottom: 3px;
-    padding: 3px 5px;
-    vertical-align: middle;
-  }
-  li input[type='checkbox'] {
-    margin: 0 0.2em 0.25em 0;
-    vertical-align: middle;
-  }
-  .app-nav {
-    margin: 25px 60px 0 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    z-index: 10;
-  }
-  .app-nav.no-badge {
-    margin-right: 25px;
-  }
-  .app-nav p {
-    margin: 0;
-  }
-  .app-nav > a {
-    margin: 0 1rem;
-    padding: 5px 0;
-  }
-  .app-nav li,
-  .app-nav ul {
-    display: inline-block;
-    list-style: none;
-    margin: 0;
-  }
-  .app-nav a {
-    color: inherit;
-    font-size: 16px;
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-  .app-nav a.active,
-  .app-nav a:hover {
-    color: var(--theme-color, #ea6f5a);
-  }
-  .app-nav a.active {
-    border-bottom: 2px solid var(--theme-color, #ea6f5a);
-  }
-  .app-nav li {
-    display: inline-block;
-    margin: 0 1rem;
-    padding: 5px 0;
-    position: relative;
-    cursor: pointer;
-  }
-  .app-nav li ul {
-    background-color: #fff;
-    border: 1px solid;
-    border-color: #ddd #ddd #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-    display: none;
-    max-height: calc(100vh - 61px);
-    overflow-y: auto;
-    padding: 10px 0;
-    position: absolute;
-    right: -15px;
-    text-align: left;
-    top: 100%;
-    white-space: nowrap;
-  }
-  .app-nav li ul li {
-    display: block;
-    font-size: 14px;
-    line-height: 1rem;
-    margin: 8px 14px;
-    white-space: nowrap;
-  }
-  .app-nav li ul a {
-    display: block;
-    font-size: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  .app-nav li ul a.active {
-    border-bottom: 0;
-  }
-  .app-nav li:hover ul {
-    display: block;
-  }
-  .github-corner {
-    border-bottom: 0;
-    position: fixed;
-    right: 0;
-    text-decoration: none;
-    top: 0;
-    z-index: 1;
-  }
-  .github-corner:hover .octo-arm {
-    -webkit-animation: octocat-wave 0.56s ease-in-out;
-    animation: octocat-wave 0.56s ease-in-out;
-  }
-  .github-corner svg {
-    color: #3f3f3f;
-    fill: var(--theme-color, #ea6f5a);
-    height: 80px;
-    width: 80px;
-  }
-  main {
-    display: block;
-    position: relative;
-    width: 100vw;
-    height: 100%;
-    z-index: 0;
-  }
-  main.hidden {
-    display: none;
-  }
-  .anchor {
-    display: inline-block;
-    text-decoration: none;
-    transition: all 0.3s;
-  }
-  .anchor span {
-    color: #c8c8c8;
-  }
-  .anchor:hover {
-    text-decoration: underline;
-  }
-  .sidebar {
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
-    overflow-y: auto;
-    padding: 40px 0 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    transition: transform 0.25s ease-out;
-    width: 300px;
-    z-index: 20;
-  }
-  .sidebar > h1 {
-    margin: 0 auto 1rem;
-    font-size: 1.5rem;
-    font-weight: 300;
-    text-align: center;
-  }
-  .sidebar > h1 a {
-    color: inherit;
-    text-decoration: none;
-  }
-  .sidebar > h1 .app-nav {
-    display: block;
-    position: static;
-  }
-  .sidebar .sidebar-nav {
-    line-height: 2em;
-    padding-bottom: 40px;
-  }
-  .sidebar li.collapse .app-sub-sidebar {
-    display: none;
-  }
-  .sidebar ul {
-    margin: 0 0 0 15px;
-    padding: 0;
-  }
-  .sidebar li > p {
-    font-weight: 700;
-    margin: 0;
-  }
-  .sidebar ul,
-  .sidebar ul li {
-    list-style: none;
-  }
-  .sidebar ul li a {
-    border-bottom: none;
-    display: block;
-  }
-  .sidebar ul li ul {
-    padding-left: 20px;
-  }
-  .sidebar::-webkit-scrollbar {
-    width: 4px;
-  }
-  .sidebar::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 4px;
-  }
-  .sidebar:hover::-webkit-scrollbar-thumb {
-    background: hsla(0, 0%, 53.3%, 0.4);
-  }
-  .sidebar:hover::-webkit-scrollbar-track {
-    background: hsla(0, 0%, 53.3%, 0.1);
-  }
-  .sidebar-toggle {
-    background-color: transparent;
-    background-color: rgba(63, 63, 63, 0.8);
-    border: 0;
-    outline: none;
-    padding: 10px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-    transition: opacity 0.3s;
-    width: 284px;
-    z-index: 30;
-    cursor: pointer;
-  }
-  .sidebar-toggle:hover .sidebar-toggle-button {
-    opacity: 0.4;
-  }
-  .sidebar-toggle span {
-    background-color: var(--theme-color, #ea6f5a);
-    display: block;
-    margin-bottom: 4px;
-    width: 16px;
-    height: 2px;
-  }
-  body.sticky .sidebar,
-  body.sticky .sidebar-toggle {
-    position: fixed;
-  }
-  .content {
-    padding-top: 60px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 300px;
-    transition: left 0.25s ease;
-  }
-  .markdown-section {
-    margin: 0 auto;
-    max-width: 80%;
-    padding: 30px 15px 40px;
-    position: relative;
-  }
-  .markdown-section > * {
-    box-sizing: border-box;
-    font-size: inherit;
-  }
-  .markdown-section > :first-child {
-    margin-top: 0 !important;
-  }
-  .markdown-section hr {
-    border: none;
-    border-bottom: 1px solid #eee;
-    margin: 2em 0;
-  }
-  .markdown-section iframe {
-    border: 1px solid #eee;
-    width: 1px;
-    min-width: 100%;
-  }
-  .markdown-section table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    display: block;
-    margin-bottom: 1rem;
-    overflow: auto;
-    width: 100%;
-  }
-  .markdown-section th {
-    font-weight: 700;
-  }
-  .markdown-section td,
-  .markdown-section th {
-    border: 1px solid #ddd;
-    padding: 6px 13px;
-  }
-  .markdown-section tr {
-    border-top: 1px solid #ccc;
-  }
-  .markdown-section p.tip,
-  .markdown-section tr:nth-child(2n) {
-    background-color: #f8f8f8;
-  }
-  .markdown-section p.tip {
-    border-bottom-right-radius: 2px;
-    border-left: 4px solid #f66;
-    border-top-right-radius: 2px;
-    margin: 2em 0;
-    padding: 12px 24px 12px 30px;
-    position: relative;
-  }
-  .markdown-section p.tip:before {
-    background-color: #f66;
-    border-radius: 100%;
-    color: #3f3f3f;
-    content: '!';
-    font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    left: -12px;
-    line-height: 20px;
-    position: absolute;
-    height: 20px;
-    width: 20px;
-    text-align: center;
-    top: 14px;
-  }
-  .markdown-section p.tip code {
-    background-color: #efefef;
-  }
-  .markdown-section p.tip em {
-    color: #c8c8c8;
-  }
-  .markdown-section p.warn {
-    background: rgba(234, 111, 90, 0.1);
-    border-radius: 2px;
-    padding: 1rem;
-  }
-  .markdown-section ul.task-list > li {
-    list-style-type: none;
-  }
-  body.close .sidebar {
-    transform: translateX(-300px);
-  }
-  body.close .sidebar-toggle {
-    width: auto;
-  }
-  body.close .content {
-    left: 0;
-  }
-  @media print {
-    .app-nav,
-    .github-corner,
-    .sidebar,
-    .sidebar-toggle {
-      display: none;
-    }
-  }
-  @media screen and (max-width: 768px) {
-    .github-corner,
-    .sidebar,
-    .sidebar-toggle {
-      position: fixed;
-    }
-    .app-nav {
-      margin-top: 16px;
-    }
-    .app-nav li ul {
-      top: 30px;
-    }
-    main {
-      height: auto;
-      overflow-x: hidden;
-    }
-    .sidebar {
-      left: -300px;
-      transition: transform 0.25s ease-out;
-    }
-    .content {
-      left: 0;
-      max-width: 100vw;
-      position: static;
-      padding-top: 20px;
-      transition: transform 0.25s ease;
-    }
-    .app-nav,
-    .github-corner {
-      transition: transform 0.25s ease-out;
-    }
-    .sidebar-toggle {
-      background-color: transparent;
-      width: auto;
-      padding: 30px 30px 10px 10px;
-    }
-    body.close .sidebar {
-      transform: translateX(300px);
-    }
-    body.close .sidebar-toggle {
-      background-color: rgba(63, 63, 63, 0.8);
-      transition: background-color 1s;
-      width: 284px;
-      padding: 10px;
-    }
-    body.close .content {
-      transform: translateX(300px);
-    }
-    body.close .app-nav,
-    body.close .github-corner {
-      display: none;
-    }
-    .github-corner:hover .octo-arm {
-      -webkit-animation: none;
-      animation: none;
-    }
-    .github-corner .octo-arm {
-      -webkit-animation: octocat-wave 0.56s ease-in-out;
-      animation: octocat-wave 0.56s ease-in-out;
-    }
-  }
-  @-webkit-keyframes octocat-wave {
-    0%,
-    to {
-      transform: rotate(0);
-    }
-    20%,
-    60% {
-      transform: rotate(-25deg);
-    }
-    40%,
-    80% {
-      transform: rotate(10deg);
-    }
-  }
-  @keyframes octocat-wave {
-    0%,
-    to {
-      transform: rotate(0);
-    }
-    20%,
-    60% {
-      transform: rotate(-25deg);
-    }
-    40%,
-    80% {
-      transform: rotate(10deg);
-    }
-  }
-  section.cover {
-    align-items: center;
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 100vh;
-    width: 100vw;
-    display: none;
-  }
-  section.cover.show {
-    display: flex;
-  }
-  section.cover.has-mask .mask {
-    background-color: #3f3f3f;
-    opacity: 0.8;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 100%;
-  }
-  section.cover .cover-main {
-    flex: 1;
-    margin: -20px 16px 0;
-    text-align: center;
-  }
-  section.cover a {
-    color: inherit;
-  }
-  section.cover a,
-  section.cover a:hover {
-    text-decoration: none;
-  }
-  section.cover p {
-    line-height: 1.5rem;
-    margin: 1em 0;
-  }
-  section.cover h1 {
-    color: inherit;
-    font-size: 2.5rem;
-    font-weight: 300;
-    margin: 0.625rem 0 2.5rem;
-    position: relative;
-    text-align: center;
-  }
-  section.cover h1 a {
-    display: block;
-  }
-  section.cover h1 small {
-    bottom: -0.4375rem;
-    font-size: 1rem;
-    position: absolute;
-  }
-  section.cover blockquote {
-    font-size: 1.5rem;
-    text-align: center;
-  }
-  section.cover ul {
-    line-height: 1.8;
-    list-style-type: none;
-    margin: 1em auto;
-    max-width: 500px;
-    padding: 0;
-  }
-  section.cover .cover-main > p:last-child a {
-    border-radius: 2rem;
-    border: 1px solid var(--theme-color, #ea6f5a);
-    box-sizing: border-box;
-    color: var(--theme-color, #ea6f5a);
-    display: inline-block;
-    font-size: 1.05rem;
-    letter-spacing: 0.1rem;
-    margin: 0.5rem 1rem;
-    padding: 0.75em 2rem;
-    text-decoration: none;
-    transition: all 0.15s ease;
-  }
-  section.cover .cover-main > p:last-child a:last-child {
-    background-color: var(--theme-color, #ea6f5a);
-    color: #fff;
-  }
-  section.cover .cover-main > p:last-child a:last-child:hover {
-    color: inherit;
-    opacity: 0.8;
-  }
-  section.cover .cover-main > p:last-child a:hover {
-    color: inherit;
-  }
-  section.cover blockquote > p > a {
-    border-bottom: 2px solid var(--theme-color, #ea6f5a);
-    transition: color 0.3s;
-  }
-  section.cover blockquote > p > a:hover {
-    color: var(--theme-color, #ea6f5a);
-  }
-  .sidebar,
-  body {
-    background-color: #3f3f3f;
-  }
-  .sidebar {
-    color: #c8c8c8;
-  }
-  .sidebar li {
-    margin: 6px 15px 6px 0;
-  }
-  .sidebar ul li a {
-    color: #c8c8c8;
-    font-size: 14px;
-    overflow: hidden;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .sidebar ul li a:hover {
-    text-decoration: underline;
-  }
-  .sidebar ul li ul {
-    padding: 0;
-  }
-  .sidebar ul li.active > a {
-    color: var(--theme-color, #ea6f5a);
-    font-weight: 600;
-  }
-  .markdown-section h1,
-  .markdown-section h2,
-  .markdown-section h3,
-  .markdown-section h4,
-  .markdown-section strong {
-    color: #657b83;
-    font-weight: 600;
-  }
-  .markdown-section a {
-    color: var(--theme-color, #ea6f5a);
-    font-weight: 600;
-  }
-  .markdown-section h1 {
-    font-size: 2rem;
-    margin: 0 0 1rem;
-  }
-  .markdown-section h2 {
-    font-size: 1.75rem;
-    margin: 45px 0 0.8rem;
-  }
-  .markdown-section h3 {
-    font-size: 1.5rem;
-    margin: 40px 0 0.6rem;
-  }
-  .markdown-section h4 {
-    font-size: 1.25rem;
-  }
-  .markdown-section h5 {
-    font-size: 1rem;
-  }
-  .markdown-section h6 {
-    color: #777;
-    font-size: 1rem;
-  }
-  .markdown-section figure,
-  .markdown-section ol,
-  .markdown-section p,
-  .markdown-section ul {
-    margin: 1.2em 0;
-  }
-  .markdown-section ol,
-  .markdown-section p,
-  .markdown-section ul {
-    line-height: 1.6rem;
-    word-spacing: 0.05rem;
-  }
-  .markdown-section ol,
-  .markdown-section ul {
-    padding-left: 1.5rem;
-  }
-  .markdown-section blockquote {
-    border-left: 4px solid var(--theme-color, #ea6f5a);
-    color: #858585;
-    margin: 2em 0;
-    padding-left: 20px;
-  }
-  .markdown-section blockquote p {
-    font-weight: 600;
-    margin-left: 0;
-  }
-  .markdown-section iframe {
-    margin: 1em 0;
-  }
-  .markdown-section em {
-    color: #7f8c8d;
-  }
-  .markdown-section code {
-    border-radius: 2px;
-    color: #657b83;
-    font-size: 0.8rem;
-    margin: 0 2px;
-    padding: 3px 5px;
-    white-space: pre-wrap;
-  }
-  .markdown-section code,
-  .markdown-section pre {
-    background-color: #282828;
-    font-family: Roboto Mono, Monaco, courier, monospace;
-  }
-  .markdown-section pre {
-    -moz-osx-font-smoothing: initial;
-    -webkit-font-smoothing: initial;
-    line-height: 1.5rem;
-    margin: 1.2em 0;
-    overflow: auto;
-    padding: 0 1.4rem;
-    position: relative;
-    word-wrap: normal;
-  }
-  .token.cdata,
-  .token.comment,
-  .token.doctype,
-  .token.prolog {
-    color: #8e908c;
-  }
-  .token.namespace {
-    opacity: 0.7;
-  }
-  .token.boolean,
-  .token.number {
-    color: #c76b29;
-  }
-  .token.punctuation {
-    color: #525252;
-  }
-  .token.property {
-    color: #c08b30;
-  }
-  .token.tag {
-    color: #2973b7;
-  }
-  .token.string {
-    color: var(--theme-color, #ea6f5a);
-  }
-  .token.selector {
-    color: #6679cc;
-  }
-  .token.attr-name {
-    color: #2973b7;
-  }
-  .language-css .token.string,
-  .style .token.string,
-  .token.entity,
-  .token.url {
-    color: #22a2c9;
-  }
-  .token.attr-value,
-  .token.control,
-  .token.directive,
-  .token.unit {
-    color: var(--theme-color, #ea6f5a);
-  }
-  .token.keyword {
-    color: #e96900;
-  }
-  .token.atrule,
-  .token.regex,
-  .token.statement {
-    color: #22a2c9;
-  }
-  .token.placeholder,
-  .token.variable {
-    color: #3d8fd1;
-  }
-  .token.deleted {
-    text-decoration: line-through;
-  }
-  .token.inserted {
-    border-bottom: 1px dotted #202746;
-    text-decoration: none;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-  .token.bold,
-  .token.important {
-    font-weight: 700;
-  }
-  .token.important {
-    color: #c94922;
-  }
-  .token.entity {
-    cursor: help;
-  }
-  .markdown-section pre > code {
-    -moz-osx-font-smoothing: initial;
-    -webkit-font-smoothing: initial;
-    background-color: #282828;
-    border-radius: 2px;
-    color: #657b83;
-    display: block;
-    font-family: Roboto Mono, Monaco, courier, monospace;
-    font-size: 0.8rem;
-    line-height: inherit;
-    margin: 0 2px;
-    max-width: inherit;
-    overflow: inherit;
-    padding: 2.2em 5px;
-    white-space: inherit;
-  }
-  .markdown-section code:after,
-  .markdown-section code:before {
-    letter-spacing: 0.05rem;
-  }
-  code .token {
-    -moz-osx-font-smoothing: initial;
-    -webkit-font-smoothing: initial;
-    min-height: 1.5rem;
-    position: relative;
-    left: auto;
-  }
-  pre:after {
-    color: #ccc;
-    content: attr(data-lang);
-    font-size: 0.6rem;
-    font-weight: 600;
-    height: 15px;
-    line-height: 15px;
-    padding: 5px 10px 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    top: 0;
-  }
-  .markdown-section p.tip {
-    background-color: #282828;
-    color: #657b83;
-  }
-  input[type='search'] {
-    background: #4f4f4f;
-    border-color: #4f4f4f;
-    color: #c8c8c8;
-  }
-}
-
-@media (prefers-color-scheme: light or prefers-color-scheme: dark) {
-  /* @media (screen) { */
-  body:not(.ready) {
-    overflow: hidden;
-  }
-  body:not(.ready) .app-nav,
-  body:not(.ready) > nav,
-  body:not(.ready) [data-cloak] {
-    display: none;
-  }
-  div#app {
-    font-size: 30px;
-    font-weight: lighter;
-    margin: 40vh auto;
-    text-align: center;
-  }
-  div#app:empty:before {
-    content: 'Loading...';
-  }
-  .emoji {
-    height: 1.2rem;
-    vertical-align: middle;
-  }
-  .progress {
-    background-color: var(--theme-color, #42b983);
-    height: 2px;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    transition: width 0.2s, opacity 0.4s;
-    width: 0;
-    z-index: 999999;
-  }
-  .search .search-keyword,
-  .search a:hover {
-    color: var(--theme-color, #42b983);
-  }
-  .search .search-keyword {
-    font-style: normal;
-    font-weight: 700;
-  }
-  body,
-  html {
-    height: 100%;
-  }
-  body {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    color: #34495e;
-    font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
-    font-size: 15px;
-    letter-spacing: 0;
-    margin: 0;
-    overflow-x: hidden;
-  }
-  img {
-    max-width: 100%;
-  }
-  a[disabled] {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-  kbd {
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    display: inline-block;
-    font-size: 12px !important;
-    line-height: 12px;
-    margin-bottom: 3px;
-    padding: 3px 5px;
-    vertical-align: middle;
-  }
-  li input[type='checkbox'] {
-    margin: 0 0.2em 0.25em 0;
-    vertical-align: middle;
-  }
-  .app-nav {
-    margin: 25px 60px 0 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    z-index: 10;
-  }
-  .app-nav.no-badge {
-    margin-right: 25px;
-  }
-  .app-nav p {
-    margin: 0;
-  }
-  .app-nav > a {
-    margin: 0 1rem;
-    padding: 5px 0;
-  }
-  .app-nav li,
-  .app-nav ul {
-    display: inline-block;
-    list-style: none;
-    margin: 0;
-  }
-  .app-nav a {
-    color: inherit;
-    font-size: 16px;
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-  .app-nav a.active,
-  .app-nav a:hover {
-    color: var(--theme-color, #42b983);
-  }
-  .app-nav a.active {
-    border-bottom: 2px solid var(--theme-color, #42b983);
-  }
-  .app-nav li {
-    display: inline-block;
-    margin: 0 1rem;
-    padding: 5px 0;
-    position: relative;
-    cursor: pointer;
-  }
-  .app-nav li ul {
-    background-color: #fff;
-    border: 1px solid;
-    border-color: #ddd #ddd #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-    display: none;
-    max-height: calc(100vh - 61px);
-    overflow-y: auto;
-    padding: 10px 0;
-    position: absolute;
-    right: -15px;
-    text-align: left;
-    top: 100%;
-    white-space: nowrap;
-  }
-  .app-nav li ul li {
-    display: block;
-    font-size: 14px;
-    line-height: 1rem;
-    margin: 8px 14px;
-    white-space: nowrap;
-  }
-  .app-nav li ul a {
-    display: block;
-    font-size: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  .app-nav li ul a.active {
-    border-bottom: 0;
-  }
-  .app-nav li:hover ul {
-    display: block;
-  }
-  .github-corner {
-    border-bottom: 0;
-    position: fixed;
-    right: 0;
-    text-decoration: none;
-    top: 0;
-    z-index: 1;
-  }
-  .github-corner:hover .octo-arm {
-    -webkit-animation: octocat-wave 0.56s ease-in-out;
-    animation: octocat-wave 0.56s ease-in-out;
-  }
-  .github-corner svg {
-    color: #fff;
-    fill: var(--theme-color, #42b983);
-    height: 80px;
-    width: 80px;
-  }
-  main {
-    display: block;
-    position: relative;
-    width: 100vw;
-    height: 100%;
-    z-index: 0;
-  }
-  main.hidden {
-    display: none;
-  }
-  .anchor {
-    display: inline-block;
-    text-decoration: none;
-    transition: all 0.3s;
-  }
-  .anchor span {
-    color: #34495e;
-  }
-  .anchor:hover {
-    text-decoration: underline;
-  }
-  .sidebar {
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
-    overflow-y: auto;
-    padding: 40px 0 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    transition: transform 0.25s ease-out;
-    width: 300px;
-    z-index: 20;
-  }
-  .sidebar > h1 {
-    margin: 0 auto 1rem;
-    font-size: 1.5rem;
-    font-weight: 300;
-    text-align: center;
-  }
-  .sidebar > h1 a {
-    color: inherit;
-    text-decoration: none;
-  }
-  .sidebar > h1 .app-nav {
-    display: block;
-    position: static;
-  }
-  .sidebar .sidebar-nav {
-    line-height: 2em;
-    padding-bottom: 40px;
-  }
-  .sidebar li.collapse .app-sub-sidebar {
-    display: none;
-  }
-  .sidebar ul {
-    margin: 0 0 0 15px;
-    padding: 0;
-  }
-  .sidebar li > p {
-    font-weight: 700;
-    margin: 0;
-  }
-  .sidebar ul,
-  .sidebar ul li {
-    list-style: none;
-  }
-  .sidebar ul li a {
-    border-bottom: none;
-    display: block;
-  }
-  .sidebar ul li ul {
-    padding-left: 20px;
-  }
-  .sidebar::-webkit-scrollbar {
-    width: 4px;
-  }
-  .sidebar::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 4px;
-  }
-  .sidebar:hover::-webkit-scrollbar-thumb {
-    background: hsla(0, 0%, 53.3%, 0.4);
-  }
-  .sidebar:hover::-webkit-scrollbar-track {
-    background: hsla(0, 0%, 53.3%, 0.1);
-  }
-  .sidebar-toggle {
-    background-color: transparent;
-    background-color: hsla(0, 0%, 100%, 0.8);
-    border: 0;
-    outline: none;
-    padding: 10px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-    transition: opacity 0.3s;
-    width: 284px;
-    z-index: 30;
-    cursor: pointer;
-  }
-  .sidebar-toggle:hover .sidebar-toggle-button {
-    opacity: 0.4;
-  }
-  .sidebar-toggle span {
-    background-color: var(--theme-color, #42b983);
-    display: block;
-    margin-bottom: 4px;
-    width: 16px;
-    height: 2px;
-  }
-  body.sticky .sidebar,
-  body.sticky .sidebar-toggle {
-    position: fixed;
-  }
-  .content {
-    padding-top: 60px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 300px;
-    transition: left 0.25s ease;
-  }
-  .markdown-section {
-    margin: 0 auto;
-    max-width: 80%;
-    padding: 30px 15px 40px;
-    position: relative;
-  }
-  .markdown-section > * {
-    box-sizing: border-box;
-    font-size: inherit;
-  }
-  .markdown-section > :first-child {
-    margin-top: 0 !important;
-  }
-  .markdown-section hr {
-    border: none;
-    border-bottom: 1px solid #eee;
-    margin: 2em 0;
-  }
-  .markdown-section iframe {
-    border: 1px solid #eee;
-    width: 1px;
-    min-width: 100%;
-  }
-  .markdown-section table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    display: block;
-    margin-bottom: 1rem;
-    overflow: auto;
-    width: 100%;
-  }
-  .markdown-section th {
-    font-weight: 700;
-  }
-  .markdown-section td,
-  .markdown-section th {
-    border: 1px solid #ddd;
-    padding: 6px 13px;
-  }
-  .markdown-section tr {
-    border-top: 1px solid #ccc;
-  }
-  .markdown-section p.tip,
-  .markdown-section tr:nth-child(2n) {
-    background-color: #f8f8f8;
-  }
-  .markdown-section p.tip {
-    border-bottom-right-radius: 2px;
-    border-left: 4px solid #f66;
-    border-top-right-radius: 2px;
-    margin: 2em 0;
-    padding: 12px 24px 12px 30px;
-    position: relative;
-  }
-  .markdown-section p.tip:before {
-    background-color: #f66;
-    border-radius: 100%;
-    color: #fff;
-    content: '!';
-    font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    left: -12px;
-    line-height: 20px;
-    position: absolute;
-    height: 20px;
-    width: 20px;
-    text-align: center;
-    top: 14px;
-  }
-  .markdown-section p.tip code {
-    background-color: #efefef;
-  }
-  .markdown-section p.tip em {
-    color: #34495e;
-  }
-  .markdown-section p.warn {
-    background: rgba(66, 185, 131, 0.1);
-    border-radius: 2px;
-    padding: 1rem;
-  }
-  .markdown-section ul.task-list > li {
-    list-style-type: none;
-  }
-  body.close .sidebar {
-    transform: translateX(-300px);
-  }
-  body.close .sidebar-toggle {
-    width: auto;
-  }
-  body.close .content {
-    left: 0;
-  }
-  @media print {
-    .app-nav,
-    .github-corner,
-    .sidebar,
-    .sidebar-toggle {
-      display: none;
-    }
-  }
-  @media screen and (max-width: 768px) {
-    .github-corner,
-    .sidebar,
-    .sidebar-toggle {
-      position: fixed;
-    }
-    .app-nav {
-      margin-top: 16px;
-    }
-    .app-nav li ul {
-      top: 30px;
-    }
-    main {
-      height: auto;
-      overflow-x: hidden;
-    }
-    .sidebar {
-      left: -300px;
-      transition: transform 0.25s ease-out;
-    }
-    .content {
-      left: 0;
-      max-width: 100vw;
-      position: static;
-      padding-top: 20px;
-      transition: transform 0.25s ease;
-    }
-    .app-nav,
-    .github-corner {
-      transition: transform 0.25s ease-out;
-    }
-    .sidebar-toggle {
-      background-color: transparent;
-      width: auto;
-      padding: 30px 30px 10px 10px;
-    }
-    body.close .sidebar {
-      transform: translateX(300px);
-    }
-    body.close .sidebar-toggle {
-      background-color: hsla(0, 0%, 100%, 0.8);
-      transition: background-color 1s;
-      width: 284px;
-      padding: 10px;
-    }
-    body.close .content {
-      transform: translateX(300px);
-    }
-    body.close .app-nav,
-    body.close .github-corner {
-      display: none;
-    }
-    .github-corner:hover .octo-arm {
-      -webkit-animation: none;
-      animation: none;
-    }
-    .github-corner .octo-arm {
-      -webkit-animation: octocat-wave 0.56s ease-in-out;
-      animation: octocat-wave 0.56s ease-in-out;
-    }
-  }
-  @-webkit-keyframes octocat-wave {
-    0%,
-    to {
-      transform: rotate(0);
-    }
-    20%,
-    60% {
-      transform: rotate(-25deg);
-    }
-    40%,
-    80% {
-      transform: rotate(10deg);
-    }
-  }
-  @keyframes octocat-wave {
-    0%,
-    to {
-      transform: rotate(0);
-    }
-    20%,
-    60% {
-      transform: rotate(-25deg);
-    }
-    40%,
-    80% {
-      transform: rotate(10deg);
-    }
-  }
-  section.cover {
-    align-items: center;
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 100vh;
-    width: 100vw;
-    display: none;
-  }
-  section.cover.show {
-    display: flex;
-  }
-  section.cover.has-mask .mask {
-    background-color: #fff;
-    opacity: 0.8;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 100%;
-  }
-  section.cover .cover-main {
-    flex: 1;
-    margin: -20px 16px 0;
-    text-align: center;
-  }
-  section.cover a {
-    color: inherit;
-  }
-  section.cover a,
-  section.cover a:hover {
-    text-decoration: none;
-  }
-  section.cover p {
-    line-height: 1.5rem;
-    margin: 1em 0;
-  }
-  section.cover h1 {
-    color: inherit;
-    font-size: 2.5rem;
-    font-weight: 300;
-    margin: 0.625rem 0 2.5rem;
-    position: relative;
-    text-align: center;
-  }
-  section.cover h1 a {
-    display: block;
-  }
-  section.cover h1 small {
-    bottom: -0.4375rem;
-    font-size: 1rem;
-    position: absolute;
-  }
-  section.cover blockquote {
-    font-size: 1.5rem;
-    text-align: center;
-  }
-  section.cover ul {
-    line-height: 1.8;
-    list-style-type: none;
-    margin: 1em auto;
-    max-width: 500px;
-    padding: 0;
-  }
-  section.cover .cover-main > p:last-child a {
-    border-radius: 2rem;
-    border: 1px solid var(--theme-color, #42b983);
-    box-sizing: border-box;
-    color: var(--theme-color, #42b983);
-    display: inline-block;
-    font-size: 1.05rem;
-    letter-spacing: 0.1rem;
-    margin: 0.5rem 1rem;
-    padding: 0.75em 2rem;
-    text-decoration: none;
-    transition: all 0.15s ease;
-  }
-  section.cover .cover-main > p:last-child a:last-child {
-    background-color: var(--theme-color, #42b983);
-    color: #fff;
-  }
-  section.cover .cover-main > p:last-child a:last-child:hover {
-    color: inherit;
-    opacity: 0.8;
-  }
-  section.cover .cover-main > p:last-child a:hover {
-    color: inherit;
-  }
-  section.cover blockquote > p > a {
-    border-bottom: 2px solid var(--theme-color, #42b983);
-    transition: color 0.3s;
-  }
-  section.cover blockquote > p > a:hover {
-    color: var(--theme-color, #42b983);
-  }
-  .sidebar,
-  body {
-    background-color: #fff;
-  }
-  .sidebar {
-    color: #364149;
-  }
-  .sidebar li {
-    margin: 6px 0;
-  }
-  .sidebar ul li a {
-    color: #505d6b;
-    font-size: 14px;
-    font-weight: 400;
-    overflow: hidden;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .sidebar ul li a:hover {
-    text-decoration: underline;
-  }
-  .sidebar ul li ul {
-    padding: 0;
-  }
-  .sidebar ul li.active > a {
-    border-right: 2px solid;
-    color: var(--theme-color, #42b983);
-    font-weight: 600;
-  }
-  .app-sub-sidebar li:before {
-    content: '-';
-    padding-right: 4px;
-    float: left;
-  }
-  .markdown-section h1,
-  .markdown-section h2,
-  .markdown-section h3,
-  .markdown-section h4,
-  .markdown-section strong {
-    color: #2c3e50;
-    font-weight: 600;
-  }
-  .markdown-section a {
-    color: var(--theme-color, #42b983);
-    font-weight: 600;
-  }
-  .markdown-section h1 {
-    font-size: 2rem;
-    margin: 0 0 1rem;
-  }
-  .markdown-section h2 {
-    font-size: 1.75rem;
-    margin: 45px 0 0.8rem;
-  }
-  .markdown-section h3 {
-    font-size: 1.5rem;
-    margin: 40px 0 0.6rem;
-  }
-  .markdown-section h4 {
-    font-size: 1.25rem;
-  }
-  .markdown-section h5 {
-    font-size: 1rem;
-  }
-  .markdown-section h6 {
-    color: #777;
-    font-size: 1rem;
-  }
-  .markdown-section figure,
-  .markdown-section p {
-    margin: 1.2em 0;
-  }
-  .markdown-section ol,
-  .markdown-section p,
-  .markdown-section ul {
-    line-height: 1.6rem;
-    word-spacing: 0.05rem;
-  }
-  .markdown-section ol,
-  .markdown-section ul {
-    padding-left: 1.5rem;
-  }
-  .markdown-section blockquote {
-    border-left: 4px solid var(--theme-color, #42b983);
-    color: #858585;
-    margin: 2em 0;
-    padding-left: 20px;
-  }
-  .markdown-section blockquote p {
-    font-weight: 600;
-    margin-left: 0;
-  }
-  .markdown-section iframe {
-    margin: 1em 0;
-  }
-  .markdown-section em {
-    color: #7f8c8d;
-  }
-  .markdown-section code {
-    border-radius: 2px;
-    color: #e96900;
-    font-size: 0.8rem;
-    margin: 0 2px;
-    padding: 3px 5px;
-    white-space: pre-wrap;
-  }
-  .markdown-section code,
-  .markdown-section pre {
-    background-color: #f8f8f8;
-    font-family: Roboto Mono, Monaco, courier, monospace;
-  }
-  .markdown-section pre {
-    -moz-osx-font-smoothing: initial;
-    -webkit-font-smoothing: initial;
-    line-height: 1.5rem;
-    margin: 1.2em 0;
-    overflow: auto;
-    padding: 0 1.4rem;
-    position: relative;
-    word-wrap: normal;
-  }
-  .token.cdata,
-  .token.comment,
-  .token.doctype,
-  .token.prolog {
-    color: #8e908c;
-  }
-  .token.namespace {
-    opacity: 0.7;
-  }
-  .token.boolean,
-  .token.number {
-    color: #c76b29;
-  }
-  .token.punctuation {
-    color: #525252;
-  }
-  .token.property {
-    color: #c08b30;
-  }
-  .token.tag {
-    color: #2973b7;
-  }
-  .token.string {
-    color: var(--theme-color, #42b983);
-  }
-  .token.selector {
-    color: #6679cc;
-  }
-  .token.attr-name {
-    color: #2973b7;
-  }
-  .language-css .token.string,
-  .style .token.string,
-  .token.entity,
-  .token.url {
-    color: #22a2c9;
-  }
-  .token.attr-value,
-  .token.control,
-  .token.directive,
-  .token.unit {
-    color: var(--theme-color, #42b983);
-  }
-  .token.function,
-  .token.keyword {
-    color: #e96900;
-  }
-  .token.atrule,
-  .token.regex,
-  .token.statement {
-    color: #22a2c9;
-  }
-  .token.placeholder,
-  .token.variable {
-    color: #3d8fd1;
-  }
-  .token.deleted {
-    text-decoration: line-through;
-  }
-  .token.inserted {
-    border-bottom: 1px dotted #202746;
-    text-decoration: none;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-  .token.bold,
-  .token.important {
-    font-weight: 700;
-  }
-  .token.important {
-    color: #c94922;
-  }
-  .token.entity {
-    cursor: help;
-  }
-  .markdown-section pre > code {
-    -moz-osx-font-smoothing: initial;
-    -webkit-font-smoothing: initial;
-    background-color: #f8f8f8;
-    border-radius: 2px;
-    color: #525252;
-    display: block;
-    font-family: Roboto Mono, Monaco, courier, monospace;
-    font-size: 0.8rem;
-    line-height: inherit;
-    margin: 0 2px;
-    max-width: inherit;
-    overflow: inherit;
-    padding: 2.2em 5px;
-    white-space: inherit;
-  }
-  .markdown-section code:after,
-  .markdown-section code:before {
-    letter-spacing: 0.05rem;
-  }
-  code .token {
-    -moz-osx-font-smoothing: initial;
-    -webkit-font-smoothing: initial;
-    min-height: 1.5rem;
-    position: relative;
-    left: auto;
-  }
-  pre:after {
-    color: #ccc;
-    content: attr(data-lang);
-    font-size: 0.6rem;
-    font-weight: 600;
-    height: 15px;
-    line-height: 15px;
-    padding: 5px 10px 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    top: 0;
-  }
-}
diff --git a/packages/mermaid/src/docs/theming.md b/packages/mermaid/src/docs/theming.md
deleted file mode 100644
index 66b612c052..0000000000
--- a/packages/mermaid/src/docs/theming.md
+++ /dev/null
@@ -1,484 +0,0 @@
-# Theme Configuration
-
-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
-
-The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
-
-Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
-
-## Deployable Themes
-
-The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
-
-1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
-
-2. **forest**- A theme full of light greens that is easy on the eyes.
-
-3. **dark**- A theme that would go well with other dark-colored elements.
-
-4. **default**- The default theme for all diagrams.
-
-5. **neutral**- The theme to be used for black and white printing.
-
-## Site-wide Themes
-
-Site-wide themes are declared via `initialize` by site owners.
-
-Example of `Initialize` call setting `theme` to `base`:
-
-```javascript
-mermaidAPI.initialize({
-  securityLevel: 'loose',
-  theme: 'base',
-});
-```
-
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
-
-## Themes at the Local or Current Level
-
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
-
-```mmd
-%%{init: {'theme':'base'}}%%
-  graph TD
-    a --> b
-```
-
-Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
-
-```mermaid-example
-%%{init: {'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-# List of Themes
-
-# Customizing Themes with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**Notes:**
-Leaving it empty will set all variable values to default.
-
-## Color and Color Calculation:
-
-Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
-
-**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
-
-You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
-
-## Theme Variables Reference Table
-
-```note
-Variables that are unique to some diagrams can be affected by changes in Theme Variables
-```
-
-| Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
-| background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
-| fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      | Font Size, in pixels                                                                                                             |
-| primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | based on primaryColor          | \*   | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | \*   | Color to be used as text color in nodes using primaryColor                                                                       |
-| secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
-| secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
-| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |
-| tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
-| noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                   |
-| noteBorderColor      | based on noteBkgColor          | \*   | Border color in note rectangles.                                                                                                 |
-| lineColor            | based on background            | \*   |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | \*   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | \*   | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
-| errorBkgColor        | tertiaryColor                  | \*   | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | \*   | Color for syntax error message                                                                                                   |
-
-# What follows are Variables, specific to different diagrams and charts.
-
-## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
-
-## Flowchart
-
-| Variable            | Default/ Associated Value | Calc | Description                  |
-| ------------------- | ------------------------- | ---- | ---------------------------- |
-| nodeBorder          | primaryBorderColor        | \*   | Node Border Color            |
-| clusterBkg          | tertiaryColor             | \*   | Background in subgraphs      |
-| clusterBorder       | tertiaryBorderColor       | \*   | Cluster Border Color         |
-| defaultLinkColor    | lineColor                 | \*   | Link Color                   |
-| titleColor          | tertiaryTextColor         | \*   | Title Color                  |
-| edgeLabelBackground | based on secondaryColor   | \*   |                              |
-| nodeTextColor       | primaryTextColor          | \*   | Color for text inside Nodes. |
-
-# sequence diagram
-
-| name                  | Default value           | Calc | Description                 |
-| --------------------- | ----------------------- | ---- | --------------------------- |
-| actorBorder           | primaryBorderColor      | \*   | Actor Border Color          |
-| actorBkg              | mainBkg                 | \*   | Actor Background Color      |
-| actorTextColor        | primaryTextColor        | \*   | Actor Text Color            |
-| actorLineColor        | grey                    | \*   | Actor Line Color            |
-| signalColor           | textColor               | \*   | Signal Color                |
-| signalTextColor       | textColor               | \*   | Signal Text Color           |
-| labelBoxBkgColor      | actorBkg                | \*   | Label Box Background Color  |
-| labelBoxBorderColor   | actorBorder             | \*   | Label Box Border Color      |
-| labelTextColor        | actorTextColor          | \*   | Label Text Color            |
-| loopTextColor         | actorTextColor          | \*   | Loop ext Color              |
-| activationBorderColor | based on secondaryColor | \*   | Activation Border Color     |
-| activationBkgColor    | secondaryColor          | \*   | Activation Background Color |
-| sequenceNumberColor   | based on lineColor      | \*   | Sequence Number Color       |
-
-# state colors
-
-| name          | Default value    | Calc | Description                                  |
-| ------------- | ---------------- | ---- | -------------------------------------------- |
-| labelColor    | primaryTextColor | \*   |                                              |
-| altBackground | tertiaryColor    | \*   | Used for background in deep composite states |
-
-# class colors
-
-| name      | Default value | Calc | Description                     |
-| --------- | ------------- | ---- | ------------------------------- |
-| classText | textColor     | \*   | Color of Text in class diagrams |
-
-# User journey colors
-
-| name      | Default value           | Calc | Description                             |
-| --------- | ----------------------- | ---- | --------------------------------------- |
-| fillType0 | primaryColor            | \*   | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor          | \*   | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor   | \*   | Fill for 3rd section in journey diagram |
-| fillType3 | based on secondaryColor | \*   | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor   | \*   | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor | \*   | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor   | \*   | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor | \*   | Fill for 8th section in journey diagram |
-
-\*\*Notes: Values are meant to create an alternating look.
-
-# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-- Make the primary color a little lighter
-- set the tertiary color to a reddish shade as well
-- make the edge label background differ from the subgraph by setting the edgeLabelBackground
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
-
-# Common theming activities
-
-## How to change the color of the arrows
-
-# Examples:
-
-When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
-In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
-
-### Flowchart
-
-```mmd
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Flowchart (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Sequence diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-
-### Class diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-```
-
-### Gantt
-
-```mermaid-example
-gantt
-       dateFormat                YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       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
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       section Documentation
-       Describe gantt syntax               :active, a1, after des1, 3d
-       Add gantt diagram to demo page      :after a1  , 20h
-       Add another diagram to demo page    :doc1, after a1  , 48h
-
-       section Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-### State diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-
-### State diagram (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-
-### Entity Relations diagram
-
-```mermaid-example
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-### User journey diagram
-
-```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
-```
diff --git a/packages/mermaid/src/docs/upgrading.md b/packages/mermaid/src/docs/upgrading.md
deleted file mode 100644
index 16dea1cbae..0000000000
--- a/packages/mermaid/src/docs/upgrading.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Upgrading
-
-Some of the interfaces has been upgraded.
-
-## From version 0.4.0 to 0.5.0
-
-### Initialization
-
-`mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:
-
-#### version 0.4.0
-
-```javascript
-mermaid_config = {
-  startOnLoad: true,
-};
-```
-
-#### version 0.5.0
-
-```javascript
-mermaid.initialize({
-  startOnLoad: true,
-});
-```
diff --git a/packages/mermaid/src/docs/user-journey.md b/packages/mermaid/src/docs/user-journey.md
deleted file mode 100644
index 3476088aba..0000000000
--- a/packages/mermaid/src/docs/user-journey.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# User Journey Diagram
-
-> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
-
-Mermaid can render user journey diagrams:
-
-```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
-```
-
-Each user journey is split into sections, these describe the part of the task
-the user is trying to complete.
-
-Tasks syntax is `Task name: : `
diff --git a/vdocs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
similarity index 55%
rename from vdocs/vite.config.ts
rename to packages/mermaid/src/docs/vite.config.ts
index bc88526914..15652c21c6 100644
--- a/vdocs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -1,5 +1,6 @@
-import { defineConfig } from 'vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
 import path from 'path';
+// @ts-ignore: still in alpha
 import { SearchPlugin } from 'vitepress-plugin-search';
 
 const virtualModuleId = 'virtual:mermaid-config';
@@ -29,7 +30,22 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      mermaid: path.join(__dirname, '../dist/mermaid.esm.min.mjs'), // Use this one to build
+      mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
+
+      '@mermaid-js/mermaid-mindmap': path.join(
+        __dirname,
+        '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs'
+      ), // Use this one to build
+    },
+  },
+  server: {
+    fs: {
+      allow: [
+        // search up for workspace root
+        searchForWorkspaceRoot(process.cwd()),
+        // Allow serving files from one level up to the project root
+        path.join(__dirname, '..'),
+      ],
     },
   },
 });
diff --git a/packages/mermaid/src/logger.ts b/packages/mermaid/src/logger.ts
index d29f0f6751..b1c035e225 100644
--- a/packages/mermaid/src/logger.ts
+++ b/packages/mermaid/src/logger.ts
@@ -27,11 +27,9 @@ export const log: Record = {
 /**
  * Sets a log level
  *
- * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"`
+ * @param level - The level to set the logging to. Default is `"fatal"`
  */
 export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') {
-  // TODO: Even if we call initialize with loglevel 0, many initial logs are skipped as LL is set to 5 initially.
-
   let numericLevel: number = LEVELS.fatal;
   if (typeof level === 'string') {
     level = level.toLowerCase();
@@ -41,7 +39,6 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
   } else if (typeof level === 'number') {
     numericLevel = level;
   }
-
   log.trace = () => {};
   log.debug = () => {};
   log.info = () => {};
@@ -84,10 +81,10 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
 /**
  * Returns a format with the timestamp and the log level
  *
- * @param {LogLevel} level The level for the log format
- * @returns {string} The format with the timestamp and log level
+ * @param level - The level for the log format
+ * @returns The format with the timestamp and log level
  */
-const format = (level: string): string => {
+const format = (level: Uppercase): string => {
   const time = moment().format('ss.SSS');
   return `%c${time} : ${level} : `;
 };
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index ac8872ef65..7a4d744e43 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,16 +2,17 @@
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code!
  */
-import type { MermaidConfig } from './config.type';
+import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
+import type { ParseErrorFunction } from './Diagram';
 import { isDetailedError, type DetailedError } from './utils';
 import { registerDiagram } from './diagram-api/diagramAPI';
 import { ExternalDiagramDefinition } from './diagram-api/types';
 
-export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
+export type { MermaidConfig, DetailedError, ExternalDiagramDefinition, ParseErrorFunction };
 
 let externalDiagramsRegistered = false;
 /**
@@ -23,12 +24,6 @@ let externalDiagramsRegistered = false;
  * elements with the attribute already set. This way the init function can be triggered several
  * times.
  *
- * Optionally, `init` can accept in the second argument one of the following:
- *
- * - A DOM Node
- * - An array of DOM nodes (as would come from a jQuery selector)
- * - A W3C selector, a la `.mermaid`
- *
  * ```mermaid
  * graph LR;
  *  a(Find elements)-->b{Processed}
@@ -38,9 +33,12 @@ let externalDiagramsRegistered = false;
  *
  * Renders the mermaid diagrams
  *
- * @param config
- * @param nodes
- * @param callback
+ * @param config - **Deprecated**, please set configuration in {@link initialize}.
+ * @param nodes - **Default**: `.mermaid`. One of the following:
+ * - A DOM Node
+ * - An array of DOM nodes (as would come from a jQuery selector)
+ * - A W3C selector, a la `.mermaid`
+ * @param callback - Called once for each rendered diagram's id.
  */
 const init = async function (
   config?: MermaidConfig,
@@ -62,7 +60,7 @@ const init = async function (
       log.warn(e.str);
     }
     if (mermaid.parseError) {
-      mermaid.parseError(e);
+      mermaid.parseError(e as string);
     }
   }
 };
@@ -110,7 +108,7 @@ const initThrowsErrors = function (
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike;
-  if (typeof nodes === 'undefined') {
+  if (nodes === undefined) {
     nodesToProcess = document.querySelectorAll('.mermaid');
   } else if (typeof nodes === 'string') {
     nodesToProcess = document.querySelectorAll(nodes);
@@ -123,7 +121,7 @@ const initThrowsErrors = function (
   }
 
   log.debug(`Found ${nodesToProcess.length} diagrams`);
-  if (typeof config?.startOnLoad !== 'undefined') {
+  if (config?.startOnLoad !== undefined) {
     log.debug('Start On Load: ' + config?.startOnLoad);
     mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
   }
@@ -135,6 +133,7 @@ const initThrowsErrors = function (
   const errors: DetailedError[] = [];
 
   // element is the current div with mermaid class
+  // eslint-disable-next-line unicorn/prefer-spread
   for (const element of Array.from(nodesToProcess)) {
     log.info('Rendering diagram: ' + element.id);
     /*! Check if previously processed */
@@ -164,10 +163,12 @@ const initThrowsErrors = function (
         txt,
         (svgCode: string, bindFunctions?: (el: Element) => void) => {
           element.innerHTML = svgCode;
-          if (typeof callback !== 'undefined') {
+          if (callback !== undefined) {
             callback(id);
           }
-          if (bindFunctions) bindFunctions(element);
+          if (bindFunctions) {
+            bindFunctions(element);
+          }
         },
         element
       );
@@ -217,7 +218,7 @@ const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
 };
 
 /**
- * Equivalent to {@link init()}, except an error will be thrown on error.
+ * Equivalent to {@link init}, except an error will be thrown on error.
  *
  * @alpha
  * @deprecated This is an internal function and will very likely be modified in v10, or earlier.
@@ -249,7 +250,7 @@ const initThrowsErrorsAsync = async function (
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike;
-  if (typeof nodes === 'undefined') {
+  if (nodes === undefined) {
     nodesToProcess = document.querySelectorAll('.mermaid');
   } else if (typeof nodes === 'string') {
     nodesToProcess = document.querySelectorAll(nodes);
@@ -262,7 +263,7 @@ const initThrowsErrorsAsync = async function (
   }
 
   log.debug(`Found ${nodesToProcess.length} diagrams`);
-  if (typeof config?.startOnLoad !== 'undefined') {
+  if (config?.startOnLoad !== undefined) {
     log.debug('Start On Load: ' + config?.startOnLoad);
     mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
   }
@@ -274,6 +275,7 @@ const initThrowsErrorsAsync = async function (
   const errors: DetailedError[] = [];
 
   // element is the current div with mermaid class
+  // eslint-disable-next-line unicorn/prefer-spread
   for (const element of Array.from(nodesToProcess)) {
     log.info('Rendering diagram: ' + element.id);
     /*! Check if previously processed */
@@ -303,10 +305,12 @@ const initThrowsErrorsAsync = async function (
         txt,
         (svgCode: string, bindFunctions?: (el: Element) => void) => {
           element.innerHTML = svgCode;
-          if (typeof callback !== 'undefined') {
+          if (callback !== undefined) {
             callback(id);
           }
-          if (bindFunctions) bindFunctions(element);
+          if (bindFunctions) {
+            bindFunctions(element);
+          }
         },
         element
       );
@@ -327,8 +331,7 @@ const initialize = function (config: MermaidConfig) {
 /**
  * Used to register external diagram types.
  * @param diagrams - Array of {@link ExternalDiagramDefinition}.
- * @param opts
- * @param opts.lazyLoad - If true, the diagram will be loaded on demand.
+ * @param opts - If opts.lazyLoad is true, the diagram will be loaded on demand.
  */
 const registerExternalDiagrams = async (
   diagrams: ExternalDiagramDefinition[],
@@ -379,7 +382,7 @@ if (typeof document !== 'undefined') {
  * This is provided for environments where the mermaid object can't directly have a new member added
  * to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
  *
- * @param newParseErrorHandler New parseError() callback.
+ * @param newParseErrorHandler - New parseError() callback.
  */
 const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: any) => void) {
   mermaid.parseError = newParseErrorHandler;
@@ -410,7 +413,7 @@ const executeQueue = async () => {
 };
 
 /**
- * @param txt
+ * @param txt - The mermaid code to be parsed.
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
  */
 const parseAsync = (txt: string): Promise => {
@@ -438,44 +441,7 @@ const parseAsync = (txt: string): Promise => {
   });
 };
 
-// const asynco = (id: string, delay: number) =>
-//   new Promise((res) => {
-//     setTimeout(() => {
-//       // This resolves for the promise for the queue handling
-//       res(id);
-//     }, delay);
-//   });
-
-/**
- * @param txt
- * @param id
- * @param delay
- * @deprecated This is an internal function and should not be used. Will be removed in v10.
- */
-// const test1 = (id: string, delay: number) => {
-//   const p = new Promise((resolve, reject) => {
-//     // This promise will resolve when the mermaidAPI.render call is done.
-//     // It will be queued first and will be executed when it is first in line
-//     const performCall = () =>
-//       new Promise((res) => {
-//         asynco(id, delay).then((r) => {
-//           // This resolves for the promise for the queue handling
-//           res(r);
-//           // This fullfills the promise sent to the value back to the original caller
-//           resolve(r + ' result to caller');
-//         });
-//       });
-//     executionQueue.push(performCall);
-//   });
-//   return p;
-// };
-
 /**
- * @param txt
- * @param id
- * @param text
- * @param cb
- * @param container
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
  */
 const renderAsync = (
@@ -493,7 +459,7 @@ const renderAsync = (
           (r) => {
             // This resolves for the promise for the queue handling
             res(r);
-            // This fullfills the promise sent to the value back to the original caller
+            // This fulfills the promise sent to the value back to the original caller
             resolve(r);
           },
           (e) => {
@@ -511,8 +477,7 @@ const renderAsync = (
 const mermaid: {
   startOnLoad: boolean;
   diagrams: any;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  parseError?: Function;
+  parseError?: ParseErrorFunction;
   mermaidAPI: typeof mermaidAPI;
   parse: typeof parse;
   parseAsync: typeof parseAsync;
diff --git a/packages/mermaid/src/mermaidAPI.spec.js b/packages/mermaid/src/mermaidAPI.spec.js
deleted file mode 100644
index 241b5ec864..0000000000
--- a/packages/mermaid/src/mermaidAPI.spec.js
+++ /dev/null
@@ -1,150 +0,0 @@
-'use strict';
-import mermaid from './mermaid';
-import mermaidAPI from './mermaidAPI';
-import assignWithDepth from './assignWithDepth';
-
-describe('when using mermaidAPI and ', function () {
-  describe('doing initialize ', function () {
-    beforeEach(function () {
-      document.body.innerHTML = '';
-      mermaidAPI.globalReset();
-    });
-
-    it('should copy a literal into the configuration', function () {
-      const orgConfig = mermaidAPI.getConfig();
-      expect(orgConfig.testLiteral).toBe(undefined);
-
-      mermaidAPI.initialize({ testLiteral: true });
-      const config = mermaidAPI.getConfig();
-
-      expect(config.testLiteral).toBe(true);
-    });
-    it('should copy a an object into the configuration', function () {
-      const orgConfig = mermaidAPI.getConfig();
-      expect(orgConfig.testObject).toBe(undefined);
-
-      const object = {
-        test1: 1,
-        test2: false,
-      };
-
-      mermaidAPI.initialize({ testObject: object });
-      let config = mermaidAPI.getConfig();
-
-      expect(config.testObject.test1).toBe(1);
-      mermaidAPI.updateSiteConfig({ testObject: { test3: true } });
-      config = mermaidAPI.getConfig();
-
-      expect(config.testObject.test1).toBe(1);
-      expect(config.testObject.test2).toBe(false);
-      expect(config.testObject.test3).toBe(true);
-    });
-    it('should reset mermaid config to global defaults', function () {
-      let config = {
-        logLevel: 0,
-        securityLevel: 'loose',
-      };
-      mermaidAPI.initialize(config);
-      mermaidAPI.setConfig({ securityLevel: 'strict', logLevel: 1 });
-      expect(mermaidAPI.getConfig().logLevel).toBe(1);
-      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-      mermaidAPI.reset();
-      expect(mermaidAPI.getConfig().logLevel).toBe(0);
-      expect(mermaidAPI.getConfig().securityLevel).toBe('loose');
-      mermaidAPI.globalReset();
-      expect(mermaidAPI.getConfig().logLevel).toBe(5);
-      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-    });
-
-    it('should prevent changes to site defaults (sneaky)', function () {
-      let config = {
-        logLevel: 0,
-      };
-      mermaidAPI.initialize(config);
-      const siteConfig = mermaidAPI.getSiteConfig();
-      expect(mermaidAPI.getConfig().logLevel).toBe(0);
-      config.secure = {
-        toString: function () {
-          mermaidAPI.initialize({ securityLevel: 'loose' });
-        },
-      };
-      // mermaidAPI.reinitialize(config);
-      expect(mermaidAPI.getConfig().secure).toEqual(mermaidAPI.getSiteConfig().secure);
-      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-      mermaidAPI.reset();
-      expect(mermaidAPI.getSiteConfig()).toEqual(siteConfig);
-      expect(mermaidAPI.getConfig()).toEqual(siteConfig);
-    });
-    it('should prevent clobbering global defaults (direct)', function () {
-      let config = assignWithDepth({}, mermaidAPI.defaultConfig);
-      assignWithDepth(config, { logLevel: 0 });
-
-      let error = { message: '' };
-      try {
-        mermaidAPI['defaultConfig'] = config;
-      } catch (e) {
-        error = e;
-      }
-      expect(error.message).toBe(
-        "Cannot assign to read only property 'defaultConfig' of object '#'"
-      );
-      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
-    });
-    it('should prevent changes to global defaults (direct)', function () {
-      let error = { message: '' };
-      try {
-        mermaidAPI.defaultConfig['logLevel'] = 0;
-      } catch (e) {
-        error = e;
-      }
-      expect(error.message).toBe(
-        "Cannot assign to read only property 'logLevel' of object '#'"
-      );
-      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
-    });
-    it('should prevent sneaky changes to global defaults (assignWithDepth)', function () {
-      let config = {
-        logLevel: 0,
-      };
-      let error = { message: '' };
-      try {
-        assignWithDepth(mermaidAPI.defaultConfig, config);
-      } catch (e) {
-        error = e;
-      }
-      expect(error.message).toBe(
-        "Cannot assign to read only property 'logLevel' of object '#'"
-      );
-      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
-    });
-  });
-  describe('dompurify config', function () {
-    it('should allow dompurify config to be set', function () {
-      mermaidAPI.initialize({ dompurifyConfig: { ADD_ATTR: ['onclick'] } });
-      expect(mermaidAPI.getConfig().dompurifyConfig.ADD_ATTR).toEqual(['onclick']);
-    });
-  });
-  describe('test mermaidApi.parse() for checking validity of input ', function () {
-    mermaid.parseError = undefined; // ensure it parseError undefined
-    it('should throw for an invalid definition (with no mermaid.parseError() defined)', function () {
-      expect(mermaid.parseError).toEqual(undefined);
-      expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
-    });
-    it('should not throw for a valid definition', function () {
-      expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
-    });
-    it('it should return false for invalid definition WITH a parseError() callback defined', function () {
-      let parseErrorWasCalled = false;
-      // also test setParseErrorHandler() call working to set mermaid.parseError
-      expect(
-        mermaidAPI.parse('this is not a mermaid diagram definition', () => {
-          parseErrorWasCalled = true;
-        })
-      ).toEqual(false);
-      expect(parseErrorWasCalled).toEqual(true);
-    });
-    it('should return true for valid definition', function () {
-      expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).toEqual(true);
-    });
-  });
-});
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
new file mode 100644
index 0000000000..d2fd49f34b
--- /dev/null
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -0,0 +1,776 @@
+'use strict';
+import { vi } from 'vitest';
+
+// -------------------------------------
+//  Mocks and mocking
+
+import { MockedD3 } from './tests/MockedD3';
+
+// Note: If running this directly from within an IDE, the mocks directory must be at packages/mermaid/mocks
+vi.mock('d3');
+vi.mock('dagre-d3');
+
+// mermaidAPI.spec.ts:
+import * as accessibility from './accessibility'; // Import it this way so we can use spyOn(accessibility,...)
+vi.mock('./accessibility', () => ({
+  setA11yDiagramInfo: vi.fn(),
+  addSVGa11yTitleDescription: vi.fn(),
+}));
+
+// Mock the renderers specifically so we can test render(). Need to mock draw() for each renderer
+vi.mock('./diagrams/c4/c4Renderer');
+vi.mock('./diagrams/class/classRenderer');
+vi.mock('./diagrams/class/classRenderer-v2');
+vi.mock('./diagrams/er/erRenderer');
+vi.mock('./diagrams/flowchart/flowRenderer-v2');
+vi.mock('./diagrams/git/gitGraphRenderer');
+vi.mock('./diagrams/gantt/ganttRenderer');
+vi.mock('./diagrams/user-journey/journeyRenderer');
+vi.mock('./diagrams/pie/pieRenderer');
+vi.mock('./diagrams/requirement/requirementRenderer');
+vi.mock('./diagrams/sequence/sequenceRenderer');
+vi.mock('./diagrams/state/stateRenderer-v2');
+
+// -------------------------------------
+
+import mermaid from './mermaid';
+import { MermaidConfig } from './config.type';
+
+import mermaidAPI, { removeExistingElements } from './mermaidAPI';
+import {
+  encodeEntities,
+  decodeEntities,
+  createCssStyles,
+  createUserStyles,
+  appendDivSvgG,
+  cleanUpSvgCode,
+  putIntoIFrame,
+} from './mermaidAPI';
+
+import assignWithDepth from './assignWithDepth';
+
+// --------------
+// Mocks
+//   To mock a module, first define a mock for it, then (if used explicitly in the tests) import it. Be sure the path points to exactly the same file as is imported in mermaidAPI (the module being tested)
+vi.mock('./styles', () => {
+  return {
+    addStylesForDiagram: vi.fn(),
+    default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'),
+  };
+});
+import getStyles from './styles';
+
+vi.mock('stylis', () => {
+  return {
+    stringify: vi.fn(),
+    compile: vi.fn(),
+    serialize: vi.fn().mockReturnValue('stylis serialized css'),
+  };
+});
+import { compile, serialize } from 'stylis';
+
+/**
+ * @see https://vitest.dev/guide/mocking.html Mock part of a module
+ * To investigate how to mock just some methods from a module - call the actual implementation and then mock others, e.g. so they can be spied on
+ */
+
+// -------------------------------------------------------------------------------------
+
+describe('mermaidAPI', function () {
+  describe('encodeEntities', () => {
+    it('removes the ending ; from style [text1]:[optional word]#[text2]; with ', () => {
+      const text = 'style this; is ; everything :something#not-nothing; and this too;';
+      expect(encodeEntities(text)).toEqual(
+        'style this; is ; everything :something#not-nothing; and this too'
+      );
+    });
+    it('removes the ending ; from classDef [text1]:[optional word]#[text2]; with ', () => {
+      const text = 'classDef this; is ; everything :something#not-nothing; and this too;';
+      expect(encodeEntities(text)).toEqual(
+        'classDef this; is ; everything :something#not-nothing; and this too'
+      );
+    });
+
+    describe('replaces words starting with # and ending with ;', () => {
+      const testStr = 'Hello #there;';
+
+      it('removes the #', () => {
+        const result = encodeEntities(testStr);
+        expect(result.substring(0, 7)).toEqual('Hello fl');
+      });
+
+      it('prefix is fl°° if is all digits', () => {
+        const result = encodeEntities('Hello #77653;');
+        expect(result.substring(6, result.length)).toEqual('fl°°77653¶ß');
+      });
+
+      it('prefix is fl° if is not all digits', () => {
+        const result = encodeEntities(testStr);
+        expect(result.substring(6, result.length)).toEqual('fl°there¶ß');
+      });
+      it('always removes the semi-colon and ends with ¶ß', () => {
+        const result = encodeEntities(testStr);
+        expect(result.substring(result.length - 2, result.length)).toEqual('¶ß');
+      });
+    });
+
+    it('does all the replacements on the given text', () => {
+      const text =
+        'style this; is ; everything :something#not-nothing; and this too; \n' +
+        'classDef this; is ; everything :something#not-nothing; and this too; \n' +
+        'Hello #there; #andHere;#77653;';
+
+      const result = encodeEntities(text);
+      expect(result).toEqual(
+        'style this; is ; everything :something#not-nothing; and this too \n' +
+          'classDef this; is ; everything :something#not-nothing; and this too \n' +
+          'Hello fl°there¶ß fl°andHere¶ßfl°°77653¶ß'
+      );
+    });
+  });
+
+  describe('decodeEntities', () => {
+    it('replaces fl°° with &#', () => {
+      expect(decodeEntities('fl°°hfl°°ifl°°')).toEqual('&#h&#i&#');
+    });
+    it('replaces fl° with &', () => {
+      expect(decodeEntities('fl°hfl°ifl°')).toEqual('&h&i&');
+    });
+    it('replaces ¶ß with ;', () => {
+      expect(decodeEntities('¶ßh¶ßi¶ß')).toEqual(';h;i;');
+    });
+    it('runs all the replacements on the given text', () => {
+      expect(decodeEntities('¶ßfl°¶ßfl°°¶ß')).toEqual(';&;&#;');
+    });
+  });
+
+  describe('cleanUpSvgCode', () => {
+    it('replaces marker end URLs with just the anchor if not sandboxed and not useMarkerUrls', () => {
+      const markerFullUrl = 'marker-end="url(some-URI#that)"';
+      let useArrowMarkerUrls = false;
+      let isSandboxed = false;
+      let result = cleanUpSvgCode(markerFullUrl, isSandboxed, useArrowMarkerUrls);
+      expect(result).toEqual('marker-end="url(#that)"');
+
+      useArrowMarkerUrls = true;
+      result = cleanUpSvgCode(markerFullUrl, isSandboxed, useArrowMarkerUrls);
+      expect(result).toEqual(markerFullUrl); // not changed
+
+      useArrowMarkerUrls = false;
+      isSandboxed = true;
+      result = cleanUpSvgCode(markerFullUrl, isSandboxed, useArrowMarkerUrls);
+      expect(result).toEqual(markerFullUrl); // not changed
+    });
+
+    it('decodesEntities', () => {
+      const result = cleanUpSvgCode('¶ß brrrr', true, true);
+      expect(result).toEqual('; brrrr');
+    });
+
+    it('replaces old style br tags with new style', () => {
+      const result = cleanUpSvgCode('
 brrrr
', true, true);
+      expect(result).toEqual('
 brrrr
');
+    });
+  });
+
+  describe('putIntoIFrame', () => {
+    const inputSvgCode = 'this is the SVG code';
+
+    it('uses the default SVG iFrame height is used if no svgElement given', () => {
+      const result = putIntoIFrame(inputSvgCode);
+      expect(result).toMatch(/style="(.*)height:100%(.*);"/);
+    });
+    it('default style attributes are: width: 100%, height: 100%, border: 0, margin: 0', () => {
+      const result = putIntoIFrame(inputSvgCode);
+      expect(result).toMatch(/style="(.*)width:100%(.*);"/);
+      expect(result).toMatch(/style="(.*)height:100%(.*);"/);
+      expect(result).toMatch(/style="(.*)border:0(.*);"/);
+      expect(result).toMatch(/style="(.*)margin:0(.*);"/);
+    });
+    it('sandbox="allow-top-navigation-by-user-activation allow-popups">', () => {
+      const result = putIntoIFrame(inputSvgCode);
+      expect(result).toMatch(/sandbox="allow-top-navigation-by-user-activation allow-popups">/);
+    });
+    it('msg shown is "The "iframe" tag is not supported by your browser.\\n" if iFrames are not supported in the browser', () => {
+      const result = putIntoIFrame(inputSvgCode);
+      expect(result).toMatch(/\s*The "iframe" tag is not supported by your browser\./);
+    });
+
+    it('sets src to base64 version of svgCode', () => {
+      const base64encodedSrc = btoa('' + inputSvgCode + '');
+      const expectedRegExp = new RegExp('src="data:text/html;base64,' + base64encodedSrc + '"');
+
+      const result = putIntoIFrame(inputSvgCode);
+      expect(result).toMatch(expectedRegExp);
+    });
+
+    it('uses the height and appends px from the svgElement given', () => {
+      const faux_svgElement = {
+        viewBox: {
+          baseVal: {
+            height: 42,
+          },
+        },
+      };
+
+      const result = putIntoIFrame(inputSvgCode, faux_svgElement);
+      expect(result).toMatch(/style="(.*)height:42px;/);
+    });
+  });
+
+  const fauxParentNode = new MockedD3();
+  const fauxEnclosingDiv = new MockedD3();
+  const fauxSvgNode = new MockedD3();
+
+  describe('appendDivSvgG', () => {
+    const fauxGNode = new MockedD3();
+    const parent_append_spy = vi.spyOn(fauxParentNode, 'append').mockReturnValue(fauxEnclosingDiv);
+    const div_append_spy = vi.spyOn(fauxEnclosingDiv, 'append').mockReturnValue(fauxSvgNode);
+    // @ts-ignore @todo TODO why is this getting a type error?
+    const div_attr_spy = vi.spyOn(fauxEnclosingDiv, 'attr').mockReturnValue(fauxEnclosingDiv);
+    const svg_append_spy = vi.spyOn(fauxSvgNode, 'append').mockReturnValue(fauxGNode);
+    // @ts-ignore @todo TODO why is this getting a type error?
+    const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+
+    it('appends a div node', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(parent_append_spy).toHaveBeenCalledWith('div');
+      expect(div_append_spy).toHaveBeenCalledWith('svg');
+    });
+    it('the id for the div is "d" with the id appended', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
+    });
+
+    it('sets the style for the div if one is given', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'given div style', 'given x link');
+      expect(div_attr_spy).toHaveBeenCalledWith('style', 'given div style');
+    });
+
+    it('appends a svg node to the div node', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
+    });
+    it('sets the svg width to 100%', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_attr_spy).toHaveBeenCalledWith('width', '100%');
+    });
+    it('the svg id is the id', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_attr_spy).toHaveBeenCalledWith('id', 'theId');
+    });
+    it('the svg xml namespace is the 2000 standard', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_attr_spy).toHaveBeenCalledWith('xmlns', 'http://www.w3.org/2000/svg');
+    });
+    it('sets the  svg xlink if one is given', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'div style', 'given x link');
+      expect(svg_attr_spy).toHaveBeenCalledWith('xmlns:xlink', 'given x link');
+    });
+    it('appends a g (group) node to the svg node', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_append_spy).toHaveBeenCalledWith('g');
+    });
+    it('returns the given parentRoot d3 nodes', () => {
+      expect(appendDivSvgG(fauxParentNode, 'theId', 'dtheId')).toEqual(fauxParentNode);
+    });
+  });
+
+  describe('createCssStyles', () => {
+    const serif = 'serif';
+    const sansSerif = 'sans-serif';
+    const mocked_config_with_htmlLabels: MermaidConfig = {
+      themeCSS: 'default',
+      fontFamily: serif,
+      altFontFamily: sansSerif,
+      htmlLabels: true,
+    };
+
+    it('gets the cssStyles from the theme', () => {
+      const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', null);
+      expect(styles).toMatch(/^\ndefault(.*)/);
+    });
+    it('gets the fontFamily from the config', () => {
+      const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', {});
+      expect(styles).toMatch(/(.*)\n:root { --mermaid-font-family: serif(.*)/);
+    });
+    it('gets the alt fontFamily from the config', () => {
+      const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', undefined);
+      expect(styles).toMatch(/(.*)\n:root { --mermaid-alt-font-family: sans-serif(.*)/);
+    });
+
+    describe('there are some classDefs', () => {
+      const classDef1 = { id: 'classDef1', styles: ['style1-1', 'style1-2'], textStyles: [] };
+      const classDef2 = { id: 'classDef2', styles: [], textStyles: ['textStyle2-1'] };
+      const classDef3 = { id: 'classDef3', textStyles: ['textStyle3-1', 'textStyle3-2'] };
+      const classDefs = { classDef1, classDef2, classDef3 };
+
+      describe('the graph supports classDefs', () => {
+        const graphType = 'flowchart-v2';
+
+        const REGEXP_SPECIALS = ['^', '$', '?', '(', '{', '[', '.', '*', '!'];
+
+        // prefix any special RegExp characters in the given string with a \ so we can use the literal character in a RegExp
+        function escapeForRegexp(str: string) {
+          const strChars = [...str]; // split into array of every char
+          const strEscaped = strChars.map((char) => {
+            if (REGEXP_SPECIALS.includes(char)) {
+              return `\\${char}`;
+            } else {
+              return char;
+            }
+          });
+          return strEscaped.join('');
+        }
+
+        // Common test expecting given styles to have .classDef1 and .classDef2 statements but not .classDef3
+        function expect_styles_matchesHtmlElements(styles: string, htmlElement: string) {
+          expect(styles).toMatch(
+            new RegExp(
+              `\\.classDef1 ${escapeForRegexp(
+                htmlElement
+              )} \\{ style1-1 !important; style1-2 !important; }`
+            )
+          );
+          // no CSS styles are created if there are no styles for a classDef
+          expect(styles).not.toMatch(
+            new RegExp(`\\.classDef2 ${escapeForRegexp(htmlElement)} \\{ style(.*) !important; }`)
+          );
+          expect(styles).not.toMatch(
+            new RegExp(`\\.classDef3 ${escapeForRegexp(htmlElement)} \\{ style(.*) !important; }`)
+          );
+        }
+
+        // Common test expecting given textStyles to have .classDef2 and .classDef3 statements but not .classDef1
+        function expect_textStyles_matchesHtmlElements(textStyles: string, htmlElement: string) {
+          expect(textStyles).toMatch(
+            new RegExp(
+              `\\.classDef2 ${escapeForRegexp(htmlElement)} \\{ textStyle2-1 !important; }`
+            )
+          );
+          expect(textStyles).toMatch(
+            new RegExp(
+              `\\.classDef3 ${escapeForRegexp(
+                htmlElement
+              )} \\{ textStyle3-1 !important; textStyle3-2 !important; }`
+            )
+          );
+
+          // no CSS styles are created if there are no textStyles for a classDef
+          expect(textStyles).not.toMatch(
+            new RegExp(
+              `\\.classDef1 ${escapeForRegexp(htmlElement)} \\{ textStyle(.*) !important; }`
+            )
+          );
+        }
+
+        // common suite and tests to verify that the right styles are created with the right htmlElements
+        function expect_correct_styles_with_htmlElements(mocked_config: MermaidConfig) {
+          describe('creates styles for "> *" and  "span" elements', () => {
+            const htmlElements = ['> *', 'span'];
+
+            it('creates CSS styles for every style and textStyle in every classDef', () => {
+              // @todo TODO Can't figure out how to spy on the cssImportantStyles method.
+              //   That would be a much better approach than manually checking the result
+
+              const styles = createCssStyles(mocked_config, graphType, classDefs);
+              htmlElements.forEach((htmlElement) => {
+                expect_styles_matchesHtmlElements(styles, htmlElement);
+              });
+              expect_textStyles_matchesHtmlElements(styles, 'tspan');
+            });
+          });
+        }
+
+        it('there are htmlLabels in the configuration', () => {
+          expect_correct_styles_with_htmlElements(mocked_config_with_htmlLabels);
+        });
+
+        it('there are flowchart.htmlLabels in the configuration', () => {
+          const mocked_config_flowchart_htmlLabels: MermaidConfig = {
+            themeCSS: 'default',
+            fontFamily: 'serif',
+            altFontFamily: 'sans-serif',
+            flowchart: {
+              htmlLabels: true,
+            },
+          };
+          expect_correct_styles_with_htmlElements(mocked_config_flowchart_htmlLabels);
+        });
+
+        describe('no htmlLabels in the configuration', () => {
+          const mocked_config_no_htmlLabels = {
+            themeCSS: 'default',
+            fontFamily: 'serif',
+            altFontFamily: 'sans-serif',
+          };
+
+          describe('creates styles for shape elements "rect", "polygon", "ellipse", and "circle"', () => {
+            const htmlElements = ['rect', 'polygon', 'ellipse', 'circle'];
+
+            it('creates CSS styles for every style and textStyle in every classDef', () => {
+              // TODO Can't figure out how to spy on the cssImportantStyles method. That would be a much better approach than manually checking the result.
+
+              const styles = createCssStyles(mocked_config_no_htmlLabels, graphType, classDefs);
+              htmlElements.forEach((htmlElement) => {
+                expect_styles_matchesHtmlElements(styles, htmlElement);
+              });
+              expect_textStyles_matchesHtmlElements(styles, 'tspan');
+            });
+          });
+        });
+      });
+    });
+  });
+
+  describe('createUserStyles', () => {
+    const mockConfig = {
+      themeCSS: 'default',
+      htmlLabels: true,
+      themeVariables: { fontFamily: 'serif' },
+    };
+
+    const classDef1 = { id: 'classDef1', styles: ['style1-1'], textStyles: [] };
+
+    it('gets the css styles created', () => {
+      // @todo TODO if a single function in the module can be mocked, do it for createCssStyles and mock the results.
+
+      createUserStyles(mockConfig, 'flowchart-v2', { classDef1 }, 'someId');
+      const expectedStyles =
+        '\ndefault' +
+        '\n.classDef1 > * { style1-1 !important; }' +
+        '\n.classDef1 span { style1-1 !important; }';
+      expect(getStyles).toHaveBeenCalledWith('flowchart-v2', expectedStyles, {
+        fontFamily: 'serif',
+      });
+    });
+
+    it('calls getStyles to get css for all graph, user css styles, and config theme variables', () => {
+      createUserStyles(mockConfig, 'someDiagram', {}, 'someId');
+      expect(getStyles).toHaveBeenCalled();
+    });
+
+    it('returns the result of compiling, stringifying, and serializing the css code with stylis', () => {
+      const result = createUserStyles(mockConfig, 'someDiagram', {}, 'someId');
+      expect(compile).toHaveBeenCalled();
+      expect(serialize).toHaveBeenCalled();
+      expect(result).toEqual('stylis serialized css');
+    });
+  });
+
+  describe('removeExistingElements', () => {
+    const svgId = 'svgId';
+    const tempDivId = 'tempDivId';
+    const tempIframeId = 'tempIFrameId';
+    const givenDocument = new Document();
+    const rootHtml = givenDocument.createElement('html');
+    givenDocument.append(rootHtml);
+
+    const svgElement = givenDocument.createElement('svg'); // doesn't matter what the tag is in the test
+    svgElement.id = svgId;
+    const tempDivElement = givenDocument.createElement('div'); // doesn't matter what the tag is in the test
+    tempDivElement.id = tempDivId;
+    const tempiFrameElement = givenDocument.createElement('iframe'); // doesn't matter what the tag is in the test
+    tempiFrameElement.id = tempIframeId;
+
+    it('removes an existing element with given id', () => {
+      rootHtml.appendChild(svgElement);
+      rootHtml.append(tempDivElement);
+      rootHtml.append(tempiFrameElement);
+
+      expect(givenDocument.getElementById(svgElement.id)).toEqual(svgElement);
+      expect(givenDocument.getElementById(tempDivElement.id)).toEqual(tempDivElement);
+      expect(givenDocument.getElementById(tempiFrameElement.id)).toEqual(tempiFrameElement);
+      removeExistingElements(givenDocument, svgId, tempDivId, tempIframeId);
+      expect(givenDocument.getElementById(svgElement.id)).toBeNull();
+      expect(givenDocument.getElementById(tempDivElement.id)).toBeNull();
+      expect(givenDocument.getElementById(tempiFrameElement.id)).toBeNull();
+    });
+
+    it('removes an existing iframe element even if div element is absent', () => {
+      tempiFrameElement.append(svgElement);
+      rootHtml.append(tempiFrameElement);
+
+      expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
+      expect(givenDocument.getElementById(tempDivId)).toBeNull();
+      expect(givenDocument.getElementById(svgId)).toEqual(svgElement);
+      removeExistingElements(givenDocument, svgId, tempDivId, tempIframeId);
+      expect(givenDocument.getElementById(tempDivId)).toBeNull();
+      expect(givenDocument.getElementById(tempIframeId)).toBeNull();
+      expect(givenDocument.getElementById(svgId)).toBeNull();
+    });
+
+    it('removes both existing div and iframe elements when both are present', () => {
+      tempDivElement.append(svgElement);
+      rootHtml.append(tempDivElement);
+      rootHtml.append(tempiFrameElement);
+
+      expect(givenDocument.getElementById(tempIframeId)).toEqual(tempiFrameElement);
+      expect(givenDocument.getElementById(tempDivId)).toEqual(tempDivElement);
+      expect(givenDocument.getElementById(svgId)).toEqual(svgElement);
+      removeExistingElements(givenDocument, svgId, tempDivId, tempIframeId);
+      expect(givenDocument.getElementById(tempIframeId)).toBeNull();
+      expect(givenDocument.getElementById(tempDivId)).toBeNull();
+      expect(givenDocument.getElementById(svgId)).toBeNull();
+    });
+  });
+
+  describe('initialize', function () {
+    beforeEach(function () {
+      document.body.innerHTML = '';
+      mermaidAPI.globalReset();
+    });
+
+    it('copies a literal into the configuration', function () {
+      const orgConfig: any = mermaidAPI.getConfig();
+      expect(orgConfig.testLiteral).toBe(undefined);
+
+      const testConfig: any = { testLiteral: true };
+
+      mermaidAPI.initialize(testConfig);
+      const config: any = mermaidAPI.getConfig();
+
+      expect(config.testLiteral).toBe(true);
+    });
+
+    it('copies an object into the configuration', function () {
+      const orgConfig: any = mermaidAPI.getConfig();
+      expect(orgConfig.testObject).toBe(undefined);
+
+      const object = {
+        test1: 1,
+        test2: false,
+      };
+
+      const testConfig: any = { testObject: object };
+
+      mermaidAPI.initialize(testConfig);
+
+      let config: any = mermaidAPI.getConfig();
+
+      expect(config.testObject.test1).toBe(1);
+
+      const testObjSetting: any = { testObject: { test3: true } };
+      mermaidAPI.updateSiteConfig(testObjSetting);
+      config = mermaidAPI.getConfig();
+
+      expect(config.testObject.test1).toBe(1);
+      expect(config.testObject.test2).toBe(false);
+      expect(config.testObject.test3).toBe(true);
+    });
+
+    it('resets mermaid config to global defaults', function () {
+      const config = {
+        logLevel: 0,
+        securityLevel: 'loose',
+      };
+      mermaidAPI.initialize(config);
+      mermaidAPI.setConfig({ securityLevel: 'strict', logLevel: 1 });
+      expect(mermaidAPI.getConfig().logLevel).toBe(1);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
+      mermaidAPI.reset();
+      expect(mermaidAPI.getConfig().logLevel).toBe(0);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('loose');
+      mermaidAPI.globalReset();
+      expect(mermaidAPI.getConfig().logLevel).toBe(5);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
+    });
+
+    it('prevents changes to site defaults (sneaky)', function () {
+      const config: any = {
+        logLevel: 0,
+      };
+      mermaidAPI.initialize(config);
+      const siteConfig = mermaidAPI.getSiteConfig();
+      expect(mermaidAPI.getConfig().logLevel).toBe(0);
+      config.secure = {
+        toString: function () {
+          mermaidAPI.initialize({ securityLevel: 'loose' });
+        },
+      };
+      // mermaidAPI.reinitialize(config);
+      expect(mermaidAPI.getConfig().secure).toEqual(mermaidAPI.getSiteConfig().secure);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
+      mermaidAPI.reset();
+      expect(mermaidAPI.getSiteConfig()).toEqual(siteConfig);
+      expect(mermaidAPI.getConfig()).toEqual(siteConfig);
+    });
+    it('prevents clobbering global defaults (direct)', function () {
+      const config = assignWithDepth({}, mermaidAPI.defaultConfig);
+      assignWithDepth(config, { logLevel: 0 });
+
+      let error: any = { message: '' };
+      try {
+        // @ts-ignore This is a read-only property. Typescript will not allow assignment, but regular javascript might.
+        mermaidAPI['defaultConfig'] = config;
+      } catch (e) {
+        error = e;
+      }
+      expect(error.message).toBe(
+        "Cannot assign to read only property 'defaultConfig' of object '#'"
+      );
+      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
+    });
+    it('prevents changes to global defaults (direct)', function () {
+      let error: any = { message: '' };
+      try {
+        mermaidAPI.defaultConfig['logLevel'] = 0;
+      } catch (e) {
+        error = e;
+      }
+      expect(error.message).toBe(
+        "Cannot assign to read only property 'logLevel' of object '#'"
+      );
+      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
+    });
+    it('prevents sneaky changes to global defaults (assignWithDepth)', function () {
+      const config = {
+        logLevel: 0,
+      };
+      let error: any = { message: '' };
+      try {
+        assignWithDepth(mermaidAPI.defaultConfig, config);
+      } catch (e) {
+        error = e;
+      }
+      expect(error.message).toBe(
+        "Cannot assign to read only property 'logLevel' of object '#'"
+      );
+      expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
+    });
+  });
+
+  describe('dompurify config', function () {
+    it('allows dompurify config to be set', function () {
+      mermaidAPI.initialize({ dompurifyConfig: { ADD_ATTR: ['onclick'] } });
+
+      expect(mermaidAPI!.getConfig()!.dompurifyConfig!.ADD_ATTR).toEqual(['onclick']);
+    });
+  });
+
+  describe('parse', function () {
+    mermaid.parseError = undefined; // ensure it parseError undefined
+    it('throws for an invalid definition (with no mermaid.parseError() defined)', function () {
+      expect(mermaid.parseError).toEqual(undefined);
+      expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
+    });
+    it('does not throw for a valid definition', function () {
+      expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
+    });
+    it('returns false for invalid definition WITH a parseError() callback defined', function () {
+      let parseErrorWasCalled = false;
+      // also test setParseErrorHandler() call working to set mermaid.parseError
+      expect(
+        mermaidAPI.parse('this is not a mermaid diagram definition', () => {
+          parseErrorWasCalled = true;
+        })
+      ).toEqual(false);
+      expect(parseErrorWasCalled).toEqual(true);
+    });
+    it('returns true for valid definition', function () {
+      expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).toEqual(true);
+    });
+  });
+
+  describe('render', () => {
+    // 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', () => {
+            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
+            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
+            mermaidAPI.render(id, diagramText);
+            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
+              expect.anything(),
+              expectedDiagramType
+            );
+            expect(a11yTitleDesc_spy).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+
+  describe('renderAsync', () => {
+    // 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 () => {
+            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
+            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
+            await mermaidAPI.renderAsync(id, diagramText);
+            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
+              expect.anything(),
+              expectedDiagramType
+            );
+            expect(a11yTitleDesc_spy).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index faba5fef8c..5bf11fad18 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -9,8 +9,6 @@
  * page or do something completely different.
  *
  * In addition to the render function, a number of behavioral configuration options are available.
- *
- * @name mermaidAPI
  */
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
@@ -20,9 +18,8 @@ import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
-import flowRenderer from './diagrams/flowchart/flowRenderer';
 import ganttDb from './diagrams/gantt/ganttDb';
-import Diagram, { getDiagramFromText } from './Diagram';
+import Diagram, { getDiagramFromText, type ParseErrorFunction } from './Diagram';
 import errorRenderer from './diagrams/error/errorRenderer';
 import { attachFunctions } from './interactionDb';
 import { log, setLogLevel } from './logger';
@@ -32,40 +29,82 @@ import utils, { directiveSanitizer } from './utils';
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from './config.type';
 import { evaluate } from './diagrams/common/common';
+import isEmpty from 'lodash-es/isEmpty.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+
+// diagram names that support classDef statements
+const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
+
+const MAX_TEXTLENGTH_EXCEEDED_MSG =
+  'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+
+const SECURITY_LVL_SANDBOX = 'sandbox';
+const SECURITY_LVL_LOOSE = 'loose';
+
+const XMLNS_SVG_STD = 'http://www.w3.org/2000/svg';
+const XMLNS_XLINK_STD = 'http://www.w3.org/1999/xlink';
+const XMLNS_XHTML_STD = 'http://www.w3.org/1999/xhtml';
+
+// ------------------------------
+// iFrame
+const IFRAME_WIDTH = '100%';
+const IFRAME_HEIGHT = '100%';
+const IFRAME_STYLES = 'border:0;margin:0;';
+const IFRAME_BODY_STYLE = 'margin:0';
+const IFRAME_SANDBOX_OPTS = 'allow-top-navigation-by-user-activation allow-popups';
+const IFRAME_NOT_SUPPORTED_MSG = 'The "iframe" tag is not supported by your browser.';
+
+// DOMPurify settings for svgCode
+const DOMPURIFY_TAGS = ['foreignobject'];
+const DOMPURIFY_ATTR = ['dominant-baseline'];
+
+// This is what is returned from getClasses(...) methods.
+// It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word.
+// It makes it clear we're working with a style class definition, even though defining the type is currently difficult.
+interface DiagramStyleClassDef {
+  id: string;
+  styles?: string[];
+  textStyles?: string[];
+}
+
+// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
+// @ts-ignore Could replicate the type definition in d3. This also makes it possible to use the untyped info from the js diagram files.
+export type D3Element = any;
+
+// ----------------------------------------------------------------------------
 
 /**
- * @param text
- * @param parseError
+ * @param text - The mermaid diagram definition.
+ * @param parseError - If set, handles errors.
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
-function parse(text: string, parseError?: Function): boolean {
+function parse(text: string, parseError?: ParseErrorFunction): boolean {
   addDiagrams();
   const diagram = new Diagram(text, parseError);
   return diagram.parse(text, parseError);
 }
 
 /**
- *
- * @param text
- * @param parseError
+ * @param text - The mermaid diagram definition.
+ * @param parseError - If set, handles errors.
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
-async function parseAsync(text: string, parseError?: Function): Promise {
+async function parseAsync(text: string, parseError?: ParseErrorFunction): Promise {
   addDiagrams();
   const diagram = await getDiagramFromText(text, parseError);
   return diagram.parse(text, parseError);
 }
 
+/**
+ * @param  text - text to be encoded
+ * @returns
+ */
 export const encodeEntities = function (text: string): string {
   let txt = text;
 
-  txt = txt.replace(/style.*:\S*#.*;/g, function (s) {
-    const innerTxt = s.substring(0, s.length - 1);
-    return innerTxt;
+  txt = txt.replace(/style.*:\S*#.*;/g, function (s): string {
+    return s.substring(0, s.length - 1);
   });
-  txt = txt.replace(/classDef.*:\S*#.*;/g, function (s) {
-    const innerTxt = s.substring(0, s.length - 1);
-    return innerTxt;
+  txt = txt.replace(/classDef.*:\S*#.*;/g, function (s): string {
+    return s.substring(0, s.length - 1);
   });
 
   txt = txt.replace(/#\w+;/g, function (s) {
@@ -82,21 +121,231 @@ export const encodeEntities = function (text: string): string {
   return txt;
 };
 
+/**
+ *
+ * @param  text - text to be decoded
+ * @returns
+ */
 export const decodeEntities = function (text: string): string {
   let txt = text;
 
-  txt = txt.replace(/fl°°/g, function () {
-    return '&#';
-  });
-  txt = txt.replace(/fl°/g, function () {
-    return '&';
-  });
-  txt = txt.replace(/¶ß/g, function () {
-    return ';';
-  });
+  txt = txt.replace(/fl°°/g, '&#');
+  txt = txt.replace(/fl°/g, '&');
+  txt = txt.replace(/¶ß/g, ';');
 
   return txt;
 };
+
+// append !important; to each cssClass followed by a final !important, all enclosed in { }
+//
+/**
+ * Create a CSS style that starts with the given class name, then the element,
+ * with an enclosing block that has each of the cssClasses followed by !important;
+ * @param cssClass - CSS class name
+ * @param element - CSS element
+ * @param cssClasses - list of CSS styles to append after the element
+ * @returns - the constructed string
+ */
+export const cssImportantStyles = (
+  cssClass: string,
+  element: string,
+  cssClasses: string[] = []
+): string => {
+  return `\n.${cssClass} ${element} { ${cssClasses.join(' !important; ')} !important; }`;
+};
+
+/**
+ * Create the user styles
+ *
+ * @param  config - configuration that has style and theme settings to use
+ * @param graphType - used for checking if classDefs should be applied
+ * @param  classDefs - the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...)
+ * @returns  the string with all the user styles
+ */
+export const createCssStyles = (
+  config: MermaidConfig,
+  graphType: string,
+  classDefs: Record | null | undefined = {}
+): string => {
+  let cssStyles = '';
+
+  // user provided theme CSS info
+  // If you add more configuration driven data into the user styles make sure that the value is
+  // sanitized by the sanitize CSS function TODO where is this method?  what should be used to replace it?  refactor so that it's always sanitized
+  if (config.themeCSS !== undefined) {
+    cssStyles += `\n${config.themeCSS}`;
+  }
+
+  if (config.fontFamily !== undefined) {
+    cssStyles += `\n:root { --mermaid-font-family: ${config.fontFamily}}`;
+  }
+  if (config.altFontFamily !== undefined) {
+    cssStyles += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
+  }
+
+  // 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?
+
+    const cssHtmlElements = ['> *', 'span']; // TODO make a constant
+    const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant
+
+    const cssElements = htmlLabels ? cssHtmlElements : cssShapeElements;
+
+    // create the CSS styles needed for each styleClass definition and css element
+    for (const classId in classDefs) {
+      const styleClassDef = classDefs[classId];
+      // create the css styles for each cssElement and the styles (only if there are styles)
+      if (!isEmpty(styleClassDef.styles)) {
+        cssElements.forEach((cssElement) => {
+          cssStyles += cssImportantStyles(styleClassDef.id, cssElement, styleClassDef.styles);
+        });
+      }
+      // create the css styles for the tspan element and the text styles (only if there are textStyles)
+      if (!isEmpty(styleClassDef.textStyles)) {
+        cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles);
+      }
+    }
+  }
+  return cssStyles;
+};
+
+export const createUserStyles = (
+  config: MermaidConfig,
+  graphType: string,
+  classDefs: Record,
+  svgId: string
+): string => {
+  const userCSSstyles = createCssStyles(config, graphType, classDefs);
+  const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables);
+
+  // Now turn all of the styles into a (compiled) string that starts with the id
+  // use the stylis library to compile the css, turn the results into a valid CSS string (serialize(...., stringify))
+  // @see https://github.com/thysultan/stylis
+  return serialize(compile(`${svgId}{${allStyles}}`), stringify);
+};
+
+/**
+ * Clean up svgCode. Do replacements needed
+ *
+ * @param svgCode - the code to clean up
+ * @param inSandboxMode - security level
+ * @param useArrowMarkerUrls - should arrow marker's use full urls? (vs. just the anchors)
+ * @returns the cleaned up svgCode
+ */
+export const cleanUpSvgCode = (
+  svgCode = '',
+  inSandboxMode: boolean,
+  useArrowMarkerUrls: boolean
+): string => {
+  let cleanedUpSvg = svgCode;
+
+  // Replace marker-end urls with just the # anchor (remove the preceding part of the URL)
+  if (!useArrowMarkerUrls && !inSandboxMode) {
+    cleanedUpSvg = cleanedUpSvg.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#');
+  }
+
+  cleanedUpSvg = decodeEntities(cleanedUpSvg);
+
+  // replace old br tags with newer style
+  cleanedUpSvg = cleanedUpSvg.replace(/
/g, '
');
+
+  return cleanedUpSvg;
+};
+
+/**
+ * Put the svgCode into an iFrame. Return the iFrame code
+ *
+ * @param svgCode - the svg code to put inside the iFrame
+ * @param svgElement - the d3 node that has the current svgElement so we can get the height from it
+ * @returns  - the code with the iFrame that now contains the svgCode
+ * TODO replace btoa(). Replace with  buf.toString('base64')?
+ */
+export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
+  const height = svgElement ? svgElement.viewBox.baseVal.height + 'px' : IFRAME_HEIGHT;
+  const base64encodedSrc = btoa('' + svgCode + '');
+  return ``;
+};
+
+/**
+ * Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
+ * Only set the style attribute on the enclosing div if divStyle is given.
+ * Only set the xmlns:xlink attribute on svg if svgXlink is given.
+ * Return the last node appended
+ *
+ * @param parentRoot - the d3 node to append things to
+ * @param id - the value to set the id attr to
+ * @param enclosingDivId - the id to set the enclosing div to
+ * @param divStyle - if given, the style to set the enclosing div to
+ * @param svgXlink - if given, the link to set the new svg element to
+ * @returns - returns the parentRoot that had nodes appended
+ */
+export const appendDivSvgG = (
+  parentRoot: D3Element,
+  id: string,
+  enclosingDivId: string,
+  divStyle?: string,
+  svgXlink?: string
+): D3Element => {
+  const enclosingDiv = parentRoot.append('div');
+  enclosingDiv.attr('id', enclosingDivId);
+  if (divStyle) {
+    enclosingDiv.attr('style', divStyle);
+  }
+
+  const svgNode = enclosingDiv
+    .append('svg')
+    .attr('id', id)
+    .attr('width', '100%')
+    .attr('xmlns', XMLNS_SVG_STD);
+  if (svgXlink) {
+    svgNode.attr('xmlns:xlink', svgXlink);
+  }
+
+  svgNode.append('g');
+  return parentRoot;
+};
+
+/**
+ * Append an iFrame node to the given parentNode and set the id, style, and 'sandbox' attributes
+ *  Return the appended iframe d3 node
+ *
+ * @param parentNode - the d3 node to append the iFrame node to
+ * @param iFrameId - id to use for the iFrame
+ * @returns the appended iframe d3 node
+ */
+function sandboxedIframe(parentNode: D3Element, iFrameId: string): D3Element {
+  return parentNode
+    .append('iframe')
+    .attr('id', iFrameId)
+    .attr('style', 'width: 100%; height: 100%;')
+    .attr('sandbox', '');
+}
+
+/**
+ * Remove any existing elements from the given document
+ *
+ * @param doc - the document to removed elements from
+ * @param id - id for any existing SVG element
+ * @param divSelector - selector for any existing enclosing div element
+ * @param iFrameSelector - selector for any existing iFrame element
+ */
+export const removeExistingElements = (
+  doc: Document,
+  id: string,
+  divId: string,
+  iFrameId: string
+) => {
+  // Remove existing SVG element if it exists
+  doc.getElementById(id)?.remove();
+  // Remove previous temporary element if it exists
+  // Both div and iframe needs to be cleared in case there is a config change happening between renders.
+  doc.getElementById(divId)?.remove();
+  doc.getElementById(iFrameId)?.remove();
+};
+
 /**
  * Function that renders an svg with a graph from a chart definition. Usage example below.
  *
@@ -113,11 +362,12 @@ export const decodeEntities = function (text: string): string {
  * });
  * ```
  *
- * @param {string} id The id of the element to be rendered
- * @param {string} text The graph definition
- * @param cb - Optional callback which
- *   is called after rendering is finished with the svg code as inparam.
- * @param {Element} container Selector to element in which a div with the graph temporarily will be
+ * @param id - The id for the SVG element (the element to be rendered)
+ * @param text - The text for the graph definition
+ * @param cb - Callback which is called after rendering is finished with the svg code as in param.
+ * @param svgContainingElement - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
+ *   If no svgContainingElement is provided then the SVG element will be appended to the body.
+ *    Selector to element in which a div with the graph temporarily will be
  *   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
  * @returns Returns the rendered element as a string containing the SVG definition.
@@ -126,194 +376,133 @@ const render = function (
   id: string,
   text: string,
   cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
-  container?: Element
+  svgContainingElement?: Element
 ): string {
   addDiagrams();
+
   configApi.reset();
-  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+
+  // Add Directives. Must do this before getting the config and before creating the diagram.
   const graphInit = utils.detectInit(text);
   if (graphInit) {
     directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
   }
-  const cnf = configApi.getConfig();
 
-  log.debug(cnf);
+  const config = configApi.getConfig();
+  log.debug(config);
 
   // Check the maximum allowed text size
-  if (text.length > cnf.maxTextSize!) {
-    text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+  // TODO: Remove magic number
+  if (text.length > (config?.maxTextSize ?? 50000)) {
+    text = MAX_TEXTLENGTH_EXCEEDED_MSG;
   }
 
+  // clean up text CRLFs
+  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+
+  const idSelector = '#' + id;
+  const iFrameID = 'i' + id;
+  const iFrameID_selector = '#' + iFrameID;
+  const enclosingDivID = 'd' + id;
+  const enclosingDivID_selector = '#' + enclosingDivID;
+
   let root: any = select('body');
 
-  // In regular execution the container will be the div with a mermaid class
-  if (typeof container !== 'undefined') {
-    // A container was provided by the caller
-    if (container) {
-      container.innerHTML = '';
+  const isSandboxed = config.securityLevel === SECURITY_LVL_SANDBOX;
+  const isLooseSecurityLevel = config.securityLevel === SECURITY_LVL_LOOSE;
+
+  const fontFamily = config.fontFamily;
+
+  // -------------------------------------------------------------------------------
+  // Define the root d3 node
+  // In regular execution the svgContainingElement will be the element with a mermaid class
+
+  if (svgContainingElement !== undefined) {
+    if (svgContainingElement) {
+      svgContainingElement.innerHTML = '';
     }
 
-    if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
-      // in a sandboxed div
-      const iframe = select(container)
-        .append('iframe')
-        .attr('id', 'i' + id)
-        .attr('style', 'width: 100%; height: 100%;')
-        .attr('sandbox', '');
-      // const iframeBody = ;
+    if (isSandboxed) {
+      // If we are in sandboxed mode, we do everything mermaid related in a (sandboxed )iFrame
+      const iframe = sandboxedIframe(select(svgContainingElement), iFrameID);
       root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
-      root = select(container);
+      root = select(svgContainingElement);
     }
-
-    root
-      .append('div')
-      .attr('id', 'd' + id)
-      .attr('style', 'font-family: ' + cnf.fontFamily)
-      .append('svg')
-      .attr('id', id)
-      .attr('width', '100%')
-      .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
-      .append('g');
+    appendDivSvgG(root, id, enclosingDivID, `font-family: ${fontFamily}`, XMLNS_XLINK_STD);
   } else {
-    // No container was provided
-    // If there is an existing element with the id, we remove it
-    // this likely a previously rendered diagram
-    const existingSvg = document.getElementById(id);
-    if (existingSvg) {
-      existingSvg.remove();
-    }
+    // No svgContainingElement was provided
 
-    // Remove previous tpm element if it exists
-    let element;
-    if (cnf.securityLevel === 'sandbox') {
-      element = document.querySelector('#i' + id);
-    } else {
-      element = document.querySelector('#d' + id);
-    }
+    // If there is an existing element with the id, we remove it. This likely a previously rendered diagram
+    removeExistingElements(document, id, enclosingDivID, iFrameID);
 
-    if (element) {
-      element.remove();
-    }
-
-    // Add the tmp div used for rendering with the id `d${id}`
-    // d+id it will contain a svg with the id "id"
-
-    if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
-      // in a sandboxed div
-      const iframe = select('body')
-        .append('iframe')
-        .attr('id', 'i' + id)
-        .attr('style', 'width: 100%; height: 100%;')
-        .attr('sandbox', '');
+    // Add the temporary div used for rendering with the enclosingDivID.
+    // This temporary div will contain a svg with the id == id
 
+    if (isSandboxed) {
+      // If we are in sandboxed mode, we do everything mermaid related in a (sandboxed) iFrame
+      const iframe = sandboxedIframe(select('body'), iFrameID);
       root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
       root = select('body');
     }
 
-    // This is the temporary div
-    root
-      .append('div')
-      .attr('id', 'd' + id)
-      // this is the seed of the svg to be rendered
-      .append('svg')
-      .attr('id', id)
-      .attr('width', '100%')
-      .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .append('g');
+    appendDivSvgG(root, id, enclosingDivID);
   }
 
   text = encodeEntities(text);
 
+  // -------------------------------------------------------------------------------
+  // Create the diagram
+
   // Important that we do not create the diagram until after the directives have been included
   let diag;
   let parseEncounteredException;
+
   try {
     // diag = new Diagram(text);
     diag = getDiagramFromText(text);
     if ('then' in diag) {
-      throw new Error('Diagram is a promise');
+      throw new Error('Diagram is a promise. Use renderAsync.');
     }
   } catch (error) {
     diag = new Diagram('error');
     parseEncounteredException = error;
   }
-  // Get the tmp element containing the the svg
-  const element = root.select('#d' + id).node();
+
+  // Get the temporary div element containing the svg (the parent HTML Element)
+  const element = root.select(enclosingDivID_selector).node();
   const graphType = diag.type;
 
-  // insert inline style into svg
+  // -------------------------------------------------------------------------------
+  // Create and insert the styles (user styles, theme styles, config styles)
+  //  These are dealing with HTML Elements, not d3 nodes.
+
+  // Insert an element into svg. This is where we put the styles
   const svg = element.firstChild;
   const firstChild = svg.firstChild;
-
-  let userStyles = '';
-  // user provided theme CSS
-  // If you add more configuration driven data into the user styles make sure that the value is
-  // sanitized bye the santiizeCSS function
-  if (cnf.themeCSS !== undefined) {
-    userStyles += `\n${cnf.themeCSS}`;
-  }
-  // user provided theme CSS
-  if (cnf.fontFamily !== undefined) {
-    userStyles += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
-  }
-  // user provided theme CSS
-  if (cnf.altFontFamily !== undefined) {
-    userStyles += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
-  }
-
-  // classDef
-  if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes: any = flowRenderer.getClasses(text, diag);
-    const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
-    for (const className in classes) {
-      if (htmlLabels) {
-        userStyles += `\n.${className} > * { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} span { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-      } else {
-        userStyles += `\n.${className} path { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} rect { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} polygon { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} ellipse { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} circle { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        if (classes[className].textStyles) {
-          userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
-            ' !important; '
-          )} !important; }`;
-        }
-      }
-    }
-  }
-
-  const stylis = (selector: string, styles: string) =>
-    serialize(compile(`${selector}{${styles}}`), stringify);
-  const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
-
+  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
+    ? diag.renderer.getClasses(text, diag)
+    : {};
+
+  const rules = createUserStyles(
+    config,
+    graphType,
+    // @ts-ignore convert renderer to TS.
+    diagramClassDefs,
+    idSelector
+  );
+
+  // svg is a HTML element (not a d3 node)
   const style1 = document.createElement('style');
-  style1.innerHTML = `#${id} ` + rules;
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
+  // -------------------------------------------------------------------------------
+  // Draw the diagram with the renderer
   try {
     diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
@@ -321,46 +510,36 @@ const render = function (
     throw e;
   }
 
-  root
-    .select(`[id="${id}"]`)
-    .selectAll('foreignobject > *')
-    .attr('xmlns', 'http://www.w3.org/1999/xhtml');
-
-  // Fix for when the base tag is used
-  let svgCode = root.select('#d' + id).node().innerHTML;
+  // 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);
 
-  log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
-  if (!evaluate(cnf.arrowMarkerAbsolute) && cnf.securityLevel !== 'sandbox') {
-    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
-  }
+  // -------------------------------------------------------------------------------
+  // Clean up SVG code
+  root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);
 
-  svgCode = decodeEntities(svgCode);
+  // Fix for when the base tag is used
+  let svgCode = root.select(enclosingDivID_selector).node().innerHTML;
 
-  // Fix for when the br tag is used
-  svgCode = svgCode.replace(/
/g, '
');
+  log.debug('config.arrowMarkerAbsolute', config.arrowMarkerAbsolute);
+  svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
 
-  if (cnf.securityLevel === 'sandbox') {
-    const svgEl = root.select('#d' + id + ' svg').node();
-    const width = '100%';
-    let height = '100%';
-    if (svgEl) {
-      height = svgEl.viewBox.baseVal.height + 'px';
-    }
-    svgCode = ``;
-  } else {
-    if (cnf.securityLevel !== 'loose') {
-      svgCode = DOMPurify.sanitize(svgCode, {
-        ADD_TAGS: ['foreignobject'],
-        ADD_ATTR: ['dominant-baseline'],
-      });
-    }
+  if (isSandboxed) {
+    const svgEl = root.select(enclosingDivID_selector + ' svg').node();
+    svgCode = putIntoIFrame(svgCode, svgEl);
+  } else if (!isLooseSecurityLevel) {
+    // Sanitize the svgCode using DOMPurify
+    svgCode = DOMPurify.sanitize(svgCode, {
+      ADD_TAGS: DOMPURIFY_TAGS,
+      ADD_ATTR: DOMPURIFY_ATTR,
+    });
   }
 
-  if (typeof cb !== 'undefined') {
+  // -------------------------------------------------------------------------------
+  // Do any callbacks (cb = callback)
+  if (cb !== undefined) {
     switch (graphType) {
       case 'flowchart':
       case 'flowchart-v2':
@@ -381,7 +560,9 @@ const render = function (
   }
   attachFunctions();
 
-  const tmpElementSelector = cnf.securityLevel === 'sandbox' ? '#i' + id : '#d' + id;
+  // -------------------------------------------------------------------------------
+  // Remove the temporary element if appropriate
+  const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
   const node = select(tmpElementSelector).node();
   if (node && 'remove' in node) {
     node.remove();
@@ -402,115 +583,92 @@ const renderAsync = async function (
   id: string,
   text: string,
   cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
-  container?: Element
+  svgContainingElement?: Element
 ): Promise {
   addDiagrams();
+
   configApi.reset();
-  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+
+  // Add Directives. Must do this before getting the config and before creating the diagram.
   const graphInit = utils.detectInit(text);
   if (graphInit) {
     directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
   }
-  const cnf = configApi.getConfig();
 
-  log.debug(cnf);
+  const config = configApi.getConfig();
+  log.debug(config);
 
   // Check the maximum allowed text size
-  if (text.length > cnf.maxTextSize!) {
-    text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+  // TODO: Remove magic number
+  if (text.length > (config?.maxTextSize ?? 50000)) {
+    text = MAX_TEXTLENGTH_EXCEEDED_MSG;
   }
 
+  // clean up text CRLFs
+  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+
+  const idSelector = '#' + id;
+  const iFrameID = 'i' + id;
+  const iFrameID_selector = '#' + iFrameID;
+  const enclosingDivID = 'd' + id;
+  const enclosingDivID_selector = '#' + enclosingDivID;
+
   let root: any = select('body');
 
-  // In regular execution the container will be the div with a mermaid class
-  if (typeof container !== 'undefined') {
-    // A container was provided by the caller
-    if (container) {
-      container.innerHTML = '';
+  const isSandboxed = config.securityLevel === SECURITY_LVL_SANDBOX;
+  const isLooseSecurityLevel = config.securityLevel === SECURITY_LVL_LOOSE;
+
+  const fontFamily = config.fontFamily;
+
+  // -------------------------------------------------------------------------------
+  // Define the root d3 node
+  // In regular execution the svgContainingElement will be the element with a mermaid class
+
+  if (svgContainingElement !== undefined) {
+    if (svgContainingElement) {
+      svgContainingElement.innerHTML = '';
     }
 
-    if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
-      // in a sandboxed div
-      const iframe = select(container)
-        .append('iframe')
-        .attr('id', 'i' + id)
-        .attr('style', 'width: 100%; height: 100%;')
-        .attr('sandbox', '');
-      // const iframeBody = ;
+    if (isSandboxed) {
+      // If we are in sandboxed mode, we do everything mermaid related in a (sandboxed )iFrame
+      const iframe = sandboxedIframe(select(svgContainingElement), iFrameID);
       root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
-      root = select(container);
+      root = select(svgContainingElement);
     }
-
-    root
-      .append('div')
-      .attr('id', 'd' + id)
-      .attr('style', 'font-family: ' + cnf.fontFamily)
-      .append('svg')
-      .attr('id', id)
-      .attr('width', '100%')
-      .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
-      .append('g');
+    appendDivSvgG(root, id, enclosingDivID, `font-family: ${fontFamily}`, XMLNS_XLINK_STD);
   } else {
-    // No container was provided
-    // If there is an existing element with the id, we remove it
-    // this likely a previously rendered diagram
-    const existingSvg = document.getElementById(id);
-    if (existingSvg) {
-      existingSvg.remove();
-    }
+    // No svgContainingElement was provided
 
-    // Remove previous tpm element if it exists
-    let element;
-    if (cnf.securityLevel === 'sandbox') {
-      element = document.querySelector('#i' + id);
-    } else {
-      element = document.querySelector('#d' + id);
-    }
-
-    if (element) {
-      element.remove();
-    }
+    // If there is an existing element with the id, we remove it. This likely a previously rendered diagram
+    removeExistingElements(document, id, enclosingDivID, iFrameID);
 
-    // Add the tmp div used for rendering with the id `d${id}`
-    // d+id it will contain a svg with the id "id"
-
-    if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
-      // in a sandboxed div
-      const iframe = select('body')
-        .append('iframe')
-        .attr('id', 'i' + id)
-        .attr('style', 'width: 100%; height: 100%;')
-        .attr('sandbox', '');
+    // Add the temporary div used for rendering with the enclosingDivID.
+    // This temporary div will contain a svg with the id == id
 
+    if (isSandboxed) {
+      // If we are in sandboxed mode, we do everything mermaid related in a (sandboxed) iFrame
+      const iframe = sandboxedIframe(select('body'), iFrameID);
       root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
       root = select('body');
     }
 
-    // This is the temporary div
-    root
-      .append('div')
-      .attr('id', 'd' + id)
-      // this is the seed of the svg to be rendered
-      .append('svg')
-      .attr('id', id)
-      .attr('width', '100%')
-      .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .append('g');
+    appendDivSvgG(root, id, enclosingDivID);
   }
 
   text = encodeEntities(text);
 
+  // -------------------------------------------------------------------------------
+  // Create the diagram
+
   // Important that we do not create the diagram until after the directives have been included
   let diag;
   let parseEncounteredException;
+
   try {
     // diag = new Diagram(text);
     diag = await getDiagramFromText(text);
@@ -518,75 +676,35 @@ const renderAsync = async function (
     diag = new Diagram('error');
     parseEncounteredException = error;
   }
-  // Get the tmp element containing the the svg
-  const element = root.select('#d' + id).node();
+
+  // Get the temporary div element containing the svg
+  const element = root.select(enclosingDivID_selector).node();
   const graphType = diag.type;
 
-  // insert inline style into svg
+  // -------------------------------------------------------------------------------
+  // Create and insert the styles (user styles, theme styles, config styles)
+
+  // Insert an element into svg. This is where we put the styles
   const svg = element.firstChild;
   const firstChild = svg.firstChild;
-
-  let userStyles = '';
-  // user provided theme CSS
-  // If you add more configuration driven data into the user styles make sure that the value is
-  // sanitized bye the santiizeCSS function
-  if (cnf.themeCSS !== undefined) {
-    userStyles += `\n${cnf.themeCSS}`;
-  }
-  // user provided theme CSS
-  if (cnf.fontFamily !== undefined) {
-    userStyles += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
-  }
-  // user provided theme CSS
-  if (cnf.altFontFamily !== undefined) {
-    userStyles += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
-  }
-
-  // classDef
-  if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes: any = flowRenderer.getClasses(text, diag);
-    const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
-    for (const className in classes) {
-      if (htmlLabels) {
-        userStyles += `\n.${className} > * { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} span { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-      } else {
-        userStyles += `\n.${className} path { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} rect { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} polygon { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} ellipse { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        userStyles += `\n.${className} circle { ${classes[className].styles.join(
-          ' !important; '
-        )} !important; }`;
-        if (classes[className].textStyles) {
-          userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
-            ' !important; '
-          )} !important; }`;
-        }
-      }
-    }
-  }
-
-  const stylis = (selector: string, styles: string) =>
-    serialize(compile(`${selector}{${styles}}`), stringify);
-  const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
+  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
+    ? diag.renderer.getClasses(text, diag)
+    : {};
+
+  const rules = createUserStyles(
+    config,
+    graphType,
+    // @ts-ignore convert renderer to TS.
+    diagramClassDefs,
+    idSelector
+  );
 
   const style1 = document.createElement('style');
-  style1.innerHTML = `#${id} ` + rules;
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
+  // -------------------------------------------------------------------------------
+  // Draw the diagram with the renderer
   try {
     await diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
@@ -594,46 +712,36 @@ const renderAsync = async function (
     throw e;
   }
 
-  root
-    .select(`[id="${id}"]`)
-    .selectAll('foreignobject > *')
-    .attr('xmlns', 'http://www.w3.org/1999/xhtml');
+  // 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);
 
-  // Fix for when the base tag is used
-  let svgCode = root.select('#d' + id).node().innerHTML;
-
-  log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
-  if (!evaluate(cnf.arrowMarkerAbsolute) && cnf.securityLevel !== 'sandbox') {
-    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
-  }
+  // -------------------------------------------------------------------------------
+  // Clean up SVG code
+  root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);
 
-  svgCode = decodeEntities(svgCode);
+  // Fix for when the base tag is used
+  let svgCode = root.select(enclosingDivID_selector).node().innerHTML;
 
-  // Fix for when the br tag is used
-  svgCode = svgCode.replace(/
/g, '
');
+  log.debug('config.arrowMarkerAbsolute', config.arrowMarkerAbsolute);
+  svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
 
-  if (cnf.securityLevel === 'sandbox') {
-    const svgEl = root.select('#d' + id + ' svg').node();
-    const width = '100%';
-    let height = '100%';
-    if (svgEl) {
-      height = svgEl.viewBox.baseVal.height + 'px';
-    }
-    svgCode = ``;
-  } else {
-    if (cnf.securityLevel !== 'loose') {
-      svgCode = DOMPurify.sanitize(svgCode, {
-        ADD_TAGS: ['foreignobject'],
-        ADD_ATTR: ['dominant-baseline'],
-      });
-    }
+  if (isSandboxed) {
+    const svgEl = root.select(enclosingDivID_selector + ' svg').node();
+    svgCode = putIntoIFrame(svgCode, svgEl);
+  } else if (!isLooseSecurityLevel) {
+    // Sanitize the svgCode using DOMPurify
+    svgCode = DOMPurify.sanitize(svgCode, {
+      ADD_TAGS: DOMPURIFY_TAGS,
+      ADD_ATTR: DOMPURIFY_ATTR,
+    });
   }
 
-  if (typeof cb !== 'undefined') {
+  // -------------------------------------------------------------------------------
+  // Do any callbacks (cb = callback)
+  if (cb !== undefined) {
     switch (graphType) {
       case 'flowchart':
       case 'flowchart-v2':
@@ -654,7 +762,9 @@ const renderAsync = async function (
   }
   attachFunctions();
 
-  const tmpElementSelector = cnf.securityLevel === 'sandbox' ? '#i' + id : '#d' + id;
+  // -------------------------------------------------------------------------------
+  // Remove the temporary HTML element if appropriate
+  const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
   const node = select(tmpElementSelector).node();
   if (node && 'remove' in node) {
     node.remove();
@@ -678,11 +788,15 @@ const parseDirective = function (p: any, statement: string, context: string, typ
           currentDirective = {};
           break;
         case 'type_directive':
-          if (!currentDirective) throw new Error('currentDirective is undefined');
+          if (!currentDirective) {
+            throw new Error('currentDirective is undefined');
+          }
           currentDirective.type = statement.toLowerCase();
           break;
         case 'arg_directive':
-          if (!currentDirective) throw new Error('currentDirective is undefined');
+          if (!currentDirective) {
+            throw new Error('currentDirective is undefined');
+          }
           currentDirective.args = JSON.parse(statement);
           break;
         case 'close_directive':
@@ -706,7 +820,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
     case 'init':
     case 'initialize': {
       ['config'].forEach((prop) => {
-        if (typeof directive.args[prop] !== 'undefined') {
+        if (directive.args[prop] !== undefined) {
           if (type === 'flowchart-v2') {
             type = 'flowchart';
           }
@@ -740,14 +854,13 @@ const handleDirective = function (p: any, directive: any, type: string): void {
   }
 };
 
-/** @param {MermaidConfig} options */
+/**
+ * @param  options - Initial Mermaid options
+ */
 function initialize(options: MermaidConfig = {}) {
   // Handle legacy location of font-family configuration
-  if (options.fontFamily) {
-    if (!options.themeVariables) {
-      options.themeVariables = {};
-    }
-    options.themeVariables.fontFamily = options.fontFamily;
+  if (options?.fontFamily && !options.themeVariables?.fontFamily) {
+    options.themeVariables = { fontFamily: options.fontFamily };
   }
 
   // Set default options
@@ -769,36 +882,25 @@ function initialize(options: MermaidConfig = {}) {
   addDiagrams();
 }
 
-export const mermaidAPI = Object.freeze({
-  render,
-  renderAsync,
-  parse,
-  parseAsync,
-  parseDirective,
-  initialize,
-  getConfig: configApi.getConfig,
-  setConfig: configApi.setConfig,
-  getSiteConfig: configApi.getSiteConfig,
-  updateSiteConfig: configApi.updateSiteConfig,
-  reset: () => {
-    configApi.reset();
-  },
-  globalReset: () => {
-    configApi.reset(configApi.defaultConfig);
-  },
-  defaultConfig: configApi.defaultConfig,
-});
-
-setLogLevel(configApi.getConfig().logLevel);
-configApi.reset(configApi.getConfig());
-export default mermaidAPI;
+/**
+ * Add accessibility (a11y) information to the diagram.
+ *
+ */
+function addA11yInfo(
+  graphType: string,
+  svgNode: D3Element,
+  a11yTitle: string | undefined,
+  a11yDescr: string | undefined
+) {
+  setA11yDiagramInfo(svgNode, graphType);
+  addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
+}
 
 /**
  * ## mermaidAPI configuration defaults
  *
- * ```html
- * 
  * ```
  */
+
+export const mermaidAPI = Object.freeze({
+  render,
+  renderAsync,
+  parse,
+  parseAsync,
+  parseDirective,
+  initialize,
+  getConfig: configApi.getConfig,
+  setConfig: configApi.setConfig,
+  getSiteConfig: configApi.getSiteConfig,
+  updateSiteConfig: configApi.updateSiteConfig,
+  reset: () => {
+    configApi.reset();
+  },
+  globalReset: () => {
+    configApi.reset(configApi.defaultConfig);
+  },
+  defaultConfig: configApi.defaultConfig,
+});
+
+setLogLevel(configApi.getConfig().logLevel);
+configApi.reset(configApi.getConfig());
+export default mermaidAPI;
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 8ffdab5e75..14929d3d71 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -1,7 +1,7 @@
 import { log } from './logger';
 
 /**
- * Applys d3 attributes
+ * Applies d3 attributes
  *
  * @param {any} d3Elem D3 Element to apply the attributes onto
  * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes
@@ -26,6 +26,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
     attrs.set('width', '100%');
     attrs.set('style', `max-width: ${width}px;`);
   } else {
+    attrs.set('height', height);
     attrs.set('width', width);
   }
   return attrs;
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 0c4a7e1a58..055f63be5d 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -53,7 +53,7 @@ const getStyles = (
   } else {
     log.warn(`No theme found for ${type}`);
   }
-  return ` {
+  return ` & {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
     fill: ${options.textColor}
@@ -61,40 +61,40 @@ const getStyles = (
 
   /* Classes common for multiple diagrams */
 
-  .error-icon {
+  & .error-icon {
     fill: ${options.errorBkgColor};
   }
-  .error-text {
+  & .error-text {
     fill: ${options.errorTextColor};
     stroke: ${options.errorTextColor};
   }
 
-  .edge-thickness-normal {
+  & .edge-thickness-normal {
     stroke-width: 2px;
   }
-  .edge-thickness-thick {
+  & .edge-thickness-thick {
     stroke-width: 3.5px
   }
-  .edge-pattern-solid {
+  & .edge-pattern-solid {
     stroke-dasharray: 0;
   }
 
-  .edge-pattern-dashed{
+  & .edge-pattern-dashed{
     stroke-dasharray: 3;
   }
   .edge-pattern-dotted {
     stroke-dasharray: 2;
   }
 
-  .marker {
+  & .marker {
     fill: ${options.lineColor};
     stroke: ${options.lineColor};
   }
-  .marker.cross {
+  & .marker.cross {
     stroke: ${options.lineColor};
   }
 
-  svg {
+  & svg {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
   }
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
new file mode 100644
index 0000000000..284b21b08c
--- /dev/null
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -0,0 +1,146 @@
+/**
+ * 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.
+ *
+ * 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 id: string | undefined = '';
+  _children: MockedD3[] = [];
+
+  _containingHTMLdoc = new Document();
+
+  constructor(givenId = 'mock-id') {
+    this.id = givenId;
+  }
+
+  /** Helpful utility during development/debugging. This is not a real d3 function */
+  public listChildren(): string {
+    return this._children
+      .map((child) => {
+        return child.id;
+      })
+      .join(', ');
+  }
+
+  select = vi.fn().mockImplementation(({ select_str = '' }): MockedD3 => {
+    // Get the id from an argument string. if it is of the form [id='some-id'], strip off the
+    // surrounding id[..]
+    const stripSurroundRegexp = /\[id='(.*)']/;
+    const matchedSurrounds = select_str.match(stripSurroundRegexp);
+    const cleanId = matchedSurrounds ? matchedSurrounds[1] : select_str;
+    return new MockedD3(cleanId);
+  });
+
+  // This has the same implementation as select(). (It calls it.)
+  selectAll = vi.fn().mockImplementation(({ select_str = '' }): MockedD3 => {
+    return this.select(select_str);
+  });
+
+  append = vi
+    .fn()
+    .mockImplementation(function (this: MockedD3, type: string, id = '' + '-appended'): MockedD3 {
+      const newMock = new MockedD3(id);
+      newMock.attribs.set('type', type);
+      this._children.push(newMock);
+      return newMock;
+    });
+
+  // NOTE: The d3 implementation allows for a selector ('beforeSelector' arg below).
+  //   With this mocked implementation, we assume it will always refer to an node id
+  //   and will always be of the form "#[id of the node to insert before]".
+  //   To keep this simple, any leading '#' is removed and the resulting string is the node id searched.
+  insert = (type: string, beforeSelector?: string, id = this.id + '-inserted'): MockedD3 => {
+    const newMock = new MockedD3(id);
+    newMock.attribs.set('type', type);
+    if (beforeSelector === undefined) {
+      this._children.push(newMock);
+    } else {
+      const idOnly = beforeSelector[0] == '#' ? beforeSelector.substring(1) : beforeSelector;
+      const foundIndex = this._children.findIndex((child) => child.id === idOnly);
+      if (foundIndex < 0) {
+        this._children.push(newMock);
+      } else {
+        this._children.splice(foundIndex, 0, newMock);
+      }
+    }
+    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 {
+    if (arguments.length === 1) {
+      return this.attribs.get(attrName);
+    } else {
+      if (attrName === 'id') {
+        this.id = attrValue; // also set the id explicitly
+      }
+      if (attrValue !== undefined) {
+        this.attribs.set(attrName, attrValue);
+      }
+      return this;
+    }
+  }
+
+  public lower(attrValue = '') {
+    this.attribs.set('lower', attrValue);
+    return this;
+  }
+  public style(attrValue = '') {
+    this.attribs.set('style', attrValue);
+    return this;
+  }
+  public text(attrValue = '') {
+    this.attribs.set('text', attrValue);
+    return this;
+  }
+
+  // NOTE: Returns a HTML Element with tag 'svg' that has _another_ 'svg' element child.
+  // This allows different tests to succeed -- some need a top level 'svg' and some need a 'svg' element to be the firstChild
+  // Real implementation returns an HTML Element
+  public node = vi.fn().mockImplementation(() => {
+    const topElem = this._containingHTMLdoc.createElement('svg');
+    const elem_svgChild = this._containingHTMLdoc.createElement('svg'); // another svg element
+    topElem.appendChild(elem_svgChild);
+    return topElem;
+  });
+
+  // TODO Is this correct? shouldn't it return a list of HTML Elements?
+  nodes = vi.fn().mockImplementation(function (this: MockedD3): MockedD3[] {
+    return this._children;
+  });
+
+  // This will try to use attrs that have been set.
+  getBBox = () => {
+    const x = this.attribs.has('x') ? this.attribs.get('x') : 20;
+    const y = this.attribs.has('y') ? this.attribs.get('y') : 30;
+    const width = this.attribs.has('width') ? this.attribs.get('width') : 140;
+    const height = this.attribs.has('height') ? this.attribs.get('height') : 250;
+    return {
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+    };
+  };
+
+  // --------------------------------------------------------------------------------
+  // The following functions are here for completeness.  They simply return a vi.fn()
+
+  insertBefore = vi.fn();
+  curveBasis = vi.fn();
+  curveBasisClosed = vi.fn();
+  curveBasisOpen = vi.fn();
+  curveLinear = vi.fn();
+  curveLinearClosed = vi.fn();
+  curveMonotoneX = vi.fn();
+  curveMonotoneY = vi.fn();
+  curveNatural = vi.fn();
+  curveStep = vi.fn();
+  curveStepAfter = vi.fn();
+  curveStepBefore = vi.fn();
+}
diff --git a/packages/mermaid/src/tests/setup.ts b/packages/mermaid/src/tests/setup.ts
index e8058c5179..b3330787cc 100644
--- a/packages/mermaid/src/tests/setup.ts
+++ b/packages/mermaid/src/tests/setup.ts
@@ -1,3 +1,3 @@
 import { vi } from 'vitest';
 vi.mock('d3');
-vi.mock('dagre-d3');
+vi.mock('dagre-d3-es');
diff --git a/packages/mermaid/src/tests/util.ts b/packages/mermaid/src/tests/util.ts
index 76f8572e3d..042f2cb432 100644
--- a/packages/mermaid/src/tests/util.ts
+++ b/packages/mermaid/src/tests/util.ts
@@ -26,7 +26,7 @@ ${'2w'}   | ${moment.duration(2, 'w')}
 ```
 */
 
-export const convert = (template: TemplateStringsArray, ...params: any[]) => {
+export const convert = (template: TemplateStringsArray, ...params: unknown[]) => {
   const header = template[0]
     .trim()
     .split('|')
diff --git a/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts b/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts
index 8f88a70cd7..95ce40e79b 100644
--- a/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts
+++ b/packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts
@@ -1,5 +1,5 @@
 /**
- * @file Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
+ * Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
  *   theme-_._ files to maintain display styles until themes, styles, renderers are revised. --
  *   2022-09-22
  */
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 0172df81b5..c940a00554 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -126,7 +126,7 @@ class Theme {
     this.specialStateColor = this.lineColor;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 707c342ef8..5ba63e1558 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -173,7 +173,7 @@ class Theme {
     this.cScale12 = this.cScale12 || '#010029';
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index a79a855a57..95710629bd 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -121,7 +121,7 @@ class Theme {
   }
   updateColors() {
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index aa30f0dafc..860326dea4 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -94,7 +94,7 @@ class Theme {
     this.errorTextColor = '#552222';
   }
   updateColors() {
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 7747a00dd3..f227103873 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -110,7 +110,7 @@ class Theme {
     this.border2 = this.contrast;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
 
     this.cScale0 = this.cScale0 || '#555';
     this.cScale1 = this.cScale1 || '#F4F4F4';
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 4a511b3c04..e9a9fc7dcd 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -3,7 +3,9 @@ import utils from './utils';
 import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
-import memoize from 'lodash/memoize';
+import memoize from 'lodash-es/memoize.js';
+import { MockedD3 } from './tests/MockedD3';
+
 addDiagrams();
 
 describe('when assignWithDepth: should merge objects within objects', function () {
@@ -232,6 +234,15 @@ Alice->Bob: hi`;
     const type = detectType(str);
     expect(type).toBe('gitGraph');
   });
+  it('should handle frontmatter', function () {
+    const str = '---\ntitle: foo\n---\n  gitGraph TB:\nbfs1:queue';
+    const type = detectType(str);
+    expect(type).toBe('gitGraph');
+  });
+  it('should not allow frontmatter with leading spaces', function () {
+    const str = '    ---\ntitle: foo\n---\n  gitGraph TB:\nbfs1:queue';
+    expect(() => detectType(str)).toThrow('No diagram type detected for text');
+  });
 });
 describe('when finding substring in array ', function () {
   it('should return the array index that contains the substring', function () {
@@ -340,3 +351,54 @@ describe('when initializing the id generator', function () {
     expect(idGenerator.next()).toEqual(lastId + 1);
   });
 });
+
+describe('when inserting titles', function () {
+  const svg = new MockedD3('svg');
+  const mockedElement = {
+    getBBox: vi.fn().mockReturnValue({ x: 10, y: 11, width: 100, height: 200 }),
+  };
+  const fauxTitle = new MockedD3('title');
+
+  beforeEach(() => {
+    svg.node = vi.fn().mockReturnValue(mockedElement);
+  });
+
+  it('does nothing if the title is empty', function () {
+    const svgAppendSpy = vi.spyOn(svg, 'append');
+    utils.insertTitle(svg, 'testClass', 0, '');
+    expect(svgAppendSpy).not.toHaveBeenCalled();
+  });
+
+  it('appends the title as a text item with the given title text', function () {
+    const svgAppendSpy = vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const titleTextSpy = vi.spyOn(fauxTitle, 'text');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(svgAppendSpy).toHaveBeenCalled();
+    expect(titleTextSpy).toHaveBeenCalledWith('test title');
+  });
+
+  it('x value is the bounds x position + half of the bounds width', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(titleAttrSpy).toHaveBeenCalledWith('x', 10 + 100 / 2);
+  });
+
+  it('y value is the negative of given title top margin', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(titleAttrSpy).toHaveBeenCalledWith('y', -5);
+  });
+
+  it('class is the given css class', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(titleAttrSpy).toHaveBeenCalledWith('class', 'testClass');
+  });
+});
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index f969ecc623..628bf37d3f 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -4,6 +4,7 @@ import {
   curveBasis,
   curveBasisClosed,
   curveBasisOpen,
+  CurveFactory,
   curveLinear,
   curveLinearClosed,
   curveMonotoneX,
@@ -20,7 +21,7 @@ import { log } from './logger';
 import { detectType } from './diagram-api/detectType';
 import assignWithDepth from './assignWithDepth';
 import { MermaidConfig } from './config.type';
-import memoize from 'lodash/memoize';
+import memoize from 'lodash-es/memoize.js';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
@@ -36,19 +37,18 @@ const d3CurveTypes = {
   curveStepAfter: curveStepAfter,
   curveStepBefore: curveStepBefore,
 };
-const directive =
-  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const directiveWithoutOpen =
-  /\s*(?:(?:(\w+)(?=:):|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+  /\s*(?:(\w+)(?=:):|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 
 /**
- * @function detectInit Detects the init config object from the text
- * @param config
+ * Detects the init config object from the text
  *
- *   ```mermaid
+ * @param text - The text defining the graph. For example:
  *
- *   %%{init: {"theme": "debug", "logLevel": 1 }}%%
- *   graph LR
+ * ```mermaid
+ * %%{init: {"theme": "debug", "logLevel": 1 }}%%
+ * graph LR
  *      a-->b
  *      b-->c
  *      c-->d
@@ -58,11 +58,11 @@ const directiveWithoutOpen =
  *      g-->h
  * ```
  *
- *   Or
+ * Or
  *
- *   ```mermaid
- *   %%{initialize: {"theme": "dark", logLevel: "debug" }}%%
- *   graph LR
+ * ```mermaid
+ * %%{initialize: {"theme": "dark", logLevel: "debug" }}%%
+ * graph LR
  *    a-->b
  *    b-->c
  *    c-->d
@@ -71,8 +71,9 @@ const directiveWithoutOpen =
  *    f-->g
  *    g-->h
  * ```
- * @param {string} text The text defining the graph
- * @returns {object} The json object representing the init passed to mermaid.initialize()
+ *
+ * @param config - Optional mermaid configuration object.
+ * @returns The json object representing the init passed to mermaid.initialize()
  */
 export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig {
   const inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
@@ -89,7 +90,7 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
   if (results) {
     let type = detectType(text, config);
     ['config'].forEach((prop) => {
-      if (typeof results[prop] !== 'undefined') {
+      if (results[prop] !== undefined) {
         if (type === 'flowchart-v2') {
           type = 'flowchart';
         }
@@ -104,12 +105,14 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
 };
 
 /**
- * @function detectDirective Detects the directive from the text. Text can be single line or
- *   multiline. If type is null or omitted the first directive encountered in text will be returned
+ * Detects the directive from the text.
+ *
+ * Text can be single line or multiline. If type is null or omitted,
+ * the first directive encountered in text will be returned
  *
- *   ```mermaid
- *   graph LR
- *    %%{somedirective}%%
+ * ```mermaid
+ * graph LR
+ * %%{someDirective}%%
  *    a-->b
  *    b-->c
  *    c-->d
@@ -118,13 +121,16 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
  *    f-->g
  *    g-->h
  * ```
- * @param {string} text The text defining the graph
- * @param {string | RegExp} type The directive to return (default: null)
- * @returns {object | Array} An object or Array representing the directive(s): { type: string, args:
- *   object|null } matched by the input type if a single directive was found, that directive object
- *   will be returned.
+ *
+ * @param text - The text defining the graph
+ * @param type - The directive to return (default: `null`)
+ * @returns An object or Array representing the directive(s) matched by the input type.
+ * If a single directive was found, that directive object will be returned.
  */
-export const detectDirective = function (text, type = null) {
+export const detectDirective = function (
+  text: string,
+  type: string | RegExp = null
+): { type?: string; args?: any } | { type?: string; args?: any }[] {
   try {
     const commentWithoutDirectives = new RegExp(
       `[%]{2}(?![{]${directiveWithoutOpen.source})(?=[}][%]{2}).*\n`,
@@ -166,14 +172,17 @@ export const detectDirective = function (text, type = null) {
 };
 
 /**
- * @function isSubstringInArray Detects whether a substring in present in a given array
- * @param {string} str The substring to detect
- * @param {Array} arr The array to search
- * @returns {number} The array index containing the substring or -1 if not present
+ * Detects whether a substring in present in a given array
+ *
+ * @param str - The substring to detect
+ * @param arr - The array to search
+ * @returns The array index containing the substring or -1 if not present
  */
-export const isSubstringInArray = function (str, arr) {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i].match(str)) return i;
+export const isSubstringInArray = function (str: string, arr: string[]): number {
+  for (const [i, element] of arr.entries()) {
+    if (element.match(str)) {
+      return i;
+    }
   }
   return -1;
 };
@@ -181,26 +190,26 @@ export const isSubstringInArray = function (str, arr) {
 /**
  * Returns a d3 curve given a curve name
  *
- * @param {string | undefined} interpolate The interpolation name
- * @param {any} defaultCurve The default curve to return
- * @returns {import('d3-shape').CurveFactory} The curve factory to use
+ * @param interpolate - The interpolation name
+ * @param defaultCurve - The default curve to return
+ * @returns The curve factory to use
  */
-export const interpolateToCurve = (interpolate, defaultCurve) => {
+export function interpolateToCurve(interpolate?: string, defaultCurve: CurveFactory): CurveFactory {
   if (!interpolate) {
     return defaultCurve;
   }
   const curveName = `curve${interpolate.charAt(0).toUpperCase() + interpolate.slice(1)}`;
   return d3CurveTypes[curveName] || defaultCurve;
-};
+}
 
 /**
  * Formats a URL string
  *
- * @param {string} linkStr String of the URL
- * @param {{ securityLevel: string }} config Configuration passed to MermaidJS
- * @returns {string | undefined} The formatted URL
+ * @param linkStr - String of the URL
+ * @param config - Configuration passed to MermaidJS
+ * @returns The formatted URL or `undefined`.
  */
-export const formatUrl = (linkStr, config) => {
+export function formatUrl(linkStr: string, config: { securityLevel: string }): string | undefined {
   const url = linkStr.trim();
 
   if (url) {
@@ -210,15 +219,15 @@ export const formatUrl = (linkStr, config) => {
 
     return url;
   }
-};
+}
 
 /**
  * Runs a function
  *
- * @param {string} functionName A dot seperated path to the function relative to the `window`
- * @param {...any} params Parameters to pass to the function
+ * @param functionName - A dot separated path to the function relative to the `window`
+ * @param params - Parameters to pass to the function
  */
-export const runFunc = (functionName, ...params) => {
+export const runFunc = (functionName: string, ...params) => {
   const arrPaths = functionName.split('.');
 
   const len = arrPaths.length - 1;
@@ -227,34 +236,39 @@ export const runFunc = (functionName, ...params) => {
   let obj = window;
   for (let i = 0; i < len; i++) {
     obj = obj[arrPaths[i]];
-    if (!obj) return;
+    if (!obj) {
+      return;
+    }
   }
 
   obj[fnName](...params);
 };
 
-/**
- * @typedef {object} Point A (x, y) point
- * @property {number} x The x value
- * @property {number} y The y value
- */
+/** A (x, y) point */
+interface Point {
+  /** The x value */
+  x: number;
+  /** The y value */
+  y: number;
+}
 
 /**
  * Finds the distance between two points using the Distance Formula
  *
- * @param {Point} p1 The first point
- * @param {Point} p2 The second point
- * @returns {number} The distance
+ * @param p1 - The first point
+ * @param p2 - The second point
+ * @returns The distance between the two points.
  */
-const distance = (p1, p2) =>
-  p1 && p2 ? Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) : 0;
+function distance(p1: Point, p2: Point): number {
+  return p1 && p2 ? Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) : 0;
+}
 
 /**
- * @param {Point[]} points List of points
- * @returns {Point}
- * @todo Give this a description
+ * TODO: Give this a description
+ *
+ * @param points - List of points
  */
-const traverseEdge = (points) => {
+function traverseEdge(points: Point[]): Point {
   let prevPoint;
   let totalDistance = 0;
 
@@ -276,8 +290,12 @@ const traverseEdge = (points) => {
         // The point is remainingDistance from prevPoint in the vector between prevPoint and point
         // Calculate the coordinates
         const distanceRatio = remainingDistance / vectorDistance;
-        if (distanceRatio <= 0) center = prevPoint;
-        if (distanceRatio >= 1) center = { x: point.x, y: point.y };
+        if (distanceRatio <= 0) {
+          center = prevPoint;
+        }
+        if (distanceRatio >= 1) {
+          center = { x: point.x, y: point.y };
+        }
         if (distanceRatio > 0 && distanceRatio < 1) {
           center = {
             x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,
@@ -289,32 +307,24 @@ const traverseEdge = (points) => {
     prevPoint = point;
   });
   return center;
-};
+}
 
 /**
- * Alias for `traverseEdge`
- *
- * @param {Point[]} points List of points
- * @returns {Point} Return result of `transverseEdge`
+ * {@inheritdoc traverseEdge}
  */
-const calcLabelPosition = (points) => {
+function calcLabelPosition(points: Point[]): Point {
   if (points.length === 1) {
     return points[0];
   }
   return traverseEdge(points);
-};
+}
 
 const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {
   let prevPoint;
-  log.info('our points', points);
+  log.info(`our points ${JSON.stringify(points)}`);
   if (points[0] !== initialPosition) {
     points = points.reverse();
   }
-  points.forEach((point) => {
-    totalDistance += distance(point, prevPoint);
-    prevPoint = point;
-  });
-
   // Traverse only 25 total distance along points to find cardinality point
   const distanceToCardinalityPoint = 25;
 
@@ -330,8 +340,12 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
         // The point is remainingDistance from prevPoint in the vector between prevPoint and point
         // Calculate the coordinates
         const distanceRatio = remainingDistance / vectorDistance;
-        if (distanceRatio <= 0) center = prevPoint;
-        if (distanceRatio >= 1) center = { x: point.x, y: point.y };
+        if (distanceRatio <= 0) {
+          center = prevPoint;
+        }
+        if (distanceRatio >= 1) {
+          center = { x: point.x, y: point.y };
+        }
         if (distanceRatio > 0 && distanceRatio < 1) {
           center = {
             x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,
@@ -354,14 +368,18 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
 };
 
 /**
- * Position ['start_left', 'start_right', 'end_left', 'end_right']
+ * Calculates the terminal label position.
  *
- * @param {any} terminalMarkerSize
- * @param {any} position
- * @param {any} _points
- * @returns {any}
+ * @param terminalMarkerSize - Terminal marker size.
+ * @param position - Position of label relative to points.
+ * @param _points - Array of points.
+ * @returns - The `cardinalityPosition`.
  */
-const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
+function calcTerminalLabelPosition(
+  terminalMarkerSize: number,
+  position: 'start_left' | 'start_right' | 'end_left' | 'end_right',
+  _points: Point[]
+): Point {
   // Todo looking to faster cloning method
   let points = JSON.parse(JSON.stringify(_points));
   let prevPoint;
@@ -389,8 +407,12 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
         // The point is remainingDistance from prevPoint in the vector between prevPoint and point
         // Calculate the coordinates
         const distanceRatio = remainingDistance / vectorDistance;
-        if (distanceRatio <= 0) center = prevPoint;
-        if (distanceRatio >= 1) center = { x: point.x, y: point.y };
+        if (distanceRatio <= 0) {
+          center = prevPoint;
+        }
+        if (distanceRatio >= 1) {
+          center = { x: point.x, y: point.y };
+        }
         if (distanceRatio > 0 && distanceRatio < 1) {
           center = {
             x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,
@@ -425,31 +447,31 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
     cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2 - 5;
   }
   return cardinalityPosition;
-};
+}
 
 /**
  * Gets styles from an array of declarations
  *
- * @param {string[]} arr Declarations
- * @returns {{ style: string; labelStyle: string }} The styles grouped as strings
+ * @param arr - Declarations
+ * @returns The styles grouped as strings
  */
-export const getStylesFromArray = (arr) => {
+export function getStylesFromArray(arr: string[]): { style: string; labelStyle: string } {
   let style = '';
   let labelStyle = '';
 
-  for (let i = 0; i < arr.length; i++) {
-    if (typeof arr[i] !== 'undefined') {
+  for (const element of arr) {
+    if (element !== undefined) {
       // add text properties to label style definition
-      if (arr[i].startsWith('color:') || arr[i].startsWith('text-align:')) {
-        labelStyle = labelStyle + arr[i] + ';';
+      if (element.startsWith('color:') || element.startsWith('text-align:')) {
+        labelStyle = labelStyle + element + ';';
       } else {
-        style = style + arr[i] + ';';
+        style = style + element + ';';
       }
     }
   }
 
   return { style: style, labelStyle: labelStyle };
-};
+}
 
 let cnt = 0;
 export const generateId = () => {
@@ -458,10 +480,12 @@ export const generateId = () => {
 };
 
 /**
- * @param {any} length
- * @returns {any}
+ * Generates a random hexadecimal id of the given length.
+ *
+ * @param length - Length of ID.
+ * @returns The generated ID.
  */
-function makeid(length) {
+function makeid(length: number): string {
   let result = '';
   const characters = '0123456789abcdef';
   const charactersLength = characters.length;
@@ -494,22 +518,25 @@ export const getTextObj = function () {
 /**
  * Adds text to an element
  *
- * @param {SVGElement} elem Element to add text to
- * @param {{
- *   text: string;
- *   x: number;
- *   y: number;
- *   anchor: 'start' | 'middle' | 'end';
- *   fontFamily: string;
- *   fontSize: string | number;
- *   fontWeight: string | number;
- *   fill: string;
- *   class: string | undefined;
- *   textMargin: number;
- * }} textData
- * @returns {SVGTextElement} Text element with given styling and content
+ * @param elem - SVG Element to add text to
+ * @param textData - Text options.
+ * @returns Text element with given styling and content
  */
-export const drawSimpleText = function (elem, textData) {
+export const drawSimpleText = function (
+  elem: SVGElement,
+  textData: {
+    text: string;
+    x: number;
+    y: number;
+    anchor: 'start' | 'middle' | 'end';
+    fontFamily: string;
+    fontSize: string | number;
+    fontWeight: string | number;
+    fill: string;
+    class: string | undefined;
+    textMargin: number;
+  }
+): SVGTextElement {
   // Remove and ignore br:s
   const nText = textData.text.replace(common.lineBreakRegex, ' ');
 
@@ -521,7 +548,7 @@ export const drawSimpleText = function (elem, textData) {
   textElem.style('font-size', textData.fontSize);
   textElem.style('font-weight', textData.fontWeight);
   textElem.attr('fill', textData.fill);
-  if (typeof textData.class !== 'undefined') {
+  if (textData.class !== undefined) {
     textElem.attr('class', textData.class);
   }
 
@@ -533,54 +560,77 @@ export const drawSimpleText = function (elem, textData) {
   return textElem;
 };
 
-export const wrapLabel = memoize(
-  (label, maxWidth, config) => {
-    if (!label) {
-      return label;
-    }
-    config = Object.assign(
-      { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '
' },
-      config
-    );
-    if (common.lineBreakRegex.test(label)) {
-      return label;
-    }
-    const words = label.split(' ');
-    const completedLines = [];
-    let nextLine = '';
-    words.forEach((word, index) => {
-      const wordLength = calculateTextWidth(`${word} `, config);
-      const nextLineLength = calculateTextWidth(nextLine, config);
-      if (wordLength > maxWidth) {
-        const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);
-        completedLines.push(nextLine, ...hyphenatedStrings);
-        nextLine = remainingWord;
-      } else if (nextLineLength + wordLength >= maxWidth) {
-        completedLines.push(nextLine);
-        nextLine = word;
-      } else {
-        nextLine = [nextLine, word].filter(Boolean).join(' ');
+interface WrapLabelConfig {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: number;
+  joinWith: string;
+}
+
+export const wrapLabel: (label: string, maxWidth: string, config: WrapLabelConfig) => string =
+  memoize(
+    (label: string, maxWidth: string, config: WrapLabelConfig): string => {
+      if (!label) {
+        return label;
       }
-      const currentWord = index + 1;
-      const isLastWord = currentWord === words.length;
-      if (isLastWord) {
-        completedLines.push(nextLine);
+      config = Object.assign(
+        { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '
' },
+        config
+      );
+      if (common.lineBreakRegex.test(label)) {
+        return label;
       }
-    });
-    return completedLines.filter((line) => line !== '').join(config.joinWith);
-  },
-  (label, maxWidth, config) =>
-    `${label}${maxWidth}${config.fontSize}${config.fontWeight}${config.fontFamily}${config.joinWith}`
-);
+      const words = label.split(' ');
+      const completedLines = [];
+      let nextLine = '';
+      words.forEach((word, index) => {
+        const wordLength = calculateTextWidth(`${word} `, config);
+        const nextLineLength = calculateTextWidth(nextLine, config);
+        if (wordLength > maxWidth) {
+          const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);
+          completedLines.push(nextLine, ...hyphenatedStrings);
+          nextLine = remainingWord;
+        } else if (nextLineLength + wordLength >= maxWidth) {
+          completedLines.push(nextLine);
+          nextLine = word;
+        } else {
+          nextLine = [nextLine, word].filter(Boolean).join(' ');
+        }
+        const currentWord = index + 1;
+        const isLastWord = currentWord === words.length;
+        if (isLastWord) {
+          completedLines.push(nextLine);
+        }
+      });
+      return completedLines.filter((line) => line !== '').join(config.joinWith);
+    },
+    (label, maxWidth, config) =>
+      `${label}${maxWidth}${config.fontSize}${config.fontWeight}${config.fontFamily}${config.joinWith}`
+  );
+
+interface BreakStringOutput {
+  hyphenatedStrings: string[];
+  remainingWord: string;
+}
 
-const breakString = memoize(
-  (word, maxWidth, hyphenCharacter = '-', config) => {
+const breakString: (
+  word: string,
+  maxWidth: number,
+  hyphenCharacter: string,
+  config: WrapLabelConfig
+) => BreakStringOutput = memoize(
+  (
+    word: string,
+    maxWidth: number,
+    hyphenCharacter = '-',
+    config: WrapLabelConfig
+  ): BreakStringOutput => {
     config = Object.assign(
       { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 },
       config
     );
-    const characters = word.split('');
-    const lines = [];
+    const characters = [...word];
+    const lines: string[] = [];
     let currentLine = '';
     characters.forEach((character, index) => {
       const nextLine = `${currentLine}${character}`;
@@ -607,43 +657,62 @@ const breakString = memoize(
  *
  * If the wrapped text text has greater height, we extend the height, so it's value won't overflow.
  *
- * @param {any} text The text to measure
- * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the
+ * @param text - The text to measure
+ * @param config - The config for fontSize, fontFamily, and fontWeight all impacting the
  *   resulting size
- * @returns {any} - The height for the given text
+ * @returns The height for the given text
  */
-export const calculateTextHeight = function (text, config) {
+export function calculateTextHeight(
+  text: Parameters[0],
+  config: Parameters[1]
+): ReturnType['height'] {
   config = Object.assign(
     { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },
     config
   );
   return calculateTextDimensions(text, config).height;
-};
+}
 
 /**
  * This calculates the width of the given text, font size and family.
  *
- * @param {any} text - The text to calculate the width of
- * @param {any} config - The config for fontSize, fontFamily, and fontWeight all impacting the
+ * @param text - The text to calculate the width of
+ * @param config - The config for fontSize, fontFamily, and fontWeight all impacting the
  *   resulting size
- * @returns {any} - The width for the given text
+ * @returns The width for the given text
  */
-export const calculateTextWidth = function (text, config) {
+export function calculateTextWidth(
+  text: Parameters[0],
+  config: Parameters[1]
+): ReturnType['width'] {
   config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
   return calculateTextDimensions(text, config).width;
-};
+}
 
+interface TextDimensionConfig {
+  fontSize?: number;
+  fontWeight?: number;
+  fontFamily?: string;
+}
+interface TextDimensions {
+  width: number;
+  height: number;
+  lineHeight?: number;
+}
 /**
  * This calculates the dimensions of the given text, font size, font family, font weight, and
  * margins.
  *
- * @param {any} text - The text to calculate the width of
- * @param {any} config - The config for fontSize, fontFamily, fontWeight, and margin all impacting
+ * @param text - The text to calculate the width of
+ * @param config - The config for fontSize, fontFamily, fontWeight, and margin all impacting
  *   the resulting size
- * @returns - The width for the given text
+ * @returns The dimensions for the given text
  */
-export const calculateTextDimensions = memoize(
-  function (text, config) {
+export const calculateTextDimensions: (
+  text: string,
+  config: TextDimensionConfig
+) => TextDimensions = memoize(
+  (text: string, config: TextDimensionConfig): TextDimensions => {
     config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
     const { fontSize, fontFamily, fontWeight } = config;
     if (!text) {
@@ -712,7 +781,9 @@ export const initIdGenerator = class iterator {
   }
 
   next() {
-    if (!this.deterministic) return Date.now();
+    if (!this.deterministic) {
+      return Date.now();
+    }
 
     return this.count++;
   }
@@ -723,10 +794,10 @@ let decoder;
 /**
  * Decodes HTML, source: {@link https://github.com/shrpne/entity-decode/blob/v2.0.1/browser.js}
  *
- * @param {string} html HTML as a string
- * @returns {string} Unescaped HTML
+ * @param html - HTML as a string
+ * @returns Unescaped HTML
  */
-export const entityDecode = function (html) {
+export const entityDecode = function (html: string): string {
   decoder = decoder || document.createElement('div');
   // Escape HTML before decoding for HTML Entities
   html = escape(html).replace(/%26/g, '&').replace(/%23/g, '#').replace(/%3B/g, ';');
@@ -738,9 +809,9 @@ export const entityDecode = function (html) {
 /**
  * Sanitizes directive objects
  *
- * @param {object} args Directive's JSON
+ * @param args - Directive's JSON
  */
-export const directiveSanitizer = (args) => {
+export const directiveSanitizer = (args: any) => {
   log.debug('directiveSanitizer called with', args);
   if (typeof args === 'object') {
     // check for array
@@ -750,34 +821,34 @@ export const directiveSanitizer = (args) => {
       // This is an object
       Object.keys(args).forEach((key) => {
         log.debug('Checking key', key);
-        if (key.indexOf('__') === 0) {
+        if (key.startsWith('__')) {
           log.debug('sanitize deleting __ option', key);
           delete args[key];
         }
 
-        if (key.indexOf('proto') >= 0) {
+        if (key.includes('proto')) {
           log.debug('sanitize deleting proto option', key);
           delete args[key];
         }
 
-        if (key.indexOf('constr') >= 0) {
+        if (key.includes('constr')) {
           log.debug('sanitize deleting constr option', key);
           delete args[key];
         }
 
-        if (key.indexOf('themeCSS') >= 0) {
+        if (key.includes('themeCSS')) {
           log.debug('sanitizing themeCss option');
           args[key] = sanitizeCss(args[key]);
         }
-        if (key.indexOf('fontFamily') >= 0) {
+        if (key.includes('fontFamily')) {
           log.debug('sanitizing fontFamily option');
           args[key] = sanitizeCss(args[key]);
         }
-        if (key.indexOf('altFontFamily') >= 0) {
+        if (key.includes('altFontFamily')) {
           log.debug('sanitizing altFontFamily option');
           args[key] = sanitizeCss(args[key]);
         }
-        if (configKeys.indexOf(key) < 0) {
+        if (!configKeys.includes(key)) {
           log.debug('sanitize deleting option', key);
           delete args[key];
         } else {
@@ -791,10 +862,9 @@ export const directiveSanitizer = (args) => {
   }
   if (args.themeVariables) {
     const kArr = Object.keys(args.themeVariables);
-    for (let i = 0; i < kArr.length; i++) {
-      const k = kArr[i];
+    for (const k of kArr) {
       const val = args.themeVariables[k];
-      if (val && val.match && !val.match(/^[a-zA-Z0-9#,";()%. ]+$/)) {
+      if (val && val.match && !val.match(/^[\d "#%(),.;A-Za-z]+$/)) {
         args.themeVariables[k] = '';
       }
     }
@@ -805,13 +875,13 @@ export const sanitizeCss = (str) => {
   let startCnt = 0;
   let endCnt = 0;
 
-  for (let i = 0; i < str.length; i++) {
+  for (const element of str) {
     if (startCnt < endCnt) {
       return '{ /* ERROR: Unbalanced CSS */ }';
     }
-    if (str[i] === '{') {
+    if (element === '{') {
       startCnt++;
-    } else if (str[i] === '}') {
+    } else if (element === '}') {
       endCnt++;
     }
   }
@@ -829,17 +899,45 @@ export interface DetailedError {
   message?: string;
 }
 
-/** @param error */
+/** @param error - The error to check */
 export function isDetailedError(error: unknown): error is DetailedError {
   return 'str' in error;
 }
 
-/** @param error */
+/** @param error - The error to convert to an error message */
 export function getErrorMessage(error: unknown): string {
-  if (error instanceof Error) return error.message;
+  if (error instanceof Error) {
+    return error.message;
+  }
   return String(error);
 }
 
+/**
+ * Appends  element with the given title and css class.
+ *
+ * @param parent - d3 svg object to append title to
+ * @param cssClass - CSS class for the  element containing the title
+ * @param titleTopMargin - Margin in pixels between title and rest of the graph
+ * @param title - The title. If empty, returns immediately.
+ */
+export const insertTitle = (
+  parent,
+  cssClass: string,
+  titleTopMargin: number,
+  title?: string
+): void => {
+  if (!title) {
+    return;
+  }
+  const bounds = parent.node().getBBox();
+  parent
+    .append('text')
+    .text(title)
+    .attr('x', bounds.x + bounds.width / 2)
+    .attr('y', -titleTopMargin)
+    .attr('class', cssClass);
+};
+
 export default {
   assignWithDepth,
   wrapLabel,
@@ -862,4 +960,5 @@ export default {
   initIdGenerator: initIdGenerator,
   directiveSanitizer,
   sanitizeCss,
+  insertTitle,
 };
diff --git a/packages/mermaid/typedoc.json b/packages/mermaid/typedoc.json
new file mode 100644
index 0000000000..971f6d562f
--- /dev/null
+++ b/packages/mermaid/typedoc.json
@@ -0,0 +1,11 @@
+{
+  "plugin": ["typedoc-plugin-markdown"],
+  "readme": "none",
+  "githubPages": false,
+  "sourceLinkTemplate": "https://github.com/mermaid-js/mermaid/blob/{gitRevision}/{path}#L{line}",
+  "gitRevision": "master",
+  "out": "src/docs/config/setup",
+  "entryPointStrategy": "expand",
+  "hideBreadcrumbs": true,
+  "hideInPageTOC": true
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de2066b8d8..af68b53403 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,38 +1,35 @@
 lockfileVersion: 5.4-inlineSpecifiers
 
-overrides:
-  d3: ^7.0.0
-
 importers:
 
   .:
     devDependencies:
       '@applitools/eyes-cypress':
-        specifier: ^3.27.1
+        specifier: ^3.27.6
         version: 3.27.6
       '@commitlint/cli':
-        specifier: ^17.1.2
+        specifier: ^17.2.0
         version: 17.2.0
       '@commitlint/config-conventional':
-        specifier: ^17.1.0
+        specifier: ^17.2.0
         version: 17.2.0
-      '@types/d3':
-        specifier: ^7.4.0
-        version: 7.4.0
-      '@types/dompurify':
-        specifier: ^2.3.4
-        version: 2.3.4
+      '@cspell/eslint-plugin':
+        specifier: ^6.14.2
+        version: 6.14.2
       '@types/eslint':
-        specifier: ^8.4.6
+        specifier: ^8.4.10
         version: 8.4.10
       '@types/express':
         specifier: ^4.17.14
         version: 4.17.14
+      '@types/js-yaml':
+        specifier: ^4.0.5
+        version: 4.0.5
       '@types/jsdom':
-        specifier: ^20.0.0
+        specifier: ^20.0.1
         version: 20.0.1
       '@types/lodash':
-        specifier: ^4.14.186
+        specifier: ^4.14.188
         version: 4.14.188
       '@types/mdast':
         specifier: ^3.0.10
@@ -43,44 +40,38 @@ importers:
       '@types/prettier':
         specifier: ^2.7.1
         version: 2.7.1
-      '@types/stylis':
-        specifier: ^4.0.2
-        version: 4.0.2
-      '@types/uuid':
-        specifier: ^8.3.4
-        version: 8.3.4
+      '@types/rollup-plugin-visualizer':
+        specifier: ^4.2.1
+        version: 4.2.1
       '@typescript-eslint/eslint-plugin':
-        specifier: ^5.39.0
+        specifier: ^5.42.1
         version: 5.42.1_2udltptbznfmezdozpdoa2aemq
       '@typescript-eslint/parser':
-        specifier: ^5.39.0
+        specifier: ^5.42.1
         version: 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       '@vitest/coverage-c8':
-        specifier: ^0.23.4
-        version: 0.23.4_upgr4zu6lczg6poy6g2njng6vm
+        specifier: ^0.25.1
+        version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
       '@vitest/ui':
-        specifier: ^0.23.4
-        version: 0.23.4
+        specifier: ^0.25.1
+        version: 0.25.1
       concurrently:
-        specifier: ^7.4.0
+        specifier: ^7.5.0
         version: 7.5.0
       coveralls:
         specifier: ^3.1.1
         version: 3.1.1
       cypress:
-        specifier: ^10.0.0
+        specifier: ^10.11.0
         version: 10.11.0
       cypress-image-snapshot:
         specifier: ^4.0.1
         version: 4.0.1_bg25yee4qeg7mpleuvd346a3tq
-      documentation:
-        specifier: 13.2.0
-        version: 13.2.0
       esbuild:
-        specifier: ^0.15.10
+        specifier: ^0.15.13
         version: 0.15.13
       eslint:
-        specifier: ^8.24.0
+        specifier: ^8.27.0
         version: 8.27.0
       eslint-config-prettier:
         specifier: ^8.5.0
@@ -92,44 +83,56 @@ importers:
         specifier: ^7.1.0
         version: 7.1.0
       eslint-plugin-jest:
-        specifier: ^27.1.0
+        specifier: ^27.1.5
         version: 27.1.5_kdswgjmqcx7mthqz7ow2zlfevy
       eslint-plugin-jsdoc:
-        specifier: ^39.3.6
+        specifier: ^39.6.2
         version: 39.6.2_eslint@8.27.0
       eslint-plugin-json:
         specifier: ^3.1.0
         version: 3.1.0
+      eslint-plugin-lodash:
+        specifier: ^7.4.0
+        version: 7.4.0_eslint@8.27.0
       eslint-plugin-markdown:
         specifier: ^3.0.0
         version: 3.0.0_eslint@8.27.0
+      eslint-plugin-no-only-tests:
+        specifier: ^3.1.0
+        version: 3.1.0
+      eslint-plugin-tsdoc:
+        specifier: ^0.2.17
+        version: 0.2.17
+      eslint-plugin-unicorn:
+        specifier: ^45.0.0
+        version: 45.0.0_eslint@8.27.0
       express:
-        specifier: ^4.18.1
+        specifier: ^4.18.2
         version: 4.18.2
       globby:
         specifier: ^13.1.2
         version: 13.1.2
       husky:
-        specifier: ^8.0.1
+        specifier: ^8.0.2
         version: 8.0.2
-      identity-obj-proxy:
-        specifier: ^3.0.0
-        version: 3.0.0
       jest:
-        specifier: 29.x
+        specifier: ^29.3.1
         version: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
       jison:
         specifier: ^0.4.18
         version: 0.4.18
+      js-yaml:
+        specifier: ^4.1.0
+        version: 4.1.0
       jsdom:
-        specifier: ^20.0.1
+        specifier: ^20.0.2
         version: 20.0.2
       lint-staged:
         specifier: ^13.0.3
         version: 13.0.3
-      markdown-it:
-        specifier: ^13.0.1
-        version: 13.0.1
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
       pnpm:
         specifier: ^7.15.0
         version: 7.15.0
@@ -139,12 +142,12 @@ importers:
       prettier-plugin-jsdoc:
         specifier: ^0.4.2
         version: 0.4.2_prettier@2.7.1
-      remark:
-        specifier: ^14.0.2
-        version: 14.0.2
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
+      rollup-plugin-visualizer:
+        specifier: ^5.8.3
+        version: 5.8.3
       start-server-and-test:
         specifier: ^1.14.0
         version: 1.14.0
@@ -154,24 +157,12 @@ importers:
       typescript:
         specifier: ^4.8.4
         version: 4.8.4
-      unist-util-flatmap:
-        specifier: ^1.0.0
-        version: 1.0.0
       vite:
-        specifier: ^3.1.4
+        specifier: ^3.2.3
         version: 3.2.3_@types+node@18.11.9
-      vitepress:
-        specifier: ^1.0.0-alpha.19
-        version: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-      vitepress-plugin-mermaid:
-        specifier: ^2.0.8
-        version: 2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe
-      vitepress-plugin-search:
-        specifier: ^1.0.4-alpha.11
-        version: 1.0.4-alpha.15_pb3anlaclwt5smse4ujf447uy4
       vitest:
-        specifier: ^0.23.4
-        version: 0.23.4_upgr4zu6lczg6poy6g2njng6vm
+        specifier: ^0.25.3
+        version: 0.25.3_oullksb5ic6y72oh2wekoaiuii
 
   packages/mermaid:
     dependencies:
@@ -181,25 +172,16 @@ importers:
       d3:
         specifier: ^7.0.0
         version: 7.6.1
-      dagre:
-        specifier: ^0.8.5
-        version: 0.8.5
-      dagre-d3:
-        specifier: ^0.6.4
-        version: 0.6.4
+      dagre-d3-es:
+        specifier: 7.0.6
+        version: 7.0.6
       dompurify:
-        specifier: 2.4.0
-        version: 2.4.0
-      fast-clone:
-        specifier: ^1.5.13
-        version: 1.5.13
-      graphlib:
-        specifier: ^2.1.8
-        version: 2.1.8
+        specifier: 2.4.1
+        version: 2.4.1
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
-      lodash:
+      lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
       moment-mini:
@@ -215,36 +197,24 @@ importers:
         specifier: ^9.0.0
         version: 9.0.0
     devDependencies:
-      '@applitools/eyes-cypress':
-        specifier: ^3.25.7
-        version: 3.27.1
-      '@commitlint/cli':
-        specifier: ^17.1.2
-        version: 17.1.2
-      '@commitlint/config-conventional':
-        specifier: ^17.0.0
-        version: 17.1.0
       '@types/d3':
         specifier: ^7.4.0
         version: 7.4.0
       '@types/dompurify':
-        specifier: ^2.3.4
-        version: 2.3.4
-      '@types/eslint':
-        specifier: ^8.4.6
-        version: 8.4.6
-      '@types/express':
-        specifier: ^4.17.13
-        version: 4.17.14
+        specifier: ^2.4.0
+        version: 2.4.0
       '@types/jsdom':
-        specifier: ^20.0.0
-        version: 20.0.0
-      '@types/lodash':
-        specifier: ^4.14.185
-        version: 4.14.185
+        specifier: ^20.0.1
+        version: 20.0.1
+      '@types/lodash-es':
+        specifier: ^4.17.6
+        version: 4.17.6
+      '@types/micromatch':
+        specifier: ^4.0.2
+        version: 4.0.2
       '@types/prettier':
-        specifier: ^2.7.0
-        version: 2.7.0
+        specifier: ^2.7.1
+        version: 2.7.1
       '@types/stylis':
         specifier: ^4.0.2
         version: 4.0.2
@@ -252,56 +222,47 @@ importers:
         specifier: ^8.3.4
         version: 8.3.4
       '@typescript-eslint/eslint-plugin':
-        specifier: ^5.37.0
-        version: 5.38.0_wsb62dxj2oqwgas4kadjymcmry
+        specifier: ^5.42.1
+        version: 5.42.1_2udltptbznfmezdozpdoa2aemq
       '@typescript-eslint/parser':
-        specifier: ^5.37.0
-        version: 5.38.0_irgkl5vooow2ydyo6aokmferha
+        specifier: ^5.42.1
+        version: 5.42.1_rmayb2veg2btbq6mbmnyivgasy
+      chokidar:
+        specifier: ^3.5.3
+        version: 3.5.3
       concurrently:
-        specifier: ^7.4.0
-        version: 7.4.0
+        specifier: ^7.5.0
+        version: 7.5.0
       coveralls:
         specifier: ^3.1.1
         version: 3.1.1
-      documentation:
-        specifier: 13.2.0
-        version: 13.2.0
-      eslint:
-        specifier: ^8.23.1
-        version: 8.23.1
-      eslint-config-prettier:
-        specifier: ^8.5.0
-        version: 8.5.0_eslint@8.23.1
-      eslint-plugin-cypress:
-        specifier: ^2.12.1
-        version: 2.12.1_eslint@8.23.1
-      eslint-plugin-html:
-        specifier: ^7.1.0
-        version: 7.1.0
-      eslint-plugin-jest:
-        specifier: ^27.0.4
-        version: 27.0.4_w7j56xfuh6bbmrubefdaspmpla
-      eslint-plugin-jsdoc:
-        specifier: ^39.3.6
-        version: 39.3.6_eslint@8.23.1
-      eslint-plugin-json:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-markdown:
-        specifier: ^3.0.0
-        version: 3.0.0_eslint@8.23.1
-      identity-obj-proxy:
-        specifier: ^3.0.0
-        version: 3.0.0
+      cspell:
+        specifier: ^6.14.3
+        version: 6.14.3
+      globby:
+        specifier: ^13.1.2
+        version: 13.1.2
       jison:
         specifier: ^0.4.18
         version: 0.4.18
       js-base64:
-        specifier: 3.7.2
+        specifier: ^3.7.2
         version: 3.7.2
       jsdom:
-        specifier: ^20.0.0
-        version: 20.0.0
+        specifier: ^20.0.2
+        version: 20.0.2
+      micromatch:
+        specifier: ^4.0.5
+        version: 4.0.5
+      moment:
+        specifier: ^2.29.4
+        version: 2.29.4
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
+      prettier:
+        specifier: ^2.7.1
+        version: 2.7.1
       remark:
         specifier: ^14.0.2
         version: 14.0.2
@@ -309,23 +270,32 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
       start-server-and-test:
-        specifier: ^1.12.6
+        specifier: ^1.14.0
         version: 1.14.0
-      ts-node:
-        specifier: ^10.9.1
-        version: 10.9.1_h6wsvvmh4l7tb54yk3ecr4mgtm
+      typedoc:
+        specifier: ^0.23.18
+        version: 0.23.18_typescript@4.8.4
+      typedoc-plugin-markdown:
+        specifier: ^3.13.6
+        version: 3.13.6_typedoc@0.23.18
       typescript:
-        specifier: ^4.8.3
-        version: 4.8.3
+        specifier: ^4.8.4
+        version: 4.8.4
       unist-util-flatmap:
         specifier: ^1.0.0
         version: 1.0.0
+      vitepress:
+        specifier: ^1.0.0-alpha.28
+        version: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress-plugin-search:
+        specifier: ^1.0.4-alpha.15
+        version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
 
   packages/mermaid-example-diagram:
     devDependencies:
       concurrently:
-        specifier: ^7.4.0
-        version: 7.4.0
+        specifier: ^7.5.0
+        version: 7.5.0
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -355,8 +325,8 @@ importers:
         version: 2.0.2
     devDependencies:
       concurrently:
-        specifier: ^7.4.0
-        version: 7.4.0
+        specifier: ^7.5.0
+        version: 7.5.0
       mermaid:
         specifier: workspace:*
         version: link:../mermaid
@@ -496,14 +466,6 @@ packages:
       '@algolia/requester-common': 4.14.2
     dev: true
 
-  /@ampproject/remapping/2.2.0:
-    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.17
-    dev: true
-
   /@applitools/core-base/1.1.7:
     resolution: {integrity: sha512-jxiRS7pQ9Q6deXeDa/mIACL/7S7ZxIOms49WSZGhUjb+1bfKEsH6+kLZKy5wUDHrUWRqPdILkLKWgQ0rLnKmFA==}
     engines: {node: '>=12.13.0'}
@@ -580,14 +542,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@applitools/dom-capture/11.1.1:
-    resolution: {integrity: sha512-aUPsS3h/caQryythSjaX4uG23HzTBsnFBfO7BUvuomMdAm3qIHBstIHPCiUSJbXmPBabfqlWm59YKdxC3PTWcw==}
-    engines: {node: '>=8.9.0'}
-    dependencies:
-      '@applitools/dom-shared': 1.0.5
-      '@applitools/functional-commons': 1.6.0
-    dev: true
-
   /@applitools/dom-capture/11.2.0:
     resolution: {integrity: sha512-zFfYgvdXq5oTpLuYvOJdkh7jsbAxajOpD67pVoKc27lKwE0CGaM9I0Uf+qGh7GYtY93qyzMWBzqC7C8JlSK1gA==}
     engines: {node: '>=8.9.0'}
@@ -601,26 +555,11 @@ packages:
     engines: {node: '>=8.9.0'}
     dev: true
 
-  /@applitools/dom-shared/1.0.8:
-    resolution: {integrity: sha512-HQtYfFvtlPuE9ZShBamtW1LGW2Qq4HxjQx5nF7KiNvrRTlf5/e+AWpZhXCTVEhVkAcSNs/7xR2WvumOUd+usxg==}
-    engines: {node: '>=8.9.0'}
-    dev: true
-
   /@applitools/dom-shared/1.0.9:
     resolution: {integrity: sha512-u6nRHBklRAaODILm0HRluE0IAwrnjs8AMNRBFxHThKGt4qpbkhnwazGMr4zDu3WCBjr/sA31kekUqNl0Jx3YeQ==}
     engines: {node: '>=8.9.0'}
     dev: true
 
-  /@applitools/dom-snapshot/4.6.2:
-    resolution: {integrity: sha512-8XFbsIl154VK3rqNhHbSzcYDNLJ8QEgHzWht5cM0WhScWVokXUfL+kDmqjLIMZ47VgP3XXxk0rgX5QOs2TZx8Q==}
-    engines: {node: '>=8.9.0'}
-    dependencies:
-      '@applitools/dom-shared': 1.0.8
-      '@applitools/functional-commons': 1.6.0
-      css-tree: 1.0.0-alpha.39
-      pako: 1.0.11
-    dev: true
-
   /@applitools/dom-snapshot/4.7.0:
     resolution: {integrity: sha512-exLRB2dTLiqD8i5oOK/QyfNMSLramVF5CFYNI29WWQjbXkIpCGOomGA8/xL+sYiC53jjx3Y9u6jHtlkb5ASJAQ==}
     engines: {node: '>=8.9.0'}
@@ -651,33 +590,6 @@ packages:
       semver: 7.3.7
     dev: true
 
-  /@applitools/driver/1.9.20:
-    resolution: {integrity: sha512-yrVydj5ukcBzADVTyrqEJ9rV2GauUOgC0NvXupvT+3qZSkwGumFb6SxlP5q39jy6/1EmRL9Szl1y9/DbwZ9OdQ==}
-    engines: {node: '>=12.13.0'}
-    dependencies:
-      '@applitools/logger': 1.1.15
-      '@applitools/snippets': 2.4.5
-      '@applitools/types': 1.5.8
-      '@applitools/utils': 1.3.10
-    dev: true
-
-  /@applitools/execution-grid-client/1.1.23:
-    resolution: {integrity: sha512-9J66rP3HYpI10pLH+wbMWr6BAcCuaGIskSDJyitvfS8hc2UyWdpVsAIHdkmivvTEpu3f+VaLKlhINRYlCJRJpQ==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    dependencies:
-      '@applitools/logger': 1.1.15
-      '@applitools/utils': 1.3.10
-      abort-controller: 3.0.0
-      node-fetch: 2.6.7
-      proxy-agent: 5.0.0
-      raw-body: 2.5.1
-      yargs: 17.4.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
   /@applitools/execution-grid-client/1.1.30:
     resolution: {integrity: sha512-LoX0ZcNDZZV4aD6bpldfOTk94tNznRcIZPAVRRrKiqQJWJnDPP661EGxykXsfVnluCHaOGmbDPH6bfJGdDfUuQ==}
     engines: {node: '>=12.13.0'}
@@ -695,15 +607,6 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/eyes-api/1.7.5:
-    resolution: {integrity: sha512-wvFHjPFAVRSCCUg3zEr8HNoRS8lChnm9TwYI/+qjo91eNM+nVSEtPE6tb2GcdUbDqz0zpnCi8N3Mi2TulAZj2w==}
-    engines: {node: '>=12.13.0'}
-    dependencies:
-      '@applitools/logger': 1.1.15
-      '@applitools/types': 1.5.8
-      '@applitools/utils': 1.3.10
-    dev: true
-
   /@applitools/eyes-api/1.9.1:
     resolution: {integrity: sha512-P/42YMcV8SbdZFXEph+Q37tMngIJv0jSC2S1QDp09/zi0V1z81yyAm8zK36PU0h0JTYeZxSs/T3BRhfitpzAIg==}
     engines: {node: '>=12.13.0'}
@@ -718,27 +621,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@applitools/eyes-cypress/3.27.1:
-    resolution: {integrity: sha512-QtQawBi0B16ClPcyFEyvd8+3VKoZnJcj2UX41U5gnycQvidvJCyruFJlmuL9OnCBgpA17U4y9NnRceeHsywhqQ==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    dependencies:
-      '@applitools/eyes-api': 1.7.5
-      '@applitools/eyes-universal': 2.10.3
-      '@applitools/functional-commons': 1.6.0
-      '@applitools/logger': 1.1.15
-      '@applitools/visual-grid-client': 15.13.13
-      chalk: 3.0.0
-      uuid: 8.3.2
-      ws: 8.5.0
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - encoding
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /@applitools/eyes-cypress/3.27.6:
     resolution: {integrity: sha512-2FpWKQ7rVhrr94Z8DjmJ8kD3f71aYahvTpT3dJyjfVKV8GxwAYAb/qrq6gAUnItaaoB2PgLHbIsqpOpRPki1tQ==}
     engines: {node: '>=12.13.0'}
@@ -776,52 +658,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@applitools/eyes-sdk-core/13.8.19:
-    resolution: {integrity: sha512-brijRwys0kNyGdVictyJPGdqS+6iE3G0gwYHnzBZWvP7ryh6FeIwDbLxyc43UVpmNJPKAToVZ50J+2C/S6E3pQ==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    dependencies:
-      '@applitools/dom-capture': 11.1.1
-      '@applitools/dom-snapshot': 4.6.2
-      '@applitools/driver': 1.9.20
-      '@applitools/execution-grid-client': 1.1.23
-      '@applitools/isomorphic-fetch': 3.0.0
-      '@applitools/logger': 1.1.15
-      '@applitools/screenshoter': 3.4.14
-      '@applitools/snippets': 2.4.5
-      '@applitools/types': 1.5.8
-      '@applitools/utils': 1.3.10
-      axios: 0.26.0
-      chalk: 3.0.0
-      tunnel: 0.0.6
-    transitivePeerDependencies:
-      - debug
-      - encoding
-      - supports-color
-    dev: true
-
-  /@applitools/eyes-universal/2.10.3:
-    resolution: {integrity: sha512-z/1N9RaDakfosQfGTEwFgky0DwPjpw4bCILYx1Te4vlOywCDGSD9KrJmmMqe2YkO2wgqi61uNvQvrBDePKvmHQ==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    dependencies:
-      '@applitools/execution-grid-client': 1.1.23
-      '@applitools/eyes-sdk-core': 13.8.19
-      '@applitools/logger': 1.1.15
-      '@applitools/utils': 1.3.10
-      '@applitools/visual-grid-client': 15.13.13
-      proxy-agent: 5.0.0
-      webdriver: 7.16.11
-      ws: 7.4.6
-      yargs: 17.4.1
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - encoding
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /@applitools/eyes-universal/2.16.9:
     resolution: {integrity: sha512-D8MeOLoBETyg0oPxkaim3taiKWo6XMILTSAX+rWQHz0X7u+JRuCBLZu0WFlQPLTo7ndLiVyo2BpbBy9KIp5haA==}
     engines: {node: '>=12.13.0'}
@@ -849,21 +685,6 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /@applitools/http-commons/2.4.7:
-    resolution: {integrity: sha512-fsq8ULh70/htb9oHSMTkibMR7AiB+ScraYfQw4H7Sq7JfbFnlefSK0c6ZGfSrjJQx79GRfjrqQYtz59s5lxkcw==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      '@applitools/functional-commons': 1.6.0
-      '@applitools/monitoring-commons': 1.0.19
-      agentkeepalive: 4.2.1
-      debug: 4.3.4
-      lodash.merge: 4.6.2
-      node-fetch: 2.6.7
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
   /@applitools/image/1.0.4:
     resolution: {integrity: sha512-eNr/fa+loGz1hrgwv/NKuVP13uRyfRUPFyCU8EtTdSWuGFJXIqwhtQWCFCokX1EXnhoCyGfFBAzWgW9StqTGfQ==}
     engines: {node: '>=12.13.0'}
@@ -882,26 +703,17 @@ packages:
       png-async: 0.9.4
     dev: true
 
-  /@applitools/isomorphic-fetch/3.0.0:
-    resolution: {integrity: sha512-7rutaN/2M5wYjOIOTKS/Zuc1Na90fJNEAqvo/jCxt7nSD1kYscHV3aCk9t7RD59gmzLMvUTIxFbjl4RUMV8qfg==}
-    dependencies:
-      node-fetch: 2.6.7
-      whatwg-fetch: 3.6.2
-    transitivePeerDependencies:
-      - encoding
-    dev: true
-
   /@applitools/jsdom/1.0.4:
     resolution: {integrity: sha512-JtjNfTJtphJYHEkicW4xlwtYuRP3TRvjoszfkrcpxTNMCbGkbop8ed9MuUfR83dAZj5NY9begbmEqJohLJco6w==}
     engines: {node: '>=12'}
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.1
+      acorn: 8.8.0
       acorn-globals: 6.0.0
       cssom: 0.5.0
       cssstyle: 2.3.0
       data-urls: 3.0.2
-      decimal.js: 10.4.2
+      decimal.js: 10.4.1
       domexception: 4.0.0
       escodegen: 2.0.0
       form-data: 4.0.0
@@ -920,7 +732,7 @@ packages:
       whatwg-encoding: 2.0.0
       whatwg-mimetype: 3.0.0
       whatwg-url: 10.0.0
-      ws: 8.11.0
+      ws: 8.9.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -928,14 +740,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@applitools/logger/1.1.15:
-    resolution: {integrity: sha512-2SNbINnxvGxy8G5TXIZHhXWqWBFFn0o/+4ZP57VvohPG8AF4wqXBO3H93LZMMpDz/4prND0bBLqK3XFLY4ppTQ==}
-    engines: {node: '>=12.13.0'}
-    dependencies:
-      '@applitools/utils': 1.3.10
-      chalk: 4.1.2
-    dev: true
-
   /@applitools/logger/1.1.27:
     resolution: {integrity: sha512-lwKCNhuMfLkqxfwYhLalDg2JZNgNj6rEgD8LnozsQdfxqVXThrJb/fkdSaSeUwnF+ljJyR7fnPy+p742p66U0Q==}
     engines: {node: '>=12.13.0'}
@@ -944,15 +748,6 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@applitools/monitoring-commons/1.0.19:
-    resolution: {integrity: sha512-rzEOvGoiEF4KnK0PJ9I0btdwnaNlIPLYhjF1vTEG15PoucbbKpix9fYusxWlDG7kMiZya8ZycVPc0woVlNaHRQ==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@applitools/nml-client/1.3.5:
     resolution: {integrity: sha512-MW1kB5AGe5l8HZ5GMkVhTm6XMndeIADmed37WrW3obD3FrmBGQLLj04GP6J7czLTeGjeh7QojvuAEvQUGFV5MQ==}
     engines: {node: '>=12.13.0'}
@@ -979,17 +774,6 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/screenshoter/3.4.14:
-    resolution: {integrity: sha512-vdaHxzSobJzujyXENSuVybYyOfBWZlDb6OwVzRsiJxpwuN9L5VtOu30kuvxAXzycHMfa+8vLgO2pHnU6Vp/MiQ==}
-    engines: {node: '>=12.13.0'}
-    dependencies:
-      '@applitools/logger': 1.1.15
-      '@applitools/snippets': 2.4.5
-      '@applitools/utils': 1.3.10
-      jpeg-js: 0.4.4
-      png-async: 0.9.4
-    dev: true
-
   /@applitools/screenshoter/3.7.0:
     resolution: {integrity: sha512-d723TI4InLQi06TpVj4rP+V5OrNL9mFQr+cWv2MOMfQbuAnZETTRzvDyk97e3qoDJHAPjyQuxi81qEaxsFxhOA==}
     engines: {node: '>=12.13.0'}
@@ -1024,11 +808,6 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/types/1.5.8:
-    resolution: {integrity: sha512-trMH32oewkrptYG26IzEbwMW9VG9BJo64bzwx/T4oz6ZfndXGCjwGCFQE4FDE++dRZTjzSF00h2YSzIxPAapeQ==}
-    engines: {node: '>=12.13.0'}
-    dev: true
-
   /@applitools/ufg-client/1.1.2:
     resolution: {integrity: sha512-yhjlp4QHWVazImfUUr9S9ueQhKstxfI3NNu/SLPPX7lHLOdpdWn7fUZOzTBCs6j914s87r9J9cmsU2gnOO8bOQ==}
     engines: {node: '>=12.13.0'}
@@ -1047,38 +826,11 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@applitools/utils/1.3.10:
-    resolution: {integrity: sha512-CI/5BLB0D/aZn6uL8JJmsErI+TOHCa4Gz5Wi8sJknuPz/V9Ws6jIh9ZCTzvOCDUIp99qLJwD6TSA2BY9aMhCNw==}
-    engines: {node: '>=12.13.0'}
-    dev: true
-
   /@applitools/utils/1.3.13:
     resolution: {integrity: sha512-UwA1skl9kzK+WrXu7WyX6A4K4TdIFZbDAcFJq2PA5fhmbviAlk4iFJtQjyopYTdY0sSh3VRSsCPr3DsbFa79AA==}
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/visual-grid-client/15.13.13:
-    resolution: {integrity: sha512-3GkzrR0WEcsihRZEgbxXecfBb8Q0U/L7VDNpy/APlw7K54kWPgTal/CYk1NwLDKj9iqpHlFfvDhI0zoeCNrR4A==}
-    engines: {node: '>=12.13.0'}
-    dependencies:
-      '@applitools/eyes-sdk-core': 13.8.19
-      '@applitools/functional-commons': 1.6.0
-      '@applitools/http-commons': 2.4.7
-      '@applitools/isomorphic-fetch': 3.0.0
-      '@applitools/jsdom': 1.0.4
-      '@applitools/logger': 1.1.15
-      abort-controller: 3.0.0
-      chalk: 3.0.0
-      postcss-value-parser: 4.1.0
-      throat: 5.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - encoding
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /@babel/code-frame/7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -1086,24 +838,19 @@ packages:
       '@babel/highlight': 7.18.6
     dev: true
 
-  /@babel/compat-data/7.20.1:
-    resolution: {integrity: sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==}
-    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.12.1
-      '@babel/helper-module-transforms': 7.20.2
-      '@babel/helpers': 7.20.1
-      '@babel/parser': 7.12.3
+      '@babel/generator': 7.19.0
+      '@babel/helper-module-transforms': 7.19.0
+      '@babel/helpers': 7.19.0
+      '@babel/parser': 7.19.1
       '@babel/template': 7.18.10
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
-      convert-source-map: 1.9.0
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
+      convert-source-map: 1.8.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
       json5: 2.2.1
@@ -1115,252 +862,79 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/core/7.20.2:
-    resolution: {integrity: sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==}
+  /@babel/generator/7.19.0:
+    resolution: {integrity: sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.20.4
-      '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.20.2
-      '@babel/helper-module-transforms': 7.20.2
-      '@babel/helpers': 7.20.1
-      '@babel/parser': 7.20.3
-      '@babel/template': 7.18.10
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
-      convert-source-map: 1.9.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.1
-      semver: 6.3.0
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/types': 7.19.0
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
     dev: true
 
-  /@babel/generator/7.12.1:
-    resolution: {integrity: sha512-DB+6rafIdc9o72Yc3/Ph5h+6hUjeOp66pF0naQBgUFFuPqzQwIlPTm3xZR7YNvduIMtkDIj2t21LSQwnbCrXvg==}
-    dependencies:
-      '@babel/types': 7.20.2
-      jsesc: 2.5.2
-      source-map: 0.5.7
+  /@babel/helper-environment-visitor/7.18.9:
+    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
+    engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/generator/7.20.4:
-    resolution: {integrity: sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==}
+  /@babel/helper-function-name/7.19.0:
+    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
-      '@jridgewell/gen-mapping': 0.3.2
-      jsesc: 2.5.2
+      '@babel/template': 7.18.10
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/helper-annotate-as-pure/7.18.6:
-    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
+  /@babel/helper-hoist-variables/7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/helper-builder-binary-assignment-operator-visitor/7.18.9:
-    resolution: {integrity: sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==}
+  /@babel/helper-module-imports/7.18.6:
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-explode-assignable-expression': 7.18.6
-      '@babel/types': 7.20.2
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/helper-compilation-targets/7.20.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.20.1
-      '@babel/core': 7.12.3
-      '@babel/helper-validator-option': 7.18.6
-      browserslist: 4.21.4
-      semver: 6.3.0
-    dev: true
-
-  /@babel/helper-compilation-targets/7.20.0_@babel+core@7.20.2:
-    resolution: {integrity: sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.20.1
-      '@babel/core': 7.20.2
-      '@babel/helper-validator-option': 7.18.6
-      browserslist: 4.21.4
-      semver: 6.3.0
-    dev: true
-
-  /@babel/helper-create-class-features-plugin/7.20.2_@babel+core@7.12.3:
-    resolution: {integrity: sha512-k22GoYRAHPYr9I+Gvy2ZQlAe5mGy8BqWst2wRt8cwIufWTxrsVshhIBvYNqC80N0GSFWTsqRVexOtfzlgOEDvA==}
-    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.19.0
-      '@babel/helper-member-expression-to-functions': 7.18.9
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-replace-supers': 7.19.1
-      '@babel/helper-split-export-declaration': 7.18.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/helper-create-regexp-features-plugin/7.19.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==}
-    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.2.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.0_@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-explode-assignable-expression/7.18.6:
-    resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.2
-    dev: true
-
-  /@babel/helper-function-name/7.19.0:
-    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.18.10
-      '@babel/types': 7.20.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.20.2
-    dev: true
-
-  /@babel/helper-member-expression-to-functions/7.18.9:
-    resolution: {integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.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.20.2
-    dev: true
-
-  /@babel/helper-module-transforms/7.20.2:
-    resolution: {integrity: sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==}
+  /@babel/helper-module-transforms/7.19.0:
+    resolution: {integrity: sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==}
     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.20.2
+      '@babel/helper-simple-access': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
       '@babel/helper-validator-identifier': 7.19.1
       '@babel/template': 7.18.10
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/helper-optimise-call-expression/7.18.6:
-    resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.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-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.19.0
-      '@babel/types': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/helper-replace-supers/7.19.1:
-    resolution: {integrity: sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-member-expression-to-functions': 7.18.9
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/helper-simple-access/7.20.2:
-    resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==}
+  /@babel/helper-plugin-utils/7.19.0:
+    resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.20.2
     dev: true
 
-  /@babel/helper-skip-transparent-expression-wrappers/7.20.0:
-    resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==}
+  /@babel/helper-simple-access/7.18.6:
+    resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.20.2
+      '@babel/types': 7.19.0
     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.20.2
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/helper-string-parser/7.19.4:
-    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+  /@babel/helper-string-parser/7.18.10:
+    resolution: {integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==}
     engines: {node: '>=6.9.0'}
     dev: true
 
@@ -1369,30 +943,13 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-validator-option/7.18.6:
-    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-wrap-function/7.19.0:
-    resolution: {integrity: sha512-txX8aN8CZyYGTwcLhlk87KRqncAzhh5TpQamZUa0/u3an36NtDpUP6bQgBCBcLeBs09R/OwQu3OjK0k/HwfNDg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-function-name': 7.19.0
-      '@babel/template': 7.18.10
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/helpers/7.20.1:
-    resolution: {integrity: sha512-J77mUVaDTUJFZ5BpP6mMn6OIl3rEWymk2ZxDBQJUG3P+PbmyMcF3bYWvz0ma69Af1oobDqT/iAsvzhB58xhQUg==}
+  /@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.20.1
-      '@babel/types': 7.20.2
+      '@babel/traverse': 7.19.1
+      '@babel/types': 7.19.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1406,1231 +963,141 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser/7.12.3:
-    resolution: {integrity: sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.20.2
-    dev: true
-
-  /@babel/parser/7.20.3:
-    resolution: {integrity: sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==}
+  /@babel/parser/7.19.1:
+    resolution: {integrity: sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.20.2
-    dev: true
-
-  /@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.18.9_@babel+core@7.12.3:
-    resolution: {integrity: sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==}
-    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.18.9_@babel+core@7.12.3
-    dev: true
-
-  /@babel/plugin-proposal-async-generator-functions/7.20.1_@babel+core@7.12.3:
-    resolution: {integrity: sha512-Gh5rchzSwE4kC+o/6T8waD0WHEQIsDmjltY8WnWRXHUdH8axZhuH86Ov9M72YhJfDrZseQwuuWaaIT/TmePp3g==}
-    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.20.2_@babel+core@7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/plugin-proposal-class-static-block/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.12.0
-    dependencies:
-      '@babel/core': 7.12.3
-      '@babel/helper-create-class-features-plugin': 7.20.2_@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-decorators/7.20.2_@babel+core@7.12.3:
-    resolution: {integrity: sha512-nkBH96IBmgKnbHQ5gXFrcmez+Z9S2EIDKDQGp005ROqBigc88Tky4rzCnlP/lnlj245dCEQl4/YyV0V1kYh5dw==}
-    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.20.2_@babel+core@7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/helper-replace-supers': 7.19.1
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/plugin-syntax-decorators': 7.19.0_@babel+core@7.12.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/plugin-proposal-do-expressions/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-ddToGCONJhCuL+l4FhtGnKl5ZYCj9fDVFiqiCdQDpeIbVn/NvMeSib+7T1/rk08jRafae4qNiP8OnJyuqlsuYA==}
-    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-do-expressions': 7.18.6_@babel+core@7.12.3
-    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-default-from/7.18.10_@babel+core@7.12.3:
-    resolution: {integrity: sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow==}
-    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-default-from': 7.18.6_@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-function-bind/7.18.9_@babel+core@7.12.3:
-    resolution: {integrity: sha512-9RfxqKkRBCCT0xoBl9AqieCMscJmSAL9HYixGMWH549jUpT9csWWK/HEYZEx9t9iW/PRSXgX95x9bDlgtAJGFA==}
-    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-function-bind': 7.18.6_@babel+core@7.12.3
-    dev: true
-
-  /@babel/plugin-proposal-function-sent/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-UdaOKPOLPt0O+Xu26tnw6oAZMLXhk+yMrXOzn6kAzTHBnWHJsoN1hlrgxFAQ+FRLS0ql1oYIQ2phvoFzmN3GMw==}
-    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-wrap-function': 7.19.0
-      '@babel/plugin-syntax-function-sent': 7.18.6_@babel+core@7.12.3
-    transitivePeerDependencies:
-      - supports-color
-    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
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/plugin-proposal-logical-assignment-operators/7.18.9_@babel+core@7.12.3:
-    resolution: {integrity: sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.12.3:
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     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
+      '@babel/helper-plugin-utils': 7.19.0
     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'}
+  /@babel/plugin-syntax-bigint/7.8.3_@babel+core@7.12.3:
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
     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
+      '@babel/helper-plugin-utils': 7.19.0
     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'}
+  /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.12.3:
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
     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
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/plugin-proposal-object-rest-spread/7.20.2_@babel+core@7.12.3:
-    resolution: {integrity: sha512-Ks6uej9WFK+fvIMesSqbAto5dD8Dz4VuuFvGJFKgIGSkJuRGcrwGECPA1fDgQK3/DbExBJpEkTeYeB8geIFCSQ==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.12.3:
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/compat-data': 7.20.1
       '@babel/core': 7.12.3
-      '@babel/helper-compilation-targets': 7.20.0_@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.3_@babel+core@7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     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'}
+  /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.12.3:
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     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
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/plugin-proposal-optional-chaining/7.18.9_@babel+core@7.12.3:
-    resolution: {integrity: sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==}
+  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.12.3:
+    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
     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
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/plugin-proposal-pipeline-operator/7.18.9_@babel+core@7.12.3:
-    resolution: {integrity: sha512-Pc33e6m8f4MJhRXVCUwiKZNtEm+W2CUPHIL0lyJNtkp+w6d75CLw3gsBKQ81VAMUgT9jVPIEU8gwJ5nJgmJ1Ag==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.12.3:
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/plugin-syntax-pipeline-operator': 7.18.6_@babel+core@7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     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'}
+  /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.12.3:
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-create-class-features-plugin': 7.20.2_@babel+core@7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/plugin-proposal-private-property-in-object/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.12.3:
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     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.20.2_@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-throw-expressions/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-WHOrJyhGoGrdtW480L79cF7Iq/gZDZ/z6OqK7mVyFR5I37dTpog/wNgb6hmaM3HYZtULEJl++7VaMWkNZsOcHg==}
-    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-throw-expressions': 7.18.6_@babel+core@7.12.3
-    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.19.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:
-    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
-    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-async-generators/7.8.4_@babel+core@7.20.2:
-    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-bigint/7.8.3_@babel+core@7.20.2:
-    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.12.3:
-    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
-    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-class-properties/7.12.13_@babel+core@7.20.2:
-    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@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-decorators/7.19.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==}
-    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-do-expressions/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-kTogvOsjBTVOSZtkkziiXB5hwGXqwhq2gBXDaiWVruRLDT7C2GqfbsMnicHJ7ePq2GE8UJeWS34YbNP6yDhwUA==}
-    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-default-from/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-Kr//z3ujSVNx6E9z9ih5xXXMqK07VVTuqPmqGe6Mss/zW5XPeLZeSDZoP9ab/hT4wPKqAgjl2PnhPrcpk8Seew==}
-    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-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-flow/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==}
-    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-function-bind/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-wZN0Aq/AScknI9mKGcR3TpHdASMufFGaeJgc1rhPmLtZ/PniwjePSh8cfh8tXMB3U4kh/3cRKrLjDtedejg8jQ==}
-    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-function-sent/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-f3OJHIlFIkg+cP1Hfo2SInLhsg0pz2Ikmgo7jMdIIKC+3jVXQlHB0bgSapOWxeWI0SU28qIWmfn5ZKu1yPJHkg==}
-    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-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:
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
-    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.20.2:
-    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.12.3:
-    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
-    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-json-strings/7.8.3_@babel+core@7.20.2:
-    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
-    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-jsx/7.18.6_@babel+core@7.20.2:
-    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.12.3:
-    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
-    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-logical-assignment-operators/7.10.4_@babel+core@7.20.2:
-    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.12.3:
-    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
-    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-nullish-coalescing-operator/7.8.3_@babel+core@7.20.2:
-    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.12.3:
-    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
-    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-numeric-separator/7.10.4_@babel+core@7.20.2:
-    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.12.3:
-    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
-    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-object-rest-spread/7.8.3_@babel+core@7.20.2:
-    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.12.3:
-    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
-    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-optional-catch-binding/7.8.3_@babel+core@7.20.2:
-    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.12.3:
-    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
-    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-optional-chaining/7.8.3_@babel+core@7.20.2:
-    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-pipeline-operator/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-pFtIdQomJtkTHWcNsGXhjJ5YUkL+AxJnP4G+Ol85UO6uT2fpHTPYLLE5bBeRA9cxf25qa/VKsJ3Fi67Gyqe3rA==}
-    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-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-throw-expressions/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-rp1CqEZXGv1z1YZ3qYffBH3rhnOxrTwQG8fh2yqulTurwv9zu3Gthfd+niZBLSOi1rY6146TgF+JmVeDXaX4TQ==}
-    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:
-    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
-    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.20.2:
-    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-syntax-typescript/7.20.0_@babel+core@7.20.2:
-    resolution: {integrity: sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-transform-arrow-functions/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==}
-    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.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==}
-    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.20.2_@babel+core@7.12.3:
-    resolution: {integrity: sha512-y5V15+04ry69OV2wULmwhEA6jwSWXO1TwAtIwiPXcvHcoOQUqpyMVd2bDsQJMW8AurjulIyUV8kDqtjSwHy1uQ==}
-    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.20.2_@babel+core@7.12.3:
-    resolution: {integrity: sha512-9rbPp0lCVVoagvtEyQKSo5L8oo0nQS/iif+lwlAz29MccX2642vWDlSZK+2T2buxbopotId2ld7zZAzRfz9j1g==}
-    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.0_@babel+core@7.12.3
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.19.0
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/helper-replace-supers': 7.19.1
-      '@babel/helper-split-export-declaration': 7.18.6
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/plugin-transform-computed-properties/7.18.9_@babel+core@7.12.3:
-    resolution: {integrity: sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==}
-    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-destructuring/7.20.2_@babel+core@7.12.3:
-    resolution: {integrity: sha512-mENM+ZHrvEgxLTBXUiQ621rRXZes3KWUv6NdQlrnr1TkWVw+hUjQBZuP2X32qKlrlG2BzgR95gkuCRSkJl8vIw==}
-    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.19.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-flow-strip-types/7.19.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==}
-    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-flow': 7.18.6_@babel+core@7.12.3
-    dev: true
-
-  /@babel/plugin-transform-for-of/7.18.8_@babel+core@7.12.3:
-    resolution: {integrity: sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==}
-    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.0_@babel+core@7.12.3
-      '@babel/helper-function-name': 7.19.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.19.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.12.3
-      '@babel/helper-module-transforms': 7.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/plugin-transform-modules-commonjs/7.19.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.12.3
-      '@babel/helper-module-transforms': 7.20.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.19.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==}
-    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.20.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.20.2
-      '@babel/helper-plugin-utils': 7.20.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/plugin-transform-named-capturing-groups-regex/7.19.1_@babel+core@7.12.3:
-    resolution: {integrity: sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.12.3
-      '@babel/helper-create-regexp-features-plugin': 7.19.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.19.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/plugin-transform-parameters/7.20.3_@babel+core@7.12.3:
-    resolution: {integrity: sha512-oZg/Fpx0YDrj13KsLyO8I/CX3Zdw7z0O9qOd95SqcoIzuqy/WTGWvePeHAnZCN54SfdyjHcb1S30gc8zlzlHcA==}
-    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-react-display-name/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==}
-    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-react-jsx-development/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.12.3
-      '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.12.3
-    dev: true
-
-  /@babel/plugin-transform-react-jsx/7.19.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==}
-    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-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.12.3
-      '@babel/types': 7.20.2
-    dev: true
-
-  /@babel/plugin-transform-react-pure-annotations/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==}
-    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-plugin-utils': 7.20.2
-    dev: true
-
-  /@babel/plugin-transform-regenerator/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==}
-    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.0
-    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.19.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==}
-    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.19.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.20.1
-      '@babel/core': 7.12.3
-      '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/helper-validator-option': 7.18.6
-      '@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.18.9_@babel+core@7.12.3
-      '@babel/plugin-proposal-async-generator-functions': 7.20.1_@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.18.6_@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.18.9_@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.2_@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.18.9_@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.18.6_@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.18.6_@babel+core@7.12.3
-      '@babel/plugin-transform-async-to-generator': 7.18.6_@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.20.2_@babel+core@7.12.3
-      '@babel/plugin-transform-classes': 7.20.2_@babel+core@7.12.3
-      '@babel/plugin-transform-computed-properties': 7.18.9_@babel+core@7.12.3
-      '@babel/plugin-transform-destructuring': 7.20.2_@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.18.8_@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.19.6_@babel+core@7.12.3
-      '@babel/plugin-transform-modules-commonjs': 7.19.6_@babel+core@7.12.3
-      '@babel/plugin-transform-modules-systemjs': 7.19.6_@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.19.1_@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.3_@babel+core@7.12.3
-      '@babel/plugin-transform-property-literals': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-transform-regenerator': 7.18.6_@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.19.0_@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.20.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.26.0
-      semver: 6.3.0
-    transitivePeerDependencies:
-      - supports-color
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/preset-flow/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-E7BDhL64W6OUqpuyHnSroLnqyRTcG6ZdOBl1OKI/QK/HJfplqK/S3sq1Cckx7oTodJ5yOXyfw7rEADJ6UjoQDQ==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.12.3:
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/helper-validator-option': 7.18.6
-      '@babel/plugin-transform-flow-strip-types': 7.19.0_@babel+core@7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/preset-modules/0.1.5_@babel+core@7.12.3:
-    resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==}
+  /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.12.3:
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     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.20.2
-      esutils: 2.0.3
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/preset-react/7.18.6_@babel+core@7.12.3:
-    resolution: {integrity: sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==}
-    engines: {node: '>=6.9.0'}
+  /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.12.3:
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.3
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/helper-validator-option': 7.18.6
-      '@babel/plugin-transform-react-display-name': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.12.3
-      '@babel/plugin-transform-react-jsx-development': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-transform-react-pure-annotations': 7.18.6_@babel+core@7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/preset-stage-0/7.8.3:
-    resolution: {integrity: sha512-+l6FlG1j73t4wh78W41StbcCz0/9a1/y+vxfnjtHl060kSmcgMfGzK9MEkLvrCOXfhp9RCX+d88sm6rOqxEIEQ==}
+  /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.12.3:
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
-  /@babel/runtime/7.20.1:
-    resolution: {integrity: sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==}
+  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.12.3:
+    resolution: {integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==}
     engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
     dependencies:
-      regenerator-runtime: 0.13.10
+      '@babel/core': 7.12.3
+      '@babel/helper-plugin-utils': 7.19.0
     dev: true
 
   /@babel/template/7.18.10:
@@ -2638,33 +1105,33 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.20.3
-      '@babel/types': 7.20.2
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.19.0
     dev: true
 
-  /@babel/traverse/7.20.1:
-    resolution: {integrity: sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==}
+  /@babel/traverse/7.19.1:
+    resolution: {integrity: sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.20.4
+      '@babel/generator': 7.19.0
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.20.3
-      '@babel/types': 7.20.2
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.19.0
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types/7.20.2:
-    resolution: {integrity: sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==}
+  /@babel/types/7.19.0:
+    resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-string-parser': 7.18.10
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
     dev: true
@@ -2684,26 +1151,6 @@ packages:
     dev: true
     optional: true
 
-  /@commitlint/cli/17.1.2:
-    resolution: {integrity: sha512-h/4Hlka3bvCLbnxf0Er2ri5A44VMlbMSkdTRp8Adv2tRiklSTRIoPGs7OEXDv3EoDs2AAzILiPookgM4Gi7LOw==}
-    engines: {node: '>=v14'}
-    hasBin: true
-    dependencies:
-      '@commitlint/format': 17.0.0
-      '@commitlint/lint': 17.1.0
-      '@commitlint/load': 17.1.2
-      '@commitlint/read': 17.1.0
-      '@commitlint/types': 17.0.0
-      execa: 5.1.1
-      lodash: 4.17.21
-      resolve-from: 5.0.0
-      resolve-global: 1.0.0
-      yargs: 17.5.1
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-    dev: true
-
   /@commitlint/cli/17.2.0:
     resolution: {integrity: sha512-kd1zykcrjIKyDRftWW1E1TJqkgzeosEkv1BiYPCdzkb/g/3BrfgwZUHR1vg+HO3qKUb/0dN+jNXArhGGAHpmaQ==}
     engines: {node: '>=v14'}
@@ -2718,19 +1165,12 @@ packages:
       lodash: 4.17.21
       resolve-from: 5.0.0
       resolve-global: 1.0.0
-      yargs: 17.6.2
+      yargs: 17.5.1
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/config-conventional/17.1.0:
-    resolution: {integrity: sha512-WU2p0c9/jLi8k2q2YrDV96Y8XVswQOceIQ/wyJvQxawJSCasLdRB3kUIYdNjOCJsxkpoUlV/b90ZPxp1MYZDiA==}
-    engines: {node: '>=v14'}
-    dependencies:
-      conventional-changelog-conventionalcommits: 5.0.0
-    dev: true
-
   /@commitlint/config-conventional/17.2.0:
     resolution: {integrity: sha512-g5hQqRa80f++SYS233dbDSg16YdyounMTAhVcmqtInNeY/GF3aA4st9SVtJxpeGrGmueMrU4L+BBb+6Vs5wrcg==}
     engines: {node: '>=v14'}
@@ -2767,14 +1207,6 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@commitlint/is-ignored/17.1.0:
-    resolution: {integrity: sha512-JITWKDMHhIh8IpdIbcbuH9rEQJty1ZWelgjleTFrVRAcEwN/sPzk1aVUXRIZNXMJWbZj8vtXRJnFihrml8uECQ==}
-    engines: {node: '>=v14'}
-    dependencies:
-      '@commitlint/types': 17.0.0
-      semver: 7.3.7
-    dev: true
-
   /@commitlint/is-ignored/17.2.0:
     resolution: {integrity: sha512-rgUPUQraHxoMLxiE8GK430HA7/R2vXyLcOT4fQooNrZq9ERutNrP6dw3gdKLkq22Nede3+gEHQYUzL4Wu75ndg==}
     engines: {node: '>=v14'}
@@ -2783,16 +1215,6 @@ packages:
       semver: 7.3.7
     dev: true
 
-  /@commitlint/lint/17.1.0:
-    resolution: {integrity: sha512-ltpqM2ogt/+SDhUaScFo0MdscncEF96lvQTPMM/VTTWlw7sTGLLWkOOppsee2MN/uLNNWjQ7kqkd4h6JqoM9AQ==}
-    engines: {node: '>=v14'}
-    dependencies:
-      '@commitlint/is-ignored': 17.1.0
-      '@commitlint/parse': 17.0.0
-      '@commitlint/rules': 17.0.0
-      '@commitlint/types': 17.0.0
-    dev: true
-
   /@commitlint/lint/17.2.0:
     resolution: {integrity: sha512-N2oLn4Dj672wKH5qJ4LGO+73UkYXGHO+NTVUusGw83SjEv7GjpqPGKU6KALW2kFQ/GsDefSvOjpSi3CzWHQBDg==}
     engines: {node: '>=v14'}
@@ -2803,8 +1225,8 @@ packages:
       '@commitlint/types': 17.0.0
     dev: true
 
-  /@commitlint/load/17.1.2:
-    resolution: {integrity: sha512-sk2p/jFYAWLChIfOIp/MGSIn/WzZ0vkc3afw+l4X8hGEYkvDe4gQUUAVxjl/6xMRn0HgnSLMZ04xXh5pkTsmgg==}
+  /@commitlint/load/17.2.0:
+    resolution: {integrity: sha512-HDD57qSqNrk399R4TIjw31AWBG8dBjNj1MrDKZKmC/wvimtnIFlqzcu1+sxfXIOHj/+M6tcMWDtvknGUd7SU+g==}
     engines: {node: '>=v14'}
     dependencies:
       '@commitlint/config-validator': 17.1.0
@@ -2824,46 +1246,11 @@ packages:
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/load/17.2.0:
-    resolution: {integrity: sha512-HDD57qSqNrk399R4TIjw31AWBG8dBjNj1MrDKZKmC/wvimtnIFlqzcu1+sxfXIOHj/+M6tcMWDtvknGUd7SU+g==}
-    engines: {node: '>=v14'}
-    dependencies:
-      '@commitlint/config-validator': 17.1.0
-      '@commitlint/execute-rule': 17.0.0
-      '@commitlint/resolve-extends': 17.1.0
-      '@commitlint/types': 17.0.0
-      '@types/node': 14.18.33
-      chalk: 4.1.2
-      cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 4.2.0_gbbg4brkmakf6m5nuj7scelzny
-      lodash: 4.17.21
-      resolve-from: 5.0.0
-      ts-node: 10.9.1_yodorn5kzjgomblrsstrk2spaa
-      typescript: 4.8.4
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-    dev: true
-
-  /@commitlint/message/17.0.0:
-    resolution: {integrity: sha512-LpcwYtN+lBlfZijHUdVr8aNFTVpHjuHI52BnfoV01TF7iSLnia0jttzpLkrLmI8HNQz6Vhr9UrxDWtKZiMGsBw==}
-    engines: {node: '>=v14'}
-    dev: true
-
   /@commitlint/message/17.2.0:
     resolution: {integrity: sha512-/4l2KFKxBOuoEn1YAuuNNlAU05Zt7sNsC9H0mPdPm3chOrT4rcX0pOqrQcLtdMrMkJz0gC7b3SF80q2+LtdL9Q==}
     engines: {node: '>=v14'}
     dev: true
 
-  /@commitlint/parse/17.0.0:
-    resolution: {integrity: sha512-cKcpfTIQYDG1ywTIr5AG0RAiLBr1gudqEsmAGCTtj8ffDChbBRxm6xXs2nv7GvmJN7msOt7vOKleLvcMmRa1+A==}
-    engines: {node: '>=v14'}
-    dependencies:
-      '@commitlint/types': 17.0.0
-      conventional-changelog-angular: 5.0.13
-      conventional-commits-parser: 3.2.4
-    dev: true
-
   /@commitlint/parse/17.2.0:
     resolution: {integrity: sha512-vLzLznK9Y21zQ6F9hf8D6kcIJRb2haAK5T/Vt1uW2CbHYOIfNsR/hJs0XnF/J9ctM20Tfsqv4zBitbYvVw7F6Q==}
     engines: {node: '>=v14'}
@@ -2873,17 +1260,6 @@ packages:
       conventional-commits-parser: 3.2.4
     dev: true
 
-  /@commitlint/read/17.1.0:
-    resolution: {integrity: sha512-73BoFNBA/3Ozo2JQvGsE0J8SdrJAWGfZQRSHqvKaqgmY042Su4gXQLqvAzgr55S9DI1l9TiU/5WDuh8IE86d/g==}
-    engines: {node: '>=v14'}
-    dependencies:
-      '@commitlint/top-level': 17.0.0
-      '@commitlint/types': 17.0.0
-      fs-extra: 10.1.0
-      git-raw-commits: 2.0.11
-      minimist: 1.2.6
-    dev: true
-
   /@commitlint/read/17.2.0:
     resolution: {integrity: sha512-bbblBhrHkjxra3ptJNm0abxu7yeAaxumQ8ZtD6GIVqzURCETCP7Dm0tlVvGRDyXBuqX6lIJxh3W7oyKqllDsHQ==}
     engines: {node: '>=v14'}
@@ -2892,7 +1268,7 @@ packages:
       '@commitlint/types': 17.0.0
       fs-extra: 10.1.0
       git-raw-commits: 2.0.11
-      minimist: 1.2.7
+      minimist: 1.2.6
     dev: true
 
   /@commitlint/resolve-extends/17.1.0:
@@ -2907,17 +1283,6 @@ packages:
       resolve-global: 1.0.0
     dev: true
 
-  /@commitlint/rules/17.0.0:
-    resolution: {integrity: sha512-45nIy3dERKXWpnwX9HeBzK5SepHwlDxdGBfmedXhL30fmFCkJOdxHyOJsh0+B0RaVsLGT01NELpfzJUmtpDwdQ==}
-    engines: {node: '>=v14'}
-    dependencies:
-      '@commitlint/ensure': 17.0.0
-      '@commitlint/message': 17.0.0
-      '@commitlint/to-lines': 17.0.0
-      '@commitlint/types': 17.0.0
-      execa: 5.1.1
-    dev: true
-
   /@commitlint/rules/17.2.0:
     resolution: {integrity: sha512-1YynwD4Eh7HXZNpqG8mtUlL2pSX2jBy61EejYJv4ooZPcg50Ak7LPOyD3a9UZnsE76AXWFBz+yo9Hv4MIpAa0Q==}
     engines: {node: '>=v14'}
@@ -2948,6 +1313,319 @@ packages:
       chalk: 4.1.2
     dev: true
 
+  /@cspell/cspell-bundled-dicts/6.14.2:
+    resolution: {integrity: sha512-gh6h/1vy332s3IR7x1v53Cp/WGPpbKKRdte3qUG0KZol9A52agfPCju8TEHxsyk8rXAbVtqYwue8Y68Nz4ZbVg==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/dict-ada': 4.0.0
+      '@cspell/dict-aws': 3.0.0
+      '@cspell/dict-bash': 4.1.0
+      '@cspell/dict-companies': 3.0.3
+      '@cspell/dict-cpp': 4.0.0
+      '@cspell/dict-cryptocurrencies': 3.0.1
+      '@cspell/dict-csharp': 4.0.1
+      '@cspell/dict-css': 4.0.0
+      '@cspell/dict-dart': 2.0.0
+      '@cspell/dict-django': 4.0.0
+      '@cspell/dict-docker': 1.1.3
+      '@cspell/dict-dotnet': 4.0.0
+      '@cspell/dict-elixir': 4.0.0
+      '@cspell/dict-en-gb': 1.1.33
+      '@cspell/dict-en_us': 4.1.0
+      '@cspell/dict-filetypes': 3.0.0
+      '@cspell/dict-fonts': 3.0.0
+      '@cspell/dict-fullstack': 3.0.0
+      '@cspell/dict-git': 2.0.0
+      '@cspell/dict-golang': 5.0.0
+      '@cspell/dict-haskell': 4.0.0
+      '@cspell/dict-html': 4.0.1
+      '@cspell/dict-html-symbol-entities': 4.0.0
+      '@cspell/dict-java': 5.0.2
+      '@cspell/dict-latex': 3.0.0
+      '@cspell/dict-lorem-ipsum': 3.0.0
+      '@cspell/dict-lua': 3.0.0
+      '@cspell/dict-node': 4.0.1
+      '@cspell/dict-npm': 4.0.1
+      '@cspell/dict-php': 3.0.3
+      '@cspell/dict-powershell': 3.0.0
+      '@cspell/dict-public-licenses': 2.0.0
+      '@cspell/dict-python': 4.0.0
+      '@cspell/dict-r': 2.0.0
+      '@cspell/dict-ruby': 3.0.0
+      '@cspell/dict-rust': 3.0.0
+      '@cspell/dict-scala': 3.0.0
+      '@cspell/dict-software-terms': 3.0.5
+      '@cspell/dict-sql': 2.0.0
+      '@cspell/dict-swift': 2.0.0
+      '@cspell/dict-typescript': 3.0.1
+      '@cspell/dict-vue': 3.0.0
+    dev: true
+
+  /@cspell/cspell-bundled-dicts/6.14.3:
+    resolution: {integrity: sha512-bgPBduoDi1jkrcLkmAwRG1c6F1iprF2yfBgEDT19dRG1kYuq/fLGNOcSmEp4CbApn8m0MmxsrhEp8O0Q9owQRQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/dict-ada': 4.0.0
+      '@cspell/dict-aws': 3.0.0
+      '@cspell/dict-bash': 4.1.0
+      '@cspell/dict-companies': 3.0.3
+      '@cspell/dict-cpp': 4.0.0
+      '@cspell/dict-cryptocurrencies': 3.0.1
+      '@cspell/dict-csharp': 4.0.1
+      '@cspell/dict-css': 4.0.0
+      '@cspell/dict-dart': 2.0.0
+      '@cspell/dict-django': 4.0.0
+      '@cspell/dict-docker': 1.1.3
+      '@cspell/dict-dotnet': 4.0.0
+      '@cspell/dict-elixir': 4.0.0
+      '@cspell/dict-en-gb': 1.1.33
+      '@cspell/dict-en_us': 4.1.0
+      '@cspell/dict-filetypes': 3.0.0
+      '@cspell/dict-fonts': 3.0.0
+      '@cspell/dict-fullstack': 3.0.0
+      '@cspell/dict-git': 2.0.0
+      '@cspell/dict-golang': 5.0.0
+      '@cspell/dict-haskell': 4.0.0
+      '@cspell/dict-html': 4.0.1
+      '@cspell/dict-html-symbol-entities': 4.0.0
+      '@cspell/dict-java': 5.0.2
+      '@cspell/dict-latex': 3.0.0
+      '@cspell/dict-lorem-ipsum': 3.0.0
+      '@cspell/dict-lua': 3.0.0
+      '@cspell/dict-node': 4.0.1
+      '@cspell/dict-npm': 4.0.1
+      '@cspell/dict-php': 3.0.3
+      '@cspell/dict-powershell': 3.0.0
+      '@cspell/dict-public-licenses': 2.0.0
+      '@cspell/dict-python': 4.0.0
+      '@cspell/dict-r': 2.0.0
+      '@cspell/dict-ruby': 3.0.0
+      '@cspell/dict-rust': 3.0.0
+      '@cspell/dict-scala': 3.0.0
+      '@cspell/dict-software-terms': 3.0.5
+      '@cspell/dict-sql': 2.0.0
+      '@cspell/dict-swift': 2.0.0
+      '@cspell/dict-typescript': 3.0.1
+      '@cspell/dict-vue': 3.0.0
+    dev: true
+
+  /@cspell/cspell-pipe/6.14.2:
+    resolution: {integrity: sha512-9H7Z/jy2tGpMW9T/JOk8T3bqvQoHJIz1wddktA5Lq8fnMqlDhM9le2uykhVlLpemLhWpDS2fNzLJ3sHiaPgHBA==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /@cspell/cspell-pipe/6.14.3:
+    resolution: {integrity: sha512-/mLZxJOK3/UFpnR4jrImKY5W4cn5XWjvQPXnFCEzpU0tAAF6GboJgWl30TegqFJjLVCKTNRMOtT1r6kgvb66zw==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /@cspell/cspell-service-bus/6.14.2:
+    resolution: {integrity: sha512-IOK4MqwDNS2y29eZjdpHrCQ0ouTWZCS2e3EOmlvY+yUpT7e1AX8pVOaar4jLnXg03evAjrFrrmfmhFI6poO6Hg==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /@cspell/cspell-service-bus/6.14.3:
+    resolution: {integrity: sha512-89OWGBzhorhiWcFqFTeHl9Y6WTdd5MGC2XNNCVZLM3VTYaFx4DVkiyxWdkE7gHjYxvNdGSH54/fE18TqLc//dQ==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /@cspell/cspell-types/6.14.2:
+    resolution: {integrity: sha512-/EZYVglm6+2GlnkFTzuLuQFr7vrttkhG+ZsNO9EDcFYB5N7O2ndNSkTQFxGi8FS8R3RS5CHyS5X6hANnolzvfQ==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /@cspell/cspell-types/6.14.3:
+    resolution: {integrity: sha512-u4Hun0vOQVkk3tJ6VzPjHVmv2dq0D6jYqX8pWLKWRwo38rdoIkdWseN359sWCz96tDM8g5rpSFdmecbWLU7BYg==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /@cspell/dict-ada/4.0.0:
+    resolution: {integrity: sha512-M0n4ZYmpLOXbDD07Qb/Ekk0K5pX2C+mCuJ2ZxPgbTq9HGlrN43PmqrGJHWcgtVHE3fd1D4VxS85QcQP6r1Y+KQ==}
+    dev: true
+
+  /@cspell/dict-aws/3.0.0:
+    resolution: {integrity: sha512-O1W6nd5y3Z00AMXQMzfiYrIJ1sTd9fB1oLr+xf/UD7b3xeHeMeYE2OtcWbt9uyeHim4tk+vkSTcmYEBKJgS5bQ==}
+    dev: true
+
+  /@cspell/dict-bash/4.1.0:
+    resolution: {integrity: sha512-8pFL03ZKejynfbsa2UZ3iZ7BrT1TAGTD8ZlK822ioAb7aoDvQhYao2Bjz5cXU0uk7CyrlgsSnYX94sLfqDfTxQ==}
+    dev: true
+
+  /@cspell/dict-companies/3.0.3:
+    resolution: {integrity: sha512-qBWdwA97HdnLbxPLOUTZ+/mg9eYhi14hM7PEUM1PZ004MEIxQHum0IQpypKAwP3teR1KEsyxEPHp8v24Dw45Zg==}
+    dev: true
+
+  /@cspell/dict-cpp/4.0.0:
+    resolution: {integrity: sha512-NrCmer14tTSbPs1TwqyCjFEmWCBw0UFvAn4O3pdWuxktArHxRJ5vUQOoL2Gus2H9s3ihhOJZkcuJ47Kd21E7BQ==}
+    dev: true
+
+  /@cspell/dict-cryptocurrencies/3.0.1:
+    resolution: {integrity: sha512-Tdlr0Ahpp5yxtwM0ukC13V6+uYCI0p9fCRGMGZt36rWv8JQZHIuHfehNl7FB/Qc09NCF7p5ep0GXbL+sVTd/+w==}
+    dev: true
+
+  /@cspell/dict-csharp/4.0.1:
+    resolution: {integrity: sha512-BkfT6S790FcyWLTWYBwkj9dKxuNz4pHFDrj9GFrmqXd2HWzfSa944S0NJhal42TnW30JJljQY5P1ZYau+s2Pbg==}
+    dev: true
+
+  /@cspell/dict-css/4.0.0:
+    resolution: {integrity: sha512-ieSeG9KAJGIr5eK0JRWqD5KXstPPUw6JUTmGWc7P/qiqj/sjmhWqWKEt7HhoSNcb8uQxAkAoxhrNpfbKzqnKAw==}
+    dev: true
+
+  /@cspell/dict-dart/2.0.0:
+    resolution: {integrity: sha512-p7vHszsu2uJt+F04gvNy1e5okypFfVEYHBWgpOV/Jrvs0F5A+gUzFTG2Ix9b1jkCigAULYKQkIGue+qlhSoK5Q==}
+    dev: true
+
+  /@cspell/dict-django/4.0.0:
+    resolution: {integrity: sha512-k0npSzQrPQSqjR2XtumV14sv9waTRMUzPx0UfOuJZcnCCZY8ofPeqFYoku+O+9Kc9etFOziOxnScshKVDzYWOQ==}
+    dev: true
+
+  /@cspell/dict-docker/1.1.3:
+    resolution: {integrity: sha512-Iz7EQGnLBgnnmzCC8iLQ7JssCCQlCjZLiCs0qhooETWLifob3nzsI9AVBh3gkYLhISLIIjBpfa4LTknskT7LzA==}
+    dev: true
+
+  /@cspell/dict-dotnet/4.0.0:
+    resolution: {integrity: sha512-biZiTWyDqwVV2m+c17lLIliPDXPjOR1VwwmyMxvb3nFS84aP9x52SAVCf0w7Io1CIpUiY7XnG6/xeI7esYU78w==}
+    dev: true
+
+  /@cspell/dict-elixir/4.0.0:
+    resolution: {integrity: sha512-0TqqdQjg/zu3wAjk2FQkZ87pPIS9tA9kl6he5NJB729ysrWhND/7aSPC48QrP46VZ+oFrvFZK8DC8ZlYs16cjQ==}
+    dev: true
+
+  /@cspell/dict-en-gb/1.1.33:
+    resolution: {integrity: sha512-tKSSUf9BJEV+GJQAYGw5e+ouhEe2ZXE620S7BLKe3ZmpnjlNG9JqlnaBhkIMxKnNFkLY2BP/EARzw31AZnOv4g==}
+    dev: true
+
+  /@cspell/dict-en_us/4.1.0:
+    resolution: {integrity: sha512-EnfxP/5U3kDhmTWcHV7Xs2Fxa9KAE5fbHm+4u8LGBOUZvSkZC5+ayjQ50CfEyTGuaI/946ITQYPRNxUZ7oqOiQ==}
+    dev: true
+
+  /@cspell/dict-filetypes/3.0.0:
+    resolution: {integrity: sha512-Fiyp0z5uWaK0d2TfR9GMUGDKmUMAsOhGD5A0kHoqnNGswL2iw0KB0mFBONEquxU65fEnQv4R+jdM2d9oucujuA==}
+    dev: true
+
+  /@cspell/dict-fonts/3.0.0:
+    resolution: {integrity: sha512-zTZni0AbwBVG1MKA0WpwPyIJPVF+gp6neXDQzHcu4RUnuQ4uDu0PVEuZjGHCJWwwFoR5JmkqZxVSg1y3ufJODA==}
+    dev: true
+
+  /@cspell/dict-fullstack/3.0.0:
+    resolution: {integrity: sha512-BMQRTaeReLufjMwgWqqwPdrXQ7jkVGTv7/YvOLsHFZvcAP3eM7WqX+rvdXckLhJmuuzbceFRDKs5F/9Ig2x/tQ==}
+    dev: true
+
+  /@cspell/dict-git/2.0.0:
+    resolution: {integrity: sha512-n1AxyX5Kgxij/sZFkxFJlzn3K9y/sCcgVPg/vz4WNJ4K9YeTsUmyGLA2OQI7d10GJeiuAo2AP1iZf2A8j9aj2w==}
+    dev: true
+
+  /@cspell/dict-golang/5.0.0:
+    resolution: {integrity: sha512-Cbx4mVHsGbr5D+wlT0yU3n/0c5iLvciU48rSOQR7SCAzu5mTXyM1mqRu6nqnRiMv6G6mO50EL2LCTq6RZrlIOg==}
+    dev: true
+
+  /@cspell/dict-haskell/4.0.0:
+    resolution: {integrity: sha512-U/DPpDoitGeUvduM9teDkDc1zs4Plgh0pNONDP3YbsEICErSlp1NfatD0i35Z6cR0C7I8uEe4gG2phG00zrSqw==}
+    dev: true
+
+  /@cspell/dict-html-symbol-entities/4.0.0:
+    resolution: {integrity: sha512-HGRu+48ErJjoweR5IbcixxETRewrBb0uxQBd6xFGcxbEYCX8CnQFTAmKI5xNaIt2PKaZiJH3ijodGSqbKdsxhw==}
+    dev: true
+
+  /@cspell/dict-html/4.0.1:
+    resolution: {integrity: sha512-q5fCzkoOz+8BW79qLrnANEDnG+Jb2WS2fXERxg9xwgKBXwXUxH8ttGVNhfkLpNWe/UMm00U1IZMnVGyYLNTO5w==}
+    dev: true
+
+  /@cspell/dict-java/5.0.2:
+    resolution: {integrity: sha512-HWgdp8plZOdYjOkndwmgHGVxoewylZcl886PqSL6TMcDshyI0+2nePft31nIuALRvt7HL8IX++DM1uk4UfY4kg==}
+    dev: true
+
+  /@cspell/dict-latex/3.0.0:
+    resolution: {integrity: sha512-QsRWj+Jll4ueVbce8ofKa743oQ2exmbVNZN70MaMbmu8PSbjW2+Rj3OdExVStesANMj7qc20inS/TgPr8DrInQ==}
+    dev: true
+
+  /@cspell/dict-lorem-ipsum/3.0.0:
+    resolution: {integrity: sha512-msEV24qEpzWZs2kcEicqYlhyBpR0amfDkJOs+iffC07si9ftqtQ+yP3lf1VFLpgqw3SQh1M1vtU7RD4sPrNlcQ==}
+    dev: true
+
+  /@cspell/dict-lua/3.0.0:
+    resolution: {integrity: sha512-WOhSCgS5wMxkGQJ8siB90iTB9ElquJB7FeqYSbJqqs6cUwH8G7MM/CEDPL6h7vCo0+v3GuxQ8yKWDSUcUhz9Lg==}
+    dev: true
+
+  /@cspell/dict-node/4.0.1:
+    resolution: {integrity: sha512-4EmT5yZFitdwnG0hYEd+Ek19zzD81Bp+n7w0kglZKldS5AvapwW6GM/SAps5YMQQc5zZMi+bMgV7NIzapREqUg==}
+    dev: true
+
+  /@cspell/dict-npm/4.0.1:
+    resolution: {integrity: sha512-jNKImVG5ZX+Pp6PhbSR3TmC9+0ROx09dGhSgUsZyvXV5CGEr+OQGJtNL98TGwU3pP2Xjc++qnHA/XPwB5WvLfA==}
+    dev: true
+
+  /@cspell/dict-php/3.0.3:
+    resolution: {integrity: sha512-7dvXdPTfbIF2xEob9w94/eV5SU8BkYoN0R7EQghXi0fcF7T1unK+JwDgfoEs6wqApB5aCVYwguiaj8HGX2IRIQ==}
+    dev: true
+
+  /@cspell/dict-powershell/3.0.0:
+    resolution: {integrity: sha512-pkztY9Ak4oc33q+Qxcn9/CTOKo4N8YIRRE6v67WwQOncA5QIJfcOPUrjfR3Z8SpzElXhu3s9qtWWSqbCy6qmcA==}
+    dev: true
+
+  /@cspell/dict-public-licenses/2.0.0:
+    resolution: {integrity: sha512-NdMHnS6xiYJKlzVoTV5CBhMiDpXMZ/PDcvXiOpxeR50xkjR18O/XFP4f4eDZpxGiBSUCMFRWf4JjILJ04Rpcfg==}
+    dev: true
+
+  /@cspell/dict-python/4.0.0:
+    resolution: {integrity: sha512-MC6CKbYOly3Ig25ZnhlCzPbE/QozqfQv4VYW6HcoMQ5IbHu33ddf2lzkZ89qTXlxsF5NT5qfZEkQYHYuhuL6AQ==}
+    dev: true
+
+  /@cspell/dict-r/2.0.0:
+    resolution: {integrity: sha512-rdt1cKc3VL2uXJ2X088gRhTFreN/MkJWK1jccW1EWdFHLzDwhKfrlAkoLCp0paD6HvmloLQ+eSR09D58DdsYfA==}
+    dev: true
+
+  /@cspell/dict-ruby/3.0.0:
+    resolution: {integrity: sha512-sA98T8Y1Pmq3RStVkO14E8vTWkq6JUn8c8PldiMyYgV0yfQgwhQfFAzlSfF3Gg2B0VkIdqt2et2SPN7f9wp7fQ==}
+    dev: true
+
+  /@cspell/dict-rust/3.0.0:
+    resolution: {integrity: sha512-L1T1IBsYJZVDmfOGAbVLcpc6arWxRRCSJYvHSwEDBGrNuMyJ4jx/NvBEz5crcKf4vVKgwVlXgzQlJJZ8AVxU9w==}
+    dev: true
+
+  /@cspell/dict-scala/3.0.0:
+    resolution: {integrity: sha512-sIiCQDIMMnNns/fzD61z5npbh5pypaKq07Orqe0+eRfdQpika8iRSGUGFHVbtdd1JzB1DyTCV2e8OwdaQiXqJQ==}
+    dev: true
+
+  /@cspell/dict-software-terms/3.0.5:
+    resolution: {integrity: sha512-xZVcX1zsIUbLvUc/RX+YgJRvbHaGMcdkRR+Vw8UoLjmhnT0yXWLds5uwRwAVjlQIrIcHylfDWuG70Cq5nmJHfA==}
+    dev: true
+
+  /@cspell/dict-sql/2.0.0:
+    resolution: {integrity: sha512-J3X8VSgWpc/4McQEs138abtBw/SO3Z+vGaYi5X7XV1pKPBxjupHTTNQHSS/HWUDmVWj6fR3OV+ZGptcmvv3Clg==}
+    dev: true
+
+  /@cspell/dict-swift/2.0.0:
+    resolution: {integrity: sha512-VStJ0fKPPNIXKmxJrbGH6vKNtJCwAnQatfSH0fVj+Unf3QHHlmuLKRG0cN0aVgEIolpRkxNXJcSB3CPbYr0Xhw==}
+    dev: true
+
+  /@cspell/dict-typescript/3.0.1:
+    resolution: {integrity: sha512-nKEtOpj+rJNIUK268/mCFDCIv1MWFdK1efm9YL4q1q3NHT+qCKhkXoA0eG8k4AaDIpsvebB8CgNIYFPxY92r4A==}
+    dev: true
+
+  /@cspell/dict-vue/3.0.0:
+    resolution: {integrity: sha512-niiEMPWPV9IeRBRzZ0TBZmNnkK3olkOPYxC1Ny2AX4TGlYRajcW0WUtoSHmvvjZNfWLSg2L6ruiBeuPSbjnG6A==}
+    dev: true
+
+  /@cspell/eslint-plugin/6.14.2:
+    resolution: {integrity: sha512-GnwM/DOenB6VIt4lMpmw4jI1Sc83eR9/lsxz/yTQ8LZFYVxK0yWi+LbSLCLvKhLJ9RNm7jzyHCanIFNtx+aEyw==}
+    engines: {node: '>=14'}
+    dependencies:
+      cspell-lib: 6.14.2
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@cspell/strong-weak-map/6.14.2:
+    resolution: {integrity: sha512-OS/t4e5vfUyAiOcyuI1I9d4/EWCx7pA3L8uHNOQQHgjVP41tffMaKTirqRiNhkruIhmxa5Tk5fbQLRMEFapalg==}
+    engines: {node: '>=14.6'}
+    dev: true
+
+  /@cspell/strong-weak-map/6.14.3:
+    resolution: {integrity: sha512-/FTvcywuwfFTMEpRabL8+rqB/ezSjvMp6todO0SwL/agYQmRIuTvTYLh0Ikq430oVnjo7LDgztW0tHq38UlFLw==}
+    engines: {node: '>=14.6'}
+    dev: true
+
   /@cspotcode/source-map-support/0.8.1:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -3001,7 +1679,7 @@ packages:
     resolution: {integrity: sha512-oFXWRPNvPxAzBhnFJ9UCFIYZiQNc3Yrv6912nZHw/UIGxsyzKpNRZgHq8HDk1niYmOSoLKtVFcxkccpQmYGFyg==}
     dependencies:
       '@docsearch/react': 3.3.0_tbpndr44ulefs3hehwpi2mkf2y
-      preact: 10.11.2
+      preact: 10.11.0
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -3031,15 +1709,6 @@ packages:
       - '@algolia/client-search'
     dev: true
 
-  /@es-joy/jsdoccomment/0.31.0:
-    resolution: {integrity: sha512-tc1/iuQcnaiSIUVad72PBierDFpsxdUHtEF/OrfqvM1CBAsIoMP51j52jTMb3dXriwhieTo289InzZj72jL3EQ==}
-    engines: {node: ^14 || ^16 || ^17 || ^18}
-    dependencies:
-      comment-parser: 1.3.1
-      esquery: 1.4.0
-      jsdoc-type-pratt-parser: 3.1.0
-    dev: true
-
   /@es-joy/jsdoccomment/0.36.0:
     resolution: {integrity: sha512-u0XZyvUF6Urb2cSivSXA8qXIpT/CxkHcdtZKoWusAzgzmsTWpg0F2FpWXsolHmMUyVY3dLWaoy+0ccJ5uf2QjA==}
     engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
@@ -3067,30 +1736,13 @@ packages:
     dev: true
     optional: true
 
-  /@eslint/eslintrc/1.3.2:
-    resolution: {integrity: sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.4.0
-      globals: 13.17.0
-      ignore: 5.2.0
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@eslint/eslintrc/1.3.3:
     resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
-      espree: 9.4.1
+      espree: 9.4.0
       globals: 13.17.0
       ignore: 5.2.0
       import-fresh: 3.3.0
@@ -3111,17 +1763,6 @@ packages:
       '@hapi/hoek': 9.3.0
     dev: true
 
-  /@humanwhocodes/config-array/0.10.5:
-    resolution: {integrity: sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@humanwhocodes/config-array/0.11.7:
     resolution: {integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==}
     engines: {node: '>=10.10.0'}
@@ -3133,22 +1774,13 @@ packages:
       - supports-color
     dev: true
 
-  /@humanwhocodes/gitignore-to-minimatch/1.0.2:
-    resolution: {integrity: sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==}
-    dev: true
-
   /@humanwhocodes/module-importer/1.0.1:
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
     dev: true
 
   /@humanwhocodes/object-schema/1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
-    dev: true
-
-  /@hutson/parse-repository-url/3.0.2:
-    resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==}
-    engines: {node: '>=6.9.0'}
+    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
   /@istanbuljs/load-nyc-config/1.1.0:
@@ -3196,7 +1828,7 @@ packages:
       '@types/node': 18.11.9
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      ci-info: 3.5.0
+      ci-info: 3.6.2
       exit: 0.1.2
       graceful-fs: 4.2.10
       jest-changed-files: 29.2.0
@@ -3286,7 +1918,7 @@ packages:
       '@jest/test-result': 29.3.1
       '@jest/transform': 29.3.1
       '@jest/types': 29.3.1
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
       '@types/node': 18.11.9
       chalk: 4.1.2
       collect-v8-coverage: 1.0.1
@@ -3294,7 +1926,7 @@ packages:
       glob: 7.2.3
       graceful-fs: 4.2.10
       istanbul-lib-coverage: 3.2.0
-      istanbul-lib-instrument: 5.2.1
+      istanbul-lib-instrument: 5.2.0
       istanbul-lib-report: 3.0.0
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
@@ -3313,14 +1945,14 @@ packages:
     resolution: {integrity: sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@sinclair/typebox': 0.24.51
+      '@sinclair/typebox': 0.24.43
     dev: true
 
   /@jest/source-map/29.2.0:
     resolution: {integrity: sha512-1NX9/7zzI0nqa6+kgpSdKPK+WU1p+SJk3TloWZf5MzPbxri9UEeXX5bWZAPCzbQcyuAzubcdUHA7hcNznmRqWQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
       callsites: 3.1.0
       graceful-fs: 4.2.10
     dev: true
@@ -3349,9 +1981,9 @@ packages:
     resolution: {integrity: sha512-8wmCFBTVGYqFNLWfcOWoVuMuKYPUBTnTMDkdvFtAYELwDOl9RGwOsvQWGPFxDJ8AWY9xM/8xCXdqmPK3+Q5Lug==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/core': 7.20.2
+      '@babel/core': 7.12.3
       '@jest/types': 29.3.1
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 2.0.0
@@ -3380,21 +2012,13 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@jridgewell/gen-mapping/0.1.1:
-    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
-
   /@jridgewell/gen-mapping/0.3.2:
     resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
     dev: true
 
   /@jridgewell/resolve-uri/3.1.0:
@@ -3411,15 +2035,15 @@ packages:
     resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
     dev: true
 
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
 
-  /@jridgewell/trace-mapping/0.3.17:
-    resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
+  /@jridgewell/trace-mapping/0.3.15:
+    resolution: {integrity: sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
@@ -3436,6 +2060,19 @@ packages:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
 
+  /@microsoft/tsdoc-config/0.16.2:
+    resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
+    dependencies:
+      '@microsoft/tsdoc': 0.14.2
+      ajv: 6.12.6
+      jju: 1.4.0
+      resolve: 1.19.0
+    dev: true
+
+  /@microsoft/tsdoc/0.14.2:
+    resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
+    dev: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3461,14 +2098,6 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@rollup/pluginutils/4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -3483,8 +2112,8 @@ packages:
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
     dev: true
 
-  /@sinclair/typebox/0.24.51:
-    resolution: {integrity: sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==}
+  /@sinclair/typebox/0.24.43:
+    resolution: {integrity: sha512-1orQTvtazZmsPeBroJjysvsOQCYV2yjWlebkSY38pl5vr2tdLjEJ+LoxITlGNZaH2RE19WlAwQMkH/7C14wLfw==}
     dev: true
 
   /@sindresorhus/is/4.6.0:
@@ -3492,8 +2121,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /@sinonjs/commons/1.8.5:
-    resolution: {integrity: sha512-rTpCA0wG1wUxglBSFdMMY0oTrKYvgf4fNgv/sXbfCVAdf+FnPBdKJR/7XbpTCwbCrvCbdPYnlWaUUYz4V2fPDA==}
+  /@sinonjs/commons/1.8.3:
+    resolution: {integrity: sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==}
     dependencies:
       type-detect: 4.0.8
     dev: true
@@ -3501,7 +2130,7 @@ packages:
   /@sinonjs/fake-timers/9.1.2:
     resolution: {integrity: sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==}
     dependencies:
-      '@sinonjs/commons': 1.8.5
+      '@sinonjs/commons': 1.8.3
     dev: true
 
   /@szmarczak/http-timer/4.0.6:
@@ -3537,11 +2166,11 @@ packages:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
     dev: true
 
-  /@types/babel__core/7.1.20:
-    resolution: {integrity: sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ==}
+  /@types/babel__core/7.1.19:
+    resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==}
     dependencies:
-      '@babel/parser': 7.20.3
-      '@babel/types': 7.20.2
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.19.0
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.18.2
@@ -3550,20 +2179,20 @@ packages:
   /@types/babel__generator/7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.20.2
+      '@babel/types': 7.19.0
     dev: true
 
   /@types/babel__template/7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.20.3
-      '@babel/types': 7.20.2
+      '@babel/parser': 7.19.1
+      '@babel/types': 7.19.0
     dev: true
 
   /@types/babel__traverse/7.18.2:
     resolution: {integrity: sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==}
     dependencies:
-      '@babel/types': 7.20.2
+      '@babel/types': 7.19.0
     dev: true
 
   /@types/body-parser/1.19.2:
@@ -3579,8 +2208,12 @@ packages:
       '@types/node': 18.11.9
     dev: true
 
-  /@types/cacheable-request/6.0.3:
-    resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
+  /@types/braces/3.0.1:
+    resolution: {integrity: sha512-+euflG6ygo4bn0JHtn4pYqcXwRtLvElQ7/nnjDu7iYG56H0+OhCd7d6Ug0IE3WcFpZozBKW2+80FUbv5QGk5AQ==}
+    dev: true
+
+  /@types/cacheable-request/6.0.2:
+    resolution: {integrity: sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==}
     dependencies:
       '@types/http-cache-semantics': 4.0.1
       '@types/keyv': 3.1.4
@@ -3591,17 +2224,11 @@ packages:
   /@types/chai-subset/1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
-      '@types/chai': 4.3.4
-    dev: true
-
-  /@types/chai/4.3.4:
-    resolution: {integrity: sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==}
+      '@types/chai': 4.3.3
     dev: true
 
-  /@types/concat-stream/1.6.1:
-    resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
-    dependencies:
-      '@types/node': 18.11.9
+  /@types/chai/4.3.3:
+    resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
     dev: true
 
   /@types/connect-history-api-fallback/1.3.5:
@@ -3802,8 +2429,8 @@ packages:
       '@types/ms': 0.7.31
     dev: true
 
-  /@types/dompurify/2.3.4:
-    resolution: {integrity: sha512-EXzDatIb5EspL2eb/xPGmaC8pePcTHrkDCONjeisusLFrVfl38Pjea/R0YJGu3k9ZQadSvMqW0WXPI2hEo2Ajg==}
+  /@types/dompurify/2.4.0:
+    resolution: {integrity: sha512-IDBwO5IZhrKvHFUl+clZxgf3hn2b/lU6H1KaBShPkQyGJUQ0xwebezIPSuiyGwfz1UzJWQl4M7BDxtHtCCPlTg==}
     dependencies:
       '@types/trusted-types': 2.0.2
     dev: true
@@ -3822,13 +2449,6 @@ packages:
       '@types/json-schema': 7.0.11
     dev: true
 
-  /@types/eslint/8.4.6:
-    resolution: {integrity: sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==}
-    dependencies:
-      '@types/estree': 1.0.0
-      '@types/json-schema': 7.0.11
-    dev: true
-
   /@types/estree/0.0.51:
     resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
     dev: true
@@ -3858,12 +2478,6 @@ packages:
     resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
     dev: true
 
-  /@types/form-data/0.0.33:
-    resolution: {integrity: sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==}
-    dependencies:
-      '@types/node': 18.11.9
-    dev: true
-
   /@types/geojson/7946.0.10:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: true
@@ -3900,12 +2514,8 @@ packages:
       '@types/istanbul-lib-report': 3.0.0
     dev: true
 
-  /@types/jsdom/20.0.0:
-    resolution: {integrity: sha512-YfAchFs0yM1QPDrLm2VHe+WHGtqms3NXnXAMolrgrVP6fgBHHXy1ozAbo/dFtPNtZC/m66bPiCTWYmqp1F14gA==}
-    dependencies:
-      '@types/node': 18.11.9
-      '@types/tough-cookie': 4.0.2
-      parse5: 7.1.1
+  /@types/js-yaml/4.0.5:
+    resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
     dev: true
 
   /@types/jsdom/20.0.1:
@@ -3930,8 +2540,10 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
-  /@types/lodash/4.14.185:
-    resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==}
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.188
     dev: true
 
   /@types/lodash/4.14.188:
@@ -3955,6 +2567,12 @@ packages:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
     dev: true
 
+  /@types/micromatch/4.0.2:
+    resolution: {integrity: sha512-oqXqVb0ci19GtH0vOA/U2TmHTcRY9kuZl4mqUxe0QmJAlIW13kzhuK5pi1i9+ngav8FjpSb9FVS/GE00GLX1VA==}
+    dependencies:
+      '@types/braces': 3.0.1
+    dev: true
+
   /@types/mime/3.0.1:
     resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==}
     dev: true
@@ -3974,30 +2592,18 @@ packages:
       form-data: 3.0.1
     dev: true
 
-  /@types/node/10.17.60:
-    resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
-    dev: true
-
   /@types/node/14.18.29:
     resolution: {integrity: sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==}
     dev: true
 
-  /@types/node/14.18.33:
-    resolution: {integrity: sha512-qelS/Ra6sacc4loe/3MSjXNL1dNQ/GjxNHVzuChwMfmk7HuycRLVQN2qNY3XahK+fZc5E2szqQSKUyAF0E+2bg==}
-    dev: true
-
-  /@types/node/16.18.3:
-    resolution: {integrity: sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg==}
+  /@types/node/16.11.59:
+    resolution: {integrity: sha512-6u+36Dj3aDzhfBVUf/mfmc92OEdzQ2kx2jcXGdigfl70E/neV21ZHE6UCz4MDzTRcVqGAM27fk+DLXvyDsn3Jw==}
     dev: true
 
   /@types/node/18.11.9:
     resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
     dev: true
 
-  /@types/node/8.10.66:
-    resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
-    dev: true
-
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -4006,10 +2612,6 @@ packages:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true
 
-  /@types/prettier/2.7.0:
-    resolution: {integrity: sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==}
-    dev: true
-
   /@types/prettier/2.7.1:
     resolution: {integrity: sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==}
     dev: true
@@ -4032,8 +2634,15 @@ packages:
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
     dev: true
 
-  /@types/semver/7.3.13:
-    resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
+  /@types/rollup-plugin-visualizer/4.2.1:
+    resolution: {integrity: sha512-Fk4y0EgmsSbvbayYhtSI9+cGvgw1rcQ9RlbExkQt4ivXRdiEwFKuRpxNuJCr0JktXIvOPUuPR7GSmtyZu0dujQ==}
+    dependencies:
+      '@types/node': 18.11.9
+      rollup: 2.79.1
+    dev: true
+
+  /@types/semver/7.3.12:
+    resolution: {integrity: sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A==}
     dev: true
 
   /@types/serve-index/1.9.1:
@@ -4115,32 +2724,6 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry:
-    resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^5.0.0
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/scope-manager': 5.38.0
-      '@typescript-eslint/type-utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
-      debug: 4.3.4
-      eslint: 8.23.1
-      ignore: 5.2.0
-      regexpp: 3.2.0
-      semver: 7.3.7
-      tsutils: 3.21.0_typescript@4.8.3
-      typescript: 4.8.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/eslint-plugin/5.42.1_2udltptbznfmezdozpdoa2aemq:
     resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4168,26 +2751,6 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 5.38.0
-      '@typescript-eslint/types': 5.38.0
-      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
-      debug: 4.3.4
-      eslint: 8.23.1
-      typescript: 4.8.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/parser/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-kAV+NiNBWVQDY9gDJDToTE/NO8BHi4f6b7zTsVAJoTkmB/zlfOpiEVBzHOKtlgTndCKe8vj9F/PuolemZSh50Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4208,14 +2771,6 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.38.0:
-    resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      '@typescript-eslint/types': 5.38.0
-      '@typescript-eslint/visitor-keys': 5.38.0
-    dev: true
-
   /@typescript-eslint/scope-manager/5.42.1:
     resolution: {integrity: sha512-QAZY/CBP1Emx4rzxurgqj3rUinfsh/6mvuKbLNMfJMMKYLRBfweus8brgXF8f64ABkIZ3zdj2/rYYtF8eiuksQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4224,26 +2779,6 @@ packages:
       '@typescript-eslint/visitor-keys': 5.42.1
     dev: true
 
-  /@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
-      '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
-      debug: 4.3.4
-      eslint: 8.23.1
-      tsutils: 3.21.0_typescript@4.8.3
-      typescript: 4.8.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/type-utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4264,37 +2799,11 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.38.0:
-    resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /@typescript-eslint/types/5.42.1:
     resolution: {integrity: sha512-Qrco9dsFF5lhalz+lLFtxs3ui1/YfC6NdXu+RAGBa8uSfn01cjO7ssCsjIsUs484vny9Xm699FSKwpkCcqwWwA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3:
-    resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': 5.38.0
-      '@typescript-eslint/visitor-keys': 5.38.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      semver: 7.3.8
-      tsutils: 3.21.0_typescript@4.8.3
-      typescript: 4.8.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/typescript-estree/5.42.1_typescript@4.8.4:
     resolution: {integrity: sha512-qElc0bDOuO0B8wDhhW4mYVgi/LZL+igPwXtV87n69/kYC/7NG3MES0jHxJNCr4EP7kY1XVsRy8C/u3DYeTKQmw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4316,24 +2825,6 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.38.0
-      '@typescript-eslint/types': 5.38.0
-      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
-      eslint: 8.23.1
-      eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.23.1
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
-
   /@typescript-eslint/utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4341,7 +2832,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@types/semver': 7.3.13
+      '@types/semver': 7.3.12
       '@typescript-eslint/scope-manager': 5.42.1
       '@typescript-eslint/types': 5.42.1
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
@@ -4354,14 +2845,6 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.38.0:
-    resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      '@typescript-eslint/types': 5.38.0
-      eslint-visitor-keys: 3.3.0
-    dev: true
-
   /@typescript-eslint/visitor-keys/5.42.1:
     resolution: {integrity: sha512-LOQtSF4z+hejmpUvitPlc4hA7ERGoj2BVkesOcG91HCn8edLGUXbTrErmutmPbl8Bo9HjAvOO/zBKQHExXNA2A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4370,22 +2853,22 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /@vitejs/plugin-vue/3.2.0_vite@3.2.3+vue@3.2.44:
+  /@vitejs/plugin-vue/3.2.0_vite@3.2.3+vue@3.2.41:
     resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.3_@types+node@18.11.9
-      vue: 3.2.44
+      vite: 3.2.3
+      vue: 3.2.41
     dev: true
 
-  /@vitest/coverage-c8/0.23.4_upgr4zu6lczg6poy6g2njng6vm:
-    resolution: {integrity: sha512-jmD00a5DQH9gu9K+YdvVhcMuv2CzHvU4gCnySS40Ec5hKlXtlCzRfNHl00VnhfuBeaQUmaQYe60BLT413HyDdg==}
+  /@vitest/coverage-c8/0.25.1_oullksb5ic6y72oh2wekoaiuii:
+    resolution: {integrity: sha512-gpl5QNaNeIN0mfRiosCqBFoZcizb5GA458TDnOQXkGDc4kklazxn70u9evGfV62wiiAUfGGebgRhxlBkAa6m6g==}
     dependencies:
       c8: 7.12.0
-      vitest: 0.23.4_upgr4zu6lczg6poy6g2njng6vm
+      vitest: 0.25.1_oullksb5ic6y72oh2wekoaiuii
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -4400,119 +2883,120 @@ packages:
       - terser
     dev: true
 
-  /@vitest/ui/0.23.4:
-    resolution: {integrity: sha512-lNZVTTrkHThGAwNQ1ah1qCNnm70r7OLB5LCUdSqboStve/1eKTrtt27QfDSSUTG8AVJQzU0eaN/j8UocH+CqfA==}
+  /@vitest/ui/0.25.1:
+    resolution: {integrity: sha512-VjzyfLjNS5Zc7XCCFJW3cM2iVW305D65NG0PIWefA4A8mwOH/QJJ4nFj/4cwXzwL0/VT3/ppvpv3UDNZoh/YOQ==}
     dependencies:
       sirv: 2.0.2
     dev: true
 
-  /@vue/compiler-core/3.2.44:
-    resolution: {integrity: sha512-TwzeVSnaklb8wIvMtwtkPkt9wnU+XD70xJ7N9+eIHtjKAG7OoZttm+14ZL6vWOL+2RcMtSZ+cYH+gvkUqsrmSQ==}
+  /@vue/compiler-core/3.2.41:
+    resolution: {integrity: sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==}
     dependencies:
-      '@babel/parser': 7.20.3
-      '@vue/shared': 3.2.44
+      '@babel/parser': 7.19.1
+      '@vue/shared': 3.2.41
       estree-walker: 2.0.2
       source-map: 0.6.1
     dev: true
 
-  /@vue/compiler-dom/3.2.44:
-    resolution: {integrity: sha512-wPDR+gOn2Qi7SudPJ+gE62vuO/aKXIiIFALvHpztXmDdbAHGy3CDfmBgOGchTgTlSeDJHe9olEMkgOdmyXTjUg==}
+  /@vue/compiler-dom/3.2.41:
+    resolution: {integrity: sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==}
     dependencies:
-      '@vue/compiler-core': 3.2.44
-      '@vue/shared': 3.2.44
+      '@vue/compiler-core': 3.2.41
+      '@vue/shared': 3.2.41
     dev: true
 
-  /@vue/compiler-sfc/3.2.44:
-    resolution: {integrity: sha512-8cFZcUWlrtnfM/GlRwYJdlfgbEOy0OZ/osLDU3h/wJu24HuYAc7QIML1USaKqiZzkjOaTd4y8mvYvcWXq3o5dA==}
+  /@vue/compiler-sfc/3.2.41:
+    resolution: {integrity: sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==}
+    requiresBuild: true
     dependencies:
-      '@babel/parser': 7.20.3
-      '@vue/compiler-core': 3.2.44
-      '@vue/compiler-dom': 3.2.44
-      '@vue/compiler-ssr': 3.2.44
-      '@vue/reactivity-transform': 3.2.44
-      '@vue/shared': 3.2.44
+      '@babel/parser': 7.19.1
+      '@vue/compiler-core': 3.2.41
+      '@vue/compiler-dom': 3.2.41
+      '@vue/compiler-ssr': 3.2.41
+      '@vue/reactivity-transform': 3.2.41
+      '@vue/shared': 3.2.41
       estree-walker: 2.0.2
       magic-string: 0.25.9
       postcss: 8.4.18
       source-map: 0.6.1
     dev: true
 
-  /@vue/compiler-ssr/3.2.44:
-    resolution: {integrity: sha512-tAkUFLgvxds3l5KPyAH77OIYrEeLngNYQfWA9GocHiy2nlyajjqAH/Jq93Bq29Y20GeJzblmRp9DVYCVkJ5Rsw==}
+  /@vue/compiler-ssr/3.2.41:
+    resolution: {integrity: sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==}
     dependencies:
-      '@vue/compiler-dom': 3.2.44
-      '@vue/shared': 3.2.44
+      '@vue/compiler-dom': 3.2.41
+      '@vue/shared': 3.2.41
     dev: true
 
   /@vue/devtools-api/6.4.5:
     resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
     dev: true
 
-  /@vue/reactivity-transform/3.2.44:
-    resolution: {integrity: sha512-WGbEiXaS2qAOTS9Z3kKk2Nk4bi8OUl73Sih+h0XV9RTUATnaJSEQedveHUDQnHyXiZwyBMKosrxJg8aThHO/rw==}
+  /@vue/reactivity-transform/3.2.41:
+    resolution: {integrity: sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==}
     dependencies:
-      '@babel/parser': 7.20.3
-      '@vue/compiler-core': 3.2.44
-      '@vue/shared': 3.2.44
+      '@babel/parser': 7.19.1
+      '@vue/compiler-core': 3.2.41
+      '@vue/shared': 3.2.41
       estree-walker: 2.0.2
       magic-string: 0.25.9
     dev: true
 
-  /@vue/reactivity/3.2.44:
-    resolution: {integrity: sha512-Fe0s52fTsPl+RSdvoqUZ3HRKlaVsKhIh1mea5EWOedFvZCjnymzlj3YC1wZMxi89qXRFSdEASVA/BWUGypk0Ig==}
+  /@vue/reactivity/3.2.41:
+    resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==}
     dependencies:
-      '@vue/shared': 3.2.44
+      '@vue/shared': 3.2.41
     dev: true
 
-  /@vue/runtime-core/3.2.44:
-    resolution: {integrity: sha512-uwEV1cttL33k2dC+CNGYhKEYqGejT9KmgQ+4n/LmYUfZ1Gorl8F32DlIX+1pANyGHL1tBAisqHDxKyQBp2oBNA==}
+  /@vue/runtime-core/3.2.41:
+    resolution: {integrity: sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==}
     dependencies:
-      '@vue/reactivity': 3.2.44
-      '@vue/shared': 3.2.44
+      '@vue/reactivity': 3.2.41
+      '@vue/shared': 3.2.41
     dev: true
 
-  /@vue/runtime-dom/3.2.44:
-    resolution: {integrity: sha512-LDzNwXpU/nSpxrLk5jS0bfStgt88msgsgFzj6vHrl7es3QktIrCGybQS5CB/p/TO0q98iAiYtEVmi+Lej7Vgjg==}
+  /@vue/runtime-dom/3.2.41:
+    resolution: {integrity: sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==}
     dependencies:
-      '@vue/runtime-core': 3.2.44
-      '@vue/shared': 3.2.44
+      '@vue/runtime-core': 3.2.41
+      '@vue/shared': 3.2.41
       csstype: 2.6.21
     dev: true
 
-  /@vue/server-renderer/3.2.44_vue@3.2.44:
-    resolution: {integrity: sha512-3+ArN07UgOAdbGKIp3uVqeC3bnR3J324QNjPR6vxHbLrTlkibFv8QNled/ux3fVq0KDCkVVKGOKB2V4sCIYOgg==}
+  /@vue/server-renderer/3.2.41_vue@3.2.41:
+    resolution: {integrity: sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==}
     peerDependencies:
-      vue: 3.2.44
+      vue: 3.2.41
     dependencies:
-      '@vue/compiler-ssr': 3.2.44
-      '@vue/shared': 3.2.44
-      vue: 3.2.44
+      '@vue/compiler-ssr': 3.2.41
+      '@vue/shared': 3.2.41
+      vue: 3.2.41
     dev: true
 
-  /@vue/shared/3.2.44:
-    resolution: {integrity: sha512-mGZ44bnn0zpZ36nXtxbrBPno43yr96wjQE1dBEKS1Sieugt27HS4OGZVBRIgsdGzosB7vqZAvu0ttu1FDVdolA==}
+  /@vue/shared/3.2.41:
+    resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
     dev: true
 
-  /@vueuse/core/9.5.0_vue@3.2.44:
-    resolution: {integrity: sha512-6GsWBsJHEb3sYw15mbLrcbslAVY45pkzjJYTKYKCXv88z7srAF0VEW0q+oXKsl58tCbqooplInahXFg8Yo1m4w==}
+  /@vueuse/core/9.4.0_vue@3.2.41:
+    resolution: {integrity: sha512-JzgenGj1ZF2BHOen5rsFiAyyI9sXAv7aKhNLlm9b7SwYQeKTcxTWdhudonURCSP3Egl9NQaRBzes2lv/1JUt/Q==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 9.5.0
-      '@vueuse/shared': 9.5.0_vue@3.2.44
-      vue-demi: 0.13.11_vue@3.2.44
+      '@vueuse/metadata': 9.4.0
+      '@vueuse/shared': 9.4.0_vue@3.2.41
+      vue-demi: 0.13.11_vue@3.2.41
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/metadata/9.5.0:
-    resolution: {integrity: sha512-4M1AyPZmIv41pym+K5+4wup3bKuYebbH8w8BROY1hmT7rIwcyS4tEL+UsGz0Hiu1FCOxcoBrwtAizc0YmBJjyQ==}
+  /@vueuse/metadata/9.4.0:
+    resolution: {integrity: sha512-7GKMdGAsJyQJl35MYOz/RDpP0FxuiZBRDSN79QIPbdqYx4Sd0sVTnIC68KJ6Oln0t0SouvSUMvRHuno216Ud2Q==}
     dev: true
 
-  /@vueuse/shared/9.5.0_vue@3.2.44:
-    resolution: {integrity: sha512-HnnCWU1Vg9CVWRCcI8ohDKDRB2Sc4bTgT1XAIaoLSfVHHn+TKbrox6pd3klCSw4UDxkhDfOk8cAdcK+Z5KleCA==}
+  /@vueuse/shared/9.4.0_vue@3.2.41:
+    resolution: {integrity: sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==}
     dependencies:
-      vue-demi: 0.13.11_vue@3.2.44
+      vue-demi: 0.13.11_vue@3.2.41
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4533,7 +3017,7 @@ packages:
     engines: {node: '>=12.0.0'}
     dependencies:
       chalk: 4.1.2
-      loglevel: 1.8.1
+      loglevel: 1.8.0
       loglevel-plugin-prefix: 0.8.4
       strip-ansi: 6.0.1
     dev: true
@@ -4547,7 +3031,7 @@ packages:
     resolution: {integrity: sha512-OFVTFEB6qdG84Y+cOWIacV0loGMgq2SF/rGGlGxai89V3UQxzCFTYVoAx6odAuSNZ37wmfWCykyAR/lAlMItoQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
-      '@types/node': 16.18.3
+      '@types/node': 16.11.59
       got: 11.8.5
     dev: true
 
@@ -4706,55 +3190,6 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@yankeeinlondon/builder-api/0.4.1_7jcwyn4sobzthx4ft3nhqn7kdm:
-    resolution: {integrity: sha512-O6LS9Zg4xqLVpAgea72mNhZvdy9B2BuIgNdsRvNkmnACG8XvlZtEKryGt2ECI/z+dbQICbHDQFCNtZRBrfSMlA==}
-    peerDependencies:
-      fp-ts: ^2.12.1
-      inferred-types: ^0.22.0
-      markdown-it: ^13.0.1
-      vite-plugin-md: '*'
-    dependencies:
-      '@yankeeinlondon/happy-wrapper': 2.8.0_upgr4zu6lczg6poy6g2njng6vm
-      fp-ts: 2.13.1
-      inferred-types: 0.22.8_upgr4zu6lczg6poy6g2njng6vm
-      markdown-it: 13.0.1
-      vite-plugin-md: 0.20.4_2vrekto2ma5pf5j2eoe6xabo24
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - encoding
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /@yankeeinlondon/happy-wrapper/2.8.0_upgr4zu6lczg6poy6g2njng6vm:
-    resolution: {integrity: sha512-p7Xj6Hwnuo2XahikUd2oDno84i1dndkiR3emLeRm7Ei2KegE8X9vS3eg/AT4I8kRX0nPkA2yPjkry/Co+3X0xw==}
-    dependencies:
-      fp-ts: 2.13.1
-      happy-dom: 7.6.7
-      native-dash: 1.23.2_ddphrhne6j5wyjvrgarb33hoge
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - encoding
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /JSONSelect/0.4.0:
     resolution: {integrity: sha512-VRLR3Su35MH+XV2lrvh9O7qWoug/TUyj9tLDjn9rtpUCNnILLrHjgd/tB0KrhugCxUpj3UqoLqfYb3fLJdIQQQ==}
     engines: {node: '>=0.4.7'}
@@ -4801,32 +3236,24 @@ packages:
   /acorn-globals/7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.0
       acorn-walk: 8.2.0
     dev: true
 
-  /acorn-import-assertions/1.8.0_acorn@8.8.1:
+  /acorn-import-assertions/1.8.0_acorn@8.8.0:
     resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
     peerDependencies:
       acorn: ^8
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.0
     dev: true
 
-  /acorn-jsx/5.3.2_acorn@8.8.1:
+  /acorn-jsx/5.3.2_acorn@8.8.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.8.1
-    dev: true
-
-  /acorn-node/1.8.2:
-    resolution: {integrity: sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==}
-    dependencies:
-      acorn: 7.4.1
-      acorn-walk: 7.2.0
-      xtend: 4.0.2
+      acorn: 8.8.0
     dev: true
 
   /acorn-walk/7.2.0:
@@ -4851,16 +3278,6 @@ packages:
     hasBin: true
     dev: true
 
-  /acorn/8.8.1:
-    resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
-
-  /add-stream/1.0.0:
-    resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
-    dev: true
-
   /agent-base/6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -4870,17 +3287,6 @@ packages:
       - supports-color
     dev: true
 
-  /agentkeepalive/4.2.1:
-    resolution: {integrity: sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      debug: 4.3.4
-      depd: 1.1.2
-      humanize-ms: 1.2.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /aggregate-error/3.1.0:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
@@ -4978,12 +3384,6 @@ packages:
     hasBin: true
     dev: true
 
-  /ansi-html/0.0.7:
-    resolution: {integrity: sha512-JoAxEa1DfP9m2xfB/y2r/aKcwXNlltr4+0QSBC4TrLfcxyvepX2Pv0t/xpgGV5bGsDzCYV8SzjWgyCW0T9yYbA==}
-    engines: {'0': node >= 0.8.0}
-    hasBin: true
-    dev: true
-
   /ansi-regex/2.1.1:
     resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
     engines: {node: '>=0.10.0'}
@@ -5023,8 +3423,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /ansi-styles/6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+  /ansi-styles/6.1.1:
+    resolution: {integrity: sha512-qDOv24WjnYuL+wbwHdlsYZFy+cgPtrYw0Tn7GLORicQp9BkQLzrgI3Pm4VyR9ERZ41YTn7KlMPuL1n05WdZvmg==}
     engines: {node: '>=12'}
     dev: true
 
@@ -5043,13 +3443,6 @@ packages:
       execa: 1.0.0
     dev: true
 
-  /append-buffer/1.0.2:
-    resolution: {integrity: sha512-WLbYiXzD3y/ATLZFufV/rZvWdZOs+Z/+5v1rBZ463Jn398pa6kcde27cvozYnBoxXblGZTFfoPpsaEw0orU5BA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      buffer-equal: 1.0.1
-    dev: true
-
   /arch/2.2.0:
     resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
     dev: true
@@ -5068,21 +3461,6 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
-  /arr-diff/4.0.0:
-    resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /arr-flatten/1.1.0:
-    resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /arr-union/3.1.0:
-    resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /array-flatten/1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
     dev: true
@@ -5095,25 +3473,20 @@ packages:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
     dev: true
 
+  /array-timsort/1.0.3:
+    resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
+    dev: true
+
   /array-union/2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
     dev: true
 
-  /array-unique/0.3.2:
-    resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /arrify/1.0.1:
     resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /asap/2.0.6:
-    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
-    dev: true
-
   /asn1/0.2.6:
     resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
     dependencies:
@@ -5129,16 +3502,11 @@ packages:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
-  /assign-symbols/1.0.0:
-    resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /ast-types/0.13.4:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.4.0
     dev: true
 
   /astral-regex/2.0.0:
@@ -5159,12 +3527,6 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
-  /atob/2.1.2:
-    resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
-    engines: {node: '>= 4.5.0'}
-    hasBin: true
-    dev: true
-
   /aws-sign2/0.7.0:
     resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==}
     dev: true
@@ -5176,30 +3538,22 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2
-    transitivePeerDependencies:
-      - debug
-    dev: true
-
-  /axios/0.26.0:
-    resolution: {integrity: sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==}
-    dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
     transitivePeerDependencies:
       - debug
     dev: true
 
-  /babel-jest/29.3.1_@babel+core@7.20.2:
+  /babel-jest/29.3.1_@babel+core@7.12.3:
     resolution: {integrity: sha512-aard+xnMoxgjwV70t0L6wkW/3HQQtV+O0PEimxKgzNqCJnbYmroPojdP2tqKSOAt8QAKV/uSZU8851M7B5+fcA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
-      '@babel/core': 7.20.2
+      '@babel/core': 7.12.3
       '@jest/transform': 29.3.1
-      '@types/babel__core': 7.1.20
+      '@types/babel__core': 7.1.19
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.2.0_@babel+core@7.20.2
+      babel-preset-jest: 29.2.0_@babel+core@7.12.3
       chalk: 4.1.2
       graceful-fs: 4.2.10
       slash: 3.0.0
@@ -5211,10 +3565,10 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/helper-plugin-utils': 7.19.0
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
-      istanbul-lib-instrument: 5.2.1
+      istanbul-lib-instrument: 5.2.0
       test-exclude: 6.0.0
     transitivePeerDependencies:
       - supports-color
@@ -5222,92 +3576,43 @@ packages:
 
   /babel-plugin-jest-hoist/29.2.0:
     resolution: {integrity: sha512-TnspP2WNiR3GLfCsUNHqeXw0RoQ2f9U5hQ5L3XFpwuO8htQmSrhh8qsB6vi5Yi8+kuynN1yjDjQsPfkebmB6ZA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@babel/template': 7.18.10
-      '@babel/types': 7.20.2
-      '@types/babel__core': 7.1.20
-      '@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.20.1
-      '@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.26.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
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/types': 7.19.0
+      '@types/babel__core': 7.1.19
+      '@types/babel__traverse': 7.18.2
     dev: true
 
-  /babel-preset-current-node-syntax/1.0.1_@babel+core@7.20.2:
+  /babel-preset-current-node-syntax/1.0.1_@babel+core@7.12.3:
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.20.2
-      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.20.2
-      '@babel/plugin-syntax-bigint': 7.8.3_@babel+core@7.20.2
-      '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.20.2
-      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.20.2
-      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.20.2
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.20.2
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.20.2
-      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.20.2
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.20.2
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.20.2
-      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.20.2
-      '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.20.2
-    dev: true
-
-  /babel-preset-jest/29.2.0_@babel+core@7.20.2:
-    resolution: {integrity: sha512-z9JmMJppMxNv8N7fNRHvhMg9cvIkMxQBXgFkane3yKVEvEOP+kB50lk8DFRvF9PGqbyXxlmebKWhuDORO8RgdA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.20.2
-      babel-plugin-jest-hoist: 29.2.0
-      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.20.2
+      '@babel/core': 7.12.3
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.12.3
+      '@babel/plugin-syntax-bigint': 7.8.3_@babel+core@7.12.3
+      '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.12.3
+      '@babel/plugin-syntax-import-meta': 7.10.4_@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-top-level-await': 7.14.5_@babel+core@7.12.3
     dev: true
 
-  /babelify/10.0.0_@babel+core@7.12.3:
-    resolution: {integrity: sha512-X40FaxyH7t3X+JFAKvb1H9wooWKLRCi8pg3m8poqtdZaIng+bjzp9RvKQCvRjF9isHiPkXspbbXT/zwXLtwgwg==}
-    engines: {node: '>=6.9.0'}
+  /babel-preset-jest/29.2.0_@babel+core@7.12.3:
+    resolution: {integrity: sha512-z9JmMJppMxNv8N7fNRHvhMg9cvIkMxQBXgFkane3yKVEvEOP+kB50lk8DFRvF9PGqbyXxlmebKWhuDORO8RgdA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.12.3
-    dev: true
-
-  /bail/1.0.5:
-    resolution: {integrity: sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==}
+      babel-plugin-jest-hoist: 29.2.0
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.12.3
     dev: true
 
   /bail/2.0.2:
@@ -5318,19 +3623,6 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /base/0.11.2:
-    resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      cache-base: 1.0.1
-      class-utils: 0.3.6
-      component-emitter: 1.3.0
-      define-property: 1.0.0
-      isobject: 3.0.1
-      mixin-deep: 1.3.2
-      pascalcase: 0.1.1
-    dev: true
-
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -5386,15 +3678,6 @@ packages:
     resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
     dev: true
 
-  /body/5.1.0:
-    resolution: {integrity: sha512-chUsBxGRtuElD6fmw1gHLpvnKdVLK302peeFa9ZqAEk8TyzZ3fygLyUEDDPTJvL9+Bor0dIwn6ePOsRM2y0zQQ==}
-    dependencies:
-      continuable-cache: 0.3.1
-      error: 7.2.1
-      raw-body: 1.1.7
-      safe-json-parse: 1.0.1
-    dev: true
-
   /bonjour-service/1.0.14:
     resolution: {integrity: sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==}
     dependencies:
@@ -5411,22 +3694,10 @@ packages:
       concat-map: 0.0.1
     dev: true
 
-  /braces/2.3.2:
-    resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
-    engines: {node: '>=0.10.0'}
+  /brace-expansion/2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
-      arr-flatten: 1.1.0
-      array-unique: 0.3.2
-      extend-shallow: 2.0.1
-      fill-range: 4.0.0
-      isobject: 3.0.1
-      repeat-element: 1.1.4
-      snapdragon: 0.8.2
-      snapdragon-node: 2.1.1
-      split-string: 3.1.0
-      to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
+      balanced-match: 1.0.2
     dev: true
 
   /braces/3.0.2:
@@ -5436,62 +3707,10 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /brilliant-errors/0.6.0_ddphrhne6j5wyjvrgarb33hoge:
-    resolution: {integrity: sha512-4+Va/hdXk7tROAmnZ8Vp9D23oOMg6IBJAiZdhRCufMApH0NIFLsvtTb7sL8YuV6gWdLsiXxzR834bh05lC8r8Q==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      callsites: 3.1.0
-      common-types: 1.31.1
-      inferred-types: 0.22.8_ddphrhne6j5wyjvrgarb33hoge
-      vitest: 0.19.1_ddphrhne6j5wyjvrgarb33hoge
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /brilliant-errors/0.6.0_upgr4zu6lczg6poy6g2njng6vm:
-    resolution: {integrity: sha512-4+Va/hdXk7tROAmnZ8Vp9D23oOMg6IBJAiZdhRCufMApH0NIFLsvtTb7sL8YuV6gWdLsiXxzR834bh05lC8r8Q==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      callsites: 3.1.0
-      common-types: 1.31.1
-      inferred-types: 0.22.8
-      vitest: 0.19.1_upgr4zu6lczg6poy6g2njng6vm
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /browser-process-hrtime/1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
 
-  /browser-resolve/1.11.3:
-    resolution: {integrity: sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==}
-    dependencies:
-      resolve: 1.1.7
-    dev: true
-
   /browserslist/4.21.4:
     resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -5513,19 +3732,10 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
-  /buffer-equal/1.0.1:
-    resolution: {integrity: sha512-QoV3ptgEaQpvVwbXdSO39iqPQTCxSF7A5U99AxbHYqUdCizL/lH2Z0A2y6nbZucxMEOtNyZfG2s6gsVugGpKkg==}
-    engines: {node: '>=0.4'}
-    dev: true
-
   /buffer-from/1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
 
-  /buffer-shims/1.0.0:
-    resolution: {integrity: sha512-Zy8ZXMyxIT6RMTeY7OP/bDndfj6bwCan7SS98CEndS6deHwWPpseeHlwarNcBim+etXnF9HBc1non5JgDaJU1g==}
-    dev: true
-
   /buffer/5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
     dependencies:
@@ -5533,8 +3743,9 @@ packages:
       ieee754: 1.2.1
     dev: true
 
-  /bytes/1.0.0:
-    resolution: {integrity: sha512-/x68VkHLeTl3/Ll8IvxdwzhrT+IyKc52e/oyHhA2RwqPqswSnjVbSddfPRwAsJtbilMAPSRWwAlpxdYsSWOTKQ==}
+  /builtin-modules/3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
     dev: true
 
   /bytes/3.0.0:
@@ -5566,21 +3777,6 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
-  /cache-base/1.0.1:
-    resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      collection-visit: 1.0.0
-      component-emitter: 1.3.0
-      get-value: 2.0.6
-      has-value: 1.0.0
-      isobject: 3.0.1
-      set-value: 2.0.1
-      to-object-path: 0.3.0
-      union-value: 1.0.1
-      unset-value: 1.0.0
-    dev: true
-
   /cacheable-lookup/5.0.4:
     resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==}
     engines: {node: '>=10.6.0'}
@@ -5593,16 +3789,12 @@ packages:
       clone-response: 1.0.3
       get-stream: 5.2.0
       http-cache-semantics: 4.1.0
-      keyv: 4.5.2
+      keyv: 4.5.0
       lowercase-keys: 2.0.0
       normalize-url: 6.1.0
       responselike: 2.0.1
     dev: true
 
-  /cached-path-relative/1.1.0:
-    resolution: {integrity: sha512-WF0LihfemtesFcJgO7xfOoOcnWzY/QHR4qeDqV44jPU3HTI54+LnfXK3SA27AVVGCdZFgjjFFaqUA9Jx7dMJZA==}
-    dev: true
-
   /cachedir/2.3.0:
     resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==}
     engines: {node: '>=6'}
@@ -5647,19 +3839,15 @@ packages:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
     dev: true
 
-  /ccount/1.1.0:
-    resolution: {integrity: sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==}
-    dev: true
-
-  /chai/4.3.7:
-    resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
+  /chai/4.3.6:
+    resolution: {integrity: sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==}
     engines: {node: '>=4'}
     dependencies:
       assertion-error: 1.1.0
       check-error: 1.0.2
-      deep-eql: 4.1.2
+      deep-eql: 3.0.1
       get-func-name: 2.0.0
-      loupe: 2.3.6
+      loupe: 2.3.4
       pathval: 1.1.1
       type-detect: 4.0.8
     dev: true
@@ -5705,10 +3893,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /character-entities-html4/1.1.4:
-    resolution: {integrity: sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==}
-    dev: true
-
   /character-entities-legacy/1.1.4:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
     dev: true
@@ -5754,8 +3938,9 @@ packages:
     engines: {node: '>=6.0'}
     dev: true
 
-  /ci-info/3.5.0:
-    resolution: {integrity: sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw==}
+  /ci-info/3.6.2:
+    resolution: {integrity: sha512-lVZdhvbEudris15CLytp2u6Y0p5EKfztae9Fqa189MfNmln9F33XuH69v5fvNfiRN5/0eAUz2yJL3mo+nhaRKg==}
+    engines: {node: '>=8'}
     dev: true
 
   /cjs-module-lexer/1.2.2:
@@ -5769,14 +3954,11 @@ packages:
       jsonlint: 1.6.0
     dev: true
 
-  /class-utils/0.3.6:
-    resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
-    engines: {node: '>=0.10.0'}
+  /clean-regexp/1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
     dependencies:
-      arr-union: 3.1.0
-      define-property: 0.2.5
-      isobject: 3.0.1
-      static-extend: 0.1.2
+      escape-string-regexp: 1.0.5
     dev: true
 
   /clean-stack/2.2.0:
@@ -5784,6 +3966,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /clear-module/4.1.2:
+    resolution: {integrity: sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==}
+    engines: {node: '>=8'}
+    dependencies:
+      parent-module: 2.0.0
+      resolve-from: 5.0.0
+    dev: true
+
   /cli-cursor/3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -5816,14 +4006,6 @@ packages:
       string-width: 5.1.2
     dev: true
 
-  /cliui/6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-    dev: true
-
   /cliui/7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
     dependencies:
@@ -5832,20 +4014,6 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
-  /cliui/8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-    dev: true
-
-  /clone-buffer/1.0.0:
-    resolution: {integrity: sha512-KLLTJWrvwIP+OPfMn0x2PheDEP20RPUcGXj/ERegTgdmPEZylALQldygiqrPPu8P45uNuPs7ckmReLY6v/iA5g==}
-    engines: {node: '>= 0.10'}
-    dev: true
-
   /clone-deep/4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
     engines: {node: '>=6'}
@@ -5861,44 +4029,15 @@ packages:
       mimic-response: 1.0.1
     dev: true
 
-  /clone-stats/1.0.0:
-    resolution: {integrity: sha512-au6ydSpg6nsrigcZ4m8Bc9hxjeW+GJ8xh5G3BJCMt4WXe1H10UNaVOamqQTmrx1kjVuxAHIQSNU6hY4Nsn9/ag==}
-    dev: true
-
-  /clone/2.1.2:
-    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
-    engines: {node: '>=0.8'}
-    dev: true
-
-  /cloneable-readable/1.1.3:
-    resolution: {integrity: sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==}
-    dependencies:
-      inherits: 2.0.4
-      process-nextick-args: 2.0.1
-      readable-stream: 2.3.7
-    dev: true
-
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
     dev: true
 
-  /collapse-white-space/1.0.6:
-    resolution: {integrity: sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==}
-    dev: true
-
   /collect-v8-coverage/1.0.1:
     resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
     dev: true
 
-  /collection-visit/1.0.0:
-    resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      map-visit: 1.0.0
-      object-visit: 1.0.1
-    dev: true
-
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -5936,10 +4075,6 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
-  /comma-separated-tokens/1.0.8:
-    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
-    dev: true
-
   /commander/2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
@@ -5953,11 +4088,27 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
+  /commander/9.4.0:
+    resolution: {integrity: sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==}
+    engines: {node: ^12.20.0 || >=14}
+    dev: true
+
   /commander/9.4.1:
     resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==}
     engines: {node: ^12.20.0 || >=14}
     dev: true
 
+  /comment-json/4.2.3:
+    resolution: {integrity: sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==}
+    engines: {node: '>= 6'}
+    dependencies:
+      array-timsort: 1.0.3
+      core-util-is: 1.0.3
+      esprima: 4.0.1
+      has-own-prop: 2.0.0
+      repeat-string: 1.6.1
+    dev: true
+
   /comment-parser/1.3.1:
     resolution: {integrity: sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==}
     engines: {node: '>= 12.0.0'}
@@ -5968,10 +4119,6 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: true
 
-  /common-types/1.31.1:
-    resolution: {integrity: sha512-eixAd22Gmek1dgsPgyqCSjzMAlp8rpSLkb44iEMfOzR9fwGFYEkH+AWOHmwSFxWmO8MvMND/m1jpZX0Wk4+yJA==}
-    dev: true
-
   /compare-func/2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
     dependencies:
@@ -5979,10 +4126,6 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
-  /component-emitter/1.3.0:
-    resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
-    dev: true
-
   /compressible/2.0.18:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
@@ -6009,37 +4152,8 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
-  /concat-stream/1.5.2:
-    resolution: {integrity: sha512-H6xsIBfQ94aESBG8jGHXQ7i5AEpy5ZeVaLDOisDICiTCKpqEfr34/KmTrspKQNoLKNu9gTkovlpQcUi630AKiQ==}
-    engines: {'0': node >= 0.8}
-    dependencies:
-      inherits: 2.0.4
-      readable-stream: 2.0.6
-      typedarray: 0.0.7
-    dev: true
-
-  /concat-stream/1.6.2:
-    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
-    engines: {'0': node >= 0.8}
-    dependencies:
-      buffer-from: 1.1.2
-      inherits: 2.0.4
-      readable-stream: 2.3.7
-      typedarray: 0.0.6
-    dev: true
-
-  /concat-stream/2.0.0:
-    resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
-    engines: {'0': node >= 6.0}
-    dependencies:
-      buffer-from: 1.1.2
-      inherits: 2.0.4
-      readable-stream: 3.6.0
-      typedarray: 0.0.6
-    dev: true
-
-  /concurrently/7.4.0:
-    resolution: {integrity: sha512-M6AfrueDt/GEna/Vg9BqQ+93yuvzkSKmoTixnwEJkH0LlcGrRC2eCmjeG1tLLHIYfpYJABokqSGyMcXjm96AFA==}
+  /concurrently/7.5.0:
+    resolution: {integrity: sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==}
     engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -6054,20 +4168,16 @@ packages:
       yargs: 17.5.1
     dev: true
 
-  /concurrently/7.5.0:
-    resolution: {integrity: sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==}
-    engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
-    hasBin: true
+  /configstore/5.0.1:
+    resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==}
+    engines: {node: '>=8'}
     dependencies:
-      chalk: 4.1.2
-      date-fns: 2.29.3
-      lodash: 4.17.21
-      rxjs: 7.5.7
-      shell-quote: 1.7.4
-      spawn-command: 0.0.2-1
-      supports-color: 8.1.1
-      tree-kill: 1.2.2
-      yargs: 17.6.2
+      dot-prop: 5.3.0
+      graceful-fs: 4.2.10
+      make-dir: 3.1.0
+      unique-string: 2.0.0
+      write-file-atomic: 3.0.3
+      xdg-basedir: 4.0.0
     dev: true
 
   /connect-history-api-fallback/2.0.0:
@@ -6075,166 +4185,33 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
-  /content-disposition/0.5.4:
-    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
-    engines: {node: '>= 0.6'}
-    dependencies:
-      safe-buffer: 5.2.1
-    dev: true
-
-  /content-type/1.0.4:
-    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
-    engines: {node: '>= 0.6'}
-    dev: true
-
-  /continuable-cache/0.3.1:
-    resolution: {integrity: sha512-TF30kpKhTH8AGCG3dut0rdd/19B7Z+qCnrMoBLpyQu/2drZdNrrpcjPEoJeSVsQM+8KmWG5O56oPDjSSUsuTyA==}
-    dev: true
-
-  /conventional-changelog-angular/5.0.13:
-    resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
-    engines: {node: '>=10'}
-    dependencies:
-      compare-func: 2.0.0
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-atom/2.0.8:
-    resolution: {integrity: sha512-xo6v46icsFTK3bb7dY/8m2qvc8sZemRgdqLb/bjpBsH2UyOS8rKNTgcb5025Hri6IpANPApbXMg15QLb1LJpBw==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-codemirror/2.0.8:
-    resolution: {integrity: sha512-z5DAsn3uj1Vfp7po3gpt2Boc+Bdwmw2++ZHa5Ak9k0UKsYAO5mH1UBTN0qSCuJZREIhX6WU4E1p3IW2oRCNzQw==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-config-spec/2.1.0:
-    resolution: {integrity: sha512-IpVePh16EbbB02V+UA+HQnnPIohgXvJRxHcS5+Uwk4AT5LjzCZJm5sp/yqs5C6KZJ1jMsV4paEV13BN1pvDuxQ==}
-    dev: true
-
-  /conventional-changelog-conventionalcommits/4.6.3:
-    resolution: {integrity: sha512-LTTQV4fwOM4oLPad317V/QNQ1FY4Hju5qeBIM1uTHbrnCE+Eg4CdRZ3gO2pUeR+tzWdp80M2j3qFFEDWVqOV4g==}
-    engines: {node: '>=10'}
-    dependencies:
-      compare-func: 2.0.0
-      lodash: 4.17.21
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-conventionalcommits/5.0.0:
-    resolution: {integrity: sha512-lCDbA+ZqVFQGUj7h9QBKoIpLhl8iihkO0nCTyRNzuXtcd7ubODpYB04IFy31JloiJgG0Uovu8ot8oxRzn7Nwtw==}
-    engines: {node: '>=10'}
-    dependencies:
-      compare-func: 2.0.0
-      lodash: 4.17.21
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-core/4.2.4:
-    resolution: {integrity: sha512-gDVS+zVJHE2v4SLc6B0sLsPiloR0ygU7HaDW14aNJE1v4SlqJPILPl/aJC7YdtRE4CybBf8gDwObBvKha8Xlyg==}
-    engines: {node: '>=10'}
-    dependencies:
-      add-stream: 1.0.0
-      conventional-changelog-writer: 5.0.1
-      conventional-commits-parser: 3.2.4
-      dateformat: 3.0.3
-      get-pkg-repo: 4.2.1
-      git-raw-commits: 2.0.11
-      git-remote-origin-url: 2.0.0
-      git-semver-tags: 4.1.1
-      lodash: 4.17.21
-      normalize-package-data: 3.0.3
-      q: 1.5.1
-      read-pkg: 3.0.0
-      read-pkg-up: 3.0.0
-      through2: 4.0.2
-    dev: true
-
-  /conventional-changelog-ember/2.0.9:
-    resolution: {integrity: sha512-ulzIReoZEvZCBDhcNYfDIsLTHzYHc7awh+eI44ZtV5cx6LVxLlVtEmcO+2/kGIHGtw+qVabJYjdI5cJOQgXh1A==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-eslint/3.0.9:
-    resolution: {integrity: sha512-6NpUCMgU8qmWmyAMSZO5NrRd7rTgErjrm4VASam2u5jrZS0n38V7Y9CzTtLT2qwz5xEChDR4BduoWIr8TfwvXA==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-express/2.0.6:
-    resolution: {integrity: sha512-SDez2f3iVJw6V563O3pRtNwXtQaSmEfTCaTBPCqn0oG0mfkq0rX4hHBq5P7De2MncoRixrALj3u3oQsNK+Q0pQ==}
-    engines: {node: '>=10'}
+  /content-disposition/0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
     dependencies:
-      q: 1.5.1
+      safe-buffer: 5.2.1
     dev: true
 
-  /conventional-changelog-jquery/3.0.11:
-    resolution: {integrity: sha512-x8AWz5/Td55F7+o/9LQ6cQIPwrCjfJQ5Zmfqi8thwUEKHstEn4kTIofXub7plf1xvFA2TqhZlq7fy5OmV6BOMw==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
+  /content-type/1.0.4:
+    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
+    engines: {node: '>= 0.6'}
     dev: true
 
-  /conventional-changelog-jshint/2.0.9:
-    resolution: {integrity: sha512-wMLdaIzq6TNnMHMy31hql02OEQ8nCQfExw1SE0hYL5KvU+JCTuPaDO+7JiogGT2gJAxiUGATdtYYfh+nT+6riA==}
+  /conventional-changelog-angular/5.0.13:
+    resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
     engines: {node: '>=10'}
     dependencies:
       compare-func: 2.0.0
       q: 1.5.1
     dev: true
 
-  /conventional-changelog-preset-loader/2.3.4:
-    resolution: {integrity: sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /conventional-changelog-writer/5.0.1:
-    resolution: {integrity: sha512-5WsuKUfxW7suLblAbFnxAcrvf6r+0b7GvNaWUwUIk0bXMnENP/PEieGKVUQrjPqwPT4o3EPAASBXiY6iHooLOQ==}
+  /conventional-changelog-conventionalcommits/5.0.0:
+    resolution: {integrity: sha512-lCDbA+ZqVFQGUj7h9QBKoIpLhl8iihkO0nCTyRNzuXtcd7ubODpYB04IFy31JloiJgG0Uovu8ot8oxRzn7Nwtw==}
     engines: {node: '>=10'}
-    hasBin: true
     dependencies:
-      conventional-commits-filter: 2.0.7
-      dateformat: 3.0.3
-      handlebars: 4.7.7
-      json-stringify-safe: 5.0.1
+      compare-func: 2.0.0
       lodash: 4.17.21
-      meow: 8.1.2
-      semver: 6.3.0
-      split: 1.0.1
-      through2: 4.0.2
-    dev: true
-
-  /conventional-changelog/3.1.25:
-    resolution: {integrity: sha512-ryhi3fd1mKf3fSjbLXOfK2D06YwKNic1nC9mWqybBHdObPd8KJ2vjaXZfYj1U23t+V8T8n0d7gwnc9XbIdFbyQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      conventional-changelog-angular: 5.0.13
-      conventional-changelog-atom: 2.0.8
-      conventional-changelog-codemirror: 2.0.8
-      conventional-changelog-conventionalcommits: 4.6.3
-      conventional-changelog-core: 4.2.4
-      conventional-changelog-ember: 2.0.9
-      conventional-changelog-eslint: 3.0.9
-      conventional-changelog-express: 2.0.6
-      conventional-changelog-jquery: 3.0.11
-      conventional-changelog-jshint: 2.0.9
-      conventional-changelog-preset-loader: 2.3.4
-    dev: true
-
-  /conventional-commits-filter/2.0.7:
-    resolution: {integrity: sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==}
-    engines: {node: '>=10'}
-    dependencies:
-      lodash.ismatch: 4.4.0
-      modify-values: 1.0.1
+      q: 1.5.1
     dev: true
 
   /conventional-commits-parser/3.2.4:
@@ -6250,23 +4227,10 @@ packages:
       through2: 4.0.2
     dev: true
 
-  /conventional-recommended-bump/6.1.0:
-    resolution: {integrity: sha512-uiApbSiNGM/kkdL9GTOLAqC4hbptObFo4wW2QRyHsKciGAfQuLU1ShZ1BIVI/+K2BE/W1AWYQMCXAsv4dyKPaw==}
-    engines: {node: '>=10'}
-    hasBin: true
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
     dependencies:
-      concat-stream: 2.0.0
-      conventional-changelog-preset-loader: 2.3.4
-      conventional-commits-filter: 2.0.7
-      conventional-commits-parser: 3.2.4
-      git-raw-commits: 2.0.11
-      git-semver-tags: 4.1.1
-      meow: 8.1.2
-      q: 1.5.1
-    dev: true
-
-  /convert-source-map/1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+      safe-buffer: 5.1.2
     dev: true
 
   /convert-source-map/2.0.0:
@@ -6282,17 +4246,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /copy-descriptor/0.1.1:
-    resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /core-js-compat/3.26.0:
-    resolution: {integrity: sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==}
-    dependencies:
-      browserslist: 4.21.4
-    dev: true
-
   /core-util-is/1.0.2:
     resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
     dev: true
@@ -6328,23 +4281,19 @@ packages:
       typescript: 4.8.4
     dev: true
 
-  /cosmiconfig-typescript-loader/4.2.0_gbbg4brkmakf6m5nuj7scelzny:
-    resolution: {integrity: sha512-NkANeMnaHrlaSSlpKGyvn2R4rqUDeE/9E5YHx+b4nwo0R8dZyAqcih8/gxpCZvqWP9Vf6xuLpMSzSgdVEIM78g==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@types/node': '*'
-      cosmiconfig: '>=7'
-      ts-node: '>=10'
-      typescript: '>=3'
+  /cosmiconfig/7.0.1:
+    resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
+    engines: {node: '>=10'}
     dependencies:
-      '@types/node': 14.18.33
-      cosmiconfig: 7.0.1
-      ts-node: 10.9.1_yodorn5kzjgomblrsstrk2spaa
-      typescript: 4.8.4
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
     dev: true
 
-  /cosmiconfig/7.0.1:
-    resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
+  /cosmiconfig/7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
     dependencies:
       '@types/parse-json': 4.0.0
@@ -6362,7 +4311,7 @@ packages:
       js-yaml: 3.14.1
       lcov-parse: 1.0.0
       log-driver: 1.2.7
-      minimist: 1.2.7
+      minimist: 1.2.6
       request: 2.88.2
     dev: true
 
@@ -6390,6 +4339,198 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-random-string/2.0.0:
+    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /cspell-dictionary/6.14.2:
+    resolution: {integrity: sha512-j2+uZRru3xFtW7VUOoJCrlXta1DBiPq44yGjN/Npc0wtR/aWA/NOdRysap3jWhBS1t43CiA5fqXyMO7d4wDqxw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.2
+      '@cspell/cspell-types': 6.14.2
+      cspell-trie-lib: 6.14.2
+      fast-equals: 4.0.3
+      gensequence: 4.0.2
+    dev: true
+
+  /cspell-dictionary/6.14.3:
+    resolution: {integrity: sha512-yIqJEZZj36j1CmmjAiuQOYZM6T62Ih7k35DhAU1hYVARUEEnFN/Uz72UkDj2SAmURVn2On+bAmZ5zCx0JZzf2g==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.3
+      '@cspell/cspell-types': 6.14.3
+      cspell-trie-lib: 6.14.3
+      fast-equals: 4.0.3
+      gensequence: 4.0.2
+    dev: true
+
+  /cspell-gitignore/6.14.3:
+    resolution: {integrity: sha512-CZTGxx3msF6p1Z0xgLe5LXXvve7DooSuRMBMdGn230usce1nKoxpPoPxgs+zXeCpi+FanykKnoZkdRvjolMpOA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      cspell-glob: 6.14.3
+      find-up: 5.0.0
+    dev: true
+
+  /cspell-glob/6.14.2:
+    resolution: {integrity: sha512-a9o3lBccEcH2676RGge2YqEORovm+II++D53P6hOW/23ltDe1J509MSY6CJdYdPk/VssOExas6akJ6FbKSCBgw==}
+    engines: {node: '>=14'}
+    dependencies:
+      micromatch: 4.0.5
+    dev: true
+
+  /cspell-glob/6.14.3:
+    resolution: {integrity: sha512-ISwCK8GqM/dnvtaxA17w1MPmMzFLOqdTz+JWIcR4at47T9qd8bNB0X0P4eqyuqgsbKkWbfnSlsYlEjRHTi4a7A==}
+    engines: {node: '>=14'}
+    dependencies:
+      micromatch: 4.0.5
+    dev: true
+
+  /cspell-grammar/6.14.2:
+    resolution: {integrity: sha512-Q9+gwp1U/qnECTqxa7WBMPn6sgBfXPIM68jXg8RgNMAuy1CE+m1eTCM9FBNFNpNKJWjaZPvANLOW5/EStN2A/A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.2
+      '@cspell/cspell-types': 6.14.2
+    dev: true
+
+  /cspell-grammar/6.14.3:
+    resolution: {integrity: sha512-Nz8tYUmstyKcFlXbxdw4N8NsQ2ZY/5ztNfouokk47LKaTAS0LyWlLSkZUxN016fMY2h+C+3dI+jaut2H/rtNew==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.3
+      '@cspell/cspell-types': 6.14.3
+    dev: true
+
+  /cspell-io/6.14.2:
+    resolution: {integrity: sha512-QyQ0BBfDvF6B37SlSsmlzRnaGqiIHt7c5NsCNKf3ZfioTWkNI/fiabvSkpNGBAkELP6BPBxjsG+TaS+swZp+Kg==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/cspell-service-bus': 6.14.2
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /cspell-io/6.14.3:
+    resolution: {integrity: sha512-EbH+qopgWIzr9SZCGDsF4AWYgucN4QzYeAgyXjTbV9RnNIGKOKovMe3vN9nxjOZyPKv2TvmgU+uMXDM61iObRw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/cspell-service-bus': 6.14.3
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /cspell-lib/6.14.2:
+    resolution: {integrity: sha512-QNsmWix0oFi1CjzFfNG1xAJVl1OC+6kiWvq0A1S8VD3LJhJVvBqSv1vudpL1oS7H2/2yxk9PUC/MajGLi5i5MQ==}
+    engines: {node: '>=14.6'}
+    dependencies:
+      '@cspell/cspell-bundled-dicts': 6.14.2
+      '@cspell/cspell-pipe': 6.14.2
+      '@cspell/cspell-types': 6.14.2
+      '@cspell/strong-weak-map': 6.14.2
+      clear-module: 4.1.2
+      comment-json: 4.2.3
+      configstore: 5.0.1
+      cosmiconfig: 7.0.1
+      cspell-dictionary: 6.14.2
+      cspell-glob: 6.14.2
+      cspell-grammar: 6.14.2
+      cspell-io: 6.14.2
+      cspell-trie-lib: 6.14.2
+      fast-equals: 4.0.3
+      find-up: 5.0.0
+      fs-extra: 10.1.0
+      gensequence: 4.0.2
+      import-fresh: 3.3.0
+      resolve-from: 5.0.0
+      resolve-global: 1.0.0
+      vscode-languageserver-textdocument: 1.0.7
+      vscode-uri: 3.0.6
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /cspell-lib/6.14.3:
+    resolution: {integrity: sha512-RJT5Tbe0UCMCtqDWRujjxq9u23sc2XylIpDP7MnpLx8wLVgFv2WPzESYNRGZqceqZYwBAPnpqS9h2ANxXSi8UQ==}
+    engines: {node: '>=14.6'}
+    dependencies:
+      '@cspell/cspell-bundled-dicts': 6.14.3
+      '@cspell/cspell-pipe': 6.14.3
+      '@cspell/cspell-types': 6.14.3
+      '@cspell/strong-weak-map': 6.14.3
+      clear-module: 4.1.2
+      comment-json: 4.2.3
+      configstore: 5.0.1
+      cosmiconfig: 7.1.0
+      cspell-dictionary: 6.14.3
+      cspell-glob: 6.14.3
+      cspell-grammar: 6.14.3
+      cspell-io: 6.14.3
+      cspell-trie-lib: 6.14.3
+      fast-equals: 4.0.3
+      find-up: 5.0.0
+      fs-extra: 10.1.0
+      gensequence: 4.0.2
+      import-fresh: 3.3.0
+      resolve-from: 5.0.0
+      resolve-global: 1.0.0
+      vscode-languageserver-textdocument: 1.0.7
+      vscode-uri: 3.0.6
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /cspell-trie-lib/6.14.2:
+    resolution: {integrity: sha512-+aTRwFUzBPFbJ8zlDwzB1ew/gP7L6kddoXjmqCNeFx9B5DiwN1KPFRo+uBx21JOkoavnviGU//DpyWSU9Cittw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.2
+      '@cspell/cspell-types': 6.14.2
+      fs-extra: 10.1.0
+      gensequence: 4.0.2
+    dev: true
+
+  /cspell-trie-lib/6.14.3:
+    resolution: {integrity: sha512-WVa5gbD9glsZ4c60qPD5RTwojKc5ooxw/Gn+HC9CBdWv5rE1AmM1V3yVWhYx2ZMbJufboBrzmSjJB9qdmUl3oA==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.3
+      '@cspell/cspell-types': 6.14.3
+      fs-extra: 10.1.0
+      gensequence: 4.0.2
+    dev: true
+
+  /cspell/6.14.3:
+    resolution: {integrity: sha512-DimVpUiw2iOSvO1daOTtOWjmryVZdFnPmjPhyhWZUqakOEgE2MgoBuk3cFzXqb8GsGXHQh5PqiWr1rqIkQ99qA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@cspell/cspell-pipe': 6.14.3
+      chalk: 4.1.2
+      commander: 9.4.1
+      cspell-gitignore: 6.14.3
+      cspell-glob: 6.14.3
+      cspell-lib: 6.14.3
+      fast-json-stable-stringify: 2.1.0
+      file-entry-cache: 6.0.1
+      fs-extra: 10.1.0
+      get-stdin: 8.0.0
+      glob: 8.0.3
+      imurmurhash: 0.1.4
+      semver: 7.3.8
+      strip-ansi: 6.0.1
+      vscode-uri: 3.0.6
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /css-tree/1.0.0-alpha.39:
     resolution: {integrity: sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==}
     engines: {node: '>=8.0.0'}
@@ -6398,10 +4539,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /css.escape/1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-    dev: true
-
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -6446,7 +4583,7 @@ packages:
     dependencies:
       '@cypress/request': 2.88.10
       '@cypress/xvfb': 1.2.4_supports-color@8.1.1
-      '@types/node': 14.18.33
+      '@types/node': 14.18.29
       '@types/sinonjs__fake-timers': 8.1.1
       '@types/sizzle': 2.3.3
       arch: 2.2.0
@@ -6460,7 +4597,7 @@ packages:
       cli-table3: 0.6.3
       commander: 5.1.0
       common-tags: 1.8.2
-      dayjs: 1.11.6
+      dayjs: 1.11.5
       debug: 4.3.4_supports-color@8.1.1
       enquirer: 2.3.6
       eventemitter2: 6.4.7
@@ -6476,7 +4613,7 @@ packages:
       listr2: 3.14.0_enquirer@2.3.6
       lodash: 4.17.21
       log-symbols: 4.1.0
-      minimist: 1.2.7
+      minimist: 1.2.6
       ospath: 1.2.2
       pretty-bytes: 5.6.0
       proxy-from-env: 1.0.0
@@ -6762,20 +4899,47 @@ packages:
       d3-zoom: 3.0.0
     dev: false
 
-  /dagre-d3/0.6.4:
-    resolution: {integrity: sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==}
+  /d3/7.7.0:
+    resolution: {integrity: sha512-VEwHCMgMjD2WBsxeRGUE18RmzxT9Bn7ghDpzvTEvkLSBAKgTMydJjouZTjspgQfRHpPt/PB3EHWBa6SSyFQq4g==}
+    engines: {node: '>=12'}
     dependencies:
-      d3: 7.6.1
-      dagre: 0.8.5
-      graphlib: 2.1.8
-      lodash: 4.17.21
+      d3-array: 3.2.0
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.0
+      d3-delaunay: 6.0.2
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.0.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.0.1
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.0.0
+      d3-selection: 3.0.0
+      d3-shape: 3.1.0
+      d3-time: 3.0.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1_d3-selection@3.0.0
+      d3-zoom: 3.0.0
     dev: false
 
-  /dagre/0.8.5:
-    resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
+  /dagre-d3-es/7.0.6:
+    resolution: {integrity: sha512-CaaE/nZh205ix+Up4xsnlGmpog5GGm81Upi2+/SBHxwNwrccBb3K51LzjZ1U6hgvOlAEUsVWf1xSTzCyKpJ6+Q==}
     dependencies:
-      graphlib: 2.1.8
-      lodash: 4.17.21
+      d3: 7.7.0
+      lodash-es: 4.17.21
     dev: false
 
   /dargs/7.0.0:
@@ -6809,16 +4973,8 @@ packages:
     engines: {node: '>=0.11'}
     dev: true
 
-  /dateformat/3.0.3:
-    resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
-    dev: true
-
-  /dayjs/1.11.6:
-    resolution: {integrity: sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==}
-    dev: true
-
-  /de-indent/1.0.2:
-    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+  /dayjs/1.11.5:
+    resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
     dev: true
 
   /debug/2.6.9:
@@ -6832,17 +4988,6 @@ packages:
       ms: 2.0.0
     dev: true
 
-  /debug/3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: true
-
   /debug/3.2.7_supports-color@8.1.1:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -6892,8 +5037,8 @@ packages:
       supports-color: 8.1.1
     dev: true
 
-  /decamelize-keys/1.1.1:
-    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
+  /decamelize-keys/1.1.0:
+    resolution: {integrity: sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==}
     engines: {node: '>=0.10.0'}
     dependencies:
       decamelize: 1.2.0
@@ -6909,21 +5054,12 @@ packages:
     resolution: {integrity: sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw==}
     dev: true
 
-  /decimal.js/10.4.2:
-    resolution: {integrity: sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==}
-    dev: true
-
   /decode-named-character-reference/1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
     dependencies:
       character-entities: 2.0.2
     dev: true
 
-  /decode-uri-component/0.2.0:
-    resolution: {integrity: sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==}
-    engines: {node: '>=0.10'}
-    dev: true
-
   /decompress-response/6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -6935,9 +5071,9 @@ packages:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
     dev: true
 
-  /deep-eql/4.1.2:
-    resolution: {integrity: sha512-gT18+YW4CcW/DBNTwAmqTtkJh7f9qqScu2qFVlx7kCoeY9tlBu9cUcr7+I+Z/noG8INehS3xQgLpTtd/QUTn4w==}
-    engines: {node: '>=6'}
+  /deep-eql/3.0.1:
+    resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==}
+    engines: {node: '>=0.12'}
     dependencies:
       type-detect: 4.0.8
     dev: true
@@ -6952,54 +5088,20 @@ packages:
     dev: true
 
   /default-gateway/6.0.3:
-    resolution: {integrity: sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==}
-    engines: {node: '>= 10'}
-    dependencies:
-      execa: 5.1.1
-    dev: true
-
-  /defer-to-connect/2.0.1:
-    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /define-lazy-prop/2.0.0:
-    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /define-properties/1.1.4:
-    resolution: {integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
-    dev: true
-
-  /define-property/0.2.5:
-    resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-descriptor: 0.1.6
-    dev: true
-
-  /define-property/1.0.0:
-    resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==}
-    engines: {node: '>=0.10.0'}
+    resolution: {integrity: sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==}
+    engines: {node: '>= 10'}
     dependencies:
-      is-descriptor: 1.0.2
+      execa: 5.1.1
     dev: true
 
-  /define-property/2.0.2:
-    resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-descriptor: 1.0.2
-      isobject: 3.0.1
+  /defer-to-connect/2.0.1:
+    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
+    engines: {node: '>=10'}
     dev: true
 
-  /defined/1.0.1:
-    resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
+  /define-lazy-prop/2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
     dev: true
 
   /degenerator/3.0.2:
@@ -7043,17 +5145,6 @@ packages:
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
     dev: true
 
-  /detab/2.0.4:
-    resolution: {integrity: sha512-8zdsQA5bIkoRECvCrNKPla84lyoR7DSAyf7p0YgXzBO9PDJx8KntPUay7NS6yp+KdxdVtiE5SpHKtbp2ZQyA9g==}
-    dependencies:
-      repeat-string: 1.6.1
-    dev: true
-
-  /detect-indent/6.1.0:
-    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
-    engines: {node: '>=8'}
-    dev: true
-
   /detect-newline/3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
@@ -7063,16 +5154,6 @@ packages:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
     dev: true
 
-  /detective/5.2.1:
-    resolution: {integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-    dependencies:
-      acorn-node: 1.8.2
-      defined: 1.0.1
-      minimist: 1.2.7
-    dev: true
-
   /diff-sequences/29.3.1:
     resolution: {integrity: sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7106,13 +5187,6 @@ packages:
       '@leichtgewicht/ip-codec': 2.0.4
     dev: true
 
-  /doctrine-temporary-fork/2.1.0:
-    resolution: {integrity: sha512-nliqOv5NkE4zMON4UA6AMJE6As35afs8aYXATpU4pTUdIKiARZwrJVEP1boA3Rx1ZXHVkwxkhcq4VkqvsuRLsA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: true
-
   /doctrine/3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -7120,81 +5194,6 @@ packages:
       esutils: 2.0.3
     dev: true
 
-  /documentation/13.2.0:
-    resolution: {integrity: sha512-c7lIXNZ9t3481c+OGpj4lWPhtdmQilg4E04wc6TXH1gYg2wWu+/f3c60Otg2HDRVnCQoXrozSWuUYNl7y7FJxw==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      '@babel/core': 7.12.3
-      '@babel/generator': 7.12.1
-      '@babel/parser': 7.12.3
-      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-proposal-decorators': 7.20.2_@babel+core@7.12.3
-      '@babel/plugin-proposal-do-expressions': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-proposal-export-default-from': 7.18.10_@babel+core@7.12.3
-      '@babel/plugin-proposal-export-namespace-from': 7.18.9_@babel+core@7.12.3
-      '@babel/plugin-proposal-function-bind': 7.18.9_@babel+core@7.12.3
-      '@babel/plugin-proposal-function-sent': 7.18.6_@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.18.9_@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-optional-chaining': 7.18.9_@babel+core@7.12.3
-      '@babel/plugin-proposal-pipeline-operator': 7.18.9_@babel+core@7.12.3
-      '@babel/plugin-proposal-private-methods': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-proposal-throw-expressions': 7.18.6_@babel+core@7.12.3
-      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.12.3
-      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.12.3
-      '@babel/preset-env': 7.20.2_@babel+core@7.12.3
-      '@babel/preset-flow': 7.18.6_@babel+core@7.12.3
-      '@babel/preset-react': 7.18.6_@babel+core@7.12.3
-      '@babel/preset-stage-0': 7.8.3
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
-      ansi-html: 0.0.7
-      babelify: 10.0.0_@babel+core@7.12.3
-      chalk: 2.4.2
-      chokidar: 3.5.3
-      concat-stream: 1.6.2
-      diff: 4.0.2
-      doctrine-temporary-fork: 2.1.0
-      get-port: 5.1.1
-      git-url-parse: 11.6.0
-      github-slugger: 1.2.0
-      glob: 7.2.3
-      globals-docs: 2.4.1
-      highlight.js: 10.7.3
-      ini: 1.3.8
-      js-yaml: 3.14.1
-      lodash: 4.17.21
-      mdast-util-inject: 1.1.0
-      micromatch: 3.1.10
-      mime: 2.6.0
-      module-deps-sortable: 5.0.3
-      parse-filepath: 1.0.2
-      pify: 5.0.0
-      read-pkg-up: 4.0.0
-      remark: 9.0.0
-      remark-html: 8.0.0
-      remark-reference-links: 4.0.4
-      remark-toc: 5.1.1
-      resolve: 1.22.1
-      stream-array: 1.1.2
-      strip-json-comments: 2.0.1
-      tiny-lr: 1.1.1
-      unist-builder: 1.0.4
-      unist-util-visit: 1.4.1
-      vfile: 4.2.1
-      vfile-reporter: 6.0.2
-      vfile-sort: 2.2.2
-      vinyl: 2.2.1
-      vinyl-fs: 3.0.3
-      vue-template-compiler: 2.7.14
-      yargs: 15.4.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /dom-serializer/2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
     dependencies:
@@ -7221,8 +5220,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify/2.4.0:
-    resolution: {integrity: sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA==}
+  /dompurify/2.4.1:
+    resolution: {integrity: sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==}
     dev: false
 
   /domutils/3.0.1:
@@ -7240,33 +5239,10 @@ packages:
       is-obj: 2.0.0
     dev: true
 
-  /dotgitignore/2.1.0:
-    resolution: {integrity: sha512-sCm11ak2oY6DglEPpCB8TixLjWAxd3kJTs6UIcSasNYxXdFPV+YKlye92c8H4kKFqV5qYMIh7d+cYecEg0dIkA==}
-    engines: {node: '>=6'}
-    dependencies:
-      find-up: 3.0.0
-      minimatch: 3.1.2
-    dev: true
-
   /duplexer/0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
     dev: true
 
-  /duplexer2/0.1.4:
-    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
-    dependencies:
-      readable-stream: 2.3.7
-    dev: true
-
-  /duplexify/3.7.1:
-    resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
-    dependencies:
-      end-of-stream: 1.4.4
-      inherits: 2.0.4
-      readable-stream: 2.3.7
-      stream-shift: 1.0.1
-    dev: true
-
   /eastasianwidth/0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
@@ -7295,10 +5271,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /emoji-regex/6.1.1:
-    resolution: {integrity: sha512-WfVwM9e+M9B/4Qjh9SRnPX2A74Tom3WlVfWF9QWJ8f2BPa1u+/q4aEp1tizZ3vBKAZTg7B6yxn3t9iMjT+dv4w==}
-    dev: true
-
   /emoji-regex/8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -7355,12 +5327,6 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
-  /error/7.2.1:
-    resolution: {integrity: sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==}
-    dependencies:
-      string-template: 0.2.1
-    dev: true
-
   /es-module-lexer/0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
     dev: true
@@ -7637,15 +5603,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-prettier/8.5.0_eslint@8.23.1:
-    resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-    dependencies:
-      eslint: 8.23.1
-    dev: true
-
   /eslint-config-prettier/8.5.0_eslint@8.27.0:
     resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
     hasBin: true
@@ -7655,15 +5612,6 @@ packages:
       eslint: 8.27.0
     dev: true
 
-  /eslint-plugin-cypress/2.12.1_eslint@8.23.1:
-    resolution: {integrity: sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==}
-    peerDependencies:
-      eslint: '>= 3.2.1'
-    dependencies:
-      eslint: 8.23.1
-      globals: 11.12.0
-    dev: true
-
   /eslint-plugin-cypress/2.12.1_eslint@8.27.0:
     resolution: {integrity: sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==}
     peerDependencies:
@@ -7679,27 +5627,6 @@ packages:
       htmlparser2: 8.0.1
     dev: true
 
-  /eslint-plugin-jest/27.0.4_w7j56xfuh6bbmrubefdaspmpla:
-    resolution: {integrity: sha512-BuvY78pHMpMJ6Cio7sKg6jrqEcnRYPUc4Nlihku4vKx3FjlmMINSX4vcYokZIe+8TKcyr1aI5Kq7vYwgJNdQSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^5.0.0
-      eslint: ^7.0.0 || ^8.0.0
-      jest: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-      jest:
-        optional: true
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
-      '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
-      eslint: 8.23.1
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
-
   /eslint-plugin-jest/27.1.5_kdswgjmqcx7mthqz7ow2zlfevy:
     resolution: {integrity: sha512-CK2dekZ5VBdzsOSOH5Fc1rwC+cWXjkcyrmf1RV714nDUDKu+o73TTJiDxpbILG8PtPPpAAl3ywzh5QA7Ft0mjA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7722,24 +5649,6 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc/39.3.6_eslint@8.23.1:
-    resolution: {integrity: sha512-R6dZ4t83qPdMhIOGr7g2QII2pwCjYyKP+z0tPOfO1bbAbQyKC20Y2Rd6z1te86Lq3T7uM8bNo+VD9YFpE8HU/g==}
-    engines: {node: ^14 || ^16 || ^17 || ^18}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-    dependencies:
-      '@es-joy/jsdoccomment': 0.31.0
-      comment-parser: 1.3.1
-      debug: 4.3.4
-      escape-string-regexp: 4.0.0
-      eslint: 8.23.1
-      esquery: 1.4.0
-      semver: 7.3.7
-      spdx-expression-parse: 3.0.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint-plugin-jsdoc/39.6.2_eslint@8.27.0:
     resolution: {integrity: sha512-dvgY/W7eUFoAIIiaWHERIMI61ZWqcz9YFjEeyTzdPlrZc3TY/3aZm5aB91NUoTLWYZmO/vFlYSuQi15tF7uE5A==}
     engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
@@ -7766,16 +5675,14 @@ packages:
       vscode-json-languageservice: 4.2.1
     dev: true
 
-  /eslint-plugin-markdown/3.0.0_eslint@8.23.1:
-    resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /eslint-plugin-lodash/7.4.0_eslint@8.27.0:
+    resolution: {integrity: sha512-Tl83UwVXqe1OVeBRKUeWcfg6/pCW1GTRObbdnbEJgYwjxp5Q92MEWQaH9+dmzbRt6kvYU1Mp893E79nJiCSM8A==}
+    engines: {node: '>=10'}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      eslint: '>=2'
     dependencies:
-      eslint: 8.23.1
-      mdast-util-from-markdown: 0.8.5
-    transitivePeerDependencies:
-      - supports-color
+      eslint: 8.27.0
+      lodash: 4.17.21
     dev: true
 
   /eslint-plugin-markdown/3.0.0_eslint@8.27.0:
@@ -7790,6 +5697,43 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-plugin-no-only-tests/3.1.0:
+    resolution: {integrity: sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw==}
+    engines: {node: '>=5.0.0'}
+    dev: true
+
+  /eslint-plugin-tsdoc/0.2.17:
+    resolution: {integrity: sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==}
+    dependencies:
+      '@microsoft/tsdoc': 0.14.2
+      '@microsoft/tsdoc-config': 0.16.2
+    dev: true
+
+  /eslint-plugin-unicorn/45.0.0_eslint@8.27.0:
+    resolution: {integrity: sha512-iP8cMRxXKHonKioOhnCoCcqVhoqhAp6rB+nsoLjXFDxTHz3btWMAp8xwzjHA0B1K6YV/U/Yvqn1bUXZt8sJPuQ==}
+    engines: {node: '>=14.18'}
+    peerDependencies:
+      eslint: '>=8.28.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      ci-info: 3.6.2
+      clean-regexp: 1.0.0
+      eslint: 8.27.0
+      eslint-utils: 3.0.0_eslint@8.27.0
+      esquery: 1.4.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.0
+      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
+      safe-regex: 2.1.1
+      semver: 7.3.8
+      strip-indent: 3.0.0
+    dev: true
+
   /eslint-scope/5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -7806,16 +5750,6 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.23.1:
-    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
-    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
-    peerDependencies:
-      eslint: '>=5'
-    dependencies:
-      eslint: 8.23.1
-      eslint-visitor-keys: 2.1.0
-    dev: true
-
   /eslint-utils/3.0.0_eslint@8.27.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
@@ -7836,54 +5770,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.23.1:
-    resolution: {integrity: sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint/eslintrc': 1.3.2
-      '@humanwhocodes/config-array': 0.10.5
-      '@humanwhocodes/gitignore-to-minimatch': 1.0.2
-      '@humanwhocodes/module-importer': 1.0.1
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.23.1
-      eslint-visitor-keys: 3.3.0
-      espree: 9.4.0
-      esquery: 1.4.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.17.0
-      globby: 11.1.0
-      grapheme-splitter: 1.0.4
-      ignore: 5.2.0
-      import-fresh: 3.3.0
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      js-sdsl: 4.1.4
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.1
-      regexpp: 3.2.0
-      strip-ansi: 6.0.1
-      strip-json-comments: 3.1.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint/8.27.0:
     resolution: {integrity: sha512-0y1bfG2ho7mty+SiILVf9PfuRA49ek4Nc60Wmmu62QlobNR+CeXa4xXIJgcuwSQgZiWaPH+5BDsctpIW0PR/wQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -7902,7 +5788,7 @@ packages:
       eslint-scope: 7.1.1
       eslint-utils: 3.0.0_eslint@8.27.0
       eslint-visitor-keys: 3.3.0
-      espree: 9.4.1
+      espree: 9.4.0
       esquery: 1.4.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -7916,7 +5802,7 @@ packages:
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
-      js-sdsl: 4.1.5
+      js-sdsl: 4.1.4
       js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
       levn: 0.4.1
@@ -7936,17 +5822,8 @@ packages:
     resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.8.1
-      acorn-jsx: 5.3.2_acorn@8.8.1
-      eslint-visitor-keys: 3.3.0
-    dev: true
-
-  /espree/9.4.1:
-    resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.8.1
-      acorn-jsx: 5.3.2_acorn@8.8.1
+      acorn: 8.8.0
+      acorn-jsx: 5.3.2_acorn@8.8.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -8110,21 +5987,6 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /expand-brackets/2.1.4:
-    resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      debug: 2.6.9
-      define-property: 0.2.5
-      extend-shallow: 2.0.1
-      posix-character-classes: 0.1.1
-      regex-not: 1.0.2
-      snapdragon: 0.8.2
-      to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /expect/29.3.1:
     resolution: {integrity: sha512-gGb1yTgU30Q0O/tQq+z30KBWv24ApkMgFUpvKBkyLUBL68Wv8dHdJxTBZFl/iT8K/bqDHvUYRH6IIN3rToopPA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -8175,41 +6037,10 @@ packages:
       - supports-color
     dev: true
 
-  /extend-shallow/2.0.1:
-    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extendable: 0.1.1
-    dev: true
-
-  /extend-shallow/3.0.2:
-    resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      assign-symbols: 1.0.0
-      is-extendable: 1.0.1
-    dev: true
-
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
 
-  /extglob/2.0.4:
-    resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      array-unique: 0.3.2
-      define-property: 1.0.0
-      expand-brackets: 2.1.4
-      extend-shallow: 2.0.1
-      fragment-cache: 0.2.1
-      regex-not: 1.0.2
-      snapdragon: 0.8.2
-      to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /extract-zip/2.0.1_supports-color@8.1.1:
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
     engines: {node: '>= 10.17.0'}
@@ -8229,14 +6060,14 @@ packages:
     engines: {'0': node >=0.6.0}
     dev: true
 
-  /fast-clone/1.5.13:
-    resolution: {integrity: sha512-0ez7coyFBQFjZtId+RJqJ+EQs61w9xARfqjqK0AD9vIUkSxWD4HvPt80+5evebZ1tTnv1GYKrPTipx7kOW5ipA==}
-    dev: false
-
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
+  /fast-equals/4.0.3:
+    resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==}
+    dev: true
+
   /fast-glob/3.2.12:
     resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
     engines: {node: '>=8.6.0'}
@@ -8267,13 +6098,6 @@ packages:
       reusify: 1.0.4
     dev: true
 
-  /faye-websocket/0.10.0:
-    resolution: {integrity: sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==}
-    engines: {node: '>=0.4.0'}
-    dependencies:
-      websocket-driver: 0.7.4
-    dev: true
-
   /faye-websocket/0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
     engines: {node: '>=0.8.0'}
@@ -8312,16 +6136,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /fill-range/4.0.0:
-    resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      extend-shallow: 2.0.1
-      is-number: 3.0.0
-      repeat-string: 1.6.1
-      to-regex-range: 2.1.1
-    dev: true
-
   /fill-range/7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -8329,11 +6143,6 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
-  /filter-obj/1.1.0:
-    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /finalhandler/1.2.0:
     resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
     engines: {node: '>= 0.8'}
@@ -8349,13 +6158,6 @@ packages:
       - supports-color
     dev: true
 
-  /find-up/2.1.0:
-    resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      locate-path: 2.0.0
-    dev: true
-
   /find-up/3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -8395,14 +6197,7 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /flush-write-stream/1.1.1:
-    resolution: {integrity: sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==}
-    dependencies:
-      inherits: 2.0.4
-      readable-stream: 2.3.7
-    dev: true
-
-  /follow-redirects/1.15.2:
+  /follow-redirects/1.15.2_debug@4.3.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -8410,11 +6205,8 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
-    dev: true
-
-  /for-in/1.0.2:
-    resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
-    engines: {node: '>=0.10.0'}
+    dependencies:
+      debug: 4.3.2
     dev: true
 
   /foreground-child/2.0.0:
@@ -8430,16 +6222,7 @@ packages:
     dev: true
 
   /form-data/2.3.3:
-    resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==}
-    engines: {node: '>= 0.12'}
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-    dev: true
-
-  /form-data/2.5.1:
-    resolution: {integrity: sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==}
+    resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==}
     engines: {node: '>= 0.12'}
     dependencies:
       asynckit: 0.4.0
@@ -8470,17 +6253,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /fp-ts/2.13.1:
-    resolution: {integrity: sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ==}
-    dev: true
-
-  /fragment-cache/0.2.1:
-    resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      map-cache: 0.2.2
-    dev: true
-
   /fresh/0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -8527,14 +6299,6 @@ packages:
       universalify: 2.0.0
     dev: true
 
-  /fs-mkdirp-stream/1.0.0:
-    resolution: {integrity: sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      graceful-fs: 4.2.10
-      through2: 2.0.5
-    dev: true
-
   /fs-monkey/1.0.3:
     resolution: {integrity: sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==}
     dev: true
@@ -8563,6 +6327,11 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /gensequence/4.0.2:
+    resolution: {integrity: sha512-mQiFskYFPFDSUpBJ/n3ebAV2Ufu6DZGvUPXzyWYzFfJr6/DyOOZVnjx6VTWE4y0RLvYWnc5tZq5sCjzEWhRjqQ==}
+    engines: {node: '>=14'}
+    dev: true
+
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -8590,32 +6359,16 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /get-pkg-repo/4.2.1:
-    resolution: {integrity: sha512-2+QbHjFRfGB74v/pYWjd5OhU3TDIC2Gv/YKUTk/tCvAz0pkn/Mz6P3uByuBimLOcPvN2jYdScl3xGFSrx0jEcA==}
-    engines: {node: '>=6.9.0'}
-    hasBin: true
-    dependencies:
-      '@hutson/parse-repository-url': 3.0.2
-      hosted-git-info: 4.1.0
-      through2: 2.0.5
-      yargs: 16.2.0
-    dev: true
-
-  /get-port/3.2.0:
-    resolution: {integrity: sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /get-port/5.1.1:
-    resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
-    engines: {node: '>=8'}
-    dev: true
-
   /get-stdin/5.0.1:
     resolution: {integrity: sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==}
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /get-stdin/8.0.0:
+    resolution: {integrity: sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==}
+    engines: {node: '>=10'}
+    dev: true
+
   /get-stream/4.1.0:
     resolution: {integrity: sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==}
     engines: {node: '>=6'}
@@ -8649,11 +6402,6 @@ packages:
       - supports-color
     dev: true
 
-  /get-value/2.0.6:
-    resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /getos/3.2.1:
     resolution: {integrity: sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==}
     dependencies:
@@ -8678,59 +6426,6 @@ packages:
       through2: 4.0.2
     dev: true
 
-  /git-remote-origin-url/2.0.0:
-    resolution: {integrity: sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==}
-    engines: {node: '>=4'}
-    dependencies:
-      gitconfiglocal: 1.0.0
-      pify: 2.3.0
-    dev: true
-
-  /git-semver-tags/4.1.1:
-    resolution: {integrity: sha512-OWyMt5zBe7xFs8vglMmhM9lRQzCWL3WjHtxNNfJTMngGym7pC1kh8sP6jevfydJ6LP3ZvGxfb6ABYgPUM0mtsA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      meow: 8.1.2
-      semver: 6.3.0
-    dev: true
-
-  /git-up/4.0.5:
-    resolution: {integrity: sha512-YUvVDg/vX3d0syBsk/CKUTib0srcQME0JyHkL5BaYdwLsiCslPWmDSi8PUMo9pXYjrryMcmsCoCgsTpSCJEQaA==}
-    dependencies:
-      is-ssh: 1.4.0
-      parse-url: 6.0.5
-    dev: true
-
-  /git-url-parse/11.6.0:
-    resolution: {integrity: sha512-WWUxvJs5HsyHL6L08wOusa/IXYtMuCAhrMmnTjQPpBU0TTHyDhnOATNH3xNQz7YOQUsqIIPTGr4xiVti1Hsk5g==}
-    dependencies:
-      git-up: 4.0.5
-    dev: true
-
-  /gitconfiglocal/1.0.0:
-    resolution: {integrity: sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==}
-    dependencies:
-      ini: 1.3.8
-    dev: true
-
-  /github-slugger/1.2.0:
-    resolution: {integrity: sha512-wIaa75k1vZhyPm9yWrD08A5Xnx/V+RmzGrpjQuLemGKSb77Qukiaei58Bogrl/LZSADDfPzKJX8jhLs4CRTl7Q==}
-    dependencies:
-      emoji-regex: 6.1.1
-    dev: true
-
-  /github-slugger/1.5.0:
-    resolution: {integrity: sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==}
-    dev: true
-
-  /glob-parent/3.1.0:
-    resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==}
-    dependencies:
-      is-glob: 3.1.0
-      path-dirname: 1.0.2
-    dev: true
-
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -8745,22 +6440,6 @@ packages:
       is-glob: 4.0.3
     dev: true
 
-  /glob-stream/6.1.0:
-    resolution: {integrity: sha512-uMbLGAP3S2aDOHUDfdoYcdIePUCfysbAd0IAoWVZbeGU/oNQ8asHVSshLDJUPWxfzj8zsCG7/XeHPHTtow0nsw==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      extend: 3.0.2
-      glob: 7.2.3
-      glob-parent: 3.1.0
-      is-negated-glob: 1.0.0
-      ordered-read-streams: 1.0.1
-      pumpify: 1.5.1
-      readable-stream: 2.3.7
-      remove-trailing-separator: 1.1.0
-      to-absolute-glob: 2.0.2
-      unique-stream: 2.3.1
-    dev: true
-
   /glob-to-regexp/0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
     dev: true
@@ -8776,6 +6455,17 @@ packages:
       path-is-absolute: 1.0.1
     dev: true
 
+  /glob/8.0.3:
+    resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.0
+      once: 1.4.0
+    dev: true
+
   /global-dirs/0.1.1:
     resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
     engines: {node: '>=4'}
@@ -8790,10 +6480,6 @@ packages:
       ini: 2.0.0
     dev: true
 
-  /globals-docs/2.4.1:
-    resolution: {integrity: sha512-qpPnUKkWnz8NESjrCvnlGklsgiQzlq+rcCxoG5uNQ+dNA7cFMCmn231slLAwS2N/PlkzZ3COL8CcS10jXmLHqg==}
-    dev: true
-
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -8839,7 +6525,7 @@ packages:
     dependencies:
       '@sindresorhus/is': 4.6.0
       '@szmarczak/http-timer': 4.0.6
-      '@types/cacheable-request': 6.0.3
+      '@types/cacheable-request': 6.0.2
       '@types/responselike': 1.0.0
       cacheable-lookup: 5.0.4
       cacheable-request: 7.0.2
@@ -8858,22 +6544,6 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /graphlib/2.1.8:
-    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
-    dependencies:
-      lodash: 4.17.21
-    dev: false
-
-  /gray-matter/4.0.3:
-    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
-    engines: {node: '>=6.0'}
-    dependencies:
-      js-yaml: 3.14.1
-      kind-of: 6.0.3
-      section-matter: 1.0.0
-      strip-bom-string: 1.0.0
-    dev: true
-
   /handle-thing/2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: true
@@ -8883,26 +6553,12 @@ packages:
     engines: {node: '>=0.4.7'}
     hasBin: true
     dependencies:
-      minimist: 1.2.7
+      minimist: 1.2.6
       neo-async: 2.6.2
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.17.4
-    dev: true
-
-  /happy-dom/7.6.7:
-    resolution: {integrity: sha512-9pOslsClyF5JX9ZM3dzRhLjTHqc4dha7v+ZB94u4PHMVTdLplXAnh5e5WXtPUU1n0J4tDUavslJqitqt/1W45g==}
-    dependencies:
-      css.escape: 1.5.1
-      he: 1.2.0
-      node-fetch: 2.6.7
-      sync-request: 6.1.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-    transitivePeerDependencies:
-      - encoding
+      uglify-js: 3.17.3
     dev: true
 
   /har-schema/2.0.0:
@@ -8924,10 +6580,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /harmony-reflect/1.6.2:
-    resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
-    dev: true
-
   /has-ansi/2.0.0:
     resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
     engines: {node: '>=0.10.0'}
@@ -8945,10 +6597,9 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /has-property-descriptors/1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.1.3
+  /has-own-prop/2.0.0:
+    resolution: {integrity: sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==}
+    engines: {node: '>=8'}
     dev: true
 
   /has-symbols/1.0.3:
@@ -8956,37 +6607,6 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /has-value/0.3.1:
-    resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      get-value: 2.0.6
-      has-values: 0.1.4
-      isobject: 2.1.0
-    dev: true
-
-  /has-value/1.0.0:
-    resolution: {integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      get-value: 2.0.6
-      has-values: 1.0.0
-      isobject: 3.0.1
-    dev: true
-
-  /has-values/0.1.4:
-    resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /has-values/1.0.0:
-    resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-number: 3.0.0
-      kind-of: 4.0.0
-    dev: true
-
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
@@ -8994,48 +6614,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /hast-util-is-element/1.1.0:
-    resolution: {integrity: sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==}
-    dev: true
-
-  /hast-util-sanitize/1.3.1:
-    resolution: {integrity: sha512-AIeKHuHx0Wk45nSkGVa2/ujQYTksnDl8gmmKo/mwQi7ag7IBZ8cM3nJ2G86SajbjGP/HRpud6kMkPtcM2i0Tlw==}
-    dependencies:
-      xtend: 4.0.2
-    dev: true
-
-  /hast-util-to-html/4.0.1:
-    resolution: {integrity: sha512-2emzwyf0xEsc4TBIPmDJmBttIw8R4SXAJiJZoiRR/s47ODYWgOqNoDbf2SJAbMbfNdFWMiCSOrI3OVnX6Qq2Mg==}
-    dependencies:
-      ccount: 1.1.0
-      comma-separated-tokens: 1.0.8
-      hast-util-is-element: 1.1.0
-      hast-util-whitespace: 1.0.4
-      html-void-elements: 1.0.5
-      property-information: 4.2.0
-      space-separated-tokens: 1.1.5
-      stringify-entities: 1.3.2
-      unist-util-is: 2.1.3
-      xtend: 4.0.2
-    dev: true
-
-  /hast-util-whitespace/1.0.4:
-    resolution: {integrity: sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==}
-    dev: true
-
-  /he/1.2.0:
-    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
-    hasBin: true
-    dev: true
-
   /heap/0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
 
-  /highlight.js/10.7.3:
-    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
-    dev: true
-
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -9071,10 +6653,6 @@ packages:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
 
-  /html-void-elements/1.0.5:
-    resolution: {integrity: sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==}
-    dev: true
-
   /htmlparser2/8.0.1:
     resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==}
     dependencies:
@@ -9084,16 +6662,6 @@ packages:
       entities: 4.4.0
     dev: true
 
-  /http-basic/8.1.3:
-    resolution: {integrity: sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      caseless: 0.12.0
-      concat-stream: 1.6.2
-      http-response-object: 3.0.2
-      parse-cache-control: 1.0.1
-    dev: true
-
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -9173,18 +6741,12 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
     dev: true
 
-  /http-response-object/3.0.2:
-    resolution: {integrity: sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==}
-    dependencies:
-      '@types/node': 10.17.60
-    dev: true
-
   /http-signature/1.2.0:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
     engines: {node: '>=0.8', npm: '>=1.3.7'}
@@ -9236,12 +6798,6 @@ packages:
     engines: {node: '>=12.20.0'}
     dev: true
 
-  /humanize-ms/1.2.1:
-    resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
-    dependencies:
-      ms: 2.1.3
-    dev: true
-
   /husky/8.0.2:
     resolution: {integrity: sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg==}
     engines: {node: '>=14'}
@@ -9261,13 +6817,6 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
-  /identity-obj-proxy/3.0.0:
-    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
-    engines: {node: '>=4'}
-    dependencies:
-      harmony-reflect: 1.6.2
-    dev: true
-
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -9304,50 +6853,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /inferred-types/0.22.8:
-    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
-    dependencies:
-      brilliant-errors: 0.6.0_upgr4zu6lczg6poy6g2njng6vm
-    dev: true
-
-  /inferred-types/0.22.8_ddphrhne6j5wyjvrgarb33hoge:
-    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
-    dependencies:
-      brilliant-errors: 0.6.0_ddphrhne6j5wyjvrgarb33hoge
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /inferred-types/0.22.8_upgr4zu6lczg6poy6g2njng6vm:
-    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
-    dependencies:
-      brilliant-errors: 0.6.0_upgr4zu6lczg6poy6g2njng6vm
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -9400,37 +6905,10 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  /is-absolute/1.0.0:
-    resolution: {integrity: sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-relative: 1.0.0
-      is-windows: 1.0.2
-    dev: true
-
-  /is-accessor-descriptor/0.1.6:
-    resolution: {integrity: sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 3.2.2
-    dev: true
-
-  /is-accessor-descriptor/1.0.0:
-    resolution: {integrity: sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 6.0.3
-    dev: true
-
   /is-alphabetical/1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
     dev: true
 
-  /is-alphanumeric/1.0.0:
-    resolution: {integrity: sha512-ZmRL7++ZkcMOfDuWZuMJyIVLr2keE1o/DeNWh1EmgqGhUcV+9BIVsx0BcSBOHTZqzjs4+dISzr2KAeBEWGgXeA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /is-alphanumerical/1.0.4:
     resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
     dependencies:
@@ -9449,82 +6927,41 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
-  /is-buffer/1.1.6:
-    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
-    dev: true
-
   /is-buffer/2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
     dev: true
 
+  /is-builtin-module/3.2.0:
+    resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
   /is-ci/3.0.1:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.5.0
+      ci-info: 3.6.2
     dev: true
 
-  /is-core-module/2.11.0:
-    resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
+  /is-core-module/2.10.0:
+    resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
     dependencies:
       has: 1.0.3
     dev: true
 
-  /is-data-descriptor/0.1.4:
-    resolution: {integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 3.2.2
-    dev: true
-
-  /is-data-descriptor/1.0.0:
-    resolution: {integrity: sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 6.0.3
-    dev: true
-
   /is-decimal/1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
     dev: true
 
-  /is-descriptor/0.1.6:
-    resolution: {integrity: sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-accessor-descriptor: 0.1.6
-      is-data-descriptor: 0.1.4
-      kind-of: 5.1.0
-    dev: true
-
-  /is-descriptor/1.0.2:
-    resolution: {integrity: sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-accessor-descriptor: 1.0.0
-      is-data-descriptor: 1.0.0
-      kind-of: 6.0.3
-    dev: true
-
   /is-docker/2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
     hasBin: true
     dev: true
 
-  /is-extendable/0.1.1:
-    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /is-extendable/1.0.1:
-    resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-plain-object: 2.0.4
-    dev: true
-
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -9545,13 +6982,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /is-glob/3.1.0:
-    resolution: {integrity: sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extglob: 2.1.1
-    dev: true
-
   /is-glob/4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -9571,18 +7001,6 @@ packages:
       is-path-inside: 3.0.3
     dev: true
 
-  /is-negated-glob/1.0.0:
-    resolution: {integrity: sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /is-number/3.0.0:
-    resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 3.2.2
-    dev: true
-
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -9621,20 +7039,7 @@ packages:
     dev: true
 
   /is-potential-custom-element-name/1.0.1:
-    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-    dev: true
-
-  /is-relative/1.0.0:
-    resolution: {integrity: sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-unc-path: 1.0.0
-    dev: true
-
-  /is-ssh/1.4.0:
-    resolution: {integrity: sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==}
-    dependencies:
-      protocols: 2.0.1
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
   /is-stream/1.1.0:
@@ -9663,40 +7068,11 @@ packages:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
     dev: true
 
-  /is-unc-path/1.0.0:
-    resolution: {integrity: sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      unc-path-regex: 0.1.2
-    dev: true
-
   /is-unicode-supported/0.1.0:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
     dev: true
 
-  /is-utf8/0.2.1:
-    resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
-    dev: true
-
-  /is-valid-glob/1.0.0:
-    resolution: {integrity: sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /is-whitespace-character/1.0.4:
-    resolution: {integrity: sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==}
-    dev: true
-
-  /is-windows/1.0.2:
-    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /is-word-character/1.0.4:
-    resolution: {integrity: sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==}
-    dev: true
-
   /is-wsl/2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -9716,13 +7092,6 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
-  /isobject/2.1.0:
-    resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      isarray: 1.0.0
-    dev: true
-
   /isobject/3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
@@ -9737,12 +7106,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /istanbul-lib-instrument/5.2.1:
-    resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
+  /istanbul-lib-instrument/5.2.0:
+    resolution: {integrity: sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/core': 7.20.2
-      '@babel/parser': 7.20.3
+      '@babel/core': 7.12.3
+      '@babel/parser': 7.19.1
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.0
@@ -9816,7 +7185,7 @@ packages:
       p-limit: 3.1.0
       pretty-format: 29.3.1
       slash: 3.0.0
-      stack-utils: 2.0.6
+      stack-utils: 2.0.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -9842,7 +7211,7 @@ packages:
       jest-util: 29.3.1
       jest-validate: 29.3.1
       prompts: 2.4.2
-      yargs: 17.6.2
+      yargs: 17.5.1
     transitivePeerDependencies:
       - '@types/node'
       - supports-color
@@ -9861,13 +7230,13 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.20.2
+      '@babel/core': 7.12.3
       '@jest/test-sequencer': 29.3.1
       '@jest/types': 29.3.1
       '@types/node': 18.11.9
-      babel-jest: 29.3.1_@babel+core@7.20.2
+      babel-jest: 29.3.1_@babel+core@7.12.3
       chalk: 4.1.2
-      ci-info: 3.5.0
+      ci-info: 3.6.2
       deepmerge: 4.2.2
       glob: 7.2.3
       graceful-fs: 4.2.10
@@ -10001,7 +7370,7 @@ packages:
       micromatch: 4.0.5
       pretty-format: 29.3.1
       slash: 3.0.0
-      stack-utils: 2.0.6
+      stack-utils: 2.0.5
     dev: true
 
   /jest-mock/29.3.1:
@@ -10118,18 +7487,18 @@ packages:
     resolution: {integrity: sha512-+3JOc+s28upYLI2OJM4PWRGK9AgpsMs/ekNryUV0yMBClT9B1DF2u2qay8YxcQd338PPYSFNb0lsar1B49sLDA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/core': 7.20.2
-      '@babel/generator': 7.20.4
-      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.2
-      '@babel/plugin-syntax-typescript': 7.20.0_@babel+core@7.20.2
-      '@babel/traverse': 7.20.1
-      '@babel/types': 7.20.2
+      '@babel/core': 7.12.3
+      '@babel/generator': 7.19.0
+      '@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
       '@jest/expect-utils': 29.3.1
       '@jest/transform': 29.3.1
       '@jest/types': 29.3.1
       '@types/babel__traverse': 7.18.2
       '@types/prettier': 2.7.1
-      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.20.2
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.12.3
       chalk: 4.1.2
       expect: 29.3.1
       graceful-fs: 4.2.10
@@ -10153,7 +7522,7 @@ packages:
       '@jest/types': 29.3.1
       '@types/node': 18.11.9
       chalk: 4.1.2
-      ci-info: 3.5.0
+      ci-info: 3.6.2
       graceful-fs: 4.2.10
       picomatch: 2.3.1
     dev: true
@@ -10247,8 +7616,12 @@ packages:
       nomnom: 1.5.2
     dev: true
 
-  /joi/17.7.0:
-    resolution: {integrity: sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg==}
+  /jju/1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+    dev: true
+
+  /joi/17.6.0:
+    resolution: {integrity: sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==}
     dependencies:
       '@hapi/hoek': 9.3.0
       '@hapi/topo': 5.1.0
@@ -10269,10 +7642,6 @@ packages:
     resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
     dev: true
 
-  /js-sdsl/4.1.5:
-    resolution: {integrity: sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==}
-    dev: true
-
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -10301,48 +7670,6 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /jsdom/20.0.0:
-    resolution: {integrity: sha512-x4a6CKCgx00uCmP+QakBDFXwjAJ69IkkIWHmtmjd3wvXPcdOS44hfX2vqkOQrVrq8l9DhNNADZRXaCEWvgXtVA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-    dependencies:
-      abab: 2.0.6
-      acorn: 8.8.0
-      acorn-globals: 6.0.0
-      cssom: 0.5.0
-      cssstyle: 2.3.0
-      data-urls: 3.0.2
-      decimal.js: 10.4.1
-      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
-      parse5: 7.1.1
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.2
-      w3c-hr-time: 1.0.2
-      w3c-xmlserializer: 3.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-      ws: 8.8.1
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /jsdom/20.0.2:
     resolution: {integrity: sha512-AHWa+QO/cgRg4N+DsmHg1Y7xnz+8KU3EflM0LVDTdmrYOc1WWTSkOjtpUveQH+1Bqd5rtcVnb/DuxV/UjDO4rA==}
     engines: {node: '>=14'}
@@ -10353,12 +7680,12 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.1
+      acorn: 8.8.0
       acorn-globals: 7.0.1
       cssom: 0.5.0
       cssstyle: 2.3.0
       data-urls: 3.0.2
-      decimal.js: 10.4.2
+      decimal.js: 10.4.1
       domexception: 4.0.0
       escodegen: 2.0.0
       form-data: 4.0.0
@@ -10376,7 +7703,7 @@ packages:
       whatwg-encoding: 2.0.0
       whatwg-mimetype: 3.0.0
       whatwg-url: 11.0.0
-      ws: 8.11.0
+      ws: 8.9.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -10395,12 +7722,14 @@ packages:
     hasBin: true
     dev: true
 
-  /json-buffer/3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+  /jsesc/3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
     dev: true
 
-  /json-parse-better-errors/1.0.2:
-    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+  /json-buffer/3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true
 
   /json-parse-even-better-errors/2.3.1:
@@ -10485,8 +7814,8 @@ packages:
       verror: 1.10.0
     dev: true
 
-  /keyv/4.5.2:
-    resolution: {integrity: sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==}
+  /keyv/4.5.0:
+    resolution: {integrity: sha512-2YvuMsA+jnFGtBareKqgANOEKe1mk3HKiXu2fRmAfyxG0MJAywNhi5ttWA3PMjl4NmpyjZNbFifR2vNjW1znfA==}
     dependencies:
       json-buffer: 3.0.1
     dev: true
@@ -10495,25 +7824,6 @@ packages:
     resolution: {integrity: sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==}
     dev: false
 
-  /kind-of/3.2.2:
-    resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-buffer: 1.1.6
-    dev: true
-
-  /kind-of/4.0.0:
-    resolution: {integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-buffer: 1.1.6
-    dev: true
-
-  /kind-of/5.1.0:
-    resolution: {integrity: sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -10529,15 +7839,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /konan/2.1.1:
-    resolution: {integrity: sha512-7ZhYV84UzJ0PR/RJnnsMZcAbn+kLasJhVNWsu8ZyVEJYRpGA5XESQ9d/7zOa08U0Ou4cmB++hMNY/3OSV9KIbg==}
-    dependencies:
-      '@babel/parser': 7.20.3
-      '@babel/traverse': 7.20.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /ky/0.28.7:
     resolution: {integrity: sha512-a23i6qSr/ep15vdtw/zyEQIDLoUaKDg9Jf04CYl/0ns/wXNYna26zJpI+MeIFaPeDvkrjLPrKtKOiiI3IE53RQ==}
     engines: {node: '>=12'}
@@ -10556,25 +7857,11 @@ packages:
     engines: {node: '> 0.8'}
     dev: true
 
-  /lazystream/1.0.1:
-    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
-    engines: {node: '>= 0.6.3'}
-    dependencies:
-      readable-stream: 2.3.7
-    dev: true
-
   /lcov-parse/1.0.0:
     resolution: {integrity: sha512-aprLII/vPzuQvYZnDRU78Fns9I2Ag3gi4Ipga/hxnVMCZC8DnR2nI7XBqrPoywGfxqIx/DgarGvDJZAD3YBTgQ==}
     hasBin: true
     dev: true
 
-  /lead/1.0.0:
-    resolution: {integrity: sha512-IpSVCk9AYvLHo5ctcIXxOBpMWUe+4TKN3VPWAKUbJikkmsGp0VrSM8IttVc32D6J4WUsiPE6aEFRNmIoF/gdow==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      flush-write-stream: 1.1.1
-    dev: true
-
   /leven/3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -10622,7 +7909,7 @@ packages:
     dependencies:
       cli-truncate: 3.1.0
       colorette: 2.0.19
-      commander: 9.4.1
+      commander: 9.4.0
       debug: 4.3.4
       execa: 6.1.0
       lilconfig: 2.0.5
@@ -10632,7 +7919,7 @@ packages:
       object-inspect: 1.12.2
       pidtree: 0.6.0
       string-argv: 0.3.1
-      yaml: 2.1.3
+      yaml: 2.1.1
     transitivePeerDependencies:
       - enquirer
       - supports-color
@@ -10653,7 +7940,7 @@ packages:
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.3.0
-      rxjs: 7.5.7
+      rxjs: 7.5.6
       through: 2.3.8
       wrap-ansi: 7.0.0
     dev: true
@@ -10672,25 +7959,11 @@ packages:
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.3.0
-      rxjs: 7.5.7
+      rxjs: 7.5.6
       through: 2.3.8
       wrap-ansi: 7.0.0
     dev: true
 
-  /livereload-js/2.4.0:
-    resolution: {integrity: sha512-XPQH8Z2GDP/Hwz2PCDrh2mth4yFejwA1OZ/81Ti3LgKyhDcEjsSsqFWZojHG0va/duGd+WyosY7eXLDoOyqcPw==}
-    dev: true
-
-  /load-json-file/4.0.0:
-    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
-    engines: {node: '>=4'}
-    dependencies:
-      graceful-fs: 4.2.10
-      parse-json: 4.0.0
-      pify: 3.0.0
-      strip-bom: 3.0.0
-    dev: true
-
   /loader-runner/4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -10701,14 +7974,6 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /locate-path/2.0.0:
-    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-locate: 2.0.0
-      path-exists: 3.0.0
-    dev: true
-
   /locate-path/3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -10731,13 +7996,9 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash.debounce/4.0.8:
-    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
-    dev: true
-
-  /lodash.ismatch/4.4.0:
-    resolution: {integrity: sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==}
-    dev: true
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
 
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
@@ -10777,21 +8038,17 @@ packages:
     resolution: {integrity: sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==}
     dev: true
 
-  /loglevel/1.8.1:
-    resolution: {integrity: sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==}
+  /loglevel/1.8.0:
+    resolution: {integrity: sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==}
     engines: {node: '>= 0.6.0'}
     dev: true
 
-  /longest-streak/2.0.4:
-    resolution: {integrity: sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==}
-    dev: true
-
   /longest-streak/3.0.1:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: true
 
-  /loupe/2.3.6:
-    resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
+  /loupe/2.3.4:
+    resolution: {integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==}
     dependencies:
       get-func-name: 2.0.0
     dev: true
@@ -10814,6 +8071,10 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /lunr/2.3.9:
+    resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
+    dev: true
+
   /magic-string/0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
@@ -10837,11 +8098,6 @@ packages:
       tmpl: 1.0.5
     dev: true
 
-  /map-cache/0.2.2:
-    resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /map-obj/1.0.1:
     resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
     engines: {node: '>=0.10.0'}
@@ -10856,17 +8112,6 @@ packages:
     resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==}
     dev: true
 
-  /map-visit/1.0.0:
-    resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      object-visit: 1.0.1
-    dev: true
-
-  /markdown-escapes/1.0.4:
-    resolution: {integrity: sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==}
-    dev: true
-
   /markdown-it/13.0.1:
     resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
     hasBin: true
@@ -10878,20 +8123,10 @@ packages:
       uc.micro: 1.0.6
     dev: true
 
-  /markdown-table/1.1.3:
-    resolution: {integrity: sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==}
-    dev: true
-
-  /mdast-util-compact/1.0.4:
-    resolution: {integrity: sha512-3YDMQHI5vRiS2uygEFYaqckibpJtKq5Sj2c8JioeOQBU6INpKbdWzfyLqFFnDwEcEnRFIdMsguzs5pC1Jp4Isg==}
-    dependencies:
-      unist-util-visit: 1.4.1
-    dev: true
-
-  /mdast-util-definitions/1.2.5:
-    resolution: {integrity: sha512-CJXEdoLfiISCDc2JB6QLb79pYfI6+GcIH+W2ox9nMc7od0Pz+bovcHsiq29xAQY6ayqe/9CsK2VzkSJdg1pFYA==}
-    dependencies:
-      unist-util-visit: 1.4.1
+  /marked/4.1.1:
+    resolution: {integrity: sha512-0cNMnTcUJPxbA6uWmCmjWz4NJRe/0Xfk2NhXCUHjew9qJzFN20krFnsUe7QynwqOwa5m1fZ4UDg0ycKFVC0ccw==}
+    engines: {node: '>= 12'}
+    hasBin: true
     dev: true
 
   /mdast-util-from-markdown/0.8.5:
@@ -10913,7 +8148,7 @@ packages:
       '@types/unist': 2.0.6
       decode-named-character-reference: 1.0.2
       mdast-util-to-string: 3.1.0
-      micromark: 3.1.0
+      micromark: 3.0.10
       micromark-util-decode-numeric-character-reference: 1.0.0
       micromark-util-decode-string: 1.0.2
       micromark-util-normalize-identifier: 1.0.0
@@ -10925,28 +8160,6 @@ packages:
       - supports-color
     dev: true
 
-  /mdast-util-inject/1.1.0:
-    resolution: {integrity: sha512-CcJ0mHa36QYumDKiZ2OIR+ClhfOM7zIzN+Wfy8tRZ1hpH9DKLCS+Mh4DyK5bCxzE9uxMWcbIpeNFWsg1zrj/2g==}
-    dependencies:
-      mdast-util-to-string: 1.1.0
-    dev: true
-
-  /mdast-util-to-hast/3.0.4:
-    resolution: {integrity: sha512-/eIbly2YmyVgpJNo+bFLLMCI1XgolO/Ffowhf+pHDq3X4/V6FntC9sGQCDLM147eTS+uSXv5dRzJyFn+o0tazA==}
-    dependencies:
-      collapse-white-space: 1.0.6
-      detab: 2.0.4
-      mdast-util-definitions: 1.2.5
-      mdurl: 1.0.1
-      trim: 0.0.1
-      trim-lines: 1.1.3
-      unist-builder: 1.0.4
-      unist-util-generated: 1.1.6
-      unist-util-position: 3.1.0
-      unist-util-visit: 1.4.1
-      xtend: 4.0.2
-    dev: true
-
   /mdast-util-to-markdown/1.3.0:
     resolution: {integrity: sha512-6tUSs4r+KK4JGTTiQ7FfHmVOaDrLQJPmpjD6wPMlHGUVXoG9Vjc3jIeP+uyBWRf8clwB2blM+W7+KrlMYQnftA==}
     dependencies:
@@ -10959,10 +8172,6 @@ packages:
       zwitch: 2.0.2
     dev: true
 
-  /mdast-util-to-string/1.1.0:
-    resolution: {integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==}
-    dev: true
-
   /mdast-util-to-string/2.0.0:
     resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
     dev: true
@@ -10971,15 +8180,6 @@ packages:
     resolution: {integrity: sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==}
     dev: true
 
-  /mdast-util-toc/3.1.0:
-    resolution: {integrity: sha512-Za0hqL1PqWrvxGtA/3NH9D5nhGAUS9grMM4obEAz5+zsk1RIw/vWUchkaoDLNdrwk05A0CSC5eEXng36/1qE5w==}
-    dependencies:
-      github-slugger: 1.5.0
-      mdast-util-to-string: 1.1.0
-      unist-util-is: 2.1.3
-      unist-util-visit: 1.4.1
-    dev: true
-
   /mdn-data/2.0.6:
     resolution: {integrity: sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==}
     dev: true
@@ -10993,8 +8193,8 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /memfs/3.4.10:
-    resolution: {integrity: sha512-0bCUP+L79P4am30yP1msPzApwuMQG23TjwlwdHeEV5MxioDR1a0AgB0T9FfggU52eJuDCq8WVwb5ekznFyWiTQ==}
+  /memfs/3.4.11:
+    resolution: {integrity: sha512-GvsCITGAyDCxxsJ+X6prJexFQEhOCJaIlUbsAvjzSI5o5O7j2dle3jWvz5Z5aOdpOxW6ol3vI1+0ut+641F1+w==}
     engines: {node: '>= 4.0.0'}
     dependencies:
       fs-monkey: 1.0.3
@@ -11006,7 +8206,7 @@ packages:
     dependencies:
       '@types/minimist': 1.2.2
       camelcase-keys: 6.2.2
-      decamelize-keys: 1.1.1
+      decamelize-keys: 1.1.0
       hard-rejection: 2.1.0
       minimist-options: 4.1.0
       normalize-package-data: 3.0.3
@@ -11162,8 +8362,8 @@ packages:
       micromark-util-types: 1.0.2
     dev: true
 
-  /micromark-util-sanitize-uri/1.1.0:
-    resolution: {integrity: sha512-RoxtuSCX6sUNtxhbmsEFQfWzs8VN7cTctmBPvYivo98xb/kDEoTCtJQX5wyzIYEmk/lvNFTat4hL8oW0KndFpg==}
+  /micromark-util-sanitize-uri/1.0.0:
+    resolution: {integrity: sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==}
     dependencies:
       micromark-util-character: 1.1.0
       micromark-util-encode: 1.0.1
@@ -11196,8 +8396,8 @@ packages:
       - supports-color
     dev: true
 
-  /micromark/3.1.0:
-    resolution: {integrity: sha512-6Mj0yHLdUZjHnOPgr5xfWIMqMWS12zDN6iws9SLuSz76W8jTtAv24MN4/CL7gJrl5vtxGInkkqDv/JIoRsQOvA==}
+  /micromark/3.0.10:
+    resolution: {integrity: sha512-ryTDy6UUunOXy2HPjelppgJ2sNfcPz1pLlMdA6Rz9jPzhLikWXv/irpWV/I2jd68Uhmny7hHxAlAhk4+vWggpg==}
     dependencies:
       '@types/debug': 4.1.7
       debug: 4.3.4
@@ -11211,7 +8411,7 @@ packages:
       micromark-util-encode: 1.0.1
       micromark-util-normalize-identifier: 1.0.0
       micromark-util-resolve-all: 1.0.0
-      micromark-util-sanitize-uri: 1.1.0
+      micromark-util-sanitize-uri: 1.0.0
       micromark-util-subtokenize: 1.0.2
       micromark-util-symbol: 1.0.1
       micromark-util-types: 1.0.2
@@ -11220,27 +8420,6 @@ packages:
       - supports-color
     dev: true
 
-  /micromatch/3.1.10:
-    resolution: {integrity: sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      arr-diff: 4.0.0
-      array-unique: 0.3.2
-      braces: 2.3.2
-      define-property: 2.0.2
-      extend-shallow: 3.0.2
-      extglob: 2.0.4
-      fragment-cache: 0.2.1
-      kind-of: 6.0.3
-      nanomatch: 1.2.13
-      object.pick: 1.3.0
-      regex-not: 1.0.2
-      snapdragon: 0.8.2
-      to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /micromatch/4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -11267,12 +8446,6 @@ packages:
     hasBin: true
     dev: true
 
-  /mime/2.6.0:
-    resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
-    engines: {node: '>=4.0.0'}
-    hasBin: true
-    dev: true
-
   /mimic-fn/2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -11308,6 +8481,13 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
+  /minimatch/5.1.0:
+    resolution: {integrity: sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist-options/4.1.0:
     resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
     engines: {node: '>= 6'}
@@ -11321,59 +8501,21 @@ packages:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
     dev: true
 
-  /minimist/1.2.7:
-    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
-    dev: true
-
-  /mixin-deep/1.3.2:
-    resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      for-in: 1.0.2
-      is-extendable: 1.0.1
-    dev: true
-
   /mkdirp/0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
     dependencies:
-      minimist: 1.2.7
-    dev: true
-
-  /modify-values/1.0.1:
-    resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /module-deps-sortable/5.0.3:
-    resolution: {integrity: sha512-eiyIZj/A0dj1o4ywXWqicazUL3l0HP3TydUR6xF0X3xh3LGBMLqW8a9aFe6MuNH4mxNMk53QKBHM6LOPR8kSgw==}
-    engines: {node: '>= 0.6'}
-    hasBin: true
-    dependencies:
-      JSONStream: 1.3.5
-      browser-resolve: 1.11.3
-      cached-path-relative: 1.1.0
-      concat-stream: 1.5.2
-      defined: 1.0.1
-      detective: 5.2.1
-      duplexer2: 0.1.4
-      inherits: 2.0.4
-      konan: 2.1.1
-      readable-stream: 2.3.7
-      resolve: 1.22.1
-      standard-version: 9.5.0
-      stream-combiner2: 1.1.1
-      subarg: 1.0.0
-      through2: 2.0.5
-      xtend: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
+      minimist: 1.2.6
     dev: true
 
   /moment-mini/2.29.4:
     resolution: {integrity: sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==}
     dev: false
 
+  /moment/2.29.4:
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
+    dev: true
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -11410,45 +8552,6 @@ packages:
     hasBin: true
     dev: true
 
-  /nanomatch/1.2.13:
-    resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      arr-diff: 4.0.0
-      array-unique: 0.3.2
-      define-property: 2.0.2
-      extend-shallow: 3.0.2
-      fragment-cache: 0.2.1
-      is-windows: 1.0.2
-      kind-of: 6.0.3
-      object.pick: 1.3.0
-      regex-not: 1.0.2
-      snapdragon: 0.8.2
-      to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /native-dash/1.23.2_ddphrhne6j5wyjvrgarb33hoge:
-    resolution: {integrity: sha512-Ev5OPB5vDZ+HLj4MXfAwZRHJV/LJr2LHjsIr1UN7jZigMS2JRpF7Qy77t66GURhtzp7GSWLNSLeRwXOg1iwJkQ==}
-    dependencies:
-      brilliant-errors: 0.6.0_ddphrhne6j5wyjvrgarb33hoge
-      inferred-types: 0.22.8_ddphrhne6j5wyjvrgarb33hoge
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -11526,18 +8629,11 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.11.0
+      is-core-module: 2.10.0
       semver: 7.3.8
       validate-npm-package-license: 3.0.4
     dev: true
 
-  /normalize-path/2.1.1:
-    resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      remove-trailing-separator: 1.1.0
-    dev: true
-
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -11548,13 +8644,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /now-and-later/2.0.1:
-    resolution: {integrity: sha512-KGvQ0cB70AQfg107Xvs/Fbu+dGmZoTRJp2TaPwcwQm3/7PteUyN2BCgk8KBMPGBUXZdVwyWS8fDCGFygBm19UQ==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      once: 1.4.0
-    dev: true
-
   /npm-run-path/2.0.2:
     resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==}
     engines: {node: '>=4'}
@@ -11584,53 +8673,10 @@ packages:
     resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
     dev: true
 
-  /object-assign/4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /object-copy/0.1.0:
-    resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      copy-descriptor: 0.1.1
-      define-property: 0.2.5
-      kind-of: 3.2.2
-    dev: true
-
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
     dev: true
 
-  /object-keys/1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /object-visit/1.0.1:
-    resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      isobject: 3.0.1
-    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.1.4
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: true
-
-  /object.pick/1.3.0:
-    resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      isobject: 3.0.1
-    dev: true
-
   /obuf/1.1.2:
     resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
     dev: true
@@ -11700,12 +8746,6 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
-  /ordered-read-streams/1.0.1:
-    resolution: {integrity: sha512-Z87aSjx3r5c0ZB7bcJqIgIRX5bxR7A4aSzvIbaxd0oTkWBCOoKfuGHiKj60CHVUgg1Phm5yMZzBdt8XqRs73Mw==}
-    dependencies:
-      readable-stream: 2.3.7
-    dev: true
-
   /ospath/1.2.2:
     resolution: {integrity: sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==}
     dev: true
@@ -11725,13 +8765,6 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /p-limit/1.3.0:
-    resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-try: 1.0.0
-    dev: true
-
   /p-limit/2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -11746,13 +8779,6 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
-  /p-locate/2.0.0:
-    resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-limit: 1.3.0
-    dev: true
-
   /p-locate/3.0.0:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
@@ -11789,11 +8815,6 @@ packages:
       retry: 0.13.1
     dev: true
 
-  /p-try/1.0.0:
-    resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
-    engines: {node: '>=4'}
-    dev: true
-
   /p-try/2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -11836,19 +8857,11 @@ packages:
       callsites: 3.1.0
     dev: true
 
-  /parse-cache-control/1.0.1:
-    resolution: {integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==}
-    dev: true
-
-  /parse-entities/1.2.2:
-    resolution: {integrity: sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==}
+  /parent-module/2.0.0:
+    resolution: {integrity: sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==}
+    engines: {node: '>=8'}
     dependencies:
-      character-entities: 1.2.4
-      character-entities-legacy: 1.1.4
-      character-reference-invalid: 1.1.4
-      is-alphanumerical: 1.0.4
-      is-decimal: 1.0.4
-      is-hexadecimal: 1.0.4
+      callsites: 3.1.0
     dev: true
 
   /parse-entities/2.0.0:
@@ -11862,23 +8875,6 @@ packages:
       is-hexadecimal: 1.0.4
     dev: true
 
-  /parse-filepath/1.0.2:
-    resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      is-absolute: 1.0.0
-      map-cache: 0.2.2
-      path-root: 0.1.1
-    dev: true
-
-  /parse-json/4.0.0:
-    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
-    engines: {node: '>=4'}
-    dependencies:
-      error-ex: 1.3.2
-      json-parse-better-errors: 1.0.2
-    dev: true
-
   /parse-json/5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -11889,24 +8885,6 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
-  /parse-path/4.0.4:
-    resolution: {integrity: sha512-Z2lWUis7jlmXC1jeOG9giRO2+FsuyNipeQ43HAjqAZjwSe3SEf+q/84FGPHoso3kyntbxa4c4i77t3m6fGf8cw==}
-    dependencies:
-      is-ssh: 1.4.0
-      protocols: 1.4.8
-      qs: 6.11.0
-      query-string: 6.14.1
-    dev: true
-
-  /parse-url/6.0.5:
-    resolution: {integrity: sha512-e35AeLTSIlkw/5GFq70IN7po8fmDUjpDPY1rIK+VubRfsUvBonjQ+PBZG+vWMACnQSmNlvl524IucoDmcioMxA==}
-    dependencies:
-      is-ssh: 1.4.0
-      normalize-url: 6.1.0
-      parse-path: 4.0.4
-      protocols: 1.4.8
-    dev: true
-
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
@@ -11922,13 +8900,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /pascalcase/0.1.1:
-    resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /path-dirname/1.0.2:
-    resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
+  /path-browserify/1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
     dev: true
 
   /path-exists/3.0.0:
@@ -11965,29 +8938,10 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
-  /path-root-regex/0.1.2:
-    resolution: {integrity: sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /path-root/0.1.1:
-    resolution: {integrity: sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      path-root-regex: 0.1.2
-    dev: true
-
   /path-to-regexp/0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
     dev: true
 
-  /path-type/3.0.0:
-    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
-    engines: {node: '>=4'}
-    dependencies:
-      pify: 3.0.0
-    dev: true
-
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -12031,16 +8985,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /pify/3.0.0:
-    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /pify/5.0.0:
-    resolution: {integrity: sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==}
-    engines: {node: '>=10'}
-    dev: true
-
   /pirates/4.0.5:
     resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
     engines: {node: '>= 6'}
@@ -12075,6 +9019,11 @@ packages:
       xmlbuilder: 15.1.1
     dev: true
 
+  /pluralize/8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /png-async/0.9.4:
     resolution: {integrity: sha512-B//AXX9TkneKfgtOpT1mdUnnhk2BImGD+a98vImsMU8uo1dBeHyW/kM2erWZ/CsYteTPU/xKG+t6T62heHkC3A==}
     dev: true
@@ -12095,15 +9044,6 @@ packages:
     hasBin: true
     dev: true
 
-  /posix-character-classes/0.1.1:
-    resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /postcss-value-parser/4.1.0:
-    resolution: {integrity: sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==}
-    dev: true
-
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
@@ -12117,8 +9057,8 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /preact/10.11.2:
-    resolution: {integrity: sha512-skAwGDFmgxhq1DCBHke/9e12ewkhc7WYwjuhHB8HHS8zkdtITXLRmUMTeol2ldxvLwYtwbFeifZ9uDDWuyL4Iw==}
+  /preact/10.11.0:
+    resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
     dev: true
 
   /prelude-ls/1.1.2:
@@ -12165,20 +9105,10 @@ packages:
       react-is: 18.2.0
     dev: true
 
-  /process-nextick-args/1.0.7:
-    resolution: {integrity: sha512-yN0WQmuCX63LP/TMvAg31nvT6m4vDqJEiiv2CAZqWOGNWutc9DfDk1NPYYmKUFmaVM2UwDowH4u5AHWYP/jxKw==}
-    dev: true
-
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
-  /promise/8.3.0:
-    resolution: {integrity: sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==}
-    dependencies:
-      asap: 2.0.6
-    dev: true
-
   /prompts/2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -12187,20 +9117,6 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
-  /property-information/4.2.0:
-    resolution: {integrity: sha512-TlgDPagHh+eBKOnH2VYvk8qbwsCG/TAJdmTL7f1PROUcSO8qt/KSmShEQ/OKvock8X9tFjtqjCScyOkkkvIKVQ==}
-    dependencies:
-      xtend: 4.0.2
-    dev: true
-
-  /protocols/1.4.8:
-    resolution: {integrity: sha512-IgjKyaUSjsROSO8/D49Ab7hP8mJgTYcqApOqdPhLoPxAplXmkp+zRvsrSQjFn5by0rhm4VH0GAUELIPpx7B1yg==}
-    dev: true
-
-  /protocols/2.0.1:
-    resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
-    dev: true
-
   /proxy-addr/2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -12245,13 +9161,6 @@ packages:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: true
 
-  /pump/2.0.1:
-    resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==}
-    dependencies:
-      end-of-stream: 1.4.4
-      once: 1.4.0
-    dev: true
-
   /pump/3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
     dependencies:
@@ -12259,14 +9168,6 @@ packages:
       once: 1.4.0
     dev: true
 
-  /pumpify/1.5.1:
-    resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
-    dependencies:
-      duplexify: 3.7.1
-      inherits: 2.0.4
-      pump: 2.0.1
-    dev: true
-
   /punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
@@ -12289,16 +9190,6 @@ packages:
     engines: {node: '>=0.6'}
     dev: true
 
-  /query-string/6.14.1:
-    resolution: {integrity: sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==}
-    engines: {node: '>=6'}
-    dependencies:
-      decode-uri-component: 0.2.0
-      filter-obj: 1.1.0
-      split-on-first: 1.1.0
-      strict-uri-encode: 2.0.0
-    dev: true
-
   /querystringify/2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
     dev: true
@@ -12328,14 +9219,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /raw-body/1.1.7:
-    resolution: {integrity: sha512-WmJJU2e9Y6M5UzTOkHaM7xJGAPQD8PNzx3bAd2+uhZAim6wDk6dAZxPVYLF67XhbR4hmKGh33Lpmh4XWrCH5Mg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      bytes: 1.0.0
-      string_decoder: 0.10.31
-    dev: true
-
   /raw-body/2.5.1:
     resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
     engines: {node: '>= 0.8'}
@@ -12350,22 +9233,6 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
-  /read-pkg-up/3.0.0:
-    resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==}
-    engines: {node: '>=4'}
-    dependencies:
-      find-up: 2.1.0
-      read-pkg: 3.0.0
-    dev: true
-
-  /read-pkg-up/4.0.0:
-    resolution: {integrity: sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==}
-    engines: {node: '>=6'}
-    dependencies:
-      find-up: 3.0.0
-      read-pkg: 3.0.0
-    dev: true
-
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -12375,15 +9242,6 @@ packages:
       type-fest: 0.8.1
     dev: true
 
-  /read-pkg/3.0.0:
-    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
-    engines: {node: '>=4'}
-    dependencies:
-      load-json-file: 4.0.0
-      normalize-package-data: 2.5.0
-      path-type: 3.0.0
-    dev: true
-
   /read-pkg/5.2.0:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
@@ -12403,29 +9261,6 @@ packages:
       string_decoder: 0.10.31
     dev: true
 
-  /readable-stream/2.0.6:
-    resolution: {integrity: sha512-TXcFfb63BQe1+ySzsHZI/5v1aJPCShfqvWJ64ayNImXMsN1Cd0YGk/wm8KB7/OeessgPc9QvS9Zou8QTkFzsLw==}
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 1.0.7
-      string_decoder: 0.10.31
-      util-deprecate: 1.0.2
-    dev: true
-
-  /readable-stream/2.1.5:
-    resolution: {integrity: sha512-NkXT2AER7VKXeXtJNSaWLpWIhmtSE3K2PguaLEeWr4JILghcIKqoLt1A3wHrnpDC5+ekf8gfk1GKWkFXe4odMw==}
-    dependencies:
-      buffer-shims: 1.0.0
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 1.0.7
-      string_decoder: 0.10.31
-      util-deprecate: 1.0.2
-    dev: true
-
   /readable-stream/2.3.7:
     resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
     dependencies:
@@ -12469,33 +9304,9 @@ packages:
       strip-indent: 3.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.10:
-    resolution: {integrity: sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==}
-    dev: true
-
-  /regenerator-transform/0.15.0:
-    resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==}
-    dependencies:
-      '@babel/runtime': 7.20.1
-    dev: true
-
-  /regex-not/1.0.2:
-    resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      extend-shallow: 3.0.2
-      safe-regex: 1.1.0
+  /regexp-tree/0.1.24:
+    resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
+    hasBin: true
     dev: true
 
   /regexpp/3.2.0:
@@ -12503,22 +9314,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /regexpu-core/5.2.1:
-    resolution: {integrity: sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      regenerate: 1.4.2
-      regenerate-unicode-properties: 10.1.0
-      regjsgen: 0.7.1
-      regjsparser: 0.9.1
-      unicode-match-property-ecmascript: 2.0.0
-      unicode-match-property-value-ecmascript: 2.0.0
-    dev: true
-
-  /regjsgen/0.7.1:
-    resolution: {integrity: sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA==}
-    dev: true
-
   /regjsparser/0.9.1:
     resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
     hasBin: true
@@ -12526,15 +9321,6 @@ packages:
       jsesc: 0.5.0
     dev: true
 
-  /remark-html/8.0.0:
-    resolution: {integrity: sha512-3V2391GL3hxKhrkzYOyfPpxJ6taIKLCfuLVqumeWQOk3H9nTtSQ8St8kMYkBVIEAquXN1chT83qJ/2lAW+dpEg==}
-    dependencies:
-      hast-util-sanitize: 1.3.1
-      hast-util-to-html: 4.0.1
-      mdast-util-to-hast: 3.0.4
-      xtend: 4.0.2
-    dev: true
-
   /remark-parse/10.0.1:
     resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==}
     dependencies:
@@ -12545,40 +9331,6 @@ packages:
       - supports-color
     dev: true
 
-  /remark-parse/5.0.0:
-    resolution: {integrity: sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==}
-    dependencies:
-      collapse-white-space: 1.0.6
-      is-alphabetical: 1.0.4
-      is-decimal: 1.0.4
-      is-whitespace-character: 1.0.4
-      is-word-character: 1.0.4
-      markdown-escapes: 1.0.4
-      parse-entities: 1.2.2
-      repeat-string: 1.6.1
-      state-toggle: 1.0.3
-      trim: 0.0.1
-      trim-trailing-lines: 1.1.4
-      unherit: 1.1.3
-      unist-util-remove-position: 1.1.4
-      vfile-location: 2.0.6
-      xtend: 4.0.2
-    dev: true
-
-  /remark-reference-links/4.0.4:
-    resolution: {integrity: sha512-+2X8hwSQqxG4tvjYZNrTcEC+bXp8shQvwRGG6J/rnFTvBoU4G0BBviZoqKGZizLh/DG+0gSYhiDDWCqyxXW1iQ==}
-    dependencies:
-      unist-util-visit: 1.4.1
-    dev: true
-
-  /remark-slug/5.1.2:
-    resolution: {integrity: sha512-DWX+Kd9iKycqyD+/B+gEFO3jjnt7Yg1O05lygYSNTe5i5PIxxxPjp5qPBDxPIzp5wreF7+1ROCwRgjEcqmzr3A==}
-    dependencies:
-      github-slugger: 1.2.0
-      mdast-util-to-string: 1.1.0
-      unist-util-visit: 1.4.1
-    dev: true
-
   /remark-stringify/10.0.2:
     resolution: {integrity: sha512-6wV3pvbPvHkbNnWB0wdDvVFHOe1hBRAx1Q/5g/EpH4RppAII6J8Gnwe7VbHuXaoKIF6LAg6ExTel/+kNqSQ7lw==}
     dependencies:
@@ -12587,32 +9339,6 @@ packages:
       unified: 10.1.2
     dev: true
 
-  /remark-stringify/5.0.0:
-    resolution: {integrity: sha512-Ws5MdA69ftqQ/yhRF9XhVV29mhxbfGhbz0Rx5bQH+oJcNhhSM6nCu1EpLod+DjrFGrU0BMPs+czVmJZU7xiS7w==}
-    dependencies:
-      ccount: 1.1.0
-      is-alphanumeric: 1.0.0
-      is-decimal: 1.0.4
-      is-whitespace-character: 1.0.4
-      longest-streak: 2.0.4
-      markdown-escapes: 1.0.4
-      markdown-table: 1.1.3
-      mdast-util-compact: 1.0.4
-      parse-entities: 1.2.2
-      repeat-string: 1.6.1
-      state-toggle: 1.0.3
-      stringify-entities: 1.3.2
-      unherit: 1.1.3
-      xtend: 4.0.2
-    dev: true
-
-  /remark-toc/5.1.1:
-    resolution: {integrity: sha512-vCPW4YOsm2CfyuScdktM9KDnJXVHJsd/ZeRtst+dnBU3B3KKvt8bc+bs5syJjyptAHfqo7H+5Uhz+2blWBfwow==}
-    dependencies:
-      mdast-util-toc: 3.1.0
-      remark-slug: 5.1.2
-    dev: true
-
   /remark/14.0.2:
     resolution: {integrity: sha512-A3ARm2V4BgiRXaUo5K0dRvJ1lbogrbXnhkJRmD0yw092/Yl0kOCZt1k9ZeElEwkZsWGsMumz6qL5MfNJH9nOBA==}
     dependencies:
@@ -12624,55 +9350,11 @@ packages:
       - supports-color
     dev: true
 
-  /remark/9.0.0:
-    resolution: {integrity: sha512-amw8rGdD5lHbMEakiEsllmkdBP+/KpjW/PRK6NSGPZKCQowh0BT4IWXDAkRMyG3SB9dKPXWMviFjNusXzXNn3A==}
-    dependencies:
-      remark-parse: 5.0.0
-      remark-stringify: 5.0.0
-      unified: 6.2.0
-    dev: true
-
-  /remove-bom-buffer/3.0.0:
-    resolution: {integrity: sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-buffer: 1.1.6
-      is-utf8: 0.2.1
-    dev: true
-
-  /remove-bom-stream/1.2.0:
-    resolution: {integrity: sha512-wigO8/O08XHb8YPzpDDT+QmRANfW6vLqxfaXm1YXhnFf3AkSLyjfG3GEFg4McZkmgL7KvCj5u2KczkvSP6NfHA==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      remove-bom-buffer: 3.0.0
-      safe-buffer: 5.2.1
-      through2: 2.0.5
-    dev: true
-
-  /remove-trailing-separator/1.1.0:
-    resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
-    dev: true
-
-  /repeat-element/1.1.4:
-    resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /repeat-string/1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
     dev: true
 
-  /replace-ext/1.0.0:
-    resolution: {integrity: sha512-vuNYXC7gG7IeVNBC1xUllqCcZKRbJoSPOBhnTEcAIiKCsbuef6zO3F0Rve3isPMMoNoQRWjQwbAgAjHUHniyEA==}
-    engines: {node: '>= 0.10'}
-    dev: true
-
-  /replace-ext/1.0.1:
-    resolution: {integrity: sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==}
-    engines: {node: '>= 0.10'}
-    dev: true
-
   /request-progress/3.0.0:
     resolution: {integrity: sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==}
     dependencies:
@@ -12716,10 +9398,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /require-main-filename/2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-    dev: true
-
   /requires-port/1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
@@ -12752,32 +9430,23 @@ packages:
       global-dirs: 0.1.1
     dev: true
 
-  /resolve-options/1.1.0:
-    resolution: {integrity: sha512-NYDgziiroVeDC29xq7bp/CacZERYsA9bXYd1ZmcJlF3BcrZv5pTb4NG7SjdyKDnXZ84aC4vo2u6sNKIA1LCu/A==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      value-or-function: 3.0.0
-    dev: true
-
-  /resolve-url/0.2.1:
-    resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
-    deprecated: https://github.com/lydell/resolve-url#deprecated
-    dev: true
-
   /resolve.exports/1.1.0:
     resolution: {integrity: sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==}
     engines: {node: '>=10'}
     dev: true
 
-  /resolve/1.1.7:
-    resolution: {integrity: sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==}
+  /resolve/1.19.0:
+    resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
+    dependencies:
+      is-core-module: 2.10.0
+      path-parse: 1.0.7
     dev: true
 
   /resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
     dependencies:
-      is-core-module: 2.11.0
+      is-core-module: 2.10.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
@@ -12796,11 +9465,6 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
-  /ret/0.1.15:
-    resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==}
-    engines: {node: '>=0.12'}
-    dev: true
-
   /retry/0.13.1:
     resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
     engines: {node: '>= 4'}
@@ -12833,6 +9497,21 @@ packages:
     resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
     dev: false
 
+  /rollup-plugin-visualizer/5.8.3:
+    resolution: {integrity: sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.0
+      source-map: 0.7.4
+      yargs: 17.5.1
+    dev: true
+
   /rollup/2.79.1:
     resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
     engines: {node: '>=10.0.0'}
@@ -12857,12 +9536,6 @@ packages:
       tslib: 2.4.0
     dev: true
 
-  /rxjs/7.5.7:
-    resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
-    dependencies:
-      tslib: 2.4.1
-    dev: true
-
   /sade/1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -12878,14 +9551,10 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
-  /safe-json-parse/1.0.1:
-    resolution: {integrity: sha512-o0JmTu17WGUaUOHa1l0FPGXKBfijbxK6qoHzlkihsDXxzBHvJcA7zgviKR92Xs841rX9pK16unfphLq0/KqX7A==}
-    dev: true
-
-  /safe-regex/1.1.0:
-    resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
+  /safe-regex/2.1.1:
+    resolution: {integrity: sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==}
     dependencies:
-      ret: 0.1.15
+      regexp-tree: 0.1.24
     dev: true
 
   /safer-buffer/2.1.2:
@@ -12924,14 +9593,6 @@ packages:
       ajv-keywords: 5.1.0_ajv@8.11.0
     dev: true
 
-  /section-matter/1.0.0:
-    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      extend-shallow: 2.0.1
-      kind-of: 6.0.3
-    dev: true
-
   /select-hose/2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
     dev: true
@@ -13023,20 +9684,6 @@ packages:
       - supports-color
     dev: true
 
-  /set-blocking/2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-    dev: true
-
-  /set-value/2.0.1:
-    resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      extend-shallow: 2.0.1
-      is-extendable: 0.1.1
-      is-plain-object: 2.0.4
-      split-string: 3.1.0
-    dev: true
-
   /setprototypeof/1.1.0:
     resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
     dev: true
@@ -13080,10 +9727,6 @@ packages:
     resolution: {integrity: sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==}
     dev: true
 
-  /shell-quote/1.7.4:
-    resolution: {integrity: sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==}
-    dev: true
-
   /shiki/0.11.1:
     resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
     dependencies:
@@ -13147,47 +9790,15 @@ packages:
 
   /slice-ansi/5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 4.0.0
-    dev: true
-
-  /smart-buffer/4.2.0:
-    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
-    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
-    dev: true
-
-  /snapdragon-node/2.1.1:
-    resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      define-property: 1.0.0
-      isobject: 3.0.1
-      snapdragon-util: 3.0.1
-    dev: true
-
-  /snapdragon-util/3.0.1:
-    resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 3.2.2
-    dev: true
-
-  /snapdragon/0.8.2:
-    resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      base: 0.11.2
-      debug: 2.6.9
-      define-property: 0.2.5
-      extend-shallow: 2.0.1
-      map-cache: 0.2.2
-      source-map: 0.5.7
-      source-map-resolve: 0.5.3
-      use: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.1.1
+      is-fullwidth-code-point: 4.0.0
+    dev: true
+
+  /smart-buffer/4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
     dev: true
 
   /sockjs/0.3.24:
@@ -13204,13 +9815,13 @@ packages:
     dependencies:
       agent-base: 6.0.2
       debug: 4.3.4
-      socks: 2.7.1
+      socks: 2.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /socks/2.7.1:
-    resolution: {integrity: sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==}
+  /socks/2.7.0:
+    resolution: {integrity: sha512-scnOe9y4VuiNUULJN72GrM26BNOjVsfPXI+j+98PkyEfsIXroa5ofyjT+FzGvn/xHs73U2JtoBYAVx9Hl4quSA==}
     engines: {node: '>= 10.13.0', npm: '>= 3.0.0'}
     dependencies:
       ip: 2.0.0
@@ -13222,17 +9833,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /source-map-resolve/0.5.3:
-    resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
-    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
-    dependencies:
-      atob: 2.1.2
-      decode-uri-component: 0.2.0
-      resolve-url: 0.2.1
-      source-map-url: 0.4.1
-      urix: 0.1.0
-    dev: true
-
   /source-map-support/0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
     dependencies:
@@ -13247,11 +9847,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /source-map-url/0.4.1:
-    resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
-    deprecated: See https://github.com/lydell/source-map-url#deprecated
-    dev: true
-
   /source-map/0.1.43:
     resolution: {integrity: sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==}
     engines: {node: '>=0.8.0'}
@@ -13271,12 +9866,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /sourcemap-codec/1.4.8:
-    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+  /source-map/0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
     dev: true
 
-  /space-separated-tokens/1.1.5:
-    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+  /sourcemap-codec/1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     dev: true
 
   /spawn-command/0.0.2-1:
@@ -13331,30 +9927,12 @@ packages:
       - supports-color
     dev: true
 
-  /split-on-first/1.1.0:
-    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
-    engines: {node: '>=6'}
-    dev: true
-
-  /split-string/3.1.0:
-    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      extend-shallow: 3.0.2
-    dev: true
-
   /split/0.3.3:
     resolution: {integrity: sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==}
     dependencies:
       through: 2.3.8
     dev: true
 
-  /split/1.0.1:
-    resolution: {integrity: sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==}
-    dependencies:
-      through: 2.3.8
-    dev: true
-
   /split2/3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
     dependencies:
@@ -13385,34 +9963,13 @@ packages:
     resolution: {integrity: sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==}
     dev: true
 
-  /stack-utils/2.0.6:
-    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+  /stack-utils/2.0.5:
+    resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==}
     engines: {node: '>=10'}
     dependencies:
       escape-string-regexp: 2.0.0
     dev: true
 
-  /standard-version/9.5.0:
-    resolution: {integrity: sha512-3zWJ/mmZQsOaO+fOlsa0+QK90pwhNd042qEcw6hKFNoLFs7peGyvPffpEBbK/DSGPbyOvli0mUIFv5A4qTjh2Q==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      chalk: 2.4.2
-      conventional-changelog: 3.1.25
-      conventional-changelog-config-spec: 2.1.0
-      conventional-changelog-conventionalcommits: 4.6.3
-      conventional-recommended-bump: 6.1.0
-      detect-indent: 6.1.0
-      detect-newline: 3.1.0
-      dotgitignore: 2.1.0
-      figures: 3.2.0
-      find-up: 5.0.0
-      git-semver-tags: 4.1.1
-      semver: 7.3.8
-      stringify-package: 1.0.1
-      yargs: 16.2.0
-    dev: true
-
   /start-server-and-test/1.14.0:
     resolution: {integrity: sha512-on5ELuxO2K0t8EmNj9MtVlFqwBMxfWOhu4U7uZD1xccVpFlOQKR93CSe0u98iQzfNxRyaNTb/CdadbNllplTsw==}
     engines: {node: '>=6'}
@@ -13429,18 +9986,6 @@ packages:
       - supports-color
     dev: true
 
-  /state-toggle/1.0.3:
-    resolution: {integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==}
-    dev: true
-
-  /static-extend/0.1.2:
-    resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      define-property: 0.2.5
-      object-copy: 0.1.0
-    dev: true
-
   /statuses/1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
     engines: {node: '>= 0.6'}
@@ -13451,35 +9996,12 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /stream-array/1.1.2:
-    resolution: {integrity: sha512-1yWdVsMEm/btiMa2YyHiC3mDrtAqlmNNaDRylx2F7KHhm3C4tA6kSR2V9mpeMthv+ujvbl8Kamyh5xaHHdFvyQ==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      readable-stream: 2.1.5
-    dev: true
-
   /stream-combiner/0.0.4:
     resolution: {integrity: sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==}
     dependencies:
       duplexer: 0.1.2
     dev: true
 
-  /stream-combiner2/1.1.1:
-    resolution: {integrity: sha512-3PnJbYgS56AeWgtKF5jtJRT6uFJe56Z0Hc5Ngg/6sI6rIt8iiMBTa9cvdyFfpMQjaVHr8dusbNeFGIIonxOvKw==}
-    dependencies:
-      duplexer2: 0.1.4
-      readable-stream: 2.3.7
-    dev: true
-
-  /stream-shift/1.0.1:
-    resolution: {integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==}
-    dev: true
-
-  /strict-uri-encode/2.0.0:
-    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
-    engines: {node: '>=4'}
-    dev: true
-
   /string-argv/0.3.1:
     resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==}
     engines: {node: '>=0.6.19'}
@@ -13493,10 +10015,6 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
-  /string-template/0.2.1:
-    resolution: {integrity: sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==}
-    dev: true
-
   /string-width/4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -13531,20 +10049,6 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /stringify-entities/1.3.2:
-    resolution: {integrity: sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==}
-    dependencies:
-      character-entities-html4: 1.1.4
-      character-entities-legacy: 1.1.4
-      is-alphanumerical: 1.0.4
-      is-hexadecimal: 1.0.4
-    dev: true
-
-  /stringify-package/1.0.1:
-    resolution: {integrity: sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==}
-    deprecated: This module is not used anymore, and has been replaced by @npmcli/package-json
-    dev: true
-
   /strip-ansi/3.0.1:
     resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
     engines: {node: '>=0.10.0'}
@@ -13566,16 +10070,6 @@ packages:
       ansi-regex: 6.0.1
     dev: true
 
-  /strip-bom-string/1.0.0:
-    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /strip-bom/3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: true
-
   /strip-bom/4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
@@ -13603,11 +10097,6 @@ packages:
       min-indent: 1.0.1
     dev: true
 
-  /strip-json-comments/2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /strip-json-comments/3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -13616,19 +10105,13 @@ packages:
   /strip-literal/0.4.2:
     resolution: {integrity: sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==}
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.0
     dev: true
 
   /stylis/4.1.2:
     resolution: {integrity: sha512-Nn2CCrG2ZaFziDxaZPN43CXqn+j7tcdjPFCkRBkFue8QYXC2HdEwnw5TCBo4yQZ2WxKYeSi0fdoOrtEqgDrXbA==}
     dev: false
 
-  /subarg/1.0.0:
-    resolution: {integrity: sha512-RIrIdRY0X1xojthNcVtgT9sjpOGagEUKpZdgBUi054OEPFo282yg+zE+t1Rj3+RqKq2xStL7uUHhY+AjbC4BXg==}
-    dependencies:
-      minimist: 1.2.7
-    dev: true
-
   /supports-color/2.0.0:
     resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
     engines: {node: '>=0.8.0'}
@@ -13641,13 +10124,6 @@ packages:
       has-flag: 3.0.0
     dev: true
 
-  /supports-color/6.1.0:
-    resolution: {integrity: sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==}
-    engines: {node: '>=6'}
-    dependencies:
-      has-flag: 3.0.0
-    dev: true
-
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -13671,21 +10147,6 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
-  /sync-request/6.1.0:
-    resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      http-response-object: 3.0.2
-      sync-rpc: 1.3.6
-      then-request: 6.0.2
-    dev: true
-
-  /sync-rpc/1.3.6:
-    resolution: {integrity: sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==}
-    dependencies:
-      get-port: 3.2.0
-    dev: true
-
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -13715,7 +10176,7 @@ packages:
       uglify-js:
         optional: true
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
       jest-worker: 27.5.1
       schema-utils: 3.1.1
       serialize-javascript: 6.0.0
@@ -13729,7 +10190,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.1
+      acorn: 8.8.0
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -13752,27 +10213,6 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
-  /then-request/6.0.2:
-    resolution: {integrity: sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@types/concat-stream': 1.6.1
-      '@types/form-data': 0.0.33
-      '@types/node': 8.10.66
-      '@types/qs': 6.9.7
-      caseless: 0.12.0
-      concat-stream: 1.6.2
-      form-data: 2.5.1
-      http-basic: 8.1.3
-      http-response-object: 3.0.2
-      promise: 8.3.0
-      qs: 6.11.0
-    dev: true
-
-  /throat/5.0.0:
-    resolution: {integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==}
-    dev: true
-
   /throat/6.0.1:
     resolution: {integrity: sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==}
     dev: true
@@ -13785,20 +10225,6 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
-  /through2-filter/3.0.0:
-    resolution: {integrity: sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==}
-    dependencies:
-      through2: 2.0.5
-      xtend: 4.0.2
-    dev: true
-
-  /through2/2.0.5:
-    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
-    dependencies:
-      readable-stream: 2.3.7
-      xtend: 4.0.2
-    dev: true
-
   /through2/4.0.2:
     resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
     dependencies:
@@ -13809,28 +10235,10 @@ packages:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
     dev: true
 
-  /tiny-lr/1.1.1:
-    resolution: {integrity: sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==}
-    dependencies:
-      body: 5.1.0
-      debug: 3.2.7
-      faye-websocket: 0.10.0
-      livereload-js: 2.4.0
-      object-assign: 4.1.1
-      qs: 6.11.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /tinybench/2.3.1:
     resolution: {integrity: sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==}
     dev: true
 
-  /tinypool/0.2.4:
-    resolution: {integrity: sha512-Vs3rhkUH6Qq1t5bqtb816oT+HeJTXfwt2cbPH17sWHIYKTotQIFPk3tf2fgqRrVyMDVOc1EnPgzIxfIulXVzwQ==}
-    engines: {node: '>=14.0.0'}
-    dev: true
-
   /tinypool/0.3.0:
     resolution: {integrity: sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==}
     engines: {node: '>=14.0.0'}
@@ -13852,34 +10260,11 @@ packages:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
     dev: true
 
-  /to-absolute-glob/2.0.2:
-    resolution: {integrity: sha512-rtwLUQEwT8ZeKQbyFJyomBRYXyE16U5VKuy0ftxLMK/PZb2fkOsg5r9kHdauuVDbsNdIBoC/HCthpidamQFXYA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-absolute: 1.0.0
-      is-negated-glob: 1.0.0
-    dev: true
-
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
     dev: true
 
-  /to-object-path/0.3.0:
-    resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      kind-of: 3.2.2
-    dev: true
-
-  /to-regex-range/2.1.1:
-    resolution: {integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-number: 3.0.0
-      repeat-string: 1.6.1
-    dev: true
-
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -13887,23 +10272,6 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /to-regex/3.0.2:
-    resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      define-property: 2.0.2
-      extend-shallow: 3.0.2
-      regex-not: 1.0.2
-      safe-regex: 1.1.0
-    dev: true
-
-  /to-through/2.0.0:
-    resolution: {integrity: sha512-+QIz37Ly7acM4EMdw2PRN389OneM5+d844tirkGp4dPKzI5OE72V9OsbFp+CIYJDahZ41ZV05hNtcPAQUAm9/Q==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      through2: 2.0.5
-    dev: true
-
   /toidentifier/1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -13948,63 +10316,16 @@ packages:
     hasBin: true
     dev: true
 
-  /trim-lines/1.1.3:
-    resolution: {integrity: sha512-E0ZosSWYK2mkSu+KEtQ9/KqarVjA9HztOSX+9FDdNacRAq29RRV6ZQNgob3iuW8Htar9vAfEa6yyt5qBAHZDBA==}
-    dev: true
-
   /trim-newlines/3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
     dev: true
 
-  /trim-trailing-lines/1.1.4:
-    resolution: {integrity: sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==}
-    dev: true
-
-  /trim/0.0.1:
-    resolution: {integrity: sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==}
-    dev: true
-
-  /trough/1.0.5:
-    resolution: {integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==}
-    dev: true
-
   /trough/2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
     dev: true
 
   /ts-node/10.9.1_cbe7ovvae6zqfnmtgctpgpys54:
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.3
-      '@types/node': 18.11.9
-      acorn: 8.8.1
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 4.8.4
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
-
-  /ts-node/10.9.1_h6wsvvmh4l7tb54yk3ecr4mgtm:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -14030,7 +10351,7 @@ packages:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.8.3
+      typescript: 4.8.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
@@ -14066,37 +10387,6 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /ts-node/10.9.1_yodorn5kzjgomblrsstrk2spaa:
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.3
-      '@types/node': 14.18.33
-      acorn: 8.8.0
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 4.8.4
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
-
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
@@ -14105,20 +10395,6 @@ packages:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
-  /tslib/2.4.1:
-    resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
-    dev: true
-
-  /tsutils/3.21.0_typescript@4.8.3:
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-    dependencies:
-      tslib: 1.14.1
-      typescript: 4.8.3
-    dev: true
-
   /tsutils/3.21.0_typescript@4.8.4:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -14135,11 +10411,6 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /tunnel/0.0.6:
-    resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
-    engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
-    dev: true
-
   /tweetnacl/0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
     dev: true
@@ -14196,75 +10467,55 @@ packages:
       mime-types: 2.1.35
     dev: true
 
-  /typedarray/0.0.6:
-    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+  /typedarray-to-buffer/3.1.5:
+    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
+    dependencies:
+      is-typedarray: 1.0.0
     dev: true
 
-  /typedarray/0.0.7:
-    resolution: {integrity: sha512-ueeb9YybpjhivjbHP2LdFDAjbS948fGEPj+ACAMs4xCMmh72OCOMQWBQKlaN4ZNQ04yfLSDLSx1tGRIoWimObQ==}
+  /typedoc-plugin-markdown/3.13.6_typedoc@0.23.18:
+    resolution: {integrity: sha512-ISSc9v3BK7HkokxSBuJPttXox4tJ6hP0N9wfSIk0fmLN67+eqtAxbk97gs2nDiuha+RTO5eW9gdeAb+RPP0mgg==}
+    peerDependencies:
+      typedoc: '>=0.23.0'
+    dependencies:
+      handlebars: 4.7.7
+      typedoc: 0.23.18_typescript@4.8.4
     dev: true
 
-  /typescript/4.8.3:
-    resolution: {integrity: sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==}
-    engines: {node: '>=4.2.0'}
+  /typedoc/0.23.18_typescript@4.8.4:
+    resolution: {integrity: sha512-0Tq/uFkUuWyRYyjOShTkhsOm6u5E8wf0i6L76/k5znEaxvWKHGeT2ywZThGrDrryV/skO/REM824D1gm8ccQuA==}
+    engines: {node: '>= 14.14'}
     hasBin: true
+    peerDependencies:
+      typescript: 4.6.x || 4.7.x || 4.8.x
+    dependencies:
+      lunr: 2.3.9
+      marked: 4.1.1
+      minimatch: 5.1.0
+      shiki: 0.11.1
+      typescript: 4.8.4
     dev: true
 
   /typescript/4.8.4:
     resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
-    engines: {node: '>=4.2.0'}
-    hasBin: true
-    dev: true
-
-  /uc.micro/1.0.6:
-    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
-    dev: true
-
-  /uglify-js/3.17.4:
-    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /unc-path-regex/0.1.2:
-    resolution: {integrity: sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /underscore/1.1.7:
-    resolution: {integrity: sha512-w4QtCHoLBXw1mjofIDoMyexaEdWGMedWNDhlWTtT1V1lCRqi65Pnoygkh6+WRdr+Bm8ldkBNkNeCsXGMlQS9HQ==}
-    dev: true
-
-  /unherit/1.1.3:
-    resolution: {integrity: sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==}
-    dependencies:
-      inherits: 2.0.4
-      xtend: 4.0.2
-    dev: true
-
-  /unicode-canonical-property-names-ecmascript/2.0.0:
-    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
-    engines: {node: '>=4'}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
     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
+  /uc.micro/1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
     dev: true
 
-  /unicode-match-property-value-ecmascript/2.0.0:
-    resolution: {integrity: sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==}
-    engines: {node: '>=4'}
+  /uglify-js/3.17.3:
+    resolution: {integrity: sha512-JmMFDME3iufZnBpyKL+uS78LRiC+mK55zWfM5f/pWBJfpOttXAqYfdDGRukYhJuyRinvPVAtUhvy7rlDybNtFg==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+    requiresBuild: true
     dev: true
+    optional: true
 
-  /unicode-property-aliases-ecmascript/2.1.0:
-    resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
-    engines: {node: '>=4'}
+  /underscore/1.1.7:
+    resolution: {integrity: sha512-w4QtCHoLBXw1mjofIDoMyexaEdWGMedWNDhlWTtT1V1lCRqi65Pnoygkh6+WRdr+Bm8ldkBNkNeCsXGMlQS9HQ==}
     dev: true
 
   /unified/10.1.2:
@@ -14279,75 +10530,21 @@ packages:
       vfile: 5.3.5
     dev: true
 
-  /unified/6.2.0:
-    resolution: {integrity: sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==}
-    dependencies:
-      '@types/unist': 2.0.6
-      bail: 1.0.5
-      extend: 3.0.2
-      is-plain-obj: 1.1.0
-      trough: 1.0.5
-      vfile: 2.3.0
-      x-is-string: 0.1.0
-    dev: true
-
-  /union-value/1.0.1:
-    resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      arr-union: 3.1.0
-      get-value: 2.0.6
-      is-extendable: 0.1.1
-      set-value: 2.0.1
-    dev: true
-
-  /unique-stream/2.3.1:
-    resolution: {integrity: sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==}
-    dependencies:
-      json-stable-stringify-without-jsonify: 1.0.1
-      through2-filter: 3.0.0
-    dev: true
-
-  /unist-builder/1.0.4:
-    resolution: {integrity: sha512-v6xbUPP7ILrT15fHGrNyHc1Xda8H3xVhP7/HAIotHOhVPjH5dCXA097C3Rry1Q2O+HbOLCao4hfPB+EYEjHgVg==}
+  /unique-string/2.0.0:
+    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
+    engines: {node: '>=8'}
     dependencies:
-      object-assign: 4.1.1
+      crypto-random-string: 2.0.0
     dev: true
 
   /unist-util-flatmap/1.0.0:
     resolution: {integrity: sha512-IG32jcKJlhARCYT2LsYPJWdoXYkzz3ESAdl1aa2hn9Auh+cgUmU6wgkII4yCc/1GgeWibRdELdCZh/p3QKQ1dQ==}
     dev: true
 
-  /unist-util-generated/1.1.6:
-    resolution: {integrity: sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==}
-    dev: true
-
-  /unist-util-is/2.1.3:
-    resolution: {integrity: sha512-4WbQX2iwfr/+PfM4U3zd2VNXY+dWtZsN1fLnWEi2QQXA4qyDYAZcDMfXUX0Cu6XZUHHAO9q4nyxxLT4Awk1qUA==}
-    dev: true
-
-  /unist-util-is/3.0.0:
-    resolution: {integrity: sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==}
-    dev: true
-
   /unist-util-is/5.1.1:
     resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
     dev: true
 
-  /unist-util-position/3.1.0:
-    resolution: {integrity: sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==}
-    dev: true
-
-  /unist-util-remove-position/1.1.4:
-    resolution: {integrity: sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==}
-    dependencies:
-      unist-util-visit: 1.4.1
-    dev: true
-
-  /unist-util-stringify-position/1.1.2:
-    resolution: {integrity: sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==}
-    dev: true
-
   /unist-util-stringify-position/2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
@@ -14360,12 +10557,6 @@ packages:
       '@types/unist': 2.0.6
     dev: true
 
-  /unist-util-visit-parents/2.1.2:
-    resolution: {integrity: sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==}
-    dependencies:
-      unist-util-is: 3.0.0
-    dev: true
-
   /unist-util-visit-parents/5.1.1:
     resolution: {integrity: sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==}
     dependencies:
@@ -14373,12 +10564,6 @@ packages:
       unist-util-is: 5.1.1
     dev: true
 
-  /unist-util-visit/1.4.1:
-    resolution: {integrity: sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==}
-    dependencies:
-      unist-util-visit-parents: 2.1.2
-    dev: true
-
   /unist-util-visit/4.1.1:
     resolution: {integrity: sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==}
     dependencies:
@@ -14407,14 +10592,6 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /unset-value/1.0.0:
-    resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      has-value: 0.3.1
-      isobject: 3.0.1
-    dev: true
-
   /untildify/4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
@@ -14437,11 +10614,6 @@ packages:
       punycode: 2.1.1
     dev: true
 
-  /urix/0.1.0:
-    resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
-    deprecated: Please see https://github.com/lydell/urix#deprecated
-    dev: true
-
   /url-parse/1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
     dependencies:
@@ -14449,11 +10621,6 @@ packages:
       requires-port: 1.0.0
     dev: true
 
-  /use/3.1.1:
-    resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
@@ -14498,9 +10665,9 @@ packages:
     resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
     engines: {node: '>=10.12.0'}
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.15
       '@types/istanbul-lib-coverage': 2.0.4
-      convert-source-map: 1.9.0
+      convert-source-map: 1.8.0
     dev: true
 
   /validate-npm-package-license/3.0.4:
@@ -14510,11 +10677,6 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /value-or-function/3.0.0:
-    resolution: {integrity: sha512-jdBB2FrWvQC/pnPtIqcLsMaQgjhdb6B7tk1MMyTKapox+tQZbdRP4uLxu/JY0t7fbfDCUMnuelzEYv5GsxHhdg==}
-    engines: {node: '>= 0.10'}
-    dev: true
-
   /vary/1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -14529,23 +10691,6 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
-  /vfile-location/2.0.6:
-    resolution: {integrity: sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==}
-    dev: true
-
-  /vfile-message/1.1.1:
-    resolution: {integrity: sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==}
-    dependencies:
-      unist-util-stringify-position: 1.1.2
-    dev: true
-
-  /vfile-message/2.0.4:
-    resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==}
-    dependencies:
-      '@types/unist': 2.0.6
-      unist-util-stringify-position: 2.0.3
-    dev: true
-
   /vfile-message/3.1.2:
     resolution: {integrity: sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==}
     dependencies:
@@ -14553,43 +10698,6 @@ packages:
       unist-util-stringify-position: 3.0.2
     dev: true
 
-  /vfile-reporter/6.0.2:
-    resolution: {integrity: sha512-GN2bH2gs4eLnw/4jPSgfBjo+XCuvnX9elHICJZjVD4+NM0nsUrMTvdjGY5Sc/XG69XVTgLwj7hknQVc6M9FukA==}
-    dependencies:
-      repeat-string: 1.6.1
-      string-width: 4.2.3
-      supports-color: 6.1.0
-      unist-util-stringify-position: 2.0.3
-      vfile-sort: 2.2.2
-      vfile-statistics: 1.1.4
-    dev: true
-
-  /vfile-sort/2.2.2:
-    resolution: {integrity: sha512-tAyUqD2R1l/7Rn7ixdGkhXLD3zsg+XLAeUDUhXearjfIcpL1Hcsj5hHpCoy/gvfK/Ws61+e972fm0F7up7hfYA==}
-    dev: true
-
-  /vfile-statistics/1.1.4:
-    resolution: {integrity: sha512-lXhElVO0Rq3frgPvFBwahmed3X03vjPF8OcjKMy8+F1xU/3Q3QU3tKEDp743SFtb74PdF0UWpxPvtOP0GCLheA==}
-    dev: true
-
-  /vfile/2.3.0:
-    resolution: {integrity: sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==}
-    dependencies:
-      is-buffer: 1.1.6
-      replace-ext: 1.0.0
-      unist-util-stringify-position: 1.1.2
-      vfile-message: 1.1.1
-    dev: true
-
-  /vfile/4.2.1:
-    resolution: {integrity: sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==}
-    dependencies:
-      '@types/unist': 2.0.6
-      is-buffer: 2.0.5
-      unist-util-stringify-position: 2.0.3
-      vfile-message: 2.0.4
-    dev: true
-
   /vfile/5.3.5:
     resolution: {integrity: sha512-U1ho2ga33eZ8y8pkbQLH54uKqGhFJ6GYIHnnG5AhRpAh3OWjkrRHKa/KogbmQn8We+c0KVV3rTOgR9V/WowbXQ==}
     dependencies:
@@ -14599,82 +10707,37 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vinyl-fs/3.0.3:
-    resolution: {integrity: sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      fs-mkdirp-stream: 1.0.0
-      glob-stream: 6.1.0
-      graceful-fs: 4.2.10
-      is-valid-glob: 1.0.0
-      lazystream: 1.0.1
-      lead: 1.0.0
-      object.assign: 4.1.4
-      pumpify: 1.5.1
-      readable-stream: 2.3.7
-      remove-bom-buffer: 3.0.0
-      remove-bom-stream: 1.2.0
-      resolve-options: 1.1.0
-      through2: 2.0.5
-      to-through: 2.0.0
-      value-or-function: 3.0.0
-      vinyl: 2.2.1
-      vinyl-sourcemap: 1.1.0
-    dev: true
-
-  /vinyl-sourcemap/1.1.0:
-    resolution: {integrity: sha512-NiibMgt6VJGJmyw7vtzhctDcfKch4e4n9TBeoWlirb7FMg9/1Ov9k+A5ZRAtywBpRPiyECvQRQllYM8dECegVA==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      append-buffer: 1.0.2
-      convert-source-map: 1.9.0
-      graceful-fs: 4.2.10
-      normalize-path: 2.1.1
-      now-and-later: 2.0.1
-      remove-bom-buffer: 3.0.0
-      vinyl: 2.2.1
-    dev: true
-
-  /vinyl/2.2.1:
-    resolution: {integrity: sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      clone: 2.1.2
-      clone-buffer: 1.0.0
-      clone-stats: 1.0.0
-      cloneable-readable: 1.1.3
-      remove-trailing-separator: 1.1.0
-      replace-ext: 1.0.1
-    dev: true
-
-  /vite-plugin-md/0.20.4_2vrekto2ma5pf5j2eoe6xabo24:
-    resolution: {integrity: sha512-W3Z59/ROS2X6OIwPwV2PjE+QkfW0UVGxyf3Z2JR0OLqGJ+Iy2SGA503m/vmATJv+C3DjeU8Oy8diQx1R+IyRwQ==}
+  /vite/3.2.3:
+    resolution: {integrity: sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
     peerDependencies:
-      '@rollup/pluginutils': ^4.2.1
-      rollup: ^2.77.0
+      '@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:
-      '@rollup/pluginutils': 4.2.1
-      '@yankeeinlondon/builder-api': 0.4.1_7jcwyn4sobzthx4ft3nhqn7kdm
-      '@yankeeinlondon/happy-wrapper': 2.8.0_upgr4zu6lczg6poy6g2njng6vm
-      gray-matter: 4.0.3
-      markdown-it: 13.0.1
+      esbuild: 0.15.13
+      postcss: 8.4.18
+      resolve: 1.22.1
       rollup: 2.79.1
-      source-map-js: 1.0.2
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - encoding
-      - fp-ts
-      - inferred-types
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
+    optionalDependencies:
+      fsevents: 2.3.2
     dev: true
 
   /vite/3.2.3_@types+node@18.11.9:
@@ -14711,19 +10774,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress-plugin-mermaid/2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe:
-    resolution: {integrity: sha512-ywWxTeg9kMv7ZPf/igCBF4ZHhWZAyRtbPnA12ICQuNK2AMp7r5IHOfnuX1EJQf8gNdsh8bcvvSvm8Ll92fdOTw==}
-    peerDependencies:
-      mermaid: ^8.0.0 || ^9.0.0
-      vite-plugin-md: ^0.20.4
-      vitepress: ^0.21.6 || ^1.0.0 || ^1.0.0-alpha
-    dependencies:
-      mermaid: link:packages/mermaid
-      vite-plugin-md: 0.20.4_2vrekto2ma5pf5j2eoe6xabo24
-      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-    dev: true
-
-  /vitepress-plugin-search/1.0.4-alpha.15_pb3anlaclwt5smse4ujf447uy4:
+  /vitepress-plugin-search/1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54:
     resolution: {integrity: sha512-Ef/VkhTVYlECVI0H9Ck6745UNPfYFppAqnlxVSMJXdxP2vjOZ5TYNczlTTQ2p9dh16MFw/IurbL1/GrG4nXdNw==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
     peerDependencies:
@@ -14736,24 +10787,24 @@ packages:
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.31
       markdown-it: 13.0.1
-      vite: 3.2.3_@types+node@18.11.9
-      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-      vue: 3.2.44
+      vite: 3.2.3
+      vitepress: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
+      vue: 3.2.41
     dev: true
 
-  /vitepress/1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi:
+  /vitepress/1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y:
     resolution: {integrity: sha512-pvbLssDMgLUN1terajmPlFBxHSDGO4DqwexKbjFyr7LeELerVuwGrG6F2J1hxmwOlbpLd1kHXEDqGm9JX/kTDQ==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.0
       '@docsearch/js': 3.3.0_tbpndr44ulefs3hehwpi2mkf2y
-      '@vitejs/plugin-vue': 3.2.0_vite@3.2.3+vue@3.2.44
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.3+vue@3.2.41
       '@vue/devtools-api': 6.4.5
-      '@vueuse/core': 9.5.0_vue@3.2.44
+      '@vueuse/core': 9.4.0_vue@3.2.41
       body-scroll-lock: 4.0.0-beta.0
       shiki: 0.11.1
-      vite: 3.2.3_@types+node@18.11.9
-      vue: 3.2.44
+      vite: 3.2.3
+      vue: 3.2.41
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -14768,61 +10819,14 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.19.1_ddphrhne6j5wyjvrgarb33hoge:
-    resolution: {integrity: sha512-E/ZXpFMUahn731wzhMBNzWRp4mGgiZFT0xdHa32cbNO0CSaHpE9hTfteEU247Gi2Dula8uXo5vvrNB6dtszmQA==}
-    engines: {node: '>=v14.16.0'}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
-      c8: '*'
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      c8:
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.4
-      '@types/chai-subset': 1.3.3
-      '@types/node': 18.11.9
-      '@vitest/ui': 0.23.4
-      chai: 4.3.7
-      debug: 4.3.4
-      happy-dom: 7.6.7
-      jsdom: 20.0.2
-      local-pkg: 0.4.2
-      tinypool: 0.2.4
-      tinyspy: 1.0.2
-      vite: 3.2.3_@types+node@18.11.9
-    transitivePeerDependencies:
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /vitest/0.19.1_upgr4zu6lczg6poy6g2njng6vm:
-    resolution: {integrity: sha512-E/ZXpFMUahn731wzhMBNzWRp4mGgiZFT0xdHa32cbNO0CSaHpE9hTfteEU247Gi2Dula8uXo5vvrNB6dtszmQA==}
+  /vitest/0.25.1_oullksb5ic6y72oh2wekoaiuii:
+    resolution: {integrity: sha512-eH74h6MkuEgsqR4mAQZeMK9O0PROiKY+i+1GMz/fBi5A3L2ml5U7JQs7LfPU7+uWUziZyLHagl+rkyfR8SLhlA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@vitest/browser': '*'
       '@vitest/ui': '*'
-      c8: '*'
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -14832,22 +10836,25 @@ packages:
         optional: true
       '@vitest/ui':
         optional: true
-      c8:
-        optional: true
       happy-dom:
         optional: true
       jsdom:
         optional: true
     dependencies:
-      '@types/chai': 4.3.4
+      '@types/chai': 4.3.3
       '@types/chai-subset': 1.3.3
       '@types/node': 18.11.9
-      '@vitest/ui': 0.23.4
-      chai: 4.3.7
+      '@vitest/ui': 0.25.1
+      acorn: 8.8.0
+      acorn-walk: 8.2.0
+      chai: 4.3.6
       debug: 4.3.4
       jsdom: 20.0.2
       local-pkg: 0.4.2
-      tinypool: 0.2.4
+      source-map: 0.6.1
+      strip-literal: 0.4.2
+      tinybench: 2.3.1
+      tinypool: 0.3.0
       tinyspy: 1.0.2
       vite: 3.2.3_@types+node@18.11.9
     transitivePeerDependencies:
@@ -14859,8 +10866,8 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.23.4_upgr4zu6lczg6poy6g2njng6vm:
-    resolution: {integrity: sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==}
+  /vitest/0.25.3_oullksb5ic6y72oh2wekoaiuii:
+    resolution: {integrity: sha512-/UzHfXIKsELZhL7OaM2xFlRF8HRZgAHtPctacvNK8H4vOcbJJAMEgbWNGSAK7Y9b1NBe5SeM7VTuz2RsTHFJJA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
@@ -14881,14 +10888,17 @@ packages:
       jsdom:
         optional: true
     dependencies:
-      '@types/chai': 4.3.4
+      '@types/chai': 4.3.3
       '@types/chai-subset': 1.3.3
       '@types/node': 18.11.9
-      '@vitest/ui': 0.23.4
-      chai: 4.3.7
+      '@vitest/ui': 0.25.1
+      acorn: 8.8.0
+      acorn-walk: 8.2.0
+      chai: 4.3.6
       debug: 4.3.4
       jsdom: 20.0.2
       local-pkg: 0.4.2
+      source-map: 0.6.1
       strip-literal: 0.4.2
       tinybench: 2.3.1
       tinypool: 0.3.0
@@ -14908,7 +10918,7 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.0
       acorn-walk: 8.2.0
     dev: true
 
@@ -14946,7 +10956,7 @@ packages:
     resolution: {integrity: sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==}
     dev: true
 
-  /vue-demi/0.13.11_vue@3.2.44:
+  /vue-demi/0.13.11_vue@3.2.41:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
     hasBin: true
@@ -14958,24 +10968,17 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.2.44
-    dev: true
-
-  /vue-template-compiler/2.7.14:
-    resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
-    dependencies:
-      de-indent: 1.0.2
-      he: 1.2.0
+      vue: 3.2.41
     dev: true
 
-  /vue/3.2.44:
-    resolution: {integrity: sha512-nyNtFDh+0TpRgYCUVfPD1mJ9PpIsCPXaOF4DeGNIT5vQ4X23ykflGq3Sy2P+tEt1/pQZxZnAysuRKwyhNj+Cjw==}
+  /vue/3.2.41:
+    resolution: {integrity: sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==}
     dependencies:
-      '@vue/compiler-dom': 3.2.44
-      '@vue/compiler-sfc': 3.2.44
-      '@vue/runtime-dom': 3.2.44
-      '@vue/server-renderer': 3.2.44_vue@3.2.44
-      '@vue/shared': 3.2.44
+      '@vue/compiler-dom': 3.2.41
+      '@vue/compiler-sfc': 3.2.41
+      '@vue/runtime-dom': 3.2.41
+      '@vue/server-renderer': 3.2.41_vue@3.2.41
+      '@vue/shared': 3.2.41
     dev: true
 
   /w3c-hr-time/1.0.2:
@@ -14998,10 +11001,10 @@ packages:
     hasBin: true
     dependencies:
       axios: 0.21.4_debug@4.3.2
-      joi: 17.7.0
+      joi: 17.6.0
       lodash: 4.17.21
-      minimist: 1.2.7
-      rxjs: 7.5.7
+      minimist: 1.2.6
+      rxjs: 7.5.6
     transitivePeerDependencies:
       - debug
     dev: true
@@ -15030,7 +11033,7 @@ packages:
     resolution: {integrity: sha512-6nBOXae4xuBH4Nqvi/zvtwjnxSLTONBpxOiRJtQ68CYTYv5+w3m8CsaWy3HbK/0XXa++NYl62bDNn70OGEKb+Q==}
     engines: {node: '>=12.0.0'}
     dependencies:
-      '@types/node': 16.18.3
+      '@types/node': 16.11.59
       '@wdio/config': 7.16.11
       '@wdio/logger': 7.16.0
       '@wdio/protocols': 7.16.7
@@ -15093,7 +11096,7 @@ packages:
       webpack: ^4.0.0 || ^5.0.0
     dependencies:
       colorette: 2.0.19
-      memfs: 3.4.10
+      memfs: 3.4.11
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.0.0
@@ -15141,7 +11144,7 @@ packages:
       webpack: 5.75.0_webpack-cli@4.10.0
       webpack-cli: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
       webpack-dev-middleware: 5.3.3_webpack@5.75.0
-      ws: 8.11.0
+      ws: 8.9.0
     transitivePeerDependencies:
       - bufferutil
       - debug
@@ -15177,8 +11180,8 @@ packages:
       '@webassemblyjs/ast': 1.11.1
       '@webassemblyjs/wasm-edit': 1.11.1
       '@webassemblyjs/wasm-parser': 1.11.1
-      acorn: 8.8.1
-      acorn-import-assertions: 1.8.0_acorn@8.8.1
+      acorn: 8.8.0
+      acorn-import-assertions: 1.8.0_acorn@8.8.0
       browserslist: 4.21.4
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.10.0
@@ -15224,10 +11227,6 @@ packages:
       iconv-lite: 0.6.3
     dev: true
 
-  /whatwg-fetch/3.6.2:
-    resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
-    dev: true
-
   /whatwg-mimetype/3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
@@ -15256,10 +11255,6 @@ packages:
       webidl-conversions: 3.0.1
     dev: true
 
-  /which-module/2.0.0:
-    resolution: {integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==}
-    dev: true
-
   /which/1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
@@ -15310,6 +11305,15 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /write-file-atomic/3.0.3:
+    resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}
+    dependencies:
+      imurmurhash: 0.1.4
+      is-typedarray: 1.0.0
+      signal-exit: 3.0.7
+      typedarray-to-buffer: 3.1.5
+    dev: true
+
   /write-file-atomic/4.0.2:
     resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -15331,19 +11335,6 @@ packages:
         optional: true
     dev: true
 
-  /ws/8.11.0:
-    resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-    dev: true
-
   /ws/8.5.0:
     resolution: {integrity: sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==}
     engines: {node: '>=10.0.0'}
@@ -15357,8 +11348,8 @@ packages:
         optional: true
     dev: true
 
-  /ws/8.8.1:
-    resolution: {integrity: sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==}
+  /ws/8.9.0:
+    resolution: {integrity: sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -15370,8 +11361,9 @@ packages:
         optional: true
     dev: true
 
-  /x-is-string/0.1.0:
-    resolution: {integrity: sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==}
+  /xdg-basedir/4.0.0:
+    resolution: {integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==}
+    engines: {node: '>=8'}
     dev: true
 
   /xml-name-validator/4.0.0:
@@ -15392,15 +11384,6 @@ packages:
     resolution: {integrity: sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA==}
     dev: true
 
-  /xtend/4.0.2:
-    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
-    engines: {node: '>=0.4'}
-    dev: true
-
-  /y18n/4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-    dev: true
-
   /y18n/5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -15419,19 +11402,11 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /yaml/2.1.3:
-    resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
+  /yaml/2.1.1:
+    resolution: {integrity: sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==}
     engines: {node: '>= 14'}
     dev: true
 
-  /yargs-parser/18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-    dev: true
-
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
@@ -15442,23 +11417,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /yargs/15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.0
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-    dev: true
-
   /yargs/16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
     engines: {node: '>=10'}
@@ -15498,19 +11456,6 @@ packages:
       yargs-parser: 21.1.1
     dev: true
 
-  /yargs/17.6.2:
-    resolution: {integrity: sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==}
-    engines: {node: '>=12'}
-    dependencies:
-      cliui: 8.0.1
-      escalade: 3.1.1
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      string-width: 4.2.3
-      y18n: 5.0.8
-      yargs-parser: 21.1.1
-    dev: true
-
   /yauzl/2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
     dependencies:
diff --git a/renovate.json b/renovate.json
index 1413a3cea1..548f5b5be5 100644
--- a/renovate.json
+++ b/renovate.json
@@ -12,7 +12,7 @@
   ],
   "packageRules": [
     {
-      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
+      "matchUpdateTypes": ["minor", "patch", "digest"],
       "automerge": true
     }
   ],
diff --git a/scripts/fixCSpell.ts b/scripts/fixCSpell.ts
new file mode 100644
index 0000000000..1d15e21940
--- /dev/null
+++ b/scripts/fixCSpell.ts
@@ -0,0 +1,24 @@
+/**
+ * Sorts all the `words` in the cSpell.json file.
+ *
+ * Run from the same folder as the `cSpell.json` file
+ * (i.e. the root of the Mermaid project).
+ */
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import prettier from 'prettier';
+
+const filepath = './cSpell.json';
+const cSpell: { words: string[] } = JSON.parse(readFileSync(filepath, 'utf8'));
+
+cSpell.words = [...new Set(cSpell.words.map((word) => word.toLowerCase()))];
+cSpell.words.sort((a, b) => a.localeCompare(b));
+
+const prettierConfig = prettier.resolveConfig.sync(filepath) ?? {};
+writeFileSync(
+  filepath,
+  prettier.format(JSON.stringify(cSpell), {
+    ...prettierConfig,
+    filepath,
+  })
+);
diff --git a/scripts/fixPnpmLock.sh b/scripts/fixPnpmLock.sh
deleted file mode 100755
index eab1541291..0000000000
--- a/scripts/fixPnpmLock.sh
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/usr/bin/env bash
-sed "/mermaid: ''/d" pnpm-lock.yaml > temp.yaml; 
-mv temp.yaml pnpm-lock.yaml
\ No newline at end of file
diff --git a/scripts/jison/lint.mts b/scripts/jison/lint.mts
index e834a8e4ff..c410d59997 100644
--- a/scripts/jison/lint.mts
+++ b/scripts/jison/lint.mts
@@ -28,7 +28,7 @@ const lint = async (file: string): Promise => {
     dot: true,
   });
   const lintResults = await Promise.all(jisonFiles.map(lint));
-  if (lintResults.some((result) => result === false)) {
+  if (lintResults.includes(false)) {
     process.exit(1);
   }
 })();
diff --git a/vdocs/.vitepress/mermaid-markdown-all.ts b/vdocs/.vitepress/mermaid-markdown-all.ts
deleted file mode 100644
index fb699e27fa..0000000000
--- a/vdocs/.vitepress/mermaid-markdown-all.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
-import shiki from 'shiki';
-
-export default {
-  config: async (md) => {
-    MermaidMarkdown(md);
-    const fence = md.renderer.rules.fence.bind(md.renderer.rules);
-
-    const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
-
-    md.renderer.rules.fence = (tokens, index, options, env, slf) => {
-      const token = tokens[index];
-
-      if (token.info.trim() === 'mermaid-example') {
-        let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
-        code = code.replace('#2e3440ff', 'transparent');
-        code = code.replace('#292D3E', 'transparent');
-        code =
-          '
Code:
' +
-          '
mermaid' +
-          code +
-          '
';
-
-        // return code;
-        return `${code}
-          
Render:

-          `;
-      }
-      return fence(tokens, index, options, env, slf);
-    };
-  },
-};
diff --git a/vdocs/.vitepress/theme/custom.css b/vdocs/.vitepress/theme/custom.css
deleted file mode 100644
index a158d7e6d3..0000000000
--- a/vdocs/.vitepress/theme/custom.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Use this file to add custom css */
-
-/* TODO: Remove after vitepress-plugin-search next release */
-.search-item-icon {
-  font-family: none;
-}
diff --git a/vdocs/.vitepress/theme/index.ts b/vdocs/.vitepress/theme/index.ts
deleted file mode 100644
index 7093a1643d..0000000000
--- a/vdocs/.vitepress/theme/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import DefaultTheme from 'vitepress/theme';
-import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
-import './custom.css';
-
-export default {
-  ...DefaultTheme,
-  enhanceApp({ app }) {
-    // register global components
-    app.component('Mermaid', Mermaid);
-  },
-};
diff --git a/vdocs/community/CHANGELOG.md b/vdocs/community/CHANGELOG.md
deleted file mode 100644
index 7a75ad4e28..0000000000
--- a/vdocs/community/CHANGELOG.md
+++ /dev/null
@@ -1,1024 +0,0 @@
-# Change Log
-
-All changes are in descending order, beginning with the newest (latest) version.
-
-## Unreleased
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/8.7.0...HEAD)
-
-## 8.7.0 (2020-08-09)
-
-🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
-📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
-
-This version brings with it a system for [dynamic and integrated configuration of the diagram themes](../config/theming.md).
-The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
-
-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
-
-**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**
-
-### Site-wide Themes
-
-Site-wide themes are still declared via `initialize` by site owners.
-
-Example of `Initalize` call setting `theme` to `base`:
-
-```javascript
-mermaidAPI.initialize({
-  securityLevel: 'loose',
-  theme: 'base',
-});
-```
-
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
-
-### Themes at the Local or Current Level
-
-When Generating a diagram using on a webpage that supports mermaid.
-It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
-
-**Following is an example:**
-
-```mmd
-%%{init: {'theme':'base'}}%%
-  graph TD
-    a --> b
-```
-
-### Making a Custom Theme with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-
-```mmd
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**Notes:**
-Leaving it empty will set all variable values to default.
-
-## 8.6.0 (2020-07-13)
-
-🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.6.0)
-
-[Version 8.6.0](../getting-started/8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
-
-**With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.**
-
-Directives allow for a diagram specific overriding of config, as it has been discussed in Configurations.
-This allows site users to input modifications to config alongside diagram definitions, when creating diagrams on a private webpage that supports Mermaid.
-
-## 8.5.0 (2020-04-11)
-
-🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/untagged-31c93788afe260d914bb)
-
-This version introduces New diagrams!
-
-**New diagrams in 8.5**
-
-With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.
-
-![Image showing the new ER diagram type](./img/er.png)
-
-## 8.2.0 (2019-07-17)
-
-🏷️ [Tag](https://github.com/mermaid-js/mermaid/tree/8.2.0)
-
-Version 8.2.0, introduces a security improvement.
-
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality.
-This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.
-
-### securityLevel
-
-| Parameter     | Description                       | Type   | Required | Values                    |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
-| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
-
-**Notes:**
-
-- **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
-
-⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
-
-If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
-By doing this clicks and tags are again allowed.
-
-### To change `securityLevel` with `mermaidAPI.initialize`:
-
-```javascript
-mermaidAPI.initialize({
-  securityLevel: 'loose',
-});
-```
-
-**Closed issues:**
-
-- please add tag for 8.0.0 release [\#863](https://github.com/knsv/mermaid/issues/863)
-- classDiagram breaks on any edit [\#858](https://github.com/knsv/mermaid/issues/858)
-
-## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.5...8.1.0)
-
-**Implemented enhancements:**
-
-- Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301)
-- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269)
-- Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169)
-
-**Fixed bugs:**
-
-- mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328)
-- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268)
-
-**Closed issues:**
-
-- Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
-- margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
-- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
-- unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
-- Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
-- SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
-- Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
-- FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
-- Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
-- Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
-- gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
-- Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
-- Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
-- Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
-- Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
-- How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
-- Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
-- `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
-- Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
-- \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
-- Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
-- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
-- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
-- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
-- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
-- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
-- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
-- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
-- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
-- Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
-- Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
-- Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
-- Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
-- mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
-- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
-- how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
-- Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
-- Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
-- The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
-- Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
-- Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
-- Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
-- click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
-- Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
-- Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
-- stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
-- Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
-- How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
-- Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
-- Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
-- sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
-- Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
-- All \ elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
-- Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
-- Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
-- Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
-- The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
-- No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
-- Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
-- Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
-- setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
-- Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
-- TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
-- A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
-- Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
-- classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
-- font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
-- q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
-- Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
-- No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
-- how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
-- FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
-- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
-- live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
-- css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
-- input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
-- Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
-- clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
-- Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
-- gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
-- phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
-- issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
-- layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
-- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
-- logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
-- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
-- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
-- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
-- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
-- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
-- Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
-- New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
-- Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
-- ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
-- Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
-- Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
-- Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
-- CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
-- mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
-- Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
-- Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
-- live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
-- Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
-- Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
-- Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
-- Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
-- Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
-- Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
-- Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
-- updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
-- can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
-- Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
-- shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
-- Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
-- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
-- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
-- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
-- Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
-- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
-- Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
-- Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
-- Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
-- Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
-- sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
-- How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
-- PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
-- Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
-- mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
-- Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
-- when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
-- Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
-- Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
-- Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
-- SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
-- Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
-- Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
-- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
-- Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
-- Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
-- No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
-- You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
-- Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
-- Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
-- Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
-- css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
-- Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
-- Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
-- Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
-- Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
-- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
-- src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
-- Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
-- CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
-- Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
-- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
-- npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
-- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
-- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
-- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
-- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
-- some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
-- Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
-- suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
-- Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
-- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
-
-**Merged pull requests:**
-
-- Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
-- Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
-- Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
-- Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
-- fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
-- fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
-- Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
-- Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
-- fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
-- Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
-- linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
-- fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
-- Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
-- SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
-- Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
-- Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
-- Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
-- Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
-- Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
-- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
-- Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
-- Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
-- wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
-- add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
-- SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
-- fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
-- Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
-
-## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)
-
-**Closed issues:**
-
-- live editor latin error after update [\#560](https://github.com/knsv/mermaid/issues/560)
-- Simple full example in online documentation is broken [\#558](https://github.com/knsv/mermaid/issues/558)
-- Graph No Arrow Head v7.0.3 [\#543](https://github.com/knsv/mermaid/issues/543)
-- Conflict while using mermaid along with core-js [\#512](https://github.com/knsv/mermaid/issues/512)
-- Export to pdf on website [\#496](https://github.com/knsv/mermaid/issues/496)
-- New downstream project: Mermaid Preview for VSCode [\#442](https://github.com/knsv/mermaid/issues/442)
-- Can't Zoom the flowchart ? [\#399](https://github.com/knsv/mermaid/issues/399)
-- line labels are not rendered correctly in live editor [\#366](https://github.com/knsv/mermaid/issues/366)
-- mermaid-loader [\#361](https://github.com/knsv/mermaid/issues/361)
-- Are there any documentation or examples for classDiagram and gitGraph? [\#359](https://github.com/knsv/mermaid/issues/359)
-- \# character broken in 0.5.8 [\#347](https://github.com/knsv/mermaid/issues/347)
-- Documentation issue: CSS example is not visible [\#345](https://github.com/knsv/mermaid/issues/345)
-- Include documentation for command line usage [\#326](https://github.com/knsv/mermaid/issues/326)
-- Fresh fork: can't build dist [\#296](https://github.com/knsv/mermaid/issues/296)
-- Invalid value for \ attribute viewBox="0 0 -Infinity -Infinity" [\#291](https://github.com/knsv/mermaid/issues/291)
-- Webpack require fails [\#277](https://github.com/knsv/mermaid/issues/277)
-- New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)
-
-## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)
-
-**Closed issues:**
-
-- the documentation website is down [\#539](https://github.com/knsv/mermaid/issues/539)
-- Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)
-
-## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)
-
-**Closed issues:**
-
-- CDN is not working [\#511](https://github.com/knsv/mermaid/issues/511)
-- A sampe sequenceDiagram crashes mermaid-cli [\#492](https://github.com/knsv/mermaid/issues/492)
-- Mermaid doesn't delete nodes when called multiple times [\#491](https://github.com/knsv/mermaid/issues/491)
-- API crashes on 2nd render\(\) call [\#478](https://github.com/knsv/mermaid/issues/478)
-- sequenceDiagram: dotted line for alt and empty bracket should be hidden [\#456](https://github.com/knsv/mermaid/issues/456)
-- SVG output \(almost\) not correct [\#434](https://github.com/knsv/mermaid/issues/434)
-- How to set axisFormatter of gantt in mermaid CLI? [\#428](https://github.com/knsv/mermaid/issues/428)
-- customizing link style with any color sets `fill` property to `black` instead of `none` [\#416](https://github.com/knsv/mermaid/issues/416)
-- New line at the end of SVG file [\#400](https://github.com/knsv/mermaid/issues/400)
-- CLI doesn't work [\#389](https://github.com/knsv/mermaid/issues/389)
-- Can't render subgraphs with htmlLabels: false [\#367](https://github.com/knsv/mermaid/issues/367)
-- Color arrowhead [\#362](https://github.com/knsv/mermaid/issues/362)
-- CLI: Invisible text, lines in SVG output [\#341](https://github.com/knsv/mermaid/issues/341)
-
-**Merged pull requests:**
-
-- Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj))
-- Update Travis config [\#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong))
-- Fix spelling of 'you' in sequenceDiagram docs [\#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson))
-- Improve CLI output [\#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042))
-- Modernize mermaid [\#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong))
-- Modernize mermaid [\#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong))
-- Update CLI instructions [\#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps))
-- Add style for classDiagram to dark/default theme [\#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel))
-- Fix documentation for git graph. [\#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs))
-- Fix links in documentations [\#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71))
-- Update README.md with git graph sample [\#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur))
-- Fix misspelling of “another” [\#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert))
-- Fixed \#456 sequenceDiagram: dotted line for alt and empty bracket sho… [\#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong))
-- Add viewbox attr to class diagram [\#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm))
-- add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))
-
-## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)
-
-**Implemented enhancements:**
-
-- npm install -g mermaid does not install phantomjs [\#329](https://github.com/knsv/mermaid/issues/329)
-- activation boxes [\#313](https://github.com/knsv/mermaid/issues/313)
-
-**Closed issues:**
-
-- demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
-- Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
-- Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
-- webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
-- String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
-- text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
-- Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
-- uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
-- Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
-- document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
-- Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
-- \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
-- The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
-
-**Merged pull requests:**
-
-- Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
-- Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
-- Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
-- Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
-- added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
-- Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
-- added tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
-- Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
-- fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
-- fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
-- fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
-- Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
-- use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
-- \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
-- Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
-- Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
-- update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
-- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
-- New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
-- fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
-- Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
-- Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
-- Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
-- override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
-- added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
-- Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
-
-## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)
-
-**Closed issues:**
-
-- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
-- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
-- How to link backwards in flowchart? [\#321](https://github.com/knsv/mermaid/issues/321)
-- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
-- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
-- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
-- Live editor is broken [\#285](https://github.com/knsv/mermaid/issues/285)
-- "No such file or directory" trying to run mermaid 0.5.7 on OS X [\#284](https://github.com/knsv/mermaid/issues/284)
-- participant name as "Long Long Name" [\#283](https://github.com/knsv/mermaid/issues/283)
-- Windows - cli - could not find phantomjs at the specified path [\#236](https://github.com/knsv/mermaid/issues/236)
-
-**Merged pull requests:**
-
-- The option of gantt for the spaces for the section names. [\#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi))
-- Gitgraph: Make reset work with parent ref carets [\#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur))
-- Remove the text-shadows that make the text look blurry [\#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers))
-- add line interpolation to linkStyle in flowchart [\#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn))
-- Support git graph diagrams in mermaid [\#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur))
-- Build and test execution changes [\#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea))
-- Reformatting of css files [\#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr))
-- \(WIP\) Sequence Diagram Title Support [\#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja))
-- activations doc + few fixes [\#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy))
-- Dark theme for better contrast on darker backgrounds [\#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a))
-- Activations [\#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy))
-- Support leading comments for sequenceDiagrams [\#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle))
-- Show a little lenience for white-space around names [\#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle))
-- Update list of downstream projects [\#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo))
-- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
-- Issue 297 - src/mermaid.js generates bad code [\#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
-- Updated instructions for running tests [\#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS))
-- Add Markdown Plus to Downstream projects [\#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong))
-- Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))
-
-## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)
-
-## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)
-
-**Closed issues:**
-
-- Mermaid + LightPaper = ❤️ [\#280](https://github.com/knsv/mermaid/issues/280)
-- Bower Integration [\#278](https://github.com/knsv/mermaid/issues/278)
-- Mermaid breaks when variables end in 'v' [\#276](https://github.com/knsv/mermaid/issues/276)
-- sequence diagrams don't support participant aliasing [\#263](https://github.com/knsv/mermaid/issues/263)
-- One diagram that fails to render stops further execution on the page [\#259](https://github.com/knsv/mermaid/issues/259)
-- Where to find line layout algorithm? [\#258](https://github.com/knsv/mermaid/issues/258)
-- Compatibility with node.js [\#257](https://github.com/knsv/mermaid/issues/257)
-- Label resizing with dynamically loaded fonts [\#255](https://github.com/knsv/mermaid/issues/255)
-- SVG arrowheads are broken in the CLI [\#249](https://github.com/knsv/mermaid/issues/249)
-- Cannot read property 'replace' of undefined [\#239](https://github.com/knsv/mermaid/issues/239)
-
-**Merged pull requests:**
-
-- gh-50 Allow styling of edge labels in css [\#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia))
-- Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))
-
-## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)
-
-**Implemented enhancements:**
-
-- Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144)
-
-**Fixed bugs:**
-
-- Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202)
-
-**Closed issues:**
-
-- title doesn't work in sequenceDiagram [\#248](https://github.com/knsv/mermaid/issues/248)
-- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [\#247](https://github.com/knsv/mermaid/issues/247)
-- Broken in firefox? [\#245](https://github.com/knsv/mermaid/issues/245)
-- When there is a Chinese symbol in the flowchart, it will crash。 [\#238](https://github.com/knsv/mermaid/issues/238)
-- Non-alpha characters included in ALPHA token \(flow graph jison\) [\#232](https://github.com/knsv/mermaid/issues/232)
-- subgraph not rendering with change to sample [\#231](https://github.com/knsv/mermaid/issues/231)
-- sequence diagram requires a new line at the end? [\#229](https://github.com/knsv/mermaid/issues/229)
-
-**Merged pull requests:**
-
-- Make sequenceDiagram terminal newline optional [\#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042))
-- Support sequenceDiagram "over" notes [\#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042))
-- Properly handle "rest of line" statements [\#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042))
-- CLI: Propagate exit code from lib \(i.e., phantomjs\) [\#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042))
-- flowRender.js - Fix FontAwesome icon insert [\#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal))
-- updated sequence diagram link in live editor [\#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
-- updated links in README.md [\#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s))
-- Ellipse syntax [\#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88))
-- Allow keywords as suffixes of node ids [\#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88))
-- Highlighted the editor in the nav [\#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv))
-- Live editor tweaks [\#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88))
-- Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))
-
-## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)
-
-**Closed issues:**
-
-- sequence diagram, arrowhead instead of crosshead [\#227](https://github.com/knsv/mermaid/issues/227)
-
-**Merged pull requests:**
-
-- Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))
-
-## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)
-
-**Implemented enhancements:**
-
-- Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220)
-- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
-- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
-
-**Fixed bugs:**
-
-- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
-
-**Closed issues:**
-
-- Marker-end arrow cannot be shown for URL with query parameter [\#225](https://github.com/knsv/mermaid/issues/225)
-- Please update bower's D3 version [\#221](https://github.com/knsv/mermaid/issues/221)
-- Width fixed to 400px [\#204](https://github.com/knsv/mermaid/issues/204)
-- render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
-
-**Merged pull requests:**
-
-- Allow `end` as a substring of vertex id [\#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88))
-- Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))
-
-## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)
-
-## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)
-
-**Implemented enhancements:**
-
-- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34)
-
-**Closed issues:**
-
-- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
-- node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
-- Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
-- Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
-- please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
-- allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
-- syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
-- Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
-- Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
-- Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
-- Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
-- Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
-- cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
-- text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
-- using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
-- Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
-- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
-- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
-- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
-- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
-- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
-- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
-- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
-- IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
-- Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
-- Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
-- classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
-- Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
-- Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
-- Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
-- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
-- IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
-- inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
-- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
-
-**Merged pull requests:**
-
-- Update flowchart.md [\#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro))
-- Default style when using the CLI [\#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey))
-- Gantt chart - add minutes and seconds durations [\#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans))
-- Using QUnit for AMD testing [\#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl))
-- Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))
-
-## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)
-
-**Implemented enhancements:**
-
-- To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146)
-- Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129)
-- Special characters break parsing [\#54](https://github.com/knsv/mermaid/issues/54)
-- Responsive graph layout for mobile viewers [\#51](https://github.com/knsv/mermaid/issues/51)
-- Styling connector lines [\#31](https://github.com/knsv/mermaid/issues/31)
-
-**Fixed bugs:**
-
-- flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128)
-
-**Closed issues:**
-
-- Live editor is broken [\#173](https://github.com/knsv/mermaid/issues/173)
-- 0.5.0 no longer respects custom date definitions in Gantt diagrams [\#171](https://github.com/knsv/mermaid/issues/171)
-- Drop label character restrictions [\#162](https://github.com/knsv/mermaid/issues/162)
-- can't nest subgraphs in flowchart [\#161](https://github.com/knsv/mermaid/issues/161)
-- Unable to generate gantt diagram with mermaid CLI [\#158](https://github.com/knsv/mermaid/issues/158)
-- Inline css by "mermaid" [\#157](https://github.com/knsv/mermaid/issues/157)
-- Finite State Machine Diagram [\#152](https://github.com/knsv/mermaid/issues/152)
-- How to center align gantt diagram [\#150](https://github.com/knsv/mermaid/issues/150)
-- Security concern regarding class definition [\#148](https://github.com/knsv/mermaid/issues/148)
-- File Extension [\#147](https://github.com/knsv/mermaid/issues/147)
-- `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133)
-- module.exports.cloneCssStyles\(\) in combination with Angularjs breaks display in Chrome and IE [\#126](https://github.com/knsv/mermaid/issues/126)
-- Gantt - suitable xAxis for longer project [\#125](https://github.com/knsv/mermaid/issues/125)
-- How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64)
-
-**Merged pull requests:**
-
-- Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))
-
-## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)
-
-**Implemented enhancements:**
-
-- Add a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122)
-- software architecture diagram [\#36](https://github.com/knsv/mermaid/issues/36)
-- Support for bar charts and pie diagrams [\#22](https://github.com/knsv/mermaid/issues/22)
-
-**Closed issues:**
-
-- uglifyjs wanrings which means we can improve the code [\#156](https://github.com/knsv/mermaid/issues/156)
-- New\(er\) features unavailable in downloadable js files? [\#151](https://github.com/knsv/mermaid/issues/151)
-- Add gh-gapes link to description [\#143](https://github.com/knsv/mermaid/issues/143)
-- Some examples not displayed on Firefox 36.0.1 [\#138](https://github.com/knsv/mermaid/issues/138)
-- tags ending in a "v" don't render [\#132](https://github.com/knsv/mermaid/issues/132)
-- Links in flowchart [\#131](https://github.com/knsv/mermaid/issues/131)
-- Using the library for iOS development [\#130](https://github.com/knsv/mermaid/issues/130)
-- Add capability for gantt diagrams [\#118](https://github.com/knsv/mermaid/issues/118)
-- lower case v causes error in the parser [\#108](https://github.com/knsv/mermaid/issues/108)
-- Label's css conflict with boostrap's .label [\#67](https://github.com/knsv/mermaid/issues/67)
-- TypeError: Cannot read property 'layout' of undefined [\#37](https://github.com/knsv/mermaid/issues/37)
-
-**Merged pull requests:**
-
-- Dev 0.5.0 [\#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv))
-- Fix spacing [\#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho))
-- Fixing typo: "Think" -\> "Thick" [\#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a))
-- IE, local html, cssRules access is denied [\#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong))
-- Add automatically generated change log file. [\#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder))
-- Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
-- Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))
-- Allow other forms of node selection for init\(\) [\#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl))
-- Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))
-
-## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)
-
-**Implemented enhancements:**
-
-- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
-- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
-
-**Fixed bugs:**
-
-- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
-
-**Closed issues:**
-
-- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
-- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
-- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
-
-## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)
-
-## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)
-
-**Implemented enhancements:**
-
-- Apply styling from css when using the CLI utility [\#85](https://github.com/knsv/mermaid/issues/85)
-- Generated SVG works poorly outside web browsers [\#58](https://github.com/knsv/mermaid/issues/58)
-- Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2)
-
-**Closed issues:**
-
-- Subgraph syntax bug? [\#120](https://github.com/knsv/mermaid/issues/120)
-- Live editor [\#115](https://github.com/knsv/mermaid/issues/115)
-- Error in "Basic Syntax" wiki page [\#113](https://github.com/knsv/mermaid/issues/113)
-- semicolons, anyone? [\#111](https://github.com/knsv/mermaid/issues/111)
-- undefined `sequenceConfig` fails [\#109](https://github.com/knsv/mermaid/issues/109)
-- Sequence Diagrams: Show Actors below as well [\#106](https://github.com/knsv/mermaid/issues/106)
-- Allow overriding sequence diagram configuration \(SVG properties\) [\#103](https://github.com/knsv/mermaid/issues/103)
-- Error when rendering A-- This is the text -- B [\#102](https://github.com/knsv/mermaid/issues/102)
-- Clipping in documentation [\#97](https://github.com/knsv/mermaid/issues/97)
-- isolate class styling to the svg container [\#92](https://github.com/knsv/mermaid/issues/92)
-- Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40)
-
-**Merged pull requests:**
-
-- Add live editor [\#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer))
-- Adds CSS option to the CLI [\#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog))
-- Update flowchart.md in response Issue \#113 [\#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40))
-- Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))
-
-## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)
-
-**Implemented enhancements:**
-
-- Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26)
-
-**Closed issues:**
-
-- Missing arrows in sequence diagram [\#98](https://github.com/knsv/mermaid/issues/98)
-- Error with \>9 linkStyles [\#95](https://github.com/knsv/mermaid/issues/95)
-
-**Merged pull requests:**
-
-- Require d3 directly to better support Node usage [\#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish))
-- update doc with -c option [\#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr))
-- Add new parameter to the console client to override the svg configuration in sequence diagrams [\#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr))
-- Text based labels, new shape [\#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes))
-- fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))
-
-## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)
-
-**Implemented enhancements:**
-
-- Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53)
-
-**Closed issues:**
-
-- disable auto render [\#91](https://github.com/knsv/mermaid/issues/91)
-- Tidy breaks mermaid \(linebreaks in \\) [\#87](https://github.com/knsv/mermaid/issues/87)
-- Bug: \ being rendered as text in node [\#73](https://github.com/knsv/mermaid/issues/73)
-- Graph edges appear to render outside of the canvas [\#70](https://github.com/knsv/mermaid/issues/70)
-
-**Merged pull requests:**
-
-- Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
-- Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
-- Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
-- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
-- Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
-
-## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)
-
-**Implemented enhancements:**
-
-- Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16)
-- Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6)
-
-**Closed issues:**
-
-- Non ASCII chars in labels [\#84](https://github.com/knsv/mermaid/issues/84)
-- 'undefined' titles of Quicklinks on the usage page [\#80](https://github.com/knsv/mermaid/issues/80)
-- \[cli\] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [\#71](https://github.com/knsv/mermaid/issues/71)
-
-**Merged pull requests:**
-
-- Flowchart doc: Text in the circle now in a circle [\#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack))
-- Fix for issue \#73 [\#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a))
-- Ink template [\#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic))
-- Show help and version even if phantom isn't present. Fixes \#71 [\#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog))
-- Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))
-
-## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)
-
-**Implemented enhancements:**
-
-- How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47)
-- Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38)
-
-**Fixed bugs:**
-
-- This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46)
-
-**Closed issues:**
-
-- Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55)
-- Use classes instead of inline style for easy styling [\#24](https://github.com/knsv/mermaid/issues/24)
-
-**Merged pull requests:**
-
-- Adds Command Line Interface for generating PNGs from mermaid description files [\#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog))
-- Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))
-
-## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)
-
-**Fixed bugs:**
-
-- Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19)
-
-**Closed issues:**
-
-- Mermaid not rendering properly on Wordpress pages [\#59](https://github.com/knsv/mermaid/issues/59)
-- Improve example page with live demo [\#52](https://github.com/knsv/mermaid/issues/52)
-- Does not render upon AngularJS Updates [\#45](https://github.com/knsv/mermaid/issues/45)
-- Download link in README.MD doesn't work. [\#42](https://github.com/knsv/mermaid/issues/42)
-- linkStyle usage is not obvious [\#41](https://github.com/knsv/mermaid/issues/41)
-- Move \*.spec.js in src/ to test/ [\#35](https://github.com/knsv/mermaid/issues/35)
-
-**Merged pull requests:**
-
-- New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
-- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
-- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
-- Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
-- Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
-- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
-
-## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15)
-
-**Fixed bugs:**
-
-- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
-- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
-
-**Closed issues:**
-
-- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
-- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
-- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
-
-**Merged pull requests:**
-
-- Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
-- Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
-
-## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)
-
-## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)
-
-**Implemented enhancements:**
-
-- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7)
-
-**Closed issues:**
-
-- modified init to be applied more than once [\#29](https://github.com/knsv/mermaid/issues/29)
-- Wanted to know build process for the project. [\#28](https://github.com/knsv/mermaid/issues/28)
-- can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20)
-- Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)
-
-## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10)
-
-## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)
-
-**Closed issues:**
-
-- Add link to jsbin playground to README [\#11](https://github.com/knsv/mermaid/issues/11)
-- What are the requirements ? [\#10](https://github.com/knsv/mermaid/issues/10)
-
-**Merged pull requests:**
-
-- Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))
-
-## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)
-
-## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)
-
-**Closed issues:**
-
-- Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)
-
-## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)
-
-## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)
-
-**Merged pull requests:**
-
-- Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))
-
-## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)
-
-## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)
-
-## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)
-
-## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)
-
-## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)
-
-## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
-
-[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
-
-## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
diff --git a/vdocs/community/development.md b/vdocs/community/development.md
deleted file mode 100644
index 95e5fe4174..0000000000
--- a/vdocs/community/development.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# Development and Contribution 🙌
-
-So you want to help? That's great!
-
-![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
-
-Here are a few things to get you started on the right path.
-
-**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**
-
-**Note: Commits and Pull Requests should be directed to the develop branch.**
-
-## Branching
-
-Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
-
-Once development is done we branch a `release` branch from `develop` for testing.
-
-Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
-
-This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
-
-## Contributing Code
-
-We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
-
-- Large changes reviewed by knsv or other developer asked to review by knsv
-- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)
-
-When you commit code, create a branch with the following naming convention:
-
-Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
-
-**One example:**
-
-`feature/945_state_diagrams`
-
-**Another example:**
-
-`bug/123_nasty_bug_branch`
-
-## Contributing to Documentation
-
-If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
-
-The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
-
-> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
-
-The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
-
-## How to Contribute to Documentation
-
-We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
-
-The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
-
-The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
-
-We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
-
-### Add Unit Tests for Parsing
-
-This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
-
-### Add E2E Tests
-
-This tests the rendering and visual appearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
-
-To start working with the e2e tests:
-
-1. Run `yarn dev` to start the dev server
-2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
-   (Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
-
-The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
-
-When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
-
-This is what a rendering test looks like:
-
-```js
-it('should render forks and joins', () => {
-  imgSnapshotTest(
-    `
-    stateDiagram
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-    `,
-    { logLevel: 0 }
-  );
-  cy.get('svg');
-});
-```
-
-### Any Questions or Suggestions?
-
-After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
-
-### How to Contribute a Suggestion
-
-Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
-
-To edit Docs on your computer:
-
-1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch.
-2. Create a fork of the develop branch.
-3. Make changes or add new documentation.
-4. Commit changes to your fork and push it to GitHub.
-5. Create a Pull Request of your fork.
-
-To edit Docs on GitHub:
-
-1. Login to [GitHub.com](https://www.github.com).
-2. Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs).
-3. To edit a file, click the pencil icon at the top-right of the file contents panel.
-4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
-5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
-6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
-
-## Last Words
-
-Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
-
-[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-
-![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
diff --git a/vdocs/community/n00b-overview.md b/vdocs/community/n00b-overview.md
deleted file mode 100644
index 3d493b80ae..0000000000
--- a/vdocs/community/n00b-overview.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# Overview for Beginners
-
-**Explaining with a Diagram**
-
-A picture is worth a thousand words, a good diagram is undoubtedly worth more. They make understanding easier.
-
-## Creating and Maintaining Diagrams
-
-Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to create, edit and maintain good visualizations.
-
-Diagrams/Charts are significant but also become obsolete/inaccurate very fast. This catch-22 hobbles the productivity of teams.
-
-# Doc Rot in Diagrams
-
-Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram.
-
-Mermaid seeks to change using markdown-inspired syntax. The process is a quicker, less complicated, and more convenient way of going from concept to visualization.
-
-It is a relatively straightforward solution to a significant hurdle with the software teams.
-
-# Definition of Terms/ Dictionary
-
-**Mermaid text definitions can be saved for later reuse and editing.**
-
-> These are the Mermaid diagram definitions inside `
` tags, with the `class=mermaid`.
-
-```html
-
-    graph TD
-    A[Client] --> B[Load Balancer]
-    B --> C[Server01]
-    B --> D[Server02]
-

-```
-
-**render**
-
-> This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.
-
-**Nodes**
-
-> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](../config/n00b-syntaxReference)
-
-## Advantages of using Mermaid
-
-- Ease to generate, modify and render diagrams when you make them.
-- The number of integrations and plugins it has.
-- You can add it to your or companies website.
-- Diagrams can be created through comments like this in a script:
-
-## The catch-22 of Diagrams and Charts:
-
-**Diagramming and charting is a large waste of developer's time, but not having diagrams ruins productivity.**
-
-Mermaid solves this by reducing the time and effort required to create diagrams and charts.
-
-Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task.
-
-## Catching up with Development
-
-Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
-In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet.
-
-## Mermaid is for everyone.
-
-Video [Tutorials](../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
-
-Alternatively you can use Mermaid [Plug-Ins](../misc/integrations), with tools you already use, like Google Docs.
diff --git a/vdocs/community/newDiagram.md b/vdocs/community/newDiagram.md
deleted file mode 100644
index 1f9aabcb06..0000000000
--- a/vdocs/community/newDiagram.md
+++ /dev/null
@@ -1,263 +0,0 @@
-# Adding a New Diagram/Chart 📊
-
-### Step 1: Grammar & Parsing
-
-#### Grammar
-
-This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
-
-For instance:
-
-- the flowchart starts with the keyword graph.
-- the sequence diagram starts with the keyword sequenceDiagram
-
-#### Store data found during parsing
-
-There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
-
-```
-statement
-	: 'participant' actor  { $$='actor'; }
-	| signal               { $$='signal'; }
-	| note_statement       { $$='note';  }
-	| 'title' message      { yy.setTitle($2);  }
-	;
-```
-
-In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
-
-::: tip
-Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
-:::
-
-For more info look in the example diagram type:
-
-The `yy` object has the following function:
-
-```javascript
-exports.parseError = function (err, hash) {
-  mermaid.parseError(err, hash);
-};
-```
-
-when parsing the `yy` object is initialized as per below:
-
-```javascript
-var parser;
-parser = exampleParser.parser;
-parser.yy = db;
-```
-
-### Step 2: Rendering
-
-Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.
-
-Place the renderer in the diagram folder.
-
-### Step 3: Detection of the new diagram type
-
-The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
-
-### Step 4: The final piece - triggering the rendering
-
-At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.
-
-## Usage of the parser as a separate module
-
-### Setup
-
-```javascript
-var graph = require('./graphDb');
-var flow = require('./parser/flow');
-flow.parser.yy = graph;
-```
-
-### Parsing
-
-```javascript
-flow.parser.parse(text);
-```
-
-### Data extraction
-
-```javascript
-graph.getDirection();
-graph.getVertices();
-graph.getEdges();
-```
-
-The parser is also exposed in the mermaid api by calling:
-
-```javascript
-var parser = mermaid.getParser();
-```
-
-Note that the parse needs a graph object to store the data as per:
-
-```javascript
-flow.parser.yy = graph;
-```
-
-Look at `graphDb.js` for more details on that object.
-
-## Layout
-
-If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
-
-### Common parts of a diagram
-
-There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
-
-- Directives, a way of modifying the diagram configuration from within the diagram code.
-- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
-- Themes, there is a common way to modify the styling of diagrams in Mermaid.
-- Comments should follow mermaid standards
-
-Here some pointers on how to handle these different areas.
-
-#### [Directives](../intro/directives.md)
-
-Here is example handling from flowcharts:
-Jison:
-
-```
-
-/* lexical grammar */
-%lex
-%x open_directive
-%x type_directive
-%x arg_directive
-%x close_directive
-
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
-":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
-\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-
-/* language grammar */
-
-/* ... */
-
-directive
-  : openDirective typeDirective closeDirective separator
-  | openDirective typeDirective ':' argDirective closeDirective separator
-  ;
-
-openDirective
-  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
-  ;
-
-typeDirective
-  : type_directive { yy.parseDirective($1, 'type_directive'); }
-  ;
-
-argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
-  ;
-
-closeDirective
-  : close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
-  ;
-```
-
-It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
-
-## Accessibility
-
-The syntax for adding title and description looks like this:
-
-```
-accTitle: The title
-accDescr: The description
-
-accDescr {
-	Syntax for a description text
-	written on multiple lines.
-}
-```
-
-In a similar way to the directives the jison syntax are quite similar between the diagrams.
-
-```
-* lexical grammar */
-%lex
-%x acc_title
-%x acc_descr
-%x acc_descr_multiline
-
-%%
-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";
-
-statement
-    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
-    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
-```
-
-The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
-
-```
-import {
-  setAccTitle,
-  getAccTitle,
-  getAccDescription,
-  setAccDescription,
-  clear as commonClear,
-} from '../../commonDb';
-```
-
-For rendering the accessibility tags you have again an existing function you can use.
-
-**In the renderer:**
-
-```js
-import addSVGAccessibilityFields from '../../accessibility';
-
-/* ... */
-
-// Adds title and description to the flow chart
-addSVGAccessibilityFields(parser.yy, svg, id);
-```
-
-## Theming
-
-Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md).
-
-When adding themes to a diagram it comes down to a few important locations in the code.
-
-The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.
-
-This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
-
-```js
-const getStyles = (options) =>
-  `
-    .line {
-      stroke-width: 1;
-      stroke: ${options.lineColor};
-      stroke-dasharray: 2;
-    }
-    // ...
-    `;
-```
-
-Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:
-
-```js
-const themes = {
-  flowchart,
-  'flowchart-v2': flowchart,
-  sequence,
-  xyzDiagram,
-  //...
-};
-```
-
-The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
diff --git a/vdocs/community/security.md b/vdocs/community/security.md
deleted file mode 100644
index 7e61a60cf3..0000000000
--- a/vdocs/community/security.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Security
-
-The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.
-
-## Reporting vulnerabilities
-
-To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
-
-We aim to reply within three working days, probably much sooner.
-
-You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates.
-
-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
-
-## Best practices
-
-Keep current with the latest Mermaid releases. We regularly update Mermaid, and these updates may fix security defects discovered in previous versions. Check the Mermaid release notes for security-related updates.
-
-Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.
-
-## Configuring DomPurify
-
-By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
diff --git a/vdocs/config/Setup.md b/vdocs/config/Setup.md
deleted file mode 100644
index fb58b78ea0..0000000000
--- a/vdocs/config/Setup.md
+++ /dev/null
@@ -1,1628 +0,0 @@
-## mermaidAPI
-
-This is the API to be used when optionally handling the integration with the web page, instead of
-using the default integration provided by mermaid.js.
-
-The core of this api is the [**render**][1] function which, given a graph
-definition as text, renders the graph/diagram and returns an svg element for the graph.
-
-It is then up to the user of the API to make use of the svg, either insert it somewhere in the
-page or do something completely different.
-
-In addition to the render function, a number of behavioral configuration options are available.
-
-## Configuration
-
-**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more [click
-here][2].**
-
-## **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:**
-
-```js
-const config = {
-  startOnLoad: true,
-  flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
-
-  securityLevel: 'loose',
-};
-mermaid.initialize(config);
-```
-
-A summary of all options and their defaults is found [here][3].
-A description of each option follows below.
-
-## theme
-
-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".
 "theme": "forest",
-"themeCSS": ".node rect { fill: red; }" 

-
-## fontFamily
-
-| 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;'.
-
-## logLevel
-
-| 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)
-
-## securityLevel
-
-| Parameter     | Description                       | Type   | Required | Values                                     |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
-
-**Notes**:
-
-- **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 from 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.
-
-## startOnLoad
-
-| Parameter   | Description                                  | Type    | Required | Values      |
-| ----------- | -------------------------------------------- | ------- | -------- | ----------- |
-| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
-
-**Notes:** Default value: true
-
-## arrowMarkerAbsolute
-
-| 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
-
-## secure
-
-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']
-
-## deterministicIds
-
-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 behaviour.
-
-**Notes**:
-
-This matters if your files are checked into sourcecontrol e.g. git and should not change unless
-content is changed.
-
-Default value: false
-
-## deterministicIDSeed
-
-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.
-
-## flowchart
-
-The object containing configurations specific for flowcharts
-
-### diagramPadding
-
-| 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
-
-### htmlLabels
-
-| 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.
-
-### nodeSpacing
-
-| 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
-
-### rankSpacing
-
-| 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
-
-### curve
-
-| Parameter | Description                                        | Type   | Required | Values                        |
-| --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
-| curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
-
-**Notes:**
-
-Default Value: 'basis'
-
-### useMaxWidth
-
-| 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
-
-### defaultRenderer
-
-| 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-wrapper'
-
-## sequence
-
-The object containing configurations specific for sequence diagrams
-
-### activationWidth
-
-| Parameter       | Description                  | Type    | Required | Values             |
-| --------------- | ---------------------------- | ------- | -------- | ------------------ |
-| activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
-
-**Notes:** Default value :10
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                       | Type    | Required | Values             |
-| -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### actorMargin
-
-| Parameter   | Description           | Type    | Required | Values             |
-| ----------- | --------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 150
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 65
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 5
-
-### noteMargin
-
-| Parameter  | Description         | Type    | Required | Values             |
-| ---------- | ------------------- | ------- | -------- | ------------------ |
-| noteMargin | margin around notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### messageMargin
-
-| Parameter     | Description            | Type    | Required | Values             |
-| ------------- | ---------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 35
-
-### messageAlign
-
-| Parameter    | Description                 | Type   | Required | Values                    |
-| ------------ | --------------------------- | ------ | -------- | ------------------------- |
-| messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### mirrorActors
-
-| Parameter    | Description                 | Type    | Required | Values      |
-| ------------ | --------------------------- | ------- | -------- | ----------- |
-| mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
-
-**Notes:** Default value: true
-
-### forceMenus
-
-| 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.
-
-### bottomMarginAdj
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-### rightAngles
-
-| 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
-
-### showSequenceNumbers
-
-| Parameter           | Description                     | Type    | Required | Values      |
-| ------------------- | ------------------------------- | ------- | -------- | ----------- |
-| showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
-
-**Notes:** Default value: false
-
-### actorFontSize
-
-| 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**..
-
-### actorFontFamily
-
-| 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'
-
-### actorFontWeight
-
-This sets the font weight of the actor's description
-
-**Notes:** Default value: 400.
-
-### noteFontSize
-
-| Parameter    | Description                                     | Type    | Required | Values             |
-| ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
-| noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 14
-
-### noteFontFamily
-
-| 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'
-
-### noteFontWeight
-
-This sets the font weight of the note's description
-
-**Notes:** Default value: 400
-
-### noteAlign
-
-| Parameter | Description                                          | Type   | Required | Values                    |
-| --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
-| noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### messageFontSize
-
-| Parameter       | Description                               | Type    | Required | Values              |
-| --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
-| messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
-
-**Notes:** Default value: 16
-
-### messageFontFamily
-
-| 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'
-
-### messageFontWeight
-
-This sets the font weight of the message's description
-
-**Notes:** Default value: 400.
-
-### wrap
-
-This sets the auto-wrap state for the diagram
-
-**Notes:** Default value: false.
-
-### wrapPadding
-
-This sets the auto-wrap padding for the diagram (sides only)
-
-**Notes:** Default value: 0.
-
-### labelBoxWidth
-
-This sets the width of the loop-box (loop, alt, opt, par)
-
-**Notes:** Default value: 50.
-
-### labelBoxHeight
-
-This sets the height of the loop-box (loop, alt, opt, par)
-
-**Notes:** Default value: 20.
-
-## gantt
-
-The object containing configurations specific for gantt diagrams
-
-### titleTopMargin
-
-### 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
-
-### barHeight
-
-| Parameter | Description                         | Type    | Required | Values             |
-| --------- | ----------------------------------- | ------- | -------- | ------------------ |
-| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 20
-
-### barGap
-
-| 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
-
-### topPadding
-
-| 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
-
-### rightPadding
-
-| 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
-
-### leftPadding
-
-| 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
-
-### gridLineStartPadding
-
-| Parameter            | Description                                  | Type    | Required | Values             |
-| -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 35
-
-### fontSize
-
-| Parameter | Description | Type    | Required | Values             |
-| --------- | ----------- | ------- | -------- | ------------------ |
-| fontSize  | Font size   | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 11
-
-### sectionFontSize
-
-| Parameter       | Description            | Type    | Required | Values             |
-| --------------- | ---------------------- | ------- | -------- | ------------------ |
-| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 11
-
-### numberSectionStyles
-
-| Parameter           | Description                              | Type    | Required | Values             |
-| ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-| numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-
-**Notes:** Default value: 4
-
-### axisFormat
-
-| Parameter  | Description                 | Type | Required | Values           |
-| ---------- | --------------------------- | ---- | -------- | ---------------- |
-| axisFormat | Datetime 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'.
-
-### useMaxWidth
-
-| 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
-
-### topAxis
-
-| 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**.
-
-## journey
-
-The object containing configurations specific for journey diagrams
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                        | Type    | Required | Values             |
-| -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### leftMargin
-
-| Parameter   | Description           | Type    | Required | Values             |
-| ----------- | --------------------- | ------- | -------- | ------------------ |
-| actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### width
-
-| Parameter | Description          | Type    | Required | Values             |
-| --------- | -------------------- | ------- | -------- | ------------------ |
-| width     | Width of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 150
-
-### height
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| height    | Height of actor boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 65
-
-### boxMargin
-
-| Parameter | Description              | Type    | Required | Values             |
-| --------- | ------------------------ | ------- | -------- | ------------------ |
-| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### boxTextMargin
-
-| Parameter     | Description                                  | Type    | Required | Values             |
-| ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-| boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 5
-
-### noteMargin
-
-| Parameter  | Description         | Type    | Required | Values             |
-| ---------- | ------------------- | ------- | -------- | ------------------ |
-| noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### messageMargin
-
-| Parameter     | Description             | Type    | Required | Values             |
-| ------------- | ----------------------- | ------- | -------- | ------------------ |
-| messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-
-**Notes:**
-
-Space between messages.
-
-Default value: 35
-
-### messageAlign
-
-| Parameter    | Description                 | Type | Required | Values                    |
-| ------------ | --------------------------- | ---- | -------- | ------------------------- |
-| messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-
-**Notes:** Default value: 'center'
-
-### bottomMarginAdj
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-### rightAngles
-
-| 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
-
-## useMaxWidth
-
-| 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
-
-## defaultRenderer
-
-| 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'
-
-## useMaxWidth
-
-| 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
-
-## defaultRenderer
-
-| 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'
-
-## er
-
-The object containing configurations specific for entity relationship diagrams
-
-### diagramPadding
-
-| 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
-
-### layoutDirection
-
-| 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'
-
-### minEntityWidth
-
-| 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
-
-### minEntityHeight
-
-| 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
-
-### entityPadding
-
-| 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
-
-### stroke
-
-| Parameter | Description                         | Type   | Required | Values               |
-| --------- | ----------------------------------- | ------ | -------- | -------------------- |
-| stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
-
-**Notes:** Default value: 'gray'
-
-### fill
-
-| Parameter | Description                | Type   | Required | Values               |
-| --------- | -------------------------- | ------ | -------- | -------------------- |
-| fill      | Fill color of entity boxes | string | 4        | Any recognized color |
-
-**Notes:** Default value: 'honeydew'
-
-### fontSize
-
-| 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
-
-### useMaxWidth
-
-| 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
-
-## pie
-
-The object containing configurations specific for pie diagrams
-
-### useMaxWidth
-
-| 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
-
-## requirement
-
-The object containing configurations specific for req diagrams
-
-### useMaxWidth
-
-| 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
-
-## c4
-
-The object containing configurations specific for c4 diagrams
-
-### diagramMarginX
-
-| 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
-
-### diagramMarginY
-
-| Parameter      | Description                                 | Type    | Required | Values             |
-| -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-| diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### c4ShapeMargin
-
-| Parameter     | Description           | Type    | Required | Values             |
-| ------------- | --------------------- | ------- | -------- | ------------------ |
-| c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 50
-
-### c4ShapePadding
-
-| Parameter      | Description            | Type    | Required | Values             |
-| -------------- | ---------------------- | ------- | -------- | ------------------ |
-| c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 20
-
-### width
-
-| Parameter | Description           | Type    | Required | Values             |
-| --------- | --------------------- | ------- | -------- | ------------------ |
-| width     | Width of person boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 216
-
-### height
-
-| Parameter | Description            | Type    | Required | Values             |
-| --------- | ---------------------- | ------- | -------- | ------------------ |
-| height    | Height of person boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 60
-
-### boxMargin
-
-| Parameter | Description         | Type    | Required | Values             |
-| --------- | ------------------- | ------- | -------- | ------------------ |
-| boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
-
-**Notes:** Default value: 10
-
-### useMaxWidth
-
-| 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
-
-### c4ShapeInRow
-
-| 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
-
-### c4BoundaryInRow
-
-| Parameter       | Description | Type    | Required | Values             |
-| --------------- | ----------- | ------- | -------- | ------------------ |
-| c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
-
-**Notes:** How many boundarys to place in each row.
-
-Default value: 2
-
-### personFontSize
-
-This sets the font size of Person shape for the diagram
-
-**Notes:** Default value: 14.
-
-### personFontFamily
-
-This sets the font family of Person shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### personFontWeight
-
-This sets the font weight of Person shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_personFontSize
-
-This sets the font size of External Person shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_personFontFamily
-
-This sets the font family of External Person shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_personFontWeight
-
-This sets the font weight of External Person shape for the diagram
-
-**Notes:** Default value: normal.
-
-### systemFontSize
-
-This sets the font size of System shape for the diagram
-
-**Notes:** Default value: 14.
-
-### systemFontFamily
-
-This sets the font family of System shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### systemFontWeight
-
-This sets the font weight of System shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_systemFontSize
-
-This sets the font size of External System shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_systemFontFamily
-
-This sets the font family of External System shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_systemFontWeight
-
-This sets the font weight of External System shape for the diagram
-
-**Notes:** Default value: normal.
-
-### system_dbFontSize
-
-This sets the font size of System DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### system_dbFontFamily
-
-This sets the font family of System DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### system_dbFontWeight
-
-This sets the font weight of System DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_system_dbFontSize
-
-This sets the font size of External System DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_system_dbFontFamily
-
-This sets the font family of External System DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_system_dbFontWeight
-
-This sets the font weight of External System DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### system_queueFontSize
-
-This sets the font size of System Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### system_queueFontFamily
-
-This sets the font family of System Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### system_queueFontWeight
-
-This sets the font weight of System Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_system_queueFontSize
-
-This sets the font size of External System Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_system_queueFontFamily
-
-This sets the font family of External System Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_system_queueFontWeight
-
-This sets the font weight of External System Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### boundaryFontSize
-
-This sets the font size of Boundary shape for the diagram
-
-**Notes:** Default value: 14.
-
-### boundaryFontFamily
-
-This sets the font family of Boundary shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### boundaryFontWeight
-
-This sets the font weight of Boundary shape for the diagram
-
-**Notes:** Default value: normal.
-
-### messageFontSize
-
-This sets the font size of Message shape for the diagram
-
-**Notes:** Default value: 12.
-
-### messageFontFamily
-
-This sets the font family of Message shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### messageFontWeight
-
-This sets the font weight of Message shape for the diagram
-
-**Notes:** Default value: normal.
-
-### containerFontSize
-
-This sets the font size of Container shape for the diagram
-
-**Notes:** Default value: 14.
-
-### containerFontFamily
-
-This sets the font family of Container shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### containerFontWeight
-
-This sets the font weight of Container shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_containerFontSize
-
-This sets the font size of External Container shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_containerFontFamily
-
-This sets the font family of External Container shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_containerFontWeight
-
-This sets the font weight of External Container shape for the diagram
-
-**Notes:** Default value: normal.
-
-### container_dbFontSize
-
-This sets the font size of Container DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### container_dbFontFamily
-
-This sets the font family of Container DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### container_dbFontWeight
-
-This sets the font weight of Container DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_container_dbFontSize
-
-This sets the font size of External Container DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_container_dbFontFamily
-
-This sets the font family of External Container DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_container_dbFontWeight
-
-This sets the font weight of External Container DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### container_queueFontSize
-
-This sets the font size of Container Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### container_queueFontFamily
-
-This sets the font family of Container Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### container_queueFontWeight
-
-This sets the font weight of Container Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_container_queueFontSize
-
-This sets the font size of External Container Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_container_queueFontFamily
-
-This sets the font family of External Container Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_container_queueFontWeight
-
-This sets the font weight of External Container Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### componentFontSize
-
-This sets the font size of Component shape for the diagram
-
-**Notes:** Default value: 14.
-
-### componentFontFamily
-
-This sets the font family of Component shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### componentFontWeight
-
-This sets the font weight of Component shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_componentFontSize
-
-This sets the font size of External Component shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_componentFontFamily
-
-This sets the font family of External Component shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_componentFontWeight
-
-This sets the font weight of External Component shape for the diagram
-
-**Notes:** Default value: normal.
-
-### component_dbFontSize
-
-This sets the font size of Component DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### component_dbFontFamily
-
-This sets the font family of Component DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### component_dbFontWeight
-
-This sets the font weight of Component DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_component_dbFontSize
-
-This sets the font size of External Component DB shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_component_dbFontFamily
-
-This sets the font family of External Component DB shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_component_dbFontWeight
-
-This sets the font weight of External Component DB shape for the diagram
-
-**Notes:** Default value: normal.
-
-### component_queueFontSize
-
-This sets the font size of Component Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### component_queueFontFamily
-
-This sets the font family of Component Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### component_queueFontWeight
-
-This sets the font weight of Component Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### external_component_queueFontSize
-
-This sets the font size of External Component Queue shape for the diagram
-
-**Notes:** Default value: 14.
-
-### external_component_queueFontFamily
-
-This sets the font family of External Component Queue shape for the diagram
-
-**Notes:** Default value: "Open Sans", sans-serif.
-
-### external_component_queueFontWeight
-
-This sets the font weight of External Component Queue shape for the diagram
-
-**Notes:** Default value: normal.
-
-### wrap
-
-This sets the auto-wrap state for the diagram
-
-**Notes:** Default value: true.
-
-### wrapPadding
-
-This sets the auto-wrap padding for the diagram (sides only)
-
-**Notes:** Default value: 0.
-
-## parse
-
-### Parameters
-
-- `text` **[string][4]**
-- `parseError` **[Function][5]?**
-
-Returns **[boolean][6]**
-
-## setSiteConfig
-
-## setSiteConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
-to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
-will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
-function _Default value: At default, will mirror Global Config_
-
-### Parameters
-
-- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
-
-Returns **[object][7]** The siteConfig
-
-## getSiteConfig
-
-## getSiteConfig
-
-| Function      | Description                                       | Type        | Values                           |
-| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
-| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
-
-**Notes**: Returns **any** values in siteConfig.
-
-Returns **[object][7]** The siteConfig
-
-## setConfig
-
-## setConfig
-
-| Function      | Description                           | Type        | Values                                  |
-| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
-| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
-
-**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
-keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
-corresponding siteConfig value.
-
-### Parameters
-
-- `conf` **any** The potential currentConfig
-
-Returns **any** The currentConfig merged with the sanitized conf
-
-## render
-
-Function that renders an svg with a graph from a chart definition. Usage example below.
-
-```javascript
-mermaidAPI.initialize({
-  startOnLoad: true,
-});
-$(function () {
-  const graphDefinition = 'graph TB\na-->b';
-  const cb = function (svgGraph) {
-    console.log(svgGraph);
-  };
-  mermaidAPI.render('id1', graphDefinition, cb);
-});
-```
-
-### Parameters
-
-- `id` **[string][4]** The id of the element to be rendered
-- `text` **[string][4]** The graph definition
-- `cb` **function (svgCode: [string][4], bindFunctions: function (element: [Element][8]): void): void**
-- `container` **[Element][8]** Selector to element in which a div with the graph temporarily will be
-  inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-  element will be removed when rendering is completed.
-
-Returns **void**
-
-## getConfig
-
-| Function  | Description               | Type        | Return Values                  |
-| --------- | ------------------------- | ----------- | ------------------------------ |
-| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
-
-**Notes**: Returns **any** the currentConfig
-
-Returns **any** The currentConfig
-
-## sanitize
-
-| Function | Description                            | Type        | Values |
-| -------- | -------------------------------------- | ----------- | ------ |
-| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
-
-Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
-options in-place
-
-### Parameters
-
-- `options` **any** The potential setConfig parameter
-
-## addDirective
-
-Pushes in a directive to the configuration
-
-### Parameters
-
-- `directive` **[object][7]** The directive to push in
-
-## reset
-
-| Function | Description                  | Type        | Required | Values |
-| -------- | ---------------------------- | ----------- | -------- | ------ |
-| reset    | Resets currentConfig to conf | Put Request | Required | None   |
-
-## conf
-
-| Parameter | Description                                                    | Type       | Required | Values                                       |
-| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
-| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
-
-**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
-
-### Parameters
-
-- `config` (optional, default `siteConfig`)
-
-Returns **void**
-
-## initialize
-
-### Parameters
-
-- `options` **MermaidConfig**
-
-##
-
-## mermaidAPI configuration defaults
-
-```html
-
-```
-
-[1]: Setup.md?id=render
-[2]: 8.6.0_docs.md
-[3]: #mermaidapi-configuration-defaults
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[8]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/vdocs/config/accessibility.md b/vdocs/config/accessibility.md
deleted file mode 100644
index 387871de42..0000000000
--- a/vdocs/config/accessibility.md
+++ /dev/null
@@ -1,208 +0,0 @@
-# Accessibility Options
-
-## Accessibility
-
-Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
-
-To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
-
-This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
-
-## Defining Accessibility Options
-
-### Single line accessibility values
-
-The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
-
-- `accTitle: "Your Accessibility Title"` or
-- `accDescr: "Your Accessibility Description"`
-
-**When these two options are defined, they will add a coressponding `` and `<desc>` tag in the SVG.**
-
-Let us take a look at the following example with a flowchart diagram:
-
-```mermaid-example
-   graph LR
-      accTitle: Big decisions
-      accDescr: Flow chart of the decision making process
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
-
-```
-
-See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
-
-![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
-
-### Multi-line Accessibility title/description
-
-You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
-
-`accTitle: My single line title value` (**_single line format_**)
-
-vs
-
-`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
-
-Let us look at it in the following example, with same flowchart:
-
-```mermaid-example
-   graph LR
-      accTitle: Big decisions
-
-      accDescr {
-        My multi-line description
-        of the diagram
-      }
-
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
-
-```
-
-See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
-
-![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
-
-### Sample Code Snippet for other diagram types
-
-#### Sequence Diagram
-
-```mermaid-example
-   sequenceDiagram
-      accTitle: My Sequence Diagram
-      accDescr: My Sequence Diagram Description
-
-      Alice->>John: Hello John, how are you?
-      John-->>Alice: Great!
-      Alice-)John: See you later!
-```
-
-#### Class Diagram
-
-```mermaid-example
-   classDiagram
-      accTitle: My Class Diagram
-      accDescr: My Class Diagram Description
-
-      Vehicle <|-- Car
-```
-
-#### State Diagram
-
-```mermaid-example
-   stateDiagram
-      accTitle: My State Diagram
-      accDescr: My State Diagram Description
-
-       s1 --> s2
-
-```
-
-#### Entity Relationship Diagram
-
-```mermaid-example
-   erDiagram
-      accTitle: My Entity Relationship Diagram
-      accDescr: My Entity Relationship Diagram Description
-
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-#### User Journey Diagram
-
-```mermaid-example
-  journey
-      accTitle: My User Journey Diagram
-      accDescr: My User Journey Diagram Description
-
-      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
-
-```
-
-#### Gantt Chart
-
-```mermaid-example
-   gantt
-      accTitle: My Gantt Chart Accessibility Title
-      accDescr: My Gantt Chart Accessibility Description
-
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
-```
-
-#### Pie Chart
-
-```mermaid-example
-   pie
-      accTitle: My Pie Chart Accessibility Title
-      accDescr: My Pie Chart Accessibility Description
-
-    title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 10.01
-    "Iron" :  5
-
-```
-
-#### Requirement Diagram
-
-```mermaid-example
-  requirementDiagram
-      accTitle: My Requirement Diagram
-      accDescr: My Requirement Diagram Description
-
-       requirement test_req {
-  id: 1
-  text: the test text.
-  risk: high
-  verifymethod: test
-  }
-
-  element test_entity {
-  type: simulation
-  }
-
-  test_entity - satisfies -> test_req
-
-```
-
-#### Gitgraph
-
-```mermaid-example
-  gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
-
-     commit
-     commit
-     branch develop
-     checkout develop
-     commit
-     commit
-     checkout main
-     merge develop
-     commit
-     commit
-
-```
diff --git a/vdocs/config/img/accessibility-div-example-2.png b/vdocs/config/img/accessibility-div-example-2.png
deleted file mode 100644
index b257edbd03..0000000000
Binary files a/vdocs/config/img/accessibility-div-example-2.png and /dev/null differ
diff --git a/vdocs/config/img/accessibility-div-example.png b/vdocs/config/img/accessibility-div-example.png
deleted file mode 100644
index 2b3478f0bd..0000000000
Binary files a/vdocs/config/img/accessibility-div-example.png and /dev/null differ
diff --git a/vdocs/config/img/assignWithDepth.png b/vdocs/config/img/assignWithDepth.png
deleted file mode 100644
index d00e8eb7c9..0000000000
Binary files a/vdocs/config/img/assignWithDepth.png and /dev/null differ
diff --git a/vdocs/config/img/object.assign without depth.png b/vdocs/config/img/object.assign without depth.png
deleted file mode 100644
index c87505c1c1..0000000000
Binary files a/vdocs/config/img/object.assign without depth.png and /dev/null differ
diff --git a/vdocs/config/img/python-mermaid-integration.png b/vdocs/config/img/python-mermaid-integration.png
deleted file mode 100644
index d54a0e97d5..0000000000
Binary files a/vdocs/config/img/python-mermaid-integration.png and /dev/null differ
diff --git a/vdocs/config/img/wrapped text.png b/vdocs/config/img/wrapped text.png
deleted file mode 100644
index cf8dd12386..0000000000
Binary files a/vdocs/config/img/wrapped text.png and /dev/null differ
diff --git a/vdocs/config/mermaidCLI.md b/vdocs/config/mermaidCLI.md
deleted file mode 100644
index f9473f1dd3..0000000000
--- a/vdocs/config/mermaidCLI.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# mermaid CLI
-
-mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.
diff --git a/vdocs/config/n00b-advanced.md b/vdocs/config/n00b-advanced.md
deleted file mode 100644
index 1e6546f5cf..0000000000
--- a/vdocs/config/n00b-advanced.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Advanced n00b mermaid (Coming soon..)
-
-## splitting mermaid code from html
-
-A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
-
-```
-stuff stuff
-  </div>
-  </body>
-</html>
-```
-
-The actual mermaid file could for example look like this:
-
-```
-mermaid content...
-```
-
----
-
-## mermaid configuration options
-
-...
diff --git a/vdocs/config/n00b-syntaxReference.md b/vdocs/config/n00b-syntaxReference.md
deleted file mode 100644
index 7db4de5b7a..0000000000
--- a/vdocs/config/n00b-syntaxReference.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Diagram Syntax
-
-Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
-
-Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
-
-Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.
-
-## Syntax Structure
-
-One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
-
-**Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
-
-```mermaid-example
-erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-The [Getting Started](../intro/n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
-
-## Diagram Breaking
-
-One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
-
-| Diagram Breakers                                                                                               | Reason                                                             | Solution                                          |
-| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
-| **Comments**                                                                                                   |                                                                    |                                                   |
-| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                                              | Similar to [Directives](./directives.md) confuses the renderer.    | In comments using `%%`, avoid using "{}".         |
-| **Flow-Charts**                                                                                                |                                                                    |                                                   |
-| 'end'                                                                                                          | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
-| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                           | wrap them in quotation marks to prevent breaking  |
-
-### Mermaid Live Editor
-
-Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
-
-# Configuration
-
-Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.
-
-If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/Setup.md) here. It includes themes.
-This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
-The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](../intro/n00b-gettingStarted.md) methods.
-
-### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
-
-Here you can edit certain values to change the behavior and appearance of the diagram.
-
-### [The initialize() call](../intro/n00b-gettingStarted?id=_3-calling-the-javascript-api),
-
-Used when Mermaid is called via an API, or through a `<script>` tag.
-
-### [Directives](../config/directives.md),
-
-Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
-
-### [Theme Manipulation](../config/theming.md):
-
-An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
diff --git a/vdocs/config/theming.md b/vdocs/config/theming.md
deleted file mode 100644
index 16bb2ef953..0000000000
--- a/vdocs/config/theming.md
+++ /dev/null
@@ -1,484 +0,0 @@
-# Theme Configuration
-
-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
-
-The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
-
-Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
-
-## Deployable Themes
-
-The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
-
-1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
-
-2. **forest**- A theme full of light greens that is easy on the eyes.
-
-3. **dark**- A theme that would go well with other dark-colored elements.
-
-4. **default**- The default theme for all diagrams.
-
-5. **neutral**- The theme to be used for black and white printing.
-
-## Site-wide Themes
-
-Site-wide themes are declared via `initialize` by site owners.
-
-Example of `Initialize` call setting `theme` to `base`:
-
-```javascript
-mermaidAPI.initialize({
-  securityLevel: 'loose',
-  theme: 'base',
-});
-```
-
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
-
-## Themes at the Local or Current Level
-
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
-
-```mmd
-%%{init: {'theme':'neutral'}}%%
-  graph TD
-    a --> b
-```
-
-Here is an example of how `%%init%%` can set the theme to 'neutral', this assumes that `themeVariables` are set to default:
-
-```mermaid-example
-%%{init: {'theme':'neutral'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-# List of Themes
-
-# Customizing Themes with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**Notes:**
-Leaving it empty will set all variable values to default.
-
-## Color and Color Calculation:
-
-Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
-
-**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
-
-You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
-
-## Theme Variables Reference Table
-
-::: tip
-Variables that are unique to some diagrams can be affected by changes in Theme Variables
-:::
-
-| Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
-| background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
-| fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      | Font Size, in pixels                                                                                                             |
-| primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | based on primaryColor          | \*   | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | \*   | Color to be used as text color in nodes using primaryColor                                                                       |
-| secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
-| secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
-| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |
-| tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
-| noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                   |
-| noteBorderColor      | based on noteBkgColor          | \*   | Border color in note rectangles.                                                                                                 |
-| lineColor            | based on background            | \*   |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | \*   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | \*   | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
-| errorBkgColor        | tertiaryColor                  | \*   | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | \*   | Color for syntax error message                                                                                                   |
-
-# What follows are Variables, specific to different diagrams and charts.
-
-## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
-
-## Flowchart
-
-| Variable            | Default/ Associated Value | Calc | Description                  |
-| ------------------- | ------------------------- | ---- | ---------------------------- |
-| nodeBorder          | primaryBorderColor        | \*   | Node Border Color            |
-| clusterBkg          | tertiaryColor             | \*   | Background in subgraphs      |
-| clusterBorder       | tertiaryBorderColor       | \*   | Cluster Border Color         |
-| defaultLinkColor    | lineColor                 | \*   | Link Color                   |
-| titleColor          | tertiaryTextColor         | \*   | Title Color                  |
-| edgeLabelBackground | based on secondaryColor   | \*   |                              |
-| nodeTextColor       | primaryTextColor          | \*   | Color for text inside Nodes. |
-
-# sequence diagram
-
-| name                  | Default value           | Calc | Description                 |
-| --------------------- | ----------------------- | ---- | --------------------------- |
-| actorBorder           | primaryBorderColor      | \*   | Actor Border Color          |
-| actorBkg              | mainBkg                 | \*   | Actor Background Color      |
-| actorTextColor        | primaryTextColor        | \*   | Actor Text Color            |
-| actorLineColor        | grey                    | \*   | Actor Line Color            |
-| signalColor           | textColor               | \*   | Signal Color                |
-| signalTextColor       | textColor               | \*   | Signal Text Color           |
-| labelBoxBkgColor      | actorBkg                | \*   | Label Box Background Color  |
-| labelBoxBorderColor   | actorBorder             | \*   | Label Box Border Color      |
-| labelTextColor        | actorTextColor          | \*   | Label Text Color            |
-| loopTextColor         | actorTextColor          | \*   | Loop ext Color              |
-| activationBorderColor | based on secondaryColor | \*   | Activation Border Color     |
-| activationBkgColor    | secondaryColor          | \*   | Activation Background Color |
-| sequenceNumberColor   | based on lineColor      | \*   | Sequence Number Color       |
-
-# state colors
-
-| name          | Default value    | Calc | Description                                  |
-| ------------- | ---------------- | ---- | -------------------------------------------- |
-| labelColor    | primaryTextColor | \*   |                                              |
-| altBackground | tertiaryColor    | \*   | Used for background in deep composite states |
-
-# class colors
-
-| name      | Default value | Calc | Description                     |
-| --------- | ------------- | ---- | ------------------------------- |
-| classText | textColor     | \*   | Color of Text in class diagrams |
-
-# User journey colors
-
-| name      | Default value           | Calc | Description                             |
-| --------- | ----------------------- | ---- | --------------------------------------- |
-| fillType0 | primaryColor            | \*   | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor          | \*   | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor   | \*   | Fill for 3rd section in journey diagram |
-| fillType3 | based on secondaryColor | \*   | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor   | \*   | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor | \*   | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor   | \*   | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor | \*   | Fill for 8th section in journey diagram |
-
-\*\*Notes: Values are meant to create an alternating look.
-
-# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-- Make the primary color a little lighter
-- set the tertiary color to a reddish shade as well
-- make the edge label background differ from the subgraph by setting the edgeLabelBackground
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
-
-# Common theming activities
-
-## How to change the color of the arrows
-
-# Examples:
-
-When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
-In the following examples, the directive `init` is used, with the `theme` being declared as `neutral`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
-
-### Flowchart
-
-```mmd
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Flowchart (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Sequence diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-
-### Class diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-```
-
-### Gantt
-
-```mermaid-example
-gantt
-       dateFormat                YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       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
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       section Documentation
-       Describe gantt syntax               :active, a1, after des1, 3d
-       Add gantt diagram to demo page      :after a1  , 20h
-       Add another diagram to demo page    :doc1, after a1  , 48h
-
-       section Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-### State diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-
-### State diagram (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-
-### Entity Relations diagram
-
-```mermaid-example
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-### User journey diagram
-
-```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
-```
diff --git a/vdocs/config/usage.md b/vdocs/config/usage.md
deleted file mode 100644
index 925214c0a5..0000000000
--- a/vdocs/config/usage.md
+++ /dev/null
@@ -1,394 +0,0 @@
-# Usage
-
-Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
-
-Diagrams can be re-rendered/modified by modifying their descriptions.
-
-### CDN
-
-[https://unpkg.com/mermaid/](https://unpkg.com/mermaid/)
-
-Please note that you can switch versions through the dropdown box at the top right.
-
-## Using mermaid
-
-For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
-
-We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
-
-**Installing and Hosting Mermaid on a Webpage**
-
-**Using the npm package**
-
-```
-1. You will need to install node v16, which would have npm.
-
-2. download yarn using npm.
-
-3. enter the following command:
-    yarn add mermaid
-
-4. At this point, you can add mermaid as a dev dependency using this command:
-    yarn add --dev mermaid
-
-5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
-    as is shown in the example below
-```
-
-**Hosting mermaid on a web page.**
-
-> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
-
-The easiest way to integrate mermaid on a web page requires two elements:
-
-- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
-
-```html
-<pre class="mermaid">
-    graph LR
-    A --- B
-    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
-</pre>
-```
-
-- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
-
-Example:
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
-</script>
-```
-
-**Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `pre` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
-
-## Simple full example:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-  </head>
-  <body>
-    <pre class="mermaid">
-  graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-    </pre>
-    <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-      mermaid.initialize({ startOnLoad: true });
-    </script>
-  </body>
-</html>
-```
-
-## Notes:
-
-An id attribute is also added to mermaid tags without one.
-
-Mermaid can load multiple diagrams, in the same page.
-
-> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
-
-## Enabling Click Event and Tags in Nodes
-
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
-
-**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
-
-## securityLevel
-
-| Parameter     | Description                       | Type   | Required | Values                                     |
-| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
-
-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.
-
-::: warning
-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.
-**sandbox** security level is still in the beta version.
-:::
-
-**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
-
-**To change `securityLevel`, you have to call `mermaidAPI.initialize`:**
-
-```javascript
-mermaidAPI.initialize({
-  securityLevel: 'loose',
-});
-```
-
-### Labels out of bounds
-
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
-whole page to load (dom + assets, particularly the fonts file).
-
-```javascript
-$(document).load(function () {
-  mermaid.initialize();
-});
-```
-
-or
-
-```javascript
-$(document).ready(function () {
-  mermaid.initialize();
-});
-```
-
-Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
-
-If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
-
-```css
-div.mermaid {
-  font-family: 'trebuchet ms', verdana, arial;
-}
-```
-
-### Calling `mermaid.init`
-
-By default, `mermaid.init` will be called when the document is ready, finding all elements with
-`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
-finer-grained control of this behavior, you can call `init` yourself with:
-
-- a configuration object
-- some nodes, as
-  - a node
-  - an array-like of nodes
-  - or W3C selector that will find your nodes
-
-Example:
-
-```javascript
-mermaid.init({ noteMargin: 10 }, '.someOtherClass');
-```
-
-Or with no config object, and a jQuery selection:
-
-```javascript
-mermaid.init(undefined, $('#someId .yetAnotherClass'));
-```
-
-::: warning
-This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-:::
-
-## Usage with webpack
-
-mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
-
-## API usage
-
-The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
-will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to
-fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
-
-The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
-
-```html
-<script src="mermaid.js"></script>
-
-<script>
-  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(function () {
-    // Example of using the API var
-    element = document.querySelector('#graphDiv');
-    const insertSvg = function (svgCode, bindFunctions) {
-      element.innerHTML = svgCode;
-    };
-    const graphDefinition = 'graph TB\na-->b';
-    const graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-  });
-</script>
-```
-
-### Binding events
-
-Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
-add those events after the graph has been inserted into the DOM.
-
-The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to
-bind events to an SVG when using the API for rendering.
-
-```javascript
-var insertSvg = function (svgCode, bindFunctions) {
-  element.innerHTML = svgCode;
-  if (typeof callback !== 'undefined') {
-    callback(id);
-  }
-  bindFunctions(element);
-};
-
-var id = 'theGraph';
-
-mermaidAPI.render(id, txt, insertSvg, element);
-```
-
-1. The graph is generated using the render call.
-2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
-3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
-4. Insert the SVG code into the DOM for presentation.
-5. Call the binding function that binds the events.
-
-## Example of a marked renderer
-
-This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
-
-```javascript
-var renderer = new marked.Renderer();
-renderer.code = function (code, language) {
-  if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
-    return '<pre class="mermaid">' + code + '</pre>';
-  } else {
-    return '<pre><code>' + code + '</code></pre>';
-  }
-};
-```
-
-Another example in CoffeeScript that also includes the mermaid script tag in the generated markup.
-
-```coffee
-marked = require 'marked'
-
-module.exports = (options) ->
-  hasMermaid = false
-  renderer = new marked.Renderer()
-  renderer.defaultCode = renderer.code
-  renderer.code = (code, language) ->
-    if language is 'mermaid'
-      html = ''
-      if not hasMermaid
-        hasMermaid = true
-        html += '<script src="'+options.mermaidPath+'"></script>'
-      html + '<pre class="mermaid">'+code+'</pre>'
-    else
-      @defaultCode(code, language)
-
-  renderer
-```
-
-## Advanced usage
-
-**Syntax validation without rendering (Work in Progress)**
-
-The **mermaid.parse(txt)** function validates graph definitions without rendering a graph. **[This function is still a work in progress](https://github.com/mermaid-js/mermaid/issues/1066), find alternatives below.**
-
-The function **mermaid.parse(txt)**, takes a text string as an argument and returns true if the definition follows mermaid's syntax and
-false if it does not. The parseError function will be called when the parse function returns false.
-
-When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
-function in order to handle the error in an application-specific way.
-
-The code-example below in meta code illustrates how this could work:
-
-```javascript
-mermaid.parseError = function (err, hash) {
-  displayErrorInGui(err);
-};
-
-var textFieldUpdated = function () {
-  var textStr = getTextFromFormField('code');
-
-  if (mermaid.parse(textStr)) {
-    reRender(textStr);
-  }
-};
-
-bindEventHandler('change', 'code', textFieldUpdated);
-```
-
-**Alternative to mermaid.parse():**
-One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
-
-## Configuration
-
-Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
-setting the options in mermaid.
-
-1. Instantiation of the configuration using the initialize call
-2. _Using the global mermaid object_ - **Deprecated**
-3. _using the global mermaid_config object_ - **Deprecated**
-4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
-
-The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
-configuration objects are described [in the mermaidAPI documentation](Setup.md).
-
-## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
-
-The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
-on what kind of integration you use.
-
-```html
-<script src="../dist/mermaid.js"></script>
-<script>
-  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
-  mermaid.initialize(config);
-</script>
-```
-
-::: tip
-This is the preferred way of configuring mermaid.
-:::
-
-### The following methods are deprecated and are kept only for backwards compatibility.
-
-## Using the mermaid object
-
-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-- mermaid.startOnLoad
-- mermaid.htmlLabels
-
-```javascript
-mermaid.startOnLoad = true;
-```
-
-::: warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-:::
-
-## Using the mermaid_config
-
-It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
-approach are:
-
-- mermaid_config.startOnLoad
-- mermaid_config.htmlLabels
-
-```javascript
-mermaid_config.startOnLoad = true;
-```
-
-::: warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-:::
-
-## Using the mermaid.init call
-
-To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
-
-- mermaid_config.startOnLoad
-- mermaid_config.htmlLabels
-
-```javascript
-mermaid_config.startOnLoad = true;
-```
-
-::: warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-:::
diff --git a/vdocs/edit.md b/vdocs/edit.md
deleted file mode 100644
index 5c623db4d2..0000000000
--- a/vdocs/edit.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: home
-
-title: Live Mermaid
----
-
-<iframe id="editor" src="https://mermaid.live" style="position: fixed;left: 0px;bottom: 0px;right: 0px;top: 80px;width: 100%;height: calc(100% - 80px);"></iframe>
diff --git a/vdocs/index.md b/vdocs/index.md
deleted file mode 100644
index cc3cd9498d..0000000000
--- a/vdocs/index.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: home
-
-title: Mermaid
-titleTemplate: Diagramming and charting tool
-
-hero:
-  name: Mermaid
-  text: Diagramming and charting tool
-  tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
-  image:
-    src: /header.png
-    alt: Mermaid
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /intro/
-    - theme: alt
-      text: View on GitHub
-      link: https://mermaid-js.github.io/mermaid/#/
-
-features:
-  - title: ➕ Easy to use!
-    details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
-  - title: 🎥 Video Tutorials!
-    details: Has video tutorials for beginners and advanced users.
-  - title: 🏆 Award winner!
-    details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
-  - title: 🧩 Integrations available!
-    details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
----
-
-<script setup>
-import { VPTeamMembers } from 'vitepress/theme'
-
-const members = [
-  {
-    avatar: 'https://avatars.githubusercontent.com/u/5837277?v=4',
-    name: 'Knut Sveidqvist',
-    title: 'Creator',
-    links: [
-      { icon: 'github', link: 'https://github.com/knsv' },
-    ]
-  },
-   {
-    avatar: 'https://avatars.githubusercontent.com/u/1912783?v=4',
-    name: 'Marc Faber',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://gdfaber.github.io/' },
-      { icon: 'linkedin', link: 'https://www.linkedin.com/in/marc-faber/' },      
-    ]
-  }, {
-    avatar: 'https://avatars.githubusercontent.com/u/1564825?v=4',
-    name: 'Nacho Orlandoni',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/IOrlandoni' },
-    ]
-  }, {
-    avatar: 'https://avatars.githubusercontent.com/u/6552521?v=4',
-    name: 'Christian Klemm',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/klemmchr' },
-    ]
-  }, {
-    avatar: 'https://avatars.githubusercontent.com/u/12032557?v=4',
-    name: 'Mindaugas Laganeckas',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/MindaugasLaganeckas' },
-    ]
-  }, {
-    avatar: 'https://avatars.githubusercontent.com/u/58763315?v=4',
-    name: 'Neil Cuzon',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/NeilCuzon' },
-    ]
-  }, {
-    avatar: 'https://avatars.githubusercontent.com/u/19526120?v=4',
-    name: 'Adrian Hall',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/spopida' },
-    ]
-  }, {
-    avatar: 'https://avatars.githubusercontent.com/u/53054099?v=4',
-    name: 'Yash Singh',
-    title: 'Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/Yash-Singh1' },
-    ]
-  },
-]
-</script>
-
-<div class="vp-doc" >
-  <h2 id="meet-the-team"> Meet The Team </h2>
-  <VPTeamMembers size="small" :members="members" />
-</div>
-
-<style>
-  .image-container .image-src {
-    margin: 1rem auto;
-    max-width: 100%;
-  }
-
-  .dark .image-src{
-    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
-    max-width: 100%;
-  }
-
-  .vp-doc {
-    align-items: center;
-    flex-direction: column;
-    display: flex;
-    margin-top: 2.5rem;
-  }
-
-  .vp-doc h2 {
-    margin: 48px 0 16px;
-    border-top: 1px solid var(--vp-c-divider-light);
-    padding-top: 24px;
-    letter-spacing: -.02em;
-    line-height: 32px;
-    font-size: 24px;
-}
-</style>
diff --git a/vdocs/intro/directives.md b/vdocs/intro/directives.md
deleted file mode 100644
index b96a2184cb..0000000000
--- a/vdocs/intro/directives.md
+++ /dev/null
@@ -1,254 +0,0 @@
-# Directives
-
-## Directives
-
-Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
-
-The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
-
-While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives.
-
-## Types of Directives options
-
-Mermaid basically supports two types of configuration options to be overridden by directives.
-
-1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
-
-- theme
-- fontFamily
-- logLevel
-- securityLevel
-- startOnLoad
-- secure
-
-2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
-   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
-
-**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
-
-```
-Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
-```
-
-## Declaring directives
-
-Now that we have defined the types of configurations that are available, we can learn how to declare directives.
-A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.
-
-Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
-
-Following code snippet shows the structure of a directive:
-
-```
-%%{
-  init: {
-    "theme": "dark",
-    "fontFamily": "monospace",
-    "logLevel": "info",
-    "flowchart": {
-      "htmlLabels": true,
-      "curve": "linear"
-    },
-    "sequence": {
-      "mirrorActors": true
-    }
-  }
-}%%
-```
-
-You can also define the directives in a single line, like this:
-
-```
-%%{init: { **insert argument here**}}%%
-```
-
-For example, the following code snippet:
-
-```
-%%{init: { "sequence": { "mirrorActors":false }}}%%
-```
-
-**Notes:**
-The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
-Valid Key Value pairs can be found in config.
-
-Example with a simple graph:
-
-```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
-graph LR
-A-->B
-```
-
-Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
-
-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
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
-%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
-...
-```
-
-parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
-
-```json
-{
-  "logLevel": "fatal",
-  "theme": "dark",
-  "startOnLoad": true
-}
-```
-
-This will then be sent to `mermaid.initialize(...)` for rendering.
-
-## Directive Examples
-
-More directive examples for diagram specific configuration overrides
-Now that the concept of directives has been explained, Let us see some more examples for directives usage:
-
-### Changing Theme via directive
-
-The following code snippet changes theme to forest:
-
-`%%{init: { "theme": "forest" } }%%`
-
-Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
-Default Value is `default`.
-
-Example:
-
-```mermaid-example
-%%{init: { "theme": "forest" } }%%
-graph TD
-A(Forest) --> B[/Another/]
-A --> C[End]
-  subgraph section
-  B
-  C
-  end
-
-```
-
-### Changing fontFamily via directive
-
-The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif:
-
-`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
-
-Example:
-
-```mermaid-example
-%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
-graph TD
-A(Forest) --> B[/Another/]
-A --> C[End]
-  subgraph section
-  B
-  C
-  end
-```
-
-### Changing logLevel via directive
-
-The following code snippet changes logLevel to 2:
-
-`%%{init: { "logLevel": 2 } }%%`
-
-Possible logLevel values are:
-
-- `1` for _debug_,
-- `2` for _info_
-- `3` for _warn_
-- `4` for _error_
-- `5` for _only fatal errors_
-
-Default Value is `5`.
-
-Example:
-
-```mermaid-example
-%%{init: { "logLevel": 2 } }%%
-graph TD
-A(Forest) --> B[/Another/]
-A --> C[End]
-  subgraph section
-  B
-  C
-  end
-```
-
-### Changing flowchart config via directive
-
-Some common flowchart configurations are:
-
-- _htmlLabels_: true/false
-- _curve_: linear/curve
-- _diagramPadding_: number
-- _useMaxWidth_: number
-
-For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
-_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
-
-The following code snippet changes flowchart config:
-
-`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
-
-Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.
-
-```mermaid-example
-%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
-graph TD
-A(Forest) --> B[/Another/]
-A --> C[End]
-  subgraph section
-  B
-  C
-  end
-```
-
-### Changing Sequence diagram config via directive
-
-Some common sequence configurations are:
-
-- _width_: number
-- _height_: number
-- _messageAlign_: left, center, right
-- _mirrorActors_: boolean
-- _useMaxWidth_: boolean
-- _rightAngles_: boolean
-- _showSequenceNumbers_: boolean
-- _wrap_: boolean
-
-For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code.
-_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
-
-So, `wrap` by default has a value of `false` for sequence diagrams.
-
-Let us see an example:
-
-```mermaid-example
-sequenceDiagram
-
-Alice->Bob: Hello Bob, how are you?
-Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
-Alice->Bob: Good.
-Bob->Alice: Cool
-```
-
-Now let us enable wrap for sequence diagrams.
-
-The following code snippet changes sequence diagram config for `wrap` to `true`:
-
-`%%{init: { "sequence": { "wrap": true} } }%%`
-
-Using in the diagram above, the wrap will be enabled.
-
-```mermaid-example
-%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
-sequenceDiagram
-Alice->Bob: Hello Bob, how are you?
-Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
-Alice->Bob: Good.
-Bob->Alice: Cool
-```
diff --git a/vdocs/intro/img/Code-Preview-Config.png b/vdocs/intro/img/Code-Preview-Config.png
deleted file mode 100644
index 426e6bf633..0000000000
Binary files a/vdocs/intro/img/Code-Preview-Config.png and /dev/null differ
diff --git a/vdocs/intro/img/Live-Editor-Choices.png b/vdocs/intro/img/Live-Editor-Choices.png
deleted file mode 100644
index 5b4c2086db..0000000000
Binary files a/vdocs/intro/img/Live-Editor-Choices.png and /dev/null differ
diff --git a/vdocs/intro/img/book-banner-post-release.jpg b/vdocs/intro/img/book-banner-post-release.jpg
deleted file mode 100644
index 9ce3cc6fc7..0000000000
Binary files a/vdocs/intro/img/book-banner-post-release.jpg and /dev/null differ
diff --git a/vdocs/intro/index.md b/vdocs/intro/index.md
deleted file mode 100644
index e2f36651f4..0000000000
--- a/vdocs/intro/index.md
+++ /dev/null
@@ -1,398 +0,0 @@
-# About Mermaid
-
-**Mermaid lets you create diagrams and visualizations using text and code.**
-
-It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
-
-> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
-
-<img src="/header.png" alt="" />
-
-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
-
-<!-- Mermaid book banner -->
-
-[![Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
-
-<!-- <Main description> -->
-
-Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
-
-> Doc-Rot is a Catch-22 that Mermaid helps to solve.
-
-Diagramming and documentation costs precious developer time and gets outdated quickly.
-But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
-Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
-<br/>
-Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](../config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md).
-
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md).
-
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](../community/CHANGELOG.md) | 🔌 [Plug-Ins](../misc/integrations.md)
-
-::: warning 🖖
-Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
-:::
-
-:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
-
-**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
-
-In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
-
-<a href="https://applitools.com/">
-<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
-</a>
-
-## Diagram Types
-
-### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
-
-```mmd
-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)
-
-```mmd
-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 <br/>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 <br/>prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-### [Gantt diagram](../syntax/gantt.md)
-
-```mmd
-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)
-
-```mmd
-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
-
-```mmd
-    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)
-
-```mmd
-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)
-
-```mmd
-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
-```
-
-## Installation
-
-**In depth guides and examples can be found at [Getting Started](n00b-gettingStarted) and [Usage](../config/usage).**
-
-**It would also be helpful to learn more about mermaid's [Syntax](n00b-syntaxReference).**
-
-### CDN
-
-```
-https://unpkg.com/mermaid@<version>/dist/
-```
-
-To select a version:
-
-Replace `<version>` with the desired version number.
-
-Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
-
-## Deploying Mermaid
-
-To Deploy Mermaid:
-
-1. You will need to install node v16, which would have npm
-2. Download yarn using npm
-3. Enter the following command: `yarn add mermaid`
-4. You can then add mermaid as a dev dependency using this command:
-   `yarn add --dev mermaid`
-
-### [Mermaid API](../config/Setup.md):
-
-**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
-</script>
-```
-
-**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
-
-**Examples can be found at** [Other examples](../syntax/examples)
-
-## Sibling projects
-
-- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
-- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
-- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
-- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
-
-## Request for Assistance
-
-Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate
-with the future development of mermaid.
-
-As part of this team you would get write access to the repository and would
-represent the project when answering questions and issues.
-
-Together we could continue the work with things like:
-
-- Adding more types of diagrams like mindmaps, ert diagrams, etc.
-- Improving existing diagrams
-
-Don't hesitate to contact me if you want to get involved!
-
-## For contributors
-
-### Setup
-
-```sh
-yarn install
-```
-
-### Build
-
-```sh
-yarn build:watch
-```
-
-### Lint
-
-```sh
-yarn lint
-```
-
-We use [eslint](https://eslint.org/).
-We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/integrations) to get real time lint result.
-
-### Test
-
-```sh
-yarn test
-```
-
-Manual test in browser: open `dist/index.html`
-
-### Release
-
-For those who have the permission to do so:
-
-Update version number in `package.json`.
-
-```sh
-npm publish
-```
-
-The above command generates files into the `dist` folder and publishes them to npmjs.org.
-
-## Related projects
-
-- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
-- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
-- [HTTP Server](https://github.com/TomWright/mermaid-server)
-
-## Contributors
-
-[![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
-
-Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
-
-Detailed information about how to contribute can be found in the [contribution guide](#)
-
-## 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.
-
-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.
-
-_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
-
-## Reporting vulnerabilities
-
-To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
-
-## Appreciation
-
-A quick note from Knut Sveidqvist:
-
-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
->
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
-
----
-
-_Mermaid was created by Knut Sveidqvist for easier documentation._
-
-<style scoped>
-  #contributors + p,
-  #about-mermaid + p + p + blockquote + img + p
-  {
-    display: flex
-  }
-
-  #contributors + p a,
-  #about-mermaid + p + p + blockquote + img + p a
-  {
-    margin: 0 0.5rem
-  }
-
-  .dark #VPContent > div > div > div.content > div > main > div > div > img
-  {
-    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
-  }
-</style>
diff --git a/vdocs/misc/faq.md b/vdocs/misc/faq.md
deleted file mode 100644
index 698061deff..0000000000
--- a/vdocs/misc/faq.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Frequently Asked Questions
-
-1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
-1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
-1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
diff --git a/vdocs/public/.nojekyll b/vdocs/public/.nojekyll
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/vdocs/public/header.png b/vdocs/public/header.png
deleted file mode 100644
index 6db8635c9d..0000000000
Binary files a/vdocs/public/header.png and /dev/null differ
diff --git a/vdocs/syntax/c4c.md b/vdocs/syntax/c4c.md
deleted file mode 100644
index 0ab805182c..0000000000
--- a/vdocs/syntax/c4c.md
+++ /dev/null
@@ -1,363 +0,0 @@
-# C4 Diagrams
-
-> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
-
-Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
-
-```mermaid-example
-    C4Context
-      title System Context diagram for Internet Banking System
-      Enterprise_Boundary(b0, "BankBoundary0") {
-        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")
-        Person_Ext(customerC, "Banking Customer C", "desc")
-
-        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-        Enterprise_Boundary(b1, "BankBoundary") {
-
-          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-          System_Boundary(b2, "BankBoundary2") {
-            System(SystemA, "Banking System A")
-            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
-          }
-
-          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-          Boundary(b3, "BankBoundary3", "boundary") {
-            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
-            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-          }
-        }
-      }
-
-      BiRel(customerA, SystemAA, "Uses")
-      BiRel(SystemAA, SystemE, "Uses")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      Rel(SystemC, customerA, "Sends e-mails to")
-
-      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
-      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
-      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
-      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
-      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-
-      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
-
-
-```
-
-For an example, see the source code demos/index.html
-
-5 types of C4 charts are supported.
-
-- System Context (C4Context)
-- Container diagram (C4Container)
-- Component diagram (C4Component)
-- Dynamic diagram (C4Dynamic)
-- Deployment diagram (C4Deployment)
-
-Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
-
-C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
-updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
-
-The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements.
-The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
-
-- Layout
-- - Lay_U, Lay_Up
-- - Lay_D, Lay_Down
-- - Lay_L, Lay_Left
-- - Lay_R, Lay_Right
-
-The following unfinished features are not supported in the short term.
-
-- [ ] sprite
-- [ ] tags
-- [ ] link
-- [ ] Legend
-
-- [x] System Context
-- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
-- - [x] Person_Ext
-- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
-- - [x] SystemDb
-- - [x] SystemQueue
-- - [x] System_Ext
-- - [x] SystemDb_Ext
-- - [x] SystemQueue_Ext
-- - [x] Boundary(alias, label, ?type, ?tags, $link)
-- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
-- - [x] System_Boundary
-
-- [x] Container diagram
-- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [x] ContainerDb
-- - [x] ContainerQueue
-- - [x] Container_Ext
-- - [x] ContainerDb_Ext
-- - [x] ContainerQueue_Ext
-- - [x] Container_Boundary(alias, label, ?tags, $link)
-
-- [x] Component diagram
-- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [x] ComponentDb
-- - [x] ComponentQueue
-- - [x] Component_Ext
-- - [x] ComponentDb_Ext
-- - [x] ComponentQueue_Ext
-
-- [x] Dynamic diagram
-- - [x] RelIndex(index, from, to, label, ?tags, $link)
-
-- [x] Deployment diagram
-- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
-- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
-- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
-- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
-
-- [x] Relationship Types
-- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [x] BiRel (bidirectional relationship)
-- - [x] Rel_U, Rel_Up
-- - [x] Rel_D, Rel_Down
-- - [x] Rel_L, Rel_Left
-- - [x] Rel_R, Rel_Right
-- - [x] Rel_Back
-- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
-
-- [ ] Custom tags/stereotypes support and skinparam updates
-- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
-- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
-- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
-- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
-- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
-- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
-- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
-- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
-- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
-- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
-
-There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
-
-Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
-
-```
-UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
-UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
-UpdateRelStyle(customerA, bankA, $offsetY="60")
-
-```
-
-## C4 System Context Diagram (C4Context)
-
-```mermaid-example
-    C4Context
-      title System Context diagram for Internet Banking System
-      Enterprise_Boundary(b0, "BankBoundary0") {
-        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")
-        Person_Ext(customerC, "Banking Customer C", "desc")
-
-        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-        Enterprise_Boundary(b1, "BankBoundary") {
-
-          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-          System_Boundary(b2, "BankBoundary2") {
-            System(SystemA, "Banking System A")
-            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
-          }
-
-          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-          Boundary(b3, "BankBoundary3", "boundary") {
-            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
-            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-          }
-        }
-      }
-
-      BiRel(customerA, SystemAA, "Uses")
-      BiRel(SystemAA, SystemE, "Uses")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      Rel(SystemC, customerA, "Sends e-mails to")
-
-      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
-      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
-      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
-      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
-      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-
-      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
-
-```
-
-## C4 Container diagram (C4Container)
-
-```mermaid-example
-    C4Container
-    title Container diagram for Internet Banking System
-
-    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
-    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
-
-    Container_Boundary(c1, "Internet Banking") {
-        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
-        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
-        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
-        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
-        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
-
-    }
-
-    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Rel(customer, web_app, "Uses", "HTTPS")
-    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
-    Rel(customer, spa, "Uses", "HTTPS")
-    UpdateRelStyle(customer, spa, $offsetY="-40")
-    Rel(customer, mobile_app, "Uses")
-    UpdateRelStyle(customer, mobile_app, $offsetY="-30")
-
-    Rel(web_app, spa, "Delivers")
-    UpdateRelStyle(web_app, spa, $offsetX="130")
-    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
-
-    Rel(email_system, customer, "Sends e-mails to")
-    UpdateRelStyle(email_system, customer, $offsetX="-45")
-    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
-    UpdateRelStyle(backend_api, email_system, $offsetY="-60")
-    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
-
-```
-
-## C4 Component diagram (C4Component)
-
-```mermaid-example
-    C4Component
-    title Component diagram for Internet Banking System - API Application
-
-    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
-    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Container_Boundary(api, "API Application") {
-        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
-        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
-        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
-        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
-
-        Rel(sign, security, "Uses")
-        Rel(accounts, mbsfacade, "Uses")
-        Rel(security, db, "Read & write to", "JDBC")
-        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
-    }
-
-    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
-    Rel(spa, accounts, "Uses", "JSON/HTTPS")
-
-    Rel(ma, sign, "Uses", "JSON/HTTPS")
-    Rel(ma, accounts, "Uses", "JSON/HTTPS")
-
-    UpdateRelStyle(spa, sign, $offsetY="-40")
-    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
-
-    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
-    UpdateRelStyle(ma, accounts, $offsetY="-40")
-
-        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
-        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
-        UpdateRelStyle(security, db, $offsetY="-40")
-        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
-
-```
-
-## C4 Dynamic diagram (C4Dynamic)
-
-```mermaid-example
-    C4Dynamic
-    title Dynamic diagram for Internet Banking System - API Application
-
-    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
-    Container_Boundary(b, "API Application") {
-      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
-      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
-    }
-    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
-    Rel(c2, c3, "Calls isAuthenticated() on")
-    Rel(c3, c4, "select * from users where username = ?", "JDBC")
-
-    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
-    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
-    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
-
-```
-
-## C4 Deployment diagram (C4Deployment)
-
-```mermaid-example
-    C4Deployment
-    title Deployment Diagram for Internet Banking System - Live
-
-    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
-        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
-    }
-
-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
-        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
-            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
-        }
-    }
-
-    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
-        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
-            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
-                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
-            }
-        }
-        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
-            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
-                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
-            }
-        }
-        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
-            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
-                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-            }
-        }
-        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
-            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
-                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-            }
-        }
-    }
-
-    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
-    Rel(spa, api, "Makes API calls to", "json/HTTPS")
-    Rel_U(web, spa, "Delivers to the customer's web browser")
-    Rel(api, db, "Reads from and writes to", "JDBC")
-    Rel(api, db2, "Reads from and writes to", "JDBC")
-    Rel_R(db, db2, "Replicates data to")
-
-    UpdateRelStyle(spa, api, $offsetY="-40")
-    UpdateRelStyle(web, spa, $offsetY="-40")
-    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
-    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
-    UpdateRelStyle(db, db2, $offsetY="-10")
-
-```
diff --git a/vdocs/syntax/classDiagram.md b/vdocs/syntax/classDiagram.md
deleted file mode 100644
index be77f1a1ab..0000000000
--- a/vdocs/syntax/classDiagram.md
+++ /dev/null
@@ -1,625 +0,0 @@
-# Class diagrams
-
-> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
-> Wikipedia
-
-The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
-
-Mermaid can render class diagrams.
-
-```mermaid-example
-classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-        +String beakColor
-        +swim()
-        +quack()
-    }
-    class Fish{
-        -int sizeInFeet
-        -canEat()
-    }
-    class Zebra{
-        +bool is_wild
-        +run()
-    }
-```
-
-## Syntax
-
-### Class
-
-UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
-A single instance of a class in the diagram contains three compartments:
-
-- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
-- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
-- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
-
-```mermaid-example
-classDiagram
-    class BankAccount
-    BankAccount : +String owner
-    BankAccount : +Bigdecimal balance
-    BankAccount : +deposit(amount)
-    BankAccount : +withdrawal(amount)
-
-```
-
-## Define a class
-
-There are two ways to define a class:
-
-- Explicitly using keyword **class** like `class Animal` which would define the Animal class.
-- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`.
-
-```mermaid-example
-classDiagram
-    class Animal
-    Vehicle <|-- Car
-```
-
-Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
-
-## Defining Members of a class
-
-UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.
-
-Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes.
-
-There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :
-
-- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
-
-```mermaid-example
-classDiagram
-class BankAccount
-BankAccount : +String owner
-BankAccount : +BigDecimal balance
-BankAccount : +deposit(amount)
-BankAccount : +withdrawal(amount)
-```
-
-- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
-
-```mermaid-example
-classDiagram
-class BankAccount{
-    +String owner
-    +BigDecimal balance
-    +deposit(amount)
-    +withdrawal(amount)
-}
-```
-
-#### Return Type
-
-Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
-
-```mermaid-example
-classDiagram
-class BankAccount{
-    +String owner
-    +BigDecimal balance
-    +deposit(amount) bool
-    +withdrawal(amount) int
-}
-```
-
-#### Generic Types
-
-Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). Note: **nested** type declarations such as `List<List<int>>` are not currently supported.
-
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
-
-```mermaid-example
-classDiagram
-class Square~Shape~{
-    int id
-    List~int~ position
-    setPoints(List~int~ points)
-    getPoints() List~int~
-}
-
-Square : -List~string~ messages
-Square : +setMessages(List~string~ messages)
-Square : +getMessages() List~string~
-```
-
-#### Return Type
-
-Optionally you can end the method/function definition with the data type that will be returned.
-
-#### Visibility
-
-To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:
-
-- `+` Public
-- `-` Private
-- `#` Protected
-- `~` Package/Internal
-
-> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
->
-> - `*` Abstract e.g.: `someAbstractMethod()*`
-> - `$` Static e.g.: `someStaticMethod()$`
-
-> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
->
-> - `$` Static e.g.: `String someField$`
-
-## Defining Relationship
-
-A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
-
-```
-[classA][Arrow][ClassB]
-```
-
-There are eight different types of relations defined for classes under UML which are currently supported:
-
-| Type  | Description   |
-| ----- | ------------- |
-| <\|-- | Inheritance   |
-| \*--  | Composition   |
-| o--   | Aggregation   |
-| -->   | Association   |
-| --    | Link (Solid)  |
-| ..>   | Dependency    |
-| ..\|> | Realization   |
-| ..    | Link (Dashed) |
-
-```mermaid-example
-classDiagram
-classA <|-- classB
-classC *-- classD
-classE o-- classF
-classG <-- classH
-classI -- classJ
-classK <.. classL
-classM <|.. classN
-classO .. classP
-
-```
-
-We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:
-
-```mermaid-example
-classDiagram
-classA --|> classB : Inheritance
-classC --* classD : Composition
-classE --o classF : Aggregation
-classG --> classH : Association
-classI -- classJ : Link(Solid)
-classK ..> classL : Dependency
-classM ..|> classN : Realization
-classO .. classP : Link(Dashed)
-
-```
-
-### Labels on Relations
-
-It is possible to add label text to a relation:
-
-```
-[classA][Arrow][ClassB]:LabelText
-```
-
-```mermaid-example
-classDiagram
-classA <|-- classB : implements
-classC *-- classD : composition
-classE o-- classF : aggregation
-```
-
-### Two-way relations
-
-Relations can logically represent an N:M association:
-
-```mmd
-classDiagram
-    Animal <|--|> Zebra
-```
-
-Here is the syntax:
-
-```
-[Relation Type][Link][Relation Type]
-```
-
-Where `Relation Type` can be one of:
-
-| Type | Description |
-| ---- | ----------- |
-| <\|  | Inheritance |
-| \*   | Composition |
-| o    | Aggregation |
-| >    | Association |
-| <    | Association |
-| \|>  | Realization |
-
-And `Link` can be one of:
-
-| Type | Description |
-| ---- | ----------- |
-| --   | Solid       |
-| ..   | Dashed      |
-
-## Cardinality / Multiplicity on relations
-
-Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.
-
-Multiplicity notations are placed near the end of an association.
-
-The different cardinality options are :
-
-- `1` Only 1
-- `0..1` Zero or One
-- `1..*` One or more
-- `*` Many
-- `n` n {where n>1}
-- `0..n` zero to n {where n>1}
-- `1..n` one to n {where n>1}
-
-Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
-
-```
-[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
-```
-
-```mermaid-example
-classDiagram
-    Customer "1" --> "*" Ticket
-    Student "1" --> "1..*" Course
-    Galaxy --> "many" Star : Contains
-```
-
-## Annotations on classes
-
-It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
-
-- `<<Interface>>` To represent an Interface class
-- `<<Abstract>>` To represent an abstract class
-- `<<Service>>` To represent a service class
-- `<<Enumeration>>` To represent an enum
-
-Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
-
-- In a **_separate line_** after a class is defined:
-
-```mermaid-example
-classDiagram
-class Shape
-<<interface>> Shape
-Shape : noOfVertices
-Shape : draw()
-```
-
-- In a **_nested structure_** along with the class definition:
-
-```mermaid-example
-classDiagram
-class Shape{
-    <<interface>>
-    noOfVertices
-    draw()
-}
-class Color{
-    <<enumeration>>
-    RED
-    BLUE
-    GREEN
-    WHITE
-    BLACK
-}
-
-```
-
-## Comments
-
-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
-classDiagram
-%% This whole line is a comment classDiagram class Shape <<interface>>
-class Shape{
-    <<interface>>
-    noOfVertices
-    draw()
-}
-```
-
-## Setting the direction of the diagram
-
-With class diagrams you can use the direction statement to set the direction in which the diagram will render:
-
-```mermaid-example
-classDiagram
-  direction RL
-  class Student {
-    -idCard : IdCard
-  }
-  class IdCard{
-    -id : int
-    -name : string
-  }
-  class Bike{
-    -id : int
-    -name : string
-  }
-  Student "1" --o "1" IdCard : carries
-  Student "1" --o "1" Bike : rides
-```
-
-## Interaction
-
-It is possible to bind a click event to a node. 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'`.
-
-You would define these actions on a separate line after all classes have been declared.
-
-```
-action className "reference" "tooltip"
-click className call callback() "tooltip"
-click className href "url" "tooltip"
-```
-
-- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
-- _className_ is the id of the node that the action will be associated with
-- _reference_ is either the url link, or the function name for callback.
-- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
-- note: callback function will be called with the nodeId as parameter.
-
-### Examples
-
-_URL Link:_
-
-```mmd
-classDiagram
-class Shape
-link Shape "https://www.github.com" "This is a tooltip for a link"
-class Shape2
-click Shape2 href "https://www.github.com" "This is a tooltip for a link"
-```
-
-_Callback:_
-
-```mmd
-classDiagram
-class Shape
-callback Shape "callbackFunction" "This is a tooltip for a callback"
-class Shape2
-click Shape2 call callbackFunction() "This is a tooltip for a callback"
-```
-
-```html
-<script>
-  const callbackFunction = function () {
-    alert('A callback was triggered');
-  };
-</script>
-```
-
-```mermaid
-classDiagram
-    class Class01
-    class Class02
-    callback Class01 "callbackFunction" "Callback tooltip"
-    link Class02 "https://www.github.com" "This is a link"
-    class Class03
-    class Class04
-    click Class03 call callbackFunction() "Callback tooltip"
-    click Class04 href "https://www.github.com" "This is a link"
-```
-
-> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
-
-Beginner's tip—a full example using interactive links in an HTML page:
-
-```html
-<body>
-  <pre class="mermaid">
-    classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-      }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-      }
-    class Zebra{
-      +bool is_wild
-      +run()
-      }
-
-      callback Duck callback "Tooltip"
-      link Zebra "https://www.github.com" "This is a link"
-  </pre>
-
-  <script>
-    const callback = function () {
-      alert('A callback was triggered');
-    };
-    const config = {
-      startOnLoad: true,
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-```
-
-## Styling
-
-### Styling a node
-
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition:
-
-```html
-<style>
-  .cssClass > rect {
-    fill: #ff0000;
-    stroke: #ffff00;
-    stroke-width: 4px;
-  }
-</style>
-```
-
-Then attaching that class to a specific node:
-
-```
-    cssClass "nodeId1" cssClass;
-```
-
-It is also possible to attach a class to a list of nodes in one statement:
-
-```
-    cssClass "nodeId1,nodeId2" cssClass;
-```
-
-A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
-
-```mmd
-classDiagram
-    class Animal:::cssClass
-```
-
-Or:
-
-```mmd
-classDiagram
-    class Animal:::cssClass {
-        -int sizeInFeet
-        -canEat()
-    }
-```
-
-?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
-
-?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
-
-### Default Styles
-
-The main styling of the class diagram is done with a preset number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss. The classes used here are described below:
-
-| Class              | Description                                                       |
-| ------------------ | ----------------------------------------------------------------- |
-| g.classGroup text  | Styles for general class text                                     |
-| classGroup .title  | Styles for general class title                                    |
-| g.classGroup rect  | Styles for class diagram rectangle                                |
-| g.classGroup line  | Styles for class diagram line                                     |
-| .classLabel .box   | Styles for class label box                                        |
-| .classLabel .label | Styles for class label text                                       |
-| composition        | Styles for composition arrow head and arrow line                  |
-| aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
-| dependency         | Styles for dependency arrow head and arrow line                   |
-
-#### Sample stylesheet
-
-```scss
-body {
-  background: white;
-}
-
-g.classGroup text {
-  fill: $nodeBorder;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  font-size: 10px;
-
-  .title {
-    font-weight: bolder;
-  }
-}
-
-g.classGroup rect {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-}
-
-g.classGroup line {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-.classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: $nodeBkg;
-  opacity: 0.5;
-}
-
-.classLabel .label {
-  fill: $nodeBorder;
-  font-size: 10px;
-}
-
-.relation {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-  fill: none;
-}
-
-@mixin composition {
-  fill: $nodeBorder;
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-#compositionStart {
-  @include composition;
-}
-
-#compositionEnd {
-  @include composition;
-}
-
-@mixin aggregation {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-#aggregationStart {
-  @include aggregation;
-}
-
-#aggregationEnd {
-  @include aggregation;
-}
-
-#dependencyStart {
-  @include composition;
-}
-
-#dependencyEnd {
-  @include composition;
-}
-
-#extensionStart {
-  @include composition;
-}
-
-#extensionEnd {
-  @include composition;
-}
-```
-
-## Configuration
-
-`Coming soon`
diff --git a/vdocs/syntax/flowchart.md b/vdocs/syntax/flowchart.md
deleted file mode 100644
index cbec4ae627..0000000000
--- a/vdocs/syntax/flowchart.md
+++ /dev/null
@@ -1,699 +0,0 @@
-# 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.
-
-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).\*\*
-
-### A node (default)
-
-```mermaid-example
-flowchart LR
-    id
-```
-
-> **Note** The id is what is displayed in the box.
-
-### A node 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 node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
-one previously defined will be used when rendering the box.
-
-```mermaid-example
-flowchart LR
-    id1[This is the text in the box]
-```
-
-## Graph
-
-This statement declares the direction of the Flowchart.
-
-This declares the flowchart is oriented from top to bottom (`TD` or `TB`).
-
-```mermaid-example
-flowchart TD
-    Start --> Stop
-```
-
-This declares the flowchart is oriented from left to right (`LR`).
-
-```mermaid-example
-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
-
-## Node shapes
-
-### A node with round edges
-
-```mermaid-example
-flowchart LR
-    id1(This is the text in the box)
-```
-
-### A stadium-shaped node
-
-```mermaid-example
-flowchart LR
-    id1([This is the text in the box])
-```
-
-### A node in a subroutine shape
-
-```mermaid-example
-flowchart LR
-    id1[[This is the text in the box]]
-```
-
-### A node in a cylindrical shape
-
-```mermaid-example
-flowchart LR
-    id1[(Database)]
-```
-
-### A node in the form of a circle
-
-```mermaid-example
-flowchart LR
-    id1((This is the text in the circle))
-```
-
-### A node in an asymmetric shape
-
-```mermaid-example
-flowchart LR
-    id1>This is the text in the box]
-```
-
-Currently only the shape above is possible and not its mirror. _This might change with future releases._
-
-### A node (rhombus)
-
-```mermaid-example
-flowchart LR
-    id1{This is the text in the box}
-```
-
-### A hexagon node
-
-Code:
-
-```mmd
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
-Render:
-
-```mermaid
-flowchart LR
-    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 nodes
-
-Nodes 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
-flowchart LR
-    A-->B
-```
-
-### An open link
-
-```mermaid-example
-flowchart LR
-    A --- B
-```
-
-### Text on links
-
-```mermaid-example
-flowchart LR
-    A-- This is the text! ---B
-```
-
-or
-
-```mermaid-example
-flowchart LR
-    A---|This is the text|B
-```
-
-### A link with arrow head and text
-
-```mermaid-example
-flowchart LR
-    A-->|text|B
-```
-
-or
-
-```mermaid-example
-flowchart LR
-    A-- text -->B
-```
-
-### Dotted link
-
-```mermaid-example
-flowchart LR;
-   A-.->B;
-```
-
-### Dotted link with text
-
-```mermaid-example
-flowchart LR
-   A-. text .-> B
-```
-
-### Thick link
-
-```mermaid-example
-flowchart LR
-   A ==> B
-```
-
-### Thick link with text
-
-```mermaid-example
-flowchart LR
-   A == text ==> B
-```
-
-### Chaining of links
-
-It is possible declare many links in the same line as per below:
-
-```mermaid-example
-flowchart LR
-   A -- text --> B -- text2 --> C
-```
-
-It is also possible to declare multiple nodes links in the same line as per below:
-
-```mermaid-example
-flowchart LR
-   a --> b & c--> d
-```
-
-You can then describe dependencies in a very expressive way. Like the one-liner below:
-
-```mermaid-example
-flowchart TB
-    A & B--> C & D
-```
-
-If you describe the same diagram using the the basic syntax, it will take four lines. A
-word of warning, one could go overboard with this making the flowchart harder to read in
-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
-flowchart TB
-    A --> C
-    A --> D
-    B --> C
-    B --> D
-```
-
-### New arrow types
-
-There are new types of arrows supported as per below:
-
-```mermaid-example
-flowchart LR
-    A --o B
-    B --x C
-```
-
-### Multi directional arrows
-
-There is the possibility to use multidirectional arrows.
-
-```mermaid-example
-flowchart LR
-    A o--o B
-    B <--> C
-    C x--x D
-```
-
-### Minimum length of a link
-
-Each node in the flowchart is ultimately assigned to a rank in the rendered
-graph, i.e. to a vertical or horizontal level (depending on the flowchart
-orientation), based on the nodes to which it is linked. By default, links
-can span any number of ranks, but you can ask for any link to be longer
-than the others by adding extra dashes in the link definition.
-
-In the following example, two extra dashes are added in the link from node _B_
-to node _E_, so that it spans two more ranks than regular links:
-
-```mermaid-example
-flowchart TD
-    A[Start] --> B{Is it?}
-    B -->|Yes| C[OK]
-    C --> D[Rethink]
-    D --> B
-    B ---->|No| E[End]
-```
-
-> **Note** Links may still be made longer than the requested number of ranks
-> by the rendering engine to accommodate other requests.
-
-When the link label is written in the middle of the link, the extra dashes must
-be added on the right side of the link. The following example is equivalent to
-the previous one:
-
-```mermaid-example
-flowchart TD
-    A[Start] --> B{Is it?}
-    B -- Yes --> C[OK]
-    C --> D[Rethink]
-    D --> B
-    B -- No ----> E[End]
-```
-
-For dotted or thick links, the characters to add are equals signs or dots,
-as summed up in the following table:
-
-| Length            |   1    |    2    |    3     |
-| ----------------- | :----: | :-----: | :------: |
-| Normal            | `---`  | `----`  | `-----`  |
-| Normal with arrow | `-->`  | `--->`  | `---->`  |
-| Thick             | `===`  | `====`  | `=====`  |
-| Thick with arrow  | `==>`  | `===>`  | `====>`  |
-| Dotted            | `-.-`  | `-..-`  | `-...-`  |
-| Dotted with arrow | `-.->` | `-..->` | `-...->` |
-
-## 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
-flowchart LR
-    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
-    flowchart LR
-        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.
-
-## Subgraphs
-
-```
-subgraph title
-    graph definition
-end
-```
-
-An example below:
-
-```mermaid-example
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-```
-
-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
-flowchart LR
-  subgraph TOP
-    direction TB
-    subgraph B1
-        direction RL
-        i1 -->f1
-    end
-    subgraph B2
-        direction BT
-        i2 -->f2
-    end
-  end
-  A --> TOP --> B
-  B1 --> B2
-```
-
-## Interaction
-
-It is possible to bind a click event to a node, 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 nodeId callback
-click nodeId call callback()
-```
-
-- nodeId is the id of the node
-- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
-
-Examples of tooltip usage below:
-
-```html
-<script>
-  const callback = function () {
-    alert('A callback was triggered');
-  };
-</script>
-```
-
-The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
-
-```mermaid-example
-flowchart LR
-    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"
-```
-
-> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
-
-?> 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/).
-
-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):
-
-```mermaid-example
-flowchart LR
-    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
-```
-
-Beginner's tip—a full example using interactive links in a html context:
-
-```html
-<body>
-  <pre class="mermaid">
-    flowchart LR
-        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"
-  </pre>
-
-  <script>
-    const callback = function () {
-      alert('A callback was triggered');
-    };
-    const config = {
-      startOnLoad: true,
-      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-```
-
-### 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
-
-```mmd
-flowchart LR
-%% this is a comment A -- text --> B{node}
-   A -- text --> B -- text2 --> C
-```
-
-## Styling and classes
-
-### Styling links
-
-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 nodes, 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;
-```
-
-### 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`, `bump`, `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 node
-
-It is possible to apply specific styles such as a thicker border or a different background color to a node.
-
-```mermaid-example
-flowchart LR
-    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 nodes that
-should have a different look.
-
-a class definition looks like the example below:
-
-```
-    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
-```
-
-Attachment of a class to a node is done as per below:
-
-```
-    class nodeId1 className;
-```
-
-It is also possible to attach a class to a list of nodes in one statement:
-
-```
-    class nodeId1,nodeId2 className;
-```
-
-A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
-
-```mermaid-example
-flowchart LR
-    A:::someclass --> B
-    classDef someclass fill:#f96;
-```
-
-### 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
-<style>
-  .cssClass > rect {
-    fill: #ff0000;
-    stroke: #ffff00;
-    stroke-width: 4px;
-  }
-</style>
-```
-
-**Example definition**
-
-```mermaid-example
-flowchart LR;
-    A-->B[AAA<span>BBB</span>]
-    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#.
-
-```mmd
-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
-flowchart TD
-    B[<img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/brands/twitter.svg'> for peace .]
-    B-->C[<img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/solid/ban.svg'> forbidden .]
-    B-->D(<img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/solid/spinner.svg'> .)
-    B-->E(A <img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/solid/camera-retro.svg'> perhaps? .)
-```
-
-?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
-
-## 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
-flowchart LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
-## Configuration...
-
-Is it 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%
-}
-```
-
-<style>
-.fa, .fab, .fal, .far, .fas {
-    width: 16px;
-    height: 16px;
-    filter: opacity(0.5);
-}
-
-.dark .fa, .dark .fab, .dark .fal, .dark .far, .dark .fas {
-    width: 16px;
-    height: 16px;
-    filter: invert(1) opacity(0.5);
-}
-</style>
diff --git a/vdocs/syntax/img/Gantt-excluded-days-within.png b/vdocs/syntax/img/Gantt-excluded-days-within.png
deleted file mode 100644
index 2283bf99d8..0000000000
Binary files a/vdocs/syntax/img/Gantt-excluded-days-within.png and /dev/null differ
diff --git a/vdocs/syntax/img/Gantt-long-weekend-look.png b/vdocs/syntax/img/Gantt-long-weekend-look.png
deleted file mode 100644
index 1b2fc8e17e..0000000000
Binary files a/vdocs/syntax/img/Gantt-long-weekend-look.png and /dev/null differ
diff --git a/vdocs/syntax/pie.md b/vdocs/syntax/pie.md
deleted file mode 100644
index 75d377e4be..0000000000
--- a/vdocs/syntax/pie.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Pie chart diagrams
-
-> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-> -Wikipedia
-
-Mermaid can render Pie Chart diagrams.
-
-```mmd
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-```
-
-```mermaid
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-```
-
-## Syntax
-
-Drawing a pie chart is really simple in mermaid.
-
-- Start with `pie` keyword to begin the diagram
-  - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
-- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
-- Followed by dataSet
-  - `label` for a section in the pie diagram within `" "` quotes.
-  - Followed by `:` colon as separator
-  - Followed by `positive numeric value` (supported upto two decimal places)
-
-[pie] [showData] (OPTIONAL)
-[title] [titlevalue] (OPTIONAL)
-"[datakey1]" : [dataValue1]
-"[datakey2]" : [dataValue2]
-"[datakey3]" : [dataValue3]
-.
-.
-
-## Example
-
-```mermaid-example
-pie showData
-    title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 10.01
-    "Iron" :  5
-```
diff --git a/vdocs/syntax/requirementDiagram.md b/vdocs/syntax/requirementDiagram.md
deleted file mode 100644
index 7c221312b7..0000000000
--- a/vdocs/syntax/requirementDiagram.md
+++ /dev/null
@@ -1,158 +0,0 @@
-# Requirement Diagram
-
-> A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements. The modeling specs follow those defined by SysML v1.6.
-
-Rendering requirements is straightforward.
-
-```mermaid-example
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-```
-
-## Syntax
-
-There are three types of components to a requirement diagram: requirement, element, and relationship.
-
-The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.
-
-An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
-
-### Requirement
-
-A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
-
-```
-<type> user_defined_name {
-    id: user_defined_id
-    text: user_defined text
-    risk: <risk>
-    verifymethod: <method>
-}
-```
-
-Type, risk, and method are enumerations defined in SysML.
-
-| Keyword            | Options                                                                                                                 |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| Type               | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
-| Risk               | Low, Medium, High                                                                                                       |
-| VerificationMethod | Analysis, Inspection, Test, Demonstration                                                                               |
-
-### Element
-
-An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
-
-```
-element user_defined_name {
-    type: user_defined_type
-    docref: user_defined_ref
-}
-```
-
-### Relationship
-
-Relationships are comprised of a source node, destination node, and relationship type.
-
-Each follows the definition format of
-
-```
-{name of source} - <type> -> {name of destination}
-```
-
-or
-
-```
-{name of destination} <- <type> - {name of source}
-```
-
-"name of source" and "name of destination" should be names of requirement or element nodes defined elsewhere.
-
-A relationship type can be one of contains, copies, derives, satisfies, verifies, refines, or traces.
-
-Each relationship is labeled in the diagram.
-
-## Larger Example
-
-This example uses all features of the diagram.
-
-```mermaid-example
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    interfaceRequirement test_req4 {
-    id: 1.2.1
-    text: the fourth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    physicalRequirement test_req5 {
-    id: 1.2.2
-    text: the fifth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    designConstraint test_req6 {
-    id: 1.2.3
-    text: the sixth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-    element test_entity3 {
-    type: "test suite"
-    docRef: github.com/all_the_tests
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req3 - contains -> test_req4
-    test_req4 - derives -> test_req5
-    test_req5 - refines -> test_req6
-    test_entity3 - verifies -> test_req5
-    test_req <- copies - test_entity2
-```
diff --git a/vdocs/syntax/stateDiagram.md b/vdocs/syntax/stateDiagram.md
deleted file mode 100644
index e28819e7a2..0000000000
--- a/vdocs/syntax/stateDiagram.md
+++ /dev/null
@@ -1,260 +0,0 @@
-# State diagrams
-
-> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
-
-Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-Older renderer:
-
-```mermaid-example
-stateDiagram
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
-
-## States
-
-A state can be declared in multiple ways. The simplest way is to define a state id as a description.
-
-```mermaid-example
-stateDiagram-v2
-    s1
-```
-
-Another way is by using the state keyword with a description as per below:
-
-```mermaid-example
-stateDiagram-v2
-    state "This is a state description" as s2
-```
-
-Another way to define a state with a description is to define the state id followed by a colon and the description:
-
-```mermaid-example
-stateDiagram-v2
-    s2 : This is a state description
-```
-
-## Transitions
-
-Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
-
-When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
-
-```mermaid-example
-stateDiagram-v2
-    s1 --> s2
-```
-
-It is possible to add text to a transition. To describe what it represents.
-
-```mermaid-example
-stateDiagram-v2
-    s1 --> s2: A transition
-```
-
-## Start and End
-
-There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> s1
-    s1 --> [*]
-```
-
-## Composite states
-
-In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
-have several internal states. These are called composite states in this terminology.
-
-In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below:
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-```
-
-You can do this in several layers:
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> First
-
-    state First {
-        [*] --> Second
-
-        state Second {
-            [*] --> second
-            second --> Third
-
-            state Third {
-                [*] --> third
-                third --> [*]
-            }
-        }
-    }
-```
-
-You can also define transitions also between composite states:
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> First
-    First --> Second
-    First --> Third
-
-    state First {
-        [*] --> fir
-        fir --> [*]
-    }
-    state Second {
-        [*] --> sec
-        sec --> [*]
-    }
-    state Third {
-        [*] --> thi
-        thi --> [*]
-    }
-```
-
-_You can not define transitions between internal states belonging to different composite states_
-
-## Choice
-
-Sometimes you need to model a choice between two or more paths, you can do so using <<choice>>.
-
-```mermaid-example
-stateDiagram-v2
-    state if_state <<choice>>
-    [*] --> IsPositive
-    IsPositive --> if_state
-    if_state --> False: if n < 0
-    if_state --> True : if n >= 0
-```
-
-## Forks
-
-It is possible to specify a fork in the diagram using <<fork>> <<join>>.
-
-```mermaid-example
-   stateDiagram-v2
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-```
-
-## Notes
-
-Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
-
-Here you can choose to put the note to the _right of_ or to the _left of_ a node.
-
-```mermaid-example
-    stateDiagram-v2
-        State1: The state with a note
-        note right of State1
-            Important information! You can write
-            notes.
-        end note
-        State1 --> State2
-        note left of State2 : This is the note to the left.
-```
-
-## Concurrency
-
-As in plantUml you can specify concurrency using the -- symbol.
-
-```mermaid-example
-stateDiagram-v2
-    [*] --> Active
-
-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
-        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
-    }
-```
-
-## Setting the direction of the diagram
-
-With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
-
-```mermaid-example
-stateDiagram
-    direction LR
-    [*] --> A
-    A --> B
-    B --> C
-    state B {
-      direction LR
-      a --> b
-    }
-    B --> D
-```
-
-## Comments
-
-Comments can be entered within a state diagram 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
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-%% this is a comment
-    Still --> Moving
-    Moving --> Still %% another comment
-    Moving --> Crash
-    Crash --> [*]
-```
-
-## Styling
-
-Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
-
-## Spaces in state names
-
-Spaces can be added to a state by defining it at the top and referencing the acronym later.
-
-```mermaid-example
-stateDiagram-v2
-    Yswsii: Your state with spaces in it
-    [*] --> Yswsii
-```
Array of array of strings in typescript syntax