C4 Architecture Diagrams

C4 diagrams model software architecture at different zoom levels.

Container Diagram with Icons

This example uses the logos icon pack registered in astro.config.mjs.

architecture-beta
    group api(logos:aws-lambda)[API Layer]

    service db(logos:postgresql)[Database] in api
    service disk1(logos:aws-s3)[Storage] in api
    service disk2(logos:cloudflare)[CDN] in api
    service server(logos:docker)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

Context Diagram

C4Context
    title System Context Diagram for astro-mermaid-satteri

    Person(user, "Developer", "Uses the integration in their project")
    System(sys, "astro-mermaid-satteri", "Renders mermaid diagrams client-side")
    System_Ext(mermaidLib, "Mermaid.js", "Client-side rendering library")
    System_Ext(cdn, "Iconify CDN", "Serves icon packs")

    Rel(user, sys, "Configures")
    Rel(sys, mermaidLib, "Dynamically imports")
    Rel(sys, cdn, "Fetches icon packs from")

Back to overview.