Merge branch 'develop' of https://github.com/emersonbottero/mermaid into pr/emersonbottero/3678

* 'develop' of https://github.com/emersonbottero/mermaid:
  docs: fix layout problem
  docs: added warning and notes
  docs: added warning and notes
  docs: added warning and notes
  docs: small improvements

.github/gh-pages-publish.yml

@@ -18,4 +18,4 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4.3.3
         with:
           branch: gh-pages # The branch the action should deploy to.
-          folder: packages/mermaid/docs/.vitepress/dist # The folder the action should deploy.
+          folder: packages/mermaid/src/docs/.vitepress/dist # The folder the action should deploy.

.github/workflows/docs.yml

@@ -5,12 +5,12 @@ on:
     branches:
       - develop
     paths:
-      - 'packages/mermaid/docs/**/*'
+      - 'packages/mermaid/src/docs/**/*'
   pull_request:
     branches:
       - develop
     paths:
-      - 'packages/mermaid/docs/**/*'
+      - 'packages/mermaid/src/docs/**/*'
 jobs:
   spellcheck:
     name: 'Docs: Spellcheck'
@@ -24,5 +24,5 @@ jobs:
           node-version: '16'
       - run: npm install -g cspell
         name: Install cSpell
-      - run: cspell --config ./cSpell.json "packages/mermaid/docs/**/*.md" --no-progress
+      - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress
         name: Run cSpell

.gitignore

@@ -34,4 +34,4 @@ cypress/snapshots/
 tsconfig.tsbuildinfo
 
 #docs generate from code
-packages/mermaid/docs/config/setup
+packages/mermaid/src/docs/config/setup

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 `package/mermaid/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.
 
@@ -50,16 +50,16 @@ Less strict here, it is OK to commit directly in the `develop` branch if you are
 
 The documentation is written in **Markdown**. 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).
 
-### Documentation source files are in [`/packages/mermaid/docs`](packages/mermaid/docs)
+### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
 
-The source files for the project documentation are located in the [`/packages/mermaid/docs`](packages/mermaid/docs) directory. This is where you should make changes.
+The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
-The files under `/packages/mermaid/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
+The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
 
 ```mermaid
 flowchart LR
   classDef default fill:#fff,color:black,stroke:black
 
-  source["files in /packages/mermaid/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
+  source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
 
 ```
 
