feat(docs): add diagram for FAssets collateral ratio

docs/fassets/2-collateral.mdx

@@ -4,6 +4,9 @@ description: Understand how collateral works in FAssets.
 keywords: [fassets, xrp, bitcoin, dogecoin, flare-network]
 ---
 
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
 FAssets collateral is locked in contracts that ensure the minted FAssets can always be redeemed for the underlying assets they represent or compensated by collateral.
 Along with Flare's native token, FLR, any governance approved ERC-20 token on the Flare blockchain can be used as collateral.
 
@@ -116,7 +119,7 @@ Some are set by the system, and others are set by the agent:
 
 ### System-Wide Thresholds
 
-The following thresholds are set by the FAssets system's governance and are the same for all agents:
+The following thresholds are set by the FAssets system's governance and are the same for all agents.
 
 #### Minimal CR
 
@@ -158,6 +161,14 @@ Each of the collateral types, the agent's vault and the collateral pool, has its
 
 The following thresholds are set by each agent according to their own preferences.
 
+<ThemedImage
+  alt="FAssets Collateral Ratio"
+  sources={{
+    light: useBaseUrl("img/fassets/flare_fassets_collateral_ratio_light.svg"),
+    dark: useBaseUrl("img/fassets/flare_fassets_collateral_ratio_dark.svg"),
+  }}
+/>
+
 #### Minting CR
 
 For each mint done by an agent, the maximum amount allowed to be minted is calculated so that the CR for the agent's vault and the CR for the agent's collateral pool after the mint remain higher than the minting CR for each collateral type.