LikeC4

// You start with defining your terms and ...
specification {
  // ... "types" of your elements
  element actor {
    style {
      shape person // how to render
    }
  }
  element system
  element component
  // and "typed" relationships (if you need)
  relationship async
}
// Here goes your model, the single source of truth
model {
  customer = actor 'Customer' {
    description 'A user of our product with active subscription'
    -> ui 'opens in browser'
  }
  cloud = system 'Our SaaS' {
    backend = component 'Backend' {
      icon tech:graphql
      description 'Implements business logic and provides GraphQL API'
    }
    ui = component 'Frontend' {
      description 'NextJS application'
      style {
        icon tech:nextjs
        shape browser
      }
    }
    ui -[async]-> backend 'requests via HTTPS'
  }
}
// And finally, you define what to render
views {
  view index {
    title 'Landscape view'
    include *, cloud.*
    style cloud.* {
      color green
    }
  }
}