LoginSignup
9
1

More than 1 year has passed since last update.

Visual Studio CodeAdvent Calendar 2022Day 7
@baku2san(taka)

Visual Stuido Code: TypeScript のコードをクラス図にしてくれる拡張機能

Last updated at Posted at 2022-11-07

背景

typescript のコードを理解しようと、既存コードから UML を起こしていこうとした。

待てよ？自動化ツールがあってもいいんじゃね？と思い検索してみたところ、Class図ならありました。

ってことで、備忘録兼、ちょっとした紹介。

出来ること

  • typescript のソースから、Class Diagram を描いてくれる。

    • *.png に出力可能
      • Tool->Export
        image.png

  • Class Diagram を好みに変形可能

    • Tool->Snap

  • private 化していいものに private 付加

    • Tool->Refactor

  • 図から、コードへジャンプ
    image.png

拡張機能

実行例

azure-account.api.d.ts を変換してみるとこんな感じ。

image.png

使い方

インストールしたら・・

  • VS エクスプローラー上で、ファイルかフォルダに対して、右クリックメニューの[show diagram] を実行
    image.png

  • 対象ファイルを編集中に、右上にあるアイコンをクリック
    image.png

コードを更新して、保存する事で、自動で図も更新してくれるので結構便利

ファイルに保存しないと反応しない。

  • 保存しないままアイコンクリックしても以前のまま（Classが無ければ No class was found)
  • CTRL + N で貼り付けて、AutoDetect で typescript になってアイコンが出ても、未保存だと、エラー

あとがき

kotlin にも対応してくれるないかなぁ

9
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
1