diff --git a/docs/site/pages/guides/data-diagrams-with-binding-parser.mmd b/docs/site/pages/guides/data-diagrams-with-binding-parser.mmd
new file mode 100644
index 000000000..7af13f710
--- /dev/null
+++ b/docs/site/pages/guides/data-diagrams-with-binding-parser.mmd
@@ -0,0 +1,50 @@
+
+sequenceDiagram
+    title Data Controller with Binding Parser
+    participant P as Player
+
+    %% the controller is responsible for orchestrating the flow of data and handling interactions between the Data model
+    participant DC as dataController
+
+
+    %% the bindingPasrser is responsible for parsing raw binding strings and creating BindingInstance Objects. These represent paths in the datamodel.
+    participant BP as BindingParser
+    Note over BP: Binding parser helps get the binding path in the DataModel. <br> It helps ensure that bindings are correctly parsed and <br> are represented as BINDINGINSTANCE objects
+
+    %% the model is reponsible for defining the structure of the data, handling the data operations(get,set,delete), and managing middleware for data processing
+    participant DM as dataModel
+   
+
+   
+
+
+    Note over P: Initial Data : 
+    Note over P: foo: { 
+    Note over P: bar: { baz:"HelloWorld" },
+    Note over P: array: [ { property: "another value}] 
+    Note over P: }
+
+    P->>DC: Request to get(foo.bar.baz)
+    %%DataController handles this request
+    DC->>BP: get('foo.bar.baz')
+    
+    Note right of BP: The DC utilizes the BindingParser to parse the binding string. 
+    Note right of BP: BindingaParser takes the raw binding string and normalizes it.
+    Note right of BP: ["foo","bar","baz] would be the normalized path
+    Note right of BP: an AST gets generated with the normalized path using parseBinding
+     Note right of BP: which the AST then gets resolved to a normalized result, creating a BindingInstance
+    BP-->>DM: the BindingParser processes the request with the BindingInstance
+    
+    Note over BP: A BindingInstance helps with data manipulation within the data model.
+    DM->>DC: returns "Hello World"
+  
+    %%sets a binding of foo.bar to 'Hello World'
+
+    
+    P->>DC: Request to Set foo.array.0.property to "New Value"
+    %% Set takes in a (transaction and options?) as its parameters
+    
+    DC->>BP: set(transaction, options)
+    Note right of DC: On a deeper level, we keep track of the transactions and updates <br> to help with debugging and logging. Once all the update is accounted <br> for, it then calls set on the dataModel.
+    BP->>DM: set([[foo.array.0.property, "New Value"]])
+    Note right of DM: { foo: bar {...}, { array:[ property: "New Value"} ] }
diff --git a/docs/site/pages/guides/data-diagrams-with-middle-ware.mmd b/docs/site/pages/guides/data-diagrams-with-middle-ware.mmd
new file mode 100644
index 000000000..7189dab2b
--- /dev/null
+++ b/docs/site/pages/guides/data-diagrams-with-middle-ware.mmd
@@ -0,0 +1,27 @@
+
+sequenceDiagram
+    title Data Controller with MiddleWare
+    participant P as Player
+
+    %% the controller is responsible for orchestrating the flow of data and handling interactions between the Data model
+    participant DC as dataController
+
+
+    participant MW as Validation Middleware
+
+    Note right of MW: Keep in mind the Binding Parser is still being used to help <br>parse the bindings in the dataModel to the values
+
+
+    %% the model is reponsible for defining the structure of the data, handling the data operations(get,set,delete), and managing middleware for data processing
+    participant DM as dataModel
+   
+
+    P->>DC: Request to set a value that has validation
+
+ 
+    DC-->>DM: calls set([[binding,value]],options)
+    Note over MW: The middleware intercepts the set, <br> calling set(transaction, options, next)
+    MW-->DM: for each transaction, sets a shadowModelPath for the binding
+    MW-->DM: checks to see if validations exist using the MiddlewareCheck for current binding 
+    DM->>DC: this returns all invalid and valid results
+
diff --git a/docs/site/pages/guides/data-diagrams.mmd b/docs/site/pages/guides/data-diagrams.mmd
new file mode 100644
index 000000000..3052f8eef
--- /dev/null
+++ b/docs/site/pages/guides/data-diagrams.mmd
@@ -0,0 +1,32 @@
+
+sequenceDiagram
+    title Data Controller/Model High Level
+    participant P as Player
+
+    %% the controller is responsible for orchestrating the flow of data and handling interactions between the Data model
+    participant DC as Data Controller
+
+    %% the model is reponsible for defining the structure of the data, handling the data operations(get,set,delete), and managing middleware for data processing
+    participant DM as Data Model
+   
+   
+    Note over P: Initial Data is seeded
+    Note over P: foo: { bar: "HelloWorld" }
+    P->>DC: Request to get the value of foo.bar
+    DC->>DM: get('foo.bar')
+   
+    DM->>DC: returns "Hello World"
+    %%sets a binding of foo.bar to 'Hello World'
+
+    
+    P->>DC: request to Set foo.bar to "New Value"
+    %% Set takes in a (transaction and options?) as its parameters
+    
+    
+    Note right of DC: On a deeper level, we keep track of the transactions and updates <br> to help with debugging and logging. Once all the update is accounted <br> for, it then calls set on the dataModel.
+    DC->>DM: set([[foo.bar, "New Value"]],{options})
+    Note right of DM: { foo: { bar: "New Value"} }
+    Note right of DM: options can also be passed to show things such as  <br> if the value should be formatted , <br>include invalid results, etc
+
+    P->>DC: deleting a binding of foo.bar
+    DC->>DM: delete(foo.bar)