LikeC4 language preview

1. Specification and model

element kinds, nested components, and a relationship

horizon-dark

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests' async
  }
  customer -> ui 'opens in browser'
}

atom-one-dark

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests' async
  }
  customer -> ui 'opens in browser'
}

github-dark

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests' async
  }
  customer -> ui 'opens in browser'
}

dracula

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests' async
  }
  customer -> ui 'opens in browser'
}

nord

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests' async
  }
  customer -> ui 'opens in browser'
}

github

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests' async
  }
  customer -> ui 'opens in browser'
}

2. Extend a system

a second file adding nested elements to cloud

horizon-dark

// cloud/service.c4
model {
  extend cloud {
    service1 = service 'Billing'
    service1 -> api 'charges' #async
  }
}

atom-one-dark

// cloud/service.c4
model {
  extend cloud {
    service1 = service 'Billing'
    service1 -> api 'charges' #async
  }
}

github-dark

// cloud/service.c4
model {
  extend cloud {
    service1 = service 'Billing'
    service1 -> api 'charges' #async
  }
}

dracula

// cloud/service.c4
model {
  extend cloud {
    service1 = service 'Billing'
    service1 -> api 'charges' #async
  }
}

nord

// cloud/service.c4
model {
  extend cloud {
    service1 = service 'Billing'
    service1 -> api 'charges' #async
  }
}

github

// cloud/service.c4
model {
  extend cloud {
    service1 = service 'Billing'
    service1 -> api 'charges' #async
  }
}

3. Landscape view

include everything except one component

horizon-dark

views {
  view index {
    title 'Landscape'
    include *
    exclude cloud.api
  }

  view of cloud {
    include *
    style customer {
      color green
    }
  }
}

atom-one-dark

views {
  view index {
    title 'Landscape'
    include *
    exclude cloud.api
  }

  view of cloud {
    include *
    style customer {
      color green
    }
  }
}

github-dark

views {
  view index {
    title 'Landscape'
    include *
    exclude cloud.api
  }

  view of cloud {
    include *
    style customer {
      color green
    }
  }
}

dracula

views {
  view index {
    title 'Landscape'
    include *
    exclude cloud.api
  }

  view of cloud {
    include *
    style customer {
      color green
    }
  }
}

nord

views {
  view index {
    title 'Landscape'
    include *
    exclude cloud.api
  }

  view of cloud {
    include *
    style customer {
      color green
    }
  }
}

github

views {
  view index {
    title 'Landscape'
    include *
    exclude cloud.api
  }

  view of cloud {
    include *
    style customer {
      color green
    }
  }
}