Like C4 shared collections library

Adds model inheritance via preprocessor for likec4.

Define shared model with @model name. Include it with @iclude name.

Naming supports dots, e.g. @model org.scope.name→@iclude org.scope.name.

1. Create shared model (shared.l4c.c4):

@model saas.app {
    component ui 'Frontend' {
          description 'Nextjs application, hosted on Vercel'
          style {
            icon tech:nextjs
            shape browser
          }
        }
        component backend 'Backend Services' {
          description '
            Implements business logic
            and exposes as REST API
          '
        }
}

2. Include it into normal C4 diagram (simple.l4t.c4):

specification {
  element actor
  element system
  element component
}

model {
  customer = actor 'Customer' {
    description 'The regular customer of the system'
    description 'Our dear customer'
  }

  saas = system 'Our SaaS' {
    @include saas.app

    // UI requests data from the Backend
    ui -> backend 'fetches via HTTPS'
  }

  // Customer uses the UI
  customer -> ui 'opens in browser'
  customer -> saas 'enjoys our product'
}

views {

  view index {
    title 'Landscape view'

    include *
  }

  view of saas {
    include *

    style customer {
      color muted
    }
  }

}

3. Generate full model with npx likec4-library -c **/*.l4c.c4 -t /**/*.l4t.c4 → simple.l4g.c4:

specification {
  element actor
  element system
  element component
}

model {
  customer = actor 'Customer' {
    description 'The regular customer of the system'
    description 'Our dear customer'
  }

  saas = system 'Our SaaS' {
    component ui 'Frontend' {
          description 'Nextjs application, hosted on Vercel'
          style {
            icon tech:nextjs
            shape browser
          }
        }
        component backend 'Backend Services' {
          description '
            Implements business logic
            and exposes as REST API
          '
        }

    // UI requests data from the Backend
    ui -> backend 'fetches via HTTPS'
  }

  // Customer uses the UI
  customer -> ui 'opens in browser'
  customer -> saas 'enjoys our product'
}

views {

  view index {
    title 'Landscape view'

    include *
  }

  view of saas {
    include *

    style customer {
      color muted
    }
  }

}

4. Optionally add -w option to watch changes (and regenerate) in real time.