diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index a7ad03a7a..dbdc4b904 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -21,7 +21,7 @@ jobs: - uses: actions/setup-node@v3 name: Setup node with: - node-version: '16' + node-version: '18' - run: npm install -g cspell name: Install cSpell - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 9adbb177c..8ba06989d 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -39,4 +39,5 @@ jobs: run: pnpm run lint - name: Verify Docs + working-directory: ./packages/mermaid run: pnpm run docs:verify diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml new file mode 100644 index 000000000..85bc79f6e --- /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/.lintstagedrc.json b/.lintstagedrc.json index be6e92770..c43f5f89f 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,6 +1,3 @@ { - "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"] + "!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"] } diff --git a/.vscode/launch.json b/.vscode/launch.json index 92df7056e..83b80fa40 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 ed436a8d1..9ec68a917 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 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 90ae1ad4c..bcef7ae09 100644 --- a/README.md +++ b/README.md @@ -354,7 +354,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/cSpell.json b/cSpell.json index b9040b664..b6bf26fa4 100644 --- a/cSpell.json +++ b/cSpell.json @@ -2,21 +2,35 @@ "version": "0.2", "language": "en", "words": [ + "blockquotes", "customizability", "Gantt", "jison", - "knsv", - "Knut", + "mermiad", "mindmap", "Mindmaps", "mitigations", "sandboxed", - "Sveidqvist", + "shiki", "verdana", - "Visio", - "mermiad" + "Visio" ], "ignoreWords": [ + "Alois", + "Klink", + "knsv", + "Knut", + "Matthieu", + "Sidharth", + "Sveidqvist", + "Vinod", + "Faber", + "Orlandoni", + "Klemm", + "Mindaugas", + "Laganeckas", + "Cuzon", + "Yash", "Adamiecki", "applitools", "Asciidoctor", @@ -63,7 +77,9 @@ "Kaufmann", "viewports", "edgechromium", - "statediagram" + "statediagram", + "Brolin", + "Greywolf" ], "patterns": [ { diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 95c5c14c9..520adc7d9 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md). +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md). # Change Log @@ -13,10 +17,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/docs/Configuration.md b/docs/Configuration.md deleted file mode 100644 index 672925383..000000000 --- a/docs/Configuration.md +++ /dev/null @@ -1,22 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/Configuration.md](../packages/mermaid/src/docs/Configuration.md). - -# 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/docs/_navbar.md b/docs/_navbar.md deleted file mode 100644 index 3721b2f4e..000000000 --- a/docs/_navbar.md +++ /dev/null @@ -1,15 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/\_navbar.md](../packages/mermaid/src/docs/_navbar.md). - -- 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 a7872f609..000000000 --- a/docs/_sidebar.md +++ /dev/null @@ -1,46 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/\_sidebar.md](../packages/mermaid/src/docs/_sidebar.md). - -- πŸ“” 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/breakingChanges.md b/docs/breakingChanges.md deleted file mode 100644 index 27229e525..000000000 --- a/docs/breakingChanges.md +++ /dev/null @@ -1,51 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/breakingChanges.md](../packages/mermaid/src/docs/breakingChanges.md). - -# 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 - -``` - -or - -```html - -``` - -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 96% rename from docs/development.md rename to docs/community/development.md index ac261e44c..d7e9b7315 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 source file in [packages/mermaid/src/docs/development.md](../packages/mermaid/src/docs/development.md). +> **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 πŸ™Œ 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 58078723b..0747edc32 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 source file in [packages/mermaid/src/docs/n00b-overview.md](../packages/mermaid/src/docs/n00b-overview.md). +> **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) ## 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 93% rename from docs/newDiagram.md rename to docs/community/newDiagram.md index f03749982..da86f9838 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 source file in [packages/mermaid/src/docs/newDiagram.md](../packages/mermaid/src/docs/newDiagram.md). +> **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 πŸ“Š @@ -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; ``` @@ -69,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; ``` @@ -91,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: @@ -117,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 @@ -180,6 +181,7 @@ The syntax for adding title and description looks like this: 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 +201,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: @@ -226,7 +229,7 @@ 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](./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 89% rename from docs/security.md rename to docs/community/security.md index 8b9d9bc58..1825ed975 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 source file in [packages/mermaid/src/docs/security.md](../packages/mermaid/src/docs/security.md). +> **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 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 11940c622..5a7e58951 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 source file in [packages/mermaid/src/docs/8.6.0_docs.md](../packages/mermaid/src/docs/8.6.0_docs.md). +> **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). +This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](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.** @@ -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 , 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}%%` . -``` +> **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) +!\[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). 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 14f6dabac..696e31d83 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 source file in [packages/mermaid/src/docs/Tutorials.md](../packages/mermaid/src/docs/Tutorials.md). +> **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) **CodePen Examples:** diff --git a/docs/accessibility.md b/docs/config/accessibility.md similarity index 97% rename from docs/accessibility.md rename to docs/config/accessibility.md index dfcb139e7..8fa4aa3ac 100644 --- a/docs/accessibility.md +++ b/docs/config/accessibility.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/accessibility.md](../packages/mermaid/src/docs/accessibility.md). +> **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 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 03a32f313..c7b780143 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 source file in [packages/mermaid/src/docs/developer-docs/configuration.md](../../packages/mermaid/src/docs/developer-docs/configuration.md). +> **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 95% rename from docs/directives.md rename to docs/config/directives.md index 5d8407d9b..820eb72e9 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 source file in [packages/mermaid/src/docs/directives.md](../packages/mermaid/src/docs/directives.md). +> **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 @@ -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 } ``` 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 000000000..530ac93ab --- /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 e24b079da..5dd907429 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 source file in [packages/mermaid/src/docs/n00b-advanced.md](../packages/mermaid/src/docs/n00b-advanced.md). +> **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 000000000..1cf82797d --- /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 000000000..7ffd0b2bd --- /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:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L136) + +--- + +### 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:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L151) + +--- + +### 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 000000000..aea949fab --- /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:1882](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1882) + +--- + +### 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 000000000..1ef1853ed --- /dev/null +++ b/docs/config/setup/modules/mermaidAPI.md @@ -0,0 +1,123 @@ +> **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) + +## Variables + +### mermaidAPI + +β€’ `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `Promise`<`void`> ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `container?`: `Element`) => `Promise`<`void`> ; `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:546](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L546) + +## Functions + +### decodeEntities + +β–Έ **decodeEntities**(`text`): `string` + +#### Parameters + +| Name | Type | +| :----- | :------- | +| `text` | `string` | + +#### Returns + +`string` + +#### Defined in + +[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72) + +--- + +### encodeEntities + +β–Έ **encodeEntities**(`text`): `string` + +#### Parameters + +| Name | Type | +| :----- | :------- | +| `text` | `string` | + +#### Returns + +`string` + +#### Defined in + +[mermaidAPI.ts:46](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L46) diff --git a/docs/theming.md b/docs/config/theming.md similarity index 96% rename from docs/theming.md rename to docs/config/theming.md index 1a09eb868..cfd86caa0 100644 --- a/docs/theming.md +++ b/docs/config/theming.md @@ -1,4 +1,8 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/theming.md](../packages/mermaid/src/docs/theming.md). +> **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 @@ -152,9 +156,8 @@ You can create your own themes, by changing any of the given variables below. If ## Theme Variables Reference Table -```note -Variables that are unique to some diagrams can be affected by changes in Theme Variables -``` +> **Note** +> Variables that are unique to some diagrams can be affected by changes in Theme Variables | Variable | Default/Base/Factor value | Calc | Description | | -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | @@ -371,42 +374,6 @@ In the following examples, the directive `init` is used, with the `theme` being 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 diff --git a/docs/usage.md b/docs/config/usage.md similarity index 88% rename from docs/usage.md rename to docs/config/usage.md index a64e36f4c..9a2c63446 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 source file in [packages/mermaid/src/docs/usage.md](../packages/mermaid/src/docs/usage.md). +> **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). 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) The easiest way to integrate mermaid on a web page requires two elements: @@ -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). ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call @@ -339,9 +341,8 @@ 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. @@ -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 6257c8afb..000000000 --- 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 source file in [packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md](../../packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md). - ---- - -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 60a808f2c..000000000 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 a49b35224..000000000 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 3891f39c1..000000000 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 790fa7710..000000000 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 04df642dc..000000000 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 005a3282b..000000000 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 7db35ea7a..000000000 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 6dc996fd9..000000000 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 b85b165db..000000000 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 fde265f63..000000000 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 37537c18f..000000000 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 304b598b8..000000000 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 2da331a1e..000000000 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 5d3c7738d..000000000 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 bd9c8c97a..000000000 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 f37d523f8..000000000 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 6ebf41352..000000000 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 825d467d8..000000000 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 038408d2b..000000000 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 436bd2cba..000000000 --- a/docs/index.html +++ /dev/null @@ -1,192 +0,0 @@ - - - - - - mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, - gantt charts and git 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 86% rename from docs/README.md rename to docs/intro/index.md index 5eecf9796..21ed2b751 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 source file in [packages/mermaid/src/docs/README.md](../packages/mermaid/src/docs/README.md). +> **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,9 +10,9 @@ 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). - + [![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_) @@ -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](https://github.com/mermaid-js/mermaid/blob/develop/docs/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,8 +163,6 @@ Class01 : int gorilla Class08 <--> C2: Cool label ``` -![Class diagram](img/class.png) - ### Git graph ```mermaid-example @@ -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) and [Usage](../config/usage).** -**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).** ### CDN @@ -264,12 +256,12 @@ 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): **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:** @@ -282,7 +274,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)
 
 ## 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 83%