@@ -148,7 +148,7 @@ it('should render forks and joins', () => {
 
 Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
 
-The source files for documentation are in `/packages/mermaid/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
+The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
 
 #### Adding to or changing the documentation organization
 

docs/.vitepress/config.ts

@@ -1,4 +1,4 @@
-import { version } from '../../package.json';
+import { version } from '../../../package.json';
 import MermaidMarkdown from './mermaid-markdown-all';
 import { defineConfig } from 'vitepress';
 
@@ -8,9 +8,12 @@ export default defineConfig({
   description: 'Create diagrams and visualizations using text and code.',
   base: '/mermaid-docs/',
   markdown: MermaidMarkdown,
-  ignoreDeadLinks: true, //TODO: try to fixe those in autogenerated docs
   themeConfig: {
     nav: nav(),
+    editLink: {
+      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
 
     sidebar: {
       '/': sidebarAll(),
@@ -53,7 +56,7 @@ function nav() {
     },
     {
       text: '💻 Live Editor',
-      link: '/edit',
+      link: 'https://mermaid.live',
     },
   ];
 }

docs/.vitepress/theme/custom.css

@@ -1,13 +1,21 @@
-@media (min-width: 1440px) {
+:root {
-  .VPDoc:not(.has-sidebar) .container[data-v-10119189] {
+  --vp-c-brand: #ff3670;
-    max-width: 100%;
+  --vp-c-brand-light: #ff5e8c;
-  }
+  --vp-c-brand-lighter: #ff85a8;
-
+  --vp-c-brand-lightest: #ff9bb7;
-  .VPDoc.has-aside .content-container[data-v-10119189] {
+  --vp-c-brand-dark: #bd34fe;
-    max-width: 100%;
+  --vp-c-brand-darker: #9339bd;
-  }
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
 }
 
 :root {
-  --vp-layout-max-width: 100%;
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
+  --vp-home-hero-image-filter: blur(72px);
+}
+
+.vp-doc > div {
+  width: 100%;
 }

docs/.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from 'vitepress/theme';
+// @ts-ignore
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
 

docs/community/development.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Development and Contribution 🙌
 

docs/community/n00b-overview.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Overview for Beginners
 

docs/community/newDiagram.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Adding a New Diagram/Chart 📊
 
@@ -26,9 +30,8 @@ There are some jison specific sub steps here where the parser stores the data en
 
 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.
+> 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:
 

docs/community/security.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Security
 

docs/config/8.6.0_docs.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Version 8.6.0 Changes
 
@@ -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
+> **Note**\
-All directives are enclosed in `%%{ }%%`
+> 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,8 +65,8 @@ 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
+> **Note**\
-init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
+> 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**:
@@ -73,7 +76,8 @@ 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**:
 
@@ -107,15 +111,16 @@ When deployed within code, init is called before the graph/diagram description.
 | --------- | ----------------------------- | --------- | -------- | ---------- |
 | wrap      | a callable text-wrap function | Directive | Optional | %%{wrap}%% |
 
-::: note
+> **Note**\
-Wrap is a function that is currently only deployable for sequence diagrams.
+> Wrap is a function that is currently only deployable for sequence diagrams.
 
 Wrap respects a manually added \<br>, so if the user wants to break up their text, they have full control over line breaks by adding \<br> tags.
 
 It is a non-argument directive and can be executed thusly:
 
 `%%{wrap}%%` .
-:::
+
+>
 
 **An example of text wrapping in a sequence diagram**:
 
@@ -157,13 +162,12 @@ Example of **object.Assign**:
 | --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
 | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf       | siteConfig |
 
-::: note
+> **Note**\
-Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
+> 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
+> the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
-to the defaultConfig
+> to the defaultConfig
-Note: currentConfig is set in this function。
+> Note: currentConfig is set in this function。
-Default value: will mirror Global Config
+> Default value: will mirror Global Config
-:::
 
 ## getSiteConfig
 
@@ -171,9 +175,8 @@ Default value: will mirror Global Config
 | --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
 | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
 
-::: note
+> **Note**\
-Returns any values in siteConfig.
+> Returns any values in siteConfig.
-:::
 
 ## setConfig
 
@@ -181,11 +184,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
+> **Note**\
-Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
+> 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
+> values found in conf with key found in siteConfig.secure will be replaced with the corresponding
-siteConfig value.
+> siteConfig value.
-:::
 
 ## getConfig
 
@@ -193,9 +195,8 @@ siteConfig value.
 | ----------- | --------------------------- | ----------- | ------------------------------- |
 | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
 
-::: note
+> **Note**\
-Returns any values in currentConfig.
+> Returns any values in currentConfig.
-:::
 
 ## sanitize
 
@@ -203,10 +204,9 @@ Returns any values in currentConfig.
 | ---------- | ---------------------------------------- | -------------- | ------ |
 | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None   |
 
-::: note
+> **Note**\
-modifies options in-place
+> modifies options in-place
-Ensures options parameter does not attempt to override siteConfig secure keys.
+> Ensures options parameter does not attempt to override siteConfig secure keys.
-:::
 
 ## reset
 
@@ -220,8 +220,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 |
 
-::: note
+> **Note**\
-default: current siteConfig (optional, default `getSiteConfig()`)
+> default: current siteConfig (optional, default `getSiteConfig()`)
-::: s
+> s
 
 ## For more information, read [Setup](setup/README).

docs/config/Tutorials.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Tutorials
 

docs/config/accessibility.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Accessibility Options
 

docs/config/configuration.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Configuration
 

docs/config/directives.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Directives
 

docs/config/mermaidCLI.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # mermaid CLI
 

docs/config/n00b-advanced.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Advanced n00b mermaid (Coming soon..)
 

docs/config/setup/README.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # mermaid
 

docs/config/setup/modules/config.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Module: config
 
@@ -10,7 +14,7 @@
 
 #### Defined in
 
-[config.ts:7](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L7)
+[config.ts:7](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L7)
 
 ## Functions
 
@@ -32,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:191](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L191)
+[config.ts:191](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L191)
 
 ---
 
@@ -56,7 +60,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:136](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L136)
+[config.ts:136](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L136)
 
 ---
 
@@ -80,7 +84,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:96](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L96)
+[config.ts:96](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L96)
 
 ---
 
@@ -114,7 +118,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:222](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L222)
+[config.ts:222](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L222)
 
 ---
 
@@ -143,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:151](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L151)
+[config.ts:151](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L151)
 
 ---
 
@@ -163,7 +167,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:75](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L75)
+[config.ts:75](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L75)
 
 ---
 
@@ -195,7 +199,7 @@ corresponding siteConfig value.
 
 #### Defined in
 
-[config.ts:113](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L113)
+[config.ts:113](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L113)
 
 ---
 
@@ -228,7 +232,7 @@ function _Default value: At default, will mirror Global Config_
 
 #### Defined in
 
-[config.ts:61](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L61)
+[config.ts:61](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L61)
 
 ---
 
@@ -249,7 +253,7 @@ function _Default value: At default, will mirror Global Config_
 
 #### Defined in
 
-[config.ts:14](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L14)
+[config.ts:14](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L14)
 
 ---
 
@@ -269,4 +273,4 @@ function _Default value: At default, will mirror Global Config_
 
 #### Defined in
 
-[config.ts:79](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L79)
+[config.ts:79](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/config.ts#L79)

docs/config/setup/modules/defaultConfig.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Module: defaultConfig
 
@@ -10,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:1855](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/defaultConfig.ts#L1855)
+[defaultConfig.ts:1855](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/defaultConfig.ts#L1855)
 
 ---
 
@@ -52,4 +56,4 @@ Configuration
 
 #### Defined in
 
-[defaultConfig.ts:31](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/defaultConfig.ts#L31)
+[defaultConfig.ts:31](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/defaultConfig.ts#L31)

docs/config/setup/modules/mermaidAPI.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Module: mermaidAPI
 
@@ -16,7 +20,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:483](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/mermaidAPI.ts#L483)
+[mermaidAPI.ts:483](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/mermaidAPI.ts#L483)
 
 ## Functions
 
@@ -36,7 +40,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:73](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/mermaidAPI.ts#L73)
+[mermaidAPI.ts:73](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/mermaidAPI.ts#L73)
 
 ---
 
@@ -56,4 +60,4 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:47](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/mermaidAPI.ts#L47)
+[mermaidAPI.ts:47](https://github.com/emersonbottero/mermaid/blob/c8b377bf/packages/mermaid/src/mermaidAPI.ts#L47)

docs/config/theming.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # 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
+> **Note**\
-Variables that are unique to some diagrams can be affected by changes in Theme Variables
+> Variables that are unique to some diagrams can be affected by changes in Theme Variables
-:::
 
 | Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
 | -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |

docs/config/usage.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Usage
 
@@ -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
+> **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.
+> 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.
+> **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
+> **Warning**\
-This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
+> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-:::
 
 ## Usage with webpack
 
@@ -339,9 +341,8 @@ on what kind of integration you use.
 </script>
 ```
 
-::: tip
+> **Note**\
-This is the preferred way of configuring mermaid.
+> 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
+> **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.
+> 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
+> **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.
+> 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
+> **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.
+> 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.
-:::

docs/edit.md

@@ -1,9 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
-
----
-
-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>

docs/index.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 ---
 
@@ -12,7 +16,7 @@ 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
+src: /mermaid-logo.svg
 alt: Mermaid
 actions:
 \- theme: brand
@@ -110,6 +114,7 @@ const members = [
   .image-container .image-src {
     margin: 1rem auto;
     max-width: 100%;
+    width: 100%;
   }
 
   .dark .image-src{

docs/intro/index.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # About Mermaid
 
@@ -205,7 +209,7 @@ erDiagram
 
 ```
 
-### [User Journey Diagram](../syntax/user-journey.md)
+### [User Journey Diagram](../syntax/userJourney.md)
 
 ```mermaid-example
 journey

docs/intro/n00b-gettingStarted.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # A Mermaid User-Guide for Beginners
 

docs/intro/n00b-syntaxReference.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Diagram Syntax
 

docs/misc/faq.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Frequently Asked Questions
 

docs/misc/integrations.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Integrations
 

docs/public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

docs/public/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "App",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

docs/public/mermaid-logo.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 491 491" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <!-- <path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:rgb(255,54,112);"/> -->
+    <path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>

docs/syntax/c4c.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # C4 Diagrams
 

docs/syntax/classDiagram.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Class diagrams
 

docs/syntax/entityRelationshipDiagram.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Entity Relationship Diagrams
 

docs/syntax/examples.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Examples
 

docs/syntax/flowchart.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Flowcharts - Basic Syntax
 
@@ -329,12 +333,12 @@ flowchart LR
 ### Dotted link
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
    A-.->B;
 ```
 
 ```mermaid
-flowchart LR;
+flowchart LR
    A-.->B;
 ```
 
@@ -707,7 +711,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -907,14 +911,14 @@ below:
 **Example definition**
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
 ```
 
 ```mermaid
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
@@ -936,7 +940,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
@@ -944,7 +948,7 @@ flowchart TD
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 

docs/syntax/gantt.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Gantt diagrams
 
@@ -341,7 +345,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](../config/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.
 

docs/syntax/gitgraph.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Gitgraph Diagrams
 

docs/syntax/mindmap.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Mindmap
 

docs/syntax/pie.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Pie chart diagrams
 

docs/syntax/requirementDiagram.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Requirement Diagram
 

docs/syntax/sequenceDiagram.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # Sequence diagrams
 
@@ -20,11 +24,12 @@ sequenceDiagram
     Alice-)John: See you later!
 ```
 
-::: note
+> **Note**\
-A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
+> 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
 

docs/syntax/stateDiagram.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # State diagrams
 

docs/syntax/userJourney.md

@@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in package/mermaid/src/docs.
 
 # User Journey Diagram
 

docs/vite.config.ts

@@ -1,5 +1,6 @@
 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,7 @@ 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: {

packages/mermaid/.lintstagedrc.json

@@ -1,6 +1,6 @@
 {
-  "packages/mermaid/docs/**": ["pnpm run docs:build --git"],
+  "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
-  "packages/mermaid/docs.mts": ["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"]
 }

packages/mermaid/docs/.vitepress/theme/custom.css

@@ -1,13 +0,0 @@
-@media (min-width: 1440px) {
-  .VPDoc:not(.has-sidebar) .container[data-v-10119189] {
-    max-width: 100%;
-  }
-
-  .VPDoc.has-aside .content-container[data-v-10119189] {
-    max-width: 100%;
-  }
-}
-
-:root {
-  --vp-layout-max-width: 100%;
-}

packages/mermaid/docs/edit.md

@@ -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>

packages/mermaid/package.json

@@ -31,15 +31,15 @@
     "build:esbuild": "concurrently \"pnpm build:code\" \"pnpm build:types\"",
     "build": "pnpm clean; pnpm build:esbuild",
     "dev": "node .esbuild/serve.cjs",
-    "predocs:build": "rimraf docs/.vitepress/dist",
+    "predocs:build": "rimraf docs",
     "docs:build": "ts-node-esm src/docs.mts",
     "docs:verify": "pnpm docs:build --verify",
-    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --hideInPageTOC --namedAnchors --out docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
+    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
     "predocs:dev": "pnpm docs:code",
-    "docs:dev": "vitepress dev docs",
+    "docs:dev": "vitepress dev src/docs",
     "predocs:bundle": "pnpm docs:code",
-    "docs:bundle": "vitepress build docs",
+    "docs:bundle": "vitepress build src/docs",
-    "docs:serve": "vitepress serve docs",
+    "docs:serve": "vitepress serve src/docs",
     "release": "pnpm build",
     "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
@@ -77,11 +77,7 @@
     "khroma": "^2.0.0",
     "lodash": "^4.17.21",
     "moment-mini": "^2.24.0",
-    "non-layered-tidy-tree-layout": "^2.0.2",
+    "non-layered-tidy-tree-layout": "^2.0.2"
-    "shiki": "^0.11.1",
-    "stylis": "^4.1.2",
-    "typedoc": "^0.23.16",
-    "typedoc-plugin-markdown": "^3.13.6"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
@@ -131,7 +127,11 @@
     "vite": "^3.1.4",
     "vitepress": "^1.0.0-alpha.19",
     "vitepress-plugin-mermaid": "^2.0.8",
-    "vitepress-plugin-search": "^1.0.4-alpha.11"
+    "vitepress-plugin-search": "^1.0.4-alpha.11",
+    "shiki": "^0.11.1",
+    "stylis": "^4.1.2",
+    "typedoc": "^0.23.16",
+    "typedoc-plugin-markdown": "^3.13.6"
   },
   "resolutions": {
     "d3": "^7.0.0"

packages/mermaid/src/docs.mts

@@ -47,10 +47,12 @@ const MERMAID_MAJOR_VERSION = (
 
 // These paths are from the root of the mono-repo, not from the
 // mermaid sub-directory
-const SOURCE_DOCS_DIR = 'docs';
+const SOURCE_DOCS_DIR = 'src/docs';
 const FINAL_DOCS_DIR = '../../docs';
 
-const AUTOGENERATED_TEXT = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in ${SOURCE_DOCS_DIR}.`;
+const AUTOGENERATED_TEXT = `> **Warning**
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. 
+> ## Please edit the corresponding file in package/mermaid/src/docs.`;
 
 const LOGMSG_TRANSFORMED = 'transformed';
 const LOGMSG_TO_BE_TRANSFORMED = 'to be transformed';
@@ -131,6 +133,41 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
   logWasOrShouldBeTransformed(fileInFinalDocDir, doCopy);
 };
 
+const transformAnnotation = (content: string, type: 'warning' | 'tip' | 'note') => {
+  let transformed = content;
+  let regex = /::: note\n[\s\S]+?:::/gm;
+  let text = 'Note';
+
+  switch (type) {
+    case 'note':
+      regex = /::: note\s?\n[\s\S]+?:::/gm;
+      break;
+    case 'tip':
+      regex = /::: tip\s?\n[\s\S]+?:::/gm;
+      text = 'Note';
+      break;
+    case 'warning':
+      regex = /::: warning\s?\n[\s\S]+?:::/gm;
+      text = 'Warning';
+      break;
+    default:
+      break;
+  }
+
+  const matches = content.match(regex);
+  if (matches) {
+    console.log(`found ${matches.length} of ${type}`);
+
+    const formatted = matches.map((element) =>
+      element.replace(`::: ${type}`, `> **${text}**  `).replace(':::', '>').replace('\n', '\n> ')
+    );
+    let n = 0;
+    for (const match of matches) {
+      transformed = transformed.replace(match, formatted[n++]);
+    }
+  }
+  return transformed;
+};
 const readSyncedUTF8file = (filename: string): string => {
   return readFileSync(filename, 'utf8');
 };
@@ -148,7 +185,12 @@ const readSyncedUTF8file = (filename: string): string => {
  * @param file {string} name of the file that will be verified
  */
 const transformMarkdown = (file: string) => {
-  const doc = readSyncedUTF8file(file).replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION);
+  let doc = readSyncedUTF8file(file).replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION);
+
+  doc = transformAnnotation(doc, 'warning');
+  doc = transformAnnotation(doc, 'tip');
+  doc = transformAnnotation(doc, 'note');
+
   const ast: Root = remark.parse(doc);
   const out = flatmap(ast, (c: Code) => {
     if (c.type !== 'code') {

packages/mermaid/src/docs/.vitepress/config.ts

@@ -1,4 +1,4 @@
-import { version } from '../../package.json';
+import { version } from '../../../package.json';
 import MermaidMarkdown from './mermaid-markdown-all';
 import { defineConfig } from 'vitepress';
 
@@ -8,9 +8,12 @@ export default defineConfig({
   description: 'Create diagrams and visualizations using text and code.',
   base: '/mermaid-docs/',
   markdown: MermaidMarkdown,
-  ignoreDeadLinks: true, //TODO: try to fixe those in autogenerated docs
   themeConfig: {
     nav: nav(),
+    editLink: {
+      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
 
     sidebar: {
       '/': sidebarAll(),
@@ -53,7 +56,7 @@ function nav() {
     },
     {
       text: '💻 Live Editor',
-      link: '/edit',
+      link: 'https://mermaid.live',
     },
   ];
 }

packages/mermaid/src/docs/.vitepress/theme/custom.css

@@ -0,0 +1,21 @@
+:root {
+  --vp-c-brand: #ff3670;
+  --vp-c-brand-light: #ff5e8c;
+  --vp-c-brand-lighter: #ff85a8;
+  --vp-c-brand-lightest: #ff9bb7;
+  --vp-c-brand-dark: #bd34fe;
+  --vp-c-brand-darker: #9339bd;
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
+  --vp-home-hero-image-filter: blur(72px);
+}
+
+.vp-doc > div {
+  width: 100%;
+}

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from 'vitepress/theme';
+// @ts-ignore
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
 

packages/mermaid/src/docs/CHANGELOG.md

@@ -11,10 +11,10 @@ All changes are in descending order, beginning with the newest (latest) version.
 🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
 📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
 
-This version brings with it a system for [dynamic and integrated configuration of the diagram themes](../config/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.**