如何生成 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 。 这是https://github.com/pascalerni/abap2famix/tree/master/src 上的打字稿类的示例

我目前使用但需要 VSCode 的另一种选择是： vscode-ts-uml

Answer 3

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

Answer 4

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

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

或

我建议使用 JSDoc 约定对您的 TypeScript 代码进行注释，在不剥离注释的情况下编译您的 TS 代码（在 tsconfig.json 中将注释删除为 false），并在 JS 文件上使用文档生成器。

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

Answer 5

使用TsUML ：

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

Answer 6

我找到了一个非常有用的站点，可以将 TS 转换为 UML 图

https://tsuml-demo.firebaseapp.com/

复制以下代码并将其粘贴到 Typescript 选项卡下

export class BaseDTO {
  created: number;
  createdBy: string;
  updated: number;
  updatedBy: string;
}

export class PaymentDTO extends BaseDTO {
  paymentId: number;
  paymentReference: string;
  amount: string;
  paymentPayee: { name: string }
}

例子：

Answer 7

现在有一个名为 TsUML2 的开源包，用他们的话来说：

离线工作，因此不涉及第三方服务器。

https://github.com/demike/TsUML2