Reformat DefaultAzureCredential flow chart (#5829)

sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.md

@@ -1,18 +1,31 @@
 ```mermaid
 %% STEPS TO GENERATE IMAGE
 %% =======================
-%% 1. Install mermaid CLI (see https://github.com/mermaid-js/mermaid-cli/blob/master/README.md)
-%%    v10.0.2 is known good for our process. npm install -g @mermaid-js/mermaid-cli@10.0.2
+%% 1. Install mermaid CLI v10.9.1 (see https://github.com/mermaid-js/mermaid-cli/blob/master/README.md):
+%%    npm i -g @mermaid-js/mermaid-cli@10.9.1
 %% 2. Run command: mmdc -i DefaultAzureCredentialAuthFlow.md -o DefaultAzureCredentialAuthFlow.svg
 
-flowchart LR;
-    A(Environment):::deployed ==> B(Workload Identity):::deployed ==> C(Azure CLI):::developer ==> D(Managed Identity):::deployed;
+%%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'tertiaryBorderColor': '#fff',
+      'tertiaryColor': '#fff'
+    }
+  }
+}%%
 
+flowchart LR;
     subgraph CREDENTIAL TYPES;
         direction LR;
         Deployed(Deployed service):::deployed ~~~ Developer(Developer):::developer;
     end;
 
+    subgraph CREDENTIALS;
+        direction LR;
+        A(Environment):::deployed ==> B(Workload Identity):::deployed ==> C(Azure CLI):::developer ==> D(Managed Identity):::deployed;
+    end;
+
     %% Define styles for credential type boxes
     classDef deployed fill:#95C37E, stroke:#71AD4C;
     classDef developer fill:#F5AF6F, stroke:#EB7C39;