From 98daaf70a864ae56139950f89a5c2a40ad9c082f Mon Sep 17 00:00:00 2001
From: Scott Addie <10702007+scottaddie@users.noreply.github.com>
Date: Fri, 26 May 2023 08:38:43 -0500
Subject: [PATCH] Add DefaultAzureCredential auth flow diagram (#4654)

* Add DefaultAzureCredential auth flow diagram

* Update cspell.json

---------

Co-authored-by: Anton Kolesnyk <41349689+antkmsft@users.noreply.github.com>
---
 .vscode/cspell.json                           |  2 ++
 .../DefaultAzureCredentialAuthFlow.md         | 19 +++++++++++++++++++
 .../DefaultAzureCredentialAuthFlow.svg        |  1 +
 3 files changed, 22 insertions(+)
 create mode 100644 sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.md
 create mode 100644 sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.svg

diff --git a/.vscode/cspell.json b/.vscode/cspell.json
index d9ffa4ba4..e2c6cefd3 100644
--- a/.vscode/cspell.json
+++ b/.vscode/cspell.json
@@ -97,6 +97,7 @@
     "LPSTR",
     "LPWSTR",
     "MHSM",
+    "mmdc",
     "moxygen",
     "MSAL",
     "MSRC",
@@ -154,6 +155,7 @@
     "usgoviowa",
     "usgovvirginia",
     "vcpkg",
+    "Verdana",
     "Viet",
     "Viktor",
     "vusg",
diff --git a/sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.md b/sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.md
new file mode 100644
index 000000000..26b5d98e0
--- /dev/null
+++ b/sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.md
@@ -0,0 +1,19 @@
+```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
+%% 2. Run command: mmdc -i DefaultAzureCredentialAuthFlow.md -o DefaultAzureCredentialAuthFlow.svg
+
+flowchart LR;
+    A(Environment):::deployed ==> B(Azure CLI):::developer ==> C(Managed Identity):::deployed;
+
+    subgraph CREDENTIAL TYPES;
+        direction LR;
+        Deployed(Deployed service):::deployed ~~~ Developer(Developer):::developer;
+    end;
+
+    %% Define styles for credential type boxes
+    classDef deployed fill:#95C37E, stroke:#71AD4C;
+    classDef developer fill:#F5AF6F, stroke:#EB7C39;
+```
diff --git a/sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.svg b/sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.svg
new file mode 100644
index 000000000..252969297
--- /dev/null
+++ b/sdk/identity/azure-identity/img/mermaidjs/DefaultAzureCredentialAuthFlow.svg
@@ -0,0 +1 @@
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-7.5 -8 660.390625 204" style="max-width: 660.391px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1685029432896"><style>#mermaid-1685029432896{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1685029432896 .error-icon{fill:#552222;}#mermaid-1685029432896 .error-text{fill:#552222;stroke:#552222;}#mermaid-1685029432896 .edge-thickness-normal{stroke-width:2px;}#mermaid-1685029432896 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1685029432896 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1685029432896 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1685029432896 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1685029432896 .marker{fill:#333333;stroke:#333333;}#mermaid-1685029432896 .marker.cross{stroke:#333333;}#mermaid-1685029432896 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1685029432896 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1685029432896 .cluster-label text{fill:#333;}#mermaid-1685029432896 .cluster-label span,#mermaid-1685029432896 p{color:#333;}#mermaid-1685029432896 .label text,#mermaid-1685029432896 span,#mermaid-1685029432896 p{fill:#333;color:#333;}#mermaid-1685029432896 .node rect,#mermaid-1685029432896 .node circle,#mermaid-1685029432896 .node ellipse,#mermaid-1685029432896 .node polygon,#mermaid-1685029432896 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1685029432896 .flowchart-label text{text-anchor:middle;}#mermaid-1685029432896 .node .label{text-align:center;}#mermaid-1685029432896 .node.clickable{cursor:pointer;}#mermaid-1685029432896 .arrowheadPath{fill:#333333;}#mermaid-1685029432896 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1685029432896 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1685029432896 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-1685029432896 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-1685029432896 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1685029432896 .cluster text{fill:#333;}#mermaid-1685029432896 .cluster span,#mermaid-1685029432896 p{color:#333;}#mermaid-1685029432896 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1685029432896 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1685029432896 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-1685029432896 .deployed&gt;*{fill:#95C37E!important;stroke:#71AD4C!important;}#mermaid-1685029432896 .deployed span{fill:#95C37E!important;stroke:#71AD4C!important;}#mermaid-1685029432896 .developer&gt;*{fill:#F5AF6F!important;stroke:#EB7C39!important;}#mermaid-1685029432896 .developer span{fill:#F5AF6F!important;stroke:#EB7C39!important;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 12 20" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#flowchart-pointEnd)" style="stroke-width: 3.5px;fill:none;" class="edge-thickness-thick edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0" d="M214.6015625,171L236.97526041666666,171C259.3489583333333,171,304.0963541666667,171,330.63671875,171C357.1770833333333,171,365.5104166666667,171,369.6770833333333,171L373.84375,171"/><path marker-end="url(#flowchart-pointEnd)" style="stroke-width: 3.5px;fill:none;" class="edge-thickness-thick edge-pattern-solid flowchart-link LS-B LE-C" id="L-B-C-0" d="M456.515625,171L460.6822916666667,171C464.8489583333333,171,473.1822916666667,171,481.515625,171C489.8489583333333,171,498.1822916666667,171,502.3489583333333,171L506.515625,171"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(-7.5, -8)" class="root"><g class="clusters"><g id="subGraph0" class="cluster default flowchart-label"><rect height="104" width="323.84375" y="8" x="8" ry="0" rx="0" style=""/><g transform="translate(102.484375, 8)" class="cluster-label"><foreignObject height="19" width="134.875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">CREDENTIAL TYPES</span></div></foreignObject></g></g></g><g class="edgePaths"><path style="stroke-width: 0;fill:none;" class="edge-thickness-thick edge-pattern-solid flowchart-link LS-Deployed LE-Developer" id="L-Deployed-Developer-0" d="M169.578125,60L173.74479166666666,60C177.91145833333334,60,186.24479166666666,60,194.578125,60C202.91145833333334,60,211.24479166666666,60,215.41145833333334,60L219.578125,60"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(263.2109375, 60)" id="flowchart-Developer-14" class="node default developer flowchart-label"><rect height="34" width="87.265625" y="-17" x="-43.6328125" ry="5" rx="5" style="" class="basic label-container"/><g transform="translate(-36.1328125, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="72.265625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Developer</span></div></foreignObject></g></g><g transform="translate(101.2890625, 60)" id="flowchart-Deployed-13" class="node default deployed flowchart-label"><rect height="34" width="136.578125" y="-17" x="-68.2890625" ry="5" rx="5" style="" class="basic label-container"/><g transform="translate(-60.7890625, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="121.578125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Deployed service</span></div></foreignObject></g></g></g></g><g transform="translate(161.921875, 171)" id="flowchart-A-10" class="node default deployed flowchart-label"><rect height="34" width="105.359375" y="-17" x="-52.6796875" ry="5" rx="5" style="" class="basic label-container"/><g transform="translate(-45.1796875, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="90.359375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Environment</span></div></foreignObject></g></g><g transform="translate(415.1796875, 171)" id="flowchart-B-11" class="node default developer flowchart-label"><rect height="34" width="82.671875" y="-17" x="-41.3359375" ry="5" rx="5" style="" class="basic label-container"/><g transform="translate(-33.8359375, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="67.671875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Azure CLI</span></div></foreignObject></g></g><g transform="translate(575.703125, 171)" id="flowchart-C-12" class="node default deployed flowchart-label"><rect height="34" width="138.375" y="-17" x="-69.1875" ry="5" rx="5" style="" class="basic label-container"/><g transform="translate(-61.6875, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="123.375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Managed Identity</span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file