Exemplo Big Bank

Esta é a versão em LikeC4 do exemplo Big Bank plc, de Simon Brown, baseado em um sistema fictício de internet banking.

O exemplo apresenta a sintaxe do LikeC4 e a compara com a DSL do Structurizr, destacando semelhanças e diferenças.

Panorama dos sistemas

A visão de panorama apresenta uma visão geral dos sistemas principais e de como eles se relacionam. O Structurizr utiliza systemlandscape para esse tipo de visão.

No LikeC4, não existem tipos especiais de visão.
Cada visão é definida por predicados que determinam o que incluir ou excluir, como include * no exemplo a seguir.

likec4

Criamos a visão index “of bigbank”, pois bigbank é o sistema de nível mais alto cujo panorama queremos visualizar.

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

Resultado:

structurizr

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

Renderizado com PlantUML:

Experimente on-line

O LikeC4 e o Structurizr oferecem ambientes interativos on-line:

Playground LikeC4Visualize e experimente este exemplo no playground do LikeC4

Playground StructurizrVisualize e experimente este exemplo no playground do Structurizr

Contexto do sistema

likec4

views {

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

    include
      bigbank,
      mainframe,
      internetBankingSystem,
      email,
      customer

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

}

Resultado:

structurizr

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
      }
  }

}

Renderizado com PlantUML:

Contêineres

likec4

views {

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

    include
      *,
      -> customer
  }

}

Resultado:

structurizr

views {

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

}

Renderizado com PlantUML:

Componentes

likec4

views {

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

    include *

    style * {
      color muted
    }

    style singlePageApplication, mobileApp {
      color secondary
    }

    style apiApplication, apiApplication.* {
      color primary
    }
  }

}

Resultado:

structurizr

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."
  }

}

Renderizado com PlantUML:

Mais exemplos

O LikeC4 não impõe tipos fixos de visão e, por isso, oferece flexibilidade para criar novas perspectivas.
Confira os exemplos a seguir.

Visão do cliente

Podemos visualizar como os clientes interagem com o sistema.

views {

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

    exclude webApplication

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

}

O Structurizr não possui uma visão específica de cliente.

Resultado:

Cliente: aplicativo móvel

Podemos visualizar as interações com o aplicativo móvel:

views {

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

    style * {
      color secondary
    }

    style apiApplication, internetBankingSystem {
      color muted
    }

    style mobileApp {
      color green
    }
  }

}

Resultado:

Cliente: aplicativo web

Podemos visualizar as interações com o aplicativo web:

views {

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

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

}

Resultado: