From ca909edbed557db93436b67001821829ef4849aa Mon Sep 17 00:00:00 2001
From: yutotnh <57719497+yutotnh@users.noreply.github.com>
Date: Wed, 22 Jun 2022 12:39:10 +0900
Subject: [PATCH] fix: Typo for documents and comments

---
 README.md                                       | 2 +-
 docs/Setup.md                                   | 2 +-
 docs/c4c.md                                     | 2 +-
 docs/gitgraph.md                                | 6 +++---
 docs/newDiagram.md                              | 6 +++---
 src/dagre-wrapper/GraphObjects.md               | 4 ++--
 src/dagre-wrapper/clusters.js                   | 2 +-
 src/dagre-wrapper/edges.js                      | 4 ++--
 src/dagre-wrapper/index.js                      | 4 ++--
 src/dagre-wrapper/markers.js                    | 2 +-
 src/dagre-wrapper/mermaid-graphlib.js           | 4 ++--
 src/dagre-wrapper/nodes.js                      | 2 +-
 src/dagre-wrapper/patterns.js                   | 2 +-
 src/diagrams/c4/c4Renderer.js                   | 2 +-
 src/diagrams/c4/svgDraw.js                      | 2 +-
 src/diagrams/class/classRenderer-v2.js          | 4 ++--
 src/diagrams/class/classRenderer.js             | 2 +-
 src/diagrams/er/erRenderer.js                   | 4 ++--
 src/diagrams/flowchart/flowDb.js                | 2 +-
 src/diagrams/gantt/ganttRenderer.js             | 2 +-
 src/diagrams/git/gitGraphRenderer.js            | 6 +++---
 src/diagrams/info/infoRenderer.js               | 2 +-
 src/diagrams/pie/pieRenderer.js                 | 2 +-
 src/diagrams/requirement/requirementRenderer.js | 2 +-
 src/diagrams/sequence/sequenceRenderer.js       | 2 +-
 src/diagrams/state/shapes.js                    | 2 +-
 src/diagrams/state/stateRenderer.js             | 2 +-
 src/diagrams/user-journey/journeyRenderer.js    | 2 +-
 src/themes/theme-base.js                        | 6 +++---
 29 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index 5c2eefa8c..52c0f0367 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ English | [简体中文](./README.zh-CN.md)
 ## About
 
 <!-- <Main description>   -->
-Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.  The main purpose of Mermaid is to help documentation catch up with development.
 
 > Doc-Rot is a Catch-22 that Mermaid helps to solve.
 
