Repolode
Предложить
hediet

hediet/vscode-drawio

Неофициальное расширение для VS Code, которое позволяет создавать и редактировать диаграммы Draw.io (diagrams.net) прямо в редакторе.

Открыть на GitHubСайт
Звёзды
9,511
Форки
470
Открытые issues
171
Последний коммит
11 часов назад

Что это?

Расширение открывает файлы .drawio, .dio, .drawio.svg и .drawio.png в редакторе Draw.io внутри VS Code. По умолчанию в него входит офлайн-версия Draw.io, поэтому диаграммы можно редактировать без подключения к сети. Пустые файлы с этими расширениями можно открыть, чтобы создать новую диаграмму, а команда convert позволяет переключаться между форматами.

Форматы .drawio.svg и .drawio.png — это корректные изображения, в которых встроенная диаграмма обновляется при сохранении. Их можно напрямую показывать, например, в README на GitHub. Обычные файлы .drawio хранятся в формате XML: благодаря этому их изменения удобно просматривать в git, а AI-ассистентам — читать и редактировать.

Среди дополнительных возможностей — несколько тем Draw.io, поддержка Live Share для совместного редактирования и презентаций, переход от узла с названием символа к его исходному коду и одновременное редактирование диаграммы и её XML рядом друг с другом.

Ключевые возможности

  • 01Редактирует файлы .drawio, .dio, .drawio.svg и .drawio.png в редакторе Draw.io.
  • 02По умолчанию включает офлайн-версию Draw.io.
  • 03Обновляет встроенные изображения SVG и PNG при сохранении.
  • 04Хранит диаграммы в обычном XML, изменения в котором удобно просматривать в git.
  • 05Поддерживает совместное редактирование и презентации через Live Share.
  • 06Связывает узлы диаграммы с символами в коде, чтобы переходить к исходному коду.

Сценарии использования

  • Хранить диаграммы архитектуры в том же репозитории, что и описываемый ими код.
  • Встраивать диаграммы в формате SVG, которые отображаются прямо в README на GitHub.
  • Проверять изменения диаграмм в pull request по удобным для чтения различиям в XML.
  • Совместно набрасывать диаграммы с коллегами через Live Share.

Быстрый старт

  1. 1

    Установите расширение из VS Code Marketplace

  2. 2

    Создайте пустой файл с расширением .drawio, .drawio.svg или .drawio.png и откройте его

Что важно знать

  • Неофициальное расширение, созданное не командой diagrams.net.
  • Распространяется по лицензии GPL-3.0 с авторским левом.
  • Для встроенного редактирования Markdown требуется VS Code Insiders; эта функция экспериментальная.

Темы

#diagram#drawio#vscode-extension#diagramming#svg#whiteboard#hacktoberfest

Частые вопросы

Что такое vscode-drawio?
Неофициальное расширение для VS Code, которое позволяет создавать и редактировать диаграммы Draw.io (diagrams.net) прямо в редакторе. Расширение открывает файлы .drawio, .dio, .drawio.svg и .drawio.png в редакторе Draw.io внутри VS Code. По умолчанию в него входит офлайн-версия Draw.io, поэтому диаграммы можно редактировать без подключения к сети. Пустые файлы с этими расширениями можно открыть, чтобы создать новую диаграмму, а команда convert позволяет переключаться между форматами.
vscode-drawio можно использовать бесплатно? Какая у него лицензия?
vscode-drawio распространяется с открытым исходным кодом под лицензией GPL-3.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.
vscode-drawio всё ещё поддерживается?
Активно поддерживается. Последний коммит в vscode-drawio — 6 нояб. 2026 г..
Для чего можно использовать vscode-drawio?
Хранить диаграммы архитектуры в том же репозитории, что и описываемый ими код. Встраивать диаграммы в формате SVG, которые отображаются прямо в README на GitHub. Проверять изменения диаграмм в pull request по удобным для чтения различиям в XML. Совместно набрасывать диаграммы с коллегами через Live Share.
Как установить vscode-drawio?
Установите расширение из VS Code Marketplace Создайте пустой файл с расширением .drawio, .drawio.svg или .drawio.png и откройте его
Где скачать vscode-drawio?
Исходный код и инструкции по установке — на GitHub: https://github.com/hediet/vscode-drawio

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

didi / LogicFlow

Фреймворк для редактирования блок-схем на TypeScript, позволяющий встраивать в бизнес-системы настраиваемые редакторы диаграмм: блок-схем, интеллект-карт, ER- и BPMN-диаграмм.

Фронтенд и UI#flowchart#diagramming#visualization
11,8 тыс.+16 за неделю1,4 тыс.TypeScriptApache-2.0Активно поддерживаетсяОбновлён 14 дней назад

cathrynlavery / diagram-design

Навык для агентских инструментов, который создаёт редакционные диаграммы в одном автономном HTML-файле с SVG и поддерживает 45 типов диаграмм и оформление в стиле бренда.

Продуктивность и приложения#agent-skills#diagrams#svg
65,5 тыс.+2,2 тыс. за неделю4,3 тыс.HTMLMITАктивно поддерживаетсяОбновлён 10 часов назад