operator-framework · metacosm · Mar 22, 2022 · Mar 11, 2022 · Mar 18, 2022 · Mar 18, 2022
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
@@ -6,6 +6,7 @@
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title | escape }}{% endif %}</title>
   {% include links.html %}
   {% include analytics.html %}
+
 </head>
 <body class="page">
   {% include navbar.html %}
@@ -20,6 +21,7 @@
           <article class="uk-article">
             {% include anchor_headings.html html=content anchorBody="#" %}
           </article>
+          <script src="/assets/js/mermaid.min.js"></script>
         </div>
       </div>
     </div>

diff --git a/docs/assets/js/mermaid.min.js b/docs/assets/js/mermaid.min.js
diff --git a/docs/assets/js/mermaid.min.js.map b/docs/assets/js/mermaid.min.js.map
diff --git a/docs/documentation/dependent-resources.md b/docs/documentation/dependent-resources.md
@@ -23,7 +23,8 @@ the `Deployment` controller.
 Controllers that deal with secondary resources typically need to perform the following steps, for
 each secondary resource:
 
-```mermaid
+
+<div class="mermaid" markdown="0"> 
 flowchart TD
 
 compute[Compute desired secondary resource based on primary state] --> A
@@ -35,7 +36,7 @@ match{Matches desired state as defined by primary?}
 match -- Yes --> Done
 match -- No --> Update --> Done
 
-```
+</div>
 
 While these steps are not difficult in and of themselves, there are some subtleties that can lead to
 bugs or sub-optimal code if not done right. As this process is pretty much similar for each