Simulation Job Queue System - C4 Architecture Diagrams (Mermaid)
1. System Context Diagram (C1)
C4Context
title System Context Diagram - Simulation Job Queue System
Person(researcher, "Researcher", "User who submits and monitors simulation jobs")
Person(admin, "System Administrator", "Manages system configuration and monitoring")
System(simSystem, "Simulation System", "Allows users to submit, monitor, and manage simulation jobs using consistent terminology across all interfaces")
System_Ext(machinery, "Machinery Queue", "Distributed task queue using Redis for job processing")
System_Ext(lambda, "AWS Lambda", "Serverless compute platform for simulation execution")
System_Ext(sqs, "AWS SQS", "Message queue service for Lambda-based simulations")
System_Ext(redis, "Redis", "In-memory data store for Machinery queue backend")
System_Ext(monitoring, "Monitoring System", "System metrics and logs (Prometheus, Grafana)")
Rel_D(researcher, simSystem, "Submits simulations, views results", "HTTPS")
Rel_D(admin, simSystem, "Configures system, views metrics", "HTTPS")
Rel(simSystem, machinery, "Enqueues simulation tasks", "Machinery Protocol")
Rel(simSystem, lambda, "Invokes simulation functions", "AWS SDK")
Rel(simSystem, sqs, "Sends simulation messages", "AWS SQS API")
Rel(machinery, redis, "Stores task state", "Redis Protocol")
Rel(simSystem, monitoring, "Sends metrics and logs", "Prometheus/Loki")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
2. Container Diagram (C2)
C4Container
title Container Diagram - Simulation Job Queue System
Person(researcher, "Researcher", "User who submits and monitors simulations")
System_Boundary(simSystem, "Simulation System") {
Container(spa, "Web Application", "Vue.js SPA", "Provides simulation submission and monitoring UI using consistent 'Simulation' terminology")
Container(docs, "User Documentation", "Markdown/HTML", "User manual and API documentation using 'Simulation' ubiquitous language")
Container(api, "API Application", "Go", "Handles simulation requests, implements domain logic and ports")
Container(domain, "Domain Core", "Go", "Pure business logic for simulations - no infrastructure dependencies")
ContainerDb(db, "Application Database", "PostgreSQL", "Stores simulation metadata, status, and results")
}
System_Ext(machinery, "Machinery Queue", "Task queue with Redis backend")
System_Ext(lambda, "AWS Lambda", "Serverless execution platform")
System_Ext(sqs, "AWS SQS", "Message queue service")
Rel(researcher, spa, "Views simulations, submits new simulations", "HTTPS")
Rel(researcher, docs, "Reads about simulation concepts", "HTTPS")
Rel(spa, api, "Makes API calls using Simulation terminology", "JSON/HTTPS")
Rel(api, domain, "Uses domain services and aggregates", "Function calls")
Rel(api, db, "Reads/writes simulation data", "SQL/TLS")
Rel(api, machinery, "Enqueues via MachineryAdapter", "Machinery Protocol")
Rel(api, lambda, "Invokes via LambdaAdapter", "AWS SDK")
Rel(api, sqs, "Sends messages via LambdaAdapter", "AWS SQS API")
UpdateRelStyle(researcher, spa, $offsetY="-40")
UpdateRelStyle(spa, api, $offsetY="-20")
3. Component Diagram - Backend API (C3)
C4Component
title Component Diagram - API Application (Backend)
Container(spa, "Web Application", "Vue.js SPA", "Frontend making API calls")
Container_Boundary(api, "API Application") {
Component(router, "HTTP Router", "Go net/http", "Routes requests to appropriate handlers")
Component(middleware, "Auth Middleware", "Go middleware", "Authentication and authorization")
Component(simHandler, "SimulationHandler", "Primary Adapter", "Handles HTTP requests for simulation operations")
Component(simService, "SimulationService", "Primary Port Interface", "Defines use cases for simulation operations")
Component(simAggregate, "Simulation Aggregate", "Domain Entity", "Core simulation business logic and rules")
Component(simScheduler, "SimulationScheduler", "Domain Service", "Orchestrates simulation scheduling logic")
Component(simValidator, "SimulationValidator", "Domain Service", "Validates simulation parameters")
Component(queuePort, "SimulationQueue", "Secondary Port Interface", "Defines contract for queue operations")
Component(repoPort, "SimulationRepository", "Secondary Port Interface", "Defines contract for persistence")
Component(machineryAdapter, "MachinerySimulationQueue", "Secondary Adapter", "Implements queue port for Machinery")
Component(lambdaAdapter, "LambdaSimulationQueue", "Secondary Adapter", "Implements queue port for AWS Lambda")
Component(pgAdapter, "PostgresSimulationRepo", "Secondary Adapter", "Implements repository port for PostgreSQL")
}
ContainerDb(db, "Application Database", "PostgreSQL", "Stores simulation data")
System_Ext(machinery, "Machinery Queue", "Task queue system")
System_Ext(lambda, "AWS Lambda + SQS", "Serverless platform")
Rel(spa, router, "Makes API calls", "JSON/HTTPS")
Rel(router, middleware, "Passes request")
Rel(middleware, simHandler, "Authenticated request")
Rel(simHandler, simService, "Calls use cases", "Go interface")
Rel(simService, simAggregate, "Uses")
Rel(simService, simScheduler, "Uses")
Rel(simService, simValidator, "Uses")
Rel(simService, queuePort, "Enqueues via interface")
Rel(simService, repoPort, "Persists via interface")
Rel(queuePort, machineryAdapter, "Implemented by")
Rel(queuePort, lambdaAdapter, "Implemented by")
Rel(repoPort, pgAdapter, "Implemented by")
Rel(machineryAdapter, machinery, "Translates to Machinery Task", "Machinery Protocol")
Rel(lambdaAdapter, lambda, "Translates to Lambda Event", "AWS SDK")
Rel(pgAdapter, db, "SQL queries", "SQL/TLS")
UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="1")
4. Component Diagram - Frontend (C3 - Detailed)
C4Component
title Component Diagram - Web Application (Vue.js Frontend)
Person(researcher, "Researcher", "System user")
Container_Boundary(spa, "Web Application - Vue.js SPA") {
Component(router, "Vue Router", "Vue Router", "Client-side routing, navigation guards")
Component(simListView, "SimulationListView", "Vue Component", "Displays list of simulations with filtering and sorting")
Component(simDetailView, "SimulationDetailView", "Vue Component", "Shows detailed simulation information and logs")
Component(simSubmitView, "SimulationSubmitView", "Vue Component", "Form for submitting new simulations")
Component(dashboardView, "DashboardView", "Vue Component", "Overview with statistics and recent simulations")
Component(simCard, "SimulationCard", "Vue Component", "Reusable card displaying simulation summary")
Component(simForm, "SimulationForm", "Vue Component", "Reusable form with validation for simulation parameters")
Component(simStatus, "SimulationStatusBadge", "Vue Component", "Visual status indicator")
Component(simTable, "SimulationTable", "Vue Component", "Sortable, filterable table of simulations")
Component(simStore, "SimulationStore", "Pinia Store Module", "Manages simulation state, actions, and getters")
Component(authStore, "AuthStore", "Pinia Store Module", "Manages authentication state")
Component(uiStore, "UIStore", "Pinia Store Module", "Manages UI state (loading, errors, notifications)")
Component(apiClient, "ApiClient", "Service", "HTTP client wrapper with interceptors, error handling")
Component(simService, "SimulationService", "Service", "Translates between API DTOs and domain models")
Component(authService, "AuthService", "Service", "Handles authentication, token management")
Component(useSimulation, "useSimulation", "Composable", "Reactive simulation operations (submit, cancel, refresh)")
Component(useSimulationList, "useSimulationList", "Composable", "Reactive list operations (fetch, filter, sort)")
Component(simModel, "Simulation", "TypeScript Interface", "Frontend domain model matching backend ubiquitous language")
Component(simDTO, "SimulationDTO", "TypeScript Interface", "Data transfer object for API communication")
}
Container(api, "API Application", "Go", "Backend API")
Rel(researcher, router, "Navigates to pages", "HTTPS")
Rel(router, simListView, "Routes to")
Rel(router, simDetailView, "Routes to")
Rel(router, simSubmitView, "Routes to")
Rel(router, dashboardView, "Routes to")
Rel(simListView, simTable, "Uses", "Props & Events")
Rel(simListView, simCard, "Uses", "Props & Events")
Rel(simDetailView, simStatus, "Uses", "Props")
Rel(simSubmitView, simForm, "Uses", "Props & Events")
Rel(simListView, useSimulationList, "Uses", "Reactive data")
Rel(simDetailView, useSimulation, "Uses", "Reactive data")
Rel(simSubmitView, useSimulation, "Uses", "Reactive data")
Rel(useSimulation, simStore, "Accesses/mutates")
Rel(useSimulationList, simStore, "Accesses/mutates")
Rel(simStore, simService, "Calls")
Rel(authStore, authService, "Calls")
Rel(simService, apiClient, "Makes HTTP requests")
Rel(authService, apiClient, "Makes HTTP requests")
Rel(simService, simModel, "Returns/accepts")
Rel(simService, simDTO, "Transforms to/from")
Rel(apiClient, api, "HTTP requests", "JSON/HTTPS")
UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="1")
5. Dynamic Diagram - Submission Flow (C4)
C4Dynamic
title Dynamic Diagram - Simulation Submission Flow
Person(researcher, "Researcher", "System user")
Container_Boundary(frontend, "Vue.js Frontend") {
Component(view, "SimulationSubmitView", "Vue Component")
Component(composable, "useSimulation()", "Composable")
Component(store, "SimulationStore", "Pinia Store")
Component(service, "SimulationService", "Service")
Component(client, "ApiClient", "HTTP Client")
}
Container(api, "API Backend", "Go")
ContainerDb(db, "Database", "PostgreSQL")
System_Ext(queue, "Queue System", "Machinery/Lambda")
Rel(researcher, view, "1. Submits form", "User input")
Rel(view, composable, "2. submitSimulation()", "Function call")
Rel(composable, store, "3. Dispatch action", "Pinia")
Rel(store, service, "4. submit(simulation)", "Method call")
Rel(service, client, "5. POST request", "HTTP")
Rel(client, api, "6. /api/v1/simulations", "JSON/HTTPS")
Rel(api, db, "7. Save metadata", "SQL")
Rel(api, queue, "8. Enqueue task", "Adapter")
Rel(api, client, "9. Return DTO", "201 Created")
Rel(client, service, "10. Response", "Promise")
Rel(service, store, "11. Update state", "Simulation")
Rel(store, view, "12. Reactive update", "Vue")
Rel(view, researcher, "13. Show notification", "UI feedback")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
6. Deployment Diagram - System Deployment
C4Deployment
title Deployment Diagram - Simulation System
Deployment_Node(browser, "User's Browser", "Chrome/Firefox/Safari") {
Container(spa, "Vue.js SPA", "JavaScript", "Frontend application")
}
Deployment_Node(cdn, "CDN", "CloudFront") {
Container(staticAssets, "Static Assets", "JS/CSS/HTML", "Compiled frontend bundle")
}
Deployment_Node(kubernetes, "Kubernetes Cluster", "AWS EKS") {
Deployment_Node(apiPod, "API Pod", "Container") {
Container(api, "API Application", "Go", "Backend service")
}
Deployment_Node(workerPod, "Worker Pod", "Container") {
Container(worker, "Machinery Worker", "Go", "Processes simulation tasks")
}
}
Deployment_Node(aws, "AWS", "Cloud Provider") {
Deployment_Node(rds, "RDS", "Managed PostgreSQL") {
ContainerDb(db, "Database", "PostgreSQL", "Simulation data")
}
Deployment_Node(elasticache, "ElastiCache", "Managed Redis") {
ContainerDb(redis, "Redis", "Redis", "Queue backend")
}
Deployment_Node(lambdaService, "Lambda Service", "Serverless") {
Container(lambda, "Simulation Function", "Python/Go", "Serverless execution")
}
Deployment_Node(sqsService, "SQS", "Message Queue") {
Container(sqs, "Simulation Queue", "SQS", "Lambda trigger")
}
}
Rel(spa, staticAssets, "Loads from", "HTTPS")
Rel(spa, api, "API calls", "JSON/HTTPS")
Rel(api, db, "Queries", "SQL/TLS")
Rel(api, redis, "Queue operations", "Redis Protocol")
Rel(api, sqs, "Send messages", "AWS SDK")
Rel(worker, redis, "Poll tasks", "Redis Protocol")
Rel(sqs, lambda, "Triggers", "Event")
Rel(lambda, db, "Update results", "SQL/TLS")
UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="1")
Alternative Diagrams (Non-C4 Mermaid)
Sequence Diagram - Detailed Submission Flow
sequenceDiagram
autonumber
actor Researcher
participant View as SimulationSubmitView
participant Form as SimulationForm
participant Comp as useSimulation()
participant Store as SimulationStore
participant Service as SimulationService
participant Client as ApiClient
participant API as Go Backend
participant DB as PostgreSQL
participant Queue as Queue System
Researcher->>View: Fills form and clicks Submit
View->>Form: Trigger validation
Form->>Form: Validate SimulationParameters
Form-->>View: Emit submit event (formData)
Note over View,Comp: Frontend Business Logic
View->>Comp: submitSimulation(params)
Comp->>Comp: Create Simulation instance
Comp->>Comp: Validate domain rules
Note over Comp,Store: State Management
Comp->>Store: dispatch('submitSimulation')
Store->>Store: Set isLoading = true
Note over Store,Service: Service/Adapter Layer
Store->>Service: simulationService.submit(simulation)
Service->>Service: Transform to SimulationDTO
Service->>Client: apiClient.post('/simulations', dto)
Client->>Client: Add auth headers & interceptors
Note over Client,Queue: Backend Processing
Client->>API: POST /api/v1/simulations
API->>DB: Save simulation metadata
API->>Queue: Enqueue via adapter
API-->>Client: Return SimulationDTO (201)
Note over Service,View: Response Handling
Client-->>Service: Promise resolves
Service->>Service: Transform DTO to Simulation
Service-->>Store: Return Simulation
Store->>Store: Add to simulations[]
Store->>Store: Set isLoading = false
Note over View,Researcher: UI Update
Store-->>Comp: Reactive state update
Comp-->>View: State propagates (Vue reactivity)
View->>View: Hide loading spinner
View->>Researcher: Show success notification
View->>Researcher: Navigate to simulation detail
Class Diagram - Domain Models
classDiagram
class Simulation {
+SimulationId id
+string name
+SimulationParameters parameters
+SimulationStatus status
+Date createdAt
+Date updatedAt
+submit() Promise~void~
+cancel() Promise~void~
+validate() ValidationResult
+isRunning() boolean
+isCompleted() boolean
}
class SimulationParameters {
+number iterations
+number timeout
+AlgorithmType algorithm
+Map~string,any~ customParams
+validate() boolean
+toJSON() object
}
class SimulationId {
<<Value Object>>
+string value
+equals(other) boolean
+toString() string
}
class SimulationStatus {
<<enumeration>>
PENDING
RUNNING
COMPLETED
FAILED
CANCELLED
}
class AlgorithmType {
<<enumeration>>
MONTE_CARLO
GENETIC_ALGORITHM
NEURAL_NETWORK
CUSTOM
}
class SimulationDTO {
<<Data Transfer Object>>
+string id
+string name
+object parameters
+string status
+string createdAt
}
class SimulationService {
<<Adapter>>
+submit(simulation) Promise~Simulation~
+cancel(id) Promise~void~
+getById(id) Promise~Simulation~
+list(filters) Promise~Simulation[]~
-toDTO(simulation) SimulationDTO
-fromDTO(dto) Simulation
}
Simulation "1" *-- "1" SimulationId : has
Simulation "1" *-- "1" SimulationParameters : contains
Simulation "1" --> "1" SimulationStatus : has
SimulationParameters --> AlgorithmType : uses
SimulationService ..> Simulation : creates/returns
SimulationService ..> SimulationDTO : transforms
note for Simulation "Domain Model - matches backend ubiquitous language"
note for SimulationService "Adapter Pattern - translates between domain and API"
State Diagram - Simulation Lifecycle
stateDiagram-v2
[*] --> PENDING : User submits simulation
PENDING --> RUNNING : Queue picks up task
PENDING --> CANCELLED : User cancels before start
PENDING --> FAILED : Validation fails
RUNNING --> COMPLETED : Execution successful
RUNNING --> FAILED : Execution error
RUNNING --> CANCELLED : User cancels during execution
COMPLETED --> [*]
FAILED --> [*]
CANCELLED --> [*]
note right of PENDING
Initial state
Awaiting queue pickup
end note
note right of RUNNING
Currently executing
Progress updates available
end note
note right of COMPLETED
Successful completion
Results available
end note