Templates / flowchart

Micro-frontend architecture

An app shell composing independently deployed micro-frontends around a shared event bus.

Open in studio

Preview

Mermaid 11 renderer

Rendering preview...

Mermaid source

flowchart

flowchart TD
    shell[App shell] --> nav[Nav micro-frontend]
    shell --> catalog[Catalog micro-frontend]
    shell --> cart[Cart micro-frontend]
    shell --> checkout[Checkout micro-frontend]
    catalog --> catalogApi[(Catalog API)]
    cart --> cartApi[(Cart API)]
    checkout --> paymentApi[(Payment API)]
    shell --> eventBus{{Shared event bus}}
    nav --> eventBus
    catalog --> eventBus
    cart --> eventBus

More templates

flowchartArchitecture

Microservices architecture

A service map with an API gateway, core services, and shared infrastructure. A solid starting point for README architecture sections.

sequenceDiagramProcess

User login sequence

A login flow with token issuance and a failure branch. Useful for documenting auth endpoints and session behavior.

stateDiagram-v2Process

Order state machine

Lifecycle states for an e-commerce order, from creation to fulfillment, with cancellation and refund paths.