はじめに

PF開発をざっくり進めていた私ですが
機能が複雑になるにつれて、これどこと繋がっているっけ...。
という混乱に陥ることが多くなりました。

それもそのはず。
この機能ってどうやってコード書くんだろ→実装
という、設計図を書かずに思いつきのままにやってました。
そりゃそうなるわ...。

ということで調べていくと「mermaid」なる物があると知りましたので
朝調べて、さくっと書けるようになりました(VScodeに拡張機能もあるのでそちらで一旦書きました)

シーケンス図

魔法の言葉を書けば、こんな具合にできちゃいます。

シーケンス図はsequenceDiagramと書き始めてあとは名前をそれぞれ定義。
正直練習でやったのであんまり意味を持たせようと思って書いておりませんのでご了承ください。

Note over gest : わぁ！ありがとうございます。
Note left of cook: 熟練の料理人
Note right of cook: 熟練のお客さん

Note(それぞれのライン)の右左真ん中にコメントが書ける機能も中々使い勝手が良さそうです。
一応書いたコードを載せておきます。

sequenceDiagram
participant cook as 料理人
participant kitchenware1 as フライパン
participant kitchenware2 as 鍋
participant holl as ホール
participant gest as お客様 

    cook ->>+ kitchenware1: ハンバーグを焼く
    Note left of cook: 熟練の料理人
    Note over kitchenware1 : 焼けたら
    kitchenware1 ->> holl : カウンターに出す
    holl ->> gest : 料理を運ぶ
    Note over gest : わぁ！ありがとうございます。
    Note over gest : いただきます！
    Note over gest : 追加注文！
    alt ラーメン
        gest ->> holl : ラーメンも食べたい！
    else カレー
        gest ->> holl : 辛いの頂戴！
    end
    holl -->> cook : ラーメン追加注文入りやしたぁ！
    cook ->> kitchenware2 : スープ作るぜ！
    kitchenware2 -->> cook :もう出来上がったぜ！
    cook ->> holl :豚骨ラーメン出来上がりぃ！
    holl -->> cook: ありがとうございます！
    holl ->>　gest: お待たせしました！豚骨ラーメンになります！
    Note over gest: 求めていたのはこれだ！いただきます！

フローチャート図

これは今実際に作っているポートフォリオのフローチャートです。
HTMLをどうするとどこに行くか、というのがわかるようになっています。

flowchart LRと書き始めて、左から右に書くことのできるフローチャートです。
TDとか上から下に、という書き方もあります。
こちらも名前を定義してあとは矢印等で繋いでいきます。

実際のコードを載せておきます。

flowchart LR
    A([index.html])
    B(cinema.html)
    C(cinema-list.html)
    D(detail.html)
    E(cast-detail.html)
    F(review.html)
    G(cinema-review-list.html)

    A -->|タイトルを検索| B
    B -->|ポスターをクリック| D
    A -->|マイページをクリック| C
    D -->|キャストをクリック| E
    F-->|投稿|C
    E -->|ポスターをクリック| D
    D -->|登録する| C
    C -->|レビューする|F
    C -->|ポスターをクリックする|G

最後に

というわけで、2つの図を書きました。

フローチャート図があることによって、繋がりが明確になりました。
そりゃ地図ないままダンジョン潜ったって最後までたどり着かないもんな～というのが率直な感想です。
あとこのフローチャートは簡易過ぎるので、viewとかmodelとか載せた設計図を書いた方が、今後の開発等にも役に立つはずですね～。

読んでいただきありがとうございました！

参考