Better way to ignore the mermaid scripts in the md files

_search-plugins/ubi/query_id.md

@@ -16,6 +16,11 @@ nav_order: 7
 If the user interacts with an *object* (book, product, document) that was returned from their search, that `object_id` is logged, tying the `query_id` to the `object_id`
 
 
+<img src="{{site.url}}{{site.baseurl}}/images/ubi/query_id.png" />
+{% comment %}
+This mermaid source is converted into an png under 
+.../images/ubi/query_id.png
+
 ```mermaid
 %%{init: {'theme':'base',
  'themeVariables': {
@@ -66,6 +71,8 @@ sequenceDiagram
     deactivate UBI Client
     deactivate UBI Plugin
 ```
+{% endcomment %}
+
 <!-- vale off -->
 # The *Cute Things Animal Rescue*
 <!-- vale on -->

_search-plugins/ubi/schemas.md

@@ -32,8 +32,84 @@ To summarize: the `query_id` signals the beginning of a `client_id`'s *Search Jo
   (8 and 9, following section)
 
 
+<img src="{{site.url}}{{site.baseurl}}/images/ubi/ubi-schema-interactions_legend.png" />
 <img src="{{site.url}}{{site.baseurl}}/images/ubi/ubi-schema-interactions.png" />
 
+{% comment %}
+The mermaid source is converted into an png under 
+.../images/ubi/ubi-schema-interactions.png
+
+
+```mermaid
+graph LR
+style L fill:none,stroke-dasharray: 5 5
+subgraph L["`*Legend*`"]
+    style ss height:150px
+    subgraph ss["Standard Search"]
+      direction LR
+        
+      style ln1a fill:blue
+      ln1a[ ]--->ln1b[ ];
+    end
+    subgraph ubi-leg["UBI data flow"]
+      direction LR
+      
+      ln2a[ ].->|"`**UBI interaction**`"|ln2b[ ];
+      style ln1c fill:red
+      ln1c[ ]-->|<span style="font-family:Courier New">query_id</span> flow|ln1d[ ];
+    end
+end
+linkStyle 0 stroke-width:2px,stroke:#0A1CCF
+linkStyle 2 stroke-width:2px,stroke:red
+```
+```mermaid
+%%{init: {
+    "flowchart": {"htmlLabels": false},
+
+    } 
+}%%
+graph TB
+
+User--1) <i>raw search string</i>-->Search;    
+Search--2) <i>search string</i>-->Docs 
+style OS stroke-width:2px, stroke:#0A1CCF, fill:#62affb, opacity:.5
+subgraph OS[OpenSearch Cluster fa:fa-database]
+    style E stroke-width:1px,stroke:red
+    E[(&emsp;<b>UBI Events</b>&emsp;)]
+    style Docs stroke-width:1px,stroke:#0A1CCF
+    style Q stroke-width:1px,stroke:red
+    Docs[(Document Index)] -."3)  {<i>DSL</i>...} & [<i>object_id's</i>,...]".-> Q[(&emsp;<b>UBI Queries</b>&emsp;)];  
+    Q -.4) <span style="font-family:Courier New">query_id</span>.-> Docs ;   
+end
+
+Docs -- "5) <i>return</i> both <span style="font-family:Courier New">query_id</span> & [<i>objects</i>,...]" --->Search ;
+Search-.6)  <span style="font-family:Courier New">query_id</span>.->U;
+Search --7) [<i>results</i>, ...]--> User
+
+style *client-side* stroke-width:1px, stroke:#D35400
+subgraph "`*client-side*`"
+    style User stroke-width:4px, stroke:#EC636
+    User["`**User**`" fa:fa-user]
+    App
+    Search    
+    U
+    style App fill:#D35400,opacity:.35, stroke:#0A1CCF, stroke-width:2px
+    subgraph App[&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;UserApp fa:fa-store]
+        style Search stroke-width:2px, stroke:#0A1CCF
+        Search(&emsp;Search Client&emsp;)        
+        style U stroke-width:1px,stroke:red
+        U(&emsp;<b>UBI Client</b>&emsp;)
+    end
+end
+
+User -.8) <i>selects</i> <span style="font-family:Courier New">object_id:123</span>.->U;
+U-."9) <i>index</i> event:{<span style="font-family:Courier New">query_id, onClick, object_id:123</span>}".->E;
+
+linkStyle 1,2,0,6 stroke-width:2px,fill:none,stroke:#0A1CCF
+linkStyle 3,4,5,8 stroke-width:2px,fill:none,stroke:red
+```
+{% endcomment %}
+
 ## UBI stores
 There are 2 separate stores for UBI:
 ### 1) **UBI queries**