This is LikeC4 version of the Big Bank plc example by Simon Brown, based around a fictional online banking system.
It gives an overview of the LikeC4 syntax and how it compares to Structurizr DSL, what is similar and what is different.
System Landscape
The landscape view is a high-level overview of the system, showing the major systems and how they relate to each other.
Structurizr uses the systemlandscape
for this view.
There are no special view types in LikeC4.
Each view is defined by the predicates what to include/exclude, like include *
below.
We create index
view “of bigbank” , as this is the top-level system which landscape we want to visualize.
title "Big Bank - Landscape"
Result:
systemlandscape "SystemLandscape" {
Rendered with PlantUML:
System Context
view context of bigbank {
title "Internet Banking System - SystemContext"
style bigbank , internetBankingSystem {
Result:
systemcontext internetBankingSystem "SystemContext" {
description "The system context diagram for the Internet Banking System."
Rendered with PlantUML:
Containers
view ibsContainers of internetBankingSystem {
title "Internet Banking System - Containers"
Result:
container internetBankingSystem "Containers" {
description "The container diagram for the Internet Banking System."
Rendered with PlantUML:
Components
view apiApp of internetBankingSystem.apiApplication {
title "API Application - Components"
style singlePageApplication , mobileApp {
style apiApplication , apiApplication.* {
Result:
component apiApplication "Components" {
singlePageApplication mobileApp database email mainframe
signinController securityComponent
accountsSummaryController mainframeBankingSystemFacade
resetPasswordController emailComponent
description "The component diagram for the API Application."
Rendered with PlantUML:
We may visualize how customers interact with the system.
view customer of customer {
customer -> internetBankingSystem.* ,
Structurizr does not have customer view.
Result:
We may visualize interactions with the mobile application:
view mobileApp of mobileApp {
internetBankingSystem . apiApplication ,
mobileApp -> internetBankingSystem.apiApplication.*
style apiApplication , internetBankingSystem {
Result:
We may visualize interactions with the web application:
view spa of singlePageApplication {
-> singlePageApplication ->
style internetBankingSystem {
style singlePageApplication {
Result: