diff --git a/.eslintrc.json b/.eslintrc.json
index 8bf674047..902db3175 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -49,7 +49,16 @@
       }
     ],
     "json/*": ["error", "allowComments"],
-    "no-empty": ["error", { "allowEmptyCatch": true }]
+    "no-empty": ["error", { "allowEmptyCatch": true }],
+    "@cspell/spellchecker": [
+      "warn",
+      {
+        "checkIdentifiers": false,
+        "checkStrings": false,
+        "checkStringTemplates": false,
+        "customWordListFile": { "path": "./myWords.txt" }
+      }
+    ]
   },
   "overrides": [
     {
diff --git a/myWords.txt b/myWords.txt
new file mode 100644
index 000000000..1ae2e945e
--- /dev/null
+++ b/myWords.txt
@@ -0,0 +1,14 @@
+customizability
+Gantt
+jison
+knsv
+Knut
+mindmap
+Mindmaps
+mitigations
+sandboxed
+Sveidqvist
+verdana
+Visio
+vitepress
+colour
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 75368c557..1c218a870 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -47,7 +47,7 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id, _version, diagObj) {
   conf = getConfig().state;
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index e3ebb839c..2eaa9e020 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -54,7 +54,7 @@ export const draw = function (text, id, version, diagObj) {
   diagObj.parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
index f655b9c3a..a8c59a939 100644
--- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js
+++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
@@ -218,7 +218,7 @@ export const drawSection = function (elem, section, conf) {
 
 let taskCount = -1;
 /**
- * Draws an actor in the diagram with the attaced line
+ * Draws an actor in the diagram with the attached line
  *
  * @param {any} elem The HTML element
  * @param {any} task The task to render
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index f9544ee44..bac2a2065 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -110,7 +110,7 @@ export const decodeEntities = function (text: string): string {
  * @param {string} id The id of the element to be rendered
  * @param {string} text The graph definition
  * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
- *   is called after rendering is finished with the svg code as inparam.
+ *   is called after rendering is finished with the svg code as param.
  * @param {Element} container Selector to element in which a div with the graph temporarily will be
  *   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
@@ -152,7 +152,7 @@ const render = async function (
     }
 
     if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
+      // IF we are in sandboxed mode, we do everything mermaid related
       // in a sandboxed div
       const iframe = select(container)
         .append('iframe')
@@ -201,7 +201,7 @@ const render = async function (
     // d+id it will contain a svg with the id "id"
 
     if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
+      // IF we are in sandboxed mode, we do everything mermaid related
       // in a sandboxed div
       const iframe = select('body')
         .append('iframe')
@@ -250,7 +250,7 @@ const render = async function (
   let userStyles = '';
   // user provided theme CSS
   // If you add more configuration driven data into the user styles make sure that the value is
-  // sanitized bye the santiizeCSS function
+  // sanitized bye the sanitizeCSS function
   if (cnf.themeCSS !== undefined) {
     userStyles += `\n${cnf.themeCSS}`;
   }
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 8ffdab5e7..6ec7f564b 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -1,7 +1,7 @@
 import { log } from './logger';
 
 /**
- * Applys d3 attributes
+ * Applies d3 attributes
  *
  * @param {any} d3Elem D3 Element to apply the attributes onto
  * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 0172df81b..c940a0055 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -126,7 +126,7 @@ class Theme {
     this.specialStateColor = this.lineColor;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 707c342ef..5ba63e155 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -173,7 +173,7 @@ class Theme {
     this.cScale12 = this.cScale12 || '#010029';
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 54f0ad8a2..1cd2f505c 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -121,7 +121,7 @@ class Theme {
   }
   updateColors() {
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index ee086ad10..bacdd5bd0 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -94,7 +94,7 @@ class Theme {
     this.errorTextColor = '#552222';
   }
   updateColors() {
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 7747a00dd..f22710387 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -110,7 +110,7 @@ class Theme {
     this.border2 = this.contrast;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
 
     this.cScale0 = this.cScale0 || '#555';
     this.cScale1 = this.cScale1 || '#F4F4F4';
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 395e6fe2a..eecda41e9 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -109,7 +109,7 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
  *
  *   ```mermaid
  *   graph LR
- *    %%{somedirective}%%
+ *    %%{someDirective}%%
  *    a-->b
  *    b-->c
  *    c-->d
@@ -215,7 +215,7 @@ export const formatUrl = (linkStr, config) => {
 /**
  * Runs a function
  *
- * @param {string} functionName A dot seperated path to the function relative to the `window`
+ * @param {string} functionName A dot separated path to the function relative to the `window`
  * @param {...any} params Parameters to pass to the function
  */
 export const runFunc = (functionName, ...params) => {