example-customization/likec4/showcase.c4 at main · likec4/example-customization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
specification {
  element actor {
    style {
      shape person
    }
  }
  element softwareSystem
  element container
  element component
  element database {
    style {
      shape storage
    }
  }
  element external {
    style {
      color muted
    }
  }

  color yellow #f1c40f

}

model {
  // Top-level actors and systems
  customer = actor 'Customer' {
    description 'End user interacting with the product via web or mobile.'
    link https://example.com/customer-docs

    metadata {
      attr1 'value1'
      attr2 'value2'
    }
  }

  analyticsTeam = actor 'Analytics Team' {
    description 'Responsible for analytics and reporting.'
    metadata {
      attr1 'analytics team'
    }
  }

  saas = softwareSystem 'Demo System' {
    summary 'A demo system showing architecture modeling with LikeC4 DSL'


    // Containers inside the system
    web = container 'Frontend' {
      technology 'React + TypeScript'
      description 'Single Page App served from CDN'
      style {
        icon tech:react
        shape browser
      }
    }

    backend = container 'Backend Cluster' 'Kotlin services' {
      icon tech:kotlin
      description 'Set of microservices handling business logic'
    }
  }

  // External services
  stripe = external 'Stripe' {
    description 'Payments provider'
    link https://stripe.com
    metadata {
      _shape 'stripe'
    }
  }
  cloudflare = external 'Cloudflare CDN' {
    icon tech:cloudflare
    description 'Static assets'
    metadata {
      region 'US'
    }
  }
  analyticsDb = database 'Analytics DB' {
    technology 'Clickhouse'
    description 'Time-series analytics store'
    style {
      color yellow
      icon ./clickhouse.svg
    }
    metadata {
      region 'EU'
      sla '99.9%'
    }
  }

  customer -> web 'interacts with'
  web -> backend 'GraphQL requests'
  backend -> stripe 'charge card'

  analyticsTeam -> analyticsDb 'query / build reports'

  web -> cloudflare 'serve static bundle'
  backend -> analyticsDb 'write aggregated stats'

}

views {
  view index {
    include *, saas.*
  }

  view saas of saas {
    include *
  }
}