diff --git a/documentation/docs/guides/serialization.mdx b/documentation/docs/guides/serialization.mdx
index 42018e07..f45c715b 100644
--- a/documentation/docs/guides/serialization.mdx
+++ b/documentation/docs/guides/serialization.mdx
@@ -2,9 +2,89 @@ import FlowChart from '@site/src/components/FlowChart';
 
 # Serialization / Deserialization
 
+Serialization is the process of converting Go data into a format that can be stored or transmitted. Deserialization is the process of converting serialized data back into its original Go form.
+
+The classic example is transforming **Go data into JSON** and back.
+
 Fuego automatically serializes and deserializes inputs and outputs with standard `encoding/json` package.
 
-<FlowChart selected="resp" />
+<FlowChart selected="Serialization" />
+
+## Serialize data
+
+To serialize data, just return the data you want to serialize from your controller. It will be automatically serialized into JSON, XML, YAML, or HTML, depending on the `Accept` header in the request.
+
+- JSON `Accept: application/json` (default) (this default can be changed as an option in the `fuego.Server` struct)
+- XML `Accept: application/xml`
+- YAML `Accept: application/yaml`
+- HTML `Accept: text/html`
+- Plain text `Accept: text/plain`
+
+```go
+package main
+
+import (
+	"github.com/go-fuego/fuego"
+)
+
+type MyReturnType struct {
+	Message string `json:"message"`
+}
+
+func main() {
+	s := fuego.NewServer()
+
+	fuego.Get(s, "/", helloWorld)
+
+	s.Run()
+}
+
+func helloWorld(c fuego.ContextNoBody) (MyReturnType, error) {
+	return MyReturnType{Message: "Hello, World!"}, nil
+}
+
+// curl request: curl -X GET http://localhost:8080/ -H "Accept: application/json"
+// response: {"message":"Hello, World!"}
+
+// curl request: curl -X GET http://localhost:8080/ -H "Accept: application/xml"
+// response: <MyReturnType><Message>Hello, World!</Message></MyReturnType>
+
+```
+
+## Deserialize data
+
+To deserialize data, use the `fuego.ContextWithBody` type in your controller.
+
+```go
+package main
+
+import (
+	"github.com/go-fuego/fuego"
+)
+
+type ReceivedType struct {
+	Message string `json:"message"`
+}
+
+func main() {
+	s := fuego.NewServer()
+
+	fuego.Post(s, "/", echo)
+
+	s.Run()
+}
+
+func echo(c fuego.ContextWithBody[ReceivedType]) (string, error) {
+	// Deserialize the HTTP Request body into ReceivedType,
+	// whether it's application/json, application/xml, application/x-www-form-urlencoded, etc.
+	received, err := c.Body() 
+	if err != nil {
+		return ReceivedType{}, err
+	}
+
+	return received.Message, nil
+}
+```
 
 ## Deserialize binary data
 
diff --git a/documentation/src/components/FlowChart.js b/documentation/src/components/FlowChart.js
index 7edaaef3..82efb16f 100644
--- a/documentation/src/components/FlowChart.js
+++ b/documentation/src/components/FlowChart.js
@@ -3,45 +3,38 @@ import React from "react";
 
 const code = `flowchart TB
 
+Request -- JSON {'a':'value '} --> Deserialization
+
 subgraph fuego
- direction LR
+
+ ErrorHandler{{ErrorHandler}}
 
  subgraph input
-	 direction TB
-	 req(Request) -- JSON {'a':'value '} --> Deserialization
 	 Deserialization -- struct{A:'value '} --> InTransformation
 	 InTransformation -- struct{A:'My Value'} --> Validation
  end
 
+ Validation -- struct{A:'My Value'} --> Controller
+ Controller -- struct{B:'Response!'} --> OutTransformation
+
  subgraph output
-	 direction TB
-	 OutTransformation -- struct{B:'My Response!'} --> resp(Response)
- end
+  OutTransformation -- struct{B:'My Response!'} --> Serialization
+ end 
 
  Controller{{Controller}}
 
- 
- 
- input -- struct{A:'My Value'} --> Controller -- struct{B:'Response'} --> output
- 
- output --> ress(Response)
- 
- input -- error --> ErrorHandler
- Controller -- error --> ErrorHandler
- output -- error --> ErrorHandler
-
  click Controller "/fuego/docs/guides/controllers" "Controllers"
  click Validation "/fuego/docs/guides/validation" "Controllers"
  click InTransformation "/fuego/docs/guides/transformation" "Transformation"
  click OutTransformation "/fuego/docs/guides/transformation" "Transformation"
+ click Serialization "/fuego/docs/guides/serialization" "Serialization"
+ click Deserialization "/fuego/docs/guides/serialization" "Serialization"
  click ErrorHandler "/fuego/docs/guides/errors" "Error Handling"
 end
 
-Request -- JSON {'a':'value '} --> fuego
-fuego -- JSON {'b':'Response!'} --> Response
-
+Serialization -- JSON{b:'My Response!'} --> resp(Response)
+Controller -. JSON{b:'Custom Response!'} .-> resp(Response)
 
-fuego -- JSON {'error':'Error message', 'code': 4xx} --> Response
 
 `;
 
@@ -53,6 +46,11 @@ export function FlowChart({ selected }) {
         `style InTransformation stroke:#f33,stroke-width:4px` +
         "\n" +
         `style OutTransformation stroke:#f33,stroke-width:4px`;
+    } else if (selected === "Serialization") {
+      style +=
+        `style Serialization stroke:#f33,stroke-width:4px` +
+        "\n" +
+        `style Deserialization stroke:#f33,stroke-width:4px`;
     } else {
       style += `style ${selected} stroke:#f33,stroke-width:4px`;
     }