diff --git a/_episodes/41-code-review.md b/_episodes/41-code-review.md
index 0f966d77e..477a96d06 100644
--- a/_episodes/41-code-review.md
+++ b/_episodes/41-code-review.md
@@ -12,6 +12,7 @@ keypoints:
 - "Code review is a team software quality assurance practice where team members look at parts of the codebase in order to improve their code's readability, understandability, quality and maintainability."
 - "It is important to agree on a set of best practices and establish a code review process in a team to help to
 sustain a good, stable and maintainable code for many years."
+layout: lesson_mermaid
 ---
 
 ## Introduction
@@ -178,7 +179,23 @@ didn't see before!
 
 Here is an outline of the process of a tool based code review that we will be following:
 
-![Code review timeline](../fig/code-review-timeline.png){: width="560px"}
+```mermaid
+%% Must disable useMaxWidth to have the diagram centre
+%%{init: { 'sequence': {'useMaxWidth':false} } }%%
+sequenceDiagram
+    participant A as Author
+    participant R as Reviewer
+    A->>A: Write some code
+    A->>R: Raise a pull request
+    R->>R: Add comments to a review
+    R->>A: Submit a review
+    loop Until approved
+        A->>R: Address or respond to review comments
+        R->>A: Clarify or resolve comments
+    end
+    R->>A: Approve pull request
+    A->>A: Merge pull request
+```
 
 Recall [solution requirements SR1.1.1](../31-software-requirements/index.html#solution-requirements)
 from an earlier episode.
diff --git a/_layouts/lesson_mermaid.html b/_layouts/lesson_mermaid.html
new file mode 100644
index 000000000..c9dcbafed
--- /dev/null
+++ b/_layouts/lesson_mermaid.html
@@ -0,0 +1,22 @@
+---
+layout: lesson
+---
+{{ content }}
+<script src="https://unpkg.com/mermaid@8.9.3/dist/mermaid.min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function(){
+    mermaid.initialize({
+      startOnLoad:true,
+      theme: "default",
+    });
+    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
+  });
+</script>
+<!--Below styling is required to centre the SVG -->
+<style>
+    .language-mermaid>svg {
+        background-color: white;
+        width: 100%;
+        margin: auto;
+    }
+</style>
diff --git a/fig/code-review-timeline.mermaid.txt b/fig/code-review-timeline.mermaid.txt
deleted file mode 100644
index 609575221..000000000
--- a/fig/code-review-timeline.mermaid.txt
+++ /dev/null
@@ -1,15 +0,0 @@
-%% mermaid code for generating "code-review-timeline.png" - image must be
-%% regenerated if any changes are made, e.g. using mermaid.live (styled with light)
-sequenceDiagram
-    participant A as Author
-    participant R as Reviewer
-    A->>A: Write some code
-    A->>R: Raise a pull request
-    R->>R: Add comments to a review
-    R->>A: Submit a review
-    loop Until approved
-        A->>R: Address or respond to review comments
-        R->>A: Clarify or resolve comments
-    end
-    R->>A: Approve pull request
-    A->>A: Merge pull request
diff --git a/fig/code-review-timeline.png b/fig/code-review-timeline.png
deleted file mode 100644
index 1484dadcf..000000000
Binary files a/fig/code-review-timeline.png and /dev/null differ