The Structurizr DSL (as mentioned on the ThoughtWorks Tech Radar - Techniques - Diagrams as code) allows you to create multiple diagrams based upon the C4 model, in multiple output formats, from a single DSL source file. Some features are unavailable on this demo page - we recommend using the Structurizr CLI or Structurizr Lite (both are free to use).
!docs, !adrs, !include, logo, icon are only available via the CLI
/* * This is a combined version of the following workspaces: * * - "Big Bank plc - System Landscape" (https://structurizr.com/share/28201/) * - "Big Bank plc - Internet Banking System" (https://structurizr.com/share/36141/) */ workspace "Big Bank plc" "This is an example workspace to illustrate the key features of Structurizr, via the DSL, based around a fictional online banking system." { model { customer = person "Personal Banking Customer" "A customer of the bank, with personal bank accounts." "Customer" enterprise "Big Bank plc" { supportStaff = person "Customer Service Staff" "Customer service staff within the bank." "Bank Staff" backoffice = person "Back Office Staff" "Administration and support staff within the bank." "Bank Staff" mainframe = softwaresystem "Mainframe Banking System" "Stores all of the core banking information about customers, accounts, transactions, etc." "Existing System" email = softwaresystem "E-mail System" "The internal Microsoft Exchange e-mail system." "Existing System" atm = softwaresystem "ATM" "Allows customers to withdraw cash." "Existing System" internetBankingSystem = softwaresystem "Internet Banking System" "Allows customers to view information about their bank accounts, and make payments." { singlePageApplication = container "Single-Page Application" "Provides all of the Internet banking functionality to customers via their web browser." "JavaScript and Angular" "Web Browser" mobileApp = container "Mobile App" "Provides a limited subset of the Internet banking functionality to customers via their mobile device." "Xamarin" "Mobile App" webApplication = container "Web Application" "Delivers the static content and the Internet banking single page application." "Java and Spring MVC" apiApplication = container "API Application" "Provides Internet banking functionality via a JSON/HTTPS API." "Java and Spring MVC" { signinController = component "Sign In Controller" "Allows users to sign in to the Internet Banking System." "Spring MVC Rest Controller" accountsSummaryController = component "Accounts Summary Controller" "Provides customers with a summary of their bank accounts." "Spring MVC Rest Controller" resetPasswordController = component "Reset Password Controller" "Allows users to reset their passwords with a single use URL." "Spring MVC Rest Controller" securityComponent = component "Security Component" "Provides functionality related to signing in, changing passwords, etc." "Spring Bean" mainframeBankingSystemFacade = component "Mainframe Banking System Facade" "A facade onto the mainframe banking system." "Spring Bean" emailComponent = component "E-mail Component" "Sends e-mails to users." "Spring Bean" } database = container "Database" "Stores user registration information, hashed authentication credentials, access logs, etc." "Oracle Database Schema" "Database" } } # relationships between people and software systems customer -> internetBankingSystem "Views account balances, and makes payments using" internetBankingSystem -> mainframe "Gets account information from, and makes payments using" internetBankingSystem -> email "Sends e-mail using" email -> customer "Sends e-mails to" customer -> supportStaff "Asks questions to" "Telephone" supportStaff -> mainframe "Uses" customer -> atm "Withdraws cash using" atm -> mainframe "Uses" backoffice -> mainframe "Uses" # relationships to/from containers customer -> webApplication "Visits bigbank.com/ib using" "HTTPS" customer -> singlePageApplication "Views account balances, and makes payments using" customer -> mobileApp "Views account balances, and makes payments using" webApplication -> singlePageApplication "Delivers to the customer's web browser" # relationships to/from components singlePageApplication -> signinController "Makes API calls to" "JSON/HTTPS" singlePageApplication -> accountsSummaryController "Makes API calls to" "JSON/HTTPS" singlePageApplication -> resetPasswordController "Makes API calls to" "JSON/HTTPS" mobileApp -> signinController "Makes API calls to" "JSON/HTTPS" mobileApp -> accountsSummaryController "Makes API calls to" "JSON/HTTPS" mobileApp -> resetPasswordController "Makes API calls to" "JSON/HTTPS" signinController -> securityComponent "Uses" accountsSummaryController -> mainframeBankingSystemFacade "Uses" resetPasswordController -> securityComponent "Uses" resetPasswordController -> emailComponent "Uses" securityComponent -> database "Reads from and writes to" "JDBC" mainframeBankingSystemFacade -> mainframe "Makes API calls to" "XML/HTTPS" emailComponent -> email "Sends e-mail using" deploymentEnvironment "Development" { deploymentNode "Developer Laptop" "" "Microsoft Windows 10 or Apple macOS" { deploymentNode "Web Browser" "" "Chrome, Firefox, Safari, or Edge" { developerSinglePageApplicationInstance = containerInstance singlePageApplication } deploymentNode "Docker Container - Web Server" "" "Docker" { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { developerWebApplicationInstance = containerInstance webApplication developerApiApplicationInstance = containerInstance apiApplication } } deploymentNode "Docker Container - Database Server" "" "Docker" { deploymentNode "Database Server" "" "Oracle 12c" { developerDatabaseInstance = containerInstance database } } } deploymentNode "Big Bank plc" "" "Big Bank plc data center" "" { deploymentNode "bigbank-dev001" "" "" "" { softwareSystemInstance mainframe } } } deploymentEnvironment "Live" { deploymentNode "Customer's mobile device" "" "Apple iOS or Android" { liveMobileAppInstance = containerInstance mobileApp } deploymentNode "Customer's computer" "" "Microsoft Windows or Apple macOS" { deploymentNode "Web Browser" "" "Chrome, Firefox, Safari, or Edge" { liveSinglePageApplicationInstance = containerInstance singlePageApplication } } deploymentNode "Big Bank plc" "" "Big Bank plc data center" { deploymentNode "bigbank-web***" "" "Ubuntu 16.04 LTS" "" 4 { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { liveWebApplicationInstance = containerInstance webApplication } } deploymentNode "bigbank-api***" "" "Ubuntu 16.04 LTS" "" 8 { deploymentNode "Apache Tomcat" "" "Apache Tomcat 8.x" { liveApiApplicationInstance = containerInstance apiApplication } } deploymentNode "bigbank-db01" "" "Ubuntu 16.04 LTS" { primaryDatabaseServer = deploymentNode "Oracle - Primary" "" "Oracle 12c" { livePrimaryDatabaseInstance = containerInstance database } } deploymentNode "bigbank-db02" "" "Ubuntu 16.04 LTS" "Failover" { secondaryDatabaseServer = deploymentNode "Oracle - Secondary" "" "Oracle 12c" "Failover" { liveSecondaryDatabaseInstance = containerInstance database "Failover" } } deploymentNode "bigbank-prod001" "" "" "" { softwareSystemInstance mainframe } } primaryDatabaseServer -> secondaryDatabaseServer "Replicates data to" } } views { systemlandscape "SystemLandscape" { include * autoLayout } systemcontext internetBankingSystem "SystemContext" { include * animation { internetBankingSystem customer mainframe email } autoLayout } container internetBankingSystem "Containers" { include * animation { customer mainframe email webApplication singlePageApplication mobileApp apiApplication database } autoLayout } component apiApplication "Components" { include * animation { singlePageApplication mobileApp database email mainframe signinController securityComponent accountsSummaryController mainframeBankingSystemFacade resetPasswordController emailComponent } autoLayout } dynamic apiApplication "SignIn" "Summarises how the sign in feature works in the single-page application." { singlePageApplication -> signinController "Submits credentials to" signinController -> securityComponent "Validates credentials using" securityComponent -> database "select * from users where username = ?" database -> securityComponent "Returns user data to" securityComponent -> signinController "Returns true if the hashed password matches" signinController -> singlePageApplication "Sends back an authentication token to" autoLayout } deployment internetBankingSystem "Development" "DevelopmentDeployment" { include * animation { developerSinglePageApplicationInstance developerWebApplicationInstance developerApiApplicationInstance developerDatabaseInstance } autoLayout } deployment internetBankingSystem "Live" "LiveDeployment" { include * animation { liveSinglePageApplicationInstance liveMobileAppInstance liveWebApplicationInstance liveApiApplicationInstance livePrimaryDatabaseInstance liveSecondaryDatabaseInstance } autoLayout } styles { element "Person" { color #ffffff fontSize 22 shape Person } element "Customer" { background #08427b } element "Bank Staff" { background #999999 } element "Software System" { background #1168bd color #ffffff } element "Existing System" { background #999999 color #ffffff } element "Container" { background #438dd5 color #ffffff } element "Web Browser" { shape WebBrowser } element "Mobile App" { shape MobileDeviceLandscape } element "Database" { shape Cylinder } element "Component" { background #85bbf0 color #000000 } element "Failover" { opacity 25 } } } }
Structurizr
Diagram
Structurizr
Graph
Export
PlantUML
Export
C4-PlantUML
Export
Mermaid
Export
DOT
Export
WebSequenceDiagrams
Export
Ilograph
Structurizr
JSON