Mediator pattern [UML]: how to connect to the rest of the code?

Context: I am programming an app (for trading/brokers, with Python or Java) and was asked to include the Mediator, Observer, Adapter and Facade design patterns. But I am having trouble understanding the Mediator pattern and designing it in UML. Mainly I have 2 questions. First the UML:

1) how to connect it (the Mediator block at the end) to the rest of the code? Is it correct for the GUI and AsyncActions (in other controllers package) to connect to the concret Mediator through an association or dependency? I have seen examples connecting trought the abstract Mediator but that don't make much sense to me.

There are some examples on the internet but they only have abstract ones, without full integration on a code-base, so I can't find one Mediator in the context of full code.

Examples from refactoring.guru and sourcemaking.com:

And:

Both great examples but out of context of the rest of the code :(

2) My second questions is related with the 2 examples above: in the second one there is an abstract Component and it connects to the abstract Mediator. In the 1st example there is no connection bettween the abstract Mediator and the components (because there is no abstract component). The connection between the abstract Mediator and abstract components is mandatory? I don't understand it fully, why it is needed. In my UML I made it, but I can't see the utility in the code (because the concret mediator always tracks the mediated elements already from what I understood, so I don't understand the need for that connection).

Thank you very much in advance.