Posso criar Diagramas com Visual Studio Code?!
Tags: vscode, webdev, programming, tips
Published: 2020-05-12 15:24:51

---
title: Posso criar Diagramas com Visual Studio Code?!
published: true
description: Na dica de hoje falaremos um pouco sobre a extensão chamado Draw.io que te permite criar diagramas classe no Visual Studio Code!
series: Tips & Tricks com Visual Studio Code
tags: vscode, webdev, programming, tips
---

Fala Coders! Tudo certo? 😃

A partir de hoje começarei uma série de dicas, que no futuro próximo se tornará uma série de vídeos de 2 minutos à 10 minutos, ensinando dicas e truques sensacionais relacionado ao **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=devto-blog-gllemos)**
Então fiquem ligados que muito em breve estarei divulgando a série em forma de vídeos aqui para todos vocês! 😄

Vamos a dica de hoje!

## Posso criar Diagramas com Vs Code?!

E a resposta a essa pergunta é.... **SIM**. Estranho dizer isso, mas sim. Tanto que recentemente eu dei um Repost um tweet sobre essa extensão. E a minha reação quando eu vi esse tweet foi... 😱😱😱

{% twitter 1260071088991752193 %}

E hoje vamos explicar um pouco sobre essa extensão!

## O que é Draw.io?

**[Draw.io](https://app.diagrams.net/)** é uma plataforma bastante conhecida por várias pessoas desenvolvedoras para criar inúmeros tipos de Diagramas, sejam eles de Classe, Mapa, Charts, Flowcharts, UML, Tables, Org Chart e tantos outros!

[![image-01.png](https://i.postimg.cc/fbMwVNN9/image-01.png)](https://postimg.cc/cv5qzP6x)

O mais interessante dessa plataforma é que é totalmente gratuita. E você fazer o que você deseja dentro dessa plataforma. Assim que fica essa dica, caso não conheçam!

Vejam uma imagem examplo de um Diagrama de UML dessa plataforma incrível:

[![image-02.png](https://i.postimg.cc/sgTVGLDH/image-02.png)](https://postimg.cc/tsV0L26F)

## Extensão - **[Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio&WT.mc_id=devto-blog-gllemos)**


Sim! E possui uma baita extensão para isso! E simplesmente tudo o que você pode fazer no **[Draw.io](https://app.diagrams.net/)** você pode simplesmente fazer dentro do **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=devto-blog-gllemos)**

Dêem uma olhada nessa demo incrível!

[![Demo Draw.io Integration](https://raw.githubusercontent.com/hediet/vscode-drawio/master/docs/demo.gif)](https://postimg.cc/hfy6rq5Y)

A parte mais legal é que a extensão **[Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio&WT.mc_id=devto-blog-gllemos)** te permite fazer edições dos arquivos como xml ou pela própria extensão.
Pode usar uma versão offline da extensão por default.

[![Demo Draw.io Integration](https://raw.githubusercontent.com/hediet/vscode-drawio/master/docs/drawio-xml.gif)](https://postimg.cc/hfy6rq5Y)

Você também pode salvar seus arquivos e diagramas em .png, o que deixa mais versátil caso você deseja usar um determinado diagrama para uma apresentação, por exemplo. 
Essa feature, conforme explicado na documentação da extensão está na sua versão preview! Deem uma olhada nessa demo também!

[![Demo Draw.io Integration](https://raw.githubusercontent.com/hediet/vscode-drawio/master/docs/drawio-png.gif)](https://postimg.cc/hfy6rq5Y)

Se desejam baixar e instalar para fazer experimentos direto da sua máquina e Visual Studio Code, deixo aqui o link da extensão para que vocês possam dar uma olhada nas demais features e informações sobre o Draw.io!

[![Draw.io Integration](https://i.postimg.cc/pd1zCkkq/Screen-Shot-05-12-20-at-11-54-AM.png)](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio&WT.mc_id=devto-blog-gllemos)

## Palavras Finais

Podemos fazer muitas coisas legais com várias extensões interessantes disponíveis no Visual Studio Code! Entre elas o Draw.io. Claro que ainda não existe feature para criar um CRUD completo com uma determinada tecnologia! 😆😆😆

Mas, com as inúmeras extensões disponíveis e criadas por toda a Comunidade em todo planeta, nos ajuda a tornar a nossa nada fácil vida mais tranquila e fácil!

Deixo aqui com vocês alguns recursos interessantes sobre o Visual Studio Code:

* ✅ **[Desenvolver aplicativos Web com o Visual Studio Code](https://docs.microsoft.com/pt-br/learn/modules/develop-web-apps-with-vs-code/?WT.mc_id=devto-blog-gllemos)**

* ✅ **[Documentação Oficial do Visual Studio Code](https://code.visualstudio.com/docs?WT.mc_id=devto-blog-gllemos)**

* ✅ **[tutorial Desenvolvimento Remoto](https://code.visualstudio.com/docs/remote/remote-tutorials?WT.mc_id=devto-blog-gllemos)**

* ✅ **[Canal Oficial do Visual Studio Code](https://www.youtube.com/channel/UCs5Y5_7XK8HLDX0SLNwkd3w/videos)**

* ✅ **[Markplace Extensions](https://marketplace.visualstudio.com/VSCode?WT.mc_id=devto-blog-gllemos)**

* ✅ **[Vários Cursos do Visual Studio Code](https://docs.microsoft.com/learn/browse/?term=code&WT.mc_id=devto-blog-gllemos)**

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

Nos vemos! Até a próxima pessoal! 😍