rename from docs/n00b-gettingStarted.md
rename to docs/intro/n00b-gettingStarted.md
index 76e9526b4..582070930 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 source file in [packages/mermaid/src/docs/n00b-gettingStarted.md](../packages/mermaid/src/docs/n00b-gettingStarted.md).
+> **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) 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
 
diff --git a/docs/n00b-syntaxReference.md b/docs/intro/n00b-syntaxReference.md
similarity index 70%
rename from docs/n00b-syntaxReference.md
rename to docs/intro/n00b-syntaxReference.md
index 85a7e688c..7c6d47e93 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 source file in [packages/mermaid/src/docs/n00b-syntaxReference.md](../packages/mermaid/src/docs/n00b-syntaxReference.md).
+> **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
 
@@ -38,33 +42,33 @@ erDiagram
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```
 
-The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
+The [Getting Started](n00b-gettingStarted) 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  |
+| 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  |
 
 ### 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) 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.
+The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](n00b-gettingStarted) 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 8c51ac1c5..000000000
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 2ef66ea2f..000000000
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 239b3f235..000000000
--- a/docs/mermaidCLI.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/mermaidCLI.md](../packages/mermaid/src/docs/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/faq.md b/docs/misc/faq.md
similarity index 83%
rename from docs/faq.md
rename to docs/misc/faq.md
index 0d8920178..c7155a5b0 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 source file in [packages/mermaid/src/docs/faq.md](../packages/mermaid/src/docs/faq.md).
+> **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/docs/integrations.md b/docs/misc/integrations.md
similarity index 98%
rename from docs/integrations.md
rename to docs/misc/integrations.md
index df973f702..e775af90a 100644
--- a/docs/integrations.md
+++ b/docs/misc/integrations.md
@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/integrations.md](../packages/mermaid/src/docs/integrations.md).
+> **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
 
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 000000000..d41818c5b
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 000000000..05d8a737b
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 000000000..993c56b94
--- /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 000000000..85c11395c
--- /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 000000000..5ac259968
--- /dev/null
+++ b/docs/public/mermaid-logo.svg
@@ -0,0 +1,6 @@
+
+
+
+    
+    
+
diff --git a/docs/c4c.md b/docs/syntax/c4c.md
similarity index 99%
rename from docs/c4c.md
rename to docs/syntax/c4c.md
index c763765b1..ef1295450 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 source file in [packages/mermaid/src/docs/c4c.md](../packages/mermaid/src/docs/c4c.md).
+> **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
 
diff --git a/docs/classDiagram.md b/docs/syntax/classDiagram.md
similarity index 98%
rename from docs/classDiagram.md
rename to docs/syntax/classDiagram.md
index 68ff399a6..b825f8671 100644
--- a/docs/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/classDiagram.md](../packages/mermaid/src/docs/classDiagram.md).
+> **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
 
@@ -841,4 +845,4 @@ g.classGroup line {
 
 ## Configuration
 
-`Coming soon`
+`Coming soon!`
diff --git a/docs/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md
similarity index 98%
rename from docs/entityRelationshipDiagram.md
rename to docs/syntax/entityRelationshipDiagram.md
index b98b2feb0..fef7b6fee 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 source file in [packages/mermaid/src/docs/entityRelationshipDiagram.md](../packages/mermaid/src/docs/entityRelationshipDiagram.md).
+> **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
 
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 62f2c6088..516e65eee 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 source file in [packages/mermaid/src/docs/examples.md](../packages/mermaid/src/docs/examples.md).
+> **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?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?id=flowcharts-basic-syntax) section.**
 
 ## Basic Pie Chart
 
diff --git a/docs/flowchart.md b/docs/syntax/flowchart.md
similarity index 96%
rename from docs/flowchart.md
rename to docs/syntax/flowchart.md
index dc22a46ab..234f46236 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 source file in [packages/mermaid/src/docs/flowchart.md](../packages/mermaid/src/docs/flowchart.md).
+> **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,7 +10,7 @@ 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)
 
@@ -166,6 +170,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}}
@@ -316,12 +334,12 @@ flowchart LR
 
 ```mermaid-example
 flowchart LR
