はじめに 細かいところに PlantUML ほど融通が利かないと言われる mermaid.js ですが、逆に言えばそこまで複雑なフローでなければそこそこ描けるやんけ!ということで mermaid.js で中規模以上のフロー図を描くときに使えそうな記法などについて書いてきます。 題材 良い感じの題材が思いつかなかったので、今回は地上の星の歌詞のフロー図を mermaid.js で描いていきます。 参考↓ 準備 まずは mermaid.js でフロー図を描く際の基本です。 記載規模やお好みでどうぞ VSCode みんな大好き VSCode。拡張機能を入れることで、描きながらプレビューできたり画像出力ができます。Markdown を普段から VSCode で描いている方は下記の1を。そうでない方は2を使うと良いかと思います。 1 https://marketplace.visualstudio.
![【地上の】mermaid でちょっと大きめの図を描く【星】](https://cdn-ak-scissors.b.st-hatena.com/image/square/2987ff7135410635dad60617ec5455baa7b11742/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--576eY-E_--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590%2525E5%25259C%2525B0%2525E4%2525B8%25258A%2525E3%252581%2525AE%2525E3%252580%252591mermaid%252520%2525E3%252581%2525A7%2525E3%252581%2525A1%2525E3%252582%252587%2525E3%252581%2525A3%2525E3%252581%2525A8%2525E5%2525A4%2525A7%2525E3%252581%25258D%2525E3%252582%252581%2525E3%252581%2525AE%2525E5%25259B%2525B3%2525E3%252582%252592%2525E6%25258F%25258F%2525E3%252581%25258F%2525E3%252580%252590%2525E6%252598%25259F%2525E3%252580%252591%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AMinato_seagull%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzBkZTc4ZDc0NDMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)