話題の記事

よくあるAWSサーバーレス構成のシーケンス図をMarkdown(Mermaid)で描いてみた

Markdown内でMermaid記法を使用すれば、コードで書いたUML図をGitHubやVS Code上で簡単に描画できるようになります。
2022.02.18

こんにちは、CX事業本部 IoT事業部の若槻です。

今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。

しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった…!

そこで今回は、下記のようなよくあるAWSサーバーレス構成(API Gateway + Lambda + DynamoDB + α)のシーケンス図をMermaidで描いてみました。

描いてみた

Mermaidにおけるシーケンス図の文法はこちらを参考にしました。

データ一覧取得

まず単純な例として、データ一覧を取得するシーケンス図を描いてみます。

シーケンス図をMermaidで次のように記述します。

```mermaid
sequenceDiagram
    actor クライアント
    participant API as API Gateway<br/>Rest API
    participant Lambda as Data Get<br/>Lambda Function
    participant DataTable as Amazon DynamoDB<br/>Data Table

    クライアント ->>+ API: データ一覧取得
    API ->>+ Lambda: データ一覧取得
    Lambda ->>+ DataTable: データ一覧取得
    DataTable -->>- Lambda: 取得OK
    Lambda -->>- API: データ一覧
    API -->>- クライアント: 200 OK
```

ユーザーがクライアントアプリなどからデータ一覧取得を行うシーケンス図が描画できました。

データ登録

次に、もう少し複雑な例として、データ登録をするシーケンス図を描いてみます。

シーケンス図をMermaidで記述します。

```mermaid
sequenceDiagram
    actor クライアント
    participant API as API Gateway<br/>Rest API
    participant Lambda as Data Post<br/>Lambda Function
    participant DataTable as Amazon DynamoDB<br/>Data Table
    participant SES as Amazon SES

    クライアント ->>+ API: データ登録
    API ->>+ Lambda: データ登録
    Lambda ->> Lambda: バリデーション
    alt バリデーションエラーの場合
      Lambda -->> API: バリデーションエラー
      API -->> クライアント: 400 BadRequest
    end
    Lambda ->>+ DataTable: データ登録
    DataTable -->>- Lambda: 登録OK
    Lambda ->>+ SES: メール送信依頼
    SES -->> Lambda: 送信受付OK
    SES ->>- クライアント: 登録確認メール送信
    Lambda -->>- API: 登録OK
    API -->>- クライアント: 200 OK
```

ユーザーがクライアントアプリなどからデータ登録を行い、登録後の確認メールが送信されるシーケンス図が描画できました。

GitHub上で描画した際の様子

Mermaidで記述されたドキュメントをGitHub上で閲覧した際の様子です。(ダークモードなので色味が違っています。)

描画されるのに1秒くらい読み込みがあります。

画像右上の両矢印をクリックすると、モーダルが開いて大きな画像で見ることもできます。

VS Code上でプラグインを使用して描画した際の様子

また、VS Code上でMermaidを含むMarkdownドキュメントの編集を行う際は、下記のプラグインを使用すると便利です。今回のシーケンス図の作成でも使用しました。

書いている内容がリアルタイムでプレビューできるので、編集がとても快適になります。

おわりに

よくあるAWSサーバーレス構成のシーケンス図をMarkdown(Mermaid)で描いてみました。

Markdownでシーケンス図が描けて、VS CodeやGitHub上で簡単に描画出来るなんてとても便利ですね。これから積極的に使っていこうと思います。

参考

以上