如何生成TypeScript UML类图？

Question

我正在使用Visual Studio 2015创建Web应用程序，我刚开始使用TypeScript。

随着我的项目变得越来越大，我想知道是否有办法使用Visual Studio，扩展或任何其他免费工具获取TypeScript代码的UML图。

Answer 1

我正在使用AlexShen的名为classdiagram-ts的VSC扩展，做得非常好，它可以用于为文件或文件夹创建图，还可以让您重新定位并导航到字段，隐藏成员和其他不错的选择。

https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts&ssr=false#overview

Answer 2

您可以尝试tplant。

我目前使用但需要VSCode的另一种替代方法是：vscode-ts-uml

Answer 3

for Visual Studio： https://marketplace.visualstudio.com/items?itemName=AzadRatzki.TypeScriptDiagram#overview

对于vscode： https://github.com/remojansen/TsUML

或

我建议使用JSDoc约定注释你的TypeScript代码，编译你的TS代码而不删除注释（tsconfig.json中的removeComments为false），并在JS文件上使用文档生成器。

基于此，您可以找到一个从JSDoc生成UML图的工具：JSDoc UML Diagram

Answer 4

我建议不要用 TsUML 做任何事情。您将其安装为常规 NPM 包，但随后它使用了一些粗略的在线服务。将 Tsuml 用于专有项目似乎很危险。

Answer 5

使用TSUML：

npm install -g tsuml
# Note: this posts data to https://yuml.me!!
tsuml --glob ./src/**/*.ts