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: 2 additions & 13 deletions b/‎docs/documentation/dependent-resources.md
Lines changed: 2 additions & 13 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">
             {{ content }}
           </article>
+          <script src="/assets/js/mermaid.min.js"></script>
         </div>
       </div>
     </div>
 
@@ -3,6 +3,7 @@ title: Dependent Resources Feature
 description: Dependent Resources Feature 
 layout: docs 
 permalink: /docs/dependent-resources
+use_mermaid: true
 ---
 
 # Dependent Resources
@@ -23,19 +24,7 @@ the `Deployment` controller.
 Controllers that deal with secondary resources typically need to perform the following steps, for
 each secondary resource:
 
-```mermaid
-flowchart TD
-
-A{Secondary resource exists?}
-A -- Yes --> match
-A -- No --> compute
-
-compute[Compute desired state based on primary state] --> Create --> Done
-match{Matches desired state as defined by primary?}
-match -- Yes --> Done
-match -- No --> Update 
-
-```
+<div class="mermaid"> graph TD; A-->B; A-->C; </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