TypeScriptのコードからクラス図を生成するツール(tsuml2, tplant, classdiagram-ts)を試した

概要

コードのキャッチアップする際、クラス図などで依存関係をざっくり把握してから読んだほうがイメージしやすいです。
今回、TypeScriptのコードからクラス図を作成する下記のツールを試してみました。

• tsuml2
• tplant
• classdiagram-ts
• TypeDoc(おまけ。クラス図などではない)

サンプルコードはこちらを使って試しています。

tsuml2

https://github.com/demike/TsUML2

特徴

• svgで出力できる
• レイアウトやスタイリングの設定ができる

tsuml2 --glob="./src/typescript-doc/**/*.ts" --nomnoml "#arrowSize: 1.5" "#.interface: fill=#8f8 dashed" --modifiers false --propertyTypes false

tplant

https://github.com/bafolts/tplant

特徴

• plantUmlのファイルが生成できる

yarn tplant --input ./src/typescript-doc/**/*.ts --output ./test.puml -A

classdiagram-ts

https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts

特徴

• vscodeの拡張機能だけなので楽

TypeDoc(おまけ)

https://typedoc.org/

yarn typedoc --out docs docs ./src/typescript-doc/**/*.ts