はじめに

最近、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様はそのまま対応を完了：

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

優秀すぎる。

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

結果：美しい Mermaid 図の生成

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

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

今後の活用方法

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

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

まとめ

Cursorすごいw

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

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