From 16f1dccd22fc9ec7b73cf928d815795700577a14 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 23 Mar 2024 11:39:02 +0530 Subject: [PATCH] chore: Prettier --- .prettierrc.json | 3 +- .../rendering/sequencediagram.spec.js | 10 +- cypress/platform/ashish2.html | 4 +- cypress/platform/click_security_loose.html | 2 +- cypress/platform/click_security_other.html | 2 +- cypress/platform/click_security_sandbox.html | 2 +- cypress/platform/click_security_strict.html | 2 +- cypress/platform/css1.html | 2 +- cypress/platform/empty.html | 2 +- cypress/platform/interaction.html | 2 +- cypress/platform/render-after-error.html | 2 +- cypress/platform/rerender.html | 2 +- cypress/platform/subgraph.html | 2 +- cypress/platform/vertices.html | 2 +- cypress/platform/xss22.html | 2 +- demos/block.html | 2 +- demos/c4context.html | 2 +- demos/classchart.html | 2 +- demos/dataflowchart.html | 2 +- demos/er.html | 2 +- demos/error.html | 2 +- demos/flowchart-elk.html | 2 +- demos/flowchart.html | 2 +- demos/gantt.html | 2 +- demos/git.html | 2 +- demos/index.html | 2 +- demos/info.html | 2 +- demos/journey.html | 2 +- demos/mindmap.html | 2 +- demos/packet.html | 2 +- demos/pie.html | 2 +- demos/quadrantchart.html | 2 +- demos/requirements.html | 2 +- demos/sankey.html | 2 +- demos/sequence.html | 2 +- demos/state.html | 2 +- demos/timeline.html | 2 +- demos/xychart.html | 2 +- demos/zenuml.html | 2 +- docs/community/new-diagram-jison.md | 16 ++- docs/community/new-diagram.md | 16 ++- docs/config/directives.md | 56 ++++---- docs/config/faq.md | 18 +-- docs/config/math.md | 2 +- docs/config/theming.md | 10 +- docs/config/usage.md | 12 +- docs/intro/getting-started.md | 30 ++-- docs/intro/index.md | 14 +- docs/intro/syntax-reference.md | 2 +- docs/syntax/block.md | 6 +- docs/syntax/classDiagram.md | 34 +++-- docs/syntax/entityRelationshipDiagram.md | 8 +- docs/syntax/flowchart.md | 52 +++++-- docs/syntax/gantt.md | 20 ++- docs/syntax/gitgraph.md | 10 +- docs/syntax/mindmap.md | 24 ++-- docs/syntax/pie.md | 2 +- docs/syntax/quadrantChart.md | 26 ++-- docs/syntax/requirementDiagram.md | 32 +++-- docs/syntax/sequenceDiagram.md | 132 +++++++++++------- docs/syntax/stateDiagram.md | 18 ++- docs/syntax/timeline.md | 4 +- docs/syntax/xyChart.md | 32 +++-- docs/syntax/zenuml.md | 32 +++-- packages/mermaid/scripts/docs.mts | 20 +-- .../diagrams/flowchart/flowRenderer.spec.js | 82 +++++------ .../parser/quadrant.jison.spec.ts | 15 +- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 6 +- .../src/diagrams/sequence/sequenceDb.js | 8 +- .../src/diagrams/sequence/sequenceRenderer.ts | 18 ++- packages/mermaid/src/docs/config/math.md | 2 +- packages/mermaid/src/docs/config/usage.md | 2 +- .../src/docs/intro/syntax-reference.md | 2 +- packages/mermaid/src/docs/landing/index.html | 2 +- packages/mermaid/src/tests/MockedD3.ts | 18 +-- tests/webpack/public/index.html | 2 +- 76 files changed, 508 insertions(+), 366 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index 4f0588f9c..28aa6e766 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,5 +3,6 @@ "printWidth": 100, "singleQuote": true, "useTabs": false, - "tabWidth": 2 + "tabWidth": 2, + "trailingComma": "es5" } diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index a81f18a2d..1285a0832 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -810,7 +810,10 @@ context('Sequence diagram', () => { note left of Alice: config: mirrorActors=true
directive: mirrorActors=false Bob->>Alice: Short as well `, - { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } } + { + logLevel: 0, + sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' }, + } ); }); }); @@ -861,7 +864,10 @@ context('Sequence diagram', () => { a->>j: Hello John, how are you? j-->>a: Great! `, - { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } } + { + logLevel: 0, + sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' }, + } ); }); it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => { diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html index 76fbd36f7..34091d33d 100644 --- a/cypress/platform/ashish2.html +++ b/cypress/platform/ashish2.html @@ -33,7 +33,9 @@ background-image: radial-gradient(#fff 1%, transparent 11%), radial-gradient(#fff 1%, transparent 11%); background-size: 20px 20px; - background-position: 0 0, 10px 10px; + background-position: + 0 0, + 10px 10px; background-repeat: repeat; } .malware { diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html index 4cba4251d..a581eb403 100644 --- a/cypress/platform/click_security_loose.html +++ b/cypress/platform/click_security_loose.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/click_security_other.html b/cypress/platform/click_security_other.html index 7dc75ea88..11fd806ec 100644 --- a/cypress/platform/click_security_other.html +++ b/cypress/platform/click_security_other.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/click_security_sandbox.html b/cypress/platform/click_security_sandbox.html index 2e03bceeb..50e3dfb3e 100644 --- a/cypress/platform/click_security_sandbox.html +++ b/cypress/platform/click_security_sandbox.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/click_security_strict.html b/cypress/platform/click_security_strict.html index c4ac4bd68..c2a3f84cd 100644 --- a/cypress/platform/click_security_strict.html +++ b/cypress/platform/click_security_strict.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/css1.html b/cypress/platform/css1.html index 9e070da25..2853a9358 100644 --- a/cypress/platform/css1.html +++ b/cypress/platform/css1.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/empty.html b/cypress/platform/empty.html index 2961644d6..9713b4e55 100644 --- a/cypress/platform/empty.html +++ b/cypress/platform/empty.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html index a9fe7266b..c04be34a1 100644 --- a/cypress/platform/interaction.html +++ b/cypress/platform/interaction.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/render-after-error.html b/cypress/platform/render-after-error.html index 2334158c2..4347df3c1 100644 --- a/cypress/platform/render-after-error.html +++ b/cypress/platform/render-after-error.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/rerender.html b/cypress/platform/rerender.html index d9dbc4a5e..0cd5aeaac 100644 --- a/cypress/platform/rerender.html +++ b/cypress/platform/rerender.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/subgraph.html b/cypress/platform/subgraph.html index 6213fff9a..07870b327 100644 --- a/cypress/platform/subgraph.html +++ b/cypress/platform/subgraph.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/vertices.html b/cypress/platform/vertices.html index f4c045b55..ca0e9e8d3 100644 --- a/cypress/platform/vertices.html +++ b/cypress/platform/vertices.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/xss22.html b/cypress/platform/xss22.html index 50ff3b732..09d205d05 100644 --- a/cypress/platform/xss22.html +++ b/cypress/platform/xss22.html @@ -1,4 +1,4 @@ - + diff --git a/demos/block.html b/demos/block.html index 03db61fad..f0957b670 100644 --- a/demos/block.html +++ b/demos/block.html @@ -1,4 +1,4 @@ - + diff --git a/demos/c4context.html b/demos/c4context.html index f674054a2..64ca768e1 100644 --- a/demos/c4context.html +++ b/demos/c4context.html @@ -1,4 +1,4 @@ - + diff --git a/demos/classchart.html b/demos/classchart.html index 3ad8fb100..f04fa5b5f 100644 --- a/demos/classchart.html +++ b/demos/classchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html index 5fbfa29cc..dd8bca658 100644 --- a/demos/dataflowchart.html +++ b/demos/dataflowchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/er.html b/demos/er.html index 027c2e277..0b4b82bac 100644 --- a/demos/er.html +++ b/demos/er.html @@ -1,4 +1,4 @@ - + diff --git a/demos/error.html b/demos/error.html index 2d6d1b01f..aec051ac5 100644 --- a/demos/error.html +++ b/demos/error.html @@ -1,4 +1,4 @@ - + diff --git a/demos/flowchart-elk.html b/demos/flowchart-elk.html index 69ac2d2bc..7c4490511 100644 --- a/demos/flowchart-elk.html +++ b/demos/flowchart-elk.html @@ -1,4 +1,4 @@ - + diff --git a/demos/flowchart.html b/demos/flowchart.html index faf533795..9efdf3aa3 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/gantt.html b/demos/gantt.html index 9c82371ab..53ec2b681 100644 --- a/demos/gantt.html +++ b/demos/gantt.html @@ -1,4 +1,4 @@ - + diff --git a/demos/git.html b/demos/git.html index 92e0e6863..8eeb69a12 100644 --- a/demos/git.html +++ b/demos/git.html @@ -1,4 +1,4 @@ - + diff --git a/demos/index.html b/demos/index.html index a5a1a9b30..61a86a2aa 100644 --- a/demos/index.html +++ b/demos/index.html @@ -1,4 +1,4 @@ - + diff --git a/demos/info.html b/demos/info.html index affe9e59a..d19d89ede 100644 --- a/demos/info.html +++ b/demos/info.html @@ -1,4 +1,4 @@ - + diff --git a/demos/journey.html b/demos/journey.html index b0131ea3f..b46729713 100644 --- a/demos/journey.html +++ b/demos/journey.html @@ -1,4 +1,4 @@ - + diff --git a/demos/mindmap.html b/demos/mindmap.html index 2e7d47719..832af7238 100644 --- a/demos/mindmap.html +++ b/demos/mindmap.html @@ -1,4 +1,4 @@ - + diff --git a/demos/packet.html b/demos/packet.html index f332dcf8c..b66880f39 100644 --- a/demos/packet.html +++ b/demos/packet.html @@ -1,4 +1,4 @@ - + diff --git a/demos/pie.html b/demos/pie.html index 72e880c87..cd0deeb7f 100644 --- a/demos/pie.html +++ b/demos/pie.html @@ -1,4 +1,4 @@ - + diff --git a/demos/quadrantchart.html b/demos/quadrantchart.html index a2a60d0a1..7b6291742 100644 --- a/demos/quadrantchart.html +++ b/demos/quadrantchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/requirements.html b/demos/requirements.html index 2510db8dd..eca268739 100644 --- a/demos/requirements.html +++ b/demos/requirements.html @@ -1,4 +1,4 @@ - + diff --git a/demos/sankey.html b/demos/sankey.html index 22ec849c7..2439cb589 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -1,4 +1,4 @@ - + diff --git a/demos/sequence.html b/demos/sequence.html index e975486b9..abdc84f04 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -1,4 +1,4 @@ - + diff --git a/demos/state.html b/demos/state.html index 3b4c20a57..aaa8e0aa9 100644 --- a/demos/state.html +++ b/demos/state.html @@ -1,4 +1,4 @@ - + diff --git a/demos/timeline.html b/demos/timeline.html index b1b2d91b3..22ffecd97 100644 --- a/demos/timeline.html +++ b/demos/timeline.html @@ -1,4 +1,4 @@ - + diff --git a/demos/xychart.html b/demos/xychart.html index bcb28f747..25f8ec8ca 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/zenuml.html b/demos/zenuml.html index a567d38fe..3ce0ac085 100644 --- a/demos/zenuml.html +++ b/demos/zenuml.html @@ -1,4 +1,4 @@ - + diff --git a/docs/community/new-diagram-jison.md b/docs/community/new-diagram-jison.md index 40164fe8c..e1ad0f7c2 100644 --- a/docs/community/new-diagram-jison.md +++ b/docs/community/new-diagram-jison.md @@ -175,13 +175,15 @@ statement The functions for setting title and description are provided by a common module. This is the import from flowDb.js: - import { - setAccTitle, - getAccTitle, - getAccDescription, - setAccDescription, - clear as commonClear, - } from '../../commonDb'; +``` +import { + setAccTitle, + getAccTitle, + getAccDescription, + setAccDescription, + clear as commonClear, +} from '../../commonDb'; +``` The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI. diff --git a/docs/community/new-diagram.md b/docs/community/new-diagram.md index 46d7b467b..c214afa64 100644 --- a/docs/community/new-diagram.md +++ b/docs/community/new-diagram.md @@ -64,13 +64,15 @@ The syntax for accessible titles and descriptions is described in [the Accessibi The functions for setting title and description are provided by a common module. This is the import in flowDb.js: - import { - setAccTitle, - getAccTitle, - getAccDescription, - setAccDescription, - clear as commonClear, - } from '../../commonDb'; +``` +import { + setAccTitle, + getAccTitle, + getAccDescription, + setAccDescription, + clear as commonClear, +} from '../../commonDb'; +``` The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI. diff --git a/docs/config/directives.md b/docs/config/directives.md index 533126263..13a663133 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -21,17 +21,17 @@ While directives allow you to change most of the default configuration settings, Mermaid basically supports two types of configuration options to be overridden by directives. -1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: +1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: - - theme - - fontFamily - - logLevel - - securityLevel - - startOnLoad - - secure + - theme + - fontFamily + - logLevel + - securityLevel + - startOnLoad + - secure -2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. - For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. +2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. + For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. **NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. @@ -47,28 +47,34 @@ Here the structure of a directive text is like a nested key-value pair map or a The following code snippet shows the structure of a directive: - %%{ - init: { - "theme": "dark", - "fontFamily": "monospace", - "logLevel": "info", - "flowchart": { - "htmlLabels": true, - "curve": "linear" - }, - "sequence": { - "mirrorActors": true - } - } - }%% +``` +%%{ + init: { + "theme": "dark", + "fontFamily": "monospace", + "logLevel": "info", + "flowchart": { + "htmlLabels": true, + "curve": "linear" + }, + "sequence": { + "mirrorActors": true + } + } +}%% +``` You can also define the directives in a single line, like this: - %%{init: { **insert configuration options here** } }%% +``` +%%{init: { **insert configuration options here** } }%% +``` For example, the following code snippet: - %%{init: { "sequence": { "mirrorActors":false }}}%% +``` +%%{init: { "sequence": { "mirrorActors":false }}}%% +``` **Notes:** The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored. diff --git a/docs/config/faq.md b/docs/config/faq.md index 76132762a..c7ed6f210 100644 --- a/docs/config/faq.md +++ b/docs/config/faq.md @@ -6,12 +6,12 @@ # Frequently Asked Questions -1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) -2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) -3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621) -4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136) -5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372) -6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381) -7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735) -8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046) -9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897) +1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) +2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785) +3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621) +4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136) +5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372) +6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381) +7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735) +8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046) +9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897) diff --git a/docs/config/math.md b/docs/config/math.md index fcafdad81..154158508 100644 --- a/docs/config/math.md +++ b/docs/config/math.md @@ -61,7 +61,7 @@ By default, MathML is used for rendering mathematical expressions. If you have u Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)): ```html - + diff --git a/docs/config/theming.md b/docs/config/theming.md index 5abccc7e4..3045298f6 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -12,15 +12,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di ## Available Themes -1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams. +1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams. -2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed. +2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed. -3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode. +3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode. -4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green. +4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green. -5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations. +5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations. ## Site-wide Theme diff --git a/docs/config/usage.md b/docs/config/usage.md index c6510762d..d853643d3 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -73,7 +73,7 @@ Example: ## Simple full example: ```html - + 
@@ -286,11 +286,11 @@ const drawDiagram = async function () {
 };
 ```
 
-1.  The graph is generated using the render call.
-2.  After generation the render function calls the provided callback function, in this case it's called insertSvg.
-3.  The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
-4.  Insert the SVG code into the DOM for presentation.
-5.  Call the binding function that binds the events.
+1. The graph is generated using the render call.
+2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
+3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
+4. Insert the SVG code into the DOM for presentation.
+5. Call the binding function that binds the events.
 
 ## Example of a marked renderer
 
diff --git a/docs/intro/getting-started.md b/docs/intro/getting-started.md
index 73001ee07..735859644 100644
--- a/docs/intro/getting-started.md
+++ b/docs/intro/getting-started.md
@@ -8,9 +8,9 @@
 
 ## Mermaid is composed of three parts
 
-1.  Deployment
-2.  Syntax
-3.  Configuration
+1. Deployment
+2. Syntax
+3. Configuration
 
 This section talks about the different ways to **deploy** Mermaid.
 
@@ -21,11 +21,11 @@ If you are a beginner:
 
 ## Ways to use Mermaid
 
-1.  [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
-2.  [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
-3.  [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
-4.  [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
-5.  [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
+1. [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
+2. [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
+3. [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
+4. [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
+5. [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
 
 To learn more, visit the [Usage](../config/usage.md) page.
 
@@ -301,22 +301,22 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi
 
 Below are the steps for adding Mermaid as a dependency:
 
-1.  Install `node v16`
+1. Install `node v16`
 
 > **Note**
 > To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
 
-1.  Install `yarn` using `npm` with this command:
+1. Install `yarn` using `npm` with this command:
 
-    `npm install -g yarn`
+   `npm install -g yarn`
 
-2.  After yarn installs, enter this command:
+2. After yarn installs, enter this command:
 
-    `yarn add mermaid`
+   `yarn add mermaid`
 
-3.  To add Mermaid as a dev dependency, enter this command:
+3. To add Mermaid as a dev dependency, enter this command:
 
-    `yarn add --dev mermaid`
+   `yarn add --dev mermaid`
 
 ## Closing note
 
diff --git a/docs/intro/index.md b/docs/intro/index.md
index 48f07407f..fda36f1da 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -311,7 +311,9 @@ xychart-beta
 
 ### CDN
 
-    https://cdn.jsdelivr.net/npm/mermaid@/dist/
+```
+https://cdn.jsdelivr.net/npm/mermaid@/dist/
+```
 
 To select a version:
 
@@ -323,11 +325,11 @@ Latest Version: 
 
 To Deploy Mermaid:
 
-1.  You will need to install node v16, which would have npm
-2.  Install mermaid
-    - NPM: `npm i mermaid`
-    - Yarn: `yarn add mermaid`
-    - Pnpm: `pnpm add mermaid`
+1. You will need to install node v16, which would have npm
+2. Install mermaid
+   - NPM: `npm i mermaid`
+   - Yarn: `yarn add mermaid`
+   - Pnpm: `pnpm add mermaid`
 
 ### [Mermaid API](../config/setup/README.md):
 
diff --git a/docs/intro/syntax-reference.md b/docs/intro/syntax-reference.md
index f1fdf6569..00330f21d 100644
--- a/docs/intro/syntax-reference.md
+++ b/docs/intro/syntax-reference.md
@@ -51,7 +51,7 @@ One should **beware the use of some words or symbols** that can break diagrams.
 | Diagram Breakers                                                                     | Reason                                                                  | Solution                                          |
 | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
 | **Comments**                                                                         |                                                                         |                                                   |
-| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                    | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
+| [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968)                      | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
 | **Flow-Charts**                                                                      |                                                                         |                                                   |
 | 'end'                                                                                | The word "End" can cause Flowcharts and Sequence diagrams to break      | Wrap them in quotation marks to prevent breakage. |
 | [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                                | wrap them in quotation marks to prevent breaking  |
diff --git a/docs/syntax/block.md b/docs/syntax/block.md
index 35c88ef5c..df367fab1 100644
--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -636,8 +636,10 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
 
 A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
 
-    block-beta
-      A - B
+```
+block-beta
+  A - B
+```
 
 **Correction**:
 Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index eada22788..ed15922f1 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -8,7 +8,7 @@
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 >
-> \-Wikipedia
+> -Wikipedia
 
 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
 
@@ -296,7 +296,9 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 
 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
 
-    [classA][Arrow][ClassB]
+```
+[classA][Arrow][ClassB]
+```
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
@@ -369,7 +371,9 @@ classO .. classP : Link(Dashed)
 
 It is possible to add label text to a relation:
 
-    [classA][Arrow][ClassB]:LabelText
+```
+[classA][Arrow][ClassB]:LabelText
+```
 
 ```mermaid-example
 classDiagram
@@ -401,7 +405,9 @@ classDiagram
 
 Here is the syntax:
 
-    [Relation Type][Link][Relation Type]
+```
+[Relation Type][Link][Relation Type]
+```
 
 Where `Relation Type` can be one of:
 
@@ -465,7 +471,9 @@ The different cardinality options are :
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
-    [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
+```
+[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
+```
 
 ```mermaid-example
 classDiagram
@@ -618,9 +626,11 @@ It is possible to bind a click event to a node. The click can lead to either a j
 
 You would define these actions on a separate line after all classes have been declared.
 
-    action className "reference" "tooltip"
-    click className call callback() "tooltip"
-    click className href "url" "tooltip"
+```
+action className "reference" "tooltip"
+click className call callback() "tooltip"
+click className href "url" "tooltip"
+```
 
 - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
@@ -803,11 +813,15 @@ should have a different look. This is done by predefining classes in css styles
 
 Then attaching that class to a specific node:
 
-        cssClass "nodeId1" styleClass;
+```
+    cssClass "nodeId1" styleClass;
+```
 
 It is also possible to attach a class to a list of nodes in one statement:
 
-        cssClass "nodeId1,nodeId2" styleClass;
+```
+    cssClass "nodeId1,nodeId2" styleClass;
+```
 
 A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
 
diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md
index 072d90018..82fcf8d68 100644
--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/docs/syntax/entityRelationshipDiagram.md
@@ -86,7 +86,9 @@ When including attributes on ER diagrams, you must decide whether to include for
 
 Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
 
-         [  : ]
+```
+     [  : ]
+```
 
 Where:
 
@@ -97,7 +99,9 @@ Where:
 
 For example:
 
-        PROPERTY ||--|{ ROOM : contains
+```
+    PROPERTY ||--|{ ROOM : contains
+```
 
 This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
 
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index e1ea676bc..3f4e9b04a 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -642,9 +642,11 @@ Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported
 
 ## Subgraphs
 
-    subgraph title
-        graph definition
-    end
+```
+subgraph title
+    graph definition
+end
+```
 
 An example below:
 
@@ -857,8 +859,10 @@ It is possible to bind a click event to a node, the click can lead to either a j
 > **Note**
 > This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
-    click nodeId callback
-    click nodeId call callback()
+```
+click nodeId callback
+click nodeId call callback()
+```
 
 - nodeId is the id of the node
 - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
@@ -981,11 +985,15 @@ have no ids in the same way as nodes, some other way of deciding what style the
 Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.
 In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
 
-    linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
+```
+linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
+```
 
 It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
 
-    linkStyle 1,2,7 color:blue;
+```
+linkStyle 1,2,7 color:blue;
+```
 
 ### Styling line curves
 
@@ -995,8 +1003,10 @@ Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRo
 
 In this example, a left-to-right graph uses the `stepBefore` curve style:
 
-    %%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
-    graph LR
+```
+%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
+graph LR
+```
 
 For a full list of available curves, including an explanation of custom curves, refer to
 the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
@@ -1027,19 +1037,27 @@ should have a different look.
 
 A class definition looks like the example below:
 
-        classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
+    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
 
 Also, it is possible to define style to multiple classes in one statement:
 
-        classDef firstClassName,secondClassName font-size:12pt;
+```
+    classDef firstClassName,secondClassName font-size:12pt;
+```
 
 Attachment of a class to a node is done as per below:
 
-        class nodeId1 className;
+```
+    class nodeId1 className;
+```
 
 It is also possible to attach a class to a list of nodes in one statement:
 
-        class nodeId1,nodeId2 className;
+```
+    class nodeId1,nodeId2 className;
+```
 
 A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
 
@@ -1110,7 +1128,9 @@ flowchart LR
 
 If a class is named default it will be assigned to all classes without specific class definitions.
 
-        classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
+    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
 
 ## Basic support for fontawesome
 
@@ -1183,7 +1203,9 @@ Starting with Mermaid version 9.4, you can use an alternate renderer named elk.
 The _elk_ renderer is an experimental feature.
 You can change the renderer to elk by adding this directive:
 
-    %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+```
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+```
 
 > **Note**
 > Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index dddb67cad..31bac5e29 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -120,9 +120,9 @@ A colon, `:`, separates the task title from its metadata.
 Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
 After processing the tags, the remaining metadata items are interpreted as follows:
 
-1.  If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
-2.  If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after  [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
-3.  If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
+1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after  [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
 
 | Metadata syntax                                      | Start date                                          | End date                                              | ID       |
 | ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |
@@ -468,11 +468,15 @@ Styling of the Gantt diagram is done by defining a number of CSS classes. During
 
 You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.
 
-    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
+```
+todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
+```
 
 To hide the marker, set `todayMarker` to `off`.
 
-    todayMarker off
+```
+todayMarker off
+```
 
 ## Configuration
 
@@ -514,8 +518,10 @@ mermaid.ganttConfig = {
 
 It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
-    click taskId call callback(arguments)
-    click taskId href URL
+```
+click taskId call callback(arguments)
+click taskId href URL
+```
 
 - taskId is the id of the task
 - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 099d90e5e..66109335e 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -363,11 +363,11 @@ Here, a new commit representing the cherry-pick is created on the current branch
 
 A few important rules to note here are:
 
-1.  You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
-2.  The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
-3.  Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
-4.  When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
-5.  The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
+1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
+2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
+3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
+5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
 
 Let see an example:
 
diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index 7a366f59d..dfdcdbdac 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -60,11 +60,13 @@ The syntax for creating Mindmaps is simple and relies on indentation for setting
 
 In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.
 
-    mindmap
-        Root
-            A
-                B
-                C
+```
+mindmap
+    Root
+        A
+            B
+            C
+```
 
 In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
 
@@ -230,11 +232,13 @@ _These classes need to be supplied by the site administrator._
 
 The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
 
-    mindmap
-        Root
-            A
-                B
-              C
+```
+mindmap
+    Root
+        A
+            B
+          C
+```
 
 This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
 
diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
index 8b1de3856..2a47f18d4 100644
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -7,7 +7,7 @@
 # Pie chart diagrams
 
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-> \-Wikipedia
+> -Wikipedia
 
 Mermaid can render Pie Chart diagrams.
 
diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md
index 9f22fd575..fdf866779 100644
--- a/docs/syntax/quadrantChart.md
+++ b/docs/syntax/quadrantChart.md
@@ -59,8 +59,10 @@ The title is a short description of the chart and it will always render on top o
 
 #### Example
 
-    quadrantChart
-        title This is a sample example
+```
+quadrantChart
+    title This is a sample example
+```
 
 ### x-axis
 
@@ -68,8 +70,8 @@ The x-axis determines what text would be displayed in the x-axis. In x-axis ther
 
 #### Example
 
-1.  `x-axis  --> ` both the left and right axis text will be rendered.
-2.  `x-axis ` only the left axis text will be rendered.
+1. `x-axis  --> ` both the left and right axis text will be rendered.
+2. `x-axis ` only the left axis text will be rendered.
 
 ### y-axis
 
@@ -77,8 +79,8 @@ The y-axis determines what text would be displayed in the y-axis. In y-axis ther
 
 #### Example
 
-1.  `y-axis  --> ` both the bottom and top axis text will be rendered.
-2.  `y-axis ` only the bottom axis text will be rendered.
+1. `y-axis  --> ` both the bottom and top axis text will be rendered.
+2. `y-axis ` only the bottom axis text will be rendered.
 
 ### Quadrants text
 
@@ -86,10 +88,10 @@ The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadr
 
 #### Example
 
-1.  `quadrant-1 ` determine what text will be rendered inside the top right quadrant.
-2.  `quadrant-2 ` determine what text will be rendered inside the top left quadrant.
-3.  `quadrant-3 ` determine what text will be rendered inside the bottom left quadrant.
-4.  `quadrant-4 ` determine what text will be rendered inside the bottom right quadrant.
+1. `quadrant-1 ` determine what text will be rendered inside the top right quadrant.
+2. `quadrant-2 ` determine what text will be rendered inside the top left quadrant.
+3. `quadrant-3 ` determine what text will be rendered inside the bottom left quadrant.
+4. `quadrant-4 ` determine what text will be rendered inside the bottom right quadrant.
 
 ### Points
 
@@ -97,8 +99,8 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `
 
 #### Example
 
-1.  `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
-2.  `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
+1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
+2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
 
 ## Chart Configurations
 
diff --git a/docs/syntax/requirementDiagram.md b/docs/syntax/requirementDiagram.md
index 49476f7c0..01fdf1944 100644
--- a/docs/syntax/requirementDiagram.md
+++ b/docs/syntax/requirementDiagram.md
@@ -56,12 +56,14 @@ An important note on user text: all input can be surrounded in quotes or not. Fo
 
 A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
 
-     user_defined_name {
-        id: user_defined_id
-        text: user_defined text
-        risk: 
-        verifymethod: 
-    }
+```
+ user_defined_name {
+    id: user_defined_id
+    text: user_defined text
+    risk: 
+    verifymethod: 
+}
+```
 
 Type, risk, and method are enumerations defined in SysML.
 
@@ -75,10 +77,12 @@ Type, risk, and method are enumerations defined in SysML.
 
 An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
 
-    element user_defined_name {
-        type: user_defined_type
-        docref: user_defined_ref
-    }
+```
+element user_defined_name {
+    type: user_defined_type
+    docref: user_defined_ref
+}
+```
 
 ### Relationship
 
@@ -86,11 +90,15 @@ Relationships are comprised of a source node, destination node, and relationship
 
 Each follows the definition format of
 
-    {name of source} -  -> {name of destination}
+```
+{name of source} -  -> {name of destination}
+```
 
 or
 
-    {name of destination} <-  - {name of source}
+```
+{name of destination} <-  - {name of source}
+```
 
 "name of source" and "name of destination" should be names of requirement or element nodes defined elsewhere.
 
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 57b7d4f81..a8455964e 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -98,8 +98,10 @@ sequenceDiagram
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
 
-    create participant B
-    A --> B: Hello
+```
+create participant B
+A --> B: Hello
+```
 
 Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
 
@@ -143,22 +145,26 @@ And fixing diagram code does not get rid of this error and rendering of all othe
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
 
-    box Aqua Group Description
-    ... actors ...
-    end
-    box Group without description
-    ... actors ...
-    end
-    box rgb(33,66,99)
-    ... actors ...
-    end
+```
+box Aqua Group Description
+... actors ...
+end
+box Group without description
+... actors ...
+end
+box rgb(33,66,99)
+... actors ...
+end
+```
 
 > **Note**
 > If your group name is a color you can force the color to be transparent:
 
-    box transparent Aqua
-    ... actors ...
-    end
+```
+box transparent Aqua
+... actors ...
+end
+```
 
 ```mermaid-example
     sequenceDiagram
@@ -196,7 +202,9 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
 
 Messages can be of two displayed either solid or with a dotted line.
 
-    [Actor][Arrow][Actor]:Message text
+```
+[Actor][Arrow][Actor]:Message text
+```
 
 There are six types of arrows currently supported:
 
@@ -314,9 +322,11 @@ sequenceDiagram
 
 It is possible to express loops in a sequence diagram. This is done by the notation
 
-    loop Loop text
-    ... statements ...
-    end
+```
+loop Loop text
+... statements ...
+end
+```
 
 See the example below:
 
@@ -340,17 +350,21 @@ sequenceDiagram
 
 It is possible to express alternative paths in a sequence diagram. This is done by the notation
 
-    alt Describing text
-    ... statements ...
-    else
-    ... statements ...
-    end
+```
+alt Describing text
+... statements ...
+else
+... statements ...
+end
+```
 
 or if there is sequence that is optional (if without else).
 
-    opt Describing text
-    ... statements ...
-    end
+```
+opt Describing text
+... statements ...
+end
+```
 
 See the example below:
 
@@ -386,13 +400,15 @@ It is possible to show actions that are happening in parallel.
 
 This is done by the notation
 
-    par [Action 1]
-    ... statements ...
-    and [Action 2]
-    ... statements ...
-    and [Action N]
-    ... statements ...
-    end
+```
+par [Action 1]
+... statements ...
+and [Action 2]
+... statements ...
+and [Action N]
+... statements ...
+end
+```
 
 See the example below:
 
@@ -454,13 +470,15 @@ It is possible to show actions that must happen automatically with conditional h
 
 This is done by the notation
 
-    critical [Action that must be performed]
-    ... statements ...
-    option [Circumstance A]
-    ... statements ...
-    option [Circumstance B]
-    ... statements ...
-    end
+```
+critical [Action that must be performed]
+... statements ...
+option [Circumstance A]
+... statements ...
+option [Circumstance B]
+... statements ...
+end
+```
 
 See the example below:
 
@@ -510,9 +528,11 @@ It is possible to indicate a stop of the sequence within the flow (usually used
 
 This is done by the notation
 
-    break [something happened]
-    ... statements ...
-    end
+```
+break [something happened]
+... statements ...
+end
+```
 
 See the example below:
 
@@ -542,15 +562,17 @@ It is possible to highlight flows by providing colored background rects. This is
 
 The colors are defined using rgb and rgba syntax.
 
-    rect rgb(0, 255, 0)
-    ... content ...
-    end
+```
+rect rgb(0, 255, 0)
+... content ...
+end
+```
 
-
-
-    rect rgba(0, 0, 255, .1)
-    ... content ...
-    end
+```
+rect rgba(0, 0, 255, .1)
+... content ...
+end
+```
 
 See the examples below:
 
@@ -674,7 +696,9 @@ Actors can have popup-menus containing individualized links to external pages. F
 
 This can be configured by adding one or more link lines with the format:
 
-    link :  @ 
+```
+link :  @ 
+```
 
 ```mermaid-example
 sequenceDiagram
@@ -708,7 +732,9 @@ There is an advanced syntax that relies on JSON formatting. If you are comfortab
 
 This can be configured by adding the links lines with the format:
 
-    links : 
+```
+links : 
+```
 
 An example is below:
 
diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index 48dd4378d..7c40a5d2f 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -454,8 +454,8 @@ state or states in the diagram.
 
 **These are the current limitations with state diagram classDefs:**
 
-1.  Cannot be applied to start or end states
-2.  Cannot be applied to or within composite states
+1. Cannot be applied to start or end states
+2. Cannot be applied to or within composite states
 
 _These are in development and will be available in a future version._
 
@@ -467,7 +467,9 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-        classDef movement font-style:italic;
+```
+    classDef movement font-style:italic;
+```
 
 where
 
@@ -478,7 +480,9 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-        classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
+    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```
 
 where
 
@@ -493,9 +497,9 @@ where
 
 There are two ways to apply a `classDef` style to a state:
 
-1.  use the `class` keyword to apply a classDef style to one or more states in a single statement, or
-2.  use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
-    to/from another state)
+1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
+2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
+   to/from another state)
 
 #### 1. `class` statement
 
diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 416477202..3d476c41d 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -191,7 +191,7 @@ As explained earlier, each section has a color scheme, and each time period and
 
 However, if there is no section defined, then we have two possibilities:
 
-1.  Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
+1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
 
 ```mermaid-example
     timeline
@@ -215,7 +215,7 @@ However, if there is no section defined, then we have two possibilities:
 
 **NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
 
-2.  Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
+2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
 You will need to add this option either via mermaid.initialize function or directives.
 
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 07e8ec6a4..7197b984d 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -39,8 +39,10 @@ xychart-beta
 
 The chart can be drawn horizontal or vertical, default value is vertical.
 
-    xychart-beta horizontal
-    ...
+```
+xychart-beta horizontal
+...
+```
 
 ### Title
 
@@ -48,9 +50,11 @@ The title is a short description of the chart and it will always render on top o
 
 #### Example
 
-    xychart-beta
-        title "This is a simple example"
-        ...
+```
+xychart-beta
+    title "This is a simple example"
+    ...
+```
 
 > **Note**
 > If the title is a single word one no need to use `"`, but if it has space `"` is needed
@@ -61,8 +65,8 @@ The x-axis primarily serves as a categorical value, although it can also functio
 
 #### Example
 
-1.  `x-axis title min --> max` x-axis will function as numeric with the given range
-2.  `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
+1. `x-axis title min --> max` x-axis will function as numeric with the given range
+2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
 
 ### y-axis
 
@@ -70,8 +74,8 @@ The y-axis is employed to represent numerical range values, it cannot have categ
 
 #### Example
 
-1.  `y-axis title min --> max`
-2.  `y-axis title` it will only add the title, the range will be auto generated from data.
+1. `y-axis title min --> max`
+2. `y-axis title` it will only add the title, the range will be auto generated from data.
 
 > **Note**
 > Both x and y axis are optional if not provided we will try to create the range
@@ -82,7 +86,7 @@ A line chart offers the capability to graphically depict lines.
 
 #### Example
 
-1.  `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
 
 ### Bar chart
 
@@ -90,14 +94,16 @@ A bar chart offers the capability to graphically depict bars.
 
 #### Example
 
-1.  `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
 
 #### Simplest example
 
 The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
 
-    xychart-beta
-        line [+1.3, .6, 2.4, -.34]
+```
+xychart-beta
+    line [+1.3, .6, 2.4, -.34]
+```
 
 ## Chart Configurations
 
diff --git a/docs/syntax/zenuml.md b/docs/syntax/zenuml.md
index 9e9b11255..6df13fd1d 100644
--- a/docs/syntax/zenuml.md
+++ b/docs/syntax/zenuml.md
@@ -105,10 +105,10 @@ zenuml
 
 Messages can be one of:
 
-1.  Sync message
-2.  Async message
-3.  Creation message
-4.  Reply message
+1. Sync message
+2. Async message
+3. Creation message
+4. Reply message
 
 ### Sync message
 
@@ -290,10 +290,10 @@ zenuml
 It is possible to express loops in a ZenUML diagram. This is done by any of the
 following notations:
 
-1.  while
-2.  for
-3.  forEach, foreach
-4.  loop
+1. while
+2. for
+3. forEach, foreach
+4. loop
 
 ```zenuml
 while(condition) {
@@ -423,13 +423,15 @@ It is possible to indicate a stop of the sequence within the flow (usually used
 
 This is done by the notation
 
-    try {
-      ...statements...
-    } catch {
-      ...statements...
-    } finally {
-      ...statements...
-    }
+```
+try {
+  ...statements...
+} catch {
+  ...statements...
+} finally {
+  ...statements...
+}
+```
 
 See the example below:
 
diff --git a/packages/mermaid/scripts/docs.mts b/packages/mermaid/scripts/docs.mts
index 31d2a7c8f..1bc944ee8 100644
--- a/packages/mermaid/scripts/docs.mts
+++ b/packages/mermaid/scripts/docs.mts
@@ -85,7 +85,7 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
 
 const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
 
-const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
+const prettierConfig = (await prettier.resolveConfig('.')) ?? {};
 // From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21
 const includesRE = //g;
 const includedFiles: Set = new Set();
@@ -326,7 +326,7 @@ export function transformMarkdownAst({
  *
  * @param file {string} name of the file that will be verified
  */
-const transformMarkdown = (file: string) => {
+const transformMarkdown = async (file: string) => {
   const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file)));
 
   let transformed = remark()
@@ -347,7 +347,7 @@ const transformMarkdown = (file: string) => {
     transformed = doc;
   }
 
-  const formatted = prettier.format(transformed, {
+  const formatted = await prettier.format(transformed, {
     parser: 'markdown',
     ...prettierConfig,
   });
@@ -454,7 +454,7 @@ async function transformJsonSchema(file: string) {
 
     const transformed = transformer.stringify(await transformer.run(markdownAst as Root));
 
-    const formatted = prettier.format(transformed, {
+    const formatted = await prettier.format(transformed, {
       parser: 'markdown',
       ...prettierConfig,
     });
@@ -472,7 +472,7 @@ async function transformJsonSchema(file: string) {
  *
  * @param filename {string} name of the HTML file to transform
  */
-const transformHtml = (filename: string) => {
+const transformHtml = async (filename: string) => {
   /**
    * Insert the '...auto generated...' comment into an HTML file after the element
    *
@@ -496,7 +496,7 @@ const transformHtml = (filename: string) => {
   };
 
   const transformedHTML = insertAutoGeneratedComment(filename);
-  const formattedHTML = prettier.format(transformedHTML, {
+  const formattedHTML = await prettier.format(transformedHTML, {
     parser: 'html',
     ...prettierConfig,
   });
@@ -541,7 +541,7 @@ export const processDocs = async () => {
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   console.log(`${action} ${mdFiles.length} markdown files...`);
-  mdFiles.forEach(transformMarkdown);
+  await Promise.all(mdFiles.map(transformMarkdown));
 
   for (const includedFile of includedFiles) {
     rmSync(includedFile, { force: true });
@@ -552,7 +552,7 @@ export const processDocs = async () => {
   const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
   const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
   console.log(`${action} ${htmlFiles.length} html files...`);
-  htmlFiles.forEach(transformHtml);
+  await Promise.all(htmlFiles.map(transformHtml));
 
   const otherFileGlobs = getGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
   const otherFiles = await getFilesFromGlobs(otherFileGlobs);
@@ -591,9 +591,9 @@ export const processDocs = async () => {
           return;
         }
         if (isMd(path)) {
-          transformMarkdown(path);
+          void transformMarkdown(path);
         } else if (isHtml(path)) {
-          transformHtml(path);
+          void transformHtml(path);
         } else if (isOther(path)) {
           copyTransformedContents(path, true);
         }
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
index 68e13a305..bdf778b54 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.spec.js
@@ -67,49 +67,49 @@ describe('the flowchart renderer', function () {
       });
     });
 
-    ['Multi
Line', 'Multi
Line', 'Multi
Line', 'MultiLine'].forEach(function (
-      labelText
-    ) {
-      it('should handle multiline texts with different line breaks', async function () {
-        const addedNodes = [];
-        const fakeDiag = {
-          db: {
-            lookUpDomId: () => {
-              return 'my-node-id';
+    ['Multi
Line', 'Multi
Line', 'Multi
Line', 'MultiLine'].forEach(
+      function (labelText) {
+        it('should handle multiline texts with different line breaks', async function () {
+          const addedNodes = [];
+          const fakeDiag = {
+            db: {
+              lookUpDomId: () => {
+                return 'my-node-id';
+              },
             },
-          },
-        };
-        const mockG = {
-          setNode: function (id, object) {
-            addedNodes.push([id, object]);
-          },
-        };
-        await addVertices(
-          {
-            v1: {
-              type: 'rect',
-              id: 'my-node-id',
-              classes: [],
-              styles: [],
-              text: 'Multi
Line',
+          };
+          const mockG = {
+            setNode: function (id, object) {
+              addedNodes.push([id, object]);
             },
-          },
-          mockG,
-          'svg-id',
-          false,
-          document,
-          fakeDiag
-        );
-        expect(addedNodes).toHaveLength(1);
-        expect(addedNodes[0][0]).toEqual('my-node-id');
-        expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id');
-        expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg');
-        expect(addedNodes[0][1].label).toBeDefined();
-        expect(addedNodes[0][1].label).toBeDefined(); //  node
-        expect(addedNodes[0][1].label.firstChild.innerHTML).toEqual('Multi'); //  node, line 1
-        expect(addedNodes[0][1].label.lastChild.innerHTML).toEqual('Line'); //  node, line 2
-      });
-    });
+          };
+          await addVertices(
+            {
+              v1: {
+                type: 'rect',
+                id: 'my-node-id',
+                classes: [],
+                styles: [],
+                text: 'Multi
Line',
+              },
+            },
+            mockG,
+            'svg-id',
+            false,
+            document,
+            fakeDiag
+          );
+          expect(addedNodes).toHaveLength(1);
+          expect(addedNodes[0][0]).toEqual('my-node-id');
+          expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id');
+          expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg');
+          expect(addedNodes[0][1].label).toBeDefined();
+          expect(addedNodes[0][1].label).toBeDefined(); //  node
+          expect(addedNodes[0][1].label.firstChild.innerHTML).toEqual('Multi'); //  node, line 1
+          expect(addedNodes[0][1].label.lastChild.innerHTML).toEqual('Line'); //  node, line 2
+        });
+      }
+    );
 
     [
       [['fill:#fff'], 'fill:#fff;', ''],
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 d10cb2134..c09e22228 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
@@ -98,7 +98,10 @@ describe('Testing quadrantChart jison file', () => {
     str =
       'quadrantChart\n       Y-AxIs         "Urgent(* +=[❤"     -->        "Not Urgent (* +=[❤"\n    ';
     expect(parserFnConstructor(str)).not.toThrow();
-    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({ text: 'Urgent(* +=[❤', type: 'text' });
+    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
+      text: 'Urgent(* +=[❤',
+      type: 'text',
+    });
     expect(mockDB.setYAxisTopText).toHaveBeenCalledWith({
       text: 'Not Urgent (* +=[❤',
       type: 'text',
@@ -107,7 +110,10 @@ describe('Testing quadrantChart jison file', () => {
     clearMocks();
     str = 'quadrantChart\n       y-AxIs         "Urgent(* +=[❤"';
     expect(parserFnConstructor(str)).not.toThrow();
-    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({ text: 'Urgent(* +=[❤', type: 'text' });
+    expect(mockDB.setYAxisBottomText).toHaveBeenCalledWith({
+      text: 'Urgent(* +=[❤',
+      type: 'text',
+    });
     expect(mockDB.setYAxisTopText).not.toHaveBeenCalled();
 
     clearMocks();
@@ -165,7 +171,10 @@ describe('Testing quadrantChart jison file', () => {
     clearMocks();
     str = 'QuadRantChart   \n     QuaDrant-3 "Deligate(* +=[❤"';
     expect(parserFnConstructor(str)).not.toThrow();
-    expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({ text: 'Deligate(* +=[❤', type: 'text' });
+    expect(mockDB.setQuadrant3Text).toHaveBeenCalledWith({
+      text: 'Deligate(* +=[❤',
+      type: 'text',
+    });
   });
 
   it('should be able to parse quadrant4 text', () => {
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index d6fd90373..4826dc6d9 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -25,7 +25,11 @@ const clear = (): void => {
 };
 
 class SankeyLink {
-  constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {}
+  constructor(
+    public source: SankeyNode,
+    public target: SankeyNode,
+    public value: number = 0
+  ) {}
 }
 
 /**
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index ea2c74284..4ff198227 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -221,8 +221,8 @@ export const parseMessage = function (str) {
       _str.match(/^:?wrap:/) !== null
         ? true
         : _str.match(/^:?nowrap:/) !== null
-        ? false
-        : undefined,
+          ? false
+          : undefined,
   };
   log.debug('parseMessage:', message);
   return message;
@@ -262,8 +262,8 @@ export const parseBoxData = function (str) {
         ? title.match(/^:?wrap:/) !== null
           ? true
           : title.match(/^:?nowrap:/) !== null
-          ? false
-          : undefined
+            ? false
+            : undefined
         : undefined,
   };
 };
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 98a14aac7..98fdcddc4 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -627,12 +627,18 @@ const activationBounds = function (actor, actors) {
   const actorObj = actors[actor];
   const activations = actorActivations(actor);
 
-  const left = activations.reduce(function (acc, activation) {
-    return common.getMin(acc, activation.startx);
-  }, actorObj.x + actorObj.width / 2 - 1);
-  const right = activations.reduce(function (acc, activation) {
-    return common.getMax(acc, activation.stopx);
-  }, actorObj.x + actorObj.width / 2 + 1);
+  const left = activations.reduce(
+    function (acc, activation) {
+      return common.getMin(acc, activation.startx);
+    },
+    actorObj.x + actorObj.width / 2 - 1
+  );
+  const right = activations.reduce(
+    function (acc, activation) {
+      return common.getMax(acc, activation.stopx);
+    },
+    actorObj.x + actorObj.width / 2 + 1
+  );
   return [left, right];
 };
 
diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md
index 67d82cb20..22b398e08 100644
--- a/packages/mermaid/src/docs/config/math.md
+++ b/packages/mermaid/src/docs/config/math.md
@@ -37,7 +37,7 @@ By default, MathML is used for rendering mathematical expressions. If you have u
 Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
 
 ```html
-
+
 
 
   
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index d8b639126..eec87e49f 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -67,7 +67,7 @@ Example:
 ## Simple full example:
 
 ```html
-
+
 
   
     
diff --git a/packages/mermaid/src/docs/intro/syntax-reference.md b/packages/mermaid/src/docs/intro/syntax-reference.md
index b7b78781c..d4ee1067f 100644
--- a/packages/mermaid/src/docs/intro/syntax-reference.md
+++ b/packages/mermaid/src/docs/intro/syntax-reference.md
@@ -33,7 +33,7 @@ One should **beware the use of some words or symbols** that can break diagrams.
 | Diagram Breakers                                                                     | Reason                                                                  | Solution                                          |
 | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
 | **Comments**                                                                         |                                                                         |                                                   |
-| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                    | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
+| [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968)                      | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
 | **Flow-Charts**                                                                      |                                                                         |                                                   |
 | 'end'                                                                                | The word "End" can cause Flowcharts and Sequence diagrams to break      | Wrap them in quotation marks to prevent breakage. |
 | [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                                | wrap them in quotation marks to prevent breaking  |
diff --git a/packages/mermaid/src/docs/landing/index.html b/packages/mermaid/src/docs/landing/index.html
index 7b256f47f..b5a18b453 100644
--- a/packages/mermaid/src/docs/landing/index.html
+++ b/packages/mermaid/src/docs/landing/index.html
@@ -1,4 +1,4 @@
-
+
 
   
     
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index c5e080ba3..2f00e4924 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -39,14 +39,16 @@ export class MockedD3 {
     return this.select(select_str);
   });
 
-  append = vi
-    .fn()
-    .mockImplementation(function (this: MockedD3, type: string, id = '' + '-appended'): MockedD3 {
-      const newMock = new MockedD3(id);
-      newMock.attribs.set('type', type);
-      this._children.push(newMock);
-      return newMock;
-    });
+  append = vi.fn().mockImplementation(function (
+    this: MockedD3,
+    type: string,
+    id = '' + '-appended'
+  ): MockedD3 {
+    const newMock = new MockedD3(id);
+    newMock.attribs.set('type', type);
+    this._children.push(newMock);
+    return newMock;
+  });
 
   // NOTE: The d3 implementation allows for a selector ('beforeSelector' arg below).
   //   With this mocked implementation, we assume it will always refer to an node id
diff --git a/tests/webpack/public/index.html b/tests/webpack/public/index.html
index cf0e7da9f..40b3b387c 100644
--- a/tests/webpack/public/index.html
+++ b/tests/webpack/public/index.html
@@ -1,4 +1,4 @@
-
+