Add architecture overview (#1073)

Summary:
Based on the issue here https://github.com/facebook/flipper/issues/967, I'm adding the flipper diagram to a documentation.
It should help explain briefly how does all parts communicate together and visualise key terms.

## Changelog

- Add Flipper architecture diagram to documentation
Pull Request resolved: https://github.com/facebook/flipper/pull/1073

Reviewed By: jknoxville

Differential Revision: D21278322

Pulled By: passy

fbshipit-source-id: 3cd8c71b2595b86911f5c9061bc2e8119da1d315

docs/extending/architecture.mdx

@@ -3,6 +3,8 @@ id: arch
 title: Architecture
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 Flipper is built to be a universal pluggable platform for development tools. Currently, Flipper focuses on Android and iOS development but its design does not limit it to these platforms. Another way to think of Flipper is a more general purpose implementation of Chrome DevTools.
 
 ### Overview
@@ -14,3 +16,7 @@ The connection is bi-directional allowing the desktop to query information from
 
 By querying data and responding to pushing from the client a Flipper plugin is able to visualize data, debug problems, and change behavior of running applications. Flipper provides the platform to build these tools on top of and does not limit what kind of tools that may be.
 There are two kinds of plugins in Flipper, client plugins and desktop plugins. Client plugins expose information as an API to desktop plugins whose responsibility it is to render this information in an easy-to-digest way. Client plugins are written once for each platform in the platform's native language. Desktop plugins are written only once in JavaScript using React and consume the APIs exposed by the client plugins.
+
+### Architecture - React Native
+Simplified visualization of Flipper architecture, when used with React Native.
+<img alt="Flipper communication diagram" src={useBaseUrl("img/flipper-communication-diagram.png")} />