diff --git a/docs/concepts.md b/docs/concepts.md
index 0ed2af3..fa7f567 100644
--- a/docs/concepts.md
+++ b/docs/concepts.md
@@ -105,7 +105,20 @@ All the modules come with end-to-end deployable examples.
 
 You can find **workload** examples like [Amazon EKS infrastructure monitoring](https://aws-observability.github.io/terraform-aws-observability-accelerator/eks/) or [monitoring your Amazon Managed Service for Prometheus workspace](https://aws-observability.github.io/terraform-aws-observability-accelerator/workloads/managed-prometheus/) and more.
 
-![example diagram](images/example-diagram.svg)
+``` mermaid
+classDiagram
+    Example <|-- Base Module
+    Example <|-- Workload Module
+    class Base Module{
+        Amazon Managed Prometheus
+        Amazon Managed Grafana Data Sources
+    }
+    class Workload Module{
+        Amazon Distro for Open Telemetry Config
+        Amazon Managed Prometheus Alerts
+        Amazon Managed Grafana Dashboards
+    }
+```
 
 
 ## Getting started with AWS Observability services
diff --git a/docs/images/example-diagram.svg b/docs/images/example-diagram.svg
deleted file mode 100644
index c1364f4..0000000
--- a/docs/images/example-diagram.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg aria-roledescription="classDiagram" viewBox="0 0 639.9296875 276" style="max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css");'</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#graph-div .error-icon{fill:#552222;}#graph-div .error-text{fill:#552222;stroke:#552222;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#333333;stroke:#333333;}#graph-div .marker.cross{stroke:#333333;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#graph-div g.classGroup text .title{font-weight:bolder;}#graph-div .nodeLabel,#graph-div .edgeLabel{color:#131300;}#graph-div .edgeLabel .label rect{fill:#ECECFF;}#graph-div .label text{fill:#131300;}#graph-div .edgeLabel .label span{background:#ECECFF;}#graph-div .classTitle{font-weight:bolder;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#graph-div .divider{stroke:#9370DB;stroke:1;}#graph-div g.clickable{cursor:pointer;}#graph-div g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#graph-div g.classGroup line{stroke:#9370DB;stroke-width:1;}#graph-div .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#graph-div .classLabel .label{fill:#9370DB;font-size:10px;}#graph-div .relation{stroke:#333333;stroke-width:1;fill:none;}#graph-div .dashed-line{stroke-dasharray:3;}#graph-div .dotted-line{stroke-dasharray:1 2;}#graph-div #compositionStart,#graph-div .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#graph-div #compositionEnd,#graph-div .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#graph-div #dependencyStart,#graph-div .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#graph-div #dependencyStart,#graph-div .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#graph-div #extensionStart,#graph-div .extension{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#graph-div #extensionEnd,#graph-div .extension{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#graph-div #aggregationStart,#graph-div .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#graph-div #aggregationEnd,#graph-div .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#graph-div #lollipopStart,#graph-div .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#graph-div #lollipopEnd,#graph-div .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#graph-div .edgeTerminals{font-size:11px;}#graph-div .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker aggregation classDiagram" id="classDiagram-aggregationStart"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker aggregation classDiagram" id="classDiagram-aggregationEnd"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker extension classDiagram" id="classDiagram-extensionStart"><path d="M 1,7 L18,13 V 1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker extension classDiagram" id="classDiagram-extensionEnd"><path d="M 1,1 V 13 L18,7 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker composition classDiagram" id="classDiagram-compositionStart"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker composition classDiagram" id="classDiagram-compositionEnd"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker dependency classDiagram" id="classDiagram-dependencyStart"><path d="M 5,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker dependency classDiagram" id="classDiagram-dependencyEnd"><path d="M 18,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker lollipop classDiagram" id="classDiagram-lollipopStart"><circle r="6" cy="7" cx="6" fill="white" stroke="black"></circle></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id1" d="M268.185546875,52.65318270869318L246.64225260416666,59.877652257244314C225.09895833333334,67.10212180579545,182.01236979166666,81.55106090289773,160.46907552083334,95.27553045144886C138.92578125,109,138.92578125,122,138.92578125,128.5L138.92578125,135"></path><path marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id2" d="M346.630859375,52.65318270869318L368.1741536458333,59.877652257244314C389.7174479166667,67.10212180579545,432.8040364583333,81.55106090289773,454.3473307291667,92.94219711811553C475.890625,104.33333333333333,475.890625,112.66666666666667,475.890625,116.83333333333333L475.890625,121"></path></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><g class="nodes"><g transform="translate(307.408203125, 39.5)" id="classid-Example-5167" class="node default"><rect height="63" width="78.4453125" y="-31.5" x="-39.22265625" class="outer title-state"></rect><line y2="4.5" y1="4.5" x2="39.22265625" x1="-39.22265625" class="divider"></line><line y2="20.5" y1="20.5" x2="39.22265625" x1="-39.22265625" class="divider"></line><g class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"></span></div></foreignObject><foreignObject transform="translate( -31.72265625, -24)" height="24" width="63.4453125" class="classTitle"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Example</span></div></foreignObject></g></g><g transform="translate(138.92578125, 194.5)" id="classid-BaseModule-5168" class="node default"><rect height="119" width="261.8515625" y="-59.5" x="-130.92578125" class="outer title-state"></rect><line y2="-23.5" y1="-23.5" x2="130.92578125" x1="-130.92578125" class="divider"></line><line y2="48.5" y1="48.5" x2="130.92578125" x1="-130.92578125" class="divider"></line><g class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"></span></div></foreignObject><foreignObject transform="translate( -43.8828125, -52)" height="24" width="87.765625" class="classTitle"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">BaseModule</span></div></foreignObject><foreignObject transform="translate( -123.42578125, -12)" height="24" width="212.28125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Amazon Managed Prometheus</span></div></foreignObject><foreignObject transform="translate( -123.42578125, 16)" height="24" width="246.8515625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Amazon Distro for Open Telemetry</span></div></foreignObject></g></g><g transform="translate(475.890625, 194.5)" id="classid-WorkloadModule-5169" class="node default"><rect height="147" width="312.078125" y="-73.5" x="-156.0390625" class="outer title-state"></rect><line y2="-37.5" y1="-37.5" x2="156.0390625" x1="-156.0390625" class="divider"></line><line y2="62.5" y1="62.5" x2="156.0390625" x1="-156.0390625" class="divider"></line><g class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"></span></div></foreignObject><foreignObject transform="translate( -61.86328125, -66)" height="24" width="123.7265625" class="classTitle"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">WorkloadModule</span></div></foreignObject><foreignObject transform="translate( -148.5390625, -26)" height="24" width="297.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Amazon Distro for Open Telemetry Config</span></div></foreignObject><foreignObject transform="translate( -148.5390625, 2)" height="24" width="270.953125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Amazon Managed Grafana Dashboards</span></div></foreignObject><foreignObject transform="translate( -148.5390625, 30)" height="24" width="258.140625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Amazon Managed Prometheus Alerts</span></div></foreignObject></g></g></g></g></g></svg>
diff --git a/mkdocs.yml b/mkdocs.yml
index 8efe42d..d6860ca 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -44,6 +44,11 @@ markdown_extensions:
   - codehilite
   - footnotes
   - pymdownx.critic
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
 
 plugins:
   - search