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
function draw(text, id){}
text引数は (“./parser/gantt”).parser.parse()で即座にパースして終わり。
id引数はgetElementByIdでelemを出すために即使用して終わり.
構造まとめ
parser => "after" compiler => draw (d3.js)