C4 Diagram Comparison: mmdg branches vs mermaid.js
← Home | Ecosystem
c4-title-centering
Fixes title centering in C4 diagrams
c4-container-work
Container layout improvements
container_01_title.mmd
C4Container
title Model Bank - Container Diagram
mmdg (Go)
Model Bank - Container Diagram
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
c4-title-centering
Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
container_02_person.mmd
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
mmdg (Go)
Model Bank - Container Diagram
Bank Customer
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
c4-title-centering
<<person>> Bank Customer Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
Bank Customer
container_03_ext.mmd
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Ext(fps, "mock-fps", "FPS simulator")
mmdg (Go)
Model Bank - Container Diagram
Bank Customer
mock-fps
FPS simulator
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Ext(fps, "mock-fps", "FPS simulator")
c4-title-centering
<<person>> Bank Customer <<external_system>> mock-fps Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
Bank Customer
mock-fps
FPS simulator
container_04_boundary_one.mmd
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
}
System_Ext(fps, "mock-fps", "FPS simulator")
mmdg (Go)
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
mock-fps
FPS simulator
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
}
System_Ext(fps, "mock-fps", "FPS simulator")
c4-title-centering
<<person>> Bank Customer <<container>> Web UI <<external_system>> mock-fps Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
mock-fps
FPS simulator
container_05_containers.mmd
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
Container(server, "Server", "Go + lofigui", "HTTP server with SSR")
Container(sim, "Simulation Engine", "Go", "Account lifecycle, interest accrual")
Container(payments, "Payment Sim", "Go", "Payment generation and processing")
}
System_Ext(fps, "mock-fps", "FPS simulator")
mmdg (Go)
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
Server
[Go + lofigui]
HTTP server with SSR
Simulation Engine
[Go]
Account lifecycle, interest accrual
Payment Sim
[Go]
Payment generation and processing
mock-fps
FPS simulator
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
Container(server, "Server", "Go + lofigui", "HTTP server with SSR")
Container(sim, "Simulation Engine", "Go", "Account lifecycle, interest accrual")
Container(payments, "Payment Sim", "Go", "Payment generation and processing")
}
System_Ext(fps, "mock-fps", "FPS simulator")
c4-title-centering
<<person>> Bank Customer <<container>> Web UI <<container>> Server <<container>> Simulation Engine <<container>> Payment Sim <<external_system>> mock-fps Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
Server
[Go + lofigui]
HTTP server with SSR
Simulation Engine
[Go]
Account lifecycle, interest accrual
Payment Sim
[Go]
Payment generation and processing
mock-fps
FPS simulator
container_06_db.mmd
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
Container(server, "Server", "Go + lofigui", "HTTP server with SSR")
Container(sim, "Simulation Engine", "Go", "Account lifecycle, interest accrual")
Container(payments, "Payment Sim", "Go", "Payment generation and processing")
ContainerDb(ledger, "Ledger", "go-luca", "Double-entry accounting")
}
System_Ext(fps, "mock-fps", "FPS simulator")
mmdg (Go)
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
Server
[Go + lofigui]
HTTP server with SSR
Simulation Engine
[Go]
Account lifecycle, interest accrual
Payment Sim
[Go]
Payment generation and processing
Ledger
[go-luca]
Double-entry accounting
mock-fps
FPS simulator
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
Container(server, "Server", "Go + lofigui", "HTTP server with SSR")
Container(sim, "Simulation Engine", "Go", "Account lifecycle, interest accrual")
Container(payments, "Payment Sim", "Go", "Payment generation and processing")
ContainerDb(ledger, "Ledger", "go-luca", "Double-entry accounting")
}
System_Ext(fps, "mock-fps", "FPS simulator")
c4-title-centering
<<person>> Bank Customer <<container>> Web UI <<container>> Server <<container>> Simulation Engine <<container>> Payment Sim <<external_system>> mock-fps Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
Server
[Go + lofigui]
HTTP server with SSR
Simulation Engine
[Go]
Account lifecycle, interest accrual
Payment Sim
[Go]
Payment generation and processing
Ledger
[go-luca]
Double-entry accounting
mock-fps
FPS simulator
container_07_rels.mmd
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
Container(server, "Server", "Go + lofigui", "HTTP server with SSR")
Container(sim, "Simulation Engine", "Go", "Account lifecycle, interest accrual")
Container(payments, "Payment Sim", "Go", "Payment generation and processing")
ContainerDb(ledger, "Ledger", "go-luca", "Double-entry accounting")
}
System_Ext(fps, "mock-fps", "FPS simulator")
Rel(customer, web, "Uses", "HTTPS")
Rel(customer, server, "Uses", "HTTPS")
Rel(web, sim, "Calls", "WASM")
Rel(server, sim, "Calls", "Go API")
Rel(sim, ledger, "Records transactions")
Rel(payments, fps, "Sends payments", "HTTP")
Rel(payments, ledger, "Records movements")
mmdg (Go)
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
Server
[Go + lofigui]
HTTP server with SSR
Simulation Engine
[Go]
Account lifecycle, interest accrual
Payment Sim
[Go]
Payment generation and processing
Ledger
[go-luca]
Double-entry accounting
mock-fps
FPS simulator
Uses
[HTTPS]
Uses
[HTTPS]
Calls
[WASM]
Calls
[Go API]
Records transactions
Sends payments
[HTTP]
Records movements
mermaid.js (browser)
C4Container
title Model Bank - Container Diagram
Person(customer, "Bank Customer")
System_Boundary(bank, "Model Bank") {
Container(web, "Web UI", "Go WASM + Bulma", "Browser-based dashboard")
Container(server, "Server", "Go + lofigui", "HTTP server with SSR")
Container(sim, "Simulation Engine", "Go", "Account lifecycle, interest accrual")
Container(payments, "Payment Sim", "Go", "Payment generation and processing")
ContainerDb(ledger, "Ledger", "go-luca", "Double-entry accounting")
}
System_Ext(fps, "mock-fps", "FPS simulator")
Rel(customer, web, "Uses", "HTTPS")
Rel(customer, server, "Uses", "HTTPS")
Rel(web, sim, "Calls", "WASM")
Rel(server, sim, "Calls", "Go API")
Rel(sim, ledger, "Records transactions")
Rel(payments, fps, "Sends payments", "HTTP")
Rel(payments, ledger, "Records movements")
c4-title-centering
<<person>> Bank Customer <<container>> Payment Sim <<container>> Web UI <<container>> Server <<external_system>> mock-fps <<container>> Simulation Engine ledger Uses
[HTTPS] Uses
[HTTPS] Calls
[WASM] Calls
[Go API] Records transactions Sends payments
[HTTP] Records movements Model Bank - Container Diagram
c4-container-work
Model Bank - Container Diagram
Model Bank
Bank Customer
Web UI
[Go WASM + Bulma]
Browser-based dashboard
Server
[Go + lofigui]
HTTP server with SSR
Simulation Engine
[Go]
Account lifecycle, interest accrual
Payment Sim
[Go]
Payment generation and processing
Ledger
[go-luca]
Double-entry accounting
mock-fps
FPS simulator
Uses
[HTTPS]
Uses
[HTTPS]
Calls
[WASM]
Calls
[Go API]
Records transactions
Sends payments
[HTTP]
Records movements
system_context.mmd
C4Context
title Model Bank - System Context
Person(customer, "Bank Customer", "A customer of the model bank")
System(modelBank, "Model Bank", "Simulates core banking: accounts, interest, payments")
System_Ext(fps, "Faster Payments", "UK Faster Payments Service (mock-fps)")
Rel(customer, modelBank, "Views accounts, sends payments")
Rel(modelBank, fps, "Sends/receives payments")
mmdg (Go)
Model Bank - System Context
Bank Customer
A customer of the model bank
Model Bank
Simulates core banking: accounts, interest, payments
Faster Payments
UK Faster Payments Service (mock-fps)
Views accounts, sends payments
Sends/receives payments
mermaid.js (browser)
C4Context
title Model Bank - System Context
Person(customer, "Bank Customer", "A customer of the model bank")
System(modelBank, "Model Bank", "Simulates core banking: accounts, interest, payments")
System_Ext(fps, "Faster Payments", "UK Faster Payments Service (mock-fps)")
Rel(customer, modelBank, "Views accounts, sends payments")
Rel(modelBank, fps, "Sends/receives payments")
c4-title-centering
<<person>> Bank Customer <<system>> Model Bank <<external_system>> Faster Payments Views accounts, sends payments Sends/receives payments Model Bank - System Context
c4-container-work
Model Bank - System Context
Bank Customer
A customer of the model bank
Model Bank
Simulates core banking: accounts, interest, payments
Faster Payments
UK Faster Payments Service (mock-fps)
Views accounts, sends payments
Sends/receives payments