Added before you open an issue

Before-you-open-an-issue.md

@@ -1 +1,19 @@
-Try the following steps
+This repository is supported by members of the community who volunteer their time to share samples and help others.
+
+Out of respect for everyone, we ask that you take the time to follow these steps before you open an issue. Items with a :link: are interactive and will take you to the related resource.
+
+```mermaid
+graph TD
+    A([Before you open a new issue])
+    A --> B{Is the issue regarding a<br/> sample in this repository?} -- No --> NS[Not supported] --> C["Try SharePoint Developer Documentation #128279;"] & D["Try SharePoint StackExchange #128279;"] & E["Try Microsoft Tech Community #128279;"]
+    B -- Yes --> H[Read sample's README.md carefully] --> M["Try troubleshooting issues first #128279;"] --> F[Look for other issues with this sample] --> G[Look for discussions about this sample]
+    G --> J["Read how to create good issues #128279;"]
+    J --> K[Ok, fine, create an issue from the sample's README.md]
+    style A fill:#2da44e,color:#fff,stroke:#1b1f2426
+    click C "https://github.com/SharePoint/sp-dev-docs/issues/new"
+    click D "https://sharepoint.stackexchange.com/"
+    click E "https://techcommunity.microsoft.com/t5/sharepoint-developer/bd-p/SharePointDev"
+    click J "https://github.com/pnp/sp-dev-fx-webparts/wiki/how-to-create-good-issues"
+    click M "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples"
+```
+

Troubleshooting-issues-with-samples.md

@@ -4,27 +4,25 @@ 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 with a :link: are interactive and will take you to the associated resource.
+
 ```mermaid
 graph TD
     A([Get web part sample code])
     A -->|Open repo/unzip folder| B(npm install)
     B --> C{npm install errors?}
-    C -->|Yes| D[Diagnose npm install issues]
+    C -->|Yes| D["Diagnose npm install issues #128279;"]
     C -->|No| E(gulp build)
     E --> F{Does in build?}
     F -->|Yes| G[gulp serve]
     G --> I{Does it gulp serve?}
-    F -->|No| H[Diagnose gulp build issues]
+    F -->|No| H["Diagnose gulp build issues #128279;"]
-    G -->|No| K[Diagnose gulp serve issues]
+    G -->|No| K["Diagnose gulp serve issues #128279;"]
-    I -->|Yes| J[Diagnose web part execution issues]
+    I -->|Yes| J["Diagnose web part execution issues #128279;"]
     click D "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#diagnose-npm-install-issues"
     click H "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#diagnose-gulp-build-issues"
     click J "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#diagnose-web-part-execution-issues"
     click K "https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#diagnose-gulp-serve-issues"
-    style D fill:#f9f,stroke:#333,stroke-width:4px
-    style H fill:#f9f,stroke:#333,stroke-width:4px
-    style K fill:#f9f,stroke:#333,stroke-width:4px
-    style J fill:#f9f,stroke:#333,stroke-width:4px
     style A fill:#2da44e,color:#fff,stroke:#1b1f2426
 ```
 
@@ -37,18 +35,16 @@ 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] --> |Retry|A
+    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]
+    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])
+    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 K fill:#f9f,stroke:#333,stroke-width:4px
-    style D fill:#f9f,stroke:#333,stroke-width:4px
     style A fill:#2da44e,color:#fff,stroke:#1b1f2426
 ```