たれぱんのびぼーろく

わたしの備忘録、生物学とプログラミングが多いかも

mermaid.jsでガントチャートを書く

mermaid.jsには様々な機能がある。その中でもガントチャート機能に着目した。

mermaid.jsガントチャートの特徴

  • 利点
  • 欠点
    • 拡張性なし (モジュールAPIなど)
    • タスクの依存先は1つのみ (and条件などは無理)
    • 公式docが整備不十分

そもそも論だが、ガントチャートは依存関係を書く機能を有するグラフなのか?

#

mermaid.js対応エディタがたくさんあるみたいで、彼らを使うのも手かも?

mermaid.jsのatomエディタ拡張、これはぐぅ神.
github.com

本家

レポジトリ
github.com

gitbook, readme代わり
mermaid · GitBook
特にgantt部分
Gantt diagram · GitBook

なんとlive editorが!
https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCkEtPj4gQjogUXVlcnkKQi0+PiBDOiBGb3J3YXJkIHF1ZXJ5Ck5vdGUgcmlnaHQgb2YgQzogVGhpbmtpbmcuLi4KQy0+PiBCOiBSZXNwb25zZQpCLT4+IEE6IEZvcndhcmQgcmVzcG9uc2UK

関連記事

色設定の仕方
qiita.com

簡単な使い方
qiita.com

後で読む
作図系ツール・ライブラリまとめ · GitHub

ガントチャートjsライブラリ
magnet88jp.hateblo.jp
blog.htmlhifive.com

plantuml.com

google chart
Gantt Charts  |  Charts  |  Google Developers

内部解析

ガントチャートソース
mermaid/src/diagrams/gantt at master · knsv/mermaid · GitHub

Jisonとやらでparserを作製・js化している模様。

ganttRenderer.js
mermaid/ganttRenderer.js at master · knsv/mermaid · GitHub
こいつがガントチャート部の肝その1。
exportしてるオブジェクトは

  • setConf: configを渡すとganttRenderer内部のconfigを更新
  • draw: 描写

のみ。
draw()の中ではひたすら愚直にd3.jsで要素を作っている。健気だ…
draw()内では本当にrenderingしかしておらず、依存関係に基づいたstart-time計算などはされていない。parser側かな?
gantt.yy.getTasks()でtaskArrayを取得している。このgetTasks()があやしい

ganttDb.js内のgetStartDate()が鍵だった。
“after"を正規表現で検出し、依存タスクの時間関係をDateにコンパイルしている。こうすれば後は描写するだけ
mermaid/ganttDb.js at master · knsv/mermaid · GitHub

d3.jsのバージョンは3.5.17で固定 (package.jsonより mermaid/package.json at master · knsv/mermaid · GitHub )。やっぱり古くからのライブラリはv4に移行しづらいよな。

draw

annotation by myself

/**
 * Draw gantt chart
 * @param {string} text - gantt data, which will be parsed soon
 * @param {string} id - id of something HTML object
 * @returns {void}
 */
function draw(text, id){}

text引数は (“./parser/gantt”).parser.parse()で即座にパースして終わり。
id引数はgetElementByIdでelemを出すために即使用して終わり.

構造まとめ

parser => "after" compiler => draw (d3.js)