Hoe maak je een Gantt Chart Online

Navigeer naar gantttool.com/nl/app in elke moderne browser. De app laadt direct — geen account, geen installatie, geen wachttijd. Je komt meteen in de editor met een enkele lege taak die klaar is om in te vullen.

Je werk wordt continu automatisch opgeslagen in de LocalStorage van je browser, dus het vernieuwen van de pagina of het sluiten van de tab zal je project niet verliezen. De gegevens blijven in je browser totdat je ze handmatig wist of een ander project importeert.

Klik op de knop "Load Demo" in de werkbalk. Met één klik wordt de editor gevuld met een realistisch SaaS Productontwikkelingsplan dat het volgende bevat:

• 2 fasescheiders — "Voorbereiding" en "Implementatie"
• 15 gewone taken — van Requirementsanalyse tot en met Productie-implementatie
• 1 mijlpaal — "Kick-off meeting" geplaatst aan het einde van de voorbereidingsfase
• Gekoppelde afhankelijkheden — taken verbinden via "at task end"-relaties die een realistisch kritiek pad vormen
• Voortgangsregistratie — voorbereidingstaken zijn gemarkeerd als 50–100% voltooid
• Projectstartdatum ingesteld op 20-08-2025, dagelijkse schaal, weekenden gesloten

De demo is de snelste manier om elke functie te begrijpen voordat je je eigen project bewerkt. Je kunt elke taak in de demo vrij aanpassen — of klik op "Reset" om op elk moment terug te keren naar een schone lei.

Klik op het "Settings" accordeonpaneel (het tandwielpictogram bovenaan de zijbalk). Het heeft twee tabbladen: Basic en Colors & Style.

Tabblad Basic

Veld	Wat het doet
Projectnaam	De titel die bovenaan het gegenereerde diagram wordt afgedrukt.
Project Start	De ankerdatum (JJJJ-MM-DD) van waaruit alle "Project Start"-taken worden berekend.
Tijdschaal	Daily voor korte sprints, Weekly voor middelgrote projecten, Monthly voor lange roadmaps.
Zoomniveau	Een vermenigvuldiger (1–4) die elke kolom verbreedt, handig wanneer veel taken overlappen.
Weekenden Gesloten	Markeert zaterdag en zondag als niet-werkdagen op de chart.
Andere Vrije Dagen	Door komma's gescheiden datums of datumbereiken (bijv. 2025-12-25, 2025-12-26 to 2025-12-31) die worden uitgesloten van de planning.
Toon Vandaag-markering	Tekent een oranje verticale lijn op de datum van vandaag, zodat je geplande versus daadwerkelijke voortgang direct kunt vergelijken.
Diagramtaal	Een tweeletterige taalsleutel (bijv. en, cs, de, fr) die de maand- en daglabels in het diagram vertaalt.

Tabblad Colors & Style

Schakel naar het tabblad Colors & Style om het uiterlijk van elke taakbalk en mijlpaalmarkering in het diagram te bepalen:

• Taaklettertype: naam (SansSerif, Monospaced, Arial, etc.), grootte, kleur en stijl (plain / bold / italic)
• Taakbalkkleur: de standaard achtergrondvulling voor alle taakbalken (individuele taken kunnen dit overschrijven)
• Taaklijnkleur: de randkleur van taakbalken
• Mijlpaallettertype: onafhankelijke lettergrootte, kleur en stijl voor mijlpaallabels
• Mijlpaalkleur: vul- en randkleur van de mijlpaal-diamantmarkering

Een knop Reset to defaults herstelt het originele kleurenschema zonder je taken te beïnvloeden.

De takenlijst is het hart van de editor. Elke rij vertegenwoordigt één item op de Gantt chart. Drie manieren om een nieuwe rij toe te voegen:

• Klik op de knop "Add Task" onder de takenlijst om toe te voegen aan het einde.
• Druk op Ctrl+Enter ergens in de app voor hetzelfde resultaat.
• Beweeg tussen twee bestaande taken en klik op de invoegzone (een dunne blauwe lijn met een "+"-pictogram) om op een specifieke positie in te voegen.

Elke taak opent in een accordeon paneel. Sleep de hendel aan de linkerrand om taken te herordenen, of gebruik de pijlknoppen omhoog/omlaag in het paneel.

Taaktype