-   A-.->B
+   A-.->B;
 ```
 
 ```mermaid
 flowchart LR
-   A-.->B
+   A-.->B;
 ```
 
 ### Dotted link with text
@@ -679,8 +697,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'`.
diff --git a/docs/gantt.md b/docs/syntax/gantt.md
similarity index 98%
rename from docs/gantt.md
rename to docs/syntax/gantt.md
index 086ffd622..11034d2e7 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 source file in [packages/mermaid/src/docs/gantt.md](../packages/mermaid/src/docs/gantt.md).
+> **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
 
@@ -353,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) 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 99%
rename from docs/gitgraph.md
rename to docs/syntax/gitgraph.md
index 03acf20e1..cd1a3f12a 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 source file in [packages/mermaid/src/docs/gitgraph.md](../packages/mermaid/src/docs/gitgraph.md).
+> **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
 
@@ -817,7 +821,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 +831,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 96%
rename from docs/mindmap.md
rename to docs/syntax/mindmap.md
index 513abc5fe..26a1065be 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 source file in [packages/mermaid/src/docs/mindmap.md](../packages/mermaid/src/docs/mindmap.md).
+> **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
 
diff --git a/docs/pie.md b/docs/syntax/pie.md
similarity index 90%
rename from docs/pie.md
rename to docs/syntax/pie.md
index ae69d05fd..6801b3619 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 source file in [packages/mermaid/src/docs/pie.md](../packages/mermaid/src/docs/pie.md).
+> **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
 
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 c48e61f82..f8a0cafa9 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 source file in [packages/mermaid/src/docs/requirementDiagram.md](../packages/mermaid/src/docs/requirementDiagram.md).
+> **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 80d41fc1a..b2d33bf69 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 source file in [packages/mermaid/src/docs/sequenceDiagram.md](../packages/mermaid/src/docs/sequenceDiagram.md).
+> **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
 
@@ -97,7 +100,7 @@ Messages can be of two displayed either solid or with a dotted line.
 
     [Actor][Arrow][Actor]:Message text
 
-There are eight types of arrows currently supported:
+There are six types of arrows currently supported:
 
 | Type | Description                                      |
 | ---- | ------------------------------------------------ |
@@ -727,7 +730,7 @@ text.actor {
 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.
+How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
 `mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
 
 ```javascript
diff --git a/docs/stateDiagram.md b/docs/syntax/stateDiagram.md
similarity index 97%
rename from docs/stateDiagram.md
rename to docs/syntax/stateDiagram.md
index e7ade930b..ec91411f6 100644
--- a/docs/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/stateDiagram.md](../packages/mermaid/src/docs/stateDiagram.md).
+> **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
 
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 423f13c58..73fcb7468 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 source file in [packages/mermaid/src/docs/user-journey.md](../packages/mermaid/src/docs/user-journey.md).
+> **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 28dbc0ab5..000000000
--- 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 9cb520ed7..000000000
--- 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/upgrading.md b/docs/upgrading.md
deleted file mode 100644
index cd0fa93af..000000000
--- a/docs/upgrading.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/upgrading.md](../packages/mermaid/src/docs/upgrading.md).
-
-# 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 135f56b56..15bfcbada 100644
--- a/package.json
+++ b/package.json
@@ -31,17 +31,9 @@
     "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 lint:jison && prettier --check .",
-    "vdocs:dev": "vitepress dev vdocs",
-    "vdocs:build": "vitepress build vdocs",
-    "vdocs:serve": "vitepress serve vdocs",
-    "postbuild": "echo 'building docs from code here soon'",
+    "lint": "eslint --cache --ignore-path .gitignore . && pnpm --filter mermaid run lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
-    "lint:jison": "ts-node-esm --transpileOnly packages/mermaid/src/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -109,7 +101,6 @@
     "coveralls": "3.1.1",
     "cypress": "10.11.0",
     "cypress-image-snapshot": "4.0.1",
-    "documentation": "13.2.5",
     "esbuild": "0.15.12",
     "eslint": "8.26.0",
     "eslint-config-prettier": "8.5.0",
diff --git a/packages/mermaid/.gitignore b/packages/mermaid/.gitignore
new file mode 100644
index 000000000..1a961ffe0
--- /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.json b/packages/mermaid/.lintstagedrc.json
new file mode 100644
index 000000000..6f3d6d235
--- /dev/null
+++ b/packages/mermaid/.lintstagedrc.json
@@ -0,0 +1,5 @@
+{
+  "src/docs/**": ["pnpm --filter mermaid run docs:build --git"],
+  "src/docs.mts": ["pnpm --filter mermaid run docs:build --git"],
+  "*.jison": ["pnpm run lint:jison"]
+}
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 8d4a0ad64..f7b54eba9 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -27,21 +27,25 @@
     "clean": "rimraf dist",
     "build:code": "node .esbuild/esbuild.cjs",
     "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
-    "build:watch": "yarn build:code --watch",
-    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
-    "build": "yarn clean; yarn build:esbuild",
+    "build:watch": "pnpm build:code --watch",
+    "build:esbuild": "concurrently \"pnpm build:code\" \"pnpm build:types\"",
+    "build": "pnpm clean; pnpm build:esbuild",
     "dev": "node .esbuild/serve.cjs",
-    "docs:build": "ts-node-esm src/docs.mts",
-    "docs:verify": "yarn docs:build --verify",
-    "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
-    "release": "yarn build",
-    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
+    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
+    "docs:build": "rimraf ../../docs && pnpm docs:code && ts-node-esm src/docs.mts",
+    "docs:verify": "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 && vitepress dev src/vitepress",
+    "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
+    "release": "pnpm build",
+    "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
     "lint:jison": "ts-node-esm src/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "todo-prepare": "concurrently \"husky install\" \"yarn build\"",
+    "todo-prepare": "concurrently \"husky install\" \"pnpm build\"",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -116,8 +120,11 @@
     "prettier-plugin-jsdoc": "0.4.2",
     "remark": "14.0.2",
     "rimraf": "3.0.2",
+    "shiki": "^0.11.1",
     "start-server-and-test": "1.14.0",
     "ts-node": "10.9.1",
+    "typedoc": "^0.23.18",
+    "typedoc-plugin-markdown": "^3.13.6",
     "typescript": "4.8.4",
     "unist-util-flatmap": "1.0.0"
   },
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index fdb520091..5a7f6c071 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -18,7 +18,7 @@ import { MermaidConfig } from './config.type';
  *
  * ```html
  *
- -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 f4570d8b5..000000000 --- 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 c77bde3bd..000000000 --- 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 f89f30318..000000000 --- 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/breakingChanges.md b/packages/mermaid/src/docs/breakingChanges.md deleted file mode 100644 index 41b411df6..000000000 --- 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 - -``` - -or - -```html - -``` - -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 100% rename from packages/mermaid/src/docs/development.md rename to packages/mermaid/src/docs/community/development.md 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 000000000..21c44c257 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 92% rename from packages/mermaid/src/docs/n00b-overview.md rename to packages/mermaid/src/docs/community/n00b-overview.md index b784ba737..c88875345 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) ## 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 97% rename from packages/mermaid/src/docs/newDiagram.md rename to packages/mermaid/src/docs/community/newDiagram.md index 4b6c7dfd6..74026b3ff 100644 --- a/packages/mermaid/src/docs/newDiagram.md +++ b/packages/mermaid/src/docs/community/newDiagram.md @@ -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; ``` @@ -67,8 +66,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 +88,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 +114,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 @@ -180,6 +178,7 @@ accDescr { 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 +198,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: @@ -228,7 +228,7 @@ 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](./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 100% rename from packages/mermaid/src/docs/security.md rename to packages/mermaid/src/docs/community/security.md 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 9e5264c12..40d1cc946 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). +This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](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.** @@ -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 , so if the user wants to break up their text, they have full control over line breaks by adding tags. +`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**: @@ -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). 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 bfaa4facf..54c6a845a 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 diff --git a/packages/mermaid/src/docs/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md similarity index 100% rename from packages/mermaid/src/docs/accessibility.md rename to packages/mermaid/src/docs/config/accessibility.md 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 100% rename from vdocs/config/directives.md rename to packages/mermaid/src/docs/config/directives.md 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/theming.md b/packages/mermaid/src/docs/config/theming.md similarity index 98% rename from packages/mermaid/src/docs/theming.md rename to packages/mermaid/src/docs/config/theming.md index 66b612c05..78f3546cc 100644 --- a/packages/mermaid/src/docs/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -255,25 +255,7 @@ In the following examples, the directive `init` is used, with the `theme` being ### 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 +```mermaid-example %%{init: {'securityLevel': 'loose', 'theme':'base'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) diff --git a/packages/mermaid/src/docs/usage.md b/packages/mermaid/src/docs/config/usage.md similarity index 97% rename from packages/mermaid/src/docs/usage.md rename to packages/mermaid/src/docs/config/usage.md index 00c44c0d9..63b80e578 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). 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) 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). ## 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. ``` 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 cd6ab221b..000000000 --- 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 47af50c31..000000000 --- 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/examples.md b/packages/mermaid/src/docs/examples.md deleted file mode 100644 index d22efc407..000000000 --- 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/img/Configuration.png b/packages/mermaid/src/docs/img/Configuration.png deleted file mode 100644 index 60a808f2c..000000000 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 a49b35224..000000000 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 3891f39c1..000000000 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 790fa7710..000000000 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 04df642dc..000000000 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 005a3282b..000000000 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 7db35ea7a..000000000 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 6dc996fd9..000000000 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 b85b165db..000000000 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 fde265f63..000000000 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 37537c18f..000000000 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 304b598b8..000000000 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 2da331a1e..000000000 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 5d3c7738d..000000000 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 bd9c8c97a..000000000 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 f37d523f8..000000000 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 6ebf41352..000000000 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 825d467d8..000000000 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 038408d2b..000000000 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 b27d9aca8..000000000 --- a/packages/mermaid/src/docs/index.html +++ /dev/null @@ -1,192 +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 000000000..975546f4b --- /dev/null +++ b/packages/mermaid/src/docs/index.md @@ -0,0 +1,183 @@ +--- +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/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 85% rename from packages/mermaid/src/docs/README.md rename to packages/mermaid/src/docs/intro/index.md index 880e40b43..7f2521843 100644 --- a/packages/mermaid/src/docs/README.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -4,9 +4,9 @@ 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). - + [![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_) @@ -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](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | πŸ”Œ [Plug-Ins](../misc/integrations.md) > πŸ–– Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). @@ -46,9 +46,9 @@ 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) -```mmd +```mermaid-example graph TD; A-->B; A-->C; @@ -56,11 +56,9 @@ graph TD; C-->D; ``` -![Flowchart](img/flow.png) +### [Sequence diagram](../syntax/sequenceDiagram.md) -### [Sequence diagram](./sequenceDiagram.md) - -```mmd +```mermaid-example sequenceDiagram participant Alice participant Bob @@ -74,11 +72,9 @@ sequenceDiagram Bob-->>John: Jolly good! ``` -![Sequence diagram](img/sequence.png) +### [Gantt diagram](../syntax/gantt.md) -### [Gantt diagram](./gantt.md) - -```mmd +```mermaid-example gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid @@ -91,11 +87,9 @@ Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d ``` -![Gantt diagram](img/gantt.png) +### [Class diagram](../syntax/classDiagram.md) -### [Class diagram](./classDiagram.md) - -```mmd +```mermaid-example classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 @@ -112,8 +106,6 @@ Class01 : int gorilla Class08 <--> C2: Cool label ``` -![Class diagram](img/class.png) - ### Git graph ```mermaid-example @@ -129,9 +121,9 @@ Class08 <--> C2: Cool label commit ``` -### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) +### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md) -```mmd +```mermaid-example erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains @@ -139,11 +131,9 @@ erDiagram ``` -![ER diagram](img/simple-er.png) +### [User Journey Diagram](../syntax/userJourney.md) -### [User Journey Diagram](./user-journey.md) - -```mmd +```mermaid-example journey title My working day section Go to work @@ -155,13 +145,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) and [Usage](../config/usage).** -**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).** ### CDN @@ -180,12 +168,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): **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 +186,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)
 
 ## Sibling projects
 
