Como gerar diagramas de classes UML de TypeScript no VS Code?

Existem ferramentas que podem gerar um diagrama de classes UML a partir de um projeto em TypeScript ou em uma linguagem similar?

Resposta #1

Para TypeScript:

• O editor ALM TypeScript inclui este recurso: https://github.com/alm-tools/alm/issues/84

  No entanto, parece que ele cria apenas um diagrama para uma única classe, não uma visão hierárquica completa do projeto com relacionamentos de herança.

• Tsviz é outro projeto promissor: https://github.com/joaompneves/tsviz

  

  Ele gera o diagrama completo do projeto. No entanto, parece desatualizado e não funciona com versões recentes do TypeScript. Estou trabalhando em um fork atualizado.

Resposta #2

Usando o recurso Diagrama UML introduzido pelo Editor IntelliJ da Jetbrains e ele funciona muito bem com TypeScript.

Abrir o Popup do Diagrama

Vá para Configurações >>> Procure por uml e encontre o atalho de teclado para isso.

OU

Clique com o botão direito em um nome de classe >>> Diagramas >>> Mostrar Pop-up do Diagrama

Mostrar propriedades e métodos da classe:

Clique com o botão direito no pop-up do diagrama >>> Mostrar Categorias >>> Métodos ou Propriedades

Dicas

• Você encontrará muitas opções para mostrar através do clique direito no pop-up do diagrama.

• Você pode dar zoom nos objetos do diagrama (se houver muitos detalhes) segurando a tecla Alt ao passar o cursor sobre eles