mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.69k stars 6.34k forks source link

Gantt Documentation #2848

Open TC68 opened 2 years ago

TC68 commented 2 years ago

Hi

I'm new to Mermaid and finding it very useful for several issues that I have not previously had a solution for.

However, I am trying to work with Gantt charts and am having trouble finding documentation beyond the same two examples. In particular, I want to know if it is possible to assign tasks to different people (or categories?).

I also have not found a clear list of the syntax and options for task entries so it is hard to know what is possible. e.g. The examples include "crit" for critical tasks, but give no indication if there are any other task types.

Date formatting options are covered extensively, which is good.

Is there a list of the options available anywhere?

aaraney commented 2 years ago

@TC68, I also thought the documentation for gantt chart tasks was a bit sparse. I put together the following to help out my team and hopefully it can be rearranged into examples for documentation purpose.

Mermaid Gantt tasks are specified using the following grammar: <name> : <state>?, <id>?, <after <id>>?, <startDate>? , <(endDate | period)>. Tasks can be in one of 5 states, active, done, crit, milestone, and lastly in a default None state if a state is not specified. Tasks can have an id for reference in other contexts. A common use of the id field is to reference another tasks end date to define the start date for a task (i.e. task 2 :done, task2id, after task1id, 2020-01-09). Its worth noting that id's can be referenced from other section contexts as well (see section V in the below example). The only mandatory field, other than the task's name, is the end date. This can either be specified as a date (i.e. 2020-01-01) or a relative period (i.e. 3d). Relative periods take two forms. If a task defines its own start date, then the period will be relative to that start date (i.e. task : 2020-01-01, 3d, so implicitly an end date of 2020-01-04). If a task does not define its own start date, a relative period can only be specified if the task has an older sibling. The task will start at the end date of the older sibling and last for the duration of the specified period.

    section A
    %% invalid
    task : 3d

    section B
    %% valid
    task 1: 2020-01-01, 3d
    task 2: 3d

Task States (refereed to as "tags" in source):

examples:

gantt
    title Examples
    dateFormat  YYYY-MM-DD

    section T
    t1 :done, id, 2020-01-01, 2020-01-03
    t2 :done, id2, 2020-01-03, 3d
    t3 :done, id3, after id2, 2020-01-09
    t4 :done, id4, after id3, 3d
    t5 :done, 2020-01-12, 2020-01-15
    t6 :done, 2020-01-15, 3d
    t7 :done, after id4, 2020-01-21
    t8 :done, after id4, 12d
    t9 :done, 2020-01-27
    t10 :done, 3d

    section U
    t1 : id, 2020-01-01, 2020-01-03
    t2 : id2, 2020-01-03, 3d
    t3 : id3, after id2, 2020-01-09
    t4 : id4, after id3, 3d
    t5 : 2020-01-12, 2020-01-15
    t6 : 2020-01-15, 3d
    t7 : after id4, 2020-01-21
    t8 : after id4, 12d
    t9 : 2020-01-27
    t10 : 3d

    section V
    t1 : id_v1, after id, 30d
gantt
    title Examples
    dateFormat  YYYY-MM-DD

    section T
    t1 :done, id, 2020-01-01, 2020-01-03
    t2 :done, id2, 2020-01-03, 3d
    t3 :done, id3, after id2, 2020-01-09
    t4 :done, id4, after id3, 3d
    t5 :done, 2020-01-12, 2020-01-15
    t6 :done, 2020-01-15, 3d
    t7 :done, after id4, 2020-01-21
    t8 :done, after id4, 12d
    t9 :done, 2020-01-27
    t10 :done, 3d

    section U
    t1 : id, 2020-01-01, 2020-01-03
    t2 : id2, 2020-01-03, 3d
    t3 : id3, after id2, 2020-01-09
    t4 : id4, after id3, 3d
    t5 : 2020-01-12, 2020-01-15
    t6 : 2020-01-15, 3d
    t7 : after id4, 2020-01-21
    t8 : after id4, 12d
    t9 : 2020-01-27
    t10 : 3d

    section V
    t1 : id_v1, after id, 30d
TC68 commented 2 years ago

Thanks @aaraney . That's very helpful.

I suppose I you need tasks attributed to different people or groups they would have to each have their own section, rather than grouping tasks in other ways.

aaraney commented 2 years ago

Certainly, @TC68!

I suppose I you need tasks attributed to different people or groups they would have to each have their own section, rather than grouping tasks in other ways.

You mentioned "assign[ing]" tasks to people or groups. I don't know that mermaid's gantt chart is going to fit that use case like a glove. I could see like you alluded to, having a section per person or per group. I could see that getting messy quickly. However, if you are using mermaid within github, I think you could take a blended approach that might work well. You could create github issues and assign to people involved for that task and then create a task within your gantt chart that links back to the github issue. Unfortunately, github issues dont have a due date field so you would have to enforce that yourself, but I still think its a decent solution if you are using github. The same concept applies to gitlab and redmine as well. I actually plan on doing something similar myself. Here's how that might look:

gantt
      dateFormat  YYYY-MM-DD

      section Sprint
      2848 Gantt Documentation : active, 2848, 2021-04-03, 1d

      click 2848 href "https://github.com/mermaid-js/mermaid/issues/2848"
gantt
      dateFormat  YYYY-MM-DD

      section Sprint
      2848 Gantt Documentation : active, 2848, 2021-04-03, 1d

      click 2848 href "https://github.com/mermaid-js/mermaid/issues/2848"
TC68 commented 2 years ago

I only very occasionally need to use gantt charts to describe projects (not in the coding world) and find the mermaid version potentially very useful for showing overall project flow. For a more complex project management version of gantt charts I would probably use ProjectLibre instead.

knsv commented 2 years ago

@aaraney Good job! You should make PR and have it added to the documentation!