rusty-mermaid Gallery

C4Context
    title System Landscape
    Person(admin, "Admin", "Manages system")
    Boundary(b1, "Internal Systems") {
        System(crm, "CRM", "Customer management")
        System(billing, "Billing", "Payment processing")
    }
    Boundary(b2, "External") {
        System_Ext(email, "Email Service", "SendGrid")
    }
    Rel(admin, crm, "Manages customers")
    Rel(crm, billing, "Triggers invoices")
    Rel(crm, email, "Sends notifications", "SMTP")

C4Container
  title Container Diagram
  Person(user, "User", "Interacts with system")
  System_Boundary(bank, "Banking System") {
    Container(web, "Web App", "Spring Boot", "Serves web pages")
    ContainerDb(db, "Database", "PostgreSQL", "Stores data")
    Container(api, "API", "Node.js", "REST API")
  }
  Rel(user, web, "Visits", "HTTPS")
  Rel(web, api, "Calls", "JSON")
  Rel(api, db, "Reads/Writes", "SQL")

C4Context
  title Internet Banking System
  Person(customer, "Banking Customer", "A customer of the bank")
  System(banking, "Internet Banking System", "Allows customers to view accounts")
  System_Ext(email, "E-mail System", "Sends emails to customers")
  System_Ext(core, "Core Banking System", "Stores account data")
  Rel(customer, banking, "Uses", "HTTPS")
  Rel(banking, email, "Sends emails", "SMTP")
  Rel(banking, core, "Gets account data", "API")

C4Dynamic
    title API Request Flow
    Person(user, "Mobile User", "Uses mobile app")
    Container(app, "Mobile App", "React Native")
    Container(api, "API Gateway", "Node.js", "Routes requests")
    ContainerDb(db, "Database", "PostgreSQL", "Stores data")
    Rel(user, app, "Opens", "HTTPS")
    Rel(app, api, "API calls", "REST/JSON")
    Rel(api, db, "Reads/writes", "SQL")

C4Context
    System(app, "My Application", "A simple app")