Code review with mermaids

_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.

_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>