Mermaid diagrams from images (#124)

* account creation diagram

* customization diagrams

* image ref

* webhook diagram and title

* medium gray for light and dark mode

* titles

---------

Co-authored-by: Atul-Butola <[email protected]>

Author: bc-devrev

fern/docs/img/customization-stage-diagram.png

@@ -7,7 +7,13 @@ of the snap-in.
 
 ```mermaid
 sequenceDiagram
-%%{init: { "fontFamily": "Segoe UI" } }%%
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'signalColor': '#7d7f7c',
+        'signalTextColor': '#7d7f7c'
+}}}%%
   actor user as User
   participant gw as REST API Gateway
   participant ad as Airdrop components

fern/docs/img/customization-stage-transition.png

@@ -9,7 +9,12 @@ It enables developers to create external workers (extractors and loaders) to bri
 
 ```mermaid
 flowchart TD
-%%{init: { "fontFamily": "Segoe UI" } }%%
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'lineColor': '#7d7f7c'
+}}}%%
 externalSystem[External system]
 worker([Worker])
 s3interact[s3interact]

fern/docs/img/customization-versioning.png

@@ -8,7 +8,29 @@ The `rev-users.create` API is used to create [contacts](https://docs.devrev.ai/p
 Just want to get a token and get started? This [tutorial](/about/authentication#generate-a-personal-access-token-pat) teaches you the fastest way to get a token.
 </Callout>
 
-![mermaid-diagram](../img/mermaid.png)
+```mermaid
+flowchart TD
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'lineColor': '#7d7f7c'
+}}}%%
+acct-create[accounts.create]
+exist(((Account is existing
+'account ID')))
+list[rev-orgs.list with 
+'account' filter]
+get[rev-orgs.get with
+'account ID']
+display(((Get rev-org 'display_id')))
+rev-user-create[Create a 'rev-user' under 'contact']
+acct-create --> exist -->|Yes|get
+exist -->|No|list
+get --> display
+list --> display
+display --> rev-user-create
+```
 
 ## Create an account
 

fern/docs/img/diagram_4.png

@@ -288,7 +288,23 @@ field in the old fragment points to the new fragment.
 The diagram below shows the relationship between the fragments and how the versioning
 scheme preserves the referential integrity.
 
-![Fragment Versioning](../img/customization-versioning.png)
+```mermaid Fragment versioning
+flowchart LR
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'lineColor': '#7d7f7c'
+}}}%%
+subgraph Versions
+  v1[Fragment v1]
+  v2[Fragment v2]
+  v1 --> v2
+end
+o1[Object 1] -.-> v1
+o2[Object 2] -.-> v1
+o3[Object 3] -.-> v2
+```
 
 ### Object upgrades
 
@@ -453,7 +469,16 @@ instead.
 Stages represent the different phases an object can be in during its lifecycle. For
 example, an issue might go through the following lifecycle:
 
-![Issue Lifecycle](../img/customization-stage-transition.png)
+```mermaid Issue stages
+flowchart LR
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'lineColor': '#7d7f7c'
+}}}%%
+Backlog --> dev[In development] --> Completed
+```
 
 Customizing the stages allows you to tailor the object lifecycle to your organization's
 specific requirements.
@@ -491,7 +516,24 @@ For example, _triage_ stage can transition to _backlog_ stage but not vice versa
 
 Let's create a stage diagram for the _bug_ subtype:
 
-![Stage Diagram](../img/customization-stage-diagram.png)
+```mermaid Bug stages
+flowchart LR
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'lineColor': '#7d7f7c'
+}}}%%
+backl[**Backlog**
+don:core:dvrv-us-1:devo/11FVC3ScK:stage/1]
+dev[**In development**
+don:core:dvrv-us-1:devo/11FVC3ScK:stage/2]
+rca[**Needs RCA**
+don:core:dvrv-us-1:devo/11FVC3ScK:stage/3]
+compl[**Completed**
+don:core:dvrv-us-1:devo/11FVC3ScK:stage/4]
+backl --> dev --> rca --> compl
+```
 
 ```curl {11}
 curl --location 'https://api.devrev.ai/stage-diagrams.create' \

fern/docs/img/mermaid.png

@@ -14,7 +14,24 @@ The types of events that can be received through webhooks are object mutation ev
 Events are delivered concurrently in a semi-ordered (but not guaranteed) manner,
 where object timestamps and versions enable you to determine the order of events for a particular object.
 
-![diagram_4](../img/diagram_4.png)
+```mermaid
+sequenceDiagram
+%%{init: {
+    'theme': 'base',
+    'themeVariables': {
+        'fontFamily': 'Segoe UI',
+        'signalColor': '#7d7f7c',
+        'signalTextColor': '#7d7f7c'
+}}}%%
+Note over Customer endpoint,DevRev: 1. Register webhook
+Customer endpoint ->> DevRev: Webhook create request
+DevRev -->> Customer endpoint: Webhook create response
+Note over Customer endpoint,DevRev: 2. Verify webhook registration
+DevRev ->> Customer endpoint: Verify request
+Customer endpoint -->> DevRev: Echo challenge
+Note over Customer endpoint,DevRev: 3. Receive webhook event
+DevRev ->> Customer endpoint: Event POST
+```
 
 ## Webhook event handling
 

fern/docs/pages/adaas/extraction-phases.mdx

@@ -11,9 +11,9 @@ navigation:
       typescript: "@devrev/api"
   - section: Guides
     contents:
-      - page: Object Customization
+      - page: Object customization
         path: ../docs/pages/customization.mdx
-      - page: Custom Objects
+      - page: Custom objects
         path: ../docs/pages/custom-objects.mdx
-      - page: Create accounts and contacts in DevRev
+      - page: Account creation
         path: ../docs/pages/create-accounts.mdx

fern/docs/pages/adaas/overview.mdx

@@ -59,7 +59,7 @@ navigation:
   - section: Guides
     slug: guides
     contents:
-      - page: Getting started with webhooks
+      - page: Webhooks
         slug: webhooks
         path: ../docs/pages/webhooks.mdx
       - page: Restricted messages on a timeline