<h2 id="diagram-example-1" data-line="0" class="code-line">
<a class="header-anchor-link" href="#diagram-example-1" aria-hidden="true"></a> Diagram Example 1</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__b9850854988dd" src="https://embed.zenn.studio/mermaid#zenn-embedded__b9850854988dd" data-content="graph%20TD%0A%20%20%20%20subgraph%20User%20Interface%3A%20Frontend%0A%20%20%20%20%20%20%20%20A%5BMicro-Frontend%20A%5D%0A%20%20%20%20%20%20%20%20B%5BMicro-Frontend%20B%5D%0A%20%20%20%20%20%20%20%20C%5BMicro-Frontend%20C%5D%0A%20%20%20%20%20%20%20%20Router(Frontend%20Router%2FContainer)%0A%20%20%20%20end%0A%0A%20%20%20%20subgraph%20Backend%20Services%0A%20%20%20%20%20%20%20%20D%5BMicroservice%201%3A%20e.g.%2C%20Product%20Catalog%5D%0A%20%20%20%20%20%20%20%20E%5BMicroservice%202%3A%20e.g.%2C%20User%20Profile%5D%0A%20%20%20%20%20%20%20%20F%5BMicroservice%203%3A%20e.g.%2C%20Shopping%20Cart%5D%0A%20%20%20%20%20%20%20%20API_GW(API%20Gateway)%0A%20%20%20%20end%0A%0A%20%20%20%20Router%20--%3E%20A%0A%20%20%20%20Router%20--%3E%20B%0A%20%20%20%20Router%20--%3E%20C%0A%0A%20%20%20%20A%20--%20API%20Calls%20--%3E%20API_GW%0A%20%20%20%20B%20--%20API%20Calls%20--%3E%20API_GW%0A%20%20%20%20C%20--%20API%20Calls%20--%3E%20API_GW%0A%0A%20%20%20%20API_GW%20--%20Routes%20Request%20--%3E%20D%0A%20%20%20%20API_GW%20--%20Routes%20Request%20--%3E%20E%0A%20%20%20%20API_GW%20--%20Routes%20Request%20--%3E%20F%0A%0A%20%20%20%20D%20--%20Owns%20Data%20--%3E%20DB1%5BDatabase%201%5D%0A%20%20%20%20E%20--%20Owns%20Data%20--%3E%20DB2%5BDatabase%202%5D%0A%20%20%20%20F%20--%20Owns%20Data%20--%3E%20DB3%5BDatabase%203%5D" frameborder="0" scrolling="no" loading="lazy"></iframe></span><h2 id="diagram-example-2" data-line="35" class="code-line">
<a class="header-anchor-link" href="#diagram-example-2" aria-hidden="true"></a> Diagram Example 2</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__2639ffce81cad" src="https://embed.zenn.studio/mermaid#zenn-embedded__2639ffce81cad" data-content="graph%20TD%0A%20%20%20%20A%5BClient%20Browser%5D%20--%3E%20B%5BMicro-Frontend%20App%20Shell%5D%0A%20%20%20%20B%20--%3E%20C1%5BFrontend%20-%20Team%20A%3A%20React%5D%0A%20%20%20%20B%20--%3E%20C2%5BFrontend%20-%20Team%20B%3A%20Vue%5D%0A%20%20%20%20B%20--%3E%20C3%5BFrontend%20-%20Team%20C%3A%20Svelte%5D%0A%0A%20%20%20%20C1%20--%3E%20D1%5BBackend%20-%20Team%20A%20Service%5D%0A%20%20%20%20C2%20--%3E%20D2%5BBackend%20-%20Team%20B%20Service%5D%0A%20%20%20%20C3%20--%3E%20D3%5BBackend%20-%20Team%20C%20Service%5D%0A%0A%20%20%20%20D1%20--%3E%20E%5BMicroservice%20Layer%5D%0A%20%20%20%20D2%20--%3E%20E%0A%20%20%20%20D3%20--%3E%20E%0A%0A%20%20%20%20E%20--%3E%20F%5BShared%20Database%2FAPI%20Gateway%5D%0A%0A%20%20%20%20subgraph%20Microservices%0A%20%20%20%20%20%20%20%20D1%0A%20%20%20%20%20%20%20%20D2%0A%20%20%20%20%20%20%20%20D3%0A%20%20%20%20%20%20%20%20F%0A%20%20%20%20end%0A%0A%20%20%20%20subgraph%20Micro-Frontend%0A%20%20%20%20%20%20%20%20C1%0A%20%20%20%20%20%20%20%20C2%0A%20%20%20%20%20%20%20%20C3%0A%20%20%20%20%20%20%20%20B%0A%20%20%20%20end" frameborder="0" scrolling="no" loading="lazy"></iframe></span>

Relationship Micro-Frontend and microservices

Diagram Example 1

Diagram Example 2

Discussion