Updating the architecture documentation page

docs/architecture.md

@@ -2,12 +2,32 @@
 
 This is how Style Dictionary works under the hood.
 
-## TODO
+![build structure](assets/build-diagram.png)
 
-1. We need to replace the picture with one that is more representative of the process.
-1. The picture needs to remove the data ovals, which are confusing - this is supposed to show the process
-1. The picture should have more examples underneath the sections to show what is happening
-1. Each platform should be an actual example (android, ios, css), showing some actual differences between the platforms
-1. We need to add a section below the image that contains a step by step walkthrough of each item in the image
+Let's take a closer look into each of these steps.
 
-![build structure](assets/build-diagram.png)
+## 1. Find all token files
+
+In your [config](config.md) file you define a `source`, which is an array of file paths. This tells Style Dictionary where to find your token files. You can have them anywhere and in any folder structure as long as you tell Style Dictionary where to find them.
+
+## 2. Deep merge token files
+
+Style Dictionary takes all the files it found and performs a deep merge. This allows you to split your token files in any way you like, without worrying about accidentally overriding groups of tokens. This gives Style Dictionary a single, complete token object to work from.
+
+## 3. Split the platforms
+
+For each platform defined in your [config](config.md), Style Dictionary will do a few steps to get it ready to be consumed on that platform. Everything that happens in a platform is non-destructive so you don't need to worry about one platform affecting another.
+
+## 4. Transform the tokens
+
+Style Dictionary now traverses over the whole token object and looks for design tokens. It does this by looking for anything with a `value` key. When it comes across a design token, it then performs all the [transforms](transforms.md) defined in your [config](config.md) in order.
+
+## 5. Resolve aliases
+
+After all the tokens have been transformed, it then does another pass over the token object looking for aliases, which look like `"{size.font.base.value}"`. When it finds these, it then replaces it with the resolved value. You can have any levels of aliases and Style Dictionary will correctly get the final value. Also, because we have a single complete token object, aliases can be in any token file and still work.
+
+## 6. Build files
+
+Now all the design tokens are ready to be written to a file. Style Dictionary takes the whole transformed and resolved token object and for each file defined in the platform it [formats](formats.md) the token object and write the output to a file. Internally, Style Dictionary creates a flat array of all the design tokens it finds in addition to the token object. This is how you can output a flat SCSS variables file.
+
+After Style Dictionary does steps 4-6 for each platform, now you have all your output files that are ready to consume in each platform and codebase.