Repolode
Enviar
hediet

hediet/vscode-drawio

Extensão não oficial do VS Code para criar e editar diagramas do Draw.io (diagrams.net) diretamente no editor.

Ver no GitHubSite
Estrelas
9,511
Forks
470
Issues abertas
171
Último commit
há 21 horas

O que é?

Esta extensão abre arquivos .drawio, .dio, .drawio.svg e .drawio.png no editor Draw.io dentro do VS Code. Por padrão, ela inclui uma cópia offline do Draw.io, permitindo editar diagramas sem conexão com a internet. Arquivos vazios com essas extensões podem ser abertos para iniciar um novo diagrama, e um comando de conversão permite alternar entre formatos.

Os formatos .drawio.svg e .drawio.png são imagens válidas que mantêm o diagrama incorporado sincronizado ao salvar, podendo ser exibidas diretamente em locais como READMEs do GitHub. Arquivos .drawio simples são XML, o que torna as diferenças fáceis de ler no git e facilita a leitura e edição por assistentes de IA.

Entre os recursos adicionais estão vários temas do Draw.io, suporte ao Live Share para edição colaborativa e apresentações, uma opção de link para o código que leva de um nó com o nome de um símbolo à sua origem e a edição lado a lado do diagrama e de seu XML.

Recursos principais

  • 01Edita arquivos .drawio, .dio, .drawio.svg e .drawio.png no editor Draw.io.
  • 02Inclui uma versão offline do Draw.io por padrão.
  • 03Mantém as imagens SVG e PNG incorporadas atualizadas ao salvar.
  • 04Armazena diagramas como XML simples, com diferenças fáceis de comparar no git.
  • 05Oferece suporte ao Live Share para edição colaborativa e apresentações.
  • 06Vincula nós do diagrama a símbolos no código para pular até a origem.

Casos de uso

  • Manter diagramas de arquitetura no mesmo repositório que o código que eles descrevem.
  • Incorporar diagramas em arquivos SVG que são renderizados diretamente em READMEs do GitHub.
  • Revisar alterações em diagramas em pull requests por meio de diferenças legíveis no XML.
  • Criar diagramas em conjunto com colegas usando o Live Share.

Início rápido

  1. 1

    Instale a extensão pelo VS Code Marketplace

  2. 2

    Crie um arquivo vazio com final .drawio, .drawio.svg ou .drawio.png e abra-o

Antes de usar

  • Extensão não oficial, não desenvolvida pela equipe do diagrams.net.
  • Licenciada sob a GPL-3.0, uma licença copyleft.
  • A edição inline de Markdown requer o VS Code Insiders e é experimental.

Tópicos

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

Perguntas frequentes

O que é vscode-drawio?
Extensão não oficial do VS Code para criar e editar diagramas do Draw.io (diagrams.net) diretamente no editor. Esta extensão abre arquivos .drawio, .dio, .drawio.svg e .drawio.png no editor Draw.io dentro do VS Code. Por padrão, ela inclui uma cópia offline do Draw.io, permitindo editar diagramas sem conexão com a internet. Arquivos vazios com essas extensões podem ser abertos para iniciar um novo diagrama, e um comando de conversão permite alternar entre formatos.
vscode-drawio é gratuito? Qual é a licença?
vscode-drawio é open source sob a licença GPL-3.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
vscode-drawio ainda é mantido?
Manutenção ativa. O último commit de vscode-drawio foi em 6 de nov. de 2026.
Para que posso usar vscode-drawio?
Manter diagramas de arquitetura no mesmo repositório que o código que eles descrevem. Incorporar diagramas em arquivos SVG que são renderizados diretamente em READMEs do GitHub. Revisar alterações em diagramas em pull requests por meio de diferenças legíveis no XML. Criar diagramas em conjunto com colegas usando o Live Share.
Como instalar vscode-drawio?
Instale a extensão pelo VS Code Marketplace Crie um arquivo vazio com final .drawio, .drawio.svg ou .drawio.png e abra-o
Onde consigo vscode-drawio?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/hediet/vscode-drawio

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados