AI Roadmap Generator

Eine interaktive TypeScript-Anwendung zur Erstellung und Bearbeitung von Roadmaps. Die Roadmaps sind vollständig XWiki-kompatibel und können ohne Anpassungen in das XWiki HTML Makro eingefügt werden.

Funktionen

• Visueller Editor: Bearbeitung von Titel, Meilensteinen und Elementen über eine intuitive Benutzeroberfläche
• Echtzeit-Vorschau: Die Roadmap wird beim Bearbeiten live aktualisiert
• JSON-Editor: Direkte Bearbeitung der Roadmap-Daten im JSON-Format
• Style-Anpassung: Anpassung von Farben und Layout-Einstellungen
• Export: Download der generierten Roadmap als eigenständige HTML-Datei
• Beispieldaten: Laden von Beispiel-Roadmap-Daten zum schnellen Start
• SVG Icons: Icons für Workshops und Artefakte
• Responsives Grid-Layout: Automatische Anpassung an jede Bildschirmbreite
• Automatisches Aktualisierungsdatum: Wird bei jedem Export automatisch gesetzt

Voraussetzungen

• Node.js (v18 oder höher empfohlen)
• npm

Installation

Abhängigkeiten installieren:

npm install

App starten

Entwicklungsmodus

Starte den Development-Server mit Hot-Reload:

npm run dev

Die Anwendung öffnet sich im Browser unter http://localhost:5173

Production Build

Build für Production erstellen:

npm run build

Die gebauten Dateien liegen dann im dist/ Verzeichnis. Preview des Production Builds:

npm run preview

Verwendung

Editor Tab

1. Roadmap-Titel setzen: Titel im Textfeld eingeben
2. Meilensteine hinzufügen: "+ Add Milestone" klicken
3. Meilenstein-Details bearbeiten:
   • Titel (z.B. "Q1 2026")
   • Zeitraum (z.B. "Jan–Mär 2026")
   • Untertitel (z.B. "Governance und Grundlagen")
   • Meilenstein-Link (optionale URL zum Projekt-Meilenstein)
4. Items zu Meilensteinen hinzufügen: "+ Add Item" innerhalb eines Meilensteins klicken
5. Item-Details bearbeiten:
   • Typ: Workshop oder Artefakt
   • Titel
   • Datum
   • Bullet Points ([x] für erledigt, [ ] für ausstehend)

JSON Tab

Direkte Bearbeitung der Roadmap-Daten im JSON-Format. Mit "Apply JSON" wird die Vorschau aktualisiert.

Style Tab

Anpassung des Erscheinungsbilds:

• Farben: Primary, Text, Line, Background, Header
• Layout: Border Radius, Padding, Gap

Export

Mit "Export HTML" wird eine eigenständige HTML-Datei mit der Roadmap heruntergeladen, die direkt in XWiki verwendet werden kann:

{{html}}
<Inhalt der exportierten HTML-Datei>
{{/html}}

Beispieldaten laden

Mit "Load Sample" werden die Beispieldaten aus data/roadmap.json geladen. Diese Datei ist der Standard und enthält die default Roadmap-Konfiguration.

Projektstruktur

roadmap-generator/
│
├── index.html           # Haupt-HTML-Datei
├── src/
│   ├── main.ts         # Einstiegspunkt der Anwendung
│   ├── types.ts        # TypeScript Typdefinitionen
│   └── renderer.ts     # Roadmap-Rendering-Logik
│
├── data/
│   ├── roadmap.json    # Default Roadmap-Daten
│   └── style.json      # Default Style-Konfiguration
│
├── legacy/             # Alte Python-basierte Lösung
│   ├── generate.py
│   └── templates/
│
├── package.json
├── tsconfig.json
└── vite.config.ts

Datenformat

Die Roadmap folgt dieser Struktur:

interface RoadmapData {
  title: string;
  milestones: {
    title: string;
    period?: string;
    subtitle?: string;
    milestone?: string; // URL
    items: {
      type: 'workshop' | 'artefact';
      title: string;
      date?: string;
      items?: string[]; // Bullet points mit [x] oder [ ] Präfix
    }[];
  }[];
}

Standard-Roadmap

Die Datei data/roadmap.json ist die Standard-Roadmap-Konfiguration und wird beim Laden der App automatisch verwendet. Alle Änderungen sollten in dieser Datei gespeichert werden.

Konfiguration

Inhalte anpassen

Alle Inhalte stehen in:

data/roadmap.json

Diese Datei ist der Default und wird beim Start der App geladen.

Design und Layout anpassen

Farben, Abstände und Layout-Einstellungen stehen in:

data/style.json

Beispiel:

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

Technologien

• TypeScript: Typsicheres JavaScript
• Vite: Schnelles Build-Tool und Dev-Server
• Vanilla JavaScript: Keine Framework-Abhängigkeiten für minimale Bundle-Größe

Browser-Support

Moderne Browser mit ES2020-Support (Chrome, Firefox, Safari, Edge).

Legacy Python Generator

Die alte Python-basierte Lösung ist noch im legacy/ Ordner verfügbar. Sie kann mit folgendem Befehl verwendet werden:

python legacy/generate.py

Diese Methode wird nicht mehr aktiv weiterentwickelt. Für neue Projekte wird die TypeScript/Vite-basierte UI empfohlen.