← Back

mermaidについて

mermaid

```mermaid
---
config:
   theme: 'base'
   themeVariables:
     primaryColor: '#ffffffff'
     primaryTextColor: '#000000ff'
     primaryBorderColor: '#000000'
     lineColor: '#000000ff'
     secondaryColor: '#e9e9e985'
     secondaryTextColor: '#000000ff'
     tertiaryColor: '#79ff457e'
     tertiaryTextColor: '#000000ff'
   flowchart:
      curve: linear
---
flowchart TD
   node_7["理想の状態"]

   %%classDef nowrap white-space:nowrap;
   %%classDef SG stroke-width:0px,fill:none

   node_2["計画通りに仕事を進められるようになる"]
   node_9["各仕事における各タスクの所要時間を正確に見積もることができる"]

   node_7 --> node_2

   node_10["各仕事における全タスクを把握できている"]
   node_11["その仕事におけるタスクを行う順番が定められている"]
   node_12["各タスクの所要時間を最短化できている"]
   node_3["各仕事における確認観点などがMECEになっている"]
   node_2 --> node_1
   node_1 --> node_9
   node_1 --> node_12
   node_12 --> node_3
   node_11 --> node_10
   node_6 --> node_3
   node_12 --> node_11
   node_9 --> node_10
   node_12 --> node_6
   node_6 --> node_11
   node_2 --> node_4
   node_2 --> node_5
   node_5 --> node_8
   node_5 --> node_9
   node_6["各仕事において手戻りが発生しないようになっている"]
   node_1["#quot;その対象における制限時間 ≧ 全仕事の所要時間の合計#quot;となっている"]
   node_4["計画通りに行かなくても、途中で立て直しができる"]
   node_5["計画を立てることができる"]
   node_8["終了日を把握できている"]
```

理想の状態

計画通りに仕事を進められるようになる

各仕事における各タスクの所要時間を正確に見積もることができる

各仕事における全タスクを把握できている

その仕事におけるタスクを行う順番が定められている

各タスクの所要時間を最短化できている

各仕事における確認観点などがMECEになっている

"その対象における制限時間 ≧ 全仕事の所要時間の合計"となっている

各仕事において手戻りが発生しないようになっている

計画通りに行かなくても、途中で立て直しができる

計画を立てることができる

終了日を把握できている


```mermaid
---
    # Frontmatter config, YAML comments
    #title: Ignored if specified in chart
    #displayMode: compact     #gantt specific setting but works at this level too
    config:
#        theme: forest
        themeCSS: "
             //.titleText { font-size: 40px; }\n
             .tick text { font-size: 16px; }
        "
        gantt:
            #useWidth: 800
            rightPadding: 0
            topAxis: true  #false
            numberSectionStyles: 3
            fontSize: 16
            sectionFontSize: 24
            tickInterval: 1month
---
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section ざっくりとした計画

    テスト:done,    des1, 2025-05-01,3M

    Active task               :active,  des2, 2025-06-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2025-06-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2025-06-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

```
2025-05-012025-06-012025-07-012025-08-012025-09-012025-05-012025-06-012025-07-012025-08-012025-09-01テストCompleted task in the critical line Active task Future task Future task2 Functionality added Implement parser and jison Describe gantt syntax Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Create tests for renderer Add to mermaid ざっくりとした計画Critical tasksDocumentationLast section Adding GANTT diagram functionality to mermaid