mermaid.jsでリトアカのガントチャートを作った

mermaid.jsとは

フローチャートやシーケンス図、ガントチャートなど様々なドキュメントをマークダウンの様な定められたフォーマット通りに記述することで、テキストベースで作図が出来るツールです。

今回はmermaid.jsを使ってリトルウィッチアカデミアの第一クールまでのあらすじをガントチャート風に作成してみました。単なるmermaid.jsの練習と備忘録、そしてリトアカの布教です。

mermaid.jsのインストール

$ brew install yarn
$ yarn global add mermaid
$ yarn global add mermaid.cli

yarnがMacに入っていなかったのでそれからインストールしました。npmでもインストール出来ます。何故そっちにしなかったのか。

成果物

ソースコードは下記の通りです。

gantt

dateFormat YYYY-MM-DD-HH
axisFormat %d
title リトアカ第一クールまとめ

section 第一話
  アスペ主人公アッコがインチキBBA魔法使いシャイニィシャリオに憧れて魔法使いを志す :a1, 2021-04-01-00, 0h
  幼少期に顔芸や遊戯王カードなどアッコなりに頑張る :a2, 2021-04-01-03, 0h
  名門魔法学校ルーナノヴァへ入学する :a3, 2021-04-01-06, 0h
  メインヒロインのスーシィと酸素メガネに会う :a4, 2021-04-01-09, 0h
  寮までの道中に伝説のニワトリを倒す :a5, 2021-04-01-12, 0h
  入学式にダイナミック出席をかます :a6, 2021-04-01-21, 0h

section 第二話
  OPがネ申 :a7, 2021-04-02-00, 0h
  学園生活スタート :a8, 2021-04-02-03, 0h
  授業を聞かなくても優秀なスーシィと眼鏡を外すと美少女なロッテ :a9, 2021-04-02-06, 0h
  これまでデュエルしかしてこなかったアッコは早速授業に置いていかれる :a10, 2021-04-02-06, 0h
  優等生レズからアッコがマークされる :a11, 2021-04-02-12, 0h
  罠カードで蝶の羽化に成功 :a12, 2021-04-02-15, 0h
  EDがネ申 :a13, 2021-04-02-21, 0h

section 第三話
  箒に乗れないアッコが箒の大会に出場することに :a14, 2021-04-03-00, 0h
  アッコがロッテに自分の脚を舐めさせる :a15, 2021-04-03-03, 0h
  優勝候補筆頭のアマンダとかに会う :a16, 2021-04-03-12, 0h
  ドーナツが龍星丸でアッコが人間大砲で何やかんやダイアナが優勝 :a17, 2021-04-03-18, 0h
  アッコは優勝を逃すもモノリスに触れて猿を卒業した :a18, 2021-04-03-21, 0h

section 第四話
  眼前の同人誌即売会に備えロッテが連日の追い込み作業に追われる :a19, 2021-04-04-00, 0h
  アッコが盗み食いをした連帯責任でロッテはイベントに参加出来なくなる :a20, 2021-04-04-03, 0h
  どうしても参加したいアッコ達は当日学園を抜け出すことに :a21, 2021-04-04-03, 0h
  ロッテがヲタクぶりを発揮してクイズ大会で優勝 :a22, 2021-04-04-15, 0h
  ロッテは商品の万年筆をSNSの知り合いに転売することに :a23, 2021-04-04-18, 0h
  ロッテは友人との中を深めた後お風呂掃除をした :a24, 2021-04-04-21, 0h

section 第五話
  アッコのアスペが原因でダイアナと喧嘩になる :a25, 2021-04-05-00, 0h
  二人で罰掃除をしている時ドラゴンが学園の魔導石をネコババしている瞬間を目撃 :a26, 2021-04-05-09, 0h
  インフラを取り戻すため学園はアッコとダイアナの合同チームをドラゴンの元へ派遣 :a27, 2021-04-05-12, 0h
  デイトレーダードラゴンに会い詐欺罪で学園が訴えられる :a28, 2021-04-05-15, 0h
  学園側勝訴 :a29, 2021-04-05-18, 0h
  合同チームは罰掃除を命じられアッコとダイアナはライバル関係となる :a30, 2021-04-05-21, 0h

section 第六話
  ネズミを別の動物に変身させる授業でアッコだけ自分をネズミにする :a31, 2021-04-06-00, 0h
  イケメンが登場 :a32, 2021-04-06-03, 0h
  魔力を与えてくれると遊戯王カードに伝わるポラリスの泉にイケメンと共に向かう :a33, 2021-04-06-12, 0h
  シャリオの過去を見て力とは努力で手に入れられるものという当然の事実をようやく知る :a34, 2021-04-06-18, 0h
  アーシュラ先生が何か良いことを言う :a35, 2021-04-06-21, 0h

