Big Bank Example

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.

likec4
structurizr

We create index view “of bigbank”, as this is the top-level system which landscape we want to visualize.

views {
  view index of bigbank {
    title "Big Bank - Landscape"
    include *
  }
}

Result:

views {
  systemlandscape "SystemLandscape" {
    include *
    autoLayout
  }
}

Rendered with PlantUML:

views {

  view context of bigbank {
    title "Internet Banking System - SystemContext"

    include
      bigbank,
      mainframe,
      internetBankingSystem,
      email,
      customer

    style * {
      color secondary
    }
    style bigbank, internetBankingSystem {
      color primary
    }
  }

}

Result:

views {

  systemcontext internetBankingSystem "SystemContext" {
      include *
      animation {
        internetBankingSystem
        customer
        mainframe
        email
      }
      autoLayout
      description "The system context diagram for the Internet Banking System."
      properties {
        structurizr.groups false
      }
  }

}

Rendered with PlantUML:

Containers

likec4
structurizr

views {

  view ibsContainers of internetBankingSystem {
    title "Internet Banking System - Containers"

    include
      *,
      -> customer
  }

}

Result:

views {

  container internetBankingSystem "Containers" {
    include *
    animation {
      customer mainframe email
      webApplication
      singlePageApplication
      mobileApp
      apiApplication
      database
    }
    autoLayout
    description "The container diagram for the Internet Banking System."
  }

}

Rendered with PlantUML:

Components

likec4
structurizr

views {

  view apiApp of internetBankingSystem.apiApplication {
    title "API Application - Components"

    include *

    style * {
      color muted
    }

    style singlePageApplication, mobileApp {
      color secondary
    }

    style apiApplication, apiApplication.* {
      color primary
    }
  }

}

Result:

views {

  component apiApplication "Components" {
    include *
    animation {
      singlePageApplication mobileApp database email mainframe
      signinController securityComponent
      accountsSummaryController mainframeBankingSystemFacade
      resetPasswordController emailComponent
    }
    autoLayout
    description "The component diagram for the API Application."
  }

}

Rendered with PlantUML:

We may visualize how customers interact with the system.

views {

  view customer of customer {
    include
      *,
      customer -> internetBankingSystem.*,
      customer -> bigbank.*

    exclude webApplication

    style bigbank {
      color muted
    }
    style customer {
      color green
    }
  }

}

Structurizr does not have customer view.

Result:

We may visualize interactions with the mobile application:

views {

  view mobileApp of mobileApp {
    include
      *,
      internetBankingSystem,
      internetBankingSystem.apiApplication,
      mobileApp -> internetBankingSystem.apiApplication.*

    style * {
      color secondary
    }

    style apiApplication, internetBankingSystem {
      color muted
    }

    style mobileApp {
      color green
    }
  }

}

Result:

We may visualize interactions with the web application:

views {

  view spa of singlePageApplication {
    include
      *,
      apiApplication,
      internetBankingSystem,
      -> singlePageApplication ->

    style * {
      color secondary
    }
    style internetBankingSystem {
      color muted
    }
    style singlePageApplication {
      color green
    }
  }

}

Result: