Add Mermaid Chart to examples/data-channels

Start new architecture section

AUTHORS.txt

@@ -123,6 +123,7 @@ Michiel De Backker <38858977+backkem@users.noreply.github.com>
 Mike Coleman <mc@fivebats.com>
 Mindgamesnl <matsmoolhuizen@gmail.com>
 mission-liao <missionaryliao@gmail.com>
+mohammadne <mohammadne@mail.ru>
 mr-shitij <21.shitijagrawal@gmail.com>
 mxmCherry <mxmCherry@gmail.com>
 Nam V. Do <vannam12a7@gmail.com>

examples/data-channels/README.md

@@ -30,3 +30,40 @@ Now you can put whatever you want in the `Message` textarea, and when you hit `S
 Pion WebRTC will send random messages every 5 seconds that will appear in your browser.
 
 Congrats, you have used Pion WebRTC! Now start building something cool
+
+## Architecture
+
+```mermaid
+flowchart TB
+    Browser--Copy Offer from TextArea-->Pion
+    Pion--Copy Text Print to Console-->Browser
+    subgraph Pion[Go Peer]
+        p1[Create PeerConnection]
+        p2[OnConnectionState Handler]
+        p3[Print Connection State]
+        p2-->p3
+        p4[OnDataChannel Handler]
+        p5[OnDataChannel Open]
+        p6[Send Random Message every 5 seconds to DataChannel]
+        p4-->p5-->p6
+        p7[OnDataChannel Message]
+        p8[Log Incoming Message to Console]
+        p4-->p7-->p8
+        p9[Read Session Description from Standard Input]
+        p10[SetRemoteDescription with Session Description from Standard Input]
+        p11[Create Answer]
+        p12[Block until ICE Gathering is Complete]
+        p13[Print Answer with ICE Candidatens included to Standard Output]
+    end
+    subgraph Browser[Browser Peer]
+        b1[Create PeerConnection]
+        b2[Create DataChannel 'foo']
+        b3[OnDataChannel Message]
+        b4[Log Incoming Message to Console]
+        b3-->b4
+        b5[Create Offer]
+        b6[SetLocalDescription with Offer]
+        b7[Print Offer with ICE Candidates included]
+
+    end
+```