same as npm create likec4

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "likec4 serve",
     "dev": "likec4 serve",
-    "build": "likec4 build"
+    "build": "likec4 build",
+    "export:png": "likec4 export png -o ./png"
   },
   "dependencies": {
     "likec4": "latest"

src/_spec.c4

@@ -6,18 +6,14 @@ specification {
     }
   }
 
-  element softwareSystem
-  element container
+  element system
   element component
   element service
-  element app
-
-  element externalSystem {
+  element webapp {
     style {
-      color gray
+      shape browser
     }
   }
-
   element mobile {
     style {
       shape mobile
@@ -28,17 +24,9 @@ specification {
       shape storage
     }
   }
-  element stream {
+  element db_table {
     style {
-      shape queue
-    }
-  }
-  element queue {
-    style {
-      shape queue
+      shape storage
     }
   }
-
-  tag team-a
-  tag team-b
 }

src/cloud/backend.c4

@@ -1,82 +1,79 @@
 model {
 
+  extend provider {
+    pg = database 'PostgreSQL' {
+      description 'Database for storing relational data'
+      style {
+        icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
+      }
+
+      tbl_customers = db_table '[ customers ]' {
+        technology 'private schema'
+      }
+
+      tbl_sessions = db_table '[ sessions ]' {
+        technology 'private schema'
+        description '
+          Active sessions
+        '
+      }
+      tbl_sessions -> tbl_customers 'belongs to'
+    }
+  }
+
   extend cloud.backend {
 
-    graphql = app 'GraphQL' {
-      description '
-        The GraphQL API
-        of the cloud system
-      '
-    }
+    graphql = service 'GraphQL API' {
+      description 'The GraphQL API of the cloud system'
 
-    cms = app 'CMS' {
-      description 'The CMS of the cloud system'
+      -> provider.pg.tbl_sessions 'reads/writes'
+      -> provider.pg.tbl_customers 'reads/writes'
     }
 
-    graphql -> cms 'read and write'
-    graphql -> amazon.cognito 'authenticate'
-    graphql -> amazon.rds.pg 'read and write'
-    graphql -> cloud.billing.subscriptions 'verify access'
-
-    cms -> amazon.rds.mysql 'store media'
   }
 
 }
 
 views {
 
-  view cloud_graphql of graphql {
-    title "[context] Backend GraphQL"
+  view cloud_backend of cloud.backend {
 
     include
       *,
       cloud,
-      cloud.backend
-
-    exclude
-      -> amazon.*
-
-    include
-      graphql -> amazon.*
+      provider,
+      provider.pg,
+      cloud.backend.* -> provider.pg.*
 
     style * {
       color secondary
     }
 
-    style cloud, amazon, cloud.backend {
+    style cloud, provider, provider.pg  {
       color muted
     }
 
-    style graphql {
+    style cloud.backend, cloud.backend.* {
       color green
     }
   }
 
-  view cloud_cms of cms {
-    title "[context] Backend CMS"
-
+  view provider_pg  of provider.pg {
+    title 'Databases'
     include
       *,
-      cloud,
-      cloud.backend      
-
-    exclude
-      -> amazon.*
-
-    include
-      cms -> amazon.*
+      cloud.* -> provider.pg.*
 
     style * {
       color secondary
     }
 
-    style cloud, amazon, cloud.backend {
+    style cloud, provider, provider.pg  {
       color muted
     }
 
-    style cms {
+    style provider.pg.* {
       color green
     }
   }
-
 }