Shows the system in context: who uses it and which external systems it interacts with.
flowchart TB
customer["Personal Banking Customer"]
staff["Bank Staff"]
onlineBanking["Online Banking System"]
email["E-mail System"]
mainframe["Mainframe Banking System"]
customer -- "Views account balances and makes payments using" --> onlineBanking
staff -- "Manages customer accounts and support requests using" --> onlineBanking
onlineBanking -- "Sends e-mail notifications using" --> email
onlineBanking -- "Gets account and transaction data from" --> mainframe
flowchart TB
customer["Customer"]
seller["Seller"]
ecommerce["E-Commerce Platform"]
payment["Payment Gateway"]
shipping["Shipping Provider"]
email["E-mail System"]
customer -- "Browses products and places orders using" --> ecommerce
seller -- "Lists products and manages inventory using" --> ecommerce
ecommerce -- "Processes payments via" --> payment
ecommerce -- "Dispatches orders via" --> shipping
ecommerce -- "Sends notifications using" --> email
flowchart TB
rider["Rider"]
driver["Driver"]
ridesharing["Ride-Sharing App"]
maps["Maps & Routing API"]
payment["Payment Gateway"]
sms["SMS Provider"]
rider -- "Requests and pays for rides using" --> ridesharing
driver -- "Accepts trips and receives payouts via" --> ridesharing
ridesharing -- "Gets routes and ETAs from" --> maps
ridesharing -- "Processes fares via" --> payment
ridesharing -- "Sends SMS notifications using" --> sms
flowchart TB
developer["Developer / Architect"]
tooda["Tooda"]
githubPages["GitHub Pages"]
mermaid["Mermaid"]
excalidraw["Excalidraw"]
developer -- "Browses and creates diagrams using" --> tooda
tooda -- "Is hosted and served by" --> githubPages
tooda -- "Renders C4 diagrams with" --> mermaid
tooda -- "Renders freehand diagrams with" --> excalidraw
flowchart TB
patient["Patient"]
doctor["Doctor"]
admin["Admin"]
platform["Healthcare Platform"]
pharmacy["Pharmacy System"]
insurance["Insurance System"]
lab["Laboratory System"]
patient -- "Schedules appointments" --> platform
doctor -- "Views patient records" --> platform
admin -- "Manages users" --> platform
platform -- "Sends prescriptions" --> pharmacy
platform -- "Verifies coverage" --> insurance
platform -- "Orders tests" --> lab
Zooms in on the system to show the containers (applications and data stores) that make it up.
flowchart TB
customer["Personal Banking Customer"]
webApp["Web Application"]
mobileApp["Mobile App"]
spa["Single-Page App"]
apiApp["API Application"]
db["Database"]
email["E-mail System"]
mainframe["Mainframe Banking System"]
customer -- "Visits" --> webApp
customer -- "Uses" --> mobileApp
webApp -- "Delivers" --> spa
spa -- "Makes API calls to" --> apiApp
mobileApp -- "Makes API calls to" --> apiApp
apiApp -- "Reads/writes" --> db
apiApp -- "Sends emails using" --> email
apiApp -- "Reads/writes account data" --> mainframe
flowchart TB
customer["Customer"]
seller["Seller"]
webApp["Web Application"]
mobileApp["Mobile App"]
apiGateway["API Gateway"]
productService["Product Service"]
orderService["Order Service"]
db["Database"]
queue["Message Queue"]
payment["Payment Gateway"]
shipping["Shipping Provider"]
email["E-mail System"]
customer -- "Visits" --> webApp
customer -- "Uses" --> mobileApp
seller -- "Manages listings via" --> webApp
webApp -- "Calls" --> apiGateway
mobileApp -- "Calls" --> apiGateway
apiGateway -- "Routes to" --> productService
apiGateway -- "Routes to" --> orderService
productService -- "Reads/writes" --> db
orderService -- "Reads/writes" --> db
orderService -- "Publishes events to" --> queue
queue -- "Triggers payment via" --> payment
queue -- "Triggers shipment via" --> shipping
queue -- "Sends notifications via" --> email
flowchart TB
rider["Rider"]
driver["Driver"]
riderApp["Rider App"]
driverApp["Driver App"]
apiServer["API Server"]
locationService["Location Service"]
db["Database"]
cache["Cache"]
maps["Maps & Routing API"]
payment["Payment Gateway"]
sms["SMS Provider"]
rider -- "Uses" --> riderApp
driver -- "Uses" --> driverApp
riderApp -- "Calls" --> apiServer
driverApp -- "Calls" --> apiServer
driverApp -- "Sends location updates to" --> locationService
apiServer -- "Reads/writes" --> db
apiServer -- "Reads/writes" --> cache
locationService -- "Updates driver positions in" --> cache
apiServer -- "Gets routes from" --> maps
apiServer -- "Processes fares via" --> payment
apiServer -- "Sends notifications via" --> sms
flowchart TB
developer["Developer / Architect"]
githubPages["GitHub Pages"]
webApp["Static Web App"]
c4Page["C4 Viewer"]
excalidrawPage["Excalidraw Viewer"]
apiPage["API Explorer"]
mermaidLib["Mermaid Library"]
excalidrawLib["Excalidraw Library"]
developer -- "Visits" --> webApp
githubPages -- "Hosts and serves" --> webApp
webApp -- "Routes /c4 to" --> c4Page
webApp -- "Routes /excalidraw to" --> excalidrawPage
webApp -- "Routes /api to" --> apiPage
c4Page -- "Renders diagrams with" --> mermaidLib
excalidrawPage -- "Renders diagrams with" --> excalidrawLib
flowchart TB
patient["Patient"]
doctor["Doctor"]
webapp["Web App"]
mobile["Mobile App"]
api["API Gateway"]
emr["EMR Service"]
appt["Appointment Service"]
billing["Billing Service"]
db["Database"]
queue["Message Queue"]
patient -- "HTTPS" --> webapp
doctor -- "HTTPS" --> mobile
webapp -- "JSON/HTTPS" --> api
mobile -- "JSON/HTTPS" --> api
api -- "JSON/HTTPS" --> emr
api -- "JSON/HTTPS" --> appt
api -- "JSON/HTTPS" --> billing
emr -- "SQL" --> db
appt -- "SQL" --> db
billing -- "AMQP" --> queue
Zooms in on a key container to show the components (services and controllers) inside it.
flowchart TB
clients["Client Applications"]
paymentsController["Payments Controller"]
accountsController["Accounts Controller"]
authController["Auth Controller"]
paymentsService["Payments Service"]
accountsService["Accounts Service"]
authService["Auth Service"]
emailService["E-mail Service"]
mainframe["Mainframe Banking System"]
db["Database"]
email["E-mail System"]
clients -- "Calls" --> paymentsController
clients -- "Calls" --> accountsController
clients -- "Calls" --> authController
paymentsController -- "Uses" --> paymentsService
accountsController -- "Uses" --> accountsService
authController -- "Uses" --> authService
paymentsService -- "Uses" --> emailService
paymentsService -- "Submits payments to" --> mainframe
accountsService -- "Reads account data from" --> mainframe
accountsService -- "Reads/writes" --> db
authService -- "Reads/writes" --> db
emailService -- "Sends e-mail using" --> email
flowchart TB
apiGateway["API Gateway"]
orderController["Order Controller"]
orderService["Order Service"]
paymentClient["Payment Client"]
shippingClient["Shipping Client"]
orderRepository["Order Repository"]
eventPublisher["Event Publisher"]
db["Database"]
queue["Message Queue"]
apiGateway -- "Calls" --> orderController
orderController -- "Uses" --> orderService
orderService -- "Uses" --> paymentClient
orderService -- "Uses" --> shippingClient
orderService -- "Uses" --> orderRepository
orderService -- "Uses" --> eventPublisher
orderRepository -- "Reads/writes" --> db
eventPublisher -- "Publishes to" --> queue
flowchart TB
riderApp["Rider App"]
driverApp["Driver App"]
tripController["Trip Controller"]
tripService["Trip Service"]
matchingService["Matching Service"]
paymentService["Payment Service"]
notificationService["Notification Service"]
tripRepository["Trip Repository"]
db["Database"]
cache["Cache"]
payment["Payment Gateway"]
sms["SMS Provider"]
riderApp -- "Calls" --> tripController
driverApp -- "Calls" --> tripController
tripController -- "Uses" --> tripService
tripService -- "Uses" --> matchingService
tripService -- "Uses" --> paymentService
tripService -- "Uses" --> notificationService
tripService -- "Uses" --> tripRepository
matchingService -- "Reads driver locations from" --> cache
tripRepository -- "Reads/writes" --> db
paymentService -- "Charges via" --> payment
notificationService -- "Sends via" --> sms
flowchart TB
developer["Developer / Architect"]
nodeDragController["Node Drag Controller"]
diagramData["Diagram Data"]
tabController["Tab Controller"]
exampleSwitcher["Example Switcher"]
viewToggle["View Toggle"]
mermaidRenderer["Mermaid Renderer"]
panZoomController["Pan/Zoom Controller"]
mermaidLib["Mermaid Library"]
developer -- "Clicks level tabs" --> tabController
developer -- "Selects example" --> exampleSwitcher
developer -- "Toggles view" --> viewToggle
developer -- "Pans and zooms diagram" --> panZoomController
developer -- "Drags nodes in Edit mode" --> nodeDragController
tabController -- "Triggers re-render on tab switch" --> mermaidRenderer
exampleSwitcher -- "Reads diagram source from" --> diagramData
exampleSwitcher -- "Triggers re-render on example switch" --> mermaidRenderer
viewToggle -- "Triggers re-render when switching to Diagram view" --> mermaidRenderer
mermaidRenderer -- "Delegates SVG rendering to" --> mermaidLib
nodeDragController -- "Coordinates transform with" --> panZoomController
flowchart TB
gateway["API Gateway"]
db["Database"]
ctrl["Record Controller"]
svc["Record Service"]
repo["Record Repository"]
auth["Auth Middleware"]
audit["Audit Logger"]
cache["Cache Manager"]
gateway -- "JSON/HTTPS" --> ctrl
ctrl -- "validates" --> auth
ctrl -- "uses" --> svc
svc -- "uses" --> repo
svc -- "logs" --> audit
repo -- "caches" --> cache
repo -- "SQL" --> db
Zooms in on a key component to show the classes and interfaces that implement it.
flowchart TB
ctrl["AccountsController"]
svc["AccountsService"]
repo["AccountsRepository"]
mf["MainframeClient"]
account["Account"]
tx["Transaction"]
ctrl -- "uses" --> svc
svc -- "uses" --> repo
svc -- "uses" --> mf
repo -- "returns" --> account
repo -- "returns" --> tx
mf -- "returns" --> account
flowchart TB
ctrl["OrderController"]
svc["OrderService"]
repo["OrderRepository"]
payment["PaymentClient"]
order["Order"]
item["OrderItem"]
ctrl -- "uses" --> svc
svc -- "uses" --> repo
svc -- "uses" --> payment
repo -- "returns" --> order
order -- "contains" --> item
flowchart TB
ctrl["TripController"]
svc["TripService"]
matching["MatchingService"]
repo["TripRepository"]
trip["Trip"]
location["Location"]
ctrl -- "uses" --> svc
svc -- "uses" --> matching
svc -- "uses" --> repo
repo -- "returns" --> trip
trip -- "uses" --> location
flowchart TB
entry["DiagramEntry"]
collection["DiagramCollection"]
logger["Logger"]
config["MermaidConfig"]
collection -- "contains" --> entry
logger -- "used alongside" --> config
flowchart TB
ctrl["RecordController"]
svc["RecordService"]
repo["RecordRepository"]
model["MedicalRecord"]
cache["CacheClient"]
ctrl -- "uses" --> svc
svc -- "uses" --> repo
svc -- "returns" --> model
repo -- "uses" --> cache
repo -- "returns" --> model