Mermaid.js を使って、Webアプリのリクエストからレスポンスまでのシーケンス図を作成する

ITJavaScript

Mermaid.js とは?

Markdownのようなテキストからシーケンス図、フロー図、ガントチャート、クラス図、状態遷移図、円グラフを生成できるJavaScriptのライブラリです。

[Github] https://github.com/mermaid-js/mermaid#mermaid—–

[ホームページ] https://mermaid-js.github.io/mermaid/#/

これを利用して、Webアプリケーションでユーザーが何かデータをリクエストをして、レスポンスを返すまでの簡単なシーケンス図を作成しました。

sequenceDiagram
    participant ユーザー
    participant コントローラ
    participant キャッシュ
    participant モデル
    participant データベース

    ユーザー->>+コントローラ: リクエスト
    コントローラ->>コントローラ: バリデーション
    コントローラ-->>-ユーザー: エラー

    alt キャッシュ利用

        コントローラ->>+キャッシュ: データ取得
        キャッシュ-->>-コントローラ: 
        コントローラ-->>ユーザー: 結果表示

    else データベース利用
    
        コントローラ->>+モデル: データ取得
        モデル->>+データベース: データ取得
        データベース-->>-モデル: 
        モデル-->>-コントローラ: 

        コントローラ->>+キャッシュ: データキャッシュ
        
        コントローラ-->>ユーザー: 結果表示

    end

こちらのリンクからこのシーケンス図を作成した際のLiveEditorに飛べるのでそのままご利用いただくことも可能です。

https://bit.ly/2H54YHM

[簡単な流れ]

登場人物
ユーザー、コントローラ、キャッシュ、モデル、データベース

1. ユーザーがリクエスト
2. バリデーションで値判定
2-1. エラーだったら、エラーメッセージをレスポンス
3. キャシュとデータベースどちらからデータを取得するか、判定
3-1. (キャッシュを利用)キャッシュのデータをレスポンス
3-2-1. (データベースを利用)データベースのデータをキャッシュ
3-2-2. (データベースを利用)データベースのデータをレスポンス

Mermaid.js を使って1番いいと思ったのはコードをコピペで使い回せることだと思います。

その分、図の細かい調整はできませんが、簡単に機能の登場人物とデータの流れを共有したい場合などに使えるのでは?ないかと。

LiveEditorにテンプレートが用意されていているだけでなく、シンタックスエラーもしてくれます。

[フロー図テンプレート] https://bit.ly/2H54YHM

今回はシーケンス図のみでしたが、他にもフロー図、ガントチャート、クラス図、状態遷移図、円グラフがあるようなので折をみて使ってみようかと思います。

以上になります。

ここまでお読みいただきありがとうございました。

スポンサーリンク

Posted by nobuhiro harada