section 第七話
  アッコが次の試験で赤点を取ると退学という危機に直面 :a36, 2021-04-07-00, 0h
  賄賂を用意 :a37, 2021-04-07-03, 0h
  賄賂で試験担当の教師を殺しかけてしまう :a38, 2021-04-07-06, 0h
  幸運にも絶滅危惧種を救ったことと魚語を理解出来たことで試験を免除に :a39, 2021-04-07-15, 0h
  アーシュラ先生が格好良かった :a40, 2021-04-07-18, 0h
  エンドカードが魚 :a41, 2021-04-07-21, 0h

section 第八話
  待望のスーシィ回 :a42, 2021-04-08-00, 0h
  キノコ実験の結果スーシィが眠ったままになる :a43, 2021-04-08-03, 0h
  スーシィを起こすためにアッコがスーシィの夢の中へ :a44, 2021-04-08-06, 0h
  アルパカスーシィ、ギャルスーシィ、JKスーシィ、ロリスーシィ、ママスーシィ、:a45, 2021-04-08-12, 0h
  ニートスーシィ、スーシィスーシィ :a45, 2021-04-08-12, 0h
  劇場版スーシィがアッコのことを本当はどう思っているのか :a46, 2021-04-08-15, 0h
  ロッテキノコ化 :a47, 2021-04-08-18, 0h
  百合の波動 :a48, 2021-04-08-21, 0h

section 第九話
  休日に外出する際のアミュレットを提出する際アッコはゴミを提出 :a49, 2021-04-09-00, 0h
  流石に却下されてデッキの切り札を再提出 :a50, 2021-04-09-00, 0h
  外出先で校則を破り魔法を使用 :a51, 2021-04-09-06, 0h
  その上法律を破り死人を蘇らせる :a52, 2021-04-09-06, 0h
  スーシィがアンデットに大道芸をやらせて大儲けする :a52, 2021-04-09-12, 0h
  校長の耳にも入るがアンデットが校長の亡き父親だったこと:a53, 2021-04-09-18, 0h
  からありうやむやにしてもらう :a53, 2021-04-09-18, 0h
  ただし罰としてほうき掃除 :a54, 2021-04-09-21, 0h

section 第十話
  パーティにてイケメンが再登場 :a55, 2021-04-10-00, 0h
  かわいいドレス姿 :a56, 2021-04-10-03, 0h
  惚れ薬投入 :a57, 2021-04-10-06, 0h
  アッコがイケメンからもダイアナからも求められる :a58, 2021-04-10-09, 0h
  逆作画崩壊 :a59, 2021-04-10-15, 0h
  やっぱこの三人だな :a60, 2021-04-10-21, 0h

section 第十一話
  アーシュラ先生の特別レッスンでアッコ急成長 :a61, 2021-04-11-00, 0h
  【朗報】アーシュラ先生自室汚ジャージ民と判明 :a62, 2021-04-11-03, 0h
  自分の未来を示してくれると遊戯王カードに伝わる :a63, 2021-04-11-09, 0h
  太古の亡霊に会いに行く :a63, 2021-04-11-09, 0h
  シャリオからの試練に挑む :a64, 2021-04-11-12, 0h
  未来と思い出の二択を迫られる :a64, 2021-04-11-12, 0h
  アッコ覚醒 :a65, 2021-04-11-18, 0h
  ここに来てようやく物語が進む :a66, 2021-04-11-21, 0h

section 第十二話&第十三話
  月光の魔女を決める魔法際が開催決定 :a67, 2021-04-12-00, 0h
  アッコがダイアナにTS展開 :a68, 2021-04-12-03, 0h
  全生徒が魔法際で披露するショーの準備を行う、アッコ達は排泄物役 :a69, 2021-04-12-12, 0h
  アッコ二度目の覚醒 :a70, 2021-04-12-15, 0h
  第一クール終了 :a71, 2021-04-12-21, 0h

section 第十四話
  '' :a72, 2021-05-01-00, 0h

下記のコマンドでPNGに出力します。

$ mmdc --input test.mmd --output test.png --backgroundColor transparent

ハマった点は最後のセクションの開始日に余裕を持たせないと、横に長い文章の場合思いがけない場所で改行されて少し崩れることがあるという点です。

終わりに

フローチャートやガントチャートを作る時にマウスでちまちま作業していた苦労から解放されそうで非常に有用だなと思いました。まだ上流作業を求められることは無いのですが、いざという時に役立てそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA