feat: replace architecture illustrations from plain images and svgs t…

…o mermaid

apps/www/docs/carriers/sdk/architecture.mdx

@@ -3,62 +3,83 @@ id: architecture
 title: Architecture
 ---
 
+import Mermaid from "@theme/Mermaid";
+
 ## Overview
 
 karrio proposes a set of unified APIs accepting all required data to send requests to the supported carrier services.
 
 The typical data flows for all requests processed by karrio is illustrated bellow.
 
-<figure>
-  <img style={{ borderRadius: 5 }} src="/img/assets/karrio-sequence-diagram.svg" width="100%" />
-  <figcaption>karrio - Sequence</figcaption>
-</figure>
+<Mermaid
+    value={`
+    sequenceDiagram
+        participant User as 👤
+        participant API
+        participant Mapper
+        participant Proxy
+        participant Carrier as Carrier webservice
+
+        Note over API: Unified Datatypes
+        Note over Carrier: Carrier webservice
+
+        User->>API: JSON data
+        API->>Mapper: Validated unified request payload
+        Mapper->>Proxy: Serializable<br/>Carrier specific datatype
+        Proxy->>Carrier: HTTP Request
+        Carrier-->>Proxy: HTTP Response
+        Proxy-->>Mapper: Deserializable<br/>Carrier specific response<br/>(JSON, XML, ...)
+        Mapper-->>API: Parsed unified response data
+        API-->>User: JSON data
+    `}
+
+/>
 
 To accomplish this, the overall abstraction proposed by karrio come down to the implementation these abstract classes.
 
 <figure>
-  <img style={{ borderRadius: 5 }} src="/img/assets/karrio-class-diagram.svg" width="100%" />
-  <figcaption>karrio - Class Diagram</figcaption>
+    <img
+        style={{ borderRadius: 5 }}
+        src="/img/assets/karrio-class-diagram.svg"
+        width="100%"
+    />
+    <figcaption>karrio - Class Diagram</figcaption>
 </figure>
 
-
 ### The `Settings`
 
 :::info
-  The `Settings` class defines all the carrier specific credential required to authenticate connections
-  and additionally
-
-  - a unique `carrier_name` (a readonly name. e.g: canadapost)
-  - a unique `carrier_id` (a nickname provided for each instance. e.g: canadapost_test_account)
-  - optionally an `account_country_code` (a country specific account number)
-  - optionally a unique `id` reference in your system or a database
-:::
+The `Settings` class defines all the carrier specific credential required to authenticate connections
+and additionally
 
+-   a unique `carrier_name` (a readonly name. e.g: canadapost)
+-   a unique `carrier_id` (a nickname provided for each instance. e.g: canadapost_test_account)
+-   optionally an `account_country_code` (a country specific account number)
+-   optionally a unique `id` reference in your system or a database
+    :::
 
 ### The `Mapper`
 
 :::info
-  The `Mapper` class translates the unified karrio API data into carrier specific data to send requests
-  and also takes care or parsing the response returned back into a unified data model
+The `Mapper` class translates the unified karrio API data into carrier specific data to send requests
+and also takes care or parsing the response returned back into a unified data model
 
