operator-framework
diff --git a/‎docs/_layouts/docs.html
Lines changed: 2 additions & 0 deletions b/‎docs/_layouts/docs.html
Lines changed: 2 additions & 0 deletions
diff --git a/‎docs/assets/js/mermaid.min.js
Lines changed: 3 additions & 0 deletions b/‎docs/assets/js/mermaid.min.js
Lines changed: 3 additions & 0 deletions
diff --git a/‎docs/assets/js/mermaid.min.js.map
Lines changed: 1 addition & 0 deletions b/‎docs/assets/js/mermaid.min.js.map
Lines changed: 1 addition & 0 deletions
diff --git a/‎docs/documentation/dependent-resources.md
Lines changed: 3 additions & 2 deletions b/‎docs/documentation/dependent-resources.md
Lines changed: 3 additions & 2 deletions
@@ -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>
 
@@ -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