『可愛くてごめん』フローチャートをMermaidで書いてみた

『可愛くてごめん』とは

• 可愛いこと
• あざといこと
• 尊いこと
• 目立っていること

などを「Chu！」と可愛く謝ったHoneyWorksさんの楽曲です。

『可愛くてごめん』フローチャートとは

歌詞フローチャートというものが存在します。こういうのです¹。

この記事を読んでいたら『可愛くてごめん』でも書きたくなったので書いてみました。

こう見ると、『可愛くてごめん』の歌詞はどこからどこへでも遷移できそうな割に、結構特定のパターンで成り立っていることがわかります。

やはりコード状態で読みやすくするためのインデントは悩ましいです。ただ、『可愛くてごめん』の歌詞には複雑な組み換えがないため、比較的見やすくまとまっていると思います。なお、後述する理由によりこのコードそのままではMermaidにエラーを吐かれます。

Mermaid

graph TB;
    S([Start])-->私が私の事を愛して-->何が悪いの？嫉妬でしょうか？-->痛いだとか変わってるとか-->届きませんね。;
        届きませんね。-->そのリプライ-->大好きな;
            大好きな-->お洋服-->大好きな;
            大好きな-->お化粧で-->お決まりのハーフツイン巻いて-->お出かけしよ;
        お出かけしよ-->日傘持って-->ぼっちだって-->幸せだもん！-->Chu！可愛くてごめん;
    貴女は貴女の事だけどうぞ-->私に干渉しないでください-->類は友を呼ぶと言うけど…-->届きませんね。;
        届きませんね。-->その陰口-->重い厚底ブーツ-->お気に入りのリュックで-->崩せない前髪くしでといて-->お出かけしよ;
        お出かけしよ-->軽い女？-->ふざけんな-->重すぎるっつーの！-->Chu！可愛くてごめん;
    Chu！可愛くてごめん-->生まれてきちゃってごめん-->Chu！あざとくてごめん;
    Chu！可愛くてごめん-->努力しちゃっててごめん-->Chu！尊くてごめん;
    Chu！可愛くてごめん-->この時代生きてごめん-->Chu！目立っててごめん;
    Chu！可愛くてごめん-->自分磨きしてごめん-->Chu！ぶりっ子でごめん;
    Chu！あざとくてごめん-->気になっちゃうよね？ごめん-->Chu！可愛くてごめん;
    Chu！あざとくてごめん-->人生楽しんでごめん-->Chu！可愛くてごめん;
    Chu！目立っててごめん-->意識しちゃうよね？ごめん-->Chu！可愛くてごめん;
    Chu！尊くてごめん-->女子力高くてごめん-->ムカついちゃう-->よね？-->ざまあｗ;
    Chu！ぶりっ子でごめん-->虜にしちゃってごめん-->ムカついちゃう-->でしょ？-->ざまあｗ;
    ざまあｗ-->貴女は貴女の事だけどうぞ;
    ざまあｗ-->趣味の違い-->変わり者と-->バカにされても-->曲げたく-->ない-->怖くも-->ない-->あんたらごとき-->自分-->の味方は-->自分-->であり-->たい-->一番大切にしてあげ-->たい-->理不尽な我慢はさせたく-->ない-->“それが私”-->Chu！可愛くてごめん;
    ざまあｗ-->E([End]);

Mermaidに「Chu！」と言わせる

『それが大事』では歌詞直書きで表示できていたため、よく確認せずに直書き(上のコード)を作ったらエラーを吐かれました。うちのマーメイドは「Chu！」というのが恥ずかしいのかと思いましたが、ちゃんと理由があります。

直書きだと(全角含む)記号を表示できない

Mermaidで特殊文字を表示するためには、表示する文字をダブルクウォーテーション""で囲う必要があります。ただし、ダブルクウォーテーションは表示される図形の形を決める括弧（今回は[]）の中にある必要があり、さらに括弧を使う場合ノードに名前(id)を別でつける必要があります。

つまり、今回だとこのように書くことで問題なく表示できます。

1["Chu！可愛くてごめん"]-->2["生まれてきちゃってごめん"]-->3["Chu！あざとくてごめん"];

なお、ググると数値文字参照や文字実体参照が使えるとの情報が手に入りますが、これも試した感じ括弧無しでは機能しないことがあります。

フローチャートの全ノードを自動でエスケープする

ただ、「？」や「！」などエスケープするべき記号を使っている箇所全部にこの変更を施すのは面倒です。それに加え、idでノードの同一性が判断されるため、idを全部一緒とか全部別にするとうまく表示できません。同じ文字列には同じidをつける必要があります。何より、全部を囲うと可読性が著しく下がります。

そこで、直書きしたノードを全部エスケープして、同じ文字列に同じidをつけるスクリプトをJavaScriptで書きました。即席で適当に書いたので基本的に今回の狭い書式にしか対応してません。万が一転用することがあれば適宜書き換えて使ってください。

JavaScript

let count = 1;
const id = { 
    get(data){
        if(this[data]) return this[data];
        this[data] = count++;
        return this[data];
    }
};

console.log(歌詞.split(';\n').map(str=>str.split('-->').map(part=>`${id.get(part)}["${part}"]`).join('-->')).join(';\n'));

「;改行」で分割したのをさらに「-->」で分割してそれぞれをid[" "]で囲んで結合し直してるだけです。歌詞の部分に、直書きしたコードのS([Start])とE([End])の間を文字列として入れれば動きます。

今回のフローチャートを表示させるコードは、最終的に次のようになりました。

Mermaid

graph TB;
    S([Start])-->1["私が私の事を愛して"]-->2["何が悪いの？嫉妬でしょうか？"]-->3["痛いだとか変わってるとか"]-->4["届きませんね。"];
        4["届きませんね。"]-->5["そのリプライ"]-->6["大好きな"];
            6["大好きな"]-->7["お洋服"]-->6["大好きな"];
            6["大好きな"]-->8["お化粧で"]-->9["お決まりのハーフツイン巻いて"]-->10["お出かけしよ"];
        10["お出かけしよ"]-->11["日傘持って"]-->12["ぼっちだって"]-->13["幸せだもん！"]-->14["Chu！可愛くてごめん"];
    15["貴女は貴女の事だけどうぞ"]-->16["私に干渉しないでください"]-->17["類は友を呼ぶと言うけど…"]-->4["届きませんね。"];
        4["届きませんね。"]-->18["その陰口"]-->19["重い厚底ブーツ"]-->20["お気に入りのリュックで"]-->21["崩せない前髪くしでといて"]-->10["お出かけしよ"];
        10["お出かけしよ"]-->22["軽い女？"]-->23["ふざけんな"]-->24["重すぎるっつーの！"]-->14["Chu！可愛くてごめん"];
    14["Chu！可愛くてごめん"]-->25["生まれてきちゃってごめん"]-->26["Chu！あざとくてごめん"];
    14["Chu！可愛くてごめん"]-->27["努力しちゃっててごめん"]-->28["Chu！尊くてごめん"];
    14["Chu！可愛くてごめん"]-->29["この時代生きてごめん"]-->30["Chu！目立っててごめん"];
    14["Chu！可愛くてごめん"]-->31["自分磨きしてごめん"]-->32["Chu！ぶりっ子でごめん"];
    26["Chu！あざとくてごめん"]-->33["気になっちゃうよね？ごめん"]-->14["Chu！可愛くてごめん"];
    26["Chu！あざとくてごめん"]-->34["人生楽しんでごめん"]-->14["Chu！可愛くてごめん"];
    30["Chu！目立っててごめん"]-->35["意識しちゃうよね？ごめん"]-->14["Chu！可愛くてごめん"];
    28["Chu！尊くてごめん"]-->36["女子力高くてごめん"]-->37["ムカついちゃう"]-->38["よね？"]-->39["ざまあｗ"];
    32["Chu！ぶりっ子でごめん"]-->40["虜にしちゃってごめん"]-->37["ムカついちゃう"]-->41["でしょ？"]-->39["ざまあｗ"];
    39["ざまあｗ"]-->15["貴女は貴女の事だけどうぞ"];
    39["ざまあｗ"]-->42["趣味の違い"]-->43["変わり者と"]-->44["バカにされても"]-->45["曲げたく"]-->46["ない"]-->47["怖くも"]-->46["ない"]-->48["あんたらごとき"]-->49["自分"]-->50["の味方は"]-->49["自分"]-->51["であり"]-->52["たい"]-->53["一番大切にしてあげ"]-->52["たい"]-->54["理不尽な我慢はさせたく"]-->46["ない"]-->55["“それが私”"]-->14["Chu！可愛くてごめん"];
    39["ざまあｗ"]-->E([End]);

Chu！思いつきでごめん

正直Mermaidとか触ったことないのに、ネタ目的の不純な動機で思いつき一発で書き始めたら、思ったより時間取られました。

ゆえに良い書き方など理解が足りていないと思うので、ぜひご意見ください。

最後に、「Chu!」「ごめん」などを容赦無く独立させたフローチャートがどうなるのか、おまけに見ていってください。

参考

1. 「歌詞フローチャート」などというジャンルがあるかは定かではありませんが、ググると『宙船』や『Hey Jude』など特定の楽曲のフローチャート²は度々Twitterで話題になっているようです。 ↩

2. 「これはフローチャートなのか」というコメントを頂きました。ごもっともです。 ↩