docs: update diagrams with mermaid (#123)

Co-authored-by: Heitor José Tessaro <[email protected]>

.nvmrc

@@ -1 +1 @@
-18.0.0
+18.17.0

docs/feature-flags/creating-feature-flags/targeting.mdx

@@ -53,11 +53,57 @@ On the targeting page, you can define a series of conditions defining which flag
 
 The below flowchart summarizes how targeting on Bucketeer works.
 
-<CenteredImg
-  imgURL="img/feature-flags/targeting/targeting-flowchart-2.svg"
-  alt="targeting flowchart panel"
-  wSize="600px"
-/>
+<div style={{ textAlign: 'center' }}>
+```mermaid
+graph TD;
+    A(Start) --> B(Is the Switch Button OFF?)
+    B -- Yes --> C(OFF variation)
+    B -- No --> D(Are there prerequisites?)
+    D -- Yes --> E(Have the prerequisites been satisfied?)
+    D -- No --> F(Are there targeting rules?)
+    E -- No --> C2(OFF variation)
+    E -- Yes --> F
+    F -- No --> H(Are there rollout percentage rules?)
+    F -- Yes --> G(Are any of the targeting rules satisfied?)
+    G -- Yes --> I(Return the corresponding variation)
+    G -- No --> H
+    H -- No --> K(Default strategy)
+    H -- Yes --> J(Are any of the rollout percentage rules satisfied?)
+    J -- No --> K
+    J -- Yes --> I2(Return the corresponding variation)
+
+    %% Styling the nodes
+    style A fill:#5d3597,color:#ffffff,stroke-width:0px;
+    style B fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style C fill:#5d3597,color:#ffffff,stroke-width:0px;
+    style C2 fill:#5d3597,color:#ffffff,stroke-width:0px;
+    style D fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style E fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style F fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style G fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style H fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style I fill:#5d3597,color:#ffffff,stroke-width:0px;
+    style I2 fill:#5d3597,color:#ffffff,stroke-width:0px;
+    style J fill:#ffffff,stroke:#5d3597,stroke-width:2px;
+    style K fill:#5d3597,color:#ffffff,stroke-width:0px;
+
+    %% Styling the links
+    linkStyle 1 stroke:green,stroke-width:2px,color:green;
+    linkStyle 2 stroke:red,stroke-width:2px,color:red;
+    linkStyle 3 stroke:green,stroke-width:2px,color:green;
+    linkStyle 4 stroke:red,stroke-width:2px,color:red;
+    linkStyle 6 stroke:green,stroke-width:2px,color:green;
+    linkStyle 5 stroke:red,stroke-width:2px,color:red;
+    linkStyle 8 stroke:green,stroke-width:2px,color:green;
+    linkStyle 7 stroke:red,stroke-width:2px,color:red;
+    linkStyle 9 stroke:green,stroke-width:2px,color:green;
+    linkStyle 10 stroke:red,stroke-width:2px,color:red;
+    linkStyle 11 stroke:red,stroke-width:2px,color:red;
+    linkStyle 12 stroke:green,stroke-width:2px,color:green;
+    linkStyle 14 stroke:green,stroke-width:2px,color:green;
+    linkStyle 13 stroke:red,stroke-width:2px,color:red;
+```
+</div>
 
 ### Prerequisites
 

docs/integration/pushes.mdx

@@ -49,13 +49,27 @@ Silent notifications can be sent without explicit user permission, but backgroun
 
 ### iOS
 
-Users must grant the **Background App Refresh** permission to receive silent notifications.
-
-<CenteredImg
-  imgURL="img/integration/pushes/push_flow.svg"
-  alt="Create push"
-  wSize="550px"
-/>
+Users must grant the **Background App Refresh** permission to receive silent notifications. Refer to the flowchart below for an overview of the push notification process.
+
+<div style={{ textAlign: 'center' }}>
+```mermaid
+%%{ init: { 'flowchart': { 'curve': 'bumpY' } } }%%
+graph TD;
+    a(A flag has been updated)-->b(Bucketeer server sends the
+     notification via FCM V1 API);
+    style a fill:#5d3597,color:#ffffff,stroke-width:0px;
+    style b fill:#ffffff,stroke:#5d3597, stroke-width:3px;
+    b-->c1(Is the Background App
+     Fetch enabled?);
+    style c1 fill:#ffffff,stroke:#5d3597, stroke-width:3px;
+    c1--Yes-->c2(Receive the notification)
+    style c2 fill:#5d3597,color:#ffffff,stroke-width:0px;
+    c1--No -->c3(Nothing happens)
+    style c3 fill:#5d3597,color:#ffffff,stroke-width:0px;
+    linkStyle 2 stroke:green,color:green, background:black;
+    linkStyle 3 stroke:red,color:red, background:black;
+```
+</div>
 
 :::info Auto cache updates
 Even if the user doesn't receive notifications, the client SDK will continue polling the latest cache from the server in the background.

docusaurus.config.js

@@ -7,7 +7,10 @@ const darkTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  themes: [],
+  markdown: {
+    mermaid: true,
+  },
+  themes: ['@docusaurus/theme-mermaid'],
   plugins: [
     [ 
       require.resolve('docusaurus-lunr-search'), {

package.json

@@ -14,9 +14,10 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.4.0",
-    "@docusaurus/plugin-google-gtag": "^3.4.0",
-    "@docusaurus/preset-classic": "^3.4.0",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/plugin-google-gtag": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/theme-mermaid": "^3.5.2",
     "@easyops-cn/docusaurus-search-local": "^0.44.4",
     "@mdx-js/react": "^3.0.1",
     "@scalar/docusaurus": "0.4.64",
@@ -28,8 +29,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.4.0",
-    "@docusaurus/types": "^3.0.1",
+    "@docusaurus/module-type-aliases": "^3.5.2",
+    "@docusaurus/types": "^3.5.2",
     "node": "20"
   },
   "browserslist": {
@@ -45,6 +46,6 @@
     ]
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.17.0"
   }
 }