プロダクトマネージャーであれば企画・施策を考える際に、シーケンス図やER図を用意してほしいと頼まれることもあるかと思います。実体験ですがエンジニアとコミュニケーションをする際には、シーケンス図やER図を用意しておくと会話がスムーズに進みやすいです。（もちろん最終的なER図などはエンジニアチームに委ねるのであくまで施策の叩き台としてにはなりますが）。
専用のツールを使って作成するのも良いですが、学習コストも高いのでプロダクトマネージャーはMermaid記法を身につけるのをオススメします。NotionやZenn, Githubなどでも使えますし、なによりマークダウンで書けるためドキュメント管理として最適でプロダクトマネジメントのいろんなケースで活用されています。

そもそもMemaid記法とは？

Mermaidとは元々ダイアグラム作成およびチャート作図用のJavaScriptライブラリとして生まれました。 mermaid.js.org Mermaid記法は、シンプルなテキストベースの言語で、グラフィカルな図を表現するために使用されます。Mermaid記法を使うことで、複雑な図を簡単に作成することができます。

プロダクトマネージャー視点で覚えておくべきシーケンス図とER図の役割

シーケンス図とER図はシステム開発でよく使われます。プロダクトマネージャーとして完璧に書ける必要は無いですが、目的やどんなことが書かれているのかを理解するのは重要です！

シーケンス図

シーケンス図は、システム内のオブジェクトや処理の流れを示す図です。主に以下のような目的で使用されます。

機能の確認：シーケンス図を作成することで、システム内の各機能がどのように連携して動作するかを確認することができます。
コミュニケーションの支援：シーケンス図は、開発者間や顧客とのコミュニケーションを支援するために使用されます。システムの動作を可視化することで、誤解を防止し、スムーズなコミュニケーションを実現することができます。
プログラムの実装：シーケンス図は、プログラムの実装においても重要な役割を果たします。シーケンス図を作成することで、プログラムの処理フローを明確にすることができ、開発の効率を高めることができます。

ER図

ER図は、データベースの設計や分析に使用される図です。主に以下のような目的で使用されます。

データベースの設計：ER図を作成することで、データベースの設計を行うことができます。ER図は、データベース内のテーブルや各項目の関係性を可視化することができるため、正確な設計を行うことができます。
データの分析：ER図は、データベース内のデータを分析するためにも使用されます。ER図を作成することで、データの関係性を理解し、正確な分析を行うことができます。
コミュニケーションの支援：ER図は、開発者間や顧客とのコミュニケーションを支援するために使用されます。データの関係性を可視化することで、誤解を防止し、スムーズなコミュニケーションを実現することができます。

覚えておくポイントとしてはシステム内の話をしているのか？データベースの構造の話をしているのか？になります。
ER図の話をしている時に実際のユーザーフローの話をすると会話の視点がずれてしまいます。そしてシーケンス図を作成してからER図を作成する流れがスムーズだと筆者は考えています。例えばですが、ユーザーは商品に複数回コメントができる。コメントは投稿されたら管理者の方で確認できる。などのシーケンス図が無い状態でER図を作成すると、コメント複数回に対応できていなかったり、管理者がチェックできなかったり..などの考慮ができなくなります。

Notionを使ったMermaid記法の書き方

では実際にMermaid記法を使って見ましょう! 今回はNotionでMermaid記法を使ってシーケンス図・ER図を作成することにします。Notionでまずは以下の手順を実行します。

Notionのページを作成します。
ページに「/mermaid」と入力するか、「```」を使ってコードブロックを表示しMemraidを選択します。
エディタが表示されるので、Mermaid記法でシーケンス図・ER図を作成します。
図が完成したら、ページを保存します。

以上の手順で、簡単にシーケンス図・ER図を作成することができます。

Mermaid記法のシーケンス図の書き方

簡単な例を使ってシーケンス図の書き方を紹介します。今回はリクエストをデータベースに送ってレスポンスを返すだけのシーケンス図をMermaidで書いてみました。

sequenceDiagram
    participant A as User
    participant B as Server
    participant C as Database

    A->>B: リクエスト送信
    B->>C: データベース問い合わせ
    C-->>B: 応答返却
    B-->>A: レスポンス返却

Mermaid記法の紹介

sequenceDiagram : シーケンス図を描くことを宣言するキーワード asを使うことで名前を管理できます。
participant : 各参加者の名前を宣言するキーワード
>> : タイムラインを描くためのキーワード
: : メッセージの内容を表すためのキーワード

Mermaid記法のER図の書き方

次にER図の書き方を紹介します。今回はTwitterのようなアプリケーションをER図にしたらというイメージで作成しました。

erDiagram
    User ||--o{ Tweet : posts
    User ||--o{ Follows : follows
    User {
    int user_id PK
        string name
        string handle
        string bio
        date joined
        string location
        string website
        string profile_picture
    }
    Tweet {
    int tweet_id PK
        string content
        date timestamp
        int likes
        int retweets
    }
    Follows {
        date followed_since
                int user_id FK
                int follower_id FK
    }

Mermaid記法の紹介

erDiagram : ER図を描くことを宣言するキーワード asを使うことで名前を管理できます。
entityname { attributename:type, attributename:type, ... } : エンティティを宣言します。 attributenameには実際に入るカラムを説明しています。
entity : ER図においてテーブルに相当するもので、四角形で表現されます。エンティティには、属性と呼ばれるカラムがあります。エンティティには、主キーと呼ばれる一意に識別できる属性があります。主キーは、エンティティを表す四角形の上に下線で表記されます。pkと書けばOKです。
|| , ||--o{ , ||--|{ ：1対1（||）、1対多（||--o{）、多対多（||--|{)などエンティティの関係を宣言しています。

以上、NotionでMermaid記法を使ったシーケンス図・ER図を紹介してみました。
自分が担当しているプロダクトで実際に書いてみてください！