Lem
GitHubDiscord Matrix モードの切替 ダーク/ライト/自動モードの切替 ダーク/ライト/自動モードの切替 ダーク/ライト/自動トップページへ戻る

Living Canvas - ビジュアルコード解析

Living Canvasは、関数コールグラフをFigmaライクなインタラクティブキャンバスとして表示するビジュアルコード解析機能です。コード構造、関係性、実行フローの理解を支援します。

概要

Living Canvasはソースコードをナビゲート可能なグラフに変換します:

  • ノード: 関数、マクロ、総称関数を表現
  • エッジ: 関数間の呼び出し関係を表現
  • : タイプ別に色分け(function、macro、generic-function)

以下のような場面で役立ちます:

  • 新しいコードベースへのオンボーディング
  • 関数間の関係性の理解
  • コードレビューと影響範囲の分析
  • 循環依存の発見

使い方

パッケージの可視化

M-x living-canvas でパッケージ名を入力:

M-x living-canvas
Package name: lem-core

パッケージ内のすべての関数と呼び出し関係が表示されます。

現在のファイルを可視化

M-x living-canvas-current-file で現在のバッファの関数を可視化:

M-x living-canvas-current-file

ASDFシステムの可視化

M-x living-canvas-system でASDFシステム全体を可視化:

M-x living-canvas-system
System name: lem

キャンバス操作

ノード詳細の表示

ノードをシングルクリックすると、情報パネルに詳細が表示されます:

  • 関数名と引数リスト
  • ソースファイルと行番号
  • ドキュメント文字列
  • 呼び出し元・呼び出し先の数

ソースコードへのジャンプ

ノードをダブルクリックするとソースコードにジャンプします。分割ウィンドウで関数定義がハイライト表示されます。

グラフの再配置

ノードをドラッグしてレイアウトを変更できます。ノードの位置はセッション中保持されます。

検索

検索ボックスで関数名を検索できます。一致するノードがハイライトされ、その他は薄く表示されます。

キーバインド

キャンバスバッファがアクティブな場合:

キーコマンド説明
gリフレッシュグラフを再読み込み
q閉じるキャンバスバッファを閉じる
tトレース切替実行トレースの切替(Phase 2)
s統計実行統計を表示(Phase 2)

ユースケース

新規開発者のオンボーディング

プロジェクトに参加したら、living-canvas-systemでコードベース構造の視覚的な概要を取得。エントリーポイントを探索し、コンポーネント間の連携を理解します。

コードレビュー

変更をレビューする前に、影響を受けるパッケージを可視化して影響範囲を把握。変更されたコードに依存する関数を特定します。

バグ調査

関連するモジュールを可視化し、エントリーポイントから問題の関数までの呼び出しパスを追跡。データ変換が行われる箇所を特定するのに役立ちます。

リファクタリング計画

グラフを使って以下を特定:

  • 接続が多い関数(潜在的なボトルネック)
  • 解消が必要な循環依存
  • 別モジュールに抽出できる関数

設定

Living Canvasはlem-living-canvasパッケージを使用します。キーバインドのカスタマイズ:

(define-key lem-living-canvas:*living-canvas-mode-keymap*
            "r" 'lem-living-canvas:living-canvas-refresh)