@@ -224,22 +212,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 +240,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 +267,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 +285,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 95%
rename from vdocs/intro/n00b-gettingStarted.md
rename to packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index b5abe96d6..8c49d399f 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) 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
 
@@ -180,7 +180,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 87% rename from vdocs/intro/n00b-syntaxReference.md rename to packages/mermaid/src/docs/intro/n00b-syntaxReference.md index 8434ec6c1..b3611db15 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 @@ -24,7 +24,7 @@ erDiagram PRODUCT ||--o{ ORDER-ITEM : "ordered in" ``` -The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax. +The [Getting Started](n00b-gettingStarted) section can also provide some practical examples of mermaid syntax. ## Diagram Breaking @@ -40,17 +40,17 @@ One should **beware the use of some words or symbols** that can break diagrams. ### 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) 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. +The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](n00b-gettingStarted) 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 8c51ac1c5..000000000 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 2ef66ea2f..000000000 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/packages/mermaid/src/docs/integrations.md b/packages/mermaid/src/docs/misc/integrations.md similarity index 100% rename from packages/mermaid/src/docs/integrations.md rename to packages/mermaid/src/docs/misc/integrations.md diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md deleted file mode 100644 index 70c5863f7..000000000 --- a/packages/mermaid/src/docs/n00b-gettingStarted.md +++ /dev/null @@ -1,198 +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 |
-
-### 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/c4c.md b/packages/mermaid/src/docs/syntax/c4c.md
similarity index 100%
rename from packages/mermaid/src/docs/c4c.md
rename to packages/mermaid/src/docs/syntax/c4c.md
diff --git a/packages/mermaid/src/docs/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
similarity index 99%
rename from packages/mermaid/src/docs/classDiagram.md
rename to packages/mermaid/src/docs/syntax/classDiagram.md
index 3ca564e55..d67aeec01 100644
--- a/packages/mermaid/src/docs/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -628,4 +628,4 @@ g.classGroup line {
 
 ## Configuration
 
-`Coming soon`
+`Coming soon!`
diff --git a/packages/mermaid/src/docs/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
similarity index 100%
rename from packages/mermaid/src/docs/entityRelationshipDiagram.md
rename to packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
diff --git a/vdocs/syntax/examples.md b/packages/mermaid/src/docs/syntax/examples.md
similarity index 100%
rename from vdocs/syntax/examples.md
rename to packages/mermaid/src/docs/syntax/examples.md
diff --git a/packages/mermaid/src/docs/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
similarity index 96%
rename from packages/mermaid/src/docs/flowchart.md
rename to packages/mermaid/src/docs/syntax/flowchart.md
index 16979137e..25252e54d 100644
--- a/packages/mermaid/src/docs/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -4,7 +4,7 @@ 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)
 
@@ -109,7 +109,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}}
 ```
@@ -199,7 +208,7 @@ flowchart LR
 
 ```mermaid-example
 flowchart LR
-   A-.->B
+   A-.->B;
 ```
 
 ### Dotted link with text
@@ -424,8 +433,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'`.
diff --git a/packages/mermaid/src/docs/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
similarity index 99%
rename from packages/mermaid/src/docs/gantt.md
rename to packages/mermaid/src/docs/syntax/gantt.md
index d1fbe28bd..8b200da7d 100644
--- a/packages/mermaid/src/docs/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -291,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](mermaidCLI.html) page.
+How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
 
 mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
 
