diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e6f99a8bf..cae97e586 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -38,6 +38,10 @@ module.exports = { 'lodash', 'unicorn', ], + ignorePatterns: [ + // this file is automatically generated by `pnpm run --filter mermaid types:build-config` + 'packages/mermaid/src/config.type.ts', + ], rules: { curly: 'error', 'no-console': 'error', @@ -123,6 +127,14 @@ module.exports = { files: ['*.{ts,tsx}'], plugins: ['tsdoc'], rules: { + 'no-restricted-syntax': [ + 'error', + { + selector: 'TSEnumDeclaration', + message: + 'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj', + }, + ], 'tsdoc/syntax': 'error', }, }, diff --git a/.github/codecov.yaml b/.github/codecov.yaml index 3db0811ad..950edb6a9 100644 --- a/.github/codecov.yaml +++ b/.github/codecov.yaml @@ -11,5 +11,7 @@ comment: coverage: status: project: - default: - threshold: 2% + off + # Turing off for now as code coverage isn't stable and causes unnecessary build failures. + # default: + # threshold: 2% diff --git a/.github/lychee.toml b/.github/lychee.toml new file mode 100644 index 000000000..b13e53616 --- /dev/null +++ b/.github/lychee.toml @@ -0,0 +1,44 @@ +############################# Display ############################# + +# Verbose program output +# Accepts log level: "error", "warn", "info", "debug", "trace" +verbose = "debug" + +# Don't show interactive progress bar while checking links. +no_progress = true + +############################# Cache ############################### + +# Enable link caching. This can be helpful to avoid checking the same links on +# multiple runs. +cache = true + +# Discard all cached requests older than this duration. +max_cache_age = "1d" + +############################# Requests ############################ + +# Comma-separated list of accepted status codes for valid links. +accept = [200, 429] + +############################# Exclusions ########################## + +# Exclude URLs and mail addresses from checking (supports regex). +exclude = [ +# Network error: Forbidden +"https://codepen.io", + +# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers? +"https://twitter.com/mermaidjs_", + +# Don't check files that are generated during the build via `pnpm docs:code` +'packages/mermaid/src/docs/config/setup/*', + +# Ignore slack invite +"https://join.slack.com/" +] + +# Exclude all private IPs from checking. +# Equivalent to setting `exclude_private`, `exclude_link_local`, and +# `exclude_loopback` to true. +exclude_all_private = true diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 077cc568b..0bbd8db66 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,4 @@ -'Type: Bug / Error': 'bug/*' -'Type: Enhancement': 'feature/*' -'Type: Other': 'other/*' +'Type: Bug / Error': ['bug/*', fix/*] +'Type: Enhancement': ['feature/*', 'feat/*'] +'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] +'Area: Documentation': ['docs/*'] diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3574c3599..ff34d24fd 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -13,6 +13,6 @@ Describe the way your implementation works or what design decisions you made if Make sure you - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) -- [ ] :computer: have added unit/e2e tests (if appropriate) -- [ ] :notebook: have added documentation (if appropriate) +- [ ] :computer: have added necessary unit/e2e tests. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index b25ff89cc..152b177ae 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -1,6 +1,10 @@ name: Build Vitepress docs on: + push: + branches: + - master + - release/* pull_request: merge_group: @@ -25,5 +29,9 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile + - name: Verify release verion + if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }} + run: pnpm --filter mermaid run docs:verify-version + - name: Run Build run: pnpm --filter mermaid run docs:build:vitepress diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index c204d5872..3e6966677 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -45,15 +45,18 @@ jobs: env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} VITEST_COVERAGE: true + CYPRESS_COMMIT: ${{ github.sha }} - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 - if: steps.cypress.conclusion == 'success' + # Run step only pushes to develop and pull_requests + if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}} with: files: coverage/cypress/lcov.info flags: e2e name: mermaid-codecov fail_ci_if_error: false verbose: true + token: 6845cc80-77ee-4e17-85a1-026cd95e0766 - name: Upload Artifacts uses: actions/upload-artifact@v3 if: ${{ failure() && steps.cypress.conclusion == 'failure' }} diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml index a2dc989e7..70580bfff 100644 --- a/.github/workflows/link-checker.yml +++ b/.github/workflows/link-checker.yml @@ -20,7 +20,7 @@ on: - cron: '30 8 * * *' jobs: - linkChecker: + link-checker: runs-on: ubuntu-latest permissions: # lychee only uses the GITHUB_TOKEN to avoid rate-limiting @@ -39,10 +39,7 @@ jobs: uses: lycheeverse/lychee-action@v1.8.0 with: args: >- - --verbose - --no-progress - --cache - --max-cache-age 1d + --config .github/lychee.toml packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 53b7f484d..493bacaf7 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -53,6 +53,19 @@ jobs: exit 1 fi + - name: Verify `./src/config.type.ts` is in sync with `./src/schemas/config.schema.yaml` + shell: bash + run: | + if ! pnpm run --filter mermaid types:verify-config; then + ERROR_MESSAGE='Running `pnpm run --filter mermaid types:verify-config` failed.' + ERROR_MESSAGE+=' This should be fixed by running' + ERROR_MESSAGE+=' `pnpm run --filter mermaid types:build-config`' + ERROR_MESSAGE+=' on your local machine.' + echo "::error title=Lint failure::${ERROR_MESSAGE}" + # make sure to return an error exitcode so that GitHub actions shows a red-cross + exit 1 + fi + - name: Verify Docs id: verifyDocs working-directory: ./packages/mermaid diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index af5c477d6..ff5d8d0a1 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -1,11 +1,15 @@ name: Validate PR Labeler Configuration on: - push: {} + push: + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml pull_request: - types: - - opened - - synchronize - - ready_for_review + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml jobs: pr-labeler: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 47b726bd1..7c32795e8 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -43,9 +43,12 @@ jobs: - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 + # Run step only pushes to develop and pull_requests + if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }} with: files: ./coverage/vitest/lcov.info flags: unit name: mermaid-codecov fail_ci_if_error: false verbose: true + token: 6845cc80-77ee-4e17-85a1-026cd95e0766 diff --git a/.gitignore b/.gitignore index 009c6dfac..6a1cc85e5 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,6 @@ stats/ **/contributor-names.json .pnpm-store .nyc_output + +demos/dev/** +!/demos/dev/example.html diff --git a/.lycheeignore b/.lycheeignore deleted file mode 100644 index d22d3cb15..000000000 --- a/.lycheeignore +++ /dev/null @@ -1,17 +0,0 @@ -# These links are ignored by our link checker https://github.com/lycheeverse/lychee -# The file allows you to list multiple regular expressions for exclusion (one pattern per line). - -# Network error: Forbidden -https://codepen.io - -# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers? -https://twitter.com/mermaidjs_ - -# Don't check files that are generated during the build via `pnpm docs:code` -packages/mermaid/src/docs/config/setup/* - -# Ignore localhost -http://localhost:3333/ - -# Ignore slack invite -https://join.slack.com/ diff --git a/.prettierignore b/.prettierignore index b50a94e84..8a9086315 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,5 +5,8 @@ coverage # Autogenerated by PNPM pnpm-lock.yaml stats -packages/mermaid/src/docs/.vitepress/components.d.ts +**/.vitepress/components.d.ts +**/.vitepress/cache .nyc_output +# Autogenerated by `pnpm run --filter mermaid types:build-config` +packages/mermaid/src/config.type.ts diff --git a/.vite/build.ts b/.vite/build.ts index 85c9b7fa0..b89df9e31 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -2,6 +2,7 @@ import { build, InlineConfig, type PluginOption } from 'vite'; import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; +import jsonSchemaPlugin from './jsonSchemaPlugin.js'; import { readFileSync } from 'fs'; import typescript from '@rollup/plugin-typescript'; import { visualizer } from 'rollup-plugin-visualizer'; @@ -121,6 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) }, plugins: [ jisonPlugin(), + jsonSchemaPlugin(), // handles `.schema.yaml` files // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), istanbul({ diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts new file mode 100644 index 000000000..671a9612e --- /dev/null +++ b/.vite/jsonSchemaPlugin.ts @@ -0,0 +1,150 @@ +import { load, JSON_SCHEMA } from 'js-yaml'; +import assert from 'node:assert'; +import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js'; +import { PluginOption } from 'vite'; + +import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js'; + +/** + * All of the keys in the mermaid config that have a mermaid diagram config. + */ +const MERMAID_CONFIG_DIAGRAM_KEYS = [ + 'flowchart', + 'sequence', + 'gantt', + 'journey', + 'class', + 'state', + 'er', + 'pie', + 'quadrantChart', + 'requirement', + 'mindmap', + 'timeline', + 'gitGraph', + 'c4', + 'sankey', +] as const; + +/** + * Generate default values from the JSON Schema. + * + * AJV does not support nested default values yet (or default values with $ref), + * so we need to manually find them (this may be fixed in ajv v9). + * + * @param mermaidConfigSchema - The Mermaid JSON Schema to use. + * @returns The default mermaid config object. + */ +function generateDefaults(mermaidConfigSchema: JSONSchemaType) { + const ajv = new Ajv2019({ + useDefaults: true, + allowUnionTypes: true, + strict: true, + }); + + ajv.addKeyword({ + keyword: 'meta:enum', // used by jsonschema2md + errors: false, + }); + ajv.addKeyword({ + keyword: 'tsType', // used by json-schema-to-typescript + errors: false, + }); + + // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718 + // (may be fixed in v9) so we need to manually use sub-schemas + const mermaidDefaultConfig = {}; + + assert.ok(mermaidConfigSchema.$defs); + const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig; + + for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) { + const subSchemaRef = mermaidConfigSchema.properties[key].$ref; + const [root, defs, defName] = subSchemaRef.split('/'); + assert.strictEqual(root, '#'); + assert.strictEqual(defs, '$defs'); + const subSchema = { + $schema: mermaidConfigSchema.$schema, + $defs: mermaidConfigSchema.$defs, + ...mermaidConfigSchema.$defs[defName], + } as JSONSchemaType; + + const validate = ajv.compile(subSchema); + + mermaidDefaultConfig[key] = {}; + + for (const required of subSchema.required ?? []) { + if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) { + mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default; + } + } + if (!validate(mermaidDefaultConfig[key])) { + throw new Error( + `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + } + + const validate = ajv.compile(mermaidConfigSchema); + + if (!validate(mermaidDefaultConfig)) { + throw new Error( + `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify( + validate.errors, + undefined, + 2 + )}` + ); + } + + return mermaidDefaultConfig; +} + +/** + * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file. + * + * Use `my-example.schema.yaml?only-defaults=true` to only load the default values. + */ +export default function jsonSchemaPlugin(): PluginOption { + return { + name: 'json-schema-plugin', + transform(src: string, id: string) { + const idAsUrl = new URL(id, 'file:///'); + + if (!idAsUrl.pathname.endsWith('schema.yaml')) { + return; + } + + if (idAsUrl.searchParams.get('only-defaults')) { + const jsonSchema = load(src, { + filename: idAsUrl.pathname, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }) as JSONSchemaType; + return { + code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`, + map: null, // no source map + }; + } else { + return { + code: `export default ${JSON.stringify( + load(src, { + filename: idAsUrl.pathname, + // only allow JSON types in our YAML doc (will probably be default in YAML 1.3) + // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`. + schema: JSON_SCHEMA, + }), + undefined, + 2 + )};`, + map: null, // provide source map if available + }; + } + }, + }; +} diff --git a/.vscode/launch.json b/.vscode/launch.json index 83b80fa40..dc5ec94a1 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -17,7 +17,7 @@ "name": "Docs generation", "type": "node", "request": "launch", - "args": ["src/docs.mts"], + "args": ["scripts/docs.cli.mts"], "runtimeArgs": ["--loader", "ts-node/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e8ac09325..02733ee2e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,9 +26,14 @@ Install required packages: ```bash # npx is required for first install as volta support for pnpm is not added yet. npx pnpm install -pnpm test +pnpm test # run unit tests +pnpm dev # starts a dev server ``` +Open in your browser after starting the dev server. +You can also duplicate the `example.html` file in `demos/dev`, rename it and add your own mermaid code to it. +That will be served at . + ### Docker If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands: @@ -64,7 +69,7 @@ eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red Documentation is necessary for all non bugfix/refactoring changes. -Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) +Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) **_DO NOT CHANGE FILES IN `/docs`_** diff --git a/cSpell.json b/cSpell.json index ad225d1bc..70144cb25 100644 --- a/cSpell.json +++ b/cSpell.json @@ -92,6 +92,8 @@ "mult", "neurodiverse", "nextra", + "nikolay", + "nirname", "orlandoni", "pathe", "pbrolin", @@ -105,9 +107,11 @@ "ranksep", "rect", "rects", + "reda", "redmine", "rehype", "roledescription", + "rozhkov", "sandboxed", "sankey", "setupgraphviewbox", @@ -124,6 +128,7 @@ "stylis", "subhash-halder", "substate", + "sulais", "sveidqvist", "swimm", "techn", @@ -134,6 +139,7 @@ "tsdoc", "tuleap", "tylerlong", + "typora", "ugge", "unist", "unocss", @@ -147,6 +153,7 @@ "vueuse", "xlink", "yash", + "yokozuna", "zenuml" ], "patterns": [ diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js deleted file mode 100644 index 4d13b3590..000000000 --- a/cypress/helpers/util.js +++ /dev/null @@ -1,93 +0,0 @@ -const utf8ToB64 = (str) => { - return window.btoa(unescape(encodeURIComponent(str))); -}; - -const batchId = 'mermaid-batch' + new Date().getTime(); - -export const mermaidUrl = (graphStr, options, api) => { - const obj = { - code: graphStr, - mermaid: options, - }; - const objStr = JSON.stringify(obj); - let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr); - if (api) { - url = 'http://localhost:9000/xss.html?graph=' + graphStr; - } - - if (options.listUrl) { - cy.log(options.listId, ' ', url); - } - - return url; -}; - -export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => { - cy.log(_options); - const options = Object.assign(_options); - if (!options.fontFamily) { - options.fontFamily = 'courier'; - } - if (!options.sequence) { - options.sequence = {}; - } - if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) { - options.sequence.actorFontFamily = 'courier'; - } - if (options.sequence && !options.sequence.noteFontFamily) { - options.sequence.noteFontFamily = 'courier'; - } - options.sequence.actorFontFamily = 'courier'; - options.sequence.noteFontFamily = 'courier'; - options.sequence.messageFontFamily = 'courier'; - if (options.sequence && !options.sequence.actorFontFamily) { - options.sequence.actorFontFamily = 'courier'; - } - if (!options.fontSize) { - options.fontSize = '16px'; - } - const url = mermaidUrl(graphStr, options, api); - openURLAndVerifyRendering(url, options, validation); -}; - -export const urlSnapshotTest = (url, _options, api = false, validation) => { - const options = Object.assign(_options); - openURLAndVerifyRendering(url, options, validation); -}; - -export const renderGraph = (graphStr, options, api) => { - const url = mermaidUrl(graphStr, options, api); - openURLAndVerifyRendering(url, options); -}; - -export const openURLAndVerifyRendering = (url, options, validation = undefined) => { - const useAppli = Cypress.env('useAppli'); - const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); - - if (useAppli) { - cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name); - cy.eyesOpen({ - appName: 'Mermaid', - testName: name, - batchName: Cypress.spec.name, - batchId: batchId + Cypress.spec.name, - }); - } - - cy.visit(url); - cy.window().should('have.property', 'rendered', true); - cy.get('svg').should('be.visible'); - - if (validation) { - cy.get('svg').should(validation); - } - - if (useAppli) { - cy.log('Check eyes' + Cypress.spec.name); - cy.eyesCheckWindow('Click!'); - cy.log('Closing eyes' + Cypress.spec.name); - cy.eyesClose(); - } else { - cy.matchImageSnapshot(name); - } -}; diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts new file mode 100644 index 000000000..ea217b4fc --- /dev/null +++ b/cypress/helpers/util.ts @@ -0,0 +1,132 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { Buffer } from 'buffer'; +import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js'; + +interface CypressConfig { + listUrl?: boolean; + listId?: string; + name?: string; +} +type CypressMermaidConfig = MermaidConfig & CypressConfig; + +interface CodeObject { + code: string; + mermaid: CypressMermaidConfig; +} + +const utf8ToB64 = (str: string): string => { + return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); +}; + +const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString(); + +export const mermaidUrl = ( + graphStr: string, + options: CypressMermaidConfig, + api: boolean +): string => { + const codeObject: CodeObject = { + code: graphStr, + mermaid: options, + }; + const objStr: string = JSON.stringify(codeObject); + let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; + if (api) { + url = `http://localhost:9000/xss.html?graph=${graphStr}`; + } + + if (options.listUrl) { + cy.log(options.listId, ' ', url); + } + + return url; +}; + +export const imgSnapshotTest = ( + graphStr: string, + _options: CypressMermaidConfig = {}, + api = false, + validation?: any +): void => { + cy.log(JSON.stringify(_options)); + const options: CypressMermaidConfig = Object.assign(_options); + if (!options.fontFamily) { + options.fontFamily = 'courier'; + } + if (!options.sequence) { + options.sequence = {}; + } + if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) { + options.sequence.actorFontFamily = 'courier'; + } + if (options.sequence && !options.sequence.noteFontFamily) { + options.sequence.noteFontFamily = 'courier'; + } + options.sequence.actorFontFamily = 'courier'; + options.sequence.noteFontFamily = 'courier'; + options.sequence.messageFontFamily = 'courier'; + if (options.sequence && !options.sequence.actorFontFamily) { + options.sequence.actorFontFamily = 'courier'; + } + if (!options.fontSize) { + options.fontSize = 16; + } + + const url: string = mermaidUrl(graphStr, options, api); + openURLAndVerifyRendering(url, options, validation); +}; + +export const urlSnapshotTest = ( + url: string, + _options: CypressMermaidConfig, + _api = false, + validation?: any +): void => { + const options: CypressMermaidConfig = Object.assign(_options); + openURLAndVerifyRendering(url, options, validation); +}; + +export const renderGraph = ( + graphStr: string, + options: CypressMermaidConfig = {}, + api = false +): void => { + const url: string = mermaidUrl(graphStr, options, api); + openURLAndVerifyRendering(url, options); +}; + +export const openURLAndVerifyRendering = ( + url: string, + options: CypressMermaidConfig, + validation?: any +): void => { + const useAppli: boolean = Cypress.env('useAppli'); + const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); + + if (useAppli) { + cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`); + cy.eyesOpen({ + appName: 'Mermaid', + testName: name, + batchName: Cypress.spec.name, + batchId: batchId + Cypress.spec.name, + }); + } + + cy.visit(url); + cy.window().should('have.property', 'rendered', true); + cy.get('svg').should('be.visible'); + + if (validation) { + cy.get('svg').should(validation); + } + + if (useAppli) { + cy.log(`Check eyes ${Cypress.spec.name}`); + cy.eyesCheckWindow('Click!'); + cy.log(`Closing eyes ${Cypress.spec.name}`); + cy.eyesClose(); + } else { + cy.matchImageSnapshot(name); + } +}; diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 6df7edd84..7cbc5d105 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -1,4 +1,4 @@ -import { renderGraph } from '../../helpers/util.js'; +import { renderGraph } from '../../helpers/util.ts'; describe('Configuration', () => { describe('arrowMarkerAbsolute', () => { it('should handle default value false of arrowMarkerAbsolute', () => { diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 4ade11e81..704222f2f 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest } from '../../helpers/util.js'; +import { urlSnapshotTest } from '../../helpers/util.ts'; describe('mermaid', () => { describe('registerDiagram', () => { diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 912f35728..48eb57a91 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js'; +import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts'; describe('CSS injections', () => { it('should not allow CSS injections outside of the diagram', () => { diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index 76b2c47f2..fa4ca4fc8 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -1,4 +1,4 @@ -import { mermaidUrl } from '../../helpers/util.js'; +import { mermaidUrl } from '../../helpers/util.ts'; describe('XSS', () => { it('should handle xss in tags', () => { const str = diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js index 462fe869c..5def96815 100644 --- a/cypress/integration/rendering/appli.spec.js +++ b/cypress/integration/rendering/appli.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Git Graph diagram', () => { it('1: should render a simple gitgraph with commit on main branch', () => { diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js index 0cf128ff6..59af6504b 100644 --- a/cypress/integration/rendering/c4.spec.js +++ b/cypress/integration/rendering/c4.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('C4 diagram', () => { it('should render a simple C4Context diagram', () => { diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 40d2f5cd7..37e9cada0 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Class diagram V2', () => { it('0: should render a simple class diagram', () => { imgSnapshotTest( diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 427b4cf0b..a23430b08 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Class diagram', () => { it('1: should render a simple class diagram', () => { @@ -423,4 +423,82 @@ describe('Class diagram', () => { ); cy.get('svg'); }); + + it('should render class diagram with newlines in title', () => { + imgSnapshotTest(` + classDiagram + Animal <|-- \`Du\nck\` + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class \`Du\nck\` { + +String beakColor + +String featherColor + +swim() + +quack() + } + `); + cy.get('svg'); + }); + + it('should render class diagram with many newlines in title', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + `); + }); + + it('should render with newlines in title and an annotation', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + `); + }); + + it('should handle newline title in namespace', () => { + imgSnapshotTest(` + classDiagram + namespace testingNamespace { + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + } + `); + }); + + it('should handle newline in string label', () => { + imgSnapshotTest(` + classDiagram + class A["This has\na newline!"] { + +String boop + -Int beep + #double bop + } + + class B["This title also has\na newline"] + B : +with(more) + B : -methods() + `); + }); }); diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js index 3fc0f7f02..bc17f6236 100644 --- a/cypress/integration/rendering/conf-and-directives.spec.js +++ b/cypress/integration/rendering/conf-and-directives.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Configuration and directives - nodes should be light blue', () => { it('No config - use default', () => { diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index e0b36d53a..d7bc08105 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Current diagram', () => { it('should render a state with states in it', () => { diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js index afde4af3e..56ad0f15f 100644 --- a/cypress/integration/rendering/debug.spec.js +++ b/cypress/integration/rendering/debug.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Flowchart', () => { it('34: testing the label width in percy', () => { diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 0c6eaa838..28c6191c8 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Entity Relationship Diagram', () => { it('should render a simple ER diagram', () => { @@ -200,6 +200,27 @@ describe('Entity Relationship Diagram', () => { ); }); + it('should render entities with attributes that begin with asterisk', () => { + imgSnapshotTest( + ` + erDiagram + BOOK { + int *id + string name + varchar(99) summary + } + BOOK }o..o{ STORE : soldBy + STORE { + int *id + string name + varchar(50) address + } + `, + { loglevel: 1 } + ); + cy.get('svg'); + }); + it('should render entities with keys', () => { renderGraph( ` diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 4f90646a2..221806b07 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe.skip('Flowchart ELK', () => { it('1-elk: should render a simple flowchart', () => { @@ -681,7 +681,7 @@ title: Simple flowchart flowchart-elk TD A --> B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('elk: should include classes on the edges', () => { @@ -710,7 +710,7 @@ flowchart-elk LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -726,7 +726,7 @@ flowchart-elk LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -736,7 +736,7 @@ flowchart-elk LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -749,7 +749,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -766,7 +766,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); @@ -782,7 +782,7 @@ flowchart-elk LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -798,7 +798,7 @@ flowchart-elk LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -808,7 +808,7 @@ flowchart-elk LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -821,7 +821,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -838,7 +838,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 305c55b21..aac4a31b1 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Flowchart v2', () => { it('1: should render a simple flowchart', () => { @@ -449,7 +449,7 @@ flowchart TD { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); - it('65: text-color from classes', () => { + it('65-1: text-color from classes', () => { imgSnapshotTest( ` flowchart LR @@ -460,6 +460,31 @@ flowchart TD { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); + it('65-2: bold text from classes', () => { + imgSnapshotTest( + ` + flowchart + classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold; + CS(A long bold text to be viewed):::cat + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); + it('65-3: bigger font from classes', () => { + imgSnapshotTest( + ` +flowchart + Node1:::class1 --> Node2:::class2 + Node1:::class1 --> Node3:::class2 + Node3 --> Node4((I am a circle)):::larger + + classDef class1 fill:lightblue + classDef class2 fill:pink + classDef larger font-size:30px,fill:yellow + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); it('66: More nested subgraph cases (TB)', () => { imgSnapshotTest( ` @@ -671,7 +696,7 @@ title: Simple flowchart flowchart TD A --> B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 10 } } ); }); it('3192: It should be possieble to render flowcharts with invisible edges', () => { @@ -682,7 +707,7 @@ title: Simple flowchart with invisible edges flowchart TD A ~~~ B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 10 } } ); }); it('4023: Should render html labels with images and-or text correctly', () => { @@ -695,6 +720,15 @@ A ~~~ B {} ); }); + + it('4439: Should render the graph even if some images are missing', () => { + imgSnapshotTest( + `flowchart TD + B[] + B-->C[]`, + {} + ); + }); describe('Markdown strings flowchart (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => { @@ -707,7 +741,7 @@ flowchart LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -723,7 +757,7 @@ flowchart LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -733,7 +767,7 @@ flowchart LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -746,7 +780,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -763,7 +797,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); @@ -779,7 +813,7 @@ flowchart LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -795,7 +829,7 @@ flowchart LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -805,7 +839,7 @@ flowchart LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -818,7 +852,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -835,7 +869,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index d25043d28..e4766e792 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Graph', () => { it('1: should render a simple flowchart no htmlLabels', () => { @@ -891,4 +891,27 @@ graph TD { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); + it('66: apply class called default on node called default', () => { + imgSnapshotTest( + ` + graph TD + classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff + hello --> default + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); + + it('67: should be able to style default node independently', () => { + imgSnapshotTest( + ` + flowchart TD + classDef default fill:#a34 + hello --> default + + style default stroke:#000,stroke-width:4px + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); }); diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index cb65f73b0..33d3ac9e1 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Gantt diagram', () => { beforeEach(() => { @@ -414,6 +414,28 @@ describe('Gantt diagram', () => { ); }); + it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1week + weekday monday + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + {} + ); + }); + it('should render a gantt diagram with tick is 1 month', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 43f91a983..c01a55796 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Git Graph diagram', () => { it('1: should render a simple gitgraph with commit on main branch', () => { @@ -333,4 +333,372 @@ gitGraph {} ); }); + it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + commit id: "3" + `, + {} + ); + }); + it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "One" + commit id: "Two" + commit id: "Three" + `, + {} + ); + }); + it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "Normal Commit" + commit id: "Reverse Commit" type: REVERSE + commit id: "Hightlight Commit" type: HIGHLIGHT + `, + {} + ); + }); + it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "Normal Commit with tag" tag: "v1.0.0" + commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" + commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + `, + {} + ); + }); + it('19: should render a simple gitgraph with two branches | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch develop + checkout develop + commit id: "3" + commit id: "4" + checkout main + commit id: "5" + commit id: "6" + `, + {} + ); + }); + it('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch develop + checkout develop + commit id: "3" + commit id: "4" + checkout main + merge develop + commit id: "5" + commit id: "6" + `, + {} + ); + }); + it('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + 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: "12345" tag: "my merge commit" + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" + `, + {} + ); + }); + it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'gitBranchLabel0': '#ffffff', + 'gitBranchLabel1': '#ffffff', + 'gitBranchLabel2': '#ffffff', + 'gitBranchLabel3': '#ffffff', + 'gitBranchLabel4': '#ffffff', + 'gitBranchLabel5': '#ffffff', + 'gitBranchLabel6': '#ffffff', + 'gitBranchLabel7': '#ffffff', + } } }%% + gitGraph TB: + checkout main + branch branch1 + branch branch2 + branch branch3 + branch branch4 + branch branch5 + branch branch6 + branch branch7 + branch branch8 + branch branch9 + checkout branch1 + commit id: "1" + `, + {} + ); + }); + it('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': true + } } }%% + gitGraph TB: + commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828" + commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e" + commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e" + commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d" + `, + {} + ); + }); + it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': false + } } }%% + gitGraph TB: + commit id: "Alpha" + commit id: "Beta" + commit id: "Gamma" + commit id: "Delta" + `, + {} + ); + }); + it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + 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" + `, + {} + ); + }); + it('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + 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" tag: "snapshot" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + 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" tag: "" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + branch featureA + commit id:"FIX" + commit id: "FIX-2" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + cherry-pick id:"FIX" + checkout develop + commit id:"C" + merge featureA + `, + {} + ); + }); + it('29: should render commits for more than 8 branches | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + checkout main + %% Make sure to manually set the ID of all commits, for consistent visual tests + commit id: "1-abcdefg" + checkout main + branch branch1 + commit id: "2-abcdefg" + checkout main + merge branch1 + branch branch2 + commit id: "3-abcdefg" + checkout main + merge branch2 + branch branch3 + commit id: "4-abcdefg" + checkout main + merge branch3 + branch branch4 + commit id: "5-abcdefg" + checkout main + merge branch4 + branch branch5 + commit id: "6-abcdefg" + checkout main + merge branch5 + branch branch6 + commit id: "7-abcdefg" + checkout main + merge branch6 + branch branch7 + commit id: "8-abcdefg" + checkout main + merge branch7 + branch branch8 + commit id: "9-abcdefg" + checkout main + merge branch8 + branch branch9 + commit id: "10-abcdefg" + `, + {} + ); + }); + it('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + 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" + `, + {} + ); + }); + it('31: should render a simple gitgraph with a title | Vertical Branch', () => { + imgSnapshotTest( + `--- +title: simple gitGraph +--- +gitGraph TB: + commit id: "1-abcdefg" +`, + {} + ); + }); + it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"s1" + commit id:"s2" + branch branch1 + commit id:"s3" + commit id:"s4" + checkout main + commit id:"s5" + checkout branch1 + commit id:"s6" + commit id:"s7" + merge main + `, + {} + ); + }); + it('33: should render a simple gitgraph overlapping commits', () => { + imgSnapshotTest( + `gitGraph + commit id:"s1" + commit id:"s2" + branch branch1 + commit id:"s3" + commit id:"s4" + checkout main + commit id:"s5" + checkout branch1 + commit id:"s6" + commit id:"s7" + merge main + `, + {} + ); + }); }); diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts index 3db74c980..97b384eb5 100644 --- a/cypress/integration/rendering/info.spec.ts +++ b/cypress/integration/rendering/info.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('info diagram', () => { it('should handle an info definition', () => { diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 6f9d9bb60..d8bef6d1b 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('User journey diagram', () => { it('Simple test', () => { diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index e390beaee..a77459f58 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; /** * Check whether the SVG Element has a Mindmap root @@ -242,8 +242,7 @@ mindmap a second line 😎\`] id2[\`The dog in **the** hog... a *very long text* about it Word!\`] -`, - { titleTopMargin: 0 } +` ); }); }); diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js index 8a89a0cde..01b248486 100644 --- a/cypress/integration/rendering/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Pie Chart', () => { it('should render a simple pie diagram', () => { diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 4bcf58b60..50520eb1a 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Quadrant Chart', () => { it('should render if only chart type is provided', () => { diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index 0bf9014bf..f33ae7a0c 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Requirement diagram', () => { it('sample', () => { diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index e334b898b..ad0d75f18 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/cypress/integration/rendering/sankey.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Sankey Diagram', () => { it('should render a simple example', () => { diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 7d36c1ff1..765913824 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -1,6 +1,6 @@ /// -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; context('Sequence diagram', () => { it('should render a sequence diagram with boxes', () => { diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index 700791621..9a1a27abe 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('State diagram', () => { it('v2 should render a simple info', () => { diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 28c24d398..01e7a2b44 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('State diagram', () => { it('should render a simple state diagrams', () => { diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index ef3bd9a4b..c84ad0c4b 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('themeCSS balancing, it', () => { it('should not allow unbalanced CSS definitions', () => { diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index 6fae82fb4..68da01d50 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Timeline diagram', () => { it('1: should render a simple timeline with no specific sections', () => { diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js index f317fbe82..53d8ae346 100644 --- a/cypress/integration/rendering/zenuml.spec.js +++ b/cypress/integration/rendering/zenuml.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Zen UML', () => { it('Basic Zen UML diagram', () => { diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 1b1ccd685..f9a9f3756 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,6 +58,23 @@ 
+      flowchart
+        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
+        CS(Customer Awareness Journey):::mainCategories
+
+ 
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
+
+ 
 stateDiagram-v2
     [*] --> Still
     Still --> [*]
@@ -73,7 +90,7 @@ flowchart RL
       a1 -- l2 --> a2
     end
- 
+    
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
@@ -98,11 +115,11 @@ flowchart LR
         way`"]
   

-    
+    
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
     

-    
+    
     stateDiagram-v2
     State1: The state with a note with minus - and plus + in it
     note left of State1
@@ -147,7 +164,7 @@ mindmap
       शान्तिः سلام  和平 `"]
 
     

-    
+    
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -399,21 +416,31 @@ mindmap
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
+      // mermaid.initialize({
+      //   // theme: 'forest',
+      //   startOnLoad: true,
+      //   logLevel: 0,
+      //   flowchart: {
+      //     // defaultRenderer: 'elk',
+      //     useMaxWidth: false,
+      //     // htmlLabels: false,
+      //     htmlLabels: true,
+      //   },
+      //   // htmlLabels: false,
+      //   gantt: {
+      //     useMaxWidth: false,
+      //   },
+      //   useMaxWidth: false,
+      // });
       mermaid.initialize({
-        // theme: 'forest',
-        startOnLoad: true,
-        logLevel: 0,
-        flowchart: {
-          // defaultRenderer: 'elk',
-          useMaxWidth: false,
-          // htmlLabels: false,
-          htmlLabels: true,
+        flowchart: { titleTopMargin: 10 },
+        fontFamily: 'courier',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
         },
-        // htmlLabels: false,
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        fontSize: 16,
       });
       function callback() {
         alert('It worked');
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index e3351cebe..baa9a7217 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -2,7 +2,9 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
+    "allowImportingTsExtensions": true,
+    "noEmit": true
   },
   "include": ["**/*.ts"]
 }
