update example

.github/workflows/pages.yml

@@ -0,0 +1,59 @@
+# Sample workflow for building and deploying a website to GitHub Pages
+name: Deploy Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: Build
+        run: npx likec4 build -o ./dist --base "${{ steps.pages.outputs.base_path }}"
+      # GitHub Pages doesn't allow to configure routing for single page apps,
+      # So we copy index.html to 404.html to make it work
+      - name: Custom 404 page
+        run: cp ./dist/index.html ./dist/404.html
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist
+
+  # Deployment job
+  deploy-pages:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build-pages
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

README.md

@@ -2,9 +2,6 @@
 
 This is an example of an architecture, described with [LikeC4](https://likec4.dev).
 
-This [Github workflow](./.github/workflows/update-diagrams.yml) updates diagrams.
-
-
 ## About
 
 1. Open with [github.dev](https://github.dev/likec4/example-cloud-system/blob/main/model.c4) or [vscode.dev](https://vscode.dev/github/likec4/example-cloud-system/blob/main/model.c4)
@@ -14,13 +11,6 @@ This [Github workflow](./.github/workflows/update-diagrams.yml) updates diagrams
    ![SCR-20230513-nz0](https://github.com/likec4/example-cloud-system/assets/824903/744f6503-0ef2-498d-87ca-f232815a9882)
 4. Play!
 
-
-## Context
-
-
-
-![](images/index.png)
-
 ## Resources
 
 - [Documentation](https://likec4.dev/docs/)

cloud/legacy.c4

@@ -22,7 +22,7 @@ views {
     include
       *,
       cloud,
-      cloud.ui,
+      // cloud.ui,
       -> customer ->
 
     style cloud, customer, cloud.* {
@@ -37,29 +37,19 @@ views {
   view cloud_legacy_backend of cloud.legacy.backend {
     include
       *,
-      cloud.legacy
+      cloud
 
-    style cloud.* {
+    style cloud {
       color muted
     }
 
-    style cloud.legacy, cloud.legacy.* {
-      color primary
-    }    
-  }
-
-  view legacy_services of cloud.legacy.backend.services {
-    include
-      *,
-      cloud.legacy.backend
+    style * {
+      color secondary
+    }
 
-      style cloud.* {
-        color muted
-      }
-
-      style cloud.legacy, cloud.legacy.* {
-        color primary
-      }        
+    style cloud.legacy.* {
+      color green
+    }    
   }
 
 }

cloud/ui.c4

@@ -39,7 +39,7 @@ model {
 
   }
 
-  customer -> dashboard "opens in the browser"
+  customer -> dashboard "opens in the browser vit HTTPS"
   customer -> mobile "opens on a mobile device"
   cloud.supportUser -> supportPanel "accesses via browser with encrypted VPN connection"
 

externals.c4

@@ -58,19 +58,21 @@ model {
 views {
 
   view amazon of amazon {
-    title: "Overview Amazon"
+    title "Overview Amazon"
 
     include
       *,
       cloud,
-      cloud.legacy -> amazon.*,
-      cloud.next -> amazon.*
+      cloud.* -> amazon.*,
 
     style * {
-      color: muted
+      color secondary
     }
-    style amazon, amazon.* {
-      color: primary
+    style amazon, cloud {
+      color muted
+    }
+    style amazon.* {
+      color green
     }
   }
 
@@ -87,31 +89,38 @@ views {
 
     include
       *,
+      amazon,
       amazon.sqs,
-      amazon.sqs.*
+      -> amazon.sqs.*
+
+    style * {
+      color secondary
+    }
+    style amazon {
+      color muted
+    }
+    style lambdas, lambdas.* {
+      color green
+    }      
   }
 
   view amazon_rds of amazon.rds {
-    title: 'Overview Amazon RDS'
+    title 'Overview Amazon RDS'
 
     include
       *,
-      pg.*,
-      aurora.*,
-      cloud.next.* -> amazon.rds,
-      cloud.legacy.* -> amazon.rds,
       cloud,
-      cloud.next,
-      cloud.legacy
-
+      cloud.* -> amazon.rds.pg.*,
+      cloud.* -> amazon.rds.aurora.*,
+      
     style * {
-      color: muted
+      color muted
     }
     style cloud.* {
-      color: primary
+      color secondary
     }
     style amazon.rds.* {
-      color: secondary
+      color green
     }
   }  
 

model.c4

@@ -1,7 +1,9 @@
 model {
 
   customer = actor 'Cloud System Customer' {
-    description 'The regular customer of the system'
+    description '
+      The regular customer of the system
+    '
   }
 
   cloud = system 'Cloud System' {
@@ -20,6 +22,7 @@ model {
         The legacy version of our SaaS
         MVP as was presented to the first customers
       '
+      link ./.github/workflows/update-diagrams.yml#L19-L25
     }
 
     next = container 'Cloud Next' {      
@@ -28,7 +31,7 @@ model {
 
     supportUser = actor 'Support User' {
       description '
-        A user from the support team
+        A emploere from the support team
         Has limited access to the system
       '
 
@@ -45,11 +48,8 @@ views {
   view index {
     title "Landscape"
     include
-      *,
-      cloud.*
-    style amazon, customer {
-      color indigo
-    }
+      customer, // include first
+      *
   }
 
   view customer of customer {

views.c4

@@ -12,11 +12,11 @@ views {
       supportUser,
       ui.supportPanel,
       next -> legacy
-    include
-      cloud.* -> amazon.*,
-      amazon
-    exclude
-      amazon -> *
+    // include
+    //   cloud.* -> amazon.*,
+    //   amazon
+    // exclude
+    //   amazon -> *
 
     style amazon {
       color indigo