feat : diagram as code boundary and vault workflow

add generate_diagrams job to wiki workflow
changed styling accordingly

.github/workflows/wiki.yml

@@ -1,10 +1,14 @@
 # Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Deploy Wiki to Pages
 
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches:
+      - main
+    paths:
+      - 'wiki/**'
+
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -22,7 +26,32 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
+  generate_diagrams:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory:  "artifacts/diagrams/"   
+    steps:
+      - name: Checkout
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+
+      - name: setup python
+        uses: actions/setup-python@f677139bbe7f9c59b41e40162b753c062f5d49a3 #v5
+        with:
+            python-version: '3.10'
+            cache: 'pip'
+
+      - name: install diagram as code library
+        run: |
+          pip install -U pip
+          pip install diagrams
+
+      - name: generate diagrams
+        run: |
+          python vault.py
+          python boundary.py
+          mv *.png ${{github.workspace}}/artifacts/wiki/
+
   deploy-wiki:
     environment:
       name: github-pages

artifacts/diagrams/boundary.py

@@ -0,0 +1,55 @@
+from diagrams import Diagram, Cluster, Edge, Node
+from diagrams.onprem.compute import Server
+from diagrams.onprem.auth import Boundary
+from diagrams.onprem.security import Vault
+from diagrams.onprem.database import PostgreSQL
+from diagrams.oci.governance import Audit, Logging
+
+
+graph_attr = {
+    "fontname": "Roboto",
+    "fontsize": "24"
+    }
+
+with Diagram("Boundary server Workflow", show=False, direction="LR", graph_attr=graph_attr, filename="boundary"):
+    boundary_controller = Boundary("Boundary Controller")
+    boundary_worker = Boundary("Boundary Worker")
+    vault = Vault("Vault Transit Engine")
+
+    with Cluster("Listeners"):
+        api_listener = Server("API Listener")
+        cluster_listener = Server("Cluster Listener")
+        proxy_listener = Server("Proxy Listener")
+        Node(label="", width="2", height="0", style="invisible")
+
+
+    with Cluster("Audit Event Sinks"):
+        audit_file_sink = Audit("Controller")
+        auth_sink = Audit("Auth Observation")
+        session_sink = Audit("Session Authorization")
+        Node(label="", width="2", height="0", style="invisible")
+    stderr_sink = Logging("Stderr Sink")
+
+    with Cluster("KMS Keys"):
+        recovery_key = Boundary("recovery")
+        worker_auth = Boundary("worker-ath")
+        root_key = Boundary("root")
+
+    postgres= PostgreSQL("Postgresql")    
+
+    # Controller connections
+    boundary_controller >> Edge(label="TCP connection") >> cluster_listener
+    boundary_controller >> Edge(label="Audit File Events") >> auth_sink
+    boundary_controller >> Edge(label="All-events") >> stderr_sink
+
+    # Worker connections
+    boundary_worker >> Edge(label="Connected to Controller") >> boundary_controller
+
+    # KMS connections
+    worker_auth >> Edge() >> vault
+    recovery_key >> Edge() >> vault
+    root_key >> Edge() >> vault
+    root_key << Edge(attrs="penwidth: 2.0") << boundary_controller
+
+    # DB connections
+    postgres << Edge(label="DB Connection") << boundary_controller

artifacts/diagrams/vault.py

@@ -0,0 +1,32 @@
+from diagrams import Diagram, Cluster, Edge, Node
+from diagrams.onprem.security import Vault
+from diagrams.generic.storage import Storage
+from diagrams.onprem.client import Users
+
+with Diagram("\nVault Server Workflow",  show=False, direction="RL", graph_attr={"fontname" : "arial", "fontsize": "28" }, filename="vault"):
+    cluster_attr= {
+        "margin" : "20",
+        "fontsize": "16",
+        "fontname" : "arial"}
+
+    with Cluster("Vault Setup",  graph_attr=cluster_attr):
+        vault_listener = Vault("TCP Listener")
+        storage_raft = Storage("\nRaft Storage")
+        vault_ui = Vault("UI")
+
+    with Cluster("User Management", graph_attr=cluster_attr):
+        userpass_lockout = Users("\nUserpass Lockout")
+        users = Users("\nUsers")
+
+    # Vault connections
+    vault_listener - Edge(label="0.0.0.0:8200\nTLS Disabled") >> [storage_raft, vault_ui]
+    vault_listener >> Edge(label="Max Entry Size\n1MB") >> storage_raft
+
+    # User Management connections
+    users >> Edge(label="Lockout Threshold: 3\nLockout Duration: 10m") >> userpass_lockout
+
+    # External connections
+    api_addr = Vault("API Address\nhttp://localhost:8200")
+    cluster_addr = Vault("Cluster Address\nhttp://127.0.0.1:8201")
+
+    vault_listener >> Edge(label="API and Cluster Addresses") >> [api_addr, cluster_addr]

artifacts/wiki/index.html

@@ -87,30 +87,15 @@ <h2 id="about-hashicorp-vault-and-boundary" class="section-header">About Hashico
                 <h2 id="workflows" class="section-header">Workflows</h2>
                 <h3 id="vault" class="section-header">Vault</h3>
                 <p>Vault workflow involves setting up authentication methods, secret engines, and policies. The key
-                    components include:</p>
-                <ul>
-                    <li><span class="bold">Auth Methods</span>: How users and applications authenticate to Vault.</li>
-                    <li><span class="bold">Secret Engines</span>: Where secrets are stored, such as key-value pairs,
-                        database credentials, or
-                        encryption keys.</li>
-                    <li><span class="bold">Policies</span>: Rules that define what actions an authenticated user or
-                        service can perform within
-                        Vault.</li>
-                </ul>
-
+                    components of Vault server setup include:</p>
+                <img src="./vault.png" alt="vault diagram">
+
                 <h3 id="boundary" class="section-header">Boundary</h3>
-                <p>Boundary workflow involves managing sessions, targets, and credentials. The key components include:
+                <p>Boundary workflow involves managing sessions, targets, and credentials. The key
+                    components of Boundary server setup include:
                 </p>
-                <ul>
-                    <li><span class="bold">Sessions</span>: Establish secure, just-in-time access to resources.</li>
-                    <li><span class="bold">Targets</span>: The infrastructure resources that users need access to, such
-                        as servers or
-                        databases.
-                    </li>
-                    <li><span class="bold">Credential Stores</span>: Where dynamic or static credentials are retrieved
-                        for access to targets.
-                    </li>
-                </ul>
+                <img src="./boundary.png" alt="vault diagram">
+
             </div>
 
 

artifacts/wiki/style.css

@@ -204,6 +204,24 @@ a:hover {
     margin-bottom: var(--margin-small);
 }
 
+/* workflows */
+.workflows {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+}
+.workflows img {
+    width: 100%;
+    max-width: 700px;
+    height: auto;
+    margin-bottom: 20px;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    align-self: center;
+}