Update public/index.html

public/index.html

@@ -295,33 +295,7 @@ body {
   border-color: #007bff; /* blaue Linie beim Hover */
 }
 
-  section#project-flow {
-      padding: 40px 20px;
-      background: white;
-      max-width: 1200px;
-      margin: 40px auto;
-      box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
-      border-radius: 8px;
-    }
-    section#project-flow h2 {
-      text-align: center;
-      margin-bottom: 12px;
-      color: #2a7a9a;
-    }
-    section#project-flow p {
-      text-align: center;
-      margin-bottom: 30px;
-      font-size: 1.1em;
-      color: #555;
-    }
-    #flowchart-container {
-      width: 100%;
-      height: 600px;
-      border: 1px solid #ddd;
-      border-radius: 6px;
-      background-color: #fff;
-    }
-
+  
 
 </style>
 
@@ -548,70 +522,26 @@ body {
    <!-- Neue section in Juni 2025 -->
 
         <!-- Neue Section für interaktive Arbeitspakete -->
-  <section id="project-flow">
-    <h2>Projektprozess & Arbeitspakete</h2>
-    <p>Visualisierung der intelligenten Prozessstruktur und KI-Integration im KNIGHT-Projekt.</p>
-    <div id="flowchart-container"></div>
-  </section>
-
-  <!-- GoJS Script laden -->
-  <script src="https://unpkg.com/gojs/release/go.js"></script>
-
-  <script>
-    const $ = go.GraphObject.make;
-
-    const myDiagram = $(go.Diagram, "flowchart-container", {
-      "undoManager.isEnabled": true,
-      layout: $(go.LayeredDigraphLayout, { direction: 0 }),
-      "toolManager.hoverDelay": 100,
-      "toolManager.tooltipDelay": 200,
-    });
-
-    // Node Template mit Tooltip
-    myDiagram.nodeTemplate =
-      $(go.Node, "Auto",
-        {
-          toolTip:
-            $(go.Adornment, "Auto",
-              $(go.Shape, { fill: "#ffffcc" }),
-              $(go.TextBlock, { margin: 6, maxSize: new go.Size(200, NaN), font: "12px Arial", wrap: go.TextBlock.WrapFit },
-                new go.Binding("text", "desc"))
-            )
-        },
-        $(go.Shape, "RoundedRectangle",
-          { fill: "#4caf50", strokeWidth: 0, stroke: null, cursor: "pointer" },
-          new go.Binding("fill", "color")
-        ),
-        $(go.TextBlock,
-          { margin: 8, stroke: "white", font: "bold 14px sans-serif", textAlign: "center" },
-          new go.Binding("text", "name"))
-      );
-
-    // Daten der Arbeitspakete mit Beschreibung und Farbe
-    const nodeDataArray = [
-      { key: 1, name: "AP1: Kompetenzmatrix für KI", desc: "Entwicklung einer interdisziplinären Kompetenzmatrix für KI-Kompetenzen in der Hochschulbildung. Validierung via Learning Analytics.", color: "#2196f3" },
-      { key: 2, name: "AP2: Ethische Leitlinien", desc: "Formulierung ethischer Leitlinien für KI-Nutzung in der Hochschulbildung, Leitung Prof. Popović.", color: "#f44336" },
-      { key: 3, name: "AP3: Learning Analytics Infrastruktur", desc: "Technische Infrastruktur für Learning Analytics und KI-Werkzeuge, inkl. Digital Educational Mirror.", color: "#ff9800" },
-      { key: 4, name: "AP4: Adaptive Tests", desc: "Entwicklung KI-gestützter adaptiver Tests zur automatischen Bewertung und Schwierigkeitsvorhersage.", color: "#00bcd4" },
-      { key: 5, name: "AP5: Fachspezifische Programmierung", desc: "Personalisierte Lernpfade zur Förderung von Programmierfähigkeiten mit KI-Unterstützung.", color: "#009688" },
-      { key: 6, name: "AP6: KI-Kompetenz stärken", desc: "Weiterbildungsangebote für Studierende und Lehrende zur Stärkung technischer und ethischer KI-Kompetenz.", color: "#673ab7" },
-      { key: 7, name: "AP7: Evaluation & Verankerung", desc: "Evaluation der Ansätze, Dissemination via Workshops und Integration in den Lehrplan.", color: "#e91e63" },
-      { key: 8, name: "AP8: Textgenerierende KI", desc: "Didaktisch reflektierter Einsatz von KI-Systemen wie ChatGPT in der Lehre zur Förderung kritischer Nutzung.", color: "#ffeb3b" }
-    ];
-
-    // Beziehungen (Pfeile) zwischen den Arbeitspaketen
-    const linkDataArray = [
-      { from: 1, to: 3 },
-      { from: 2, to: 6 },
-      { from: 3, to: 4 },
-      { from: 4, to: 5 },
-      { from: 5, to: 6 },
-      { from: 6, to: 7 },
-      { from: 8, to: 7 }
-    ];
-
-    myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  </script>
+    <h2>KNIGHT Projektprozess - Arbeitspakete</h2>
+  <div class="mermaid">
+    graph LR
+      AP1[AP1: Kompetenzmatrix für KI]
+      AP2[AP2: Ethische Leitlinien]
+      AP3[AP3: Learning Analytics Infrastruktur]
+      AP4[AP4: Adaptive Tests]
+      AP5[AP5: Fachspezifische Programmierung]
+      AP6[AP6: KI-Kompetenz stärken]
+      AP7[AP7: Evaluation & Verankerung]
+      AP8[AP8: Textgenerierende KI]
+
+      AP1 --> AP3
+      AP2 --> AP6
+      AP3 --> AP4
+      AP4 --> AP5
+      AP5 --> AP6
+      AP6 --> AP7
+      AP8 --> AP7
+  </div>
 
    <!-- ende neue section in Juni 2025-->
 
@@ -1385,6 +1315,8 @@ Implementations, and Perspectives
   <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.0/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>mermaid.initialize({ startOnLoad: true });</script>
 
 
   <!-- Main JS File -->