我正在使用Visual Studio 2015创建Web应用程序,我刚刚开始使用TypeScript。随着我的项目越来越大,我想知道是否有一种方法可以使用Visual Studio、扩展或任何其他免费工具来获得TypeScript代码的UML图。
TypeScript
kd3sttzy1#
我正在使用一个来自AlexShen的名为classdiagram-ts的VSC扩展,它做得非常好,它可以用于为文件或文件夹创建图表,还可以让您重新定位和导航到字段、隐藏成员和其他很酷的选项。https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts&ssr=false#overview
i2byvkas2#
您可以尝试tplant。下面是https://github.com/pascalerni/abap2famix/tree/master/src中的typescript类的示例
另一个我目前使用但需要VSCode的替代方法是:vscode-ts-uml
vqlkdk9b3#
适用于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
bbmckpt74#
我建议不要用TsUML做任何事情。你把它作为一个常规的NPM包安装,但是它使用了一些粗略的在线服务。在专有项目中使用Tsuml似乎很危险。
guykilcj5#
使用TsUML:
npm install -g tsuml # Note: this posts data to https://yuml.me!! tsuml --glob ./src/**/*.ts
bbmckpt76#
我发现了一个非常有用的站点,可以将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 } }
范例:
6条答案
按热度按时间kd3sttzy1#
我正在使用一个来自AlexShen的名为classdiagram-ts的VSC扩展,它做得非常好,它可以用于为文件或文件夹创建图表,还可以让您重新定位和导航到字段、隐藏成员和其他很酷的选项。
https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts&ssr=false#overview
i2byvkas2#
您可以尝试tplant。下面是https://github.com/pascalerni/abap2famix/tree/master/src中的typescript类的示例
另一个我目前使用但需要VSCode的替代方法是:vscode-ts-uml
vqlkdk9b3#
适用于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
bbmckpt74#
我建议不要用TsUML做任何事情。你把它作为一个常规的NPM包安装,但是它使用了一些粗略的在线服务。在专有项目中使用Tsuml似乎很危险。
guykilcj5#
使用TsUML:
bbmckpt76#
我发现了一个非常有用的站点,可以将TS转换为UML图
https://tsuml-demo.firebaseapp.com/
复制以下代码并将其粘贴到Typescript选项卡下
范例: