initial diagram for codespaces

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
 	"features": {
 		"ghcr.io/devcontainers-contrib/features/mkdocs:2": {}
 	},
-	"postCreateCommand": "pip3 install mkdocs-material mkdocs-awesome-pages-plugin mkdocs-minify-plugin",
+	"postCreateCommand": "postCreateCommand.sh",
 	"customizations": {
 		"vscode": {
 			"extensions": [

.devcontainer/postCreateCommand.sh

@@ -0,0 +1,3 @@
+pip3 install mkdocs-material mkdocs-awesome-pages-plugin mkdocs-minify-plugin
+
+curl -fsSL https://d2lang.com/install.sh | sh -s --

.github/workflows/create-diagram-svgs.yml

@@ -0,0 +1,32 @@
+name: "Create diagram SVGs"
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - .github/workflows/create-diagram-svgs.yml
+      - src/diagrams/*.d2
+
+jobs:
+  create-diagram-svgs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install d2
+        run: curl -fsSL https://d2lang.com/install.sh | sh -s --
+
+      - name: Generate SVGs
+        run: |
+          find "$GITHUB_WORKSPACE/diagrams" -name "*.svg" -delete
+          for d2_file in $(find "$GITHUB_WORKSPACE/src/diagrams" -name "*.d2"); do
+            filename=$(basename -- "$d2_file")
+            output_file="$GITHUB_WORKSPACE/diagrams/${filename%.d2}.svg"
+            d2 --theme=3 -l elk "$d2_file" "$output_file"
+          done
+
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Create diagram SVGs

diagrams/readme.md

@@ -0,0 +1 @@
+Hier werden automatisch alle Diagramme aus der GitHub Action abgelegt.

readme.md

@@ -6,7 +6,15 @@ Die RZL Hilfe gebaut aus Markdown File mit Hilfe von [Material for MkDocs](https
 
 ## Contribute
 
-Eine live Preview kann lokal mit diesem Befehl gestartet werdern:
+Für das Anpassen und Erstellen der RZL Hilfe werden [GitHub Codespaces](https://github.com/features/codespaces) verwendet.
+Dadurch kann sichergestellt werden, dass alle Abhängigkeiten und Tools bereits installiert und richtig eingerichtet sind.
+
+Der Ablauf für das Starten eines Codespaces ist wie folgt:
+![GitHub Codespaces](diagrams/codespaces.svg)
+
+Ist der Codespace vollständig gestartet und im [Visual Studio Code](https://code.visualstudio.com/) geöffnet, kann mit dem drücken der `F5` Taste eine live Preview gestartet werden.
+
+Im Hintergrund führt `F5` diesen Befehl aus:
 ```
 mkdocs serve
 ```

src/diagrams/codespaces.d2

@@ -0,0 +1,40 @@
+direction: down
+
+GitHub : {
+    label: Starten aus GitHub
+    style: {
+        stroke: blue
+        stroke-dash: 3
+        fill: transparent
+    }
+
+    exists : {
+        label: "Existiert bereits ein Codespace?"
+        shape: image
+        icon: ./src/diagrams/img/does-codespace-exist.png
+    }
+
+    create : {
+        label: "Codespace erstellen"
+    }
+
+    exists -> create: "Nein"
+
+    open : {
+        label: "Codespace im VS Code öffnen"
+        shape: image
+        icon: ./src/diagrams/img/open-existing-codespace.png
+    }
+
+    exists -> open: "Ja"
+}
+
+VSCode : {
+    label: "Starten aus VS Code"
+    style: {
+        stroke: blue
+        stroke-dash: 3
+        fill: transparent
+    }
+    near: bottom-center
+}