Type	Weergave in diagram	Wanneer te gebruiken
Task	Horizontale balk met duur	Elk werkitem met een begin en einde
Milestone	Diamantmarkering (nul duur)	Belangrijke checkpoints, goedkeuringen, releases
Separator	Volledig brede sectiebanner	Fasekoppen (bijv. "Ontwerp", "Ontwikkeling")

Starttype — wanneer begint dit item?

Elke taak heeft een Start Type selector die bepaalt hoe de positie op de tijdlijn wordt berekend:

Starttype	Betekenis
Project Start	De taak begint op de globale projectstartdatum ingesteld in Instellingen.
Absolute Date	Een specifieke kalenderdatum (JJJJ-MM-DD) die je handmatig invoert, onafhankelijk van andere taken.
After Task End	Begint nadat de geselecteerde taak/taken eindigen, met een optionele offset in dagen (positief = tussenruimte, negatief = overlap).
Before Task Start	Begint een opgegeven aantal dagen voordat een andere taak begint.
At Task Start	Begint precies wanneer de geselecteerde taak start (parallelle taken).
At Task End	Begint precies wanneer de geselecteerde taak eindigt (klassieke finish-to-start afhankelijkheid zonder vertraging).

Duur en einddatum

Standaard gebruikt een taak Duration (aantal dagen of weken). Schakel "Use end date" in om de taak in plaats daarvan aan een specifieke einddatum te koppelen — handig wanneer een deadline vaststaat door een externe verplichting.

Aanvullende taakvelden

• Color — Een kleur per taak (hex of benoemde kleur) die de globale taakbalkkleur uit Instellingen overschrijft.
• Completion (%) — Een schuifregelaar van 0–100. Het gevulde deel van de balk toont de voortgang; combineer met de Vandaag-markering om vertragingen in één oogopslag te zien.
• Resources — Door komma's gescheiden namen, optioneel met een percentagetoewijzing: Alice, Bob:50%. Labels verschijnen op de taakbalk.
• Link — Een URL die de taakbalk klikbaar maakt in de uiteindelijke SVG (bijv. een Jira-ticket of specificatiedocument).
• Note — Vrije-tekst annotatie weergegeven als een PlantUML-notitie onder de taakbalk in het diagram.

Wanneer je taken klaar zijn, klik op "Generate Gantt Diagram". GanttTool voert automatisch de volgende stappen uit:

• Valideert dat elke taak een niet-lege naam heeft.
• Controleert de afhankelijkheidsgraaf op cycli met behulp van diepte-eerst zoeken.
• Stelt een PlantUML @startgantt codeblok samen uit je instellingen en taken.
• Stuurt de code naar de Kroki rendering API (/api/kroki) en haalt een vector-kwaliteit SVG-afbeelding op.

Het SVG-diagram verschijnt binnen enkele seconden in het voorbeeldgebied. Een draaiende loader wordt weergegeven tijdens het renderen; eventuele syntaxisfouten of onbeschikbaarheid van de service worden duidelijk weergegeven met een foutbeschrijving.

De PlantUML-broncode bekijken

Klik op "Show PlantUML code" om een paneel te openen met de ruwe PlantUML-syntax die naar de renderer is gestuurd. Dit is handig voor debuggen of het leren van de onderliggende taal — zie onze speciale PlantUML Gantt Diagram Formaat handleiding voor een diepgaande duik in de syntax.

Zodra het diagram is gegenereerd, verschijnt de exportwerkbalk onder het voorbeeld. Je hebt vier opties:

Knop	Wat het oplevert
Download SVG	Slaat het diagram op als een schaalbaar vectorbestand — ideaal voor het inbedden in presentaties, documenten of websites op elke resolutie.
Download PNG	Converteert de SVG naar een hoge-resolutie rasterafbeelding (2x pixeldichtheid) en downloadt deze als een .png bestand.
Copy Image	Converteert de SVG naar PNG en kopieert deze rechtstreeks naar het klembord — klaar om te plakken in Slack, e-mail, Notion of een andere tool.
Export JSON	Downloadt het volledige project (instellingen + alle taken) als een .json bestand dat later kan worden geïmporteerd via de knop Import JSON.

Naast handmatig exporteren wordt je project continu automatisch opgeslagen in de LocalStorage van je browser onder de sleutel gantt_diagram_data. De volgende keer dat je de app opent in dezelfde browser, wordt je laatste project automatisch geladen. Gebruik JSON-export voor langetermijnback-ups of om het project te delen met teamleden.