diff --git a/demos/dev/example.html b/demos/dev/example.html
new file mode 100644
index 000000000..482343014
--- /dev/null
+++ b/demos/dev/example.html
@@ -0,0 +1,34 @@
+
+
+
+  
+    Mermaid development page
+  
+  
+    
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    

+
+    

+
+    
+  
+
diff --git a/docker-compose.yml b/docker-compose.yml
index c881d0473..56a46e84c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.16.1-alpine3.18
+    image: node:18.17.1-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid
@@ -17,7 +17,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.16.0
+    image: cypress/included:12.17.3
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/docs/community/development.md b/docs/community/development.md
index 90f728e15..f8c8b0638 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -70,7 +70,21 @@ pnpm test
 
 The `test` script and others are in the top-level `package.json` file.
 
-All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
+All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ "warnings"; those are ok during this step.)
+
+#### 4. Make your changes
+
+Now you are ready to make your changes!
+Edit whichever files in `src` as required.
+
+#### 5. See your changes
+
+Open  in your browser, after starting the dev server.
+There is a list of demos that can be used to see and test your changes.
+
+If you need a specific diagram, you can duplicate the `example.html` file in `/demos/dev` and add your own mermaid code to your copy.
+That will be served at .
+After making code changes, the dev server will rebuild the mermaid library. You will need to reload the browser page yourself to see the changes. (PRs for auto reload are welcome!)
 
 ### Docker
 
@@ -223,6 +237,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated to users know that things have changed and added!
+If you are adding a new feature, add `(v+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+
+eg: `# Feature Name (v+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 
diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index bb7e2a961..5dd616e66 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -10,7 +10,7 @@
 
 #### 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.
+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:
 
@@ -60,7 +60,7 @@ 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 diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
@@ -124,53 +124,6 @@ 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](../config/directives.md)
-
-Here is example handling from flowcharts:
-Jison:
-
-```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
 
 Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@@ -189,7 +142,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
 
-In a similar way to the directives, the jison syntax are quite similar between the diagrams.
+As a design goal, the jison syntax should be similar between the diagrams.
 
 ```jison
 
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 793dfffae..a55ec1808 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300)
+[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
 
 ---
 
@@ -22,35 +22,12 @@
 
 • `Const` **default**: `Partial`<`MermaidConfig`>
 
-**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click
-here](8.6.0_docs.md)].**
+Default mermaid configuration options.
 
-## **What follows are config instructions for older versions**
-
-These are the default options which can be overridden with the initialization call like so:
-
-**Example 1:**
-
-```js
-mermaid.initialize({ flowchart: { htmlLabels: false } });
-```
-
-**Example 2:**
-
-```html
-
-```
-
-A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
-A description of each option follows below.
+Please see the Mermaid config JSON Schema for the default JSON values.
+Non-JSON JS default values are listed in this file, e.g. functions, or
+`undefined` (explicitly set so that `configKeys` finds them).
 
 #### Defined in
 
