From fd122c3aba5a15f5144d18253d31bc731c87d01e Mon Sep 17 00:00:00 2001
From: Frederic Lemay <461102+flemay@users.noreply.github.com>
Date: Thu, 8 Feb 2024 23:30:46 +1100
Subject: [PATCH 1/6] update

---
 README.md            | 28 +---------------------------
 diagrams/generate.sh |  2 +-
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 49f96fb..9eab617 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 # 3 Musketeers
 
 <div align="center">
-
 <img src="docs/public/img/hero-v2.svg" width="300">
 
 **Test, build, and deploy your apps from anywhere, the same way!**
@@ -10,7 +9,6 @@
 [![Build Status][linkGitHubActionsProjectBadge]][linkGitHubActionsProject]
 [![Netlify Status][linkNetlifyProjectBadge]][linkNetlifyProject]
 [![License][linkLicenseBadge]][linkLicense]
-
 </div>
 
 <details>
@@ -52,31 +50,7 @@
 
 The 3 Musketeers is a pattern for developing software in a repeatable and consistent manner. It leverages Make as an orchestration tool to test, build, run, and deploy applications using Docker and Docker Compose. The Make and Docker/Compose commands for each application are maintained as part of the application’s source code and are invoked in the same way whether run locally or on a CI/CD server.
 
-<!-- Copy of diagrams/overview.mmd -->
-```mermaid
-graph LR
-    host["**Host**
-    Linux
-    MacOS
-    Windows
-    CI/CD
-    ..."]
-    make["**Make**
-    test
-    build
-    run
-    deploy
-    ..."]
-    host-->make
-    make-->docker["Docker
-    Compose"]
-    container(("&nbsp;&nbsp;&nbsp;&nbsp;**Container(s)**&nbsp;&nbsp;&nbsp;&nbsp;
-        Go
-        Python
-        PostgreSQL
-        ..."))
-    docker-->container
-```
+![pattern-overview](./diagrams/overview.mmd.svg)
 
 ## Why?
 
diff --git a/diagrams/generate.sh b/diagrams/generate.sh
index 5ed2c3b..1d8d4b0 100755
--- a/diagrams/generate.sh
+++ b/diagrams/generate.sh
@@ -9,6 +9,6 @@ find *.mmd -type f \
             -p /puppeteer-config.json \
             -b transparent \
             -i {}'
