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 definition
Section titled “Dynamic view definition”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% } }}
Parallel steps
Section titled “Parallel steps”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
Navigation
Section titled “Navigation”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 ' } }}
Example
Section titled “Example” Try it online Open this example in LikeC4 playground