-[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
+[defaultConfig.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L16)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 591b6841a..1160a5dda 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
+[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
+[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
+[mermaidAPI.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L255)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
+[mermaidAPI.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L184)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
+[mermaidAPI.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L232)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
+[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
+[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
+[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
+[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
+[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)
diff --git a/docs/config/usage.md b/docs/config/usage.md
index 4203e3a13..7246fe318 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 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.
+The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 
- * ```
- *
- * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
- * A description of each option follows below.
+ * Please see the Mermaid config JSON Schema for the default JSON values.
+ * Non-JSON JS default values are listed in this file, e.g. functions, or
+ * `undefined` (explicitly set so that `configKeys` finds them).
  */
 const config: Partial = {
-  /**
-   * Theme , the CSS style sheet
-   *
-   * | Parameter | Description     | Type   | Required | Values                                         |
-   * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
-   * | theme     | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
-   *
-   * **Notes:** To disable any pre-defined mermaid theme, use "null".
-   *
-   * @example
-   *
-   * ```js
-   * {
-   *   "theme": "forest",
-   *   "themeCSS": ".node rect { fill: red; }"
-   * }
-   * ```
-   */
-  theme: 'default',
-  themeVariables: theme['default'].getThemeVariables(),
-  themeCSS: undefined,
-  /* **maxTextSize** - The maximum allowed size of the users text diagram */
-  maxTextSize: 50000,
-  darkMode: false,
-
-  /**
-   * | Parameter  | Description                                            | Type   | Required | Values                      |
-   * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
-   * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
-   *
-   * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
-   */
-  fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
-
-  /**
-   * | Parameter | Description                                           | Type             | Required | Values                                        |
-   * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
-   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
-   *
-   * **Notes:**
-   *
-   * - Trace: 0
-   * - Debug: 1
-   * - Info: 2
-   * - Warn: 3
-   * - Error: 4
-   * - Fatal: 5 (default)
-   */
-  logLevel: 5,
-
-  /**
-   * | Parameter     | Description                       | Type   | Required | Values                                     |
-   * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-   * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
-   *
-   * **Notes**:
-   *
-   * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
-   * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click
-   *   functionality is enabled.
-   * - **loose**: HTML tags in text are allowed and click functionality is enabled.
-   * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This
-   *   prevent any JavaScript from running in the context. This may hinder interactive functionality
-   *   of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
-   */
-  securityLevel: 'strict',
-
-  /**
-   * | Parameter   | Description                                  | Type    | Required | Values      |
-   * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |
-   * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
-   *
-   * **Notes:** Default value: true
-   */
-  startOnLoad: true,
-
-  /**
-   * | Parameter           | Description                                                                  | Type    | Required | Values      |
-   * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
-   * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |
-   *
-   * **Notes**:
-   *
-   * This matters if you are using base tag settings.
-   *
-   * Default value: false
-   */
-  arrowMarkerAbsolute: false,
-
-  /**
-   * This option controls which currentConfig keys are considered _secure_ and can only be changed
-   * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
-   * `secure` keys in the current currentConfig. This prevents malicious graph directives from
-   * overriding a site's default security.
-   *
-   * **Notes**:
-   *
-   * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
-   */
-  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  /**
-   * This option controls if the generated ids of nodes in the SVG are generated randomly or based
-   * on a seed. If set to false, the IDs are generated based on the current date and thus are not
-   * deterministic. This is the default behavior.
-   *
-   * **Notes**:
-   *
-   * This matters if your files are checked into source control e.g. git and should not change unless
-   * content is changed.
-   *
-   * Default value: false
-   */
-  deterministicIds: false,
-
-  /**
-   * This option is the optional seed for deterministic ids. if set to undefined but
-   * deterministicIds is true, a simple number iterator is used. You can set this attribute to base
-   * the seed on a static string.
-   */
+  ...defaultConfigJson,
+  // Set, even though they're `undefined` so that `configKeys` finds these keys
+  // TODO: Should we replace these with `null` so that they can go in the JSON Schema?
   deterministicIDSeed: undefined,
+  themeCSS: undefined,
 
-  /** The object containing configurations specific for flowcharts */
-  flowchart: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the flowchart     | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 8
-     */
-    diagramPadding: 8,
-
-    /**
-     * | Parameter  | Description                                                                                  | Type    | Required | Values      |
-     * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true.
-     */
-    htmlLabels: true,
-
-    /**
-     * | Parameter   | Description                                         | Type    | Required | Values              |
-     * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |
-     * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |
-     *
-     * **Notes:**
-     *
-     * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the
-     * vertical spacing for LR as well as RL graphs.**
-     *
-     * Default value: 50
-     */
-    nodeSpacing: 50,
-
-    /**
-     * | Parameter   | Description                                           | Type    | Required | Values              |
-     * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |
-     * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |
-     *
-     * **Notes**:
-     *
-     * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal
-     * spacing for LR as well as RL graphs.
-     *
-     * Default value 50
-     */
-    rankSpacing: 50,
-
-    /**
-     * | Parameter | Description                                        | Type   | Required | Values                        |
-     * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
-     * | curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
-     *
-     * **Notes:**
-     *
-     * Default Value: 'basis'
-     */
-    curve: 'basis',
-    // Only used in new experimental rendering
-    // represents the padding between the labels and the shape
-    padding: 15,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper, elk |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
-     * elkjs
-     *
-     * Default value: 'dagre-wrapper'
-     */
-    defaultRenderer: 'dagre-wrapper',
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
-     *
-     * **Notes:**
-     *
-     * When using markdown strings the text ius wrapped automatically, this
-     * value sets the max width of a text before it continues on a new line.
-     * Default value: 'dagre-wrapper'
-     */
-    wrappingWidth: 200,
-  },
-
-  /** The object containing configurations specific for sequence diagrams */
+  // add non-JSON default config values
+  themeVariables: theme['default'].getThemeVariables(),
   sequence: {
-    hideUnusedParticipants: false,
-    /**
-     * | Parameter       | Description                  | Type    | Required | Values             |
-     * | --------------- | ---------------------------- | ------- | -------- | ------------------ |
-     * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value :10
-     */
-    activationWidth: 10,
-
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                       | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    actorMargin: 50,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 65,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description            | Type    | Required | Values             |
-     * | ------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type   | Required | Values                    |
-     * | ------------ | --------------------------- | ------ | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter    | Description                 | Type    | Required | Values      |
-     * | ------------ | --------------------------- | ------- | -------- | ----------- |
-     * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true
-     */
-    mirrorActors: true,
-
-    /**
-     * | Parameter  | Description                                                             | Type    | Required | Values      |
-     * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |
-     *
-     * **Notes:**
-     *
-     * Default value: false.
-     */
-    forceMenus: false,
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                          | Type    | Required | Values      |
-     * | ----------- | ------------------------------------ | ------- | -------- | ----------- |
-     * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curve
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-
-    /**
-     * | Parameter           | Description                     | Type    | Required | Values      |
-     * | ------------------- | ------------------------------- | ------- | -------- | ----------- |
-     * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: false
-     */
-    showSequenceNumbers: false,
-
-    /**
-     * | Parameter     | Description                                        | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | actorFontSize | This sets the font size of the actor's description | Integer | Require  | Any Positive Value |
-     *
-     * **Notes:** **Default value 14**..
-     */
-    actorFontSize: 14,
-
-    /**
-     * | Parameter       | Description                                          | Type   | Required | Values                      |
-     * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: "'Open Sans", sans-serif'
-     */
-    actorFontFamily: '"Open Sans", sans-serif',
-
-    /**
-     * This sets the font weight of the actor's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    actorFontWeight: 400,
-
-    /**
-     * | Parameter    | Description                                     | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 14
-     */
-    noteFontSize: 14,
-
-    /**
-     * | Parameter      | Description                                        | Type   | Required | Values                      |
-     * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif'
-     */
-    noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the note's description
-     *
-     * **Notes:** Default value: 400
-     */
-    noteFontWeight: 400,
-
-    /**
-     * | Parameter | Description                                          | Type   | Required | Values                    |
-     * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
-     * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    noteAlign: 'center',
-
-    /**
-     * | Parameter       | Description                               | Type    | Required | Values              |
-     * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
-     * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
-     *
-     * **Notes:** Default value: 16
-     */
-    messageFontSize: 16,
-
-    /**
-     * | Parameter         | Description                                 | Type   | Required | Values                      |
-     * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
-     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif'
-     */
-    messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the message's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    messageFontWeight: 400,
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: false.
-     */
-    wrap: false,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
-    /**
-     * This sets the width of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 50.
-     */
-    labelBoxWidth: 50,
-
-    /**
-     * This sets the height of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 20.
-     */
-    labelBoxHeight: 20,
-
+    ...defaultConfigJson.sequence,
     messageFont: function () {
       return {
         fontFamily: this.messageFontFamily,
@@ -576,1476 +46,14 @@ const config: Partial = {
       };
     },
   },
-
-  /** The object containing configurations specific for gantt diagrams */
   gantt: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter | Description                         | Type    | Required | Values             |
-     * | --------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    barHeight: 20,
-
-    /**
-     * | Parameter | Description                                                      | Type    | Required | Values             |
-     * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | barGap    | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    barGap: 4,
-
-    /**
-     * | Parameter  | Description                                                                | Type    | Required | Values             |
-     * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    topPadding: 50,
-
-    /**
-     * | Parameter    | Description                                                             | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    rightPadding: 75,
-
-    /**
-     * | Parameter   | Description                                                            | Type    | Required | Values             |
-     * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    leftPadding: 75,
-
-    /**
-     * | Parameter            | Description                                  | Type    | Required | Values             |
-     * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    gridLineStartPadding: 35,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values             |
-     * | --------- | ----------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font size   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    fontSize: 11,
-
-    /**
-     * | Parameter       | Description            | Type    | Required | Values             |
-     * | --------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    sectionFontSize: 11,
-
-    /**
-     * | Parameter           | Description                              | Type    | Required | Values             |
-     * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-     * | numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    numberSectionStyles: 4,
-
-    /**
-     * | Parameter   | Description               | Type   | Required | Values    |
-     * | ----------- | ------------------------- | ------ | -------- | --------- |
-     * | displayMode | Controls the display mode | string | 4        | 'compact' |
-     *
-     * **Notes**:
-     *
-     * - **compact**: Enables displaying multiple tasks on the same row.
-     */
-    displayMode: '',
-
-    /**
-     * | Parameter  | Description                  | Type | Required | Values           |
-     * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
-     * | axisFormat | Date/time format of the axis | 3    | Required | Date in yy-mm-dd |
-     *
-     * **Notes:**
-     *
-     * This might need adjustment to match your locale and preferences
-     *
-     * Default value: '%Y-%m-%d'.
-     */
-    axisFormat: '%Y-%m-%d',
-
-    /**
-     * | Parameter    | Description | Type   | Required | Values  |
-     * | ------------ | ------------| ------ | -------- | ------- |
-     * | tickInterval | axis ticks  | string | Optional | string  |
-     *
-     * **Notes:**
-     *
-     * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
-     *
-     * Default value: undefined
-     */
+    ...defaultConfigJson.gantt,
     tickInterval: undefined,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values      |
-     * | --------- | ----------- | ------- | -------- | ----------- |
-     * | topAxis   | See notes   | Boolean | 4        | True, False |
-     *
-     * **Notes:** when this flag is set date labels will be added to the top of the chart
-     *
-     * **Default value false**.
-     */
-    topAxis: false,
-
-    useWidth: undefined,
+    useWidth: undefined, // can probably be removed since `configKeys` already includes this
   },
-
-  /** The object containing configurations specific for journey diagrams */
-  journey: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-  },
-  /** The object containing configurations specific for timeline diagrams */
-  timeline: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-    disableMulticolor: false,
-  },
-  class: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    arrowMarkerAbsolute: false,
-    dividerMargin: 10,
-    padding: 5,
-    textHeight: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes**:
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-  state: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    dividerMargin: 10,
-    sizeUnit: 5,
-    padding: 8,
-    textHeight: 10,
-    titleShift: -15,
-    noteMargin: 10,
-    forkWidth: 70,
-    forkHeight: 7,
-    // Used
-    miniPadding: 2,
-    // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
-    // layout. This might need updating if/when switching font
-    fontSizeFactor: 5.02,
-    fontSize: 24,
-    labelHeight: 16,
-    edgeLengthFactor: '20',
-    compositTitleSize: 35,
-    radius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-
-  /** The object containing configurations specific for entity relationship diagrams */
-  er: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the diagram       | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 20
-     */
-    diagramPadding: 20,
-
-    /**
-     * | Parameter       | Description                              | Type   | Required | Values                 |
-     * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |
-     * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" |
-     *
-     * **Notes:**
-     *
-     * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
-     *
-     * T = top, B = bottom, L = left, and R = right.
-     *
-     * Default value: 'TB'
-     */
-    layoutDirection: 'TB',
-
-    /**
-     * | Parameter      | Description                        | Type    | Required | Values             |
-     * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels. Default value: 100
-     */
-    minEntityWidth: 100,
-
-    /**
-     * | Parameter       | Description                         | Type    | Required | Values             |
-     * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityHeight | The minimum height of an entity box | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels Default value: 75
-     */
-    minEntityHeight: 75,
-
-    /**
-     * | Parameter     | Description                                                  | Type    | Required | Values             |
-     * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
-     * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The minimum internal padding between text in an entity box and the enclosing box borders,
-     * expressed in pixels.
-     *
-     * Default value: 15
-     */
-    entityPadding: 15,
-
-    /**
-     * | Parameter | Description                         | Type   | Required | Values               |
-     * | --------- | ----------------------------------- | ------ | -------- | -------------------- |
-     * | stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'gray'
-     */
-    stroke: 'gray',
-
-    /**
-     * | Parameter | Description                | Type   | Required | Values               |
-     * | --------- | -------------------------- | ------ | -------- | -------------------- |
-     * | fill      | Fill color of entity boxes | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'honeydew'
-     */
-    fill: 'honeydew',
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Font size (expressed as an integer representing a number of pixels) Default value: 12
-     */
-    fontSize: 12,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for pie diagrams */
-  pie: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description                                                                      | Type    | Required | Values              |
-     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
-     *
-     * **Notes:** Default value: 0.75
-     */
-    textPosition: 0.75,
-  },
-
-  quadrantChart: {
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartWidth      | Width of the chart                 | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartWidth: 500,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartHeight     | Height of the chart                | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartHeight: 500,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titlePadding       | Chart title top and bottom padding | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 10
-     */
-    titlePadding: 10,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titleFontSize      | Chart title font size              | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 20
-     */
-    titleFontSize: 20,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantPadding | Padding around the quadrant square | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantPadding: 5,
-    /**
-     * | Parameter              | Description                                                                | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top         | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantTextTopPadding: 5,
-    /**
-     * | Parameter             | Description                        | Type    | Required | Values              |
-     * | ------------------    | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantLabelFontSize | quadrant title font size           | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    quadrantLabelFontSize: 16,
-    /**
-     * | Parameter                         | Description                                                   | Type    | Required | Values              |
-     * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 1
-     */
-    quadrantInternalBorderStrokeWidth: 1,
-    /**
-     * | Parameter                         | Description                                                    | Type    | Required | Values              |
-     * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 2
-     */
-    quadrantExternalBorderStrokeWidth: 2,
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelPadding | Padding around x-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    xAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelFontSize | x-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    xAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisPosition | position of x-axis labels       | string  | Optional | 'top' or 'bottom'   |
-     *
-     * **Notes:**
-     * Default value: top
-     */
-    xAxisPosition: 'top',
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelPadding | Padding around y-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    yAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelFontSize | y-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    yAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisPosition | position of y-axis labels       | string  | Optional | 'left' or 'right'   |
-     *
-     * **Notes:**
-     * Default value: left
-     */
-    yAxisPosition: 'left',
-    /**
-     * | Parameter              | Description                            | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | padding between point and point label  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointTextPadding: 5,
-    /**
-     * | Parameter              | Description            | Type    | Required | Values              |
-     * | ---------------------- | ---------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | point title font size  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 12
-     */
-    pointLabelFontSize: 12,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | pointRadius   | radius of the point to be drawn | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointRadius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for req diagrams */
-  requirement: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    rect_fill: '#f9f9f9',
-    text_color: '#333',
-    rect_border_size: '0.5px',
-    rect_border_color: '#bbb',
-    rect_min_width: 200,
-    rect_min_height: 200,
-    fontSize: 14,
-    rect_padding: 10,
-    line_height: 20,
-  },
-  gitGraph: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the Git diagram   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    diagramPadding: 8,
-    nodeLabel: {
-      width: 75,
-      height: 100,
-      x: -25,
-      y: 0,
-    },
-    mainBranchName: 'main',
-    mainBranchOrder: 0,
-    showCommitLabel: true,
-    showBranches: true,
-    rotateCommitLabel: true,
-  },
-
-  /** The object containing configurations specific for c4 diagrams */
   c4: {
+    ...defaultConfigJson.c4,
     useWidth: undefined,
-
-    /**
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                 | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter     | Description           | Type    | Required | Values             |
-     * | ------------- | --------------------- | ------- | -------- | ------------------ |
-     * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    c4ShapeMargin: 50,
-
-    /**
-     * | Parameter      | Description            | Type    | Required | Values             |
-     * | -------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    c4ShapePadding: 20,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 216
-     */
-    width: 216,
-
-    /**
-     * | Parameter | Description            | Type    | Required | Values             |
-     * | --------- | ---------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 60
-     */
-    height: 60,
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description | Type    | Required | Values             |
-     * | ------------ | ----------- | ------- | -------- | ------------------ |
-     * | c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many shapes to place in each row.
-     *
-     * Default value: 4
-     */
-    c4ShapeInRow: 4,
-
-    nextLinePaddingX: 0,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values             |
-     * | --------------- | ----------- | ------- | -------- | ------------------ |
-     * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many boundaries to place in each row.
-     *
-     * Default value: 2
-     */
-    c4BoundaryInRow: 2,
-
-    /**
-     * This sets the font size of Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    personFontSize: 14,
-    /**
-     * This sets the font family of Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_personFontSize: 14,
-    /**
-     * This sets the font family of External Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    systemFontSize: 14,
-    /**
-     * This sets the font family of System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_systemFontSize: 14,
-    /**
-     * This sets the font family of External System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_dbFontSize: 14,
-    /**
-     * This sets the font family of System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_dbFontSize: 14,
-    /**
-     * This sets the font family of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_queueFontSize: 14,
-    /**
-     * This sets the font family of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_queueFontSize: 14,
-    /**
-     * This sets the font family of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    boundaryFontSize: 14,
-    /**
-     * This sets the font family of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    boundaryFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    boundaryFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Message shape for the diagram
-     *
-     * **Notes:** Default value: 12.
-     */
-    messageFontSize: 12,
-    /**
-     * This sets the font family of Message shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    messageFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Message shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    messageFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    containerFontSize: 14,
-    /**
-     * This sets the font family of Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_containerFontSize: 14,
-    /**
-     * This sets the font family of External Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_dbFontSize: 14,
-    /**
-     * This sets the font family of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_dbFontSize: 14,
-    /**
-     * This sets the font family of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_queueFontSize: 14,
-    /**
-     * This sets the font family of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_queueFontSize: 14,
-    /**
-     * This sets the font family of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    componentFontSize: 14,
-    /**
-     * This sets the font family of Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_componentFontSize: 14,
-    /**
-     * This sets the font family of External Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_dbFontSize: 14,
-    /**
-     * This sets the font family of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_dbFontSize: 14,
-    /**
-     * This sets the font family of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_queueFontSize: 14,
-    /**
-     * This sets the font family of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_queueFontSize: 14,
-    /**
-     * This sets the font family of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: true.
-     */
-    wrap: true,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
     personFont: function () {
       return {
         fontFamily: this.personFontFamily,
@@ -2221,72 +229,30 @@ const config: Partial = {
         fontWeight: this.messageFontWeight,
       };
     },
-
-    // ' Colors
-    // ' ##################################
-    person_bg_color: '#08427B',
-    person_border_color: '#073B6F',
-    external_person_bg_color: '#686868',
-    external_person_border_color: '#8A8A8A',
-    system_bg_color: '#1168BD',
-    system_border_color: '#3C7FC0',
-    system_db_bg_color: '#1168BD',
-    system_db_border_color: '#3C7FC0',
-    system_queue_bg_color: '#1168BD',
-    system_queue_border_color: '#3C7FC0',
-    external_system_bg_color: '#999999',
-    external_system_border_color: '#8A8A8A',
-    external_system_db_bg_color: '#999999',
-    external_system_db_border_color: '#8A8A8A',
-    external_system_queue_bg_color: '#999999',
-    external_system_queue_border_color: '#8A8A8A',
-    container_bg_color: '#438DD5',
-    container_border_color: '#3C7FC0',
-    container_db_bg_color: '#438DD5',
-    container_db_border_color: '#3C7FC0',
-    container_queue_bg_color: '#438DD5',
-    container_queue_border_color: '#3C7FC0',
-    external_container_bg_color: '#B3B3B3',
-    external_container_border_color: '#A6A6A6',
-    external_container_db_bg_color: '#B3B3B3',
-    external_container_db_border_color: '#A6A6A6',
-    external_container_queue_bg_color: '#B3B3B3',
-    external_container_queue_border_color: '#A6A6A6',
-    component_bg_color: '#85BBF0',
-    component_border_color: '#78A8D8',
-    component_db_bg_color: '#85BBF0',
-    component_db_border_color: '#78A8D8',
-    component_queue_bg_color: '#85BBF0',
-    component_queue_border_color: '#78A8D8',
-    external_component_bg_color: '#CCCCCC',
-    external_component_border_color: '#BFBFBF',
-    external_component_db_bg_color: '#CCCCCC',
-    external_component_db_border_color: '#BFBFBF',
-    external_component_queue_bg_color: '#CCCCCC',
-    external_component_queue_border_color: '#BFBFBF',
   },
-  mindmap: {
-    useMaxWidth: true,
-    padding: 10,
-    maxNodeWidth: 200,
+  pie: {
+    ...defaultConfigJson.pie,
+    useWidth: undefined,
   },
-  sankey: {
-    width: 800,
-    height: 400,
-    linkColor: SankeyLinkColor.gradient,
-    nodeAlignment: SankeyNodeAlignment.justify,
+  requirement: {
+    ...defaultConfigJson.requirement,
+    useWidth: undefined,
+  },
+  gitGraph: {
+    ...defaultConfigJson.gitGraph,
+    // TODO: This is a temporary override for `gitGraph`, since every other
+    //       diagram does have `useMaxWidth`, but instead sets it to `true`.
+    //       Should we set this to `true` instead?
+    useMaxWidth: false,
+  },
+  sankey: {
+    ...defaultConfigJson.sankey,
+    // this is false, unlike every other diagram (other than gitGraph)
+    // TODO: can we make this default to `true` instead?
     useMaxWidth: false,
   },
-  fontSize: 16,
 };
 
-if (config.class) {
-  config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-if (config.gitGraph) {
-  config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-
 const keyify = (obj: any, prefix = ''): string[] =>
   Object.keys(obj).reduce((res: string[], el): string[] => {
     if (Array.isArray(obj[el])) {
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 49bde1a66..b437745cf 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -35,7 +35,12 @@ describe('DiagramAPI', () => {
       'loki',
       {
         db: {},
-        parser: {},
+        parser: {
+          parse: (_text) => {
+            return;
+          },
+          parser: { yy: {} },
+        },
         renderer: {},
         styles: {},
       },
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 7e89d9cd7..3edd982bb 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -69,11 +69,11 @@ export const getDiagram = (name: string): DiagramDefinition => {
   if (name in diagrams) {
     return diagrams[name];
   }
-  throw new Error(`Diagram ${name} not found.`);
+  throw new DiagramNotFoundError(name);
 };
 
 export class DiagramNotFoundError extends Error {
-  constructor(message: string) {
-    super(`Diagram ${message} not found.`);
+  constructor(name: string) {
+    super(`Diagram ${name} not found.`);
   }
 }
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 3b8d00456..100b92e87 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -1,5 +1,5 @@
 import { Diagram } from '../Diagram.js';
-import { MermaidConfig } from '../config.type.js';
+import type { MermaidConfig } from '../config.type.js';
 import type * as d3 from 'd3';
 
 export interface InjectUtils {
@@ -27,7 +27,7 @@ export interface DiagramDB {
 export interface DiagramDefinition {
   db: DiagramDB;
   renderer: any;
-  parser: any;
+  parser: ParserDefinition;
   styles?: any;
   init?: (config: MermaidConfig) => void;
   injectUtils?: (
@@ -70,6 +70,11 @@ export type DrawDefinition = (
   diagramObject: Diagram
 ) => void;
 
+export interface ParserDefinition {
+  parse: (text: string) => void;
+  parser: { yy: DiagramDB };
+}
+
 /**
  * Type for function parse directive from diagram code.
  *
@@ -79,8 +84,10 @@ export type DrawDefinition = (
  */
 export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
 
-export type HTML = d3.Selection;
+export type HTML = d3.Selection;
 
-export type SVG = d3.Selection;
+export type SVG = d3.Selection;
+
+export type Group = d3.Selection;
 
 export type DiagramStylesProvider = (options?: any) => string;
diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index aa613d8e5..99ce4e2c6 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -49,7 +49,7 @@ describe('diagram detection', () => {
       "Parse error on line 2:
       graph TD; A-->
       --------------^
-      Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
+      Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'"
     `);
     await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
       .toThrowErrorMatchingInlineSnapshot(`
diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
index 04567fafa..b3c7ae8eb 100644
--- a/packages/mermaid/src/diagrams/c4/c4Diagram.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import c4Parser from './parser/c4Diagram.jison';
 import c4Db from './c4Db.js';
 import c4Renderer from './c4Renderer.js';
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js
new file mode 100644
index 000000000..76dca3bc2
--- /dev/null
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js
@@ -0,0 +1,135 @@
+import c4Db from '../c4Db.js';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config.js';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each([
+  ['Container', 'container'],
+  ['ContainerDb', 'container_db'],
+  ['ContainerQueue', 'container_queue'],
+  ['Container_Ext', 'external_container'],
+  ['ContainerDb_Ext', 'external_container_db'],
+  ['ContainerQueue_Ext', 'external_container_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Container correctly', function () {
+    c4.parser.parse(`C4Context
+title Container diagram for Internet Banking Container
+${macroName}(ContainerAA, "Internet Banking Container", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'ContainerAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking Container',
+      },
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: elementName,
+      },
+      techn: {
+        text: 'Technology',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "Internet Banking Container")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'ContainerAA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "Internet Banking Container")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Internet Banking Container',
+      },
+    });
+  });
+
+  it('should parse the technology', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "", "Java")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      techn: {
+        text: 'Java',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "", "", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
index 03b851458..1dfa69ef1 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
@@ -150,27 +150,27 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "Node_R"                                  { this.begin("node_r"); return 'NODE_R';}
 
 
-"Rel"                                     { this.begin("rel"); return 'REL';} 
-"BiRel"                                   { this.begin("birel"); return 'BIREL';} 
-"Rel_Up"                                  { this.begin("rel_u"); return 'REL_U';}  
-"Rel_U"                                   { this.begin("rel_u"); return 'REL_U';}  
-"Rel_Down"                                { this.begin("rel_d"); return 'REL_D';}  
-"Rel_D"                                   { this.begin("rel_d"); return 'REL_D';}  
-"Rel_Left"                                { this.begin("rel_l"); return 'REL_L';}  
-"Rel_L"                                   { this.begin("rel_l"); return 'REL_L';}  
-"Rel_Right"                               { this.begin("rel_r"); return 'REL_R';}  
-"Rel_R"                                   { this.begin("rel_r"); return 'REL_R';}  
-"Rel_Back"                                { this.begin("rel_b"); return 'REL_B';}  
-"RelIndex"                                { this.begin("rel_index"); return 'REL_INDEX';} 
+"Rel"                                     { this.begin("rel"); return 'REL';}
+"BiRel"                                   { this.begin("birel"); return 'BIREL';}
+"Rel_Up"                                  { this.begin("rel_u"); return 'REL_U';}
+"Rel_U"                                   { this.begin("rel_u"); return 'REL_U';}
+"Rel_Down"                                { this.begin("rel_d"); return 'REL_D';}
+"Rel_D"                                   { this.begin("rel_d"); return 'REL_D';}
+"Rel_Left"                                { this.begin("rel_l"); return 'REL_L';}
+"Rel_L"                                   { this.begin("rel_l"); return 'REL_L';}
+"Rel_Right"                               { this.begin("rel_r"); return 'REL_R';}
+"Rel_R"                                   { this.begin("rel_r"); return 'REL_R';}
+"Rel_Back"                                { this.begin("rel_b"); return 'REL_B';}
+"RelIndex"                                { this.begin("rel_index"); return 'REL_INDEX';}
 
-"UpdateElementStyle"                      { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';}  
-"UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} 
-"UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} 
+"UpdateElementStyle"                      { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';}
+"UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
+"UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}
 
-<>                return "EOF_IN_STRUCT";
-[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-[(]                    { this.begin("attribute"); }
-[)]          { this.popState();this.popState();}
+<>                return "EOF_IN_STRUCT";
+[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+[(]                    { this.begin("attribute"); }
+[)]          { this.popState();this.popState();}
 
 ",,"                           { return 'ATTRIBUTE_EMPTY';}
 ","                            { }
@@ -189,7 +189,7 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 
 '{'                                       { /* this.begin("lbrace"); */ return "LBRACE";}
 '}'                                       { /* this.popState(); */ return "RBRACE";}
-   
+
 [\s]+                                     return 'SPACE';
 [\n\r]+                                   return 'EOL';
 <>                                   return 'EOF';
@@ -257,7 +257,7 @@ graphConfig
 statements
     : otherStatements
     | diagramStatements
-    | otherStatements diagramStatements 
+    | otherStatements diagramStatements
     ;
 
 otherStatements
@@ -268,10 +268,10 @@ otherStatements
 
 otherStatement
     : title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
-    | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}   
+    | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
     | 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($$); } 
+    | acc_descr_multiline_value  { $$=$1.trim();yy.setAccDescription($$); }
     ;
 
 boundaryStatement
@@ -301,7 +301,7 @@ boundaryStopStatement
 diagramStatements
     : diagramStatement
     | diagramStatement NEWLINE
-    | diagramStatement NEWLINE statements  
+    | diagramStatement NEWLINE statements
     ;
 
 diagramStatement
@@ -312,19 +312,19 @@ diagramStatement
     | SYSTEM_QUEUE attributes {yy.addPersonOrSystem('system_queue', ...$2); $$=$2;}
     | SYSTEM_EXT attributes {yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
     | SYSTEM_EXT_DB attributes {yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
-    | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}      
+    | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}
     | CONTAINER attributes {yy.addContainer('container', ...$2); $$=$2;}
     | CONTAINER_DB attributes {yy.addContainer('container_db', ...$2); $$=$2;}
     | CONTAINER_QUEUE attributes {yy.addContainer('container_queue', ...$2); $$=$2;}
     | CONTAINER_EXT attributes {yy.addContainer('external_container', ...$2); $$=$2;}
     | CONTAINER_EXT_DB attributes {yy.addContainer('external_container_db', ...$2); $$=$2;}
-    | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;}      
+    | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;}
     | COMPONENT attributes {yy.addComponent('component', ...$2); $$=$2;}
     | COMPONENT_DB attributes {yy.addComponent('component_db', ...$2); $$=$2;}
     | COMPONENT_QUEUE attributes {yy.addComponent('component_queue', ...$2); $$=$2;}
     | COMPONENT_EXT attributes {yy.addComponent('external_component', ...$2); $$=$2;}
     | COMPONENT_EXT_DB attributes {yy.addComponent('external_component_db', ...$2); $$=$2;}
-    | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;}      
+    | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;}
     | boundaryStatement
     | REL attributes {yy.addRel('rel', ...$2); $$=$2;}
     | BIREL attributes {yy.addRel('birel', ...$2); $$=$2;}
diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index 5ca2f55f8..9ec742261 100644
--- a/packages/mermaid/src/diagrams/c4/svgDraw.js
+++ b/packages/mermaid/src/diagrams/c4/svgDraw.js
@@ -1,5 +1,5 @@
 import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
index 2768e2256..4f71b6e16 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
 import classDb from './classDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index b775521a4..92a0cbd8b 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -268,6 +268,113 @@ class C13["With Città foreign language"]
       parser.parse(str);
     });
 
