Cursor に Mermaid 図を作ってもらおう

はじめに

最近、Cursor という AI 搭載のコードエディタを使い始めました。コードの説明やドキュメント作成で非常に便利です。
ある日「このコードの処理フローを図で説明してほしい」とお願いした時のことをシェアさせていただきます。

最初の試み：コードの図解を依頼

以下のような簡単なユーザー認証システムのコードがあったとします：

class UserAuth:
    def __init__(self):
        self.users = {}
        self.sessions = {}

    def register(self, username, password):
        if username in self.users:
            return False, "User already exists"
        self.users[username] = self._hash_password(password)
        return True, "User registered successfully"

    def login(self, username, password):
        if username not in self.users:
            return False, "User not found"
        if not self._verify_password(password, self.users[username]):
            return False, "Invalid password"

        session_id = self._generate_session_id()
        self.sessions[session_id] = username
        return True, session_id

    def logout(self, session_id):
        if session_id in self.sessions:
            del self.sessions[session_id]
            return True, "Logged out successfully"
        return False, "Invalid session"

    def _hash_password(self, password):
        # 簡略化されたハッシュ関数
        return hash(password)

    def _verify_password(self, password, hashed):
        return self._hash_password(password) == hashed

    def _generate_session_id(self):
        import uuid
        return str(uuid.uuid4())

このコードのログイン処理の流れをシーケンス図で説明してほしいと Cursor に依頼しました。

予想外の結果：アスキーアート

Mermaidで作ってくれるんだろうなと想定していましたが、ここは予想外なことにアスキーアートでした：

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   Client    │    │  UserAuth   │    │   Storage   │
└─────────────┘    └─────────────┘    └─────────────┘
       │                   │                   │
       │ 1. register()     │                   │
       ├──────────────────►│                   │
       │                   │ 2. check exists   │
       │                   ├──────────────────►│
       │                   │ 3. user exists?   │
       │                   │◄──────────────────┤
       │ 4. success/fail   │                   │
       │◄──────────────────┤                   │
       │                   │                   │
       │ 5. login()        │                   │
       ├──────────────────►│                   │
       │                   │ 6. verify user    │
       │                   ├──────────────────►│
       │                   │ 7. user found?    │
       │                   │◄──────────────────┤
       │                   │ 8. verify pass    │
       │                   ├──────────────────►│
       │                   │ 9. pass valid?    │
       │                   │◄──────────────────┤
       │ 10. session_id    │                   │
       │◄──────────────────┤                   │
       │                   │                   │
       │ 11. logout()      │                   │
       ├──────────────────►│                   │
       │                   │ 12. remove session│
       │ 13. success       │                   │
       │◄──────────────────┤                   │

でもMermaidで書いて欲しい

一瞬感動したのですが、Mermaidで作って欲しかったなぁと思いつつ、

「Mermaid 図を作成するツールが使用できないため、テキストアートで代替しました。」

ということだったので、

「Mermaid 図を作成するツールをインストールできますか？」

と聞いたらCursor様はそのまま対応を完了：

1. 環境確認：Node.js と npm の存在を確認
2. ツールインストール：npm install -g @mermaid-js/mermaid-cliを実行
3. 動作確認：バージョン 11.12.0 のインストールを確認
4. テスト実行：実際に Mermaid 図を生成して動作を検証

優秀すぎる。

意外だったのは、プラグインとかMCPではなくてただNPMでCLIツールを入れたところ。

結果：美しい Mermaid 図の生成

ツールがインストールされた後、同じコードを Mermaid シーケンス図で表現してもらいました：

さらに、ユーザー登録フローも：

今後の活用方法

Mermaid ツールがインストールされたことで、以下のような活用が可能になりました：

• API のシーケンス図
• システム間の相互作用図
• ユーザー操作フローの図解
• データベース設計図
• プロジェクトのタイムライン

まとめ

Cursorすごいw

全然関係ないけどChatGPTがチャッピーならCursorはなんと呼ぼうかな。
やっぱ、かーちゃんだよな。
いや、おかあさま？

---

この記事は、実際の Cursor との対話を基にストーリーを指示し、 Cursor に作成させたものを、私めがレビュー、編集したものとなっております。