Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Go back to HackMD Tutorial Home

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Give us feedback or report a bug

How to create Gantt chart

You can check the syntax in Both mode to understand the structure better.

Steps

  1. You need to define a Gantt chart block using three backticks and then writing 'mermaid'.
  2. Name this Gantt chart after title.
  3. Create task blocks with section.
  4. Separate different tasks under the same section by "line breaks", and assign durations.

Here is a simple Gantt chart

gantt
    title Gantt chart

    section Section 1
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d

    section Another section
    Task in sec      :2014-01-12 , 12d
    anther task      : 24d

Syntax











gantt
    title A Gantt Diagram

section Section 1 
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d

section Another section
Task in sec      :2014-01-12 , 12d
anther task      : 24d

 

Customize the sections and tasks.

Steps

  1. Same as above, defining a Gantt chart block using three backticks and Mermaid.
  2. Name this Gantt chart after title.
  3. Define the display format for dates.
  4. Create task blocks with section.
  5. Divide the task blocks into different tasks, name them, and assign durations.
gantt
%% Declare this as a Gantt chart
title Project AAA
%% Let's give it a title
dateFormat  MM-DD
%% This syntax must be in date format
	axisFormat  %m-%d
	%% Vertical Axis Date Format
		
section My website
%% Declare a block
	Plan : crit, done, plan, 05-15, 10d
	%%Syntax：
	%%Task Names on the Gantt Chart : [crit], [active|done], task name, [date|after task name], duration of time
Start working : active, work, after plan, 180d
Test : test, 08-01, 70d
		
section Programming
    CSS:b1, after implement copyright, 30d
    JavaScript  :b2, after b1, 20d
    Integration : after b2, 40d
    
section Design
    Sketch: active, wire, 06-12  , 18d
    Layout: implement, after wire, 24d
    UX test: crit, uxt, after implement, 24d
		
section Blog
    Blog writing: copyright, 07-29, 15d

Syntax























gantt
    title Project AAA
    dateFormat  MM-DD
	axisFormat  %m-%d
		
section My website
    Plan : crit, done, plan, 05-15, 10d
    Start working : active, work, after plan, 180d
    Test : test, 08-01, 70d
		
section Programming
    CSS:b1, after implement copyright, 30d
    JavaScript  :b2, after b1, 20d
    Integration : after b2, 40d
    
section Design
    Sketch: active, wire, 06-12  , 18d
    Layout: implement, after wire, 24d
    UX test: crit, uxt, after implement, 24d
		
section Blog
    Blog writing: copyright, 07-29, 15d
Select a repo