+    const keywords = [
+      'direction',
+      'classDiagram',
+      'classDiagram-v2',
+      'namespace',
+      '{}',
+      '{',
+      '}',
+      '()',
+      '(',
+      ')',
+      '[]',
+      '[',
+      ']',
+      'class',
+      '\n',
+      'cssClass',
+      'callback',
+      'link',
+      'click',
+      'note',
+      'note for',
+      '<<',
+      '>>',
+      'call ',
+      '~',
+      '~Generic~',
+      '_self',
+      '_blank',
+      '_parent',
+      '_top',
+      '<|',
+      '|>',
+      '>',
+      '<',
+      '*',
+      'o',
+      '\\',
+      '--',
+      '..',
+      '-->',
+      '--|>',
+      ': label',
+      ':::',
+      '.',
+      '+',
+      'alphaNum',
+      '!',
+      '0123',
+      'function()',
+      'function(arg1, arg2)',
+    ];
+
+    it.each(keywords)('should handle a note with %s in it', function (keyword: string) {
+      const str = `classDiagram
+                     note "This is a keyword: ${keyword}. It truly is."
+                  `;
+      parser.parse(str);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+    });
+
+    it.each(keywords)(
+      'should handle note with %s at beginning of string',
+      function (keyword: string) {
+        const str = `classDiagram
+                      note "${keyword}"`;
+
+        parser.parse(str);
+        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
+      }
+    );
+
+    it.each(keywords)('should handle a "note for" with a %s in it', function (keyword: string) {
+      const str = `classDiagram
+                   class Something {
+                     int id
+                     string name
+                   }
+                   note for Something "This is a keyword: ${keyword}. It truly is."
+                   `;
+
+      parser.parse(str);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+    });
+
+    it.each(keywords)(
+      'should handle a "note for" with a %s at beginning of string',
+      function (keyword: string) {
+        const str = `classDiagram
+                    class Something {
+                      int id
+                      string name
+                    }
+                    note for Something "${keyword}"
+                    `;
+
+        parser.parse(str);
+        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
+      }
+    );
+
+    it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) {
+      const str = `classDiagram
+                   note ${keyword}`;
+      expect(() => parser.parse(str)).toThrowError(/(Expecting\s'STR'|Unrecognized\stext)/);
+    });
+
     it('should parse diagram with direction', () => {
       parser.parse(`classDiagram
           direction TB
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.ts b/packages/mermaid/src/diagrams/class/classDiagram.ts
index db801a35f..99e110c11 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
 import classDb from './classDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts b/packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts
deleted file mode 100644
index f7d93741a..000000000
--- a/packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { readFile } from 'node:fs/promises';
-import { fileURLToPath } from 'node:url';
-// @ts-ignore - no types
-import { LALRGenerator } from 'jison';
-
-const getAbsolutePath = (relativePath: string) => {
-  return fileURLToPath(new URL(relativePath, import.meta.url));
-};
-
-describe('class diagram grammar', function () {
-  it('should have no conflicts', async function () {
-    const grammarSource = await readFile(getAbsolutePath('./parser/classDiagram.jison'), 'utf8');
-    const grammarParser = new LALRGenerator(grammarSource, {});
-    expect(grammarParser.conflicts).toBe(0);
-  });
-});
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 3774f7b8c..58def16c2 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -141,8 +141,6 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id, _version, diagObj) {
   const conf = getConfig().class;
   idCache = {};
-  // diagObj.db.clear();
-  // diagObj.parser.parse(text);
 
   log.info('Rendering diagram ' + text);
 
diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index c5130194f..9c67e306e 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -24,31 +24,50 @@
 %x namespace
 %x namespace-body
 %%
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-.*direction\s+TB[^\n]*                                          return 'direction_tb';
-.*direction\s+BT[^\n]*                                          return 'direction_bt';
-.*direction\s+RL[^\n]*                                          return 'direction_rl';
-.*direction\s+LR[^\n]*                                          return 'direction_lr';
-((?:(?!\}\%\%)[^:.])*)                          { 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';
-\%\%(?!\{)*[^\n]*(\r?\n?)+                                      /* skip comments */
-\%\%[^\n]*(\r?\n)*                                              /* skip comments */
-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";
+\%\%\{                                       { this.begin('open_directive'); return 'open_directive'; }
+.*direction\s+TB[^\n]*                       return 'direction_tb';
+.*direction\s+BT[^\n]*                       return 'direction_bt';
+.*direction\s+RL[^\n]*                       return 'direction_rl';
+.*direction\s+LR[^\n]*                       return 'direction_lr';
+((?:(?!\}\%\%)[^:.])*)       { 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';
+\%\%(?!\{)*[^\n]*(\r?\n?)+                   /* skip comments */
+\%\%[^\n]*(\r?\n)*                           /* skip comments */
+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";
 
-\s*(\r?\n)+                return 'NEWLINE';
-\s+                     /* skip whitespace */
+\s*(\r?\n)+                     return 'NEWLINE';
+\s+                             /* skip whitespace */
 
-"classDiagram-v2"       return 'CLASS_DIAGRAM';
-"classDiagram"          return 'CLASS_DIAGRAM';
-"[*]"                   return 'EDGE_STATE';
+"classDiagram-v2"               return 'CLASS_DIAGRAM';
+"classDiagram"                  return 'CLASS_DIAGRAM';
+"[*]"                           return 'EDGE_STATE';
+
+/*
+---interactivity command---
+'call' adds a callback to the specified node. 'call' can only be specified when
+the line was introduced with 'click'.
+'call ()' attaches the function 'callback_name' with the specified
+arguments to the node that was specified by 'click'.
+Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments.
+*/
+"call"[\s]+            this.begin("callback_name");
+\([\s]*\)        this.popState();
+\(               this.popState(); this.begin("callback_args");
+[^(]*            return 'CALLBACK_NAME';
+\)               this.popState();
+[^)]*            return 'CALLBACK_ARGS';
+
+["]                     this.popState();
+[^"]*                   return "STR";
+<*>["]                          this.begin("string");
 
 "namespace"  { this.begin('namespace'); return 'NAMESPACE'; }
 \s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
@@ -60,26 +79,26 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 \s+             /* skip whitespace */
 "[*]"           return 'EDGE_STATE';
 
-"class"     { this.begin('class'); return 'CLASS';}
-\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
-\s+                  /* skip whitespace */
-[}]                  { this.popState(); this.popState(); return 'STRUCT_STOP';}
-[{]                  { this.begin("class-body"); return 'STRUCT_START';}
-[}]             { this.popState(); return 'STRUCT_STOP'; }
-<>         return "EOF_IN_STRUCT";
-"[*]"           { return 'EDGE_STATE';}
-[{]             return "OPEN_IN_STRUCT";
-[\n]            /* nothing */
-[^{}\n]*        { return "MEMBER";}
+"class" { this.begin('class'); return 'CLASS';}
+\s*(\r?\n)+              { this.popState(); return 'NEWLINE'; }
+\s+                      /* skip whitespace */
+[}]                      { this.popState(); this.popState(); return 'STRUCT_STOP';}
+[{]                      { this.begin("class-body"); return 'STRUCT_START';}
+[}]                 { this.popState(); return 'STRUCT_STOP'; }
+<>             return "EOF_IN_STRUCT";
+"[*]"               { return 'EDGE_STATE';}
+[{]                 return "OPEN_IN_STRUCT";
+[\n]                /* nothing */
+[^{}\n]*            { return "MEMBER";}
 
-<*>"cssClass"           return 'CSSCLASS';
-<*>"callback"           return 'CALLBACK';
-<*>"link"               return 'LINK';
-<*>"click"              return 'CLICK';
-<*>"note for"           return 'NOTE_FOR';
-<*>"note"               return 'NOTE';
-<*>"<<"                 return 'ANNOTATION_START';
-<*>">>"                 return 'ANNOTATION_END';
+<*>"cssClass"                   return 'CSSCLASS';
+<*>"callback"                   return 'CALLBACK';
+<*>"link"                       return 'LINK';
+<*>"click"                      return 'CLICK';
+<*>"note for"                   return 'NOTE_FOR';
+<*>"note"                       return 'NOTE';
+<*>"<<"                         return 'ANNOTATION_START';
+<*>">>"                         return 'ANNOTATION_END';
 
 /*
 ---interactivity command---
@@ -87,64 +106,43 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 line was introduced with 'click'.
 'href ""' attaches the specified link to the node that was specified by 'click'.
 */
-<*>"href"[\s]+["]       this.begin("href");
-["]               this.popState();
-[^"]*             return 'HREF';
+<*>"href"                       return 'HREF';
 
-/*
----interactivity command---
-'call' adds a callback to the specified node. 'call' can only be specified when
-the line was introduced with 'click'.
-'call ()' attaches the function 'callback_name' with the specified
-arguments to the node that was specified by 'click'.
-Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments.
-*/
-<*>"call"[\s]+              this.begin("callback_name");
-\([\s]*\) this.popState();
-\(        this.popState(); this.begin("callback_args");
-[^(]*     return 'CALLBACK_NAME';
-\)        this.popState();
-[^)]*     return 'CALLBACK_ARGS';
+[~]                    this.popState();
+[^~]*                  return "GENERICTYPE";
+<*>"~"                          this.begin("generic");
 
-[~]            this.popState();
-[^~]*          return "GENERICTYPE";
-<*>[~]                  this.begin("generic");
+[`]                   this.popState();
+[^`]+                 return "BQUOTE_STR";
+<*>[`]                          this.begin("bqstring");
 
-["]             this.popState();
-[^"]*           return "STR";
-<*>["]                  this.begin("string");
+<*>"_self"                      return 'LINK_TARGET';
+<*>"_blank"                     return 'LINK_TARGET';
+<*>"_parent"                    return 'LINK_TARGET';
+<*>"_top"                       return 'LINK_TARGET';
 
-[`]           this.popState();
-[^`]+         return "BQUOTE_STR";
-<*>[`]                  this.begin("bqstring");
-
-<*>"_self"              return 'LINK_TARGET';
-<*>"_blank"             return 'LINK_TARGET';
-<*>"_parent"            return 'LINK_TARGET';
-<*>"_top"               return 'LINK_TARGET';
-
-<*>\s*\<\|              return 'EXTENSION';
-<*>\s*\|\>              return 'EXTENSION';
-<*>\s*\>                return 'DEPENDENCY';
-<*>\s*\<                return 'DEPENDENCY';
-<*>\s*\*                return 'COMPOSITION';
-<*>\s*o                 return 'AGGREGATION';
-<*>\s*\(\)              return 'LOLLIPOP';
-<*>\-\-                 return 'LINE';
-<*>\.\.                 return 'DOTTED_LINE';
-<*>":"{1}[^:\n;]+       return 'LABEL';
-<*>":"{3}               return 'STYLE_SEPARATOR';
-<*>\-                   return 'MINUS';
-<*>"."                  return 'DOT';
-<*>\+                   return 'PLUS';
-<*>\%                   return 'PCT';
-<*>"="                  return 'EQUALS';
-<*>\=                   return 'EQUALS';
-<*>\w+                  return 'ALPHA';
-<*>"["                  return 'SQS';
-<*>"]"                  return 'SQE';
-<*>[!"#$%&'*+,-.`?\\/]  return 'PUNCTUATION';
-<*>[0-9]+               return 'NUM';
+<*>\s*\<\|                      return 'EXTENSION';
+<*>\s*\|\>                      return 'EXTENSION';
+<*>\s*\>                        return 'DEPENDENCY';
+<*>\s*\<                        return 'DEPENDENCY';
+<*>\s*\*                        return 'COMPOSITION';
+<*>\s*o                         return 'AGGREGATION';
+<*>\s*\(\)                      return 'LOLLIPOP';
+<*>\-\-                         return 'LINE';
+<*>\.\.                         return 'DOTTED_LINE';
+<*>":"{1}[^:\n;]+               return 'LABEL';
+<*>":"{3}                       return 'STYLE_SEPARATOR';
+<*>\-                           return 'MINUS';
+<*>"."                          return 'DOT';
+<*>\+                           return 'PLUS';
+<*>\%                           return 'PCT';
+<*>"="                          return 'EQUALS';
+<*>\=                           return 'EQUALS';
+<*>\w+                          return 'ALPHA';
+<*>"["                          return 'SQS';
+<*>"]"                          return 'SQE';
+<*>[!"#$%&'*+,-.`?\\/]          return 'PUNCTUATION';
+<*>[0-9]+                       return 'NUM';
 <*>[\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -206,9 +204,9 @@ Function arguments are optional: 'call ()' simply executes 'callb
 [\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]|
 [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
-                        return 'UNICODE_TEXT';
-<*>\s                   return 'SPACE';
-<*><>              return 'EOF';
+                                return 'UNICODE_TEXT';
+<*>\s                           return 'SPACE';
+<*><>                      return 'EOF';
 
 /lex
 
@@ -310,7 +308,7 @@ classStatements
     ;
 
 classStatement
-    : classIdentifier                                    
+    : classIdentifier
     | classIdentifier STYLE_SEPARATOR alphaNumToken      {yy.setCssClass($1, $3);}
     | classIdentifier STRUCT_START members STRUCT_STOP   {yy.addMembers($1,$3);}
     | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);}
@@ -391,10 +389,10 @@ clickStatement
     | CLICK className CALLBACK_NAME STR                 {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
     | CLICK className CALLBACK_NAME CALLBACK_ARGS       {$$ = $1;yy.setClickEvent($2, $3, $4);}
     | CLICK className CALLBACK_NAME CALLBACK_ARGS STR   {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
-    | CLICK className HREF                              {$$ = $1;yy.setLink($2, $3);}
-    | CLICK className HREF LINK_TARGET                  {$$ = $1;yy.setLink($2, $3, $4);}
-    | CLICK className HREF STR                          {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
-    | CLICK className HREF STR LINK_TARGET              {$$ = $1;yy.setLink($2, $3, $5);yy.setTooltip($2, $4);}
+    | CLICK className HREF STR                          {$$ = $1;yy.setLink($2, $4);}
+    | CLICK className HREF STR LINK_TARGET              {$$ = $1;yy.setLink($2, $4, $5);}
+    | CLICK className HREF STR STR                      {$$ = $1;yy.setLink($2, $4);yy.setTooltip($2, $5);}
+    | CLICK className HREF STR STR LINK_TARGET          {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
     ;
 
 cssClassStatement
diff --git a/packages/mermaid/src/diagrams/common/common.spec.js b/packages/mermaid/src/diagrams/common/common.spec.ts
similarity index 75%
rename from packages/mermaid/src/diagrams/common/common.spec.js
rename to packages/mermaid/src/diagrams/common/common.spec.ts
index 1ff91a8d1..9a78482f6 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.js
+++ b/packages/mermaid/src/diagrams/common/common.spec.ts
@@ -1,15 +1,15 @@
 import { sanitizeText, removeScript, parseGenericTypes } from './common.js';
 
-describe('when securityLevel is antiscript, all script must be removed', function () {
+describe('when securityLevel is antiscript, all script must be removed', () => {
   /**
-   * @param {string} original The original text
-   * @param {string} result The expected sanitized text
+   * @param original - The original text
+   * @param result - The expected sanitized text
    */
-  function compareRemoveScript(original, result) {
+  function compareRemoveScript(original: string, result: string) {
     expect(removeScript(original).trim()).toEqual(result);
   }
 
-  it('should remove all script block, script inline.', function () {
+  it('should remove all script block, script inline.', () => {
     const labelString = `1
 		Act1: Hello 11
 		Act2:
@@ -25,7 +25,7 @@ describe('when securityLevel is antiscript, all script must be removed', functio
     compareRemoveScript(labelString, exactlyString);
   });
 
-  it('should remove all javascript urls', function () {
+  it('should remove all javascript urls', () => {
     compareRemoveScript(
       `This is a clean link + clean link
   and me too`,
@@ -34,11 +34,11 @@ describe('when securityLevel is antiscript, all script must be removed', functio
     );
   });
 
-  it('should detect malicious images', function () {
+  it('should detect malicious images', () => {
     compareRemoveScript(``, ``);
   });
 
-  it('should detect iframes', function () {
+  it('should detect iframes', () => {
     compareRemoveScript(
       `
     `,
@@ -47,8 +47,8 @@ describe('when securityLevel is antiscript, all script must be removed', functio
   });
 });
 
-describe('Sanitize text', function () {
-  it('should remove script tag', function () {
+describe('Sanitize text', () => {
+  it('should remove script tag', () => {
     const maliciousStr = 'javajavascript:script:alert(1)';
     const result = sanitizeText(maliciousStr, {
       securityLevel: 'strict',
@@ -58,8 +58,8 @@ describe('Sanitize text', function () {
   });
 });
 
-describe('generic parser', function () {
-  it('should parse generic types', function () {
+describe('generic parser', () => {
+  it('should parse generic types', () => {
     expect(parseGenericTypes('test~T~')).toEqual('test');
     expect(parseGenericTypes('test~Array~Array~string~~~')).toEqual('test>>');
     expect(parseGenericTypes('test~Array~Array~string[]~~~')).toEqual(
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index d2792b3f4..cb8049850 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,6 +1,7 @@
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from '../../config.type.js';
 
+// Remove and ignore br:s
 export const lineBreakRegex = //gi;
 
 /**
diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
new file mode 100644
index 000000000..84c26db6e
--- /dev/null
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -0,0 +1,58 @@
+export interface RectData {
+  x: number;
+  y: number;
+  fill: string;
+  width: number;
+  height: number;
+  stroke: string;
+  class?: string;
+  color?: string;
+  rx?: number;
+  ry?: number;
+  attrs?: Record;
+  anchor?: string;
+}
+
+export interface Bound {
+  startx: number;
+  stopx: number;
+  starty: number;
+  stopy: number;
+  fill: string;
+  stroke: string;
+}
+
+export interface TextData {
+  x: number;
+  y: number;
+  anchor: string;
+  text: string;
+  textMargin: number;
+  class?: string;
+}
+
+export interface TextObject {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  fill?: string;
+  anchor?: string;
+  'text-anchor': string;
+  style: string;
+  textMargin: number;
+  rx: number;
+  ry: number;
+  tspan: boolean;
+  valign?: string;
+}
+
+export type D3RectElement = d3.Selection;
+
+export type D3UseElement = d3.Selection;
+
+export type D3ImageElement = d3.Selection;
+
+export type D3TextElement = d3.Selection;
+
+export type D3TSpanElement = d3.Selection;
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.js b/packages/mermaid/src/diagrams/common/svgDrawCommon.js
deleted file mode 100644
index 9a4ce8aa2..000000000
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { sanitizeUrl } from '@braintree/sanitize-url';
-
-export const drawRect = function (elem, rectData) {
-  const rectElem = elem.append('rect');
-  rectElem.attr('x', rectData.x);
-  rectElem.attr('y', rectData.y);
-  rectElem.attr('fill', rectData.fill);
-  rectElem.attr('stroke', rectData.stroke);
-  rectElem.attr('width', rectData.width);
-  rectElem.attr('height', rectData.height);
-  rectElem.attr('rx', rectData.rx);
-  rectElem.attr('ry', rectData.ry);
-
-  if (rectData.attrs !== 'undefined' && rectData.attrs !== null) {
-    for (let attrKey in rectData.attrs) {
-      rectElem.attr(attrKey, rectData.attrs[attrKey]);
-    }
-  }
-
-  if (rectData.class !== 'undefined') {
-    rectElem.attr('class', rectData.class);
-  }
-
-  return rectElem;
-};
-
-/**
- * Draws a background rectangle
- *
- * @param {any} elem Diagram (reference for bounds)
- * @param {any} bounds Shape of the rectangle
- */
-export const drawBackgroundRect = function (elem, bounds) {
-  const rectElem = drawRect(elem, {
-    x: bounds.startx,
-    y: bounds.starty,
-    width: bounds.stopx - bounds.startx,
-    height: bounds.stopy - bounds.starty,
-    fill: bounds.fill,
-    stroke: bounds.stroke,
-    class: 'rect',
-  });
-  rectElem.lower();
-};
-
-export const drawText = function (elem, textData) {
-  // Remove and ignore br:s
-  const nText = textData.text.replace(//gi, ' ');
-
-  const textElem = elem.append('text');
-  textElem.attr('x', textData.x);
-  textElem.attr('y', textData.y);
-  textElem.attr('class', 'legend');
-
-  textElem.style('text-anchor', textData.anchor);
-
-  if (textData.class !== undefined) {
-    textElem.attr('class', textData.class);
-  }
-
-  const span = textElem.append('tspan');
-  span.attr('x', textData.x + textData.textMargin * 2);
-  span.text(nText);
-
-  return textElem;
-};
-
-export const drawImage = function (elem, x, y, link) {
-  const imageElem = elem.append('image');
-  imageElem.attr('x', x);
-  imageElem.attr('y', y);
-  var sanitizedLink = sanitizeUrl(link);
-  imageElem.attr('xlink:href', sanitizedLink);
-};
-
-export const drawEmbeddedImage = function (elem, x, y, link) {
-  const imageElem = elem.append('use');
-  imageElem.attr('x', x);
-  imageElem.attr('y', y);
-  const sanitizedLink = sanitizeUrl(link);
-  imageElem.attr('xlink:href', '#' + sanitizedLink);
-};
-
-export const getNoteRect = function () {
-  return {
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100,
-    fill: '#EDF2AE',
-    stroke: '#666',
-    anchor: 'start',
-    rx: 0,
-    ry: 0,
-  };
-};
-
-export const getTextObj = function () {
-  return {
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100,
-    fill: undefined,
-    anchor: undefined,
-    'text-anchor': 'start',
-    style: '#666',
-    textMargin: 0,
-    rx: 0,
-    ry: 0,
-    tspan: true,
-    valign: undefined,
-  };
-};
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
new file mode 100644
index 000000000..706d43ab9
--- /dev/null
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -0,0 +1,126 @@
+import { sanitizeUrl } from '@braintree/sanitize-url';
+import type { Group, SVG } from '../../diagram-api/types.js';
+import type {
+  Bound,
+  D3ImageElement,
+  D3RectElement,
+  D3TSpanElement,
+  D3TextElement,
+  D3UseElement,
+  RectData,
+  TextData,
+  TextObject,
+} from './commonTypes.js';
+import { lineBreakRegex } from './common.js';
+
+export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
+  const rectElement: D3RectElement = element.append('rect');
+  rectElement.attr('x', rectData.x);
+  rectElement.attr('y', rectData.y);
+  rectElement.attr('fill', rectData.fill);
+  rectElement.attr('stroke', rectData.stroke);
+  rectElement.attr('width', rectData.width);
+  rectElement.attr('height', rectData.height);
+  rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
+  rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
+
+  if (rectData.attrs !== undefined) {
+    for (const attrKey in rectData.attrs) {
+      rectElement.attr(attrKey, rectData.attrs[attrKey]);
+    }
+  }
+
+  rectData.class !== undefined && rectElement.attr('class', rectData.class);
+
+  return rectElement;
+};
+
+/**
+ * Draws a background rectangle
+ *
+ * @param element - Diagram (reference for bounds)
+ * @param bounds - Shape of the rectangle
+ */
+export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
+  const rectData: RectData = {
+    x: bounds.startx,
+    y: bounds.starty,
+    width: bounds.stopx - bounds.startx,
+    height: bounds.stopy - bounds.starty,
+    fill: bounds.fill,
+    stroke: bounds.stroke,
+    class: 'rect',
+  };
+  const rectElement: D3RectElement = drawRect(element, rectData);
+  rectElement.lower();
+};
+
+export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
+  const nText: string = textData.text.replace(lineBreakRegex, ' ');
+
+  const textElem: D3TextElement = element.append('text');
+  textElem.attr('x', textData.x);
+  textElem.attr('y', textData.y);
+  textElem.attr('class', 'legend');
+
+  textElem.style('text-anchor', textData.anchor);
+  textData.class !== undefined && textElem.attr('class', textData.class);
+
+  const tspan: D3TSpanElement = textElem.append('tspan');
+  tspan.attr('x', textData.x + textData.textMargin * 2);
+  tspan.text(nText);
+
+  return textElem;
+};
+
+export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
+  const imageElement: D3ImageElement = elem.append('image');
+  imageElement.attr('x', x);
+  imageElement.attr('y', y);
+  const sanitizedLink: string = sanitizeUrl(link);
+  imageElement.attr('xlink:href', sanitizedLink);
+};
+
+export const drawEmbeddedImage = (
+  element: SVG | Group,
+  x: number,
+  y: number,
+  link: string
+): void => {
+  const imageElement: D3UseElement = element.append('use');
+  imageElement.attr('x', x);
+  imageElement.attr('y', y);
+  const sanitizedLink: string = sanitizeUrl(link);
+  imageElement.attr('xlink:href', `#${sanitizedLink}`);
+};
+
+export const getNoteRect = (): RectData => {
+  const noteRectData: RectData = {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    fill: '#EDF2AE',
+    stroke: '#666',
+    anchor: 'start',
+    rx: 0,
+    ry: 0,
+  };
+  return noteRectData;
+};
+
+export const getTextObj = (): TextObject => {
+  const testObject: TextObject = {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    'text-anchor': 'start',
+    style: '#666',
+    textMargin: 0,
+    rx: 0,
+    ry: 0,
+    tspan: true,
+  };
+  return testObject;
+};
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 93e22732a..b992afd65 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -555,7 +555,6 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
 export const draw = function (text, id, _version, diagObj) {
   conf = getConfig().er;
   log.info('Drawing ER diagram');
-  //  diag.db.clear();
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
@@ -568,13 +567,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   // const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // Parse the text to populate erDb
-  // try {
-  //   parser.parse(text);
-  // } catch (err) {
-  //   log.debug('Parsing failed');
-  // }
-
   // Get a reference to the svg node that contains the text
   const svg = root.select(`[id='${id}']`);
 
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
index 0c6820b49..0a2549268 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
@@ -30,7 +30,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 \s+                      /* skip whitespace in block */
 \b((?:PK)|(?:FK)|(?:UK))\b      return 'ATTRIBUTE_KEY'
 (.*?)[~](.*?)*[~]        return 'ATTRIBUTE_WORD';
-[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]*  return 'ATTRIBUTE_WORD'
+[\*A-Za-z_][A-Za-z0-9\-_\[\]\(\)]*  return 'ATTRIBUTE_WORD'
 \"[^"]*\"                return 'COMMENT';
 [\n]+                    /* nothing */
 "}"                      { this.popState(); return 'BLOCK_STOP'; }
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
index 6fdc9eaa7..2bf2f5b8c 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -154,6 +154,26 @@ describe('when parsing ER diagram it...', function () {
       expect(entities[entity].attributes[2].attributeName).toBe('author-ref[name](1)');
     });
 
+    it('should allow asterisk at the start of attribute name', function () {
+      const entity = 'BOOK';
+      const attribute = 'string *title';
+
+      erDiagram.parser.parse(`erDiagram\n${entity}{\n${attribute}}`);
+      const entities = erDb.getEntities();
+      expect(Object.keys(entities).length).toBe(1);
+      expect(entities[entity].attributes.length).toBe(1);
+    });
+
+    it('should allow asterisks at the start of attribute declared with type and name', () => {
+      const entity = 'BOOK';
+      const attribute = 'id *the_Primary_Key';
+
+      erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute}}`);
+      const entities = erDb.getEntities();
+      expect(Object.keys(entities).length).toBe(1);
+      expect(entities[entity].attributes.length).toBe(1);
+    });
+
     it('should not allow leading numbers, dashes or brackets', function () {
       const entity = 'BOOK';
       const nonLeadingChars = '0-[]()';
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index 76efdb0ae..284dfd744 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,23 +1,15 @@
-import { DiagramDefinition } from '../../diagram-api/types.js';
-import styles from './styles.js';
-import renderer from './errorRenderer.js';
-export const diagram: DiagramDefinition = {
-  db: {
-    clear: () => {
-      // Quite ok, clear needs to be there for error to work as a regular diagram
-    },
-  },
-  styles,
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import { renderer } from './errorRenderer.js';
+
+const diagram: DiagramDefinition = {
+  db: {},
   renderer,
   parser: {
     parser: { yy: {} },
-    parse: () => {
-      // no op
+    parse: (): void => {
+      return;
     },
   },
-  init: () => {
-    // no op
-  },
 };
 
 export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index aa0e9e816..a8e738e5f 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,100 +1,81 @@
-/** Created by knut on 14-12-11. */
-// @ts-ignore TODO: Investigate D3 issue
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getErrorMessage } from '../../utils.js';
-
-/**
- * Merges the value of `conf` with the passed `cnf`
- *
- * @param cnf - Config to merge
- */
-export const setConf = function () {
-  // no-op
-};
+import type { Group, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param _text - Mermaid graph definition.
  * @param id - The text for the error
- * @param mermaidVersion - The version
+ * @param version - The version
  */
-export const draw = (_text: string, id: string, mermaidVersion: string) => {
-  try {
-    log.debug('Renering svg for syntax error\n');
+export const draw = (_text: string, id: string, version: string) => {
+  log.debug('renering svg for syntax error\n');
 
-    const svg = select('#' + id);
+  const svg: SVG = selectSvgElement(id);
+  svg.attr('viewBox', '0 0 2412 512');
+  configureSvgSize(svg, 100, 512, true);
 
-    const g = svg.append('g');
+  const g: Group = svg.append('g');
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
-      );
-
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1440)
-      .attr('y', 250)
-      .attr('font-size', '150px')
-      .style('text-anchor', 'middle')
-      .text('Syntax error in text');
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1250)
-      .attr('y', 400)
-      .attr('font-size', '100px')
-      .style('text-anchor', 'middle')
-      .text('mermaid version ' + mermaidVersion);
-
-    svg.attr('height', 100);
-    svg.attr('width', 500);
-    svg.attr('viewBox', '768 0 912 512');
-  } catch (e) {
-    log.error('Error while rendering info diagram');
-    log.error(getErrorMessage(e));
-  }
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1440)
+    .attr('y', 250)
+    .attr('font-size', '150px')
+    .style('text-anchor', 'middle')
+    .text('Syntax error in text');
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1250)
+    .attr('y', 400)
+    .attr('font-size', '100px')
+    .style('text-anchor', 'middle')
+    .text(`mermaid version ${version}`);
 };
 
-export default {
-  setConf,
-  draw,
-};
+export const renderer = { draw };
+
+export default renderer;
diff --git a/packages/mermaid/src/diagrams/error/styles.js b/packages/mermaid/src/diagrams/error/styles.js
deleted file mode 100644
index 0b0729813..000000000
--- a/packages/mermaid/src/diagrams/error/styles.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const getStyles = () => ``;
-
-export default getStyles;
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 5ed06723e..c7bfdf524 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -655,14 +655,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
  */
 export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
-  diagObj.db.clear('ver-2');
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    return {};
-  }
+  return diagObj.db.getClasses();
 };
 
 const addSubGraphs = function (db) {
@@ -766,14 +759,8 @@ const insertChildren = (nodeArray, parentLookupDb) => {
  */
 
 export const draw = async function (text, id, _version, diagObj) {
-  // Add temporary render element
-  diagObj.db.clear();
   nodeDb = {};
   portPos = {};
-  diagObj.db.setGen('gen-2');
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
   const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
   let graph = {
     id: 'root',
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index ceb933e85..ea8fa71d2 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -342,7 +342,10 @@ export const setLink = function (ids, linkStr, target) {
   setClass(ids, 'clickable');
 };
 export const getTooltip = function (id) {
-  return tooltips[id];
+  if (tooltips.hasOwnProperty(id)) {
+    return tooltips[id];
+  }
+  return undefined;
 };
 
 /**
@@ -443,7 +446,7 @@ export const clear = function (ver = 'gen-1') {
   subGraphs = [];
   subGraphLookup = {};
   subCount = 0;
-  tooltips = [];
+  tooltips = {};
   firstGraphFlag = true;
   version = ver;
   commonClear();
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
index 7a2c0e0bc..754057211 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
 import flowRendererV2 from './flowRenderer-v2.js';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
index 7018e4890..2c331f4eb 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
 import flowRenderer from './flowRenderer.js';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 23f94942c..4a3b7a8ce 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,10 +1,7 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
-
-import flowDb from './flowDb.js';
 import { getConfig } from '../../config.js';
 import utils from '../../utils.js';
-
 import { render } from '../../dagre-wrapper/index.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger.js';
@@ -344,15 +341,7 @@ export const addEdges = function (edges, g, diagObj) {
  * @returns {object} ClassDef styles
  */
 export const getClasses = function (text, diagObj) {
-  log.info('Extracting classes');
-  diagObj.db.clear();
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    return;
-  }
+  return diagObj.db.getClasses();
 };
 
 /**
@@ -364,10 +353,6 @@ export const getClasses = function (text, diagObj) {
 
 export const draw = async function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
-  diagObj.db.clear();
-  flowDb.setGen('gen-2');
-  // Parse the graph definition
-  diagObj.parser.parse(text);
 
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index f69fe93eb..fc06cacd4 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -273,15 +273,7 @@ export const addEdges = function (edges, g, diagObj) {
  */
 export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
-  diagObj.db.clear();
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    log.error(e);
-    return {};
-  }
+  return diagObj.db.getClasses();
 };
 
 /**
@@ -294,7 +286,6 @@ export const getClasses = function (text, diagObj) {
  */
 export const draw = function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
-  diagObj.db.clear();
   const { securityLevel, flowchart: conf } = getConfig();
   let sandboxElement;
   if (securityLevel === 'sandbox') {
@@ -306,13 +297,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // Parse the graph definition
-  try {
-    diagObj.parser.parse(text);
-  } catch (err) {
-    log.debug('Parsing failed');
-  }
-
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
   if (dir === undefined) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
index dcac21ee7..21f3a4355 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -6,6 +6,40 @@ setConfig({
   securityLevel: 'strict',
 });
 
+const keywords = [
+  'graph',
+  'flowchart',
+  'flowchart-elk',
+  'style',
+  'default',
+  'linkStyle',
+  'interpolate',
+  'classDef',
+  'class',
+  'href',
+  'call',
+  'click',
+  '_self',
+  '_blank',
+  '_parent',
+  '_top',
+  'end',
+  'subgraph',
+  'kitty',
+];
+
+const doubleEndedEdges = [
+  { edgeStart: 'x--', edgeEnd: '--x', stroke: 'normal', type: 'double_arrow_cross' },
+  { edgeStart: 'x==', edgeEnd: '==x', stroke: 'thick', type: 'double_arrow_cross' },
+  { edgeStart: 'x-.', edgeEnd: '.-x', stroke: 'dotted', type: 'double_arrow_cross' },
+  { edgeStart: 'o--', edgeEnd: '--o', stroke: 'normal', type: 'double_arrow_circle' },
+  { edgeStart: 'o==', edgeEnd: '==o', stroke: 'thick', type: 'double_arrow_circle' },
+  { edgeStart: 'o-.', edgeEnd: '.-o', stroke: 'dotted', type: 'double_arrow_circle' },
+  { edgeStart: '<--', edgeEnd: '-->', stroke: 'normal', type: 'double_arrow_point' },
+  { edgeStart: '<==', edgeEnd: '==>', stroke: 'thick', type: 'double_arrow_point' },
+  { edgeStart: '<-.', edgeEnd: '.->', stroke: 'dotted', type: 'double_arrow_point' },
+];
+
 describe('[Edges] when parsing', () => {
   beforeEach(function () {
     flow.parser.yy = flowDb;
@@ -39,211 +73,62 @@ describe('[Edges] when parsing', () => {
     expect(edges[0].type).toBe('arrow_circle');
   });
 
-  describe('cross', function () {
-    it('should handle double edged nodes and edges', function () {
-      const res = flow.parser.parse('graph TD;\nA x--x B;');
+  describe('edges', function () {
+    doubleEndedEdges.forEach((edgeType) => {
+      it(`should handle ${edgeType.stroke} ${edgeType.type} with no text`, function () {
+        const res = flow.parser.parse(`graph TD;\nA ${edgeType.edgeStart}${edgeType.edgeEnd} B;`);
 
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
+        const vert = flow.parser.yy.getVertices();
+        const edges = flow.parser.yy.getEdges();
 
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe(`${edgeType.type}`);
+        expect(edges[0].text).toBe('');
+        expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
+      });
 
-    it('should handle double edged nodes with text', function () {
-      const res = flow.parser.parse('graph TD;\nA x-- text --x B;');
+      it(`should handle ${edgeType.stroke} ${edgeType.type} with text`, function () {
+        const res = flow.parser.parse(
+          `graph TD;\nA ${edgeType.edgeStart} text ${edgeType.edgeEnd} B;`
+        );
 
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
+        const vert = flow.parser.yy.getVertices();
+        const edges = flow.parser.yy.getEdges();
 
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe(`${edgeType.type}`);
+        expect(edges[0].text).toBe('text');
+        expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
+      });
 
-    it('should handle double edged nodes and edges on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x==x B;');
+      it.each(keywords)(
+        `should handle ${edgeType.stroke} ${edgeType.type} with %s text`,
+        function (keyword) {
+          const res = flow.parser.parse(
+            `graph TD;\nA ${edgeType.edgeStart} ${keyword} ${edgeType.edgeEnd} B;`
+          );
 
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
+          const vert = flow.parser.yy.getVertices();
+          const edges = flow.parser.yy.getEdges();
 
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x-.-x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x-. text .-x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-  });
-
-  describe('circle', function () {
-    it('should handle double edged nodes and edges', function () {
-      const res = flow.parser.parse('graph TD;\nA o--o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text', function () {
-      const res = flow.parser.parse('graph TD;\nA o-- text --o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o==o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o== text ==o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o-.-o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o-. text .-o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
+          expect(vert['A'].id).toBe('A');
+          expect(vert['B'].id).toBe('B');
+          expect(edges.length).toBe(1);
+          expect(edges[0].start).toBe('A');
+          expect(edges[0].end).toBe('B');
+          expect(edges[0].type).toBe(`${edgeType.type}`);
+          expect(edges[0].text).toBe(`${keyword}`);
+          expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
+        }
+      );
     });
   });
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
index 0e6efaef1..13cb262e3 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
@@ -24,7 +24,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
     expect(vert['A'].labelType).toBe('markdown');
     expect(vert['B'].id).toBe('B');
     expect(vert['B'].text).toBe('The dog in the hog');
-    expect(vert['B'].labelType).toBe('text');
+    expect(vert['B'].labelType).toBe('string');
     expect(edges.length).toBe(2);
     expect(edges[0].start).toBe('A');
     expect(edges[0].end).toBe('B');
@@ -35,7 +35,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
     expect(edges[1].end).toBe('C');
     expect(edges[1].type).toBe('arrow_point');
     expect(edges[1].text).toBe('The rat in the mat');
-    expect(edges[1].labelType).toBe('text');
+    expect(edges[1].labelType).toBe('string');
   });
   it('mardown formatting in subgraphs', function () {
     const res = flow.parser.parse(`flowchart LR
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index b959f019e..59336d8d4 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -6,6 +6,29 @@ setConfig({
   securityLevel: 'strict',
 });
 
+const keywords = [
+  'graph',
+  'flowchart',
+  'flowchart-elk',
+  'style',
+  'default',
+  'linkStyle',
+  'interpolate',
+  'classDef',
+  'class',
+  'href',
+  'call',
+  'click',
+  '_self',
+  '_blank',
+  '_parent',
+  '_top',
+  'end',
+  'subgraph',
+];
+
+const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/', '_'];
+
 describe('[Singlenodes] when parsing', () => {
   beforeEach(function () {
     flow.parser.yy = flowDb;
@@ -259,4 +282,90 @@ describe('[Singlenodes] when parsing', () => {
     expect(edges.length).toBe(0);
     expect(vert['i_d'].styles.length).toBe(0);
   });
+
+  it.each(keywords)('should handle keywords between dashes "-"', function (keyword) {
+    const res = flow.parser.parse(`graph TD;a-${keyword}-node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`a-${keyword}-node`].text).toBe(`a-${keyword}-node`);
+  });
+
+  it.each(keywords)('should handle keywords between periods "."', function (keyword) {
+    const res = flow.parser.parse(`graph TD;a.${keyword}.node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`a.${keyword}.node`].text).toBe(`a.${keyword}.node`);
+  });
+
+  it.each(keywords)('should handle keywords between underscores "_"', function (keyword) {
+    const res = flow.parser.parse(`graph TD;a_${keyword}_node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`a_${keyword}_node`].text).toBe(`a_${keyword}_node`);
+  });
+
+  it.each(keywords)('should handle nodes ending in %s', function (keyword) {
+    const res = flow.parser.parse(`graph TD;node_${keyword};node.${keyword};node-${keyword};`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`node_${keyword}`].text).toBe(`node_${keyword}`);
+    expect(vert[`node.${keyword}`].text).toBe(`node.${keyword}`);
+    expect(vert[`node-${keyword}`].text).toBe(`node-${keyword}`);
+  });
+
+  const errorKeywords = [
+    'graph',
+    'flowchart',
+    'flowchart-elk',
+    'style',
+    'linkStyle',
+    'interpolate',
+    'classDef',
+    'class',
+    '_self',
+    '_blank',
+    '_parent',
+    '_top',
+    'end',
+    'subgraph',
+  ];
+  it.each(errorKeywords)('should throw error at nodes beginning with %s', function (keyword) {
+    const str = `graph TD;${keyword}.node;${keyword}-node;${keyword}/node`;
+    const vert = flow.parser.yy.getVertices();
+
+    expect(() => flow.parser.parse(str)).toThrowError();
+  });
+
+  const workingKeywords = ['default', 'href', 'click', 'call'];
+
+  it.each(workingKeywords)('should parse node beginning with %s', function (keyword) {
+    flow.parser.parse(`graph TD; ${keyword}.node;${keyword}-node;${keyword}/node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`${keyword}.node`].text).toBe(`${keyword}.node`);
+    expect(vert[`${keyword}-node`].text).toBe(`${keyword}-node`);
+    expect(vert[`${keyword}/node`].text).toBe(`${keyword}/node`);
+  });
+
+  it.each(specialChars)(
+    'should allow node ids of single special characters',
+    function (specialChar) {
+      flow.parser.parse(`graph TD; ${specialChar} --> A`);
+      const vert = flow.parser.yy.getVertices();
+      expect(vert[`${specialChar}`].text).toBe(`${specialChar}`);
+    }
+  );
+
+  it.each(specialChars)(
+    'should allow node ids with special characters at start of id',
+    function (specialChar) {
+      flow.parser.parse(`graph TD; ${specialChar}node --> A`);
+      const vert = flow.parser.yy.getVertices();
+      expect(vert[`${specialChar}node`].text).toBe(`${specialChar}node`);
+    }
+  );
+
+  it.each(specialChars)(
+    'should allow node ids with special characters at end of id',
+    function (specialChar) {
+      flow.parser.parse(`graph TD; node${specialChar} --> A`);
+      const vert = flow.parser.yy.getVertices();
+      expect(vert[`node${specialChar}`].text).toBe(`node${specialChar}`);
+    }
+  );
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index 3feaa2469..1ab754308 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -26,15 +26,6 @@ describe('[Style] when parsing', () => {
     expect(vert['Q'].styles[0]).toBe('background:#fff');
   });
 
-  // log.debug(flow.parser.parse('graph TD;style Q background:#fff;'));
-  it('should handle styles for edges', function () {
-    const res = flow.parser.parse('graph TD;a-->b;\nstyle #0 stroke: #f66;');
-
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges.length).toBe(1);
-  });
-
   it('should handle multiple styles for a vortex', function () {
     const res = flow.parser.parse('graph TD;style R background:#fff,border:1px solid red;');
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index db43e75bf..b127e1b65 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -305,6 +305,95 @@ describe('[Text] when parsing', () => {
       expect(vert['C'].type).toBe('round');
       expect(vert['C'].text).toBe('Chimpansen hoppar');
     });
+
+    const keywords = [
+      'graph',
+      'flowchart',
+      'flowchart-elk',
+      'style',
+      'default',
+      'linkStyle',
+      'interpolate',
+      'classDef',
+      'class',
+      'href',
+      'call',
+      'click',
+      '_self',
+      '_blank',
+      '_parent',
+      '_top',
+      'end',
+      'subgraph',
+      'kitty',
+    ];
+
+    const shapes = [
+      { start: '[', end: ']', name: 'square' },
+      { start: '(', end: ')', name: 'round' },
+      { start: '{', end: '}', name: 'diamond' },
+      { start: '(-', end: '-)', name: 'ellipse' },
+      { start: '([', end: '])', name: 'stadium' },
+      { start: '>', end: ']', name: 'odd' },
+      { start: '[(', end: ')]', name: 'cylinder' },
+      { start: '(((', end: ')))', name: 'doublecircle' },
+      { start: '[/', end: '\\]', name: 'trapezoid' },
+      { start: '[\\', end: '/]', name: 'inv_trapezoid' },
+      { start: '[/', end: '/]', name: 'lean_right' },
+      { start: '[\\', end: '\\]', name: 'lean_left' },
+      { start: '[[', end: ']]', name: 'subroutine' },
+      { start: '{{', end: '}}', name: 'hexagon' },
+    ];
+
+    shapes.forEach((shape) => {
+      it.each(keywords)(`should handle %s keyword in ${shape.name} vertex`, function (keyword) {
+        const rest = flow.parser.parse(
+          `graph TD;A_${keyword}_node-->B${shape.start}This node has a ${keyword} as text${shape.end};`
+        );
+
+        const vert = flow.parser.yy.getVertices();
+        const edges = flow.parser.yy.getEdges();
+        expect(vert['B'].type).toBe(`${shape.name}`);
+        expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+      });
+    });
+
+    it.each(keywords)('should handle %s keyword in rect vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[|borders:lt|This node has a ${keyword} as text];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('rect');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it('should handle edge case for odd vertex with node id ending with minus', function () {
+      const res = flow.parser.parse('graph TD;A_node-->odd->Vertex Text];');
+      const vert = flow.parser.yy.getVertices();
+
+      expect(vert['odd-'].type).toBe('odd');
+      expect(vert['odd-'].text).toBe('Vertex Text');
+    });
+    it('should allow forward slashes in lean_right vertices', function () {
+      const rest = flow.parser.parse(`graph TD;A_node-->B[/This node has a / as text/];`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('lean_right');
+      expect(vert['B'].text).toBe(`This node has a / as text`);
+    });
+
+    it('should allow back slashes in lean_left vertices', function () {
+      const rest = flow.parser.parse(`graph TD;A_node-->B[\\This node has a \\ as text\\];`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('lean_left');
+      expect(vert['B'].text).toBe(`This node has a \\ as text`);
+    });
+
     it('should handle åäö and minus', function () {
       const res = flow.parser.parse('graph TD;A-->C{Chimpansen hoppar åäö-ÅÄÖ};');
 
@@ -484,4 +573,33 @@ describe('[Text] when parsing', () => {
     expect(vert['A'].text).toBe(',.?!+-*');
     expect(edges[0].text).toBe(',.?!+-*');
   });
+
+  it('should throw error at nested set of brackets', function () {
+    const str = 'graph TD; A[This is a () in text];';
+    expect(() => flow.parser.parse(str)).toThrowError("got 'PS'");
+  });
+
+  it('should throw error for strings and text at the same time', function () {
+    const str = 'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;';
+
+    expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
+  });
+
+  it('should throw error for escaping quotes in text state', function () {
+    //prettier-ignore
+    const str = 'graph TD; A[This is a \"()\" in text];'; //eslint-disable-line no-useless-escape
+
+    expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
+  });
+
+  it('should throw error for nested quoatation marks', function () {
+    const str = 'graph TD; A["This is a "()" in text"];';
+
+    expect(() => flow.parser.parse(str)).toThrowError("Expecting 'SQE'");
+  });
+
+  it('should throw error', function () {
+    const str = `graph TD; node[hello ) world] --> works`;
+    expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
+  });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 70fb49162..8d746f808 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -13,6 +13,12 @@
 %x acc_descr_multiline
 %x dir
 %x vertex
+%x text
+%x ellipseText
+%x trapText
+%x edgeText
+%x thickEdgeText
+%x dottedEdgeText
 %x click
 %x href
 %x callbackname
@@ -23,41 +29,19 @@
 %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';
-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.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';
+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";
-// .*[^\n]*                    {  return "acc_descr_line"}
-["][`]          { this.begin("md_string");}
-[^`"]+        { return "MD_STR";}
-[`]["]          { this.popState();}
-["]                     this.begin("string");
-["]             this.popState();
-[^"]*           return "STR";
-"style"               return 'STYLE';
-"default"             return 'DEFAULT';
-"linkStyle"           return 'LINKSTYLE';
-"interpolate"         return 'INTERPOLATE';
-"classDef"            return 'CLASSDEF';
-"class"               return 'CLASS';
-
-/*
----interactivity command---
-'href' adds a link to the specified node. 'href' can only be specified when the
-line was introduced with 'click'.
-'href ""' attaches the specified link to the node that was specified by 'click'.
-*/
-"href"[\s]+["]          this.begin("href");
-["]               this.popState();
-[^"]*             return 'HREF';
+// .*[^\n]*                {  return "acc_descr_line"}
 
 /*
 ---interactivity command---
@@ -74,88 +58,128 @@ Function arguments are optional: 'call ()' simply executes 'callba
 \)        this.popState();
 [^)]*     return 'CALLBACKARGS';
 
+[^`"]+       { return "MD_STR";}
+[`]["]       { this.popState();}
+<*>["][`]               { this.begin("md_string");}
+[^"]+           return "STR";
+["]             this.popState();
+<*>["]                  this.pushState("string");
+"style"                 return 'STYLE';
+"default"               return 'DEFAULT';
+"linkStyle"             return 'LINKSTYLE';
+"interpolate"           return 'INTERPOLATE';
+"classDef"              return 'CLASSDEF';
+"class"                 return 'CLASS';
+
+/*
+---interactivity command---
+'href' adds a link to the specified node. 'href' can only be specified when the
+line was introduced with 'click'.
+'href ""' attaches the specified link to the node that was specified by 'click'.
+*/
+"href"[\s]                  return 'HREF';
+
+
 /*
 'click' is the keyword to introduce a line that contains interactivity commands.
 'click' must be followed by an existing node-id. All commands are attached to
 that id.
 'click ' can be followed by href or call commands in any desired order
 */
-"click"[\s]+            this.begin("click");
-[\s\n]           this.popState();
-[^\s\n]*         return 'CLICK';
+"click"[\s]+             this.begin("click");
+[\s\n]            this.popState();
+[^\s\n]*          return 'CLICK';
 
-"flowchart-elk"        {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"graph"                {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"flowchart"            {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"subgraph"            return 'subgraph';
-"end"\b\s*            return 'end';
+"flowchart-elk"          {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"graph"                  {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"flowchart"              {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"subgraph"               return 'subgraph';
+"end"\b\s*               return 'end';
 
-"_self"               return 'LINK_TARGET';
-"_blank"              return 'LINK_TARGET';
-"_parent"             return 'LINK_TARGET';
-"_top"                return 'LINK_TARGET';
+"_self"                  return 'LINK_TARGET';
+"_blank"                 return 'LINK_TARGET';
+"_parent"                return 'LINK_TARGET';
+"_top"                   return 'LINK_TARGET';
 
-(\r?\n)*\s*\n       {   this.popState();  return 'NODIR'; }
-\s*"LR"             {   this.popState();  return 'DIR'; }
-\s*"RL"             {   this.popState();  return 'DIR'; }
-\s*"TB"             {   this.popState();  return 'DIR'; }
-\s*"BT"             {   this.popState();  return 'DIR'; }
-\s*"TD"             {   this.popState();  return 'DIR'; }
-\s*"BR"             {   this.popState();  return 'DIR'; }
-\s*"<"              {   this.popState();  return 'DIR'; }
-\s*">"              {   this.popState();  return 'DIR'; }
-\s*"^"              {   this.popState();  return 'DIR'; }
-\s*"v"              {   this.popState();  return 'DIR'; }
+(\r?\n)*\s*\n       { this.popState();  return 'NODIR'; }
+\s*"LR"             { this.popState();  return 'DIR'; }
+\s*"RL"             { this.popState();  return 'DIR'; }
+\s*"TB"             { this.popState();  return 'DIR'; }
+\s*"BT"             { this.popState();  return 'DIR'; }
+\s*"TD"             { this.popState();  return 'DIR'; }
+\s*"BR"             { this.popState();  return 'DIR'; }
+\s*"<"              { this.popState();  return 'DIR'; }
+\s*">"              { this.popState();  return 'DIR'; }
+\s*"^"              { this.popState();  return 'DIR'; }
+\s*"v"              { this.popState();  return 'DIR'; }
+
+.*direction\s+TB[^\n]*       return 'direction_tb';
+.*direction\s+BT[^\n]*       return 'direction_bt';
+.*direction\s+RL[^\n]*       return 'direction_rl';
+.*direction\s+LR[^\n]*       return 'direction_lr';
+
+[0-9]+                       return 'NUM';
+\#                           return 'BRKT';
+":::"                        return 'STYLE_SEPARATOR';
+":"                          return 'COLON';
+"&"                          return 'AMP';
+";"                          return 'SEMI';
+","                          return 'COMMA';
+"*"                          return 'MULT';
+
+\s*[xo<]?\-\-+[-xo>]\s*          { this.popState(); return 'LINK'; }
+\s*[xo<]?\-\-\s*                          { this.pushState("edgeText"); return 'START_LINK'; }
+[^-]|\-(?!\-)+                           return 'EDGE_TEXT';
+
+\s*[xo<]?\=\=+[=xo>]\s*      { this.popState(); return 'LINK'; }
+\s*[xo<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
+[^=]|\=(?!=)                         return 'EDGE_TEXT';
+
+\s*[xo<]?\-?\.+\-[xo>]?\s*   { this.popState(); return 'LINK'; }
+\s*[xo<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
+[^\.]|\.(?!-)                        return 'EDGE_TEXT';
+
+
+<*>\s*\~\~[\~]+\s*              return 'LINK';
+
+[-/\)][\)]         { this.popState(); return '-)'; }
+[^\(\)\[\]\{\}]|-/!\)+       return "TEXT"
+<*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
+
+"])"                { this.popState(); return 'STADIUMEND'; }
+<*>"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
+
+"]]"                { this.popState(); return 'SUBROUTINEEND'; }
+<*>"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
+
+"[|"                      { return 'VERTEX_WITH_PROPS_START'; }
+
+\>                    { this.pushState("text"); return 'TAGEND'; }
+
+")]"                { this.popState(); return 'CYLINDEREND'; }
+<*>"[("                   { this.pushState("text") ;return 'CYLINDERSTART'; }
+
+")))"               { this.popState(); return 'DOUBLECIRCLEEND'; }
+<*>"((("                  { this.pushState("text"); return 'DOUBLECIRCLESTART'; }
+
+[\\(?=\])][\]]  { this.popState(); return 'TRAPEND'; }
+\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
+\/(?!\])|\\(?!\])|[^\\\[\]\(\)\{\}\/]+        return 'TEXT';
+<*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
+
+<*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
 
-.*direction\s+TB[^\n]*                                      return 'direction_tb';
-.*direction\s+BT[^\n]*                                      return 'direction_bt';
-.*direction\s+RL[^\n]*                                      return 'direction_rl';
-.*direction\s+LR[^\n]*                                      return 'direction_lr';
 
-[0-9]+                { return 'NUM';}
-\#                    return 'BRKT';
-":::"                 return 'STYLE_SEPARATOR';
-":"                   return 'COLON';
-"&"                   return 'AMP';
-";"                   return 'SEMI';
-","                   return 'COMMA';
-"*"                   return 'MULT';
-\s*[xo<]?\-\-+[-xo>]\s*     return 'LINK';
-\s*[xo<]?\=\=+[=xo>]\s*     return 'LINK';
-\s*[xo<]?\-?\.+\-[xo>]?\s*  return 'LINK';
-\s*\~\~[\~]+\s*  return 'LINK';
-\s*[xo<]?\-\-\s*            return 'START_LINK';
-\s*[xo<]?\=\=\s*            return 'START_LINK';
-\s*[xo<]?\-\.\s*            return 'START_LINK';
-"(-"                  return '(-';
-"-)"                  return '-)';
-"(["                  return 'STADIUMSTART';
-"])"                  return 'STADIUMEND';
-"[["                  return 'SUBROUTINESTART';
-"]]"                  return 'SUBROUTINEEND';
-"[|"                  return 'VERTEX_WITH_PROPS_START';
-"[("                  return 'CYLINDERSTART';
-")]"                  return 'CYLINDEREND';
-"((("                 return 'DOUBLECIRCLESTART';
-")))"                 return 'DOUBLECIRCLEEND';
-\-                    return 'MINUS';
-"."                   return 'DOT';
-[\_]                  return 'UNDERSCORE';
-\+                    return 'PLUS';
-\%                    return 'PCT';
-"="                   return 'EQUALS';
-\=                    return 'EQUALS';
 "<"                   return 'TAGSTART';
 ">"                   return 'TAGEND';
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
-[A-Za-z]+             return 'ALPHA';
-"\\]"                 return 'TRAPEND';
-"[/"                  return 'TRAPSTART';
-"/]"                  return 'INVTRAPEND';
-"[\\"                 return 'INVTRAPSTART';
-[!"#$%&'*+,-.`?\\_/]  return 'PUNCTUATION';
+"*"                   return 'MULT';
+"#"                   return 'BRKT';
+"&"                   return 'AMP';
+([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+  return 'NODE_STRING';
+"-"                   return 'MINUS'
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -218,13 +242,20 @@ that id.
 [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
                       return 'UNICODE_TEXT';
-"|"                   return 'PIPE';
-"("                   return 'PS';
-")"                   return 'PE';
-"["                   return 'SQS';
-"]"                   return 'SQE';
-"{"                   return 'DIAMOND_START'
-"}"                   return 'DIAMOND_STOP'
+
+"|"             { this.popState(); return 'PIPE'; }
+<*>"|"                { this.pushState("text"); return 'PIPE'; }
+
+")"             { this.popState(); return 'PE'; }
+<*>"("                { this.pushState("text"); return 'PS'; }
+
+"]"            { this.popState(); return 'SQE'; }
+<*>"["                { this.pushState("text"); return 'SQS'; }
+
+(\})            { this.popState(); return 'DIAMOND_STOP' }
+<*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
+[^\[\]\(\)\{\}\|\"]+    return "TEXT";
+
 "\""                  return 'QUOTE';
 (\r?\n)+              return 'NEWLINE';
 \s                    return 'SPACE';
@@ -255,11 +286,11 @@ openDirective
   ;
 
 typeDirective
-  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  : type_directive { yy.parseDirective($type_directive, 'type_directive'); }
   ;
 
 argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  : arg_directive { $arg_directive = $arg_directive.trim().replace(/'/g, '"'); yy.parseDirective($arg_directive, 'arg_directive'); }
   ;
 
 closeDirective
@@ -275,15 +306,15 @@ document
 	{ $$ = [];}
 	| document line
 	{
-	    if(!Array.isArray($2) || $2.length > 0){
-	        $1.push($2);
+	    if(!Array.isArray($line) || $line.length > 0){
+	        $document.push($line);
 	    }
-	    $$=$1;}
+	    $$=$document;}
 	;
 
 line
 	: statement
-	{$$=$1;}
+	{$$=$statement;}
 	| SEMI
 	| NEWLINE
 	| SPACE
@@ -296,15 +327,15 @@ graphConfig
     | GRAPH NODIR
         { yy.setDirection('TB');$$ = 'TB';}
     | GRAPH DIR FirstStmtSeperator
-        { yy.setDirection($2);$$ = $2;}
+        { yy.setDirection($DIR);$$ = $DIR;}
     // | GRAPH SPACE TAGEND FirstStmtSeperator
-    //     { yy.setDirection("LR");$$ = $3;}
+    //     { yy.setDirection("LR");$$ = $TAGEND;}
     // | GRAPH SPACE TAGSTART FirstStmtSeperator
-    //     { yy.setDirection("RL");$$ = $3;}
+    //     { yy.setDirection("RL");$$ = $TAGSTART;}
     // | GRAPH SPACE UP FirstStmtSeperator
-    //     { yy.setDirection("BT");$$ = $3;}
+    //     { yy.setDirection("BT");$$ = $UP;}
     // | GRAPH SPACE DOWN FirstStmtSeperator
-    //     { yy.setDirection("TB");$$ = $3;}
+    //     { yy.setDirection("TB");$$ = $DOWN;}
     ;
 
 ending: endToken ending
@@ -332,7 +363,7 @@ spaceList
 
 statement
     : verticeStatement separator
-    { /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
+    { /* console.warn('finat vs', $verticeStatement.nodes); */ $$=$verticeStatement.nodes}
     | styleStatement separator
     {$$=[];}
     | linkStyleStatement separator
@@ -343,110 +374,121 @@ statement
     {$$=[];}
     | clickStatement separator
     {$$=[];}
-    | subgraph SPACE text SQS text SQE separator document end
-    {$$=yy.addSubGraph($3,$8,$5);}
-    | subgraph SPACE text separator document end
-    {$$=yy.addSubGraph($3,$5,$3);}
-    // | subgraph SPACE text separator document end
-    // {$$=yy.addSubGraph($3,$5,$3);}
+    | subgraph SPACE textNoTags SQS text SQE separator document end
+    {$$=yy.addSubGraph($textNoTags,$document,$text);}
+    | subgraph SPACE textNoTags separator document end
+    {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
+    // | subgraph SPACE textNoTags separator document end
+    // {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
     | subgraph separator document end
-    {$$=yy.addSubGraph(undefined,$3,undefined);}
+    {$$=yy.addSubGraph(undefined,$document,undefined);}
     | direction
-    | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
-    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+    | acc_title acc_title_value  { $$=$acc_title_value.trim();yy.setAccTitle($$); }
+    | acc_descr acc_descr_value  { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
     ;
 
 separator: NEWLINE | SEMI | EOF ;
 
- 
+
 verticeStatement: verticeStatement link node
-        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+        { /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
     |  verticeStatement link node spaceList
-        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
-    |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
-    |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+        { /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
+    |node spaceList {/*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
+    |node { /*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
     ;
 
 node: styledVertex
-        { /* console.warn('nod', $1); */ $$ = [$1];}
+        { /* console.warn('nod', $styledVertex); */ $$ = [$styledVertex];}
     | node spaceList AMP spaceList styledVertex
-        { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
+        { $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
     ;
 
 styledVertex: vertex
-        { /* console.warn('nod', $1); */ $$ = $1;}
+        { /* console.warn('nod', $vertex); */ $$ = $vertex;}
     | vertex STYLE_SEPARATOR idString
-        {$$ = $1;yy.setClass($1,$3)}
+        {$$ = $vertex;yy.setClass($vertex,$idString)}
     ;
 
 vertex:  idString SQS text SQE
-        {$$ = $1;yy.addVertex($1,$3,'square');}
+        {$$ = $idString;yy.addVertex($idString,$text,'square');}
     | idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
-        {$$ = $1;yy.addVertex($1,$3,'doublecircle');}
+        {$$ = $idString;yy.addVertex($idString,$text,'doublecircle');}
     | idString PS PS text PE PE
-        {$$ = $1;yy.addVertex($1,$4,'circle');}
+        {$$ = $idString;yy.addVertex($idString,$text,'circle');}
     | idString '(-' text '-)'
-        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
+        {$$ = $idString;yy.addVertex($idString,$text,'ellipse');}
     | idString STADIUMSTART text STADIUMEND
-        {$$ = $1;yy.addVertex($1,$3,'stadium');}
+        {$$ = $idString;yy.addVertex($idString,$text,'stadium');}
     | idString SUBROUTINESTART text SUBROUTINEEND
-        {$$ = $1;yy.addVertex($1,$3,'subroutine');}
-    | idString VERTEX_WITH_PROPS_START ALPHA COLON ALPHA PIPE text SQE
-        {$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));}
+        {$$ = $idString;yy.addVertex($idString,$text,'subroutine');}
+    | idString VERTEX_WITH_PROPS_START NODE_STRING\[field] COLON NODE_STRING\[value] PIPE text SQE
+        {$$ = $idString;yy.addVertex($idString,$text,'rect',undefined,undefined,undefined, Object.fromEntries([[$field, $value]]));}
     | idString CYLINDERSTART text CYLINDEREND
-        {$$ = $1;yy.addVertex($1,$3,'cylinder');}
+        {$$ = $idString;yy.addVertex($idString,$text,'cylinder');}
     | idString PS text PE
-        {$$ = $1;yy.addVertex($1,$3,'round');}
+        {$$ = $idString;yy.addVertex($idString,$text,'round');}
     | idString DIAMOND_START text DIAMOND_STOP
-        {$$ = $1;yy.addVertex($1,$3,'diamond');}
+        {$$ = $idString;yy.addVertex($idString,$text,'diamond');}
     | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
-        {$$ = $1;yy.addVertex($1,$4,'hexagon');}
+        {$$ = $idString;yy.addVertex($idString,$text,'hexagon');}
     | idString TAGEND text SQE
-        {$$ = $1;yy.addVertex($1,$3,'odd');}
+        {$$ = $idString;yy.addVertex($idString,$text,'odd');}
     | idString TRAPSTART text TRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
+        {$$ = $idString;yy.addVertex($idString,$text,'trapezoid');}
     | idString INVTRAPSTART text INVTRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
+        {$$ = $idString;yy.addVertex($idString,$text,'inv_trapezoid');}
     | idString TRAPSTART text INVTRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'lean_right');}
+        {$$ = $idString;yy.addVertex($idString,$text,'lean_right');}
     | idString INVTRAPSTART text TRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'lean_left');}
+        {$$ = $idString;yy.addVertex($idString,$text,'lean_left');}
     | idString
-        { /*console.warn('h: ', $1);*/$$ = $1;yy.addVertex($1);}
+        { /*console.warn('h: ', $idString);*/$$ = $idString;yy.addVertex($idString);}
     ;
 
 
 
 link: linkStatement arrowText
-    {$1.text = $2;$$ = $1;}
+    {$linkStatement.text = $arrowText;$$ = $linkStatement;}
     | linkStatement TESTSTR SPACE
-    {$1.text = $2;$$ = $1;}
+    {$linkStatement.text = $TESTSTR;$$ = $linkStatement;}
     | linkStatement arrowText SPACE
-    {$1.text = $2;$$ = $1;}
+    {$linkStatement.text = $arrowText;$$ = $linkStatement;}
     | linkStatement
-    {$$ = $1;}
-    | START_LINK text LINK
-        {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$2};}
+    {$$ = $linkStatement;}
+    | START_LINK edgeText LINK
+        {var inf = yy.destructLink($LINK, $START_LINK); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$edgeText};}
     ;
 
+edgeText: edgeTextToken
+    {$$={text:$edgeTextToken, type:'text'};}
+    | edgeText edgeTextToken
+    {$$={text:$edgeText.text+''+$edgeTextToken, type:$edgeText.type};}
+    |STR
+    {$$={text: $STR, type: 'string'};}
+    | MD_STR
+    {$$={text:$MD_STR, type:'markdown'};}
+    ;
+
+
 linkStatement: LINK
-        {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
+        {var inf = yy.destructLink($LINK);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
         ;
 
 arrowText:
     PIPE text PIPE
-    {$$ = $2;}
+    {$$ = $text;}
     ;
 
 text: textToken
-    { $$={text:$1, type: 'text'};}
+    { $$={text:$textToken, type: 'text'};}
     | text textToken
-    { $$={text:$1.text+''+$2, type: $1.type};}
+    { $$={text:$text.text+''+$textToken, type: $text.type};}
     | STR
-    { $$={text: $1, type: 'text'};}
+    { $$ = {text: $STR, type: 'string'};}
     | MD_STR
-    { $$={text: $1, type: 'markdown'};}
+    { $$={text: $MD_STR, type: 'markdown'};}
     ;
 
 
@@ -456,109 +498,104 @@ keywords
 
 
 textNoTags: textNoTagsToken
-    {$$=$1;}
+    {$$={text:$textNoTagsToken, type: 'text'};}
     | textNoTags textNoTagsToken
-    {$$=$1+''+$2;}
+    {$$={text:$textNoTags.text+''+$textNoTagsToken, type: $textNoTags.type};}
+    | STR
+    { $$={text: $STR, type: 'text'};}
+    | MD_STR
+    { $$={text: $MD_STR, type: 'markdown'};}
     ;
 
 
-classDefStatement:CLASSDEF SPACE DEFAULT SPACE stylesOpt
-    {$$ = $1;yy.addClass($3,$5);}
-    | CLASSDEF SPACE alphaNum SPACE stylesOpt
-          {$$ = $1;yy.addClass($3,$5);}
+classDefStatement:CLASSDEF SPACE idString SPACE stylesOpt
+    {$$ = $CLASSDEF;yy.addClass($idString,$stylesOpt);}
     ;
 
-classStatement:CLASS SPACE alphaNum SPACE alphaNum
-    {$$ = $1;yy.setClass($3, $5);}
+classStatement:CLASS SPACE idString\[vertex] SPACE idString\[class]
+    {$$ = $CLASS;yy.setClass($vertex, $class);}
     ;
 
 clickStatement
-    : CLICK CALLBACKNAME                           {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK CALLBACKNAME SPACE STR                 {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK CALLBACKNAME CALLBACKARGS              {$$ = $1;yy.setClickEvent($1, $2, $3);}
-    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR    {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
-    | CLICK HREF                                   {$$ = $1;yy.setLink($1, $2);}
-    | CLICK HREF SPACE STR                         {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
-    | CLICK HREF SPACE LINK_TARGET                 {$$ = $1;yy.setLink($1, $2, $4);}
-    | CLICK HREF SPACE STR SPACE LINK_TARGET       {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
-    | CLICK alphaNum                               {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK alphaNum SPACE STR                     {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK STR                                    {$$ = $1;yy.setLink($1, $2);}
-    | CLICK STR SPACE STR                          {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
-    | CLICK STR SPACE LINK_TARGET                  {$$ = $1;yy.setLink($1, $2, $4);}
-    | CLICK STR SPACE STR SPACE LINK_TARGET        {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
+    : CLICK CALLBACKNAME                                    {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);}
+    | CLICK CALLBACKNAME SPACE STR                          {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);yy.setTooltip($CLICK, $STR);}
+    | CLICK CALLBACKNAME CALLBACKARGS                       {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);}
+    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR             {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);yy.setTooltip($CLICK, $STR);}
+    | CLICK HREF STR                                        {$$ = $CLICK;yy.setLink($CLICK, $STR);}
+    | CLICK HREF STR SPACE STR                              {$$ = $CLICK;yy.setLink($CLICK, $STR1);yy.setTooltip($CLICK, $STR2);}
+    | CLICK HREF STR SPACE LINK_TARGET                      {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
+    | CLICK HREF STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET      {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
+    | CLICK alphaNum                                        {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);}
+    | CLICK alphaNum SPACE STR                              {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);yy.setTooltip($CLICK, $STR);}
+    | CLICK STR                                             {$$ = $CLICK;yy.setLink($CLICK, $STR);}
+    | CLICK STR\[link] SPACE STR\[tooltip]                  {$$ = $CLICK;yy.setLink($CLICK, $link);yy.setTooltip($CLICK, $tooltip);}
+    | CLICK STR SPACE LINK_TARGET                           {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
+    | CLICK STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET    {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
     ;
 
-styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
-    {$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
-    | STYLE SPACE HEX SPACE stylesOpt
-          {$$ = $1;yy.updateLink($3,$5);}
+styleStatement:STYLE SPACE idString SPACE stylesOpt
+    {$$ = $STYLE;yy.addVertex($idString,undefined,undefined,$stylesOpt);}
     ;
 
 linkStyleStatement
     : LINKSTYLE SPACE DEFAULT SPACE stylesOpt
-          {$$ = $1;yy.updateLink([$3],$5);}
+          {$$ = $LINKSTYLE;yy.updateLink([$DEFAULT],$stylesOpt);}
     | LINKSTYLE SPACE numList SPACE stylesOpt
-          {$$ = $1;yy.updateLink($3,$5);}
+          {$$ = $LINKSTYLE;yy.updateLink($numList,$stylesOpt);}
     | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
-          {$$ = $1;yy.updateLinkInterpolate([$3],$7);yy.updateLink([$3],$9);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);yy.updateLink([$DEFAULT],$stylesOpt);}
     | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
-          {$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);yy.updateLink($numList,$stylesOpt);}
     | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum
-          {$$ = $1;yy.updateLinkInterpolate([$3],$7);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);}
     | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum
-          {$$ = $1;yy.updateLinkInterpolate($3,$7);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);}
     ;
 
 numList: NUM
-        {$$ = [$1]}
+        {$$ = [$NUM]}
     | numList COMMA NUM
-        {$1.push($3);$$ = $1;}
+        {$numList.push($NUM);$$ = $numList;}
     ;
 
 stylesOpt: style
-        {$$ = [$1]}
+        {$$ = [$style]}
     | stylesOpt COMMA style
-        {$1.push($3);$$ = $1;}
+        {$stylesOpt.push($style);$$ = $stylesOpt;}
     ;
 
 style: styleComponent
     |style styleComponent
-    {$$ = $1 + $2;}
+    {$$ = $style + $styleComponent;}
     ;
 
-styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
+styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
 
 /* Token lists */
+idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;
 
-textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
+textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 
-textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
+textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | AMP | UNICODE_TEXT | COLON | MULT | BRKT | keywords | START_LINK ;
+
+edgeTextToken  :  EDGE_TEXT | UNICODE_TEXT ;
+
+alphaNumToken  :  NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA | COLON | AMP | BRKT | MULT;
 
 idString
     :idStringToken
-    {$$=$1}
+    {$$=$idStringToken}
     | idString idStringToken
-    {$$=$1+''+$2}
+    {$$=$idString+''+$idStringToken}
     ;
 
 alphaNum
-    : alphaNumStatement
-    {$$=$1;}
-    | alphaNum alphaNumStatement
-    {$$=$1+''+$2;}
+    : alphaNumToken
+    {$$=$alphaNumToken;}
+    | alphaNum alphaNumToken
+    {$$=$alphaNum+''+$alphaNumToken;}
     ;
 
-alphaNumStatement
-    : DIR
-        {$$=$1;}
-    | alphaNumToken
-        {$$=$1;}
-    | DOWN
-        {$$='v';}
-    | MINUS
-        {$$='-';}
-    ;
 
 direction
     : direction_tb
@@ -571,9 +608,4 @@ direction
     { $$={stmt:'dir', value:'LR'};}
     ;
 
-alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
-
-idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP | DEFAULT;
-
-graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 396402702..da838f839 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -37,6 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
+let weekday = 'sunday';
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -66,6 +67,7 @@ export const clear = function () {
   lastOrder = 0;
   links = {};
   commonClear();
+  weekday = 'sunday';
 };
 
 export const setAxisFormat = function (txt) {
@@ -179,6 +181,14 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) {
   return excludes.includes(date.format(dateFormat.trim()));
 };
 
+export const setWeekday = function (txt) {
+  weekday = txt;
+};
+
+export const getWeekday = function () {
+  return weekday;
+};
+
 /**
  * TODO: fully document what this function does and what types it accepts
  *
@@ -759,6 +769,8 @@ export default {
   bindFunctions,
   parseDuration,
   isInvalidDate,
+  setWeekday,
+  getWeekday,
 };
 
 /**
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
index 0104c7d0c..cf2974d44 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import ganttParser from './parser/gantt.jison';
 import ganttDb from './ganttDb.js';
 import ganttRenderer from './ganttRenderer.js';
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index ff16fef7c..522f59e2c 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -13,7 +13,13 @@ import {
   timeMinute,
   timeHour,
   timeDay,
-  timeWeek,
+  timeMonday,
+  timeTuesday,
+  timeWednesday,
+  timeThursday,
+  timeFriday,
+  timeSaturday,
+  timeSunday,
   timeMonth,
 } from 'd3';
 import common from '../common/common.js';
@@ -24,6 +30,20 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
+/**
+ * This will map any day of the week that can be set in the `weekday` option to
+ * the corresponding d3-time function that is used to calculate the ticks.
+ */
+const mapWeekdayToTimeFunction = {
+  monday: timeMonday,
+  tuesday: timeTuesday,
+  wednesday: timeWednesday,
+  thursday: timeThursday,
+  friday: timeFriday,
+  saturday: timeSaturday,
+  sunday: timeSunday,
+};
+
 /**
  * For this issue:
  * https://github.com/mermaid-js/mermaid/issues/1618
@@ -59,8 +79,6 @@ let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
 
-  // diagObj.db.clear();
-  // parser.parse(text);
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
@@ -563,6 +581,8 @@ export const draw = function (text, id, version, diagObj) {
     if (resultTickInterval !== null) {
       const every = resultTickInterval[1];
       const interval = resultTickInterval[2];
+      const weekday = diagObj.db.getWeekday() || conf.weekday;
+
       switch (interval) {
         case 'minute':
           bottomXAxis.ticks(timeMinute.every(every));
@@ -574,7 +594,7 @@ export const draw = function (text, id, version, diagObj) {
           bottomXAxis.ticks(timeDay.every(every));
           break;
         case 'week':
-          bottomXAxis.ticks(timeWeek.every(every));
+          bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
           break;
         case 'month':
           bottomXAxis.ticks(timeMonth.every(every));
@@ -602,6 +622,8 @@ export const draw = function (text, id, version, diagObj) {
       if (resultTickInterval !== null) {
         const every = resultTickInterval[1];
         const interval = resultTickInterval[2];
+        const weekday = diagObj.db.getWeekday() || conf.weekday;
+
         switch (interval) {
           case 'minute':
             topXAxis.ticks(timeMinute.every(every));
@@ -613,7 +635,7 @@ export const draw = function (text, id, version, diagObj) {
             topXAxis.ticks(timeDay.every(every));
             break;
           case 'week':
-            topXAxis.ticks(timeWeek.every(every));
+            topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
             break;
           case 'month':
             topXAxis.ticks(timeMonth.every(every));
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index 0eb45ec41..f7fd40c1b 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -77,24 +77,31 @@ that id.
 [\s\n]           this.popState();
 [^\s\n]*         return 'click';
 
-"gantt"                     return 'gantt';
-"dateFormat"\s[^#\n;]+      return 'dateFormat';
-"inclusiveEndDates"         return 'inclusiveEndDates';
-"topAxis"                   return 'topAxis';
-"axisFormat"\s[^#\n;]+      return 'axisFormat';
-"tickInterval"\s[^#\n;]+    return 'tickInterval';
-"includes"\s[^#\n;]+        return 'includes';
-"excludes"\s[^#\n;]+        return 'excludes';
-"todayMarker"\s[^\n;]+      return 'todayMarker';
-\d\d\d\d"-"\d\d"-"\d\d      return 'date';
-"title"\s[^#\n;]+           return 'title';
-"accDescription"\s[^#\n;]+  return 'accDescription'
-"section"\s[^#:\n;]+        return 'section';
-[^#:\n;]+                   return 'taskTxt';
-":"[^#\n;]+                 return 'taskData';
-":"                         return ':';
-<>                     return 'EOF';
-.                           return 'INVALID';
+"gantt"                         return 'gantt';
+"dateFormat"\s[^#\n;]+          return 'dateFormat';
+"inclusiveEndDates"             return 'inclusiveEndDates';
+"topAxis"                       return 'topAxis';
+"axisFormat"\s[^#\n;]+          return 'axisFormat';
+"tickInterval"\s[^#\n;]+        return 'tickInterval';
+"includes"\s[^#\n;]+            return 'includes';
+"excludes"\s[^#\n;]+            return 'excludes';
+"todayMarker"\s[^\n;]+          return 'todayMarker';
+weekday\s+monday                return 'weekday_monday'
+weekday\s+tuesday               return 'weekday_tuesday'
+weekday\s+wednesday             return 'weekday_wednesday'
+weekday\s+thursday              return 'weekday_thursday'
+weekday\s+friday                return 'weekday_friday'
+weekday\s+saturday              return 'weekday_saturday'
+weekday\s+sunday                return 'weekday_sunday'
+\d\d\d\d"-"\d\d"-"\d\d          return 'date';
+"title"\s[^#\n;]+               return 'title';
+"accDescription"\s[^#\n;]+      return 'accDescription'
+"section"\s[^#:\n;]+            return 'section';
+[^#:\n;]+                       return 'taskTxt';
+":"[^#\n;]+                     return 'taskData';
+":"                             return ':';
+<>                         return 'EOF';
+.                               return 'INVALID';
 
 /lex
 
@@ -121,6 +128,16 @@ line
 	| EOF { $$=[];}
 	;
 
+weekday
+  : weekday_monday { yy.setWeekday("monday");}
+  | weekday_tuesday { yy.setWeekday("tuesday");}
+  | weekday_wednesday { yy.setWeekday("wednesday");}
+  | weekday_thursday { yy.setWeekday("thursday");}
+  | weekday_friday { yy.setWeekday("friday");}
+  | weekday_saturday { yy.setWeekday("saturday");}
+  | weekday_sunday { yy.setWeekday("sunday");}
+  ;
+
 statement
   : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
   | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
@@ -130,6 +147,7 @@ statement
   | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
+  | weekday
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
   | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
   | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 020bab0ed..e7ce1ffa4 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -180,4 +180,12 @@ row2`;
     expect(ganttDb.getAccTitle()).toBe(expectedTitle);
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
+
+  it.each(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])(
+    'should allow for setting the starting weekday to %s for tick interval',
+    (day) => {
+      parser.parse(`gantt\nweekday ${day}`);
+      expect(ganttDb.getWeekday()).toBe(day);
+    }
+  );
 });
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
index 08ff126c4..c9a21cc2d 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import gitGraphParser from './parser/gitGraph.jison';
 import gitGraphDb from './gitGraphAst.js';
 import gitGraphRenderer from './gitGraphRenderer.js';
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
index b8cff72ec..a3b05ad79 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
@@ -1,7 +1,6 @@
 import { curveBasis, line, select } from 'd3';
 
 import db from './gitGraphAst.js';
-import gitGraphParser from './parser/gitGraph.js';
 import { logger } from '../../logger.js';
 import { interpolateToCurve } from '../../utils.js';
 
@@ -328,13 +327,7 @@ function renderLines(svg, commit, direction, branchColor = 0) {
 
 export const draw = function (txt, id, ver) {
   try {
-    const parser = gitGraphParser.parser;
-    parser.yy = db;
-    parser.yy.clear();
-
     logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
-    // Parse the graph definition
-    parser.parse(txt + '\n');
 
     config = Object.assign(config, apiConfig, db.getOptions());
     logger.debug('effective options', config);
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 8d88c601d..2b88cfe7e 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -19,12 +19,14 @@ let branchPos = {};
 let commitPos = {};
 let lanes = [];
 let maxPos = 0;
+let dir = 'LR';
 const clear = () => {
   branchPos = {};
   commitPos = {};
   allCommitsDict = {};
   maxPos = 0;
   lanes = [];
+  dir = 'LR';
 };
 
 /**
@@ -77,6 +79,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const gLabels = svg.append('g').attr('class', 'commit-labels');
   let pos = 0;
 
+  if (dir === 'TB') {
+    pos = 30;
+  }
+
   const keys = Object.keys(commits);
   const sortedKeys = keys.sort((a, b) => {
     return commits[a].seq - commits[b].seq;
@@ -84,8 +90,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
   sortedKeys.forEach((key) => {
     const commit = commits[key];
 
-    const y = branchPos[commit.branch].pos;
-    const x = pos + 10;
+    const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
+    const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
+
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
       let typeClass;
@@ -208,7 +215,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    commitPos[commit.id] = { x: pos + 10, y: y };
+    if (dir === 'TB') {
+      commitPos[commit.id] = { x: x, y: pos + 10 };
+    } else {
+      commitPos[commit.id] = { x: pos + 10, y: y };
+    }
 
     // The first iteration over the commits are for positioning purposes, this
     // is required for drawing the lines. The circles and labels is drawn after the labels
@@ -240,14 +251,27 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('y', y + 13.5)
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
-        text.attr('x', pos + 10 - bbox.width / 2);
+
+        if (dir === 'TB') {
+          labelBkg.attr('x', x - (bbox.width + 4 * px + 5)).attr('y', y - 12);
+          text.attr('x', x - (bbox.width + 4 * px)).attr('y', y + bbox.height - 12);
+        }
+
+        if (dir !== 'TB') {
+          text.attr('x', pos + 10 - bbox.width / 2);
+        }
         if (gitGraphConfig.rotateCommitLabel) {
-          let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
-          let r_y = 10 + (bbox.width / 25) * 8.5;
-          wrapper.attr(
-            'transform',
-            'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
-          );
+          if (dir === 'TB') {
+            text.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
+            labelBkg.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
+          } else {
+            let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
+            let r_y = 10 + (bbox.width / 25) * 8.5;
+            wrapper.attr(
+              'transform',
+              'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
+            );
+          }
         }
       }
       if (commit.tag) {
@@ -280,6 +304,30 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('cy', ly)
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
+
+        if (dir === 'TB') {
+          rect
+            .attr('class', 'tag-label-bkg')
+            .attr(
+              'points',
+              `
+            ${x},${pos + py}
+            ${x},${pos - py}
+            ${x + 10},${pos - h2 - py}
+            ${x + 10 + tagBbox.width + px},${pos - h2 - py}
+            ${x + 10 + tagBbox.width + px},${pos + h2 + py}
+            ${x + 10},${pos + h2 + py}`
+            )
+            .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
+          hole
+            .attr('cx', x + px / 2)
+            .attr('cy', pos)
+            .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
+          tag
+            .attr('x', x + 5)
+            .attr('y', pos + 3)
+            .attr('transform', 'translate(14,14) rotate(45, ' + x + ',' + pos + ')');
+        }
       }
     }
     pos += 50;
@@ -365,46 +413,94 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
     colorClassNum = branchPos[commit2.branch].index;
 
     const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
+    const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
 
-    if (p1.y < p2.y) {
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${
-        p2.x - radius
-      } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
+    if (dir === 'TB') {
+      if (p1.x < p2.x) {
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
+          p1.y + offset
+        } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+      } else {
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
+          p1.y + offset
+        } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
+      }
     } else {
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
-        p1.x + offset
-      } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
+      if (p1.y < p2.y) {
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
+          p1.x + offset
+        } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
+      } else {
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
+          p1.x + offset
+        } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
+      }
     }
   } else {
-    if (p1.y < p2.y) {
-      arc = 'A 20 20, 0, 0, 0,';
-      radius = 20;
-      offset = 20;
+    if (dir === 'TB') {
+      if (p1.x < p2.x) {
+        arc = 'A 20 20, 0, 0, 0,';
+        arc2 = 'A 20 20, 0, 0, 1,';
+        radius = 20;
+        offset = 20;
 
-      // Figure out the color of the arrow,arrows going down take the color from the destination branch
-      colorClassNum = branchPos[commit2.branch].index;
+        // Figure out the color of the arrow,arrows going down take the color from the destination branch
+        colorClassNum = branchPos[commit2.branch].index;
 
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-        p2.x
-      } ${p2.y}`;
-    }
-    if (p1.y > p2.y) {
-      arc = 'A 20 20, 0, 0, 0,';
-      radius = 20;
-      offset = 20;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
+          p1.y + offset
+        } L ${p2.x} ${p2.y}`;
+      }
+      if (p1.x > p2.x) {
+        arc = 'A 20 20, 0, 0, 0,';
+        arc2 = 'A 20 20, 0, 0, 1,';
+        radius = 20;
+        offset = 20;
 
-      // Arrows going up take the color from the source branch
-      colorClassNum = branchPos[commit1.branch].index;
-      lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
-        p2.x
-      } ${p2.y}`;
-    }
+        // Arrows going up take the color from the source branch
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
+          p2.y
+        } L ${p2.x} ${p2.y}`;
+      }
 
-    if (p1.y === p2.y) {
-      colorClassNum = branchPos[commit1.branch].index;
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-        p2.x
-      } ${p2.y}`;
+      if (p1.x === p2.x) {
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
+          p2.y + radius
+        } L ${p2.x} ${p2.y}`;
+      }
+    } else {
+      if (p1.y < p2.y) {
+        arc = 'A 20 20, 0, 0, 0,';
+        radius = 20;
+        offset = 20;
+
+        // Figure out the color of the arrow,arrows going down take the color from the destination branch
+        colorClassNum = branchPos[commit2.branch].index;
+
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+          p2.x
+        } ${p2.y}`;
+      }
+      if (p1.y > p2.y) {
+        arc = 'A 20 20, 0, 0, 0,';
+        radius = 20;
+        offset = 20;
+
+        // Arrows going up take the color from the source branch
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+          p2.x
+        } ${p2.y}`;
+      }
+
+      if (p1.y === p2.y) {
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+          p2.x
+        } ${p2.y}`;
+      }
     }
   }
   svg
@@ -445,6 +541,13 @@ const drawBranches = (svg, branches) => {
     line.attr('y2', pos);
     line.attr('class', 'branch branch' + adjustIndexForTheme);
 
+    if (dir === 'TB') {
+      line.attr('y1', 30);
+      line.attr('x1', pos);
+      line.attr('y2', maxPos);
+      line.attr('x2', pos);
+    }
+
     lanes.push(pos);
 
     let name = branch.name;
@@ -467,7 +570,6 @@ const drawBranches = (svg, branches) => {
       .attr('y', -bbox.height / 2 + 8)
       .attr('width', bbox.width + 18)
       .attr('height', bbox.height + 4);
-
     label.attr(
       'transform',
       'translate(' +
@@ -476,7 +578,13 @@ const drawBranches = (svg, branches) => {
         (pos - bbox.height / 2 - 1) +
         ')'
     );
-    bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+    if (dir === 'TB') {
+      bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', 0);
+      label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + 0 + ')');
+    }
+    if (dir !== 'TB') {
+      bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+    }
   });
 };
 
@@ -495,15 +603,24 @@ export const draw = function (txt, id, ver, diagObj) {
 
   allCommitsDict = diagObj.db.getCommits();
   const branches = diagObj.db.getBranchesAsObjArray();
-
-  // Position branches vertically
+  dir = diagObj.db.getDirection();
+  const diagram = select(`[id="${id}"]`);
+  // Position branches
   let pos = 0;
   branches.forEach((branch, index) => {
-    branchPos[branch.name] = { pos, index };
-    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0);
-  });
+    const labelElement = drawText(branch.name);
+    const g = diagram.append('g');
+    const branchLabel = g.insert('g').attr('class', 'branchLabel');
+    const label = branchLabel.insert('g').attr('class', 'label branch-label');
+    label.node().appendChild(labelElement);
+    let bbox = labelElement.getBBox();
 
-  const diagram = select(`[id="${id}"]`);
+    branchPos[branch.name] = { pos, index };
+    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + (dir === 'TB' ? bbox.width / 2 : 0);
+    label.remove();
+    branchLabel.remove();
+    g.remove();
+  });
 
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {
diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index 1c87f3bf3..9ff5623f8 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -51,7 +51,7 @@ cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 // "reset"                                 return 'RESET';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
-"BT"                                    return 'DIR';
+"TB"                                    return 'DIR';
 ":"                                     return ':';
 "^"                                     return 'CARET'
 "options"\r?\n                          this.begin("options"); //
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 79f3ec992..25ae72fce 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,7 +1,7 @@
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
-import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -11,40 +11,20 @@ import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
  * @param version - MermaidJS version.
  */
 const draw: DrawDefinition = (text, id, version) => {
-  try {
-    log.debug('rendering info diagram\n' + text);
+  log.debug('rendering info diagram\n' + text);
 
-    const { securityLevel } = getConfig();
-    // handle root and document for when rendering in sandbox mode
-    let sandboxElement: HTML | undefined;
-    let document: Document | null | undefined;
-    if (securityLevel === 'sandbox') {
-      sandboxElement = select('#i' + id);
-      document = sandboxElement.nodes()[0].contentDocument;
-    }
+  const svg: SVG = selectSvgElement(id);
+  configureSvgSize(svg, 100, 400, true);
 
-    // @ts-ignore - figure out how to assign HTML to document type
-    const root: HTML =
-      sandboxElement !== undefined && document !== undefined && document !== null
-        ? select(document)
-        : select('body');
-
-    const svg: SVG = root.select('#' + id);
-    svg.attr('height', 100);
-    svg.attr('width', 400);
-
-    const g = svg.append('g');
-
-    g.append('text') // text label for the x axis
-      .attr('x', 100)
-      .attr('y', 40)
-      .attr('class', 'version')
-      .attr('font-size', '32px')
-      .style('text-anchor', 'middle')
-      .text('v ' + version);
-  } catch (e) {
-    log.error('error while rendering info diagram', e);
-  }
+  const group: Group = svg.append('g');
+  group
+    .append('text')
+    .attr('x', 100)
+    .attr('y', 40)
+    .attr('class', 'version')
+    .attr('font-size', 32)
+    .style('text-anchor', 'middle')
+    .text(`v${version}`);
 };
 
 export const renderer = { draw };
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
index 846fd5dc5..b35214435 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import mindmapParser from './parser/mindmap.jison';
 import * as mindmapDb from './mindmapDb.js';
 import mindmapRenderer from './mindmapRenderer.js';
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index 01d675d83..7e741657b 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -167,14 +167,8 @@ function positionNodes(cy) {
 export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
-  // console.log('Config: ', conf);
   conf.htmlLabels = false;
 
-  // This is done only for throwing the error if the text is not valid.
-  diagObj.db.clear();
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
   log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
 
   const securityLevel = getConfig().securityLevel;
diff --git a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
index 9dd046a3d..afd5e2300 100644
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
@@ -40,7 +40,7 @@
 "["                { this.begin('NODE');return 'NODE_DSTART'; }
 [\s]+              return 'SPACELIST'                 /* skip all whitespace */    ;
 // !(-\()            return 'NODE_ID';
-[^\(\[\n\-\)\{\}]+         return 'NODE_ID';
+[^\(\[\n\)\{\}]+         return 'NODE_ID';
 <>            return 'EOF';
 ["][`]          { this.begin("NSTR2");}
 [^`"]+        { return "NODE_DESCR";}
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
index 4c6b7d3bc..21756dd4e 100644
--- a/packages/mermaid/src/diagrams/pie/pieDiagram.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/pie.jison';
 import db from './pieDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 1ee34e192..d4242c087 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -33,9 +33,6 @@ export const draw = (txt, id, _version, diagObj) => {
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
     // Parse the Pie Chart definition
-    diagObj.db.clear();
-    diagObj.parser.parse(txt);
-    log.debug('Parsed info diagram');
     const elem = doc.getElementById(id);
     width = elem.parentElement.offsetWidth;
 
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts
index 05b18b935..f4a9835e1 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import { parser } from './quadrant.jison';
 import { Mock, vi } from 'vitest';
 
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
index 8168551ad..9c1162762 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
@@ -1,7 +1,7 @@
 // @ts-ignore: TODO Fix ts errors
 import { scaleLinear } from 'd3';
 import { log } from '../../logger.js';
-import { QuadrantChartConfig } from '../../config.type.js';
+import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js';
 import defaultConfig from '../../defaultConfig.js';
 import { getThemeVariables } from '../../themes/theme-default.js';
 
@@ -71,7 +71,8 @@ export interface quadrantBuilderData {
   points: QuadrantPointInputType[];
 }
 
-export interface QuadrantBuilderConfig extends QuadrantChartConfig {
+export interface QuadrantBuilderConfig
+  extends Required> {
   showXAxis: boolean;
   showYAxis: boolean;
   showTitle: boolean;
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts
index 40ae798d2..c2fc970b1 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/quadrant.jison';
 import db from './quadrantDb.js';
 import renderer from './quadrantRenderer.js';
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
index 4505afc56..c2e997628 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/requirementDiagram.jison';
 import db from './requirementDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index b88f5c203..49b782865 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -306,8 +306,6 @@ const elementString = (str) => {
 
 export const draw = (text, id, _version, diagObj) => {
   conf = getConfig().requirement;
-  diagObj.db.clear();
-  diagObj.parser.parse(text);
 
   const securityLevel = conf.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index e6e18f113..a9ee698e9 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -18,17 +18,17 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
-import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 // Map config options to alignment functions
 const alignmentsMap: Record<
   SankeyNodeAlignment,
   (node: d3SankeyNode, n: number) => number
 > = {
-  [SankeyNodeAlignment.left]: d3SankeyLeft,
-  [SankeyNodeAlignment.right]: d3SankeyRight,
-  [SankeyNodeAlignment.center]: d3SankeyCenter,
-  [SankeyNodeAlignment.justify]: d3SankeyJustify,
+  left: d3SankeyLeft,
+  right: d3SankeyRight,
+  center: d3SankeyCenter,
+  justify: d3SankeyJustify,
 };
 
 /**
@@ -157,9 +157,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('class', 'link')
     .style('mix-blend-mode', 'multiply');
 
-  const linkColor = conf?.linkColor || SankeyLinkColor.gradient;
+  const linkColor = conf?.linkColor || 'gradient';
 
-  if (linkColor === SankeyLinkColor.gradient) {
+  if (linkColor === 'gradient') {
     const gradient = link
       .append('linearGradient')
       .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id)
@@ -180,13 +180,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   let coloring: any;
   switch (linkColor) {
-    case SankeyLinkColor.gradient:
+    case 'gradient':
       coloring = (d: any) => d.uid;
       break;
-    case SankeyLinkColor.source:
+    case 'source':
       coloring = (d: any) => colorScheme(d.source.id);
       break;
-    case SankeyLinkColor.target:
+    case 'target':
       coloring = (d: any) => colorScheme(d.target.id);
       break;
     default:
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 8b7d6f8d0..0b84fbe35 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -172,14 +172,11 @@ describe('more than one sequence diagram', () => {
 
 describe('when parsing a sequenceDiagram', function () {
   beforeEach(function () {
-    // diagram.db = sequenceDb;
-    // diagram.db.clear();
     diagram = new Diagram(`
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`);
-    diagram.db.clear();
   });
   it('should handle a sequenceDiagram definition', async function () {
     const str = `
@@ -1482,8 +1479,6 @@ describe('when checking the bounds in a sequenceDiagram', function () {
   let conf;
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
-    // diagram.db.clear();
     diagram.renderer.bounds.init();
     conf = diagram.db.getConfig();
   });
@@ -1635,7 +1630,6 @@ sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`);
-    diagram.db.clear();
   });
   ['tspan', 'fo', 'old', undefined].forEach(function (textPlacement) {
     it(`
@@ -2009,8 +2003,6 @@ describe('when rendering a sequenceDiagram with actor mirror activated', () => {
   let conf;
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
-    diagram.db.clear();
     conf = diagram.db.getConfig();
     diagram.renderer.bounds.init();
   });
@@ -2052,12 +2044,8 @@ describe('when rendering a sequenceDiagram with directives', () => {
     mermaidAPI.initialize({ sequence: conf });
   });
 
-  let conf;
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
-    diagram.db.clear();
-    conf = diagram.db.getConfig();
     diagram.renderer.bounds.init();
   });
 
@@ -2069,10 +2057,7 @@ sequenceDiagram
 participant Alice
 `;
     diagram = new Diagram(str);
-
     diagram.renderer.bounds.init();
-    await mermaidAPI.parse(str);
-
     diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
 
     const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -2093,7 +2078,7 @@ sequenceDiagram
 participant Alice
 `;
 
-    diagram.parse(str);
+    diagram = new Diagram(str);
     diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
 
     const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -2114,7 +2099,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
-    await mermaidAPI.parse(str1);
+    diagram = new Diagram(str1);
     diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
     expect(diagram.db.showSequenceNumbers()).toBe(true);
 
@@ -2124,7 +2109,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
-    await mermaidAPI.parse(str2);
+    diagram = new Diagram(str2);
     diagram.renderer.draw(str2, 'tst', '1.2.3', diagram);
     expect(diagram.db.showSequenceNumbers()).toBe(false);
   });
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
index 382d47b61..b4342a694 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/sequenceDiagram.jison';
 import db from './sequenceDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 4f8b1889b..feee7157f 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -3,7 +3,7 @@ import { select, selectAll } from 'd3';
 import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
 import { log } from '../../logger.js';
 import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import * as configApi from '../../config.js';
 import assignWithDepth from '../../assignWithDepth.js';
 import utils from '../../utils.js';
@@ -749,9 +749,6 @@ function adjustCreatedDestroyedData(
 export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
   const { securityLevel, sequence } = configApi.getConfig();
   conf = sequence;
-  diagObj.db.clear();
-  // Parse the graph definition
-  diagObj.parser.parse(_text);
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 0c7bc6421..e0aaa1eb9 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,5 +1,5 @@
 import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { addFunction } from '../../interactionDb.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
index 616a97556..8f62a64db 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
 import db from './stateDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.ts b/packages/mermaid/src/diagrams/state/stateDiagram.ts
index 44552c246..fd3467607 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
 import db from './stateDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 592cb43cc..1c9b2d1d3 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -84,17 +84,8 @@ export const setConf = function (cnf) {
  * @returns {object} ClassDef styles (a Map with keys = strings, values = )
  */
 export const getClasses = function (text, diagramObj) {
-  log.trace('Extracting classes');
-  diagramObj.db.clear();
-  try {
-    // Parse the graph definition
-    diagramObj.parser.parse(text);
-    // must run extract() to turn the parsed statements into states, relationships, classes, etc.
-    diagramObj.db.extract(diagramObj.db.getRootDocV2());
-    return diagramObj.db.getClasses();
-  } catch (e) {
-    return e;
-  }
+  diagramObj.db.extract(diagramObj.db.getRootDocV2());
+  return diagramObj.db.getClasses();
 };
 
 /**
@@ -384,7 +375,6 @@ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
  */
 export const draw = async function (text, id, _version, diag) {
   log.info('Drawing state diagram (v2)', id);
-  // diag.sb.clear();
   nodeDb = {};
   // Fetch the default direction, use TD if none was found
   let dir = diag.db.getDirection();
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 74913a748..1b3e0f27e 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -57,28 +57,12 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // diagObj.db.clear();
-  // parser.parse(text);
   log.debug('Rendering diagram ' + text);
 
   // Fetch the default direction, use TD if none was found
   const diagram = root.select(`[id='${id}']`);
   insertMarkers(diagram);
 
-  // Layout graph, Create a new directed graph
-  const graph = new graphlib.Graph({
-    multigraph: true,
-    compound: true,
-    // acyclicer: 'greedy',
-    rankdir: 'RL',
-    // ranksep: '20'
-  });
-
-  // Default to assigning a new object as a label for each new edge.
-  graph.setDefaultEdgeLabel(function () {
-    return {};
-  });
-
   const rootDoc = diagObj.db.getRootDoc();
   renderDoc(rootDoc, diagram, undefined, false, root, doc, diagObj);
 
diff --git a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
index 7f671291f..0c5561610 100644
--- a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
+++ b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/timeline.jison';
 import * as db from './timelineDb.js';
 import renderer from './timelineRenderer.js';
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 17460bac2..d44174fe4 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -30,12 +30,6 @@ export const draw = function (text: string, id: string, version: string, diagObj
   // @ts-expect-error - wrong config?
   const LEFT_MARGIN = conf.leftMargin ?? 50;
 
-  //2. Clear the diagram db before parsing
-  diagObj.db.clear?.();
-
-  //3. Parse the diagram text
-  diagObj.parser.parse(text + '\n');
-
   log.debug('timeline', diagObj.db);
 
   const securityLevel = conf.securityLevel;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
index 969cf0e5e..1c009d9ea 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/journey.jison';
 import db from './journeyDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 9ea880f69..28c83f19d 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -49,8 +49,6 @@ const conf = getConfig().journey;
 const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().journey;
-  diagObj.db.clear();
-  diagObj.parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
index 108f4b2f9..7a8f791fa 100644
--- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js
+++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
@@ -1,5 +1,5 @@
 import { arc as d3arc } from 'd3';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 19f3912a7..b6998f249 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,8 +16,12 @@ import { teamMembers } from '../contributors';
           

             
             

-            Join the community and
-            get involved!
+            Join the community
+            and get involved!
           

         
       
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 2b2914ca3..1d609c13e 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -35,7 +35,12 @@ export default defineConfig({
   themeConfig: {
     nav: nav(),
     editLink: {
-      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
+      pattern: ({ filePath, frontmatter }) => {
+        if (typeof frontmatter.editLink === 'string') {
+          return frontmatter.editLink;
+        }
+        return `https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/${filePath}`;
+      },
       text: 'Edit this page on GitHub',
     },
     sidebar: {
@@ -134,7 +139,7 @@ function sidebarSyntax() {
         { text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
-        { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
+        { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' },
         { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
@@ -155,6 +160,7 @@ function sidebarConfig() {
         { text: 'Tutorials', link: '/config/Tutorials' },
         { text: 'API-Usage', link: '/config/usage' },
         { text: 'Mermaid API Configuration', link: '/config/setup/README' },
+        { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' },
         { text: 'Directives', link: '/config/directives' },
         { text: 'Theming', link: '/config/theming' },
         { text: 'Accessibility', link: '/config/accessibility' },
diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts
index bef2c1311..93eeee2e2 100644
--- a/packages/mermaid/src/docs/.vitepress/contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/contributors.ts
@@ -1,30 +1,5 @@
 import contributorUsernamesJson from './contributor-names.json';
-
-export interface Contributor {
-  name: string;
-  avatar: string;
-}
-
-export interface SocialEntry {
-  icon: string | { svg: string };
-  link: string;
-}
-
-export interface CoreTeam {
-  name: string;
-  // required to download avatars from GitHub
-  github: string;
-  avatar?: string;
-  twitter?: string;
-  mastodon?: string;
-  sponsor?: string;
-  website?: string;
-  linkedIn?: string;
-  title?: string;
-  org?: string;
-  desc?: string;
-  links?: SocialEntry[];
-}
+import { CoreTeam, knut, plainTeamMembers } from './teamMembers.js';
 
 const contributorUsernames: string[] = contributorUsernamesJson;
 
@@ -38,6 +13,7 @@ const websiteSVG = {
 
 const createLinks = (tm: CoreTeam): CoreTeam => {
   tm.avatar = `/user-avatars/${tm.github}.png`;
+  tm.title = tm.title ?? 'Developer';
   tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }];
   if (tm.mastodon) {
     tm.links.push({ icon: 'mastodon', link: tm.mastodon });
@@ -54,91 +30,6 @@ const createLinks = (tm: CoreTeam): CoreTeam => {
   return tm;
 };
 
-const knut: CoreTeam = {
-  github: 'knsv',
-  name: 'Knut Sveidqvist',
-  title: 'Creator',
-  twitter: 'knutsveidqvist',
-  sponsor: 'https://github.com/sponsors/knsv',
-};
-
-const plainTeamMembers: CoreTeam[] = [
-  {
-    github: 'NeilCuzon',
-    name: 'Neil Cuzon',
-    title: 'Developer',
-  },
-  {
-    github: 'tylerlong',
-    name: 'Tyler Liu',
-    title: 'Developer',
-  },
-  {
-    github: 'sidharthv96',
-    name: 'Sidharth Vinod',
-    title: 'Developer',
-    twitter: 'sidv42',
-    mastodon: 'https://techhub.social/@sidv',
-    sponsor: 'https://github.com/sponsors/sidharthv96',
-    linkedIn: 'sidharth-vinod',
-    website: 'https://sidharth.dev',
-  },
-  {
-    github: 'ashishjain0512',
-    name: 'Ashish Jain',
-    title: 'Developer',
-  },
-  {
-    github: 'mmorel-35',
-    name: 'Matthieu Morel',
-    title: 'Developer',
-    linkedIn: 'matthieumorel35',
-  },
-  {
-    github: 'aloisklink',
-    name: 'Alois Klink',
-    title: 'Developer',
-    linkedIn: 'aloisklink',
-    website: 'https://aloisklink.com',
-  },
-  {
-    github: 'pbrolin47',
-    name: 'Per Brolin',
-    title: 'Developer',
-  },
-  {
-    github: 'Yash-Singh1',
-    name: 'Yash Singh',
-    title: 'Developer',
-  },
-  {
-    github: 'GDFaber',
-    name: 'Marc Faber',
-    title: 'Developer',
-    linkedIn: 'marc-faber',
-  },
-  {
-    github: 'MindaugasLaganeckas',
-    name: 'Mindaugas Laganeckas',
-    title: 'Developer',
-  },
-  {
-    github: 'jgreywolf',
-    name: 'Justin Greywolf',
-    title: 'Developer',
-  },
-  {
-    github: 'IOrlandoni',
-    name: 'Nacho Orlandoni',
-    title: 'Developer',
-  },
-  {
-    github: 'huynhicode',
-    name: 'Steph Huynh',
-    title: 'Developer',
-  },
-];
-
 const teamMembers = plainTeamMembers.map((tm) => createLinks(tm));
 teamMembers.sort(
   (a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github)
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 14340462c..30f044d98 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -54,6 +54,15 @@ const MermaidExample = async (md: MarkdownRenderer) => {
       return `
NOTE
${token.content}}
`;
     }
 
+    if (token.info.trim() === 'regexp') {
+      // shiki doesn't yet support regexp code blocks, but the javascript
+      // one still makes RegExes look good
+      token.info = 'javascript';
+      // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block
+      token.content = `/${token.content.trimEnd()}/\n`;
+      return defaultRenderer(tokens, index, options, env, slf);
+    }
+
     if (token.info.trim() === 'jison') {
       return `

       
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
index 47f371fee..cd78be782 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -19,6 +19,10 @@ async function download(url: string, fileName: URL) {
     await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
   } catch (error) {
     console.error('failed to load', url, error);
+    // Exit the build process if we are in CI
+    if (process.env.CI) {
+      throw error;
+    }
   }
 }
 
@@ -32,7 +36,7 @@ async function fetchAvatars() {
     download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
   });
 
-  await Promise.all(avatars);
+  await Promise.allSettled(avatars);
 }
 
 fetchAvatars();
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
index a810fc30f..da7621b29 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -1,6 +1,8 @@
 // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6
 
 import { writeFile } from 'node:fs/promises';
+import { knut, plainTeamMembers } from '../teamMembers.js';
+import { existsSync } from 'node:fs';
 
 const pathContributors = new URL('../contributor-names.json', import.meta.url);
 
@@ -35,7 +37,15 @@ async function fetchContributors() {
 }
 
 async function generate() {
-  const collaborators = await fetchContributors();
+  if (existsSync(pathContributors)) {
+    // Only fetch contributors once, when running locally.
+    // In CI, the file won't exist, so it'll fetch every time as expected.
+    return;
+  }
+  // Will fetch all contributors only in CI to speed up local development.
+  const collaborators = process.env.CI
+    ? await fetchContributors()
+    : [knut, ...plainTeamMembers].map((m) => m.github);
   await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8');
 }
 
diff --git a/packages/mermaid/src/docs/.vitepress/teamMembers.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
new file mode 100644
index 000000000..d95f49ed8
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
@@ -0,0 +1,105 @@
+export interface Contributor {
+  name: string;
+  avatar: string;
+}
+
+export interface SocialEntry {
+  icon: string | { svg: string };
+  link: string;
+}
+
+export interface CoreTeam {
+  name: string;
+  // required to download avatars from GitHub
+  github: string;
+  avatar?: string;
+  twitter?: string;
+  mastodon?: string;
+  sponsor?: string;
+  website?: string;
+  linkedIn?: string;
+  title?: string;
+  org?: string;
+  desc?: string;
+  links?: SocialEntry[];
+}
+
+export const knut: CoreTeam = {
+  github: 'knsv',
+  name: 'Knut Sveidqvist',
+  title: 'Creator',
+  twitter: 'knutsveidqvist',
+  sponsor: 'https://github.com/sponsors/knsv',
+};
+
+export const plainTeamMembers: CoreTeam[] = [
+  {
+    github: 'NeilCuzon',
+    name: 'Neil Cuzon',
+  },
+  {
+    github: 'tylerlong',
+    name: 'Tyler Liu',
+  },
+  {
+    github: 'sidharthv96',
+    name: 'Sidharth Vinod',
+    twitter: 'sidv42',
+    mastodon: 'https://techhub.social/@sidv',
+    sponsor: 'https://github.com/sponsors/sidharthv96',
+    linkedIn: 'sidharth-vinod',
+    website: 'https://sidharth.dev',
+  },
+  {
+    github: 'ashishjain0512',
+    name: 'Ashish Jain',
+  },
+  {
+    github: 'mmorel-35',
+    name: 'Matthieu Morel',
+    linkedIn: 'matthieumorel35',
+  },
+  {
+    github: 'aloisklink',
+    name: 'Alois Klink',
+    linkedIn: 'aloisklink',
+    website: 'https://aloisklink.com',
+  },
+  {
+    github: 'pbrolin47',
+    name: 'Per Brolin',
+  },
+  {
+    github: 'Yash-Singh1',
+    name: 'Yash Singh',
+  },
+  {
+    github: 'GDFaber',
+    name: 'Marc Faber',
+    linkedIn: 'marc-faber',
+  },
+  {
+    github: 'MindaugasLaganeckas',
+    name: 'Mindaugas Laganeckas',
+  },
+  {
+    github: 'jgreywolf',
+    name: 'Justin Greywolf',
+  },
+  {
+    github: 'IOrlandoni',
+    name: 'Nacho Orlandoni',
+  },
+  {
+    github: 'huynhicode',
+    name: 'Steph Huynh',
+  },
+  {
+    github: 'Yokozuna59',
+    name: 'Reda Al Sulais',
+  },
+  {
+    github: 'nirname',
+    name: 'Nikolay Rozhkov',
+  },
+];
diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
index 936d6f7e2..da32e5f8f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
@@ -28,7 +28,7 @@ const idRedirectMap: Record = {
   '8.6.0_docs': '',
   accessibility: 'config/theming',
   breakingchanges: '',
-  c4c: 'syntax/c4c',
+  c4c: 'syntax/c4',
   classdiagram: 'syntax/classDiagram',
   configuration: 'config/configuration',
   demos: 'ecosystem/integrations',
@@ -50,7 +50,7 @@ const idRedirectMap: Record = {
   'n00b-advanced': 'config/n00b-advanced',
   'n00b-gettingstarted': 'intro/n00b-gettingStarted',
   'n00b-overview': 'community/n00b-overview',
-  'n00b-syntaxreference': '',
+  'n00b-syntaxreference': 'intro/n00b-syntaxReference',
   newdiagram: 'community/newDiagram',
   pie: 'syntax/pie',
   plugins: '',
@@ -70,6 +70,7 @@ const idRedirectMap: Record = {
 
 const urlRedirectMap: Record = {
   '/misc/faq.html': 'configure/faq.html',
+  '/syntax/c4c.html': 'syntax/c4.html',
 };
 
 /**
diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md
index a5aa39539..35a01e589 100644
--- a/packages/mermaid/src/docs/community/development.md
+++ b/packages/mermaid/src/docs/community/development.md
@@ -64,7 +64,21 @@ pnpm test
 
 The `test` script and others are in the top-level `package.json` file.
 
-All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
+All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ "warnings"; those are ok during this step.)
+
+#### 4. Make your changes
+
+Now you are ready to make your changes!
+Edit whichever files in `src` as required.
+
+#### 5. See your changes
+
+Open  in your browser, after starting the dev server.
+There is a list of demos that can be used to see and test your changes.
+
+If you need a specific diagram, you can duplicate the `example.html` file in `/demos/dev` and add your own mermaid code to your copy.
+That will be served at .
+After making code changes, the dev server will rebuild the mermaid library. You will need to reload the browser page yourself to see the changes. (PRs for auto reload are welcome!)
 
 ### Docker
 
@@ -212,6 +226,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated to users know that things have changed and added!
+If you are adding a new feature, add `(v+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+
+eg: `# Feature Name (v+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 
diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index 75e17e4c9..7fb47dd30 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -4,7 +4,7 @@
 
 #### 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.
+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:
 
@@ -55,7 +55,7 @@ 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 diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
@@ -119,53 +119,6 @@ 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](../config/directives.md)
-
-Here is example handling from flowcharts:
-Jison:
-
-```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
 
 Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@@ -184,7 +137,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
 
-In a similar way to the directives, the jison syntax are quite similar between the diagrams.
+As a design goal, the jison syntax should be similar between the diagrams.
 
 ```jison
 
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index a072ae408..740b3509b 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -225,7 +225,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 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.
+The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html