mermaidでガントチャートを描く

今日はPlantUMLのようにテキストベースで各種チャートを作成できるmermaidを紹介します。

mermaid · GitBook

PlantUMLでガントチャートを描いた例については↓で解説しています。

otepipi.hatenablog.com

今回はPlant UMLの時と同じ題材を扱います。

実装方法

VScordにプラグイン「Markdown Preview Enhanced」を入れて動作させました。

今回は使用しませんでしたがWEBで作図することもできるようです。

mermaidjs.github.io

実装

下図のようになりました。

コードは下記になります。

gantt
    title A Gantt Diagram
    dateFormat  MM-DD
    section 基本設計
    基本設計を考える           :a1, 07-26, 10d
    基本設計資料を作る     :a2, after a1  , 3d
    section 詳細設計
    詳細設計を考える      :a3, after a2 , 5d
    詳細設計資料を作る      : a4, after a3, 3d

感想

Plant UMLと比較して ○本文と同じ.md内に書けるので管理が楽 ○チャートのデザインが美しい ☓マイルストーンやタスク順序を示す矢印がないなどとにかく機能が少ない

個人的にはPlantUMLのほうが使い勝手が良いと感じました。

今日はこれまでになります。