Диаграммы - отличный способ визуально передать идеи и могут использоваться для расширения или иногда даже замены текстовой документации программных проектов. В этой статье описывается, как создавать диаграммы, даже не выходя из VS Code.

Случаи применения

Вот несколько примеров использования диаграмм. Может быть, они вдохновят вас на более частое использование диаграмм!

  • Документация о том, как крупномасштабные компоненты зависят друг от друга:

  • Подчеркивая отношения между классами:

  • Каркасы:

  • Переходы между страницами с использованием снимков экрана:

Вы можете использовать диаграммы для гораздо большего!

Все эти диаграммы были созданы с помощью Draw.io в VS Code.

Создание диаграмм в VS Code

Чтобы создавать такие диаграммы в VS Code, не выходя из редактора, вам просто нужно установить Расширение интеграции Draw.io из Marketplace:

После установки вы можете просто создать *.drawio файл в окне проводника:

Оттуда вы получаете типичный интерфейс Draw.io, в котором вы можете рисовать свои диаграммы:

Вы даже можете использовать git для отслеживания изменений ваших файлов Draw.io! Кроме того, вам не нужен доступ в Интернет, чтобы использовать Draw.io внутри VS Code, поскольку расширение предоставляет его автономную версию.

Темы

Draw.io предлагает несколько тем, которые вы можете использовать в VS Code:

Создание редактируемых диаграмм SVG

Вы можете либо напрямую создать файл *.drawio.svg вместо *.drawio, либо преобразовать любую существующую схему в файл SVG. Такие файлы SVG по-прежнему являются редактируемыми диаграммами Draw.io! Вы можете встроить такие диаграммы в файлы Markdown и даже просмотреть их на github. Также возможно преобразование в PNG!

Ссылки на код

С помощью ссылок на код вы можете связать код со своими узлами или ребрами, просто назвав узел, как имя класса или функции, и добавив перед именем #. Итак, если ваш класс MyClass, узел должен называться #MyClass. Также необходимо активировать кодовые ссылки в строке состояния. Если дважды щелкнуть узел с таким именем, вы перейдете к классу!

Совместное редактирование

С Liveshare вы даже можете редактировать диаграммы вместе!

Намного больше

Draw.io может предложить гораздо больше. Вы можете использовать LaTeX для формул, добавлять рисунки от руки или вставлять скриншоты из буфера обмена прямо в диаграмму!
Все эти функции также доступны для Draw.io в VS Code!