コード解読中に迷子になりすぎるので、「Mermaidの図からコードへ飛べる」VS Code拡張を自作した

はじめに

他人のコードや、久しぶりに触る自分のプロジェクトを読んでいるとき、こんなことになりませんか？

• 「呼び出し階層を追っているうちに、元の場所が分からなくなる」
• 「シーケンス図を見ても、その処理がコードのどこにあるのか探すのが手間」

「コードを読む認知負荷を、物理的に減らしたい」。その一心で、Mermaidの図を「ただの画像」から「エディタのナビゲーター」に変える拡張機能を作りました。

作ったもの：code-reading-helper-by-mermaid-sequence-diagram

Mermaidのシーケンス図をベースに、コードとの間をシームレスに行き来するためのツールです。

実装したこだわり機能

1. 図からコードへのジャンプ: 図の中の関数名をクリックするだけで、定義場所（ファイル・行）へ一瞬で飛びます。
2. 処理の「重なり」を可視化: 繰り返し呼ばれる処理をカラーコーディング。CPUがホットスポットを探すように、コード内の「重要な交差点」が視覚的に分かります。

使い方：地図を片手にコードを歩く

1. multilangSequence などのツールで、気になる箇所のMermaidシーケンス図を生成。
2. 本拡張機能で図を表示し、気になる処理をポチポチ叩きながらコードの実体を深掘り。

「図（抽象）」で全体像を掴み、「コード（具体）」で詳細を確認する。この往復がスムーズになるだけで、コード解読のストレスは劇的に減ります。

おわりに

このツールは、自分の「もっと楽にコードを読みたい」というワガママから生まれました。
同じように、コードの迷宮で迷子になりがちなエンジニアの方に使っていただけると嬉しいです。

• 現在はPythonとTypeScriptに対応しています。

フィードバックやGitHubへのStarをいただけると、泣いて喜びます！

拡張機能URL
https://marketplace.visualstudio.com/items?itemName=kazu017.code-reading-helper-by-mermaid-sequence-diagram
GitHubリポジトリ
https://github.com/KDB017/CodeReadingHelperByMermaid