AI Roadmap Generator

Der AI Roadmap Generator erzeugt vollständige HTML Roadmaps aus einer JSON Konfiguration. Die Ausgabe ist vollständig XWiki kompatibel und kann ohne Anpassungen in das XWiki HTML Makro eingefügt werden. Die Roadmap enthält Meilensteine, Workshops, Artefakte, Icons, Schatten und ein automatisch generiertes Aktualisierungsdatum.

Das Repository enthält kein Webfrontend und konzentriert sich bewusst auf eine einfache Handhabung durch zwei JSON Dateien und eine einzige Python Datei.

Funktionen

Das Tool bietet folgende Kernfunktionen:

• Erstellung einer vollständigen HTML Roadmap durch einen einzigen Befehl
• Inline CSS direkt im HTML Dokument für sofortige Integration in XWiki
• Automatisches Aktualisierungsdatum bei jeder Generierung
• SVG Icons für Workshops und Artefakte
• Responsives Grid Layout das sich automatisch an jede Bildschirmbreite anpasst
• Schatten für Meilenstein Karten zur besseren visuellen Struktur
• Keine externen Bibliotheken außer Jinja2

Struktur des Projekts

roadmap-generator/
│
├── generate.py                # Hauptskript zum Generieren des HTML
│
├── data/
│   ├── roadmap.json           # Inhalte der Roadmap
│   └── style.json             # Farben, Layout und Konfigurationswerte
│
└── templates/
    └── roadmap.html.j2        # Jinja2 Vorlage für die HTML Struktur

Voraussetzungen

Für den Generator wird Python benötigt. Empfohlen wird Python 3.10 oder neuer.

Abhängigkeiten installieren:

pip install jinja2

Es werden keine weiteren Libraries benötigt.

Roadmap generieren

Die HTML Datei wird über einen einzigen Befehl erzeugt:

python generate.py

Nach der Ausführung liegt die Datei ai-roadmap.html im Hauptverzeichnis.

Diese Datei kann direkt in ein XWiki HTML Makro eingefügt werden:

{{html}}
<der Inhalt von ai-roadmap.html>
{{/html}}

Vor und nach dem Makro sollte eine Leerzeile stehen damit XWiki es korrekt rendert.

Konfiguration

Inhalte anpassen

Alle Inhalte stehen in:

data/roadmap.json

Beispielstruktur:

{
  "title": "ghc AI Roadmap 2025–2026",
  "milestones": [
    {
      "title": "Q4 2025",
      "period": "Okt–Dez 2025",
      "subtitle": "Die Basis schaffen",
      "milestone": "https://...",
      "items": [
        {
          "type": "workshop",
          "title": "Kick-Off Meeting",
          "date": "11.11.2025",
          "description": "Beschreibung hier"
        }
      ]
    }
  ]
}

Design und Layout anpassen

Farben, Abstände und die maximale Spaltenanzahl stehen in:

data/style.json

Beispiel:

{
  "colors": {
    "primary": "#00BC6F",
    "text": "#373936"
  },
  "layout": {
    "borderRadius": 4,
    "padding": 24,
    "gap": 16
  }
}

Nach Anpassungen genügt ein erneutes Ausführen von:

python generate.py