vscode-code-relationship-diagram

コードの関係図でソフトウェア全体を俯瞰しながら育てる事を目指しています。
コードと連携した図で、ソフトウェアの形を見える様にします。
良い設計のソフトウェアは、美しく見えると思います。
Visual Studio Codeの拡張機能として動作します。

Screen shot

Operation

0.準備
- ワークスペースファイルにfiles.associationsを定義し、ワークスペースで開く。
```
{

  "settings": {

    "files.associations": {
      "src/**/*.(c|h)": "c"
    }
  }
}
```
1.定義(シンボル)をデータベースに保存する。
- a) Ctrl(⌘)+Shift(⇧)+Pキーを押し、コマンドパレットを出力する。
- b) CRD: Initialize Code Relationship Diagramコマンドを選ぶ。
2.関係図を表示する。
- a) Ctrl(⌘)+Shift(⇧)+Pキーを押し、コマンドパレットを出力する。
- b) CRD: Show Code Relationship Diagramコマンドを選ぶ。

Supported languages

1.システム言語 (10): C/C++, Rust, Go, Zig, Nim, D, Crystal, Carbon, V, Odin
2.Web開発 (18): JavaScript, TypeScript, HTML, CSS, SCSS, Less, PHP, Vue, Svelte, Angular, React, Astro, SolidJS, Ember, Lit, Stencil
3.モバイル/ゲーム開発 (9): Swift, Kotlin, Dart, Flutter, Objective-C, Xamarin, React Native, Unity, GDScript
4.関数型言語 (9): Haskell, OCaml, F#, Clojure, Elixir, Erlang, Scheme, Racket, Common Lisp
5.JVM言語 (2): Java, Groovy
6.スクリプト言語 (9): Python, Ruby, Lua, Perl, R, Julia, Tcl, AWK, SED
7.設定・マークアップ (18): JSON, XML, YAML, Markdown, TOML, INI, Dockerfile, Terraform, Makefile, CMake, Bazel, Gradle, Ant, Maven, SBT, Ninja, Meson
8.シェル (5): ShellScript, PowerShell, Bash, Zsh, Fish
9.データベース (5): SQL Server, MySQL, PostgreSQL, SQLite, MongoDB
10.アセンブリ・低レベル (7): x86-64 ASM, NASM, GAS, MASM, ARM, RISC-V, WebAssembly
11.ブロックチェーン (6): Solidity, Vyper, Move, Cairo, Clarity, Cadence
12.科学計算・データサイエンス (7): MATLAB, Octave, Scilab, Fortran, COBOL, Mathematica, SageMath
13.GPU・並列プログラミング (5): CUDA, OpenCL, HLSL, GLSL, Metal
14.ゲーム開発 (3): GDScript, UnrealScript, ActionScript
15.特殊DSL・ツール (7): Regex, Graphviz, PlantUML, Mermaid, LaTeX, BibTeX, Gnuplot
16.歴史的・教育言語 (6): Pascal, BASIC, Logo, Smalltalk, Forth, Prolog
17.エソテリック言語 (2): Brainfuck, Whitespace

Specifications

E.関係の抽出

シンボルの定義場所から参照場所を抽出する事できる。シンボルの参照場所を変更した場合は、検出できない。このため、変更ファイルで参照しているシンボルの、関係の再抽出も行う必要がある。

E1.codeFile.updates(List File, Load table_symbols)
- case Upsert(Add | Update):
  - a) codeSymbols.updates(Extruct Symbols, Load table_symbols)
    - case Upsert(Add | Update):
      - a) Extruct Relationship
        
        a) Extruct Relationship define
        
        a) case Update: Extruct Relationship referance 全ての抽出を統合して、同じ抽出は1度だけにする -> 抽出完了のイベントにより個々の抽出完了の同期を行う。
      - z) codeSymbols_upsert()
        
        case Update: ''
        
        case Insert: ''
      - z) relationship_upsert()
        
        case Update: ''
        
        case Insert: ''
    - case Delete:
      - a) 'DELETE FROM table_symbols WHERE id = ?;'
      - a) 'DELETE FROM table_relationships WHERE reference_id = ? OR define_id = ?;
    - case No change:
      - No opration
  - z) codeFile_upsert(path, updated)
    - case Update: UPDATE table_files SET updated_at = ? WHERE relative_path = ?;
    - case Insert: INSERT INTO table_files (updated_at, relative_path) VALUES (?, ?);
- case Delete:
  - 'DELETE FROM table_files WHERE relative_path = ?;'
  - 'DELETE FROM table_symbols WHERE path = ?;'
  - 'DELETE FROM table_relationships WHERE reference_path = ? OR define_path = ?;
- case No change:
  - No opration

G.コード関係図エディタ

G1.コード関係図の初期表示
- G1-1.可視性保証
  - G1-1-1. ノード間の最小距離を維持し、重なりを防ぐ
  - G1-1-2. 関係線が他のノードに隠れないよう、透過性を考慮した配置
  - G1-1-3. 短すぎる関係線は適度に伸ばし、長すぎる関係線は縮める
  - G1-1-4. ノード間の最小間隔を矢印の三角の大きさの２倍以上に設定し、関係線の矢印を明確に表示する
- G1-2.垂直配置
  - G1-2-1. 参照ノード（他のシンボルを参照するノード）を相対的に上方向に配置する
  - G1-2-2. 定義ノード（他のシンボルから参照されるノード）を相対的に下方向に配置する
  - G1-2-3. 垂直配置の力は水平方向の力よりも弱く設定し、自然な階層構造を形成する
G2.ノード選択の仕様(検討中)
- G2-2.選択状態の定義
  - 表示を選択状態にする
  - マウスの移動に追従してノードを移動する
- G2-1.操作方法
  - Shift+ドラッグ: 範囲選択
  - Shift+クリック: 個別選択/選択解除
  - 通常マウスダウン: 単一選択
  - ノード以外をクリック: 全選択解除
G3.関係線(エッジ)にマウスホバーでの関係表示
- G3-1.タイトルなしのツールチップで表示する。ツールチップは表示後に移動しない
- G3-2.参照シンボルのシンボル名と行番号でソートして、「参照シンボル → 定義シンボル」の形式で表示
- G3-3.シンボルをクリックすると、対象のシンボルのエディタへ移動する

Build steps

このプロジェクトを作った手順を説明します。

Tips

VSCode DevTools: Option+Command+I
uninstall Extension: code --uninstall-extension suzukimitsuru.vscode-code-relationship-diagram

1.プロジェクトの作成

vscodeの拡張機能を作ってみる
- sudo npm install -g yo generator-code
- yo code

2.VSCode の拡張機能を公開する

2-1.VSCode Extention Marketplace コマンドのインストール

sudo npm install -g vsce

2-2.パッケージ(`*.vsix`)の作成

yarn package
vsce package
unzip -l vscode-code-relationship-diagram-0.0.1.vsix

2-3.Marketplaceにアップロード

以下のサイトを参考にしました。

3.Cytoscape.js - Graph theory (network) library for visualisation and analysis

視覚化と分析のためのグラフ理論(ネットワーク)ライブラリ

curl -o src/cytoscape.esm.min.mjs https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.32.0/cytoscape.esm.min.mjs

CRD: Code Relationship Diagram

suzukimitsuru