<h1 id="%E6%A6%82%E8%A6%81%3A">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81%3A" aria-hidden="true"></a> 概要:</h1>
<p>Mermaid.js で、Gantt (ガントチャート) の例です</p>
<hr>
<h3 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h3>
<ul>
<li><a href="https://mermaid.js.org/syntax/gantt.html" target="_blank" rel="nofollow noopener noreferrer">https://mermaid.js.org/syntax/gantt.html</a></li>
</ul>
<hr>
<h3 id="%E6%9B%B8%E3%81%8D%E6%96%B9">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8D%E6%96%B9" aria-hidden="true"></a> 書き方</h3>
<ul>
<li>例１</li>
</ul>
<div class="code-block-container"><pre><code>gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
</code></pre></div><hr>
<p><img src="https://storage.googleapis.com/zenn-user-upload/a791f2d7ee1c-20230716.png" alt loading="lazy" class="md-img"></p>
<hr>
<ul>
<li>Milestones</li>
</ul>
<div class="code-block-container"><pre><code>gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial milestone : milestone, m1, 17:49, 2m
    Task A : 10m
    Task B : 5m
    Final milestone : milestone, m2, 18:08, 4m
</code></pre></div><hr>
<p><img src="https://storage.googleapis.com/zenn-user-upload/35d36346308d-20230716.png" alt loading="lazy" class="md-img"></p>
<hr>
<ul>
<li>まとめ</li>
</ul>
<p>日程管理などに、使えそうでした。</p>
<hr>


Mermaid Gantt diagrams, ガントチャート

Discussion