Essa extensão não oficial integra o draw.io (também conhecido como diagrams.net) no código VS.
Mencionado no blog oficial dos diagramas.
.drawio , .dio , .drawio.svg ou .drawio.png Arquivos no editor de draw.io.*.drawio , *.drawio.svg ou *.drawio.png e abra -o..drawio.svg são arquivos .svg válidos que podem ser incorporados nos arquivos do GitHub ReadMe! Nenhuma exportação necessária..drawio.png são válidos arquivos .png ! Nenhuma exportação necessária. Você deve usar .svg sempre que possível - eles parecem muito melhores!Draw.io: Convert To... comando.
Você pode editar e salvar diretamente os arquivos .drawio.svg e .drawio.png . Esses arquivos são imagens SVG/PNG perfeitamente válidas que contêm um diagrama de draw.io incorporado. Sempre que você edita esse arquivo, a parte SVG/PNG desse arquivo é mantida atualizada.
O logotipo desta extensão é um arquivo .drawio.png que foi criado com a própria extensão!

Se as diferenças forem importantes para você, você deve preferir .drawio e evitar diagramas .drawio.png .
Com a versão 1.0 desta extensão, foi adicionado um suporte extensivo ao código VS Liveshare. Agora você pode editar ou apresentar seus diagramas de desenho. Isso pode ser usado para discutir, revisar ou brainstorming diagramas. Com a ferramenta de desenho à mão livre do draw.io e o suporte integrado de látex, essa extensão se torna uma solução avançada de quadro branco que pode ser usado para entrevistas com código remoto!

Internamente, essa extensão sincroniza os diagramas de draw.io com documentos de texto. Esses documentos de texto são compartilhados pelo Liveshare. Como o Liveshare não entende o texto, podem ocorrer conflitos de modificação em modificações simultâneas.
Na barra de status, você pode ativar ou desativar o recurso de link de código. Se estiver ativado e clique duas vezes em um nó cujo rótulo inicia com # , você executará uma pesquisa de espaço de trabalho por um símbolo que corresponde ao restante do rótulo.
Se você tiver um nó rotulado #MyClass e uma classe de nome MyClass , você irá para sua fonte se clicar duas vezes no nó!
Observe que você deve abrir pelo menos um arquivo do projeto que contém o símbolo. Caso contrário, o código VS não considerará este projeto ao procurar símbolos. Esse arquivo em si não precisa conter o símbolo.
Graças aos meus mais recentes patrocinadores do Github, esse recurso está de código aberto e agora está disponível gratuitamente.
Dica : se você abrir o editor de desenho.io para o lado direito (ou seja, a segunda coluna do editor) e navegar para um símbolo, o diagrama permanecerá visível.

Tema "Atlas"

Tema "Kennedy"

Tema "min"

Tema "Dark"

.svg com o editor de draw.io Por padrão, essa extensão lida apenas com arquivos *.drawio.svg . Adicione isso ao seu arquivo VS Code settings.json , se desejar associá -lo aos arquivos .svg :
"workbench.editorAssociations" : {
"*.svg" : " hediet.vscode-drawio-text " ,
}Você não poderá editar arquivos SVG arbitrários - apenas aqueles que foram criados com draw.io ou nesta extensão!
Você pode abrir o mesmo arquivo *.drawio com o editor de draw.io e como arquivo XML. Eles são sincronizados, para que você possa alternar entre eles como gosta. Isso é super prático se você deseja usar o Find/Substituir para renomear o texto ou outros recursos do código VS para acelerar o processo de criação/edição do diagrama. Use a View: Reopen Editor With... comando para alternar entre o texto ou o editor de draw.io. Você pode abrir vários editores para o mesmo arquivo. No entanto, isso não faz muito sentido para os arquivos SVG, pois o diagrama de desenho.io é armazenado em seus metadados.

Se você gosta desta extensão, também pode gostar das minhas outras extensões: