diff --git a/Troubleshooting-issues-with-samples.md b/Troubleshooting-issues-with-samples.md
index 944bb19..5f977a6 100644
--- a/Troubleshooting-issues-with-samples.md
+++ b/Troubleshooting-issues-with-samples.md
@@ -4,7 +4,7 @@ This article should help you resolve the majority of issues, starting with the m
 
 Once you have performed the steps in this article, you can proceed with creating an issue -- but make sure to read [how to create good issues](How-to-create-good-issues) first, because the people who support these samples are all volunteers, and we certainly want to be respectful of their time, *don't we*?
 
-Items marked with a :link: can be found in the [useful links](#useful-links) section.
+Items marked with a :link: can be found on this page.
 
 ![Troubleshooting](./assets/troubleshooting1.svg)
 
@@ -12,23 +12,9 @@ Items marked with a :link: can be found in the [useful links](#useful-links) sec
 
 Please note that warnings will rarely prevent the solution from working; We only worry about errors.
 
-```mermaid
-graph TD
-    A([Run npm install])
-    A --> B{Errors?}
-    B --> |No| Z([Try gulp build])
-    B --> |Yes| C{Are you in root of project?} --> |No| D["Change directory to root of project #128279;"] --> |Retry|A
-    C --> |Yes| E{Running on Windows?} 
-    E --> |Yes| F{Path too long?} --> |Yes| H[Move project to shorter path] --> |Retry|A
-    E --> |No| K["Run spfx doctor #128279;"]
-    K --> J{Any reported issues?} --> |Yes| L[Fix compatibility issues] --> |Retry|A
-    K --> |No| M{Did you change <br/> versions of nodejs<br/> after downloading sample?} --> |Yes| N[Run npm rebuild node-sass] --> |Retry|A
-    M --> |No| O(["Before you open a new issue #128279;"])
-    click K "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#run-spfx-doctor"
-    click D "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#change-directory-to-root-of-project"
-    click O "https://github.com/pnp/sp-dev-fx-webparts/wiki/Before-you-open-an-issue"
-    style A fill:#2da44e,color:#fff,stroke:#1b1f2426
-```
+Items marked with a :link: can be found on this page.
+
+![Troubleshooting npm install](./assets/troubleshooting2.svg)
 
 ### Change directory to root of project
 
diff --git a/assets/troubleshooting2.svg b/assets/troubleshooting2.svg
new file mode 100644
index 0000000..f77fa9e
--- /dev/null
+++ b/assets/troubleshooting2.svg
@@ -0,0 +1,1262 @@
+<svg id="mermaid-1648363556759" width="1950.120849609375" xmlns="http://www.w3.org/2000/svg" height="1469.24755859375"
+    viewBox="0 0 1950.120849609375 1469.24755859375">
+    <style>
+        #mermaid-1648363556759 .label {
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family);
+            color: #333
+        }
+
+        #mermaid-1648363556759 .label text {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .node rect,
+        #mermaid-1648363556759 .node circle,
+        #mermaid-1648363556759 .node ellipse,
+        #mermaid-1648363556759 .node polygon,
+        #mermaid-1648363556759 .node path {
+            fill: #ECECFF;
+            stroke: #9370db;
+            stroke-width: 1px
+        }
+
+        #mermaid-1648363556759 .node .label {
+            text-align: center
+        }
+
+        #mermaid-1648363556759 .node.clickable {
+            cursor: pointer
+        }
+
+        #mermaid-1648363556759 .arrowheadPath {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .edgePath .path {
+            stroke: #333;
+            stroke-width: 1.5px
+        }
+
+        #mermaid-1648363556759 .edgeLabel {
+            background-color: #e8e8e8;
+            text-align: center
+        }
+
+        #mermaid-1648363556759 .edgeLabel rect {
+            opacity: 0.5
+        }
+
+        #mermaid-1648363556759 .cluster rect {
+            fill: #ffffde;
+            stroke: #aa3;
+            stroke-width: 1px
+        }
+
+        #mermaid-1648363556759 .cluster text {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 div.mermaidTooltip {
+            position: absolute;
+            text-align: center;
+            max-width: 200px;
+            padding: 2px;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family);
+            font-size: 12px;
+            background: #ffffde;
+            border: 1px solid #aa3;
+            border-radius: 2px;
+            pointer-events: none;
+            z-index: 100
+        }
+
+        #mermaid-1648363556759 .actor {
+            stroke: #ccf;
+            fill: #ECECFF
+        }
+
+        #mermaid-1648363556759 text.actor {
+            fill: #000;
+            stroke: none
+        }
+
+        #mermaid-1648363556759 .actor-line {
+            stroke: grey
+        }
+
+        #mermaid-1648363556759 .messageLine0 {
+            stroke-width: 1.5;
+            stroke-dasharray: '2 2';
+            stroke: #333
+        }
+
+        #mermaid-1648363556759 .messageLine1 {
+            stroke-width: 1.5;
+            stroke-dasharray: '2 2';
+            stroke: #333
+        }
+
+        #mermaid-1648363556759 #arrowhead {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .sequenceNumber {
+            fill: #fff
+        }
+
+        #mermaid-1648363556759 #sequencenumber {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 #crosshead path {
+            fill: #333 !important;
+            stroke: #333 !important
+        }
+
+        #mermaid-1648363556759 .messageText {
+            fill: #333;
+            stroke: none
+        }
+
+        #mermaid-1648363556759 .labelBox {
+            stroke: #ccf;
+            fill: #ECECFF
+        }
+
+        #mermaid-1648363556759 .labelText {
+            fill: #000;
+            stroke: none
+        }
+
+        #mermaid-1648363556759 .loopText {
+            fill: #000;
+            stroke: none
+        }
+
+        #mermaid-1648363556759 .loopLine {
+            stroke-width: 2;
+            stroke-dasharray: '2 2';
+            stroke: #ccf
+        }
+
+        #mermaid-1648363556759 .note {
+            stroke: #aa3;
+            fill: #fff5ad
+        }
+
+        #mermaid-1648363556759 .noteText {
+            fill: black;
+            stroke: none;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family);
+            font-size: 14px
+        }
+
+        #mermaid-1648363556759 .activation0 {
+            fill: #f4f4f4;
+            stroke: #666
+        }
+
+        #mermaid-1648363556759 .activation1 {
+            fill: #f4f4f4;
+            stroke: #666
+        }
+
+        #mermaid-1648363556759 .activation2 {
+            fill: #f4f4f4;
+            stroke: #666
+        }
+
+        #mermaid-1648363556759 .mermaid-main-font {
+            font-family: "trebuchet ms", verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .section {
+            stroke: none;
+            opacity: 0.2
+        }
+
+        #mermaid-1648363556759 .section0 {
+            fill: rgba(102, 102, 255, 0.49)
+        }
+
+        #mermaid-1648363556759 .section2 {
+            fill: #fff400
+        }
+
+        #mermaid-1648363556759 .section1,
+        #mermaid-1648363556759 .section3 {
+            fill: #fff;
+            opacity: 0.2
+        }
+
+        #mermaid-1648363556759 .sectionTitle0 {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .sectionTitle1 {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .sectionTitle2 {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .sectionTitle3 {
+            fill: #333
+        }
+
+        #mermaid-1648363556759 .sectionTitle {
+            text-anchor: start;
+            font-size: 11px;
+            text-height: 14px;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .grid .tick {
+            stroke: #d3d3d3;
+            opacity: 0.8;
+            shape-rendering: crispEdges
+        }
+
+        #mermaid-1648363556759 .grid .tick text {
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .grid path {
+            stroke-width: 0
+        }
+
+        #mermaid-1648363556759 .today {
+            fill: none;
+            stroke: red;
+            stroke-width: 2px
+        }
+
+        #mermaid-1648363556759 .task {
+            stroke-width: 2
+        }
+
+        #mermaid-1648363556759 .taskText {
+            text-anchor: middle;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .taskText:not([font-size]) {
+            font-size: 11px
+        }
+
+        #mermaid-1648363556759 .taskTextOutsideRight {
+            fill: #000;
+            text-anchor: start;
+            font-size: 11px;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .taskTextOutsideLeft {
+            fill: #000;
+            text-anchor: end;
+            font-size: 11px
+        }
+
+        #mermaid-1648363556759 .task.clickable {
+            cursor: pointer
+        }
+
+        #mermaid-1648363556759 .taskText.clickable {
+            cursor: pointer;
+            fill: #003163 !important;
+            font-weight: bold
+        }
+
+        #mermaid-1648363556759 .taskTextOutsideLeft.clickable {
+            cursor: pointer;
+            fill: #003163 !important;
+            font-weight: bold
+        }
+
+        #mermaid-1648363556759 .taskTextOutsideRight.clickable {
+            cursor: pointer;
+            fill: #003163 !important;
+            font-weight: bold
+        }
+
+        #mermaid-1648363556759 .taskText0,
+        #mermaid-1648363556759 .taskText1,
+        #mermaid-1648363556759 .taskText2,
+        #mermaid-1648363556759 .taskText3 {
+            fill: #fff
+        }
+
+        #mermaid-1648363556759 .task0,
+        #mermaid-1648363556759 .task1,
+        #mermaid-1648363556759 .task2,
+        #mermaid-1648363556759 .task3 {
+            fill: #8a90dd;
+            stroke: #534fbc
+        }
+
+        #mermaid-1648363556759 .taskTextOutside0,
+        #mermaid-1648363556759 .taskTextOutside2 {
+            fill: #000
+        }
+
+        #mermaid-1648363556759 .taskTextOutside1,
+        #mermaid-1648363556759 .taskTextOutside3 {
+            fill: #000
+        }
+
+        #mermaid-1648363556759 .active0,
+        #mermaid-1648363556759 .active1,
+        #mermaid-1648363556759 .active2,
+        #mermaid-1648363556759 .active3 {
+            fill: #bfc7ff;
+            stroke: #534fbc
+        }
+
+        #mermaid-1648363556759 .activeText0,
+        #mermaid-1648363556759 .activeText1,
+        #mermaid-1648363556759 .activeText2,
+        #mermaid-1648363556759 .activeText3 {
+            fill: #000 !important
+        }
+
+        #mermaid-1648363556759 .done0,
+        #mermaid-1648363556759 .done1,
+        #mermaid-1648363556759 .done2,
+        #mermaid-1648363556759 .done3 {
+            stroke: grey;
+            fill: #d3d3d3;
+            stroke-width: 2
+        }
+
+        #mermaid-1648363556759 .doneText0,
+        #mermaid-1648363556759 .doneText1,
+        #mermaid-1648363556759 .doneText2,
+        #mermaid-1648363556759 .doneText3 {
+            fill: #000 !important
+        }
+
+        #mermaid-1648363556759 .crit0,
+        #mermaid-1648363556759 .crit1,
+        #mermaid-1648363556759 .crit2,
+        #mermaid-1648363556759 .crit3 {
+            stroke: #f88;
+            fill: red;
+            stroke-width: 2
+        }
+
+        #mermaid-1648363556759 .activeCrit0,
+        #mermaid-1648363556759 .activeCrit1,
+        #mermaid-1648363556759 .activeCrit2,
+        #mermaid-1648363556759 .activeCrit3 {
+            stroke: #f88;
+            fill: #bfc7ff;
+            stroke-width: 2
+        }
+
+        #mermaid-1648363556759 .doneCrit0,
+        #mermaid-1648363556759 .doneCrit1,
+        #mermaid-1648363556759 .doneCrit2,
+        #mermaid-1648363556759 .doneCrit3 {
+            stroke: #f88;
+            fill: #d3d3d3;
+            stroke-width: 2;
+            cursor: pointer;
+            shape-rendering: crispEdges
+        }
+
+        #mermaid-1648363556759 .milestone {
+            transform: rotate(45deg) scale(0.8, 0.8)
+        }
+
+        #mermaid-1648363556759 .milestoneText {
+            font-style: italic
+        }
+
+        #mermaid-1648363556759 .doneCritText0,
+        #mermaid-1648363556759 .doneCritText1,
+        #mermaid-1648363556759 .doneCritText2,
+        #mermaid-1648363556759 .doneCritText3 {
+            fill: #000 !important
+        }
+
+        #mermaid-1648363556759 .activeCritText0,
+        #mermaid-1648363556759 .activeCritText1,
+        #mermaid-1648363556759 .activeCritText2,
+        #mermaid-1648363556759 .activeCritText3 {
+            fill: #000 !important
+        }
+
+        #mermaid-1648363556759 .titleText {
+            text-anchor: middle;
+            font-size: 18px;
+            fill: #000;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 g.classGroup text {
+            fill: #9370db;
+            stroke: none;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family);
+            font-size: 10px
+        }
+
+        #mermaid-1648363556759 g.classGroup text .title {
+            font-weight: bolder
+        }
+
+        #mermaid-1648363556759 g.clickable {
+            cursor: pointer
+        }
+
+        #mermaid-1648363556759 g.classGroup rect {
+            fill: #ECECFF;
+            stroke: #9370db
+        }
+
+        #mermaid-1648363556759 g.classGroup line {
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 .classLabel .box {
+            stroke: none;
+            stroke-width: 0;
+            fill: #ECECFF;
+            opacity: 0.5
+        }
+
+        #mermaid-1648363556759 .classLabel .label {
+            fill: #9370db;
+            font-size: 10px
+        }
+
+        #mermaid-1648363556759 .relation {
+            stroke: #9370db;
+            stroke-width: 1;
+            fill: none
+        }
+
+        #mermaid-1648363556759 .dashed-line {
+            stroke-dasharray: 3
+        }
+
+        #mermaid-1648363556759 #compositionStart {
+            fill: #9370db;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #compositionEnd {
+            fill: #9370db;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #aggregationStart {
+            fill: #ECECFF;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #aggregationEnd {
+            fill: #ECECFF;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #dependencyStart {
+            fill: #9370db;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #dependencyEnd {
+            fill: #9370db;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #extensionStart {
+            fill: #9370db;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 #extensionEnd {
+            fill: #9370db;
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 .commit-id,
+        #mermaid-1648363556759 .commit-msg,
+        #mermaid-1648363556759 .branch-label {
+            fill: lightgrey;
+            color: lightgrey;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .pieTitleText {
+            text-anchor: middle;
+            font-size: 25px;
+            fill: #000;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .slice {
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 g.stateGroup text {
+            fill: #9370db;
+            stroke: none;
+            font-size: 10px;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 g.stateGroup text {
+            fill: #9370db;
+            stroke: none;
+            font-size: 10px
+        }
+
+        #mermaid-1648363556759 g.stateGroup .state-title {
+            font-weight: bolder;
+            fill: #000
+        }
+
+        #mermaid-1648363556759 g.stateGroup rect {
+            fill: #ECECFF;
+            stroke: #9370db
+        }
+
+        #mermaid-1648363556759 g.stateGroup line {
+            stroke: #9370db;
+            stroke-width: 1
+        }
+
+        #mermaid-1648363556759 .transition {
+            stroke: #9370db;
+            stroke-width: 1;
+            fill: none
+        }
+
+        #mermaid-1648363556759 .stateGroup .composit {
+            fill: white;
+            border-bottom: 1px
+        }
+
+        #mermaid-1648363556759 .stateGroup .alt-composit {
+            fill: #e0e0e0;
+            border-bottom: 1px
+        }
+
+        #mermaid-1648363556759 .state-note {
+            stroke: #aa3;
+            fill: #fff5ad
+        }
+
+        #mermaid-1648363556759 .state-note text {
+            fill: black;
+            stroke: none;
+            font-size: 10px
+        }
+
+        #mermaid-1648363556759 .stateLabel .box {
+            stroke: none;
+            stroke-width: 0;
+            fill: #ECECFF;
+            opacity: 0.5
+        }
+
+        #mermaid-1648363556759 .stateLabel text {
+            fill: #000;
+            font-size: 10px;
+            font-weight: bold;
+            font-family: 'trebuchet ms', verdana, arial;
+            font-family: var(--mermaid-font-family)
+        }
+
+        #mermaid-1648363556759 .node circle.state-start {
+            fill: black;
+            stroke: black
+        }
+
+        #mermaid-1648363556759 .node circle.state-end {
+            fill: black;
+            stroke: white;
+            stroke-width: 1.5
+        }
+
+        #mermaid-1648363556759 #statediagram-barbEnd {
+            fill: #9370db
+        }
+
+        #mermaid-1648363556759 .statediagram-cluster rect {
+            fill: #ECECFF;
+            stroke: #9370db;
+            stroke-width: 1px
+        }
+
+        #mermaid-1648363556759 .statediagram-cluster rect.outer {
+            rx: 5px;
+            ry: 5px
+        }
+
+        #mermaid-1648363556759 .statediagram-state .divider {
+            stroke: #9370db
+        }
+
+        #mermaid-1648363556759 .statediagram-state .title-state {
+            rx: 5px;
+            ry: 5px
+        }
+
+        #mermaid-1648363556759 .statediagram-cluster.statediagram-cluster .inner {
+            fill: white
+        }
+
+        #mermaid-1648363556759 .statediagram-cluster.statediagram-cluster-alt .inner {
+            fill: #e0e0e0
+        }
+
+        #mermaid-1648363556759 .statediagram-cluster .inner {
+            rx: 0;
+            ry: 0
+        }
+
+        #mermaid-1648363556759 .statediagram-state rect.basic {
+            rx: 5px;
+            ry: 5px
+        }
+
+        #mermaid-1648363556759 .statediagram-state rect.divider {
+            stroke-dasharray: 10, 10;
+            fill: #efefef
+        }
+
+        #mermaid-1648363556759 .note-edge {
+            stroke-dasharray: 5
+        }
+
+        #mermaid-1648363556759 .statediagram-note rect {
+            fill: #fff5ad;
+            stroke: #aa3;
+            stroke-width: 1px;
+            rx: 0;
+            ry: 0
+        }
+
+        :root {
+            --mermaid-font-family: '"trebuchet ms", verdana, arial';
+            --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive
+        }
+
+        :root {
+            --mermaid-font-family: "trebuchet ms", verdana, arial;
+        }
+    </style>
+    <style>
+        #mermaid-1648363556759 {
+            color: rgb(36, 41, 47);
+            font: 16px / 24px "trebuchet ms", verdana, arial;
+        }
+    </style>
+    <g>
+        <g class="output">
+            <g class="clusters"></g>
+            <g class="edgePaths">
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M769.6987571716309,35.09725430962571L186.49500274658203,77L186.99500274658203,102.50000133514406"
+                        marker-end="url(#arrowhead94)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead94" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M158.4093875135144,174.87188274514284L72.2750015258789,239.9574966430664L72.2750015258789,369.12249755859375"
+                        marker-end="url(#arrowhead95)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead95" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M215.58061949180728,174.87188390327324L300.71500396728516,239.9574966430664L301.21500396728516,277.45749893188486"
+                        marker-end="url(#arrowhead96)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead96" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M301.21500396728516,505.78749160766597L300.71500396728516,542.2874984741211L363.0652249002324,654.4256210327148"
+                        marker-end="url(#arrowhead97)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead97" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M400.0533352361648,654.4256210327148L526.238443851471,542.2874984741211L526.238443851471,391.12249755859375L526.238443851471,239.9574966430664L526.238443851471,152.4787483215332L526.238443851471,77L769.6987571716309,40.60532157013101"
+                        marker-end="url(#arrowhead98)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead98" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M384.50493549541227,422.497560079539L708.5043830871582,542.2874984741211L709.0043830871582,579.7875022888176"
+                        marker-end="url(#arrowhead99)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead99" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M709.0043830871582,774.0637474060056L708.5043830871582,810.5637435913086L709.004383087158,848.0637439727784"
+                        marker-end="url(#arrowhead100)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead100" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M709.004383087158,996.3612445831284L708.5043830871582,1032.8612442016602L766.2051263793385,1184.5543746948242"
+                        marker-end="url(#arrowhead101)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead101" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M782.9417623535717,1184.5543746948242L840.642505645752,1032.8612442016602L840.642505645752,921.7124938964844L840.642505645752,810.5637435913086L840.642505645752,676.4256210327148L840.642505645752,542.2874984741211L840.642505645752,391.12249755859375L840.642505645752,239.9574966430664L840.642505645752,152.4787483215332L840.642505645752,77L840.642505645752,52"
+                        marker-end="url(#arrowhead102)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead102" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M778.4400447739617,704.6280933485973L1044.7187538146973,810.5637435913086L1044.7187538146973,899.7124938964844"
+                        marker-end="url(#arrowhead103)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead103" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1044.7187538146973,943.7124938964844L1044.7187538146973,1032.8612442016602L1045.218753814697,1112.6893775939943"
+                        marker-end="url(#arrowhead104)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead104" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1045.218753814697,1301.4193733215322L1044.7187538146973,1380.2475051879883L1091.840840679104,1417.2475051879883"
+                        marker-end="url(#arrowhead105)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead105" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1147.8779169502905,1417.2475051879883L1195.0000038146973,1380.2475051879883L1195.0000038146973,1206.5543746948242L1195.0000038146973,1032.8612442016602L1195.0000038146973,921.7124938964844L1195.0000038146973,810.5637435913086L1195.0000038146973,676.4256210327148L1195.0000038146973,542.2874984741211L1195.0000038146973,391.12249755859375L1195.0000038146973,239.9574966430664L1195.0000038146973,152.4787483215332L1195.0000038146973,77L911.586254119873,39.40958268277983"
+                        marker-end="url(#arrowhead106)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead106" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1108.4480926637707,943.7124938964844L1366.6931343078613,1032.8612442016602L1367.193134307861,1070.3612510681146"
+                        marker-end="url(#arrowhead107)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead107" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1367.1931343078625,1343.7474845886218L1366.6931343078613,1380.2475051879883L1420.5291159031756,1417.2475051879883"
+                        marker-end="url(#arrowhead108)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead108" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1507.202649730747,1417.2475051879883L1599.135793209076,1380.2475051879883L1599.135793209076,1206.5543746948242L1599.135793209076,1032.8612442016602L1599.135793209076,921.7124938964844L1599.135793209076,810.5637435913086L1599.135793209076,676.4256210327148L1599.135793209076,542.2874984741211L1599.135793209076,391.12249755859375L1599.135793209076,239.9574966430664L1599.135793209076,152.4787483215332L1599.135793209076,77L911.586254119873,34.39602595429075"
+                        marker-end="url(#arrowhead109)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead109" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+                <g class="edgePath" style="opacity: 1;">
+                    <path class="path"
+                        d="M1463.1006574121416,1247.8399614843427L1775.1334495544434,1380.2475051879883L1775.1334495544434,1417.2475051879883"
+                        marker-end="url(#arrowhead110)" style="fill:none"></path>
+                    <defs>
+                        <marker id="arrowhead110" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
+                            markerWidth="8" markerHeight="6" orient="auto">
+                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
+                                style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
+                        </marker>
+                    </defs>
+                </g>
+            </g>
+            <g class="edgeLabels">
+                <g class="edgeLabel" style="opacity: 1;" transform="">
+                    <g transform="translate(0,0)" class="label">
+                        <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="0" height="0">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(72.2750015258789,239.9574966430664)">
+                    <g transform="translate(-9.401562690734863,-12)" class="label">
+                        <rect rx="0" ry="0" width="18.803125381469727" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="18.803125381469727" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">No</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(300.71500396728516,239.9574966430664)">
+                    <g transform="translate(-11.324999809265137,-12)" class="label">
+                        <rect rx="0" ry="0" width="22.649999618530273" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="22.649999618530273" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Yes</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(300.71500396728516,542.2874984741211)">
+                    <g transform="translate(-9.401562690734863,-12)" class="label">
+                        <rect rx="0" ry="0" width="18.803125381469727" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="18.803125381469727" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">No</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(526.238443851471,239.9574966430664)">
+                    <g transform="translate(-18.92500114440918,-12)" class="label">
+                        <rect rx="0" ry="0" width="37.85000228881836" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="37.85000228881836" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Retry</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(708.5043830871582,542.2874984741211)">
+                    <g transform="translate(-11.324999809265137,-12)" class="label">
+                        <rect rx="0" ry="0" width="22.649999618530273" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="22.649999618530273" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Yes</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(708.5043830871582,810.5637435913086)">
+                    <g transform="translate(-11.324999809265137,-12)" class="label">
+                        <rect rx="0" ry="0" width="22.649999618530273" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="22.649999618530273" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Yes</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(708.5043830871582,1032.8612442016602)">
+                    <g transform="translate(-11.324999809265137,-12)" class="label">
+                        <rect rx="0" ry="0" width="22.649999618530273" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="22.649999618530273" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Yes</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(840.642505645752,542.2874984741211)">
+                    <g transform="translate(-18.92500114440918,-12)" class="label">
+                        <rect rx="0" ry="0" width="37.85000228881836" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="37.85000228881836" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Retry</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1044.7187538146973,810.5637435913086)">
+                    <g transform="translate(-9.401562690734863,-12)" class="label">
+                        <rect rx="0" ry="0" width="18.803125381469727" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="18.803125381469727" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">No</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="">
+                    <g transform="translate(0,0)" class="label">
+                        <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="0" height="0">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1044.7187538146973,1380.2475051879883)">
+                    <g transform="translate(-11.324999809265137,-12)" class="label">
+                        <rect rx="0" ry="0" width="22.649999618530273" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="22.649999618530273" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Yes</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1195.0000038146973,676.4256210327148)">
+                    <g transform="translate(-18.92500114440918,-12)" class="label">
+                        <rect rx="0" ry="0" width="37.85000228881836" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="37.85000228881836" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Retry</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1366.6931343078613,1032.8612442016602)">
+                    <g transform="translate(-9.401562690734863,-12)" class="label">
+                        <rect rx="0" ry="0" width="18.803125381469727" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="18.803125381469727" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">No</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1366.6931343078613,1380.2475051879883)">
+                    <g transform="translate(-11.324999809265137,-12)" class="label">
+                        <rect rx="0" ry="0" width="22.649999618530273" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="22.649999618530273" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Yes</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1599.135793209076,676.4256210327148)">
+                    <g transform="translate(-18.92500114440918,-12)" class="label">
+                        <rect rx="0" ry="0" width="37.85000228881836" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="37.85000228881836" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">Retry</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+                <g class="edgeLabel" style="opacity: 1;" transform="translate(1775.1334495544434,1380.2475051879883)">
+                    <g transform="translate(-9.401562690734863,-12)" class="label">
+                        <rect rx="0" ry="0" width="18.803125381469727" height="24" style="fill:#e8e8e8;"></rect>
+                        <foreignObject width="18.803125381469727" height="24">
+                            <div xmlns="http://www.w3.org/1999/xhtml"
+                                style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">No</span>
+                            </div>
+                        </foreignObject>
+                    </g>
+                </g>
+            </g>
+            <g class="nodes">
+                <g class="node default" id="A" transform="translate(840.642505645752,30)" style="opacity: 1;">
+                    <rect rx="22" ry="22" x="-70.94375228881836" y="-22" width="141.88750457763672" height="44"
+                        class="label-container" style="fill:#2da44e;stroke:#1b1f2426;"></rect>
+                    <g class="label" transform="translate(0,0)">
+                        <g style="color:#fff;" transform="translate(-55.44375228881836,-12)">
+                            <foreignObject width="110.88750457763672" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Run <code style="font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;padding: .2em .4em;margin: 0;font-size: 85%;background-color:#eff1f3;border-radius: 6px;">npm install</code></div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="B" transform="translate(186.49500274658203,152.4787483215332)"
+                    style="opacity: 1;">
+                    <polygon
+                        points="50.478749656677245,0 100.95749931335449,-50.478749656677245 50.478749656677245,-100.95749931335449 0,-50.478749656677245"
+                        transform="translate(-50.478749656677245,50.478749656677245)" class="label-container"></polygon>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-24.087499618530273,-12)">
+                            <foreignObject width="48.17499923706055" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Errors?</div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="Z" transform="translate(72.2750015258789,391.12249755859375)"
+                    style="opacity: 1;">
+                    <rect rx="22" ry="22" x="-64.2750015258789" y="-22" width="128.5500030517578" height="44"
+                        class="label-container"></rect>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-48.775001525878906,-12)">
+                            <foreignObject width="97.55000305175781" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Try <code style="font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;padding: .2em .4em;margin: 0;font-size: 85%;background-color:#eff1f3;border-radius: 6px;">gulp build</code></div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="C" transform="translate(300.71500396728516,391.12249755859375)"
+                    style="opacity: 1;">
+                    <polygon
+                        points="114.164998626709,0 228.329997253418,-114.164998626709 114.164998626709,-228.329997253418 0,-114.164998626709"
+                        transform="translate(-114.164998626709,114.164998626709)" class="label-container"></polygon>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-94.8499984741211,-12)">
+                            <foreignObject width="189.6999969482422" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Are you in root of project?
+                                </div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node clickable" id="D" transform="translate(375.2975044250488,676.4256210327148)"
+                    style="opacity: 1;"><a class="clickable"
+                        href="https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#change-directory-to-root-of-project"
+                        rel="noopener">
+                        <rect rx="0" ry="0" x="-186.06875610351562" y="-22" width="372.13751220703125" height="44"
+                            class="label-container"></rect>
+                        <g class="label" transform="translate(0,0)">
+                            <g transform="translate(-176.06875610351562,-12)">
+                                <foreignObject width="352.13751220703125" height="24">
+                                    <div xmlns="http://www.w3.org/1999/xhtml"
+                                        style="display: inline-block; white-space: nowrap;">Change directory to root of
+                                        project 🔗</div>
+                                </foreignObject>
+                            </g>
+                        </g>
+                    </a></g>
+                <g class="node default" id="E" transform="translate(708.5043830871582,676.4256210327148)"
+                    style="opacity: 1;">
+                    <polygon
+                        points="97.13812637329102,0 194.27625274658203,-97.13812637329102 97.13812637329102,-194.27625274658203 0,-97.13812637329102"
+                        transform="translate(-97.13812637329102,97.13812637329102)" class="label-container"></polygon>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-75.9312515258789,-12)">
+                            <foreignObject width="151.8625030517578" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Running on Windows?</div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="F" transform="translate(708.5043830871582,921.7124938964844)"
+                    style="opacity: 1;">
+                    <polygon
+                        points="74.14875068664551,0 148.29750137329103,-74.14875068664551 74.14875068664551,-148.29750137329103 0,-74.14875068664551"
+                        transform="translate(-74.14875068664551,74.14875068664551)" class="label-container"></polygon>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-50.38750076293945,-12)">
+                            <foreignObject width="100.7750015258789" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Path too long?</div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="H" transform="translate(774.5734443664551,1206.5543746948242)"
+                    style="opacity: 1;">
+                    <rect rx="0" ry="0" x="-113.5062484741211" y="-22" width="227.0124969482422" height="44"
+                        class="label-container"></rect>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-103.5062484741211,-12)">
+                            <foreignObject width="207.0124969482422" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Move project to shorter path
+                                </div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node clickable" id="K" transform="translate(1044.7187538146973,921.7124938964844)"
+                    style="opacity: 1;"><a class="clickable"
+                        href="https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#run-spfx-doctor"
+                        rel="noopener">
+                        <rect rx="0" ry="0" x="-115.28125" y="-22" width="230.5625" height="44" class="label-container">
+                        </rect>
+                        <g class="label" transform="translate(0,0)">
+                            <g transform="translate(-105.28125,-12)">
+                                <foreignObject width="210.5625" height="24">
+                                    <div xmlns="http://www.w3.org/1999/xhtml"
+                                        style="display: inline-block; white-space: nowrap;">Run spfx doctor 🔗</div>
+                                </foreignObject>
+                            </g>
+                        </g>
+                    </a></g>
+                <g class="node default" id="J" transform="translate(1044.7187538146973,1206.5543746948242)"
+                    style="opacity: 1;">
+                    <polygon
+                        points="94.36499862670898,0 188.72999725341796,-94.36499862670898 94.36499862670898,-188.72999725341796 0,-94.36499862670898"
+                        transform="translate(-94.36499862670898,94.36499862670898)" class="label-container"></polygon>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-72.8499984741211,-12)">
+                            <foreignObject width="145.6999969482422" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Any reported issues?</div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="L" transform="translate(1119.8593788146973,1439.2475051879883)"
+                    style="opacity: 1;">
+                    <rect rx="0" ry="0" x="-93.54375457763672" y="-22" width="187.08750915527344" height="44"
+                        class="label-container"></rect>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-83.54375457763672,-12)">
+                            <foreignObject width="167.08750915527344" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Fix compatibility issues</div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="M" transform="translate(1366.6931343078613,1206.5543746948242)"
+                    style="opacity: 1;">
+                    <polygon
+                        points="136.693123626709,0 273.386247253418,-136.693123626709 136.693123626709,-273.386247253418 0,-136.693123626709"
+                        transform="translate(-136.693123626709,136.693123626709)" class="label-container"></polygon>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-95.8812484741211,-36)">
+                            <foreignObject width="191.7624969482422" height="72">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Did you change <br/> versions of
+                                    nodejs<br/> after downloading sample?</div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node default" id="N" transform="translate(1452.5396995544434,1439.2475051879883)"
+                    style="opacity: 1;">
+                    <rect rx="0" ry="0" x="-105.60625457763672" y="-22" width="211.21250915527344" height="44"
+                        class="label-container"></rect>
+                    <g class="label" transform="translate(0,0)">
+                        <g transform="translate(-95.60625457763672,-12)">
+                            <foreignObject width="191.21250915527344" height="24">
+                                <div xmlns="http://www.w3.org/1999/xhtml"
+                                    style="display: inline-block; white-space: nowrap;">Run <code style="font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;padding: .2em .4em;margin: 0;font-size: 85%;background-color:#eff1f3;border-radius: 6px;">npm rebuild node-sass</code></div>
+                            </foreignObject>
+                        </g>
+                    </g>
+                </g>
+                <g class="node clickable" id="O" transform="translate(1775.1334495544434,1439.2475051879883)"
+                    style="opacity: 1;"><a class="clickable"
+                        href="https://github.com/pnp/sp-dev-fx-webparts/wiki/Before-you-open-an-issue" rel="noopener">
+                        <rect rx="22" ry="22" x="-166.9875030517578" y="-22" width="333.9750061035156" height="44"
+                            class="label-container"></rect>
+                        <g class="label" transform="translate(0,0)">
+                            <g transform="translate(-151.4875030517578,-12)">
+                                <foreignObject width="302.9750061035156" height="24">
+                                    <div xmlns="http://www.w3.org/1999/xhtml"
+                                        style="display: inline-block; white-space: nowrap;">Before you open a new issue
+                                        🔗</div>
+                                </foreignObject>
+                            </g>
+                        </g>
+                    </a></g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/troubleshooting2.mmd b/troubleshooting2.mmd
new file mode 100644
index 0000000..762df22
--- /dev/null
+++ b/troubleshooting2.mmd
@@ -0,0 +1,15 @@
+graph TD
+    A([Run npm install])
+    A --> B{Errors?}
+    B --> |No| Z([Try gulp build])
+    B --> |Yes| C{Are you in root of project?} --> |No| D["Change directory to root of project #128279;"] --> |Retry|A
+    C --> |Yes| E{Running on Windows?} 
+    E --> |Yes| F{Path too long?} --> |Yes| H[Move project to shorter path] --> |Retry|A
+    E --> |No| K["Run spfx doctor #128279;"]
+    K --> J{Any reported issues?} --> |Yes| L[Fix compatibility issues] --> |Retry|A
+    K --> |No| M{Did you change <br/> versions of nodejs<br/> after downloading sample?} --> |Yes| N[Run npm rebuild node-sass] --> |Retry|A
+    M --> |No| O(["Before you open a new issue #128279;"])
+    click K "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#run-spfx-doctor"
+    click D "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#change-directory-to-root-of-project"
+    click O "https://github.com/pnp/sp-dev-fx-webparts/wiki/Before-you-open-an-issue"
+    style A fill:#2da44e,color:#fff,stroke:#1b1f2426
\ No newline at end of file