So erstellen Sie ein Gantt-Diagramm online

Navigieren Sie zu gantttool.com/de/app in einem beliebigen modernen Browser. Die App lädt sofort — kein Konto, keine Installation, keine Wartezeit. Sie landen direkt im Editor mit einer einzigen leeren Aufgabe, die Sie ausfüllen können.

Ihre Arbeit wird kontinuierlich im LocalStorage Ihres Browsers automatisch gespeichert, sodass ein Aktualisieren der Seite oder das Schließen des Tabs Ihr Projekt nicht verliert. Die Daten bleiben in Ihrem Browser, bis Sie sie manuell löschen oder ein anderes Projekt importieren.

Klicken Sie auf die Schaltfläche "Demo laden" in der Symbolleiste. Mit einem Klick wird der Editor mit einem realistischen SaaS-Produktentwicklungsplan gefüllt, der Folgendes enthält:

• 2 Phasentrenner — "Vorbereitung" und "Implementierung"
• 15 reguläre Aufgaben — von der Anforderungsanalyse bis zur Produktionsbereitstellung
• 1 Meilenstein — "Kick-off-Meeting" am Ende der Vorbereitungsphase
• Verkettete Abhängigkeiten — Aufgaben sind über "Am Aufgabenende"-Beziehungen verknüpft und bilden einen realistischen kritischen Pfad
• Fortschrittsverfolgung — Vorbereitungsaufgaben sind zu 50–100 % abgeschlossen
• Projektstartdatum auf 20.08.2025 gesetzt, tägliche Skalierung, Wochenenden geschlossen

Die Demo ist der schnellste Weg, jede Funktion zu verstehen, bevor Sie Ihr eigenes Projekt bearbeiten. Sie können jede Aufgabe in der Demo frei ändern — oder klicken Sie auf "Zurücksetzen", um jederzeit zu einer leeren Tafel zurückzukehren.

Klicken Sie auf das "Einstellungen"-Akkordeon (das Zahnradsymbol-Panel oben in der Seitenleiste). Es hat zwei Registerkarten: Allgemein und Farben & Stil.

Registerkarte Allgemein

Feld	Was es bewirkt
Projektname	Der Titel, der oben im generierten Diagramm angezeigt wird.
Projektstart	Das Ankerdatum (JJJJ-MM-TT), ab dem alle "Projektstart"-Aufgaben berechnet werden.
Zeitskala	Täglich für kurze Sprints, Wöchentlich für mittlere Projekte, Monatlich für lange Roadmaps.
Zoomstufe	Ein Multiplikator (1–4), der jede Spalte verbreitert, nützlich wenn viele Aufgaben überlappen.
Wochenenden geschlossen	Markiert Samstage und Sonntage als arbeitsfreie Tage im Diagramm.
Weitere geschlossene Tage	Durch Kommas getrennte Daten oder Datumsbereiche (z. B. 2025-12-25, 2025-12-26 to 2025-12-31), die vom Zeitplan ausgeschlossen sind.
Heute-Markierung anzeigen	Zeichnet eine orangefarbene vertikale Linie am heutigen Datum, sodass Sie geplante vs. tatsächliche Fortschritte sofort vergleichen können.
Diagrammsprache	Ein zweistelliger Sprachcode (z. B. en, cs, de, fr), der Monats- und Tagesbezeichnungen im Diagramm lokalisiert.

Registerkarte Farben & Stil

Wechseln Sie zur Registerkarte Farben & Stil, um das visuelle Erscheinungsbild jedes Aufgabenbalkens und Meilenstein-Markers im Diagramm zu steuern:

• Aufgabenschriftart: Name (SansSerif, Monospaced, Arial usw.), Größe, Farbe und Stil (normal / fett / kursiv)
• Aufgabenbalken-Farbe: die Standard-Hintergrundfüllung für alle Aufgabenbalken (einzelne Aufgaben können dies überschreiben)
• Aufgabenbalken-Linienfarbe: die Randfarbe der Aufgabenbalken
• Meilensteinschriftart: unabhängige Schriftgröße, Farbe und Stil für Meilensteinbeschriftungen
• Meilensteinfarbe: Füll- und Randfarbe des rautenförmigen Meilenstein-Markers

Eine Schaltfläche Auf Standard zurücksetzen stellt das ursprüngliche Farbschema wieder her, ohne Ihre Aufgaben zu berühren.

Die Aufgabenliste ist das Herzstück des Editors. Jede Zeile repräsentiert ein Element im Gantt-Diagramm. Drei Möglichkeiten, eine neue Zeile hinzuzufügen:

• Klicken Sie auf die Schaltfläche "Aufgabe hinzufügen" unterhalb der Aufgabenliste, um am Ende anzuhängen.
• Drücken Sie Strg+Enter an beliebiger Stelle in der App für dasselbe Ergebnis.
• Fahren Sie mit der Maus zwischen zwei bestehende Aufgaben und klicken Sie auf die Einfügezone (eine dünne blaue Linie mit einem "+"-Symbol), um an einer bestimmten Position einzufügen.

Jede Aufgabe öffnet sich in einem Akkordeon-Panel. Ziehen Sie den Griff am linken Rand, um Aufgaben neu anzuordnen, oder verwenden Sie die Auf-/Ab-Pfeilschaltflächen im Panel.

Aufgabentyp