-printf "Copy *.svg to docs/guide/assets"
+printf "Copy *.svg to docs/guide/assets\n"
 rm -fr /docs/guide/assets/*.svg
 cp *.svg /opt/docs/guide/assets

From c40333ef427188d66748e21dfccd087089b897cf Mon Sep 17 00:00:00 2001
From: Frederic Lemay <461102+flemay@users.noreply.github.com>
Date: Thu, 8 Feb 2024 23:33:30 +1100
Subject: [PATCH 2/6] update

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9eab617..8ee5f6d 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@
 
 The 3 Musketeers is a pattern for developing software in a repeatable and consistent manner. It leverages Make as an orchestration tool to test, build, run, and deploy applications using Docker and Docker Compose. The Make and Docker/Compose commands for each application are maintained as part of the application’s source code and are invoked in the same way whether run locally or on a CI/CD server.
 
-![pattern-overview](./diagrams/overview.mmd.svg)
+<img src="./diagrams/overview.mmd.svg" width="70%">
 
 ## Why?
 

From 49fb6b218f5e5b43a8c822b73caa8f101b7b4c6e Mon Sep 17 00:00:00 2001
From: Frederic Lemay <461102+flemay@users.noreply.github.com>
Date: Thu, 8 Feb 2024 23:35:59 +1100
Subject: [PATCH 3/6] update

---
 README.md | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 8ee5f6d..63d7ed3 100644
--- a/README.md
+++ b/README.md
@@ -80,14 +80,7 @@ _The demo was generated with VHS using the 3 Musketeers ([source](demo))._
 
 Let's print out `Hello, World!` in the terminal using the 3 Musketeers. The command `make echo` will be calling Docker to run the command `echo 'Hello, World!'` inside a container.
 
-<!-- Copy of diagrams/getting-started.mmd -->
-```mermaid
-graph LR
-    host[Host]-->make[make echo]
-    make-->docker["Docker"]
-    docker-->container(("echo 'Hello, World!'
-    (container)"))
-```
+<img src="./diagrams/getting-started.mmd.svg" width="70%">
 
 ### Prerequisites
 

From 945d9c5b31849435808267d179910e14af893e73 Mon Sep 17 00:00:00 2001
From: Frederic Lemay <461102+flemay@users.noreply.github.com>
Date: Thu, 8 Feb 2024 23:40:19 +1100
Subject: [PATCH 4/6] update

---
 diagrams/overview.mmd              | 4 ++--
 diagrams/overview.mmd.svg          | 5 +++--
 docs/guide/assets/overview.mmd.svg | 5 +++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/diagrams/overview.mmd b/diagrams/overview.mmd
index d211fce..464dba4 100644
--- a/diagrams/overview.mmd
+++ b/diagrams/overview.mmd
@@ -12,8 +12,8 @@ graph LR
     deploy
     ...`"]
     host-->make
-    make-->docker[Docker
-    Compose]
+    make-->docker["`**Docker**
+    **Compose**`"]
     container(("`**Command**
     &emsp;&emsp;(container)&emsp;&emsp;
     Go
diff --git a/diagrams/overview.mmd.svg b/diagrams/overview.mmd.svg
index 6e68dda..be893f9 100644
--- a/diagrams/overview.mmd.svg
+++ b/diagrams/overview.mmd.svg
@@ -1,4 +1,5 @@
-<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 578.25 183.296875" style="max-width: 578.25px; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-host LE-make" id="L-host-make-0" d="M86.421875,83.6484375L90.58854166666667,83.6484375C94.75520833333333,83.6484375,103.08854166666667,83.6484375,110.53854166666667,83.6484375C117.98854166666666,83.6484375,124.55520833333333,83.6484375,127.83854166666667,83.6484375L131.121875,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-make LE-docker" id="L-make-docker-0" d="M205.28125,83.6484375L209.44791666666666,83.6484375C213.61458333333334,83.6484375,221.94791666666666,83.6484375,229.39791666666667,83.6484375C236.8479166666667,83.6484375,243.41458333333333,83.6484375,246.69791666666666,83.6484375L249.98125,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-docker LE-container" id="L-docker-container-0" d="M344.953125,83.6484375L349.1197916666667,83.6484375C353.2864583333333,83.6484375,361.6197916666667,83.6484375,369.0697916666666,83.6484375C376.51979166666666,83.6484375,383.0864583333334,83.6484375,386.3697916666667,83.6484375L389.653125,83.6484375"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(43.2109375, 83.6484375)" id="flowchart-host-0" class="node default default flowchart-label"><rect height="161" width="86.421875" y="-80.5" x="-43.2109375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-35.7109375, -73)" style="" class="label"><rect/><foreignObject style="width: 71.4219px; height: 146px;" height="146" width="71.421875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 585.8125 183.296875" style="max-width: 585.812px; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-host LE-make" id="L-host-make-0" d="M86.421875,83.6484375L90.58854166666667,83.6484375C94.75520833333333,83.6484375,103.08854166666667,83.6484375,110.53854166666667,83.6484375C117.98854166666666,83.6484375,124.55520833333333,83.6484375,127.83854166666667,83.6484375L131.121875,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-make LE-docker" id="L-make-docker-0" d="M205.28125,83.6484375L209.44791666666666,83.6484375C213.61458333333334,83.6484375,221.94791666666666,83.6484375,229.39791666666667,83.6484375C236.8479166666667,83.6484375,243.41458333333333,83.6484375,246.69791666666666,83.6484375L249.98125,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-docker LE-container" id="L-docker-container-0" d="M352.515625,83.6484375L356.6822916666667,83.6484375C360.8489583333333,83.6484375,369.1822916666667,83.6484375,376.6322916666666,83.6484375C384.08229166666666,83.6484375,390.6489583333334,83.6484375,393.9322916666667,83.6484375L397.215625,83.6484375"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(43.2109375, 83.6484375)" id="flowchart-host-0" class="node default default flowchart-label"><rect height="161" width="86.421875" y="-80.5" x="-43.2109375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-35.7109375, -73)" style="" class="label"><rect/><foreignObject style="width: 71.4219px; height: 146px;" height="146" width="71.421875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
     <span class="nodeLabel markdown-node-label"><p><strong>Host</strong><br />Linux<br />MacOS<br />Windows<br />CI/CD<br />...</p></span></div></foreignObject></g></g><g transform="translate(170.8515625, 83.6484375)" id="flowchart-make-1" class="node default default flowchart-label"><rect height="161" width="68.859375" y="-80.5" x="-34.4296875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-26.9296875, -73)" style="" class="label"><rect/><foreignObject style="width: 53.8594px; height: 146px;" height="146" width="53.859375"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
-    <span class="nodeLabel markdown-node-label"><p><strong>Make</strong><br />test<br />build<br />run<br />deploy<br />...</p></span></div></foreignObject></g></g><g transform="translate(300.1171875, 83.6484375)" id="flowchart-docker-5" class="node default default flowchart-label"><rect height="53" width="89.671875" y="-26.5" x="-44.8359375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-37.3359375, -19)" style="" class="label"><rect/><foreignObject height="38" width="74.671875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Docker<br />    Compose</span></div></foreignObject></g></g><g transform="translate(478.6015625, 83.6484375)" id="flowchart-container-6" class="node default default flowchart-label"><circle height="161" width="167.296875" r="83.6484375" ry="0" rx="0" style=""/><g transform="translate(-76.1484375, -73)" style="" class="label"><rect/><foreignObject style="width: 152.297px; height: 146px;" height="146" width="152.296875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
+    <span class="nodeLabel markdown-node-label"><p><strong>Make</strong><br />test<br />build<br />run<br />deploy<br />...</p></span></div></foreignObject></g></g><g transform="translate(303.8984375, 83.6484375)" id="flowchart-docker-5" class="node default default flowchart-label"><rect height="85" width="97.234375" y="-42.5" x="-48.6171875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-41.1171875, -35)" style="" class="label"><rect/><foreignObject style="width: 82.2344px; height: 70px;" height="70" width="82.234375"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
+    <span class="nodeLabel markdown-node-label"><p><strong>Docker</strong><br /><strong>Compose</strong></p></span></div></foreignObject></g></g><g transform="translate(486.1640625, 83.6484375)" id="flowchart-container-6" class="node default default flowchart-label"><circle height="161" width="167.296875" r="83.6484375" ry="0" rx="0" style=""/><g transform="translate(-76.1484375, -73)" style="" class="label"><rect/><foreignObject style="width: 152.297px; height: 146px;" height="146" width="152.296875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
     <span class="nodeLabel markdown-node-label"><p><strong>Command</strong><br />  (container)  <br />Go<br />Python<br />PostgreSQL<br />...</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/guide/assets/overview.mmd.svg b/docs/guide/assets/overview.mmd.svg
index 6e68dda..be893f9 100644
--- a/docs/guide/assets/overview.mmd.svg
+++ b/docs/guide/assets/overview.mmd.svg
@@ -1,4 +1,5 @@
-<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 578.25 183.296875" style="max-width: 578.25px; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-host LE-make" id="L-host-make-0" d="M86.421875,83.6484375L90.58854166666667,83.6484375C94.75520833333333,83.6484375,103.08854166666667,83.6484375,110.53854166666667,83.6484375C117.98854166666666,83.6484375,124.55520833333333,83.6484375,127.83854166666667,83.6484375L131.121875,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-make LE-docker" id="L-make-docker-0" d="M205.28125,83.6484375L209.44791666666666,83.6484375C213.61458333333334,83.6484375,221.94791666666666,83.6484375,229.39791666666667,83.6484375C236.8479166666667,83.6484375,243.41458333333333,83.6484375,246.69791666666666,83.6484375L249.98125,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-docker LE-container" id="L-docker-container-0" d="M344.953125,83.6484375L349.1197916666667,83.6484375C353.2864583333333,83.6484375,361.6197916666667,83.6484375,369.0697916666666,83.6484375C376.51979166666666,83.6484375,383.0864583333334,83.6484375,386.3697916666667,83.6484375L389.653125,83.6484375"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(43.2109375, 83.6484375)" id="flowchart-host-0" class="node default default flowchart-label"><rect height="161" width="86.421875" y="-80.5" x="-43.2109375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-35.7109375, -73)" style="" class="label"><rect/><foreignObject style="width: 71.4219px; height: 146px;" height="146" width="71.421875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 585.8125 183.296875" style="max-width: 585.812px; background-color: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-host LE-make" id="L-host-make-0" d="M86.421875,83.6484375L90.58854166666667,83.6484375C94.75520833333333,83.6484375,103.08854166666667,83.6484375,110.53854166666667,83.6484375C117.98854166666666,83.6484375,124.55520833333333,83.6484375,127.83854166666667,83.6484375L131.121875,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-make LE-docker" id="L-make-docker-0" d="M205.28125,83.6484375L209.44791666666666,83.6484375C213.61458333333334,83.6484375,221.94791666666666,83.6484375,229.39791666666667,83.6484375C236.8479166666667,83.6484375,243.41458333333333,83.6484375,246.69791666666666,83.6484375L249.98125,83.6484375"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-docker LE-container" id="L-docker-container-0" d="M352.515625,83.6484375L356.6822916666667,83.6484375C360.8489583333333,83.6484375,369.1822916666667,83.6484375,376.6322916666666,83.6484375C384.08229166666666,83.6484375,390.6489583333334,83.6484375,393.9322916666667,83.6484375L397.215625,83.6484375"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(43.2109375, 83.6484375)" id="flowchart-host-0" class="node default default flowchart-label"><rect height="161" width="86.421875" y="-80.5" x="-43.2109375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-35.7109375, -73)" style="" class="label"><rect/><foreignObject style="width: 71.4219px; height: 146px;" height="146" width="71.421875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
     <span class="nodeLabel markdown-node-label"><p><strong>Host</strong><br />Linux<br />MacOS<br />Windows<br />CI/CD<br />...</p></span></div></foreignObject></g></g><g transform="translate(170.8515625, 83.6484375)" id="flowchart-make-1" class="node default default flowchart-label"><rect height="161" width="68.859375" y="-80.5" x="-34.4296875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-26.9296875, -73)" style="" class="label"><rect/><foreignObject style="width: 53.8594px; height: 146px;" height="146" width="53.859375"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
-    <span class="nodeLabel markdown-node-label"><p><strong>Make</strong><br />test<br />build<br />run<br />deploy<br />...</p></span></div></foreignObject></g></g><g transform="translate(300.1171875, 83.6484375)" id="flowchart-docker-5" class="node default default flowchart-label"><rect height="53" width="89.671875" y="-26.5" x="-44.8359375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-37.3359375, -19)" style="" class="label"><rect/><foreignObject height="38" width="74.671875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Docker<br />    Compose</span></div></foreignObject></g></g><g transform="translate(478.6015625, 83.6484375)" id="flowchart-container-6" class="node default default flowchart-label"><circle height="161" width="167.296875" r="83.6484375" ry="0" rx="0" style=""/><g transform="translate(-76.1484375, -73)" style="" class="label"><rect/><foreignObject style="width: 152.297px; height: 146px;" height="146" width="152.296875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
+    <span class="nodeLabel markdown-node-label"><p><strong>Make</strong><br />test<br />build<br />run<br />deploy<br />...</p></span></div></foreignObject></g></g><g transform="translate(303.8984375, 83.6484375)" id="flowchart-docker-5" class="node default default flowchart-label"><rect height="85" width="97.234375" y="-42.5" x="-48.6171875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-41.1171875, -35)" style="" class="label"><rect/><foreignObject style="width: 82.2344px; height: 70px;" height="70" width="82.234375"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
+    <span class="nodeLabel markdown-node-label"><p><strong>Docker</strong><br /><strong>Compose</strong></p></span></div></foreignObject></g></g><g transform="translate(486.1640625, 83.6484375)" id="flowchart-container-6" class="node default default flowchart-label"><circle height="161" width="167.296875" r="83.6484375" ry="0" rx="0" style=""/><g transform="translate(-76.1484375, -73)" style="" class="label"><rect/><foreignObject style="width: 152.297px; height: 146px;" height="146" width="152.296875"><div style="display: table-cell; white-space: nowrap; max-width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
     <span class="nodeLabel markdown-node-label"><p><strong>Command</strong><br />  (container)  <br />Go<br />Python<br />PostgreSQL<br />...</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file

From ab84961e9be6ebac0c64e74d6be6a8332ca094d5 Mon Sep 17 00:00:00 2001
From: Frederic Lemay <461102+flemay@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:19:04 +1100
Subject: [PATCH 5/6] update

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 63d7ed3..4559f81 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@
 
 The 3 Musketeers is a pattern for developing software in a repeatable and consistent manner. It leverages Make as an orchestration tool to test, build, run, and deploy applications using Docker and Docker Compose. The Make and Docker/Compose commands for each application are maintained as part of the application’s source code and are invoked in the same way whether run locally or on a CI/CD server.
 
-<img src="./diagrams/overview.mmd.svg" width="70%">
+<img src="./diagrams/overview.mmd.svg" width="85%">
 
 ## Why?
 
@@ -80,7 +80,7 @@ _The demo was generated with VHS using the 3 Musketeers ([source](demo))._
 
 Let's print out `Hello, World!` in the terminal using the 3 Musketeers. The command `make echo` will be calling Docker to run the command `echo 'Hello, World!'` inside a container.
 
-<img src="./diagrams/getting-started.mmd.svg" width="70%">
+<img src="./diagrams/getting-started.mmd.svg" width="85%">
 
 ### Prerequisites
 

From 8e20a9a144a3df62314c20f6ed672f0856d371ca Mon Sep 17 00:00:00 2001
From: Frederic Lemay <461102+flemay@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:19:47 +1100
Subject: [PATCH 6/6] update

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4559f81..9058b98 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@
 
 The 3 Musketeers is a pattern for developing software in a repeatable and consistent manner. It leverages Make as an orchestration tool to test, build, run, and deploy applications using Docker and Docker Compose. The Make and Docker/Compose commands for each application are maintained as part of the application’s source code and are invoked in the same way whether run locally or on a CI/CD server.
 
-<img src="./diagrams/overview.mmd.svg" width="85%">
+<img src="./diagrams/overview.mmd.svg" width="90%">
 
 ## Why?
 
@@ -80,7 +80,7 @@ _The demo was generated with VHS using the 3 Musketeers ([source](demo))._
 
 Let's print out `Hello, World!` in the terminal using the 3 Musketeers. The command `make echo` will be calling Docker to run the command `echo 'Hello, World!'` inside a container.
 
-<img src="./diagrams/getting-started.mmd.svg" width="85%">
+<img src="./diagrams/getting-started.mmd.svg" width="90%">
 
 ### Prerequisites