-  Learn more about the Mapper pattern from [Martin Fowler Enterprise Pattern](https://martinfowler.com/eaaCatalog/dataMapper.html)
+Learn more about the Mapper pattern from [Martin Fowler Enterprise Pattern](https://martinfowler.com/eaaCatalog/dataMapper.html)
 :::
 
-
 ### The `Proxy`
 
 :::info
-  The `Proxy` class defines one or many HTTP requests required to communicate with a carrier service
+The `Proxy` class defines one or many HTTP requests required to communicate with a carrier service
 
-  [Learn more about the Proxy pattern](https://en.wikipedia.org/wiki/Proxy_pattern)
+[Learn more about the Proxy pattern](https://en.wikipedia.org/wiki/Proxy_pattern)
 :::
 
-
 ## In practice
 
 This is how these classes come together to make a request to a carrier service
 
-```python
+````python
 from karrio.mappers.canadapost import Settings, Mapper, Proxy
 
 # Instantiate a connection settings
@@ -118,23 +139,22 @@ print(pickup_response)
     ),
     [] # message and error list here
 )
-```
+````
 
 :::info
-  The example above illustrates a Pickup scheduling but the idea is that all requests made by karrio follow the same lifecycle:
+The example above illustrates a Pickup scheduling but the idea is that all requests made by karrio follow the same lifecycle:
 
-  - convert unified karrio API data into a carrier specific request using the `Mapper`
-  - send the request to the carrier using the `Proxy`
-  - and parse back the response into a unified karrio data using the `Mapper`
-:::
+-   convert unified karrio API data into a carrier specific request using the `Mapper`
+-   send the request to the carrier using the `Proxy`
+-   and parse back the response into a unified karrio data using the `Mapper`
+    :::
 
 :::caution
-  Note that karrio does not raise exceptions when there is a failure during requests but rather always return
-  a tuple of a `response` if `successful` with a list of `messages` if any **notes**, **messages** or **errors**
-  in case of `failures` are returned.
+Note that karrio does not raise exceptions when there is a failure during requests but rather always return
+a tuple of a `response` if `successful` with a list of `messages` if any **notes**, **messages** or **errors**
+in case of `failures` are returned.
 :::
 
-
 ## Fluent API
 
 Once you understand the lifecycle above, you can send any requests supported by karrio with the same mental model.
@@ -170,8 +190,8 @@ pickup_response = pickup_request.with_(canadapost_gateway).parse()
 ```
 
 :::info
-  Note the concept of Gateway introduced here to encapsulate the access to the external system that are carrier servers
-  in our case.
+Note the concept of Gateway introduced here to encapsulate the access to the external system that are carrier servers
+in our case.
 
-  Learn more about the Gateway pattern from [Martin Fowler Enterprise Pattern](https://martinfowler.com/eaaCatalog/gateway.html)
+Learn more about the Gateway pattern from [Martin Fowler Enterprise Pattern](https://martinfowler.com/eaaCatalog/gateway.html)
 :::

apps/www/docs/product.mdx

@@ -14,45 +14,46 @@ From live rates, label generation, tracking, to address validation, Karrio provi
 
 ## Explore the docs
 
-- ### [Connections](/product/connections)
+-   ### [Connections](/product/connections)
 
-  View and manage all carrier connections for your account and organizations.
+    View and manage all carrier connections for your account and organizations.
 
-- ### [Shipments](/product/shipments)
+-   ### [Shipments](/product/shipments)
 
-  View all shipments processed by your team, generate and print new labels.
+    View all shipments processed by your team, generate and print new labels.
 
-- ### [Trackers](/product/trackers)
+-   ### [Trackers](/product/trackers)
 
-  Karrio trackers give your real time statuses of your shipments.<br/>
-  Add new trackers for shipments created outside of Karrio.
+    Karrio trackers give you real time statuses of shipments.<br/>
+    Add new trackers for shipments created outside of Karrio.
 
-- ### [Orders](/product/orders)
+-   ### [Orders](/product/orders)
 
-  View and fulfil orders synced between Karrio and your ERP or e-commerce platform.
+    View and fulfil orders synced between Karrio and your ERP or e-commerce platform.
 
-- ### [Workflows](/product/workflows)
-  Karrio workflows is a poor-man automation tool but powerful to provide all you need 
-  to sync data across your logistics and commerce software stack.
+-   ### [Workflows](/product/workflows)
 
-- ### [Webhooks](/product/webhooks)
+    Karrio workflows is a poor-man automation tool but powerful to provide all you need
+    to sync data across your logistics and commerce software stack.
 
-  Webhooks comes handy to keep to apps in sync with each other. <br/>
-  Add and manage webhooks event to keep your systems up to date with orders and shipments.
+-   ### [Webhooks](/product/webhooks)
 
-- ### [API Logs](/product/api-logs)
+    Webhooks comes handy to keep to apps in sync with each other. <br/>
+    Add and manage webhooks event to keep your systems up to date with orders and shipments.
 
-  Karrio API logs offer traceable details of requests made by your account. <br/>
-  This gives you full transparency for auditing down to the requests made to carriers on your behalf.
+-   ### [API Logs](/product/api-logs)
 
-- ### [Events](/product/events)
+    Karrio API logs offer traceable details of requests made by your account. <br/>
+    This gives you full transparency for auditing down to the requests made to carriers on your behalf.
 
-  View and track down lifecycle events of your orders, shipments and trackers. <br/>
-  You can register webhooks to notify external apps of shipping processes milestones.
+-   ### [Events](/product/events)
 
-- ### [Document Templates](/product/document-templates)
-  View and manage all custom document templates designed for your orders and shipments.
+    View and track down lifecycle events of your orders, shipments and trackers. <br/>
+    You can register webhooks to notify external apps of shipping processes milestones.
+
+-   ### [Document Templates](/product/document-templates)
+    View and manage all custom document templates designed for your orders and shipments.
 
 ## Next steps
 
-- [Discussions](https://github.com/karrioapi/karrio/discussions): find out if your questions were already answered.
+-   [Discussions](https://github.com/karrioapi/karrio/discussions): find out if your questions were already answered.