diff --git a/docs/Setup.md b/docs/Setup.md
index 7ef31381e..65e8ef771 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -118,7 +118,7 @@ Default value: ['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 behaviour.
+deterministic. This is the default behavior.
 
 **Notes**:
 
diff --git a/docs/c4c.md b/docs/c4c.md
index 9d1f1ec6f..86c275a06 100644
--- a/docs/c4c.md
+++ b/docs/c4c.md
@@ -5,7 +5,7 @@
 
 
 
-Mermaid's c4 diagram sytax is compatible with plantUML. See example below:
+Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
 
 ```mermaid-example
     C4Context
diff --git a/docs/gitgraph.md b/docs/gitgraph.md
index fe8f9b05a..ee8c321e0 100644
--- a/docs/gitgraph.md
+++ b/docs/gitgraph.md
@@ -189,12 +189,12 @@ To use the `cherry-pick` keyword, you must specify the id  using the `id` attrib
 
  `cherry-pick id: "your_custom_id"`
 
-Here, a new commt representing the cherry pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry picked from.
+Here, a new commit representing the cherry pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry picked from.
 
 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. Cherry picked commit must always be a different branch than the current branch.
-3. Current branch must have atleast one commit, before you can cherry pick a commit, otherwise it will case an error is throw.
+3. Current branch must have at least one commit, before you can cherry pick a commit, otherwise it will cause an error is throw.
 
 Let see an example:
 ```mermaid-example
@@ -272,7 +272,7 @@ Usage example:
  ```
 
 ## Commit labels Layout: Rotated or Horizontal
-Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degress for better readability. This is particularly useful for commits with long labels.
+Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
 
 The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
 
diff --git a/docs/newDiagram.md b/docs/newDiagram.md
index b17a0d642..d2c9545c2 100644
--- a/docs/newDiagram.md
+++ b/docs/newDiagram.md
@@ -110,7 +110,7 @@ Look at `graphDb.js` for more details on that object.
 
 ## Layout
 
-If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are m igrating away from.
+If you are using a dagre based layout, please use flowchart-v2 as a template and by doing that you will be using dagre-wrapper instead of dagreD3 which we are migrating away from.
 
 ### Common parts of a diagram
 
@@ -129,7 +129,7 @@ Here is example handling from flowcharts:
 Jison:
 ```jison
 
-/* lexial grammar */
+/* lexical grammar */
 %lex
 %x open_directive
 %x type_directive
@@ -175,7 +175,7 @@ It is probably a good idea to keep the handling similar to this in your new diag
 The syntax for adding title and description looks like this:
 ```
 accTitle: The title
-accDescr: The dsscription
+accDescr: The description
 
 accDescr {
 	Syntax for a description text
diff --git a/src/dagre-wrapper/GraphObjects.md b/src/dagre-wrapper/GraphObjects.md
index 52c7cd27c..416dfeb73 100644
--- a/src/dagre-wrapper/GraphObjects.md
+++ b/src/dagre-wrapper/GraphObjects.md
@@ -23,7 +23,7 @@ flowchart
 
 The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
 
-When rendering this diagram it it beeing rendered recursivly. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
+When rendering this diagram it it beeing rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
 
 ```
 { clusterNode: true, graph }
@@ -74,7 +74,7 @@ This is set by the renderer of the diagram and insert the data that the wrapper
 
 |  property  |                                                 description                                                 |
 | ---------- | ----------------------------------------------------------------------------------------------------------- |
-| labelStyle | Css styles for the label. User for instance for stylling the labels for clusters                            |
+| labelStyle | Css styles for the label. User for instance for styling the labels for clusters                            |
 | shape      | The shape of the node.                                                                                      |
 | labelText  | The text on the label                                                                                       |
 | rx         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index 67e91daec..40729dead 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -78,7 +78,7 @@ const rect = (parent, node) => {
 };
 
 /**
- * Non visiable cluster where the note is group with its
+ * Non visible cluster where the note is group with its
  *
  * @param {any} parent
  * @param {any} node
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index dbee50b12..60ded826e 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -313,7 +313,7 @@ const cutPathAtIntersect = (_points, boundryNode) => {
     // check if point is inside the boundry rect
     if (!outsideNode(boundryNode, point) && !isInside) {
       // First point inside the rect found
-      // Calc the intersection coord between the point anf the last opint ouside the rect
+      // Calc the intersection coord between the point anf the last point outside the rect
       const inter = intersection(boundryNode, lastPointOutside, point);
       log.warn('abc88 inside', point, lastPointOutside, inter);
       log.warn('abc88 intersection', inter);
@@ -391,7 +391,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     //     }
     //     isInside = true;
     // } else {
-    //   // outtside
+    //   // outside
     //   lastPointOutside = point;
     //   if (!isInside) points.push(point);
     // }
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index ca9f0945c..daf130f0d 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -61,7 +61,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       log.warn('Recursive render complete ', newEl, node);
     } else {
       if (graph.children(v).length > 0) {
-        // This is a cluster but not to be rendered recusively
+        // This is a cluster but not to be rendered recursively
         // Render as before
         log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
         log.info(findNonClusterChild(node.id, graph));
@@ -117,7 +117,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     } else {
       // Non cluster node
       if (graph.children(v).length > 0) {
-        // A cluster in the non-recurive way
+        // A cluster in the non-recursive way
         // positionCluster(node);
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
diff --git a/src/dagre-wrapper/markers.js b/src/dagre-wrapper/markers.js
index e383feb5e..ca2a12200 100644
--- a/src/dagre-wrapper/markers.js
+++ b/src/dagre-wrapper/markers.js
@@ -244,7 +244,7 @@ const barb = (elem, type) => {
     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
 };
 
-// TODO rename the class diagram markers to something shape descriptive and semanitc free
+// TODO rename the class diagram markers to something shape descriptive and semantic free
 const markers = {
   extension,
   composition,
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
index 0479ee640..aa7414ff7 100644
--- a/src/dagre-wrapper/mermaid-graphlib.js
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -210,7 +210,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
   } else {
     log.debug('Opting in, graph ');
   }
-  // Go through the nodes and for each cluster found, save a replacment node, this can be used when
+  // Go through the nodes and for each cluster found, save a replacement node, this can be used when
   // faking a link to a cluster
   graph.nodes().forEach(function (id) {
     const children = graph.children(id);
@@ -257,7 +257,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
   });
 
   // For clusters with incoming and/or outgoing edges translate those edges to a real node
-  // in the cluster inorder to fake the edge
+  // in the cluster in order to fake the edge
   graph.edges().forEach(function (e) {
     const edge = graph.edge(e);
     log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index d949ec88e..5f608b949 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -877,7 +877,7 @@ const class_box = (parent, node) => {
     );
     verticalPos = interfaceBBox.height + rowPadding;
   }
-  // Positin the class title label
+  // Position the class title label
   let diffX = (maxWidth - classTitleBBox.width) / 2;
   select(classTitleLabel).attr(
     'transform',
diff --git a/src/dagre-wrapper/patterns.js b/src/dagre-wrapper/patterns.js
index 3f007b0ee..75afa8bcc 100644
--- a/src/dagre-wrapper/patterns.js
+++ b/src/dagre-wrapper/patterns.js
@@ -45,7 +45,7 @@ const dots = (elem, type) => {
     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
 };
 
-// TODO rename the class diagram markers to something shape descriptive and semanitc free
+// TODO rename the class diagram markers to something shape descriptive and semantic free
 const patterns = {
   dots,
 };
diff --git a/src/diagrams/c4/c4Renderer.js b/src/diagrams/c4/c4Renderer.js
index d71e70e2e..e238aa817 100644
--- a/src/diagrams/c4/c4Renderer.js
+++ b/src/diagrams/c4/c4Renderer.js
@@ -568,7 +568,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
 export const draw = function (text, id) {
   conf = configApi.getConfig().c4;
   const securityLevel = configApi.getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/diagrams/c4/svgDraw.js b/src/diagrams/c4/svgDraw.js
index fb3a276db..8882ae78d 100644
--- a/src/diagrams/c4/svgDraw.js
+++ b/src/diagrams/c4/svgDraw.js
@@ -315,7 +315,7 @@ const drawBoundary = function (elem, boundary, conf) {
 
   drawRect(boundaryElem, rectData);
 
-  // draw lable
+  // draw label
   let boundaryConf = conf.boundaryFont();
   boundaryConf.fontWeight = 'bold';
   boundaryConf.fontSize = boundaryConf.fontSize + 2;
diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js
index 509c2198a..e892134f4 100644
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@@ -138,7 +138,7 @@ export const addClasses = function (classes, g) {
 };
 
 /**
- * Add edges to graph based on parsed graph defninition
+ * Add edges to graph based on parsed graph definition
  *
  * @param relations
  * @param {object} g The graph object
@@ -317,7 +317,7 @@ export const draw = function (text, id) {
   //   flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   // }
 
-  // Fetch the verices/nodes and edges/links from the parsed graph definition
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const classes = classDb.getClasses();
   const relations = classDb.getRelations();
 
diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
index e9ff20df8..83f5aa8f2 100644
--- a/src/diagrams/class/classRenderer.js
+++ b/src/diagrams/class/classRenderer.js
@@ -168,7 +168,7 @@ export const draw = function (text, id) {
   log.info('Rendering diagram ' + text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/diagrams/er/erRenderer.js b/src/diagrams/er/erRenderer.js
index a8589da72..e43b75ac0 100644
--- a/src/diagrams/er/erRenderer.js
+++ b/src/diagrams/er/erRenderer.js
@@ -547,7 +547,7 @@ export const draw = function (text, id) {
   const parser = erParser.parser;
   parser.yy = erDb;
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -575,7 +575,7 @@ export const draw = function (text, id) {
   // ---
   // 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content)
   // 2. Make sure they are all added to the graph
-  // 3. Add all the edges (relationships) to the graph aswell
+  // 3. Add all the edges (relationships) to the graph as well
   // 4. Let dagre do its magic to layout the graph.  This assigns:
   //    - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships
   //    - the path co-ordinates for each edge
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 00dc61913..5cdec50bf 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -465,7 +465,7 @@ export const addSubGraph = function (_id, list, _title) {
     const prims = { boolean: {}, number: {}, string: {} };
     const objs = [];
 
-    let dir; //  = unbdefined; direction.trim();
+    let dir; //  = undefined; direction.trim();
     const nodeList = a.filter(function (item) {
       const type = typeof item;
       if (item.stmt && item.stmt === 'dir') {
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 2cf46eae5..0065f14d9 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -30,7 +30,7 @@ export const draw = function (text, id) {
   parser.parse(text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 2735ea83d..6ee9f1855 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -65,9 +65,9 @@ const drawText = (txt) => {
 };
 
 /**
- * Draws the commits with its symbol and labels. The function has tywo modes, one which only
+ * Draws the commits with its symbol and labels. The function has two modes, one which only
  * calculates the positions and one that does the actual drawing. This for a simple way getting the
- * vertical leyering rcorrect in the graph.
+ * vertical layering correct in the graph.
  *
  * @param {any} svg
  * @param {any} commits
@@ -345,7 +345,7 @@ const findLane = (y1, y2, _depth) => {
 };
 
 /**
- * This function draw trhe lines between the commits. They were arrows initially.
+ * This function draw the lines between the commits. They were arrows initially.
  *
  * @param {any} svg
  * @param {any} commit1
diff --git a/src/diagrams/info/infoRenderer.js b/src/diagrams/info/infoRenderer.js
index b01931a22..7b8f68251 100644
--- a/src/diagrams/info/infoRenderer.js
+++ b/src/diagrams/info/infoRenderer.js
@@ -28,7 +28,7 @@ export const draw = (text, id, version) => {
     log.debug('Renering info diagram\n' + text);
 
     const securityLevel = getConfig().securityLevel;
-    // Handle root and ocument for when rendering in sanbox mode
+    // Handle root and Document for when rendering in sanbox mode
     let sandboxElement;
     if (securityLevel === 'sandbox') {
       sandboxElement = select('#i' + id);
diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js
index 0c3df7220..b44dc97be 100644
--- a/src/diagrams/pie/pieRenderer.js
+++ b/src/diagrams/pie/pieRenderer.js
@@ -25,7 +25,7 @@ export const draw = (txt, id) => {
     log.debug('Rendering info diagram\n' + txt);
 
     const securityLevel = configApi.getConfig().securityLevel;
-    // Handle root and ocument for when rendering in sanbox mode
+    // Handle root and Document for when rendering in sanbox mode
     let sandboxElement;
     if (securityLevel === 'sandbox') {
       sandboxElement = select('#i' + id);
diff --git a/src/diagrams/requirement/requirementRenderer.js b/src/diagrams/requirement/requirementRenderer.js
index ee2656529..f69805f03 100644
--- a/src/diagrams/requirement/requirementRenderer.js
+++ b/src/diagrams/requirement/requirementRenderer.js
@@ -324,7 +324,7 @@ export const draw = (text, id) => {
   parser.parse(text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index caa285a8a..d83d9dc2b 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -587,7 +587,7 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
 export const draw = function (text, id) {
   conf = configApi.getConfig().sequence;
   const securityLevel = configApi.getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index 2a25e0005..c3826856e 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -362,7 +362,7 @@ export const drawNote = (text, g) => {
 
 /**
  * Starting point for drawing a state. The function finds out the specifics about the state and
- * renders with approprtiate function.
+ * renders with appropriate function.
  *
  * @param {any} elem
  * @param {any} stateDef
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 536a7672f..89af9386c 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -48,7 +48,7 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id) {
   conf = getConfig().state;
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js
index 24ab8cb8a..5fcaec020 100644
--- a/src/diagrams/user-journey/journeyRenderer.js
+++ b/src/diagrams/user-journey/journeyRenderer.js
@@ -56,7 +56,7 @@ export const draw = function (text, id) {
   parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and ocument for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 551103ee3..fcac86dd5 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -5,7 +5,7 @@ class Theme {
     /** # Base variables */
     /**
      * - Background - used to know what the background color is of the diagram. This is used for
-     *   deducing colors for istance line color. Defaulr value is #f4f4f4.
+     *   deducing colors for instance line color. Default value is #f4f4f4.
      */
     this.background = '#f4f4f4';
     this.darkMode = false;
@@ -21,7 +21,7 @@ class Theme {
     this.fontSize = '16px';
   }
   updateColors() {
-    // The || is to make sure that if the variable has been defiend by a user override that value is to be used
+    // The || is to make sure that if the variable has been defined by a user override that value is to be used
 
     /* Main */
     this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
@@ -103,7 +103,7 @@ class Theme {
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;
-    /* The color of the text tables of the tstates*/
+    /* The color of the text tables of the states*/
     this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
 
     this.stateBkg = this.stateBkg || this.mainBkg;