Skip to content

Dynamic views

Dynamic view describes a particular use-case or scenario, with specific elements and interactions, defined only in the view (without polluting the model).

dynamic-view.c4
53 collapsed lines
specification {
element actor {
style {
shape person
}
}
element system
element component
}
model {
customer = actor 'Customer' {
description 'Customer of Cloud System'
}
cloud = system 'Cloud System' {
backend = component 'Backend' {
description 'Backend services and API'
auth = component 'Authentication'
api = component 'Backend API' {
description 'RESTful API'
}
api -> auth 'validates bearer token'
}
ui = component 'Frontend' {
description '
All the frontend applications
of Cloud System
'
style {
shape browser
}
web = component 'Customer Dashboard' {
description 'React Application'
style {
shape browser
}
}
web -> auth
web -> api 'requests'
}
}
customer -> web 'opens in browser'
}
views {
dynamic view example {
title 'Dynamic View Example'
customer -> web 'opens in browser'
web -> auth 'updates bearer token if needed'
web -> api 'POST request'
api -> auth // title is derived from the model
api -> api 'process request' // allow self-call
// reverse direction, as a response to line 59
web <- api 'returns JSON'
// Include elements, that are not participating
include cloud, ui, backend
style cloud {
color muted
opacity 0%
}
}
}
dynamic view parallelexample {
title 'Dynamic View Parallel Example'
ui -> api
parallel {
api -> cache
api -> db
}
// or
par {
api -> cache
api -> db
}
}

Nested parallel blocks are not possible - see this discussion

Control the flow of the walk-through:

dynamic view level1 {
title 'Highlevel'
ui -> api {
navigateTo moreDetails
}
}
dynamic view moreDetails {
title 'Some details'
}

notes is for additional comments during walk-through:

dynamic view stepnotes {
title 'Dynamic View Parallel Example'
ui -> api {
notes '
🏛️ - Requests data using predefined GraphQL queries
🤖 - Queries regression on CI
'
}
parallel {
api -> cache {
notes '
Requests temporary session-scoped data
'
}
api -> db {
notes '
Queries persistent data
'
}
}
}