Диаграмите са чудесен начин за визуално предаване на идеи и могат да се използват за разширяване или понякога дори за замяна на текстови документи на софтуерни проекти. Тази статия описва как можете да създавате диаграми, без изобщо да напускате VS Code.

Случаи на употреба

Ето някои случаи на използване на диаграми. Може би те ви вдъхновяват да използвате диаграми по-често!

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

  • Маркиране на връзки между класове:

  • телени рамки:

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

Можете да използвате диаграми за много повече!

Всички тези диаграми са създадени с Draw.io във VS Code.

Създавайте диаграми във VS Code

За да създадете такива диаграми във VS Code, без да напускате редактора си, просто трябва да инсталирате разширението за интегриране на Draw.io от Marketplace:

След инсталирането можете просто да създадете *.drawio файл в изгледа Explorer:

Оттам получавате типичния интерфейс на 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!