Как генерировать диаграммы классов TypeScript UML в VS Code?

Существуют ли какие-либо инструменты, которые могут генерировать диаграмму классов UML из проекта на TypeScript или аналогичном языке?

Ответ 1

Использование функции UML Diagram, представленной IntelliJ редактором Jetbrains, и она отлично работает с typescript.

Открыть всплывающее окно диаграммы

Перейдите в Настройки → > Найти uml и найдите для него комбинацию клавиш.

ИЛИ

Щелкните правой кнопкой мыши по имени класса → > Диаграммы → > Показать всплывающее окно диаграммы

Показать свойства и методы класса:

Righ Нажмите на всплывающее окно диаграммы → > Показать категории → > Методы or Свойства

Советы

  • Вы найдете много вариантов для показа через правый щелчок по всплывающему окну диаграммы.
  • Вы можете увеличить масштаб объектов диаграммы (если слишком много деталей), удерживая клавишу Alt при наведении на них

    введите описание изображения здесь

Ответ 2

Для TypeScript:

  • В редакторе ALM TypeScript включена эта функция: https://github.com/alm-tools/alm/issues/84

    Однако похоже, что он создает диаграмму только для одного класса, а не для полного иерархического представления проекта с отношениями наследования.

  • Tsviz - еще один перспективный проект: https://github.com/joaompneves/tsviz

    пример сгенерированной диаграммы

    Он генерирует полную проектную диаграмму. Однако он выглядит устаревшим и не работает с последними версиями TypeScript. Я работаю над обновленной вилкой.

Ответ 3

Пожалуйста, используйте редактор IntelliJ от Jetbrains. Он имеет функцию UML-диаграмм из существующего кода.