Illustrate the handshake between an application and a component

[bajtos]

This is a follow-up for #5337 and #5122 (comment) in particular.

Create a diagram to show the handshake between an application and a component as well as typical artifacts exported from a component.

Add the diagram to our docs for component authors, e.g.

• docs/site/migration/components/overview.md
• docs/site/Extending-LoopBack-4.md
• docs/site/Components.md

[bajtos]

We already have few diagrams in existing component-related pages, make sure to review those diagrams first.

[jannyHou]

Outline:

• configure it before mounting it to app
• component injects the application itself
• component is a collection of bindings to be added to app
• component is an observer with start/stop
• it can register some booters to be booted as the component lifecycle

We can pick an existing component and add diagram there. https://github.com/strongloop/loopback-next/tree/master/extensions