Typ	Darstellung im Diagramm	Wann verwenden
Aufgabe	Horizontaler Balken mit Dauer	Jedes Arbeitselement mit Anfang und Ende
Meilenstein	Rautenförmiger Marker (Dauer null)	Wichtige Kontrollpunkte, Genehmigungen, Releases
Trenner	Vollbreites Phasenbanner	Phasenüberschriften (z. B. "Design", "Entwicklung")

Starttyp — wann beginnt dieses Element?

Jede Aufgabe hat einen Starttyp-Selector, der bestimmt, wie ihre Position auf der Zeitachse berechnet wird:

Starttyp	Bedeutung
Projektstart	Die Aufgabe beginnt am globalen Projektstartdatum, das in den Einstellungen festgelegt wurde.
Absolutes Datum	Ein bestimmtes Kalenderdatum (JJJJ-MM-TT), das Sie manuell eingeben, unabhängig von anderen Aufgaben.
Nach Aufgabenende	Beginnt nach Abschluss der ausgewählten Aufgabe(n), mit einem optionalen Versatz in Tagen (positiv = Lücke, negativ = Überlappung).
Vor Aufgabenstart	Beginnt eine bestimmte Anzahl von Tagen, bevor eine andere Aufgabe beginnt.
Zum Aufgabenstart	Beginnt genau dann, wenn die ausgewählte Aufgabe startet (parallele Aufgaben).
Zum Aufgabenende	Beginnt genau dann, wenn die ausgewählte Aufgabe endet (klassische Ende-zu-Start-Abhängigkeit ohne Verzögerung).

Dauer und Enddatum

Standardmäßig verwendet eine Aufgabe die Dauer (Anzahl der Tage oder Wochen). Schalten Sie "Enddatum verwenden" um, um die Aufgabe stattdessen an ein bestimmtes Enddatum zu binden — nützlich, wenn eine Frist durch eine externe Verpflichtung festgelegt ist.

Zusätzliche Aufgabenfelder

• Farbe — Eine aufgabenspezifische Farbüberschreibung (Hex oder benannte Farbe), die die globale Aufgabenbalkenfarbe aus den Einstellungen ersetzt.
• Fortschritt (%) — Ein Schieberegler von 0–100. Der gefüllte Teil des Balkens zeigt den Fortschritt; kombinieren Sie ihn mit der Heute-Markierung, um Verzögerungen auf einen Blick zu erkennen.
• Ressourcen — Durch Kommas getrennte Namen, optional mit prozentualer Zuweisung: Alice, Bob:50%. Die Beschriftungen erscheinen auf dem Aufgabenbalken.
• Link — Eine URL, die den Aufgabenbalken im endgültigen SVG anklickbar macht (z. B. ein Jira-Ticket oder ein Spezifikationsdokument).
• Notiz — Freitext-Anmerkung, die als PlantUML-Notiz unter dem Aufgabenbalken im Diagramm dargestellt wird.

Wenn Ihre Aufgaben bereit sind, klicken Sie auf "Gantt-Diagramm generieren". GanttTool führt automatisch die folgenden Schritte aus:

• Validiert, dass jede Aufgabe einen nicht-leeren Namen hat.
• Überprüft den Abhängigkeitsgraphen auf Zyklen mittels Tiefensuche.
• Kompiliert einen PlantUML-@startgantt-Codeblock aus Ihren Einstellungen und Aufgaben.
• Sendet den Code an die Kroki-Rendering-API (/api/kroki) und ruft ein SVG-Bild in Vektorqualität ab.

Das SVG-Diagramm erscheint innerhalb weniger Sekunden im Vorschaubereich. Während der Darstellung wird ein drehender Ladebalken angezeigt; etwaige Syntaxfehler oder Dienstverfügbarkeitsmeldungen werden deutlich mit einer Fehlerbeschreibung angezeigt.

PlantUML-Quellcode anzeigen

Klicken Sie auf "PlantUML-Code anzeigen", um ein Panel mit der rohen PlantUML-Syntax einzublenden, die an den Renderer gesendet wurde. Dies ist nützlich zum Debuggen oder zum Erlernen der zugrunde liegenden Sprache — siehe unseren speziellen Leitfaden PlantUML-Gantt-Diagrammformat für einen tiefen Einblick in die Syntax.

Sobald das Diagramm generiert ist, erscheint die Export-Symbolleiste unterhalb der Vorschau. Sie haben vier Optionen:

Schaltfläche	Was sie erzeugt
SVG herunterladen	Speichert das Diagramm als skalierbare Vektordatei — ideal zum Einbetten in Präsentationen, Dokumente oder Websites in jeder Auflösung.
PNG herunterladen	Konvertiert das SVG in ein hochauflösendes Rasterbild (2-fache Pixeldichte) und lädt es als .png-Datei herunter.
Bild kopieren	Konvertiert das SVG in PNG und kopiert es direkt in die Zwischenablage — bereit zum Einfügen in Slack, E-Mail, Notion oder jedes andere Tool.
JSON exportieren	Lädt das gesamte Projekt (Einstellungen + alle Aufgaben) als .json-Datei herunter, die später über die Schaltfläche JSON importieren wieder importiert werden kann.

Zusätzlich zum manuellen Export wird Ihr Projekt kontinuierlich automatisch im LocalStorage des Browsers unter dem Schlüssel gantt_diagram_data gespeichert. Wenn Sie die App das nächste Mal im selben Browser öffnen, wird Ihr letztes Projekt automatisch geladen. Verwenden Sie den JSON-Export für langfristige Sicherungen oder um das Projekt mit Teammitgliedern zu teilen.