diff --git a/packages/mermaid/src/docs/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
similarity index 99%
rename from packages/mermaid/src/docs/gitgraph.md
rename to packages/mermaid/src/docs/syntax/gitgraph.md
index b8e399e09..b19c1e2cd 100644
--- a/packages/mermaid/src/docs/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -510,7 +510,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:
 
@@ -520,7 +520,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/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 100%
rename from packages/mermaid/src/docs/mindmap.md
rename to packages/mermaid/src/docs/syntax/mindmap.md
diff --git a/packages/mermaid/src/docs/pie.md b/packages/mermaid/src/docs/syntax/pie.md
similarity index 100%
rename from packages/mermaid/src/docs/pie.md
rename to packages/mermaid/src/docs/syntax/pie.md
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 079eaa4d5..35c3cc9a1 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
 
diff --git a/packages/mermaid/src/docs/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
similarity index 100%
rename from packages/mermaid/src/docs/stateDiagram.md
rename to packages/mermaid/src/docs/syntax/stateDiagram.md
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 28dbc0ab5..000000000
--- 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 9cb520ed7..000000000
--- 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/upgrading.md b/packages/mermaid/src/docs/upgrading.md
deleted file mode 100644
index 16dea1cba..000000000
--- 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 3476088ab..000000000
--- 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 63%
rename from vdocs/vite.config.ts
rename to packages/mermaid/src/docs/vite.config.ts
index bc8852691..bea6fe26d 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,17 @@ 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
+    },
+  },
+  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/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 06cfdde45..384b456f8 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -482,33 +482,11 @@ async function initialize(options: MermaidConfig) {
   addDiagrams();
 }
 
-export const mermaidAPI = Object.freeze({
-  render,
-  parse,
-  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;
 /**
  * ## mermaidAPI configuration defaults
  *
- * ```html
- * 
  * ```
  */
+export const mermaidAPI = Object.freeze({
+  render,
+  parse,
+  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/typedoc.json b/packages/mermaid/typedoc.json
new file mode 100644
index 000000000..0e3b12b91
--- /dev/null
+++ b/packages/mermaid/typedoc.json
@@ -0,0 +1,11 @@
+{
+  "plugin": ["typedoc-plugin-markdown"],
+  "readme": "none",
+  "githubPages": false,
+  "gitRemote": "origin",
+  "gitRevision": "master",
+  "out": "src/docs/config/setup",
+  "entryPointStrategy": "expand",
+  "hideBreadcrumbs": true,
+  "hideInPageTOC": true
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bf3cce80..3b11d52da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,6 @@ importers:
       d3: 7.6.1
       dagre: 0.8.5
       dagre-d3: 0.6.4
-      documentation: 13.2.5
       dompurify: 2.4.0
       esbuild: 0.15.12
       eslint: 8.26.0
@@ -119,7 +118,6 @@ importers:
       coveralls: 3.1.1
       cypress: 10.11.0
       cypress-image-snapshot: 4.0.1_ubq66qitfkq2hjrkiw5tjmpgui
-      documentation: 13.2.5
       esbuild: 0.15.12
       eslint: 8.26.0
       eslint-config-prettier: 8.5.0_eslint@8.26.0
@@ -210,9 +208,12 @@ importers:
       prettier-plugin-jsdoc: 0.4.2
       remark: 14.0.2
       rimraf: 3.0.2
+      shiki: ^0.11.1
       start-server-and-test: 1.14.0
       stylis: ^4.1.2
       ts-node: 10.9.1
+      typedoc: ^0.23.18
+      typedoc-plugin-markdown: ^3.13.6
       typescript: 4.8.4
       unist-util-flatmap: 1.0.0
     dependencies:
@@ -270,8 +271,11 @@ importers:
       prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
       remark: 14.0.2
       rimraf: 3.0.2
+      shiki: 0.11.1
       start-server-and-test: 1.14.0
       ts-node: 10.9.1_7jzoohtnaegavowzoeccrsbhty
+      typedoc: 0.23.18_typescript@4.8.4
+      typedoc-plugin-markdown: 3.13.6_typedoc@0.23.18
       typescript: 4.8.4
       unist-util-flatmap: 1.0.0
 
@@ -3132,7 +3136,7 @@ packages:
       p-iteration: 1.1.8
     dev: true
 
-  /@yankeeinlondon/builder-api/0.4.1_ilc43w6aifur57ytpvi7wn6nr4:
+  /@yankeeinlondon/builder-api/0.4.1_6k75kjrp4gwbfazbvzpr43xqja:
     resolution: {integrity: sha512-O6LS9Zg4xqLVpAgea72mNhZvdy9B2BuIgNdsRvNkmnACG8XvlZtEKryGt2ECI/z+dbQICbHDQFCNtZRBrfSMlA==}
     peerDependencies:
       fp-ts: ^2.12.1
@@ -3141,10 +3145,10 @@ packages:
       vite-plugin-md: '*'
     dependencies:
       '@yankeeinlondon/happy-wrapper': 2.6.0_sgxihqrf6yfkefuiez6xvwhntm
-      fp-ts: 2.12.3
-      inferred-types: 0.22.0
+      fp-ts: 2.13.1
+      inferred-types: 0.22.8_sgxihqrf6yfkefuiez6xvwhntm
       markdown-it: 13.0.1
-      vite-plugin-md: 0.20.4_c2wncyantgdia5hyyyszooupwi
+      vite-plugin-md: 0.20.4_cq7aef5jcnwmwnyvesyhzqz5eq
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -3423,7 +3427,7 @@ packages:
     resolution: {integrity: sha512-WLbYiXzD3y/ATLZFufV/rZvWdZOs+Z/+5v1rBZ463Jn398pa6kcde27cvozYnBoxXblGZTFfoPpsaEw0orU5BA==}
     engines: {node: '>=0.10.0'}
     dependencies:
-      buffer-equal: 1.0.0
+      buffer-equal: 1.0.1
     dev: true
 
   /arch/2.2.0:
@@ -3770,6 +3774,12 @@ packages:
       concat-map: 0.0.1
     dev: true
 
+  /brace-expansion/2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
   /braces/2.3.2:
     resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
     engines: {node: '>=0.10.0'}
@@ -3801,7 +3811,7 @@ packages:
     dependencies:
       callsites: 3.1.0
       common-types: 1.31.1
-      inferred-types: 0.22.0
+      inferred-types: 0.22.8_sgxihqrf6yfkefuiez6xvwhntm
       vitest: 0.19.1_sgxihqrf6yfkefuiez6xvwhntm
     transitivePeerDependencies:
       - '@edge-runtime/vm'
@@ -3838,9 +3848,9 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
-  /buffer-equal/1.0.0:
-    resolution: {integrity: sha512-tcBWO2Dl4e7Asr9hTGcpVrCe+F7DubpmqWCTbj4FHLmjqO2hIaC383acQubWtRJhdceqs5uBHs6Es+Sk//RKiQ==}
-    engines: {node: '>=0.4.0'}
+  /buffer-equal/1.0.1:
+    resolution: {integrity: sha512-QoV3ptgEaQpvVwbXdSO39iqPQTCxSF7A5U99AxbHYqUdCizL/lH2Z0A2y6nbZucxMEOtNyZfG2s6gsVugGpKkg==}
+    engines: {node: '>=0.4'}
     dev: true
 
   /buffer-from/1.1.2:
@@ -5326,8 +5336,8 @@ packages:
       isobject: 3.0.1
     dev: true
 
-  /defined/1.0.0:
-    resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
+  /defined/1.0.1:
+    resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
     dev: true
 
   /degenerator/3.0.2:
@@ -5381,7 +5391,7 @@ packages:
     hasBin: true
     dependencies:
       acorn-node: 1.8.2
-      defined: 1.0.0
+      defined: 1.0.1
       minimist: 1.2.6
     dev: true
 
@@ -6634,8 +6644,8 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /fp-ts/2.12.3:
-    resolution: {integrity: sha512-8m0XvW8kZbfnJOA4NvSVXu95mLbPf4LQGwQyqVukIYS4KzSNJiyKSmuZUmbVHteUi6MGkAJGPb0goPZqI+Tsqg==}
+  /fp-ts/2.13.1:
+    resolution: {integrity: sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ==}
     dev: true
 
   /fragment-cache/0.2.1:
@@ -7048,7 +7058,7 @@ packages:
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.17.1
+      uglify-js: 3.17.3
     dev: true
 
   /happy-dom/6.0.4:
@@ -7413,10 +7423,23 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /inferred-types/0.22.0:
-    resolution: {integrity: sha512-7JF/huiuS1ANuQisfRigytz4IdYbmQVXOW+Jt6IL4k3TQxsCxAz72rWccBKTomnmGzBRcd3ki8gyrESYY/2bYw==}
+  /inferred-types/0.22.8_sgxihqrf6yfkefuiez6xvwhntm:
+    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
     dependencies:
-      common-types: 1.31.1
+      brilliant-errors: 0.6.0_sgxihqrf6yfkefuiez6xvwhntm
+    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:
@@ -9307,6 +9330,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:
@@ -9373,6 +9400,12 @@ packages:
       repeat-string: 1.6.1
     dev: true
 
+  /marked/4.1.1:
+    resolution: {integrity: sha512-0cNMnTcUJPxbA6uWmCmjWz4NJRe/0Xfk2NhXCUHjew9qJzFN20krFnsUe7QynwqOwa5m1fZ4UDg0ycKFVC0ccw==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: true
+
   /mdast-util-definitions/4.0.0:
     resolution: {integrity: sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==}
     dependencies:
@@ -9905,6 +9938,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'}
@@ -9947,12 +9987,12 @@ packages:
       browser-resolve: 1.11.3
       cached-path-relative: 1.1.0
       concat-stream: 1.5.2
-      defined: 1.0.0
+      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
+      readable-stream: 2.1.5
       resolve: 1.22.1
       standard-version: 9.5.0
       stream-combiner2: 1.1.1
@@ -10026,7 +10066,7 @@ packages:
     resolution: {integrity: sha512-Ev5OPB5vDZ+HLj4MXfAwZRHJV/LJr2LHjsIr1UN7jZigMS2JRpF7Qy77t66GURhtzp7GSWLNSLeRwXOg1iwJkQ==}
     dependencies:
       brilliant-errors: 0.6.0_sgxihqrf6yfkefuiez6xvwhntm
-      inferred-types: 0.22.0
+      inferred-types: 0.22.8_sgxihqrf6yfkefuiez6xvwhntm
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -10751,8 +10791,8 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
-  /promise/8.2.0:
-    resolution: {integrity: sha512-+CMAlLHqwRYwBMXKCP+o8ns7DN+xHDUiI+0nArsiJ9y+kJVPLFxEaSw6Ha9s9H0tftxg2Yzl25wqj9G7m5wLZg==}
+  /promise/8.3.0:
+    resolution: {integrity: sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==}
     dependencies:
       asap: 2.0.6
     dev: true
@@ -12158,7 +12198,7 @@ packages:
       form-data: 2.3.3
       http-basic: 8.1.3
       http-response-object: 3.0.2
-      promise: 8.2.0
+      promise: 8.3.0
       qs: 6.11.0
     dev: true
 
@@ -12509,6 +12549,29 @@ packages:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: true
 
+  /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
+
+  /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'}
@@ -12519,8 +12582,8 @@ packages:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
     dev: true
 
-  /uglify-js/3.17.1:
-    resolution: {integrity: sha512-+juFBsLLw7AqMaqJ0GFvlsGZwdQfI2ooKQB39PSBgMnMakcFosi9O8jCwE+2/2nMNcc0z63r9mwjoDG8zr+q0Q==}
+  /uglify-js/3.17.3:
+    resolution: {integrity: sha512-JmMFDME3iufZnBpyKL+uS78LRiC+mK55zWfM5f/pWBJfpOttXAqYfdDGRukYhJuyRinvPVAtUhvy7rlDybNtFg==}
     engines: {node: '>=0.8.0'}
     hasBin: true
     requiresBuild: true
@@ -12889,14 +12952,14 @@ packages:
       replace-ext: 1.0.1
     dev: true
 
-  /vite-plugin-md/0.20.4_c2wncyantgdia5hyyyszooupwi:
+  /vite-plugin-md/0.20.4_cq7aef5jcnwmwnyvesyhzqz5eq:
     resolution: {integrity: sha512-W3Z59/ROS2X6OIwPwV2PjE+QkfW0UVGxyf3Z2JR0OLqGJ+Iy2SGA503m/vmATJv+C3DjeU8Oy8diQx1R+IyRwQ==}
     peerDependencies:
       '@rollup/pluginutils': ^4.2.1
       rollup: ^2.77.0
     dependencies:
       '@rollup/pluginutils': 4.2.1
-      '@yankeeinlondon/builder-api': 0.4.1_ilc43w6aifur57ytpvi7wn6nr4
+      '@yankeeinlondon/builder-api': 0.4.1_6k75kjrp4gwbfazbvzpr43xqja
       '@yankeeinlondon/happy-wrapper': 2.6.0_sgxihqrf6yfkefuiez6xvwhntm
       gray-matter: 4.0.3
       markdown-it: 13.0.1
@@ -12957,7 +13020,7 @@ packages:
       vitepress: ^0.21.6 || ^1.0.0 || ^1.0.0-alpha
     dependencies:
       mermaid: 9.1.7
-      vite-plugin-md: 0.20.4_c2wncyantgdia5hyyyszooupwi
+      vite-plugin-md: 0.20.4_cq7aef5jcnwmwnyvesyhzqz5eq
       vitepress: 1.0.0-alpha.26_tbpndr44ulefs3hehwpi2mkf2y
     dev: true
 
diff --git a/vdocs/.vitepress/mermaid-markdown-all.ts b/vdocs/.vitepress/mermaid-markdown-all.ts
deleted file mode 100644
index fb699e27f..000000000
--- 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 a158d7e6d..000000000
--- 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/community/CHANGELOG.md b/vdocs/community/CHANGELOG.md
deleted file mode 100644
index 7a75ad4e2..000000000
--- 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 95e5fe417..000000000
--- 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 3d493b80a..000000000
--- 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 1f9aabcb0..000000000
--- 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 7e61a60cf..000000000
--- 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 fb58b78ea..000000000
--- 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 387871de4..000000000
--- 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 b257edbd0..000000000
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 2b3478f0b..000000000
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 d00e8eb7c..000000000
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 c87505c1c..000000000
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 d54a0e97d..000000000
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 cf8dd1238..000000000
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 f9473f1dd..000000000
--- 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 1e6546f5c..000000000
--- 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 7db4de5b7..000000000
--- 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 16bb2ef95..000000000
--- 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 925214c0a..000000000
--- 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 5c623db4d..000000000
--- 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 cc3cd9498..000000000
--- 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 b96a2184c..000000000
--- 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 426e6bf63..000000000
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 5b4c2086d..000000000
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 9ce3cc6fc..000000000
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 e2f36651f..000000000
--- 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 698061def..000000000
--- 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/misc/integrations.md b/vdocs/misc/integrations.md
deleted file mode 100644
index 4147059a0..000000000
--- a/vdocs/misc/integrations.md
+++ /dev/null
@@ -1,180 +0,0 @@
-# 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**)
-- [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)
-- [Jetsbrain 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/vdocs/public/.nojekyll b/vdocs/public/.nojekyll
deleted file mode 100644
index e69de29bb..000000000
diff --git a/vdocs/public/header.png b/vdocs/public/header.png
deleted file mode 100644
index 6db8635c9..000000000
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 0ab805182..000000000
--- 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 be77f1a1a..000000000
--- 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/entityRelationshipDiagram.md b/vdocs/syntax/entityRelationshipDiagram.md
deleted file mode 100644
index 341c9147c..000000000
--- a/vdocs/syntax/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:
-
-```
-    <first-entity> [<relationship> <second-entity> : <relationship-label>]
-```
-
-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/vdocs/syntax/flowchart.md b/vdocs/syntax/flowchart.md
deleted file mode 100644
index cbec4ae62..000000000
--- 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/gantt.md b/vdocs/syntax/gantt.md
deleted file mode 100644
index 755f50b1e..000000000
--- a/vdocs/syntax/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](../config/mermaidCLI) 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
-<body>
-  <pre class="mermaid">
-    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()
-  </pre>
-
-  <script>
-    const printArguments = function (arg1, arg2, arg3) {
-      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    };
-    const printTask = function (taskId) {
-      alert('taskId: ' + taskId);
-    };
-    const config = {
-      startOnLoad: true,
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-```
diff --git a/vdocs/syntax/gitGraph.md b/vdocs/syntax/gitGraph.md
deleted file mode 100644
index adfaabf40..000000000
--- a/vdocs/syntax/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](../config/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](../config/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/vdocs/syntax/img/Gantt-excluded-days-within.png b/vdocs/syntax/img/Gantt-excluded-days-within.png
deleted file mode 100644
index 2283bf99d..000000000
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 1b2fc8e17..000000000
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 75d377e4b..000000000
--- 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 7c221312b..000000000
--- 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 e28819e7a..000000000
--- 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
-```