Docs: Diagram to improve clarity of svelte Store's

Added Arrows diagram to improve clarity on how the events happen

Purpose:
As I was following this tutorial as a new user, I found it difficult to visualize the dependencies, and relationships between the files.
This diagram is a attempt to add visual clarity to the stores.js section

aside: here's the graph looks like to color blind people 
![image](https://user-images.githubusercontent.com/29699356/150624911-a925d5ed-0675-4c86-889e-6fc73fb6f79d.png)

link to editable version of the graph [here](https://arrows.app/#/import/json=eyJncmFwaCI6eyJzdHlsZSI6eyJmb250LWZhbWlseSI6InNhbnMtc2VyaWYiLCJiYWNrZ3JvdW5kLWNvbG9yIjoiI2ZmZmZmZiIsIm5vZGUtY29sb3IiOiIjZmZmZmZmIiwiYm9yZGVyLXdpZHRoIjo0LCJib3JkZXItY29sb3IiOiIjMDAwMDAwIiwicmFkaXVzIjo1MCwibm9kZS1wYWRkaW5nIjo1LCJub2RlLW1hcmdpbiI6Miwib3V0c2lkZS1wb3NpdGlvbiI6ImF1dG8iLCJub2RlLWljb24taW1hZ2UiOiIiLCJub2RlLWJhY2tncm91bmQtaW1hZ2UiOiIiLCJpY29uLXBvc2l0aW9uIjoiaW5zaWRlIiwiaWNvbi1zaXplIjo2NCwiY2FwdGlvbi1wb3NpdGlvbiI6Imluc2lkZSIsImNhcHRpb24tbWF4LXdpZHRoIjoyMDAsImNhcHRpb24tY29sb3IiOiIjMDAwMDAwIiwiY2FwdGlvbi1mb250LXNpemUiOjUwLCJjYXB0aW9uLWZvbnQtd2VpZ2h0Ijoibm9ybWFsIiwibGFiZWwtcG9zaXRpb24iOiJpbnNpZGUiLCJsYWJlbC1kaXNwbGF5IjoicGlsbCIsImxhYmVsLWNvbG9yIjoiIzAwMDAwMCIsImxhYmVsLWJhY2tncm91bmQtY29sb3IiOiIjZmZmZmZmIiwibGFiZWwtYm9yZGVyLWNvbG9yIjoiIzAwMDAwMCIsImxhYmVsLWJvcmRlci13aWR0aCI6NCwibGFiZWwtZm9udC1zaXplIjo0MCwibGFiZWwtcGFkZGluZyI6NSwibGFiZWwtbWFyZ2luIjo0LCJkaXJlY3Rpb25hbGl0eSI6ImRpcmVjdGVkIiwiZGV0YWlsLXBvc2l0aW9uIjoiaW5saW5lIiwiZGV0YWlsLW9yaWVudGF0aW9uIjoicGFyYWxsZWwiLCJhcnJvdy13aWR0aCI6NSwiYXJyb3ctY29sb3IiOiIjMDAwMDAwIiwibWFyZ2luLXN0YXJ0Ijo1LCJtYXJnaW4tZW5kIjo1LCJtYXJnaW4tcGVlciI6MjAsImF0dGFjaG1lbnQtc3RhcnQiOiJub3JtYWwiLCJhdHRhY2htZW50LWVuZCI6Im5vcm1hbCIsInJlbGF0aW9uc2hpcC1pY29uLWltYWdlIjoiIiwidHlwZS1jb2xvciI6IiMwMDAwMDAiLCJ0eXBlLWJhY2tncm91bmQtY29sb3IiOiIjZmZmZmZmIiwidHlwZS1ib3JkZXItY29sb3IiOiIjMDAwMDAwIiwidHlwZS1ib3JkZXItd2lkdGgiOjAsInR5cGUtZm9udC1zaXplIjoxNiwidHlwZS1wYWRkaW5nIjo1LCJwcm9wZXJ0eS1wb3NpdGlvbiI6Im91dHNpZGUiLCJwcm9wZXJ0eS1hbGlnbm1lbnQiOiJjb2xvbiIsInByb3BlcnR5LWNvbG9yIjoiIzAwMDAwMCIsInByb3BlcnR5LWZvbnQtc2l6ZSI6MTYsInByb3BlcnR5LWZvbnQtd2VpZ2h0Ijoibm9ybWFsIn0sIm5vZGVzIjpbeyJpZCI6Im4wIiwicG9zaXRpb24iOnsieCI6MjEuNjUyMzkyNzQyOTkzMjYsInkiOi0yNjcuNjYxNjI1ODk3ODMxNn0sImNhcHRpb24iOiJBcHAgLnN2ZWx0ZSIsInN0eWxlIjp7ImJvcmRlci13aWR0aCI6OSwiYm9yZGVyLWNvbG9yIjoiIzAwNjJiMSJ9LCJsYWJlbHMiOltdLCJwcm9wZXJ0aWVzIjp7fX0seyJpZCI6Im4xIiwicG9zaXRpb24iOnsieCI6NDg3LjA0OTY2MTQ1NzMyMTQ2LCJ5IjotMjY3LjY2MTYyNTg5NzgzMTZ9LCJjYXB0aW9uIjoic3RvcmVzLmpzIiwic3R5bGUiOnsiYm9yZGVyLXdpZHRoIjo3fSwibGFiZWxzIjpbXSwicHJvcGVydGllcyI6e319LHsiaWQiOiJuMiIsInBvc2l0aW9uIjp7IngiOjI1NC4zNTEwMjcxMDAxNTczOCwieSI6LTE3MS4yNDUzMTc5NDExNjE0M30sImNhcHRpb24iOiJEZWNyZW1lbnRlciAuc3ZlbHRlIiwic3R5bGUiOnsiYm9yZGVyLWNvbG9yIjoiIzgwODA4MCJ9LCJsYWJlbHMiOltdLCJwcm9wZXJ0aWVzIjp7fX0seyJpZCI6Im4zIiwicG9zaXRpb24iOnsieCI6MjU0LjM1MTAyNzEwMDE1NzM4LCJ5IjotMzY0LjA3NzkzMzg1NDUwMTc0fSwiY2FwdGlvbiI6IkluY3JlbWVudGVyIC5zdmVsdGUiLCJzdHlsZSI6eyJib3JkZXItY29sb3IiOiIjODA4MDgwIn0sImxhYmVscyI6W10sInByb3BlcnRpZXMiOnt9fSx7ImlkIjoibjQiLCJwb3NpdGlvbiI6eyJ4IjoyNTQuMzUxMDI3MTAwMTU3MzgsInkiOi0zNC45NjI5OTE1NDA2Njc1fSwiY2FwdGlvbiI6IlJlc2V0dGVyIC5zdmVsdGUiLCJzdHlsZSI6eyJib3JkZXItY29sb3IiOiIjODA4MDgwIn0sImxhYmVscyI6W10sInByb3BlcnRpZXMiOnt9fV0sInJlbGF0aW9uc2hpcHMiOlt7ImlkIjoibjAiLCJ0eXBlIjoiY291bnQuc3Vic2NyaWJlKCkiLCJzdHlsZSI6eyJhcnJvdy1jb2xvciI6IiMwMDYyYjEifSwicHJvcGVydGllcyI6e30sImZyb21JZCI6Im4xIiwidG9JZCI6Im4wIn0seyJpZCI6Im4xIiwidHlwZSI6InNldCgpIiwic3R5bGUiOnsiYXJyb3ctY29sb3IiOiIjNjhiYzAwIn0sInByb3BlcnRpZXMiOnt9LCJmcm9tSWQiOiJuNCIsInRvSWQiOiJuMSJ9LHsiaWQiOiJuMiIsInR5cGUiOiJ1cGRhdGUoKSIsInN0eWxlIjp7ImFycm93LWNvbG9yIjoiIzY4YmMwMCJ9LCJwcm9wZXJ0aWVzIjp7fSwiZnJvbUlkIjoibjIiLCJ0b0lkIjoibjEifSx7ImlkIjoibjMiLCJ0eXBlIjoidXBkYXRlKCkiLCJzdHlsZSI6eyJhcnJvdy1jb2xvciI6IiM2OGJjMDAifSwicHJvcGVydGllcyI6e30sImZyb21JZCI6Im4zIiwidG9JZCI6Im4xIn0seyJpZCI6Im40IiwidHlwZSI6Im9uOmNsaWNrIiwic3R5bGUiOnsiYXJyb3ctY29sb3IiOiIjZjQ0ZTNiIn0sInByb3BlcnRpZXMiOnt9LCJmcm9tSWQiOiJuMCIsInRvSWQiOiJuMyJ9LHsiaWQiOiJuNSIsInR5cGUiOiJvbjpjbGljayIsInN0eWxlIjp7ImFycm93LWNvbG9yIjoiI2Y0NGUzYiJ9LCJwcm9wZXJ0aWVzIjp7fSwiZnJvbUlkIjoibjAiLCJ0b0lkIjoibjQifSx7ImlkIjoibjYiLCJ0eXBlIjoib246Y2xpY2siLCJzdHlsZSI6eyJhcnJvdy1jb2xvciI6IiNmNDRlM2IifSwicHJvcGVydGllcyI6e30sImZyb21JZCI6Im4wIiwidG9JZCI6Im4yIn1dfSwiZGlhZ3JhbU5hbWUiOiJVbnRpdGxlZCBncmFwaCJ9)

site/content/tutorial/08-stores/01-writable-stores/text.md

@@ -1,19 +1,23 @@
 ---
 title: Writable stores
 ---
-
 Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
 
+
+<img src="https://user-images.githubusercontent.com/29699356/150624939-75e4a5a4-18e9-4b02-8a53-ec2df1b0fe69.svg" height="400" alt="diagram of component hierarchy" >
+
+
 In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback.
 
+
 Click the `stores.js` tab to see the definition of `count`. It's a *writable* store, which means it has `set` and `update` methods in addition to `subscribe`.
 
 Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button:
-
 ```js
 function increment() {
 	count.update(n => n + 1);
 }
+
 ```
 
 Clicking the `+` button should now update the count. Do the inverse for `Decrementer.svelte`.
@@ -21,7 +25,10 @@ Clicking the `+` button should now update the count. Do the inverse for `Decreme
 Finally, in `Resetter.svelte`, implement `reset`:
 
 ```js
+
 function reset() {
 	count.set(0);
 }
 ```
+
+