fix(docs): add diagrams to concepts

Author: dhmlau

docs/site/Behind-the-scene.md

@@ -0,0 +1,22 @@
+---
+lang: en
+title: 'Components'
+keywords: LoopBack 4.0, LoopBack 4
+sidebar: lb4_sidebar
+permalink: /doc/en/lb4/Behind-the-scene.html
+---
+
+Here are the infrastructure that get all the artifacts working together:
+
+- [Context](Context.md): An abstraction of states and dependencies in your
+  application that LoopBack uses to manage everything. It’s a global registry
+  for everything in your app (configurations, state, dependencies, classes and
+  so on).
+- [Binding](Binding.md): An abstraction of items managed by a context. Each
+  binding has a unique key within the context and a value provider to resolve
+  the key to a value.
+- [Dependency Injection](Dependency-injection.md): The technique used to
+  separate the construction of dependencies of a class or function from its
+  behavior to keep the code loosely coupled.
+- [Component](Components.md): A package that bundles one or more LoopBack
+  extensions.

docs/site/Concepts.md

@@ -6,7 +6,10 @@ sidebar: lb4_sidebar
 permalink: /doc/en/lb4/Concepts.html
 ---
 
-LoopBack 4 introduces some new concepts that are important to understand:
+LoopBack 4 defines some key building blocks to represent different
+responsibilities for typical API and/or Microservice applications.
+
+![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)
 
 - [**Application**](Application.md): The central class for setting up all of
   your module’s components, controllers, servers and bindings. The Application
@@ -18,19 +21,6 @@ LoopBack 4 introduces some new concepts that are important to understand:
   typically listens on a specific endpoint (protocol/host/port), handles
   incoming requests, and then returns appropriate responses.
 
-- [**Context**](Context.md): An abstraction of states and dependencies in your
-  application that LoopBack uses to manage everything. It's a global registry
-  for everything in your app (configurations, state, dependencies, classes and
-  so on).
-
-- [**Binding**](Binding.md): An abstraction of items managed by a context. Each
-  binding has a unique key within the context and a value provider to resolve
-  the key to a value.
-
-- [**Dependency Injection**](Dependency-injection.md): The technique used to
-  separate the construction of dependencies of a class or function from its
-  behavior to keep the code loosely coupled.
-
 - [**Controller**](Controllers.md): A class that implements operations defined
   by the application’s REST API. It implements an application’s business logic
   and acts as a bridge between the HTTP/REST API and domain/database models. A
@@ -65,6 +55,3 @@ LoopBack 4 introduces some new concepts that are important to understand:
 
 - [**Decorator**](Decorators.md): The pattern used to annotate or modify your
   class declarations and their members with metadata.
-
-- [**Component**](Components.md): A package that bundles one or more LoopBack
-  extensions.

docs/site/DataSources.md

@@ -12,6 +12,8 @@ A `DataSource` in LoopBack 4 is a named configuration for a Connector instance
 that represents data in an external system. The Connector is used by
 `legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.
 
+![Datasource diagram](imgs/datasource.png)
+
 ### Creating a DataSource
 
 It is recommended to use the [`lb4 datasource` command](DataSource-generator.md)

docs/site/Repositories.md

@@ -10,6 +10,8 @@ A `Repository` represents a specialized `Service` interface that provides
 strong-typed data access (for example, CRUD) operations of a domain model
 against the underlying database or service.
 
+![Relationship among Repository, DataSource and Model](imgs/repository-datasource-model.png)
+
 {% include note.html content="Repositories are adding behavior to Models. Models describe the shape of data, Repositories provide behavior like CRUD operations. This is different from LoopBack 3.x where models implement behavior too." %}
 
 {% include tip.html content="A single model can be used with multiple different Repositories." %}

docs/site/imgs/datasource.png

@@ -32,31 +32,10 @@ children:
     url: Server.html
     output: 'web, pdf'
 
-  - title: 'Context'
-    url: Context.html
-    output: 'web, pdf'
-
-  - title: 'Binding'
-    url: Binding.html
-    output: 'web, pdf'
-
-  - title: 'Dependency injection'
-    url: Dependency-injection.html
-    output: 'web, pdf'
-    children:
-
-    - title: 'Reserved binding keys'
-      url: Reserved-binding-keys.html
-      output: 'web, pdf'
-
   - title: 'Controllers'
     url: Controllers.html
     output: 'web, pdf'
 
-  - title: 'Components'
-    url: Components.html
-    output: 'web, pdf'
-
   - title: 'Interceptors'
     url: Interceptors.html
     output: 'web, pdf'
@@ -200,6 +179,32 @@ children:
     url: Serving-static-files.html
     output: 'web, pdf'
 
+- title: 'Behind the Scene'
+  url: Behind-the-scene.html
+  output: 'web, pdf'
+  children:
+
+    - title: 'Context'
+      url: Context.html
+      output: 'web, pdf'
+
+    - title: 'Binding'
+      url: Binding.html
+      output: 'web, pdf'
+
+    - title: 'Dependency Injection'
+      url: Dependency-injection.html
+      output: 'web, pdf'
+      children:
+
+        - title: 'Reserved binding keys'
+          url: Reserved-binding-keys.html
+          output: 'web, pdf'
+
+    - title: 'Components'
+      url: Components.html
+      output: 'web, pdf'
+
 - title: 'Booting an Application'
   url: Booting-an-Application.html
   output: 'web, pdf'