From c95550f13f3e1606aa70f5d744abbef4583cf8b5 Mon Sep 17 00:00:00 2001
From: Jan Maack Kjerbye <50995332+janhalen@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:48:24 +0200
Subject: [PATCH 1/2] First simple diagram template - link style still needs
 work

---
 docs/architecture.md | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 docs/architecture.md

diff --git a/docs/architecture.md b/docs/architecture.md
new file mode 100644
index 0000000..e528700
--- /dev/null
+++ b/docs/architecture.md
@@ -0,0 +1,43 @@
+# Example Architecture diagram
+
+```mermaid
+flowchart LR
+ subgraph Frontend["Frontend"]
+        A("fa:fa-globe Browser")
+  end
+ subgraph Backend["Backend"]
+        B1("fa:fa-server API Gateway")
+        B2("fa:fa-cogs Microservice 1")
+        B3("fa:fa-cogs Microservice 2")
+  end
+ subgraph Storage["Storage"]
+        C[("fa:fa-database Database")]
+  end
+ subgraph AdditionalServices["Infrastructure Services"]
+        D1("fa:fa-users Authentication")
+        D2("fa:fa-bell Notification Service")
+        D3("fa:fa-search Logging Service")
+        D4("fa:fa-chart-line Monitoring")
+  end
+    A --> B1
+    B1 --> B2 & B3 & D1
+    B2 --> C & D2 & D4
+    B3 --> C & D3 & D4
+    D4 --> D2
+    style A color:#424242, stroke:#FF7043,fill:#FFF9C4
+    style B1 color:#333, stroke:#673AB7,fill:#E1BEE7
+    style B2 color:#333, stroke:#673AB7,fill:#E1BEE7
+    style B3 color:#333, stroke:#673AB7,fill:#E1BEE7
+    style C color:#333, stroke:#2196F3,fill:#FFF9C4
+    style D1 color:#333, stroke:#4CAF50,fill:#00C853
+    style D2 color:#333, stroke:#4CAF50,fill:#00C853
+    style D3 color:#333, stroke:#4CAF50,fill:#00C853
+    style D4 color:#333, stroke:#4CAF50,fill:#00C853
+    style Backend fill:#D1C4E9,stroke:#673AB7,stroke-width:1px,color:#424242
+    style AdditionalServices fill:#C8E6C9,stroke:#4CAF50,stroke-width:1px,color:#424242
+    style Frontend fill:#FFDDC1,stroke:#FF7043,stroke-width:1px,color:#424242
+    style Storage fill:#FFE0B2,color:#424242
+    linkStyle 1 stroke:#616161
+
+
+```
\ No newline at end of file

From ba08891f7a1287032edef3623e792024b82cc9e5 Mon Sep 17 00:00:00 2001
From: Jan Maack Kjerbye <50995332+janhalen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:58:34 +0100
Subject: [PATCH 2/2] Added more templating to the architecture diagram

---
 docs/architecture.md | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/docs/architecture.md b/docs/architecture.md
index e528700..71c1a6f 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,4 +1,13 @@
-# Example Architecture diagram
+# Project Architecture
+
+> Replace this with a brief introduction to the architecture documentation
+
+
+[Architecture Diagram](#architecture-diagram) | [Components](#components) | [Data Flow](#data-flow) 
+
+
+## Architecture Diagram
+> Provide a high level architecture diagram in the [Mermaid](https://mermaid.js.org/intro/getting-started.html) format
 
 ```mermaid
 flowchart LR
@@ -7,8 +16,8 @@ flowchart LR
   end
  subgraph Backend["Backend"]
         B1("fa:fa-server API Gateway")
-        B2("fa:fa-cogs Microservice 1")
-        B3("fa:fa-cogs Microservice 2")
+        B2("fa:fa-cogs Service 1")
+        B3("fa:fa-cogs Service 2")
   end
  subgraph Storage["Storage"]
         C[("fa:fa-database Database")]
@@ -38,6 +47,27 @@ flowchart LR
     style Frontend fill:#FFDDC1,stroke:#FF7043,stroke-width:1px,color:#424242
     style Storage fill:#FFE0B2,color:#424242
     linkStyle 1 stroke:#616161
+```
+
+## Components
+> Provide a brief explanation of the main components and their interactions as shown in the diagram <bove>
+
+### Frontend
+
+> Describe the frontend components and their roles in the system.
+
+### Backend
+
+> Detail the backend architecture including APIs and microservices.
+
+### Storage
+
+> Explain the storage solutions used and their configurations.
+
+### Infrastructure Services
+
+> List and describe additional services such as authentication and monitoring.
 
+## Data Flow
 
-```
\ No newline at end of file
+> Illustrate how data moves through the system from input to output.
\ No newline at end of file