How do I draw an edge from a whole group?

Give the subgraph an id, subgraph SVC[Microservices], then write SVC -.-> REG. The edge starts at the group border, which is much clearer than one line per service.

What do dashed and solid lines mean?

Solid lines are business calls or data flow; dashed lines are infrastructure dependencies such as registration, configuration and metrics. This is a convention, not syntax.

Can I show several instances of a service?

Mermaid has no stacked shape; note it in the label: O[Order service ×3].

Microservices Architecture Diagram Template

Microservices architecture with a client, API gateway, four services, a database per service, a message queue and shared infrastructure (service registry, config server, monitoring). For architecture documents; free PNG, Word and PowerPoint export.

Previewed in the “Ink Teal” theme; you can switch themes in the editor

Open in the editorFree · No sign-up · No watermark

Edit the text, pick a theme, export Word / PowerPoint / PDF

When to use it

Migration plans to microservices, architecture design documents and tech talk slides. Each service owns its database (database per service), the order service notifies asynchronously through a queue, and the registry, config server and monitoring are connected with dashed lines from the whole "Microservices" group so that each service does not need three extra lines.

Making it yours

Add a service inside subgraph SVC, connect it from the gateway and give it its own database.
Name the actual components: REG[Consul], MQ[[Kafka]], GW[Kong].
Synchronous service-to-service calls (order to inventory) are solid edges O --> I; asynchronous events go through the queue.
The diagram flows left to right; switch to TB when there are many services.

Mermaid code

flowchart LR
    C[Client] --> GW[API gateway]
    subgraph SVC[Microservices]
        A[User service]
        O[Order service]
        P[Product service]
        N[Notification service]
    end
    GW --> A
    GW --> O
    GW --> P
    A --> DA[(User DB)]
    O --> DO[(Order DB)]
    P --> DP[(Product DB)]
    O --> MQ[[Message queue]]
    MQ --> N
    subgraph INFRA[Infrastructure]
        REG[Service registry]
        CFG[Config server]
        MON[Monitoring and tracing]
    end
    SVC -.-> REG
    SVC -.-> CFG
    SVC -.-> MON

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

Draw a microservices architecture diagram in Mermaid flowchart LR syntax: a client calls an API gateway, which routes to user, order and product services inside a subgraph named Microservices that also contains a notification service; each service has its own database (cylinder nodes); the order service publishes events to a message queue consumed by the notification service. A second subgraph named Infrastructure contains a service registry, a config server and monitoring and tracing, connected with dashed edges from the Microservices group. Output only the mermaid code block.

FAQ

How do I draw an edge from a whole group?: Give the subgraph an id, subgraph SVC[Microservices], then write SVC -.-> REG. The edge starts at the group border, which is much clearer than one line per service.
What do dashed and solid lines mean?: Solid lines are business calls or data flow; dashed lines are infrastructure dependencies such as registration, configuration and metrics. This is a convention, not syntax.
Can I show several instances of a service?: Mermaid has no stacked shape; note it in the label: O[Order service ×3].

More in this category

All templates

Updated 2026-09-05