upgraded to Docusaurus 2.2.0, added mermaid diagrams

docusaurus.config.js

@@ -78,7 +78,11 @@ const config = {
 
   plugins: plugins,
 
-  themes: ["docusaurus-theme-openapi-docs"],
+  markdown: {
+    mermaid: true,
+  },
+
+  themes: ["docusaurus-theme-openapi-docs", "@docusaurus/theme-mermaid"],
 };
 
 module.exports = config;

package.json

@@ -21,9 +21,7 @@
     "rebuild-docs": "npm run clean-api-docs-all && npm run gen-api-docs-all"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.1",
-    "@docusaurus/plugin-google-gtag": "^2.0.1",
-    "@docusaurus/preset-classic": "2.0.1",
+    "@docusaurus/theme-mermaid": "^2.2.0",
     "@mdx-js/react": "^1.6.22",
     "@typeform/embed-react": "^1.21.0",
     "clsx": "^1.1.1",
@@ -33,8 +31,14 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "overrides": {
+    "mermaid": "9.1.7"
+  },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.1"
+    "@docusaurus/core": "^2.2.0",
+    "@docusaurus/module-type-aliases": "^2.2.0",
+    "@docusaurus/plugin-google-gtag": "^2.2.0",
+    "@docusaurus/preset-classic": "^2.2.0"
   },
   "browserslist": {
     "production": [

products/idn/api/authentication.md

@@ -26,7 +26,24 @@ IdentityNow and get an `access_token`. This `access_token` will need to be
 provided in the `Authorization` header of each API request. The steps of the
 flow are as follows:
 
-![Flow](./img/http-client-identity-now.png)
+<div align="center">
+
+```mermaid
+sequenceDiagram
+    autonumber
+    participant H as HTTP Client
+    participant I as IdentityNow
+
+    H->>I: Access Token Request
+    I->>H: Access Token Response
+
+    loop Until token expires
+    H->>I: API Request + Access Token
+    I->>H: IdentityNow API Response
+    end
+```
+
+</div>
 
 1. **Access Token Request** - The HTTP client (a script, application, Postman,
    cURL, etc.) makes a request to IdentityNow to get an `access_token`. The
@@ -285,7 +302,25 @@ grant types. The redirect URLs must also match the list in the client as well:
 
 ### Authorization Flow
 
-![Flow](./img/user-web-app-identity-now.png)
+<div align="center">
+
+```mermaid
+sequenceDiagram
+    autonumber
+    participant U as User
+    participant W as Web App
+    participant I as IdentityNow
+
+    U->>W: Click login link
+    W->>I: Authorization request to https://{tenant}.identitynow.com/oauth/authorize
+    I->>U: Redirect to login prompt
+    U->>I: Authentication
+    I->>W: Authorization code granted
+    W->>I: Authorization code to https://{tenant}.api.identitynow.com/oauth/token
+    I->>W: JWT access token granted
+```
+
+</div>
 
 1. The user clicks the login link on a web app.
 

products/idn/docs/identity-now/transforms/index.md

@@ -22,7 +22,14 @@ Transforms are configurable objects that define easy ways to manipulate
 attribute data without requiring you to write code. Transforms are configurable
 building blocks with sets of inputs and outputs:
 
-![What are Transforms 1](./img/what_are_transforms_1.png)
+<div align="center">
+
+```mermaid
+flowchart LR
+  id1(Input) ====> id2[Transform] ====> id3([Output])
+```
+
+</div>
 
 Because there is no code to write, an administrator can configure these by using
 a JSON object structure and uploading them into IdentityNow using
@@ -46,14 +53,28 @@ For example, a [Lower transform](./operations/lower.md) transforms any input
 text strings into lowercase versions as output. So if the input were `Foo`, the
 lowercase output of the transform would be `foo`:
 
-![How Transforms Work 1](./img/how_transforms_work_1.png)
+<div align="center">
+
+```mermaid
+flowchart LR
+  id1(Foo) ====> id2[Lower Transform] ====> id3(foo)
+```
+
+</div>
 
 There are other types of transforms too. For example, an
 [E.164 Phone transform](./operations/e164-phone.md) transforms any input phone
 number strings into an E.164 formatted version as output. So if the input were
 `(512) 346-2000`, the output would be `+1 5123462000`:
 
-![How Transforms Work 2](./img/how_transforms_work_2.png)
+<div align="center">
+
+```mermaid
+flowchart LR
+  id1("(512) 346-2000") ====> id2[E.164 Transform] ====> id3(+1 5123462000)
+```
+
+</div>
 
 ### Multiple Transform Inputs
 
@@ -63,7 +84,15 @@ specify more than one input. For example, the
 strings together. If `Foo` and `Bar` were inputs, the transformed output would
 be `FooBar`:
 
-![How Transforms Work 3](./img/how_transforms_work_3.png)
+<div align="center">
+
+```mermaid
+flowchart LR
+  id1(Foo) ====> id2[Concat Transform] ====> id3(FooBar)
+  id4(Bar) ====> id2[Concat Transform]
+```
+
+</div>
 
 ### Complex Nested Transforms
 
@@ -77,7 +106,15 @@ input to another [Lower transform](./operations/lower.md). If the inputs `Foo`
 and `Bar` were passed into the transforms, the ultimate output would be
 `foobar`, concatenated and in lowercase.
 
-![How Transforms Work 4](./img/how_transforms_work_4.png)
+<div align="center">
+
+```mermaid
+flowchart LR
+  id1(Foo) ====> id2[Concat Transform] ====> id3[Lower Transform] ====> id4(foobar)
+  id5(Bar) ====> id2[Concat Transform]
+```
+
+</div>
 
 There is no hard limit for the number of transforms that can be nested. However,
 the more transforms applied, the more complex the nested transform will be,
@@ -96,7 +133,15 @@ Replace transform, which replaces certain strings with replacement text, were
 added, and the transform were configured to replace `Bar` with `Baz` the output
 would be added as an input to the Concat and Lower transforms:
 
-![Configuring Transform Behavior 1](./img/configuring_transform_behavior_1.png)
+<div align="center">
+
+```mermaid
+flowchart LR
+  id1(Foo) ====> id2[Concat Transform] ====> id3[Lower Transform] ====> id4(foobaz)
+  id5(Bar) ====> id6[Replace Transform\n Bar:Baz] ====> id2[Concat Transform]
+```
+
+</div>
 
 The output of the Replace transform would be `Baz` which is then passed as an
 input to the Concat transform along with `Foo` producing an output of `FooBaz`.