Ekstensi tidak resmi ini mengintegrasikan draw.io (juga dikenal sebagai diagrams.net) ke dalam kode VS.
Disebutkan dalam blog resmi diagrams.net.
.drawio , .dio , .drawio.svg atau .drawio.png file di editor draw.io.*.drawio , *.drawio.svg atau *.drawio.png dan buka..drawio.svg adalah file .svg valid yang dapat disematkan dalam file readme github! Tidak diperlukan ekspor..drawio.png adalah file .png yang valid! Tidak diperlukan ekspor. Anda harus menggunakan .svg meskipun memungkinkan - mereka terlihat jauh lebih baik!Draw.io: Convert To... command.
Anda dapat secara langsung mengedit dan menyimpan file .drawio.svg dan .drawio.png . File-file ini sangat valid svg/png-gambar yang berisi diagram draw.io tertanam. Setiap kali Anda mengedit file seperti itu, bagian SVG/PNG dari file itu tetap up to date.
Logo ekstensi ini adalah file .drawio.png yang telah dibuat dengan ekstensi itu sendiri!

Jika Diffs penting bagi Anda, Anda harus lebih suka .drawio dan menghindari diagram .drawio.png .
Dengan versi 1.0 dari ekstensi ini, dukungan luas untuk VS Code Liveshare telah ditambahkan. Anda sekarang dapat mengedit atau menyajikan diagram draw.io Anda dari jarak jauh, sambil melihat kursor dan seleksi masing -masing peserta! Ini dapat digunakan untuk mendiskusikan, meninjau, atau melakukan brainstorming diagram. Dengan alat menggambar tangan bebas draw.io dan dukungan lateks terintegrasi, ekstensi ini menjadi solusi papan tulis canggih yang dapat digunakan untuk wawancara kode jarak jauh!

Secara internal, ekstensi ini menyinkronkan diagram draw.io dengan dokumen teks. Dokumen -dokumen teks ini dibagikan oleh Liveshare. Karena Liveshare tidak memiliki pemahaman tentang teks, konflik modifikasi dapat terjadi pada modifikasi simultan.
Di bilah status, Anda dapat mengaktifkan atau menonaktifkan fitur tautan kode. Jika diaktifkan dan Anda mengklik dua kali pada node yang labelnya dimulai dengan # , Anda akan melakukan pencarian ruang kerja untuk simbol yang cocok dengan label lainnya.
Jika Anda memiliki node berlabel #MyClass dan kelas nama MyClass , Anda akan melompat ke sumbernya jika Anda mengklik dua kali node!
Harap dicatat bahwa Anda harus membuka setidaknya satu file proyek yang berisi simbol. Jika tidak, VS Code tidak akan mempertimbangkan proyek ini saat mencari simbol. File ini sendiri tidak harus mengandung simbol.
Berkat sponsor GitHub terbaru saya, fitur ini adalah open source dan tersedia secara bebas sekarang.
Kiat : Jika Anda membuka editor draw.io ke sisi kanan (yaitu kolom editor kedua) dan navigasikan ke simbol, diagram akan tetap terlihat.

Tema "Atlas"

Tema "Kennedy"

Tema "Min"

Tema "Gelap"

.svg file dengan editor draw.io Secara default, ekstensi ini hanya menangani file *.drawio.svg . Tambahkan ini ke file VS Code settings.json jika Anda ingin mengaitkannya dengan file .svg :
"workbench.editorAssociations" : {
"*.svg" : " hediet.vscode-drawio-text " ,
}Anda tidak akan dapat mengedit file SVG sewenang -wenang - hanya yang telah dibuat dengan draw.io atau ekstensi ini!
Anda dapat membuka file *.drawio yang sama dengan editor draw.io dan sebagai file xml. Mereka disinkronkan, sehingga Anda dapat beralih di antara mereka seperti yang Anda suka. Ini sangat praktis jika Anda ingin menggunakan Temukan/Ganti untuk mengganti nama teks atau fitur lain dari kode VS untuk mempercepat proses pembuatan/edit diagram Anda. Gunakan View: Reopen Editor With... perintah untuk beralih antara teks atau editor draw.io. Anda dapat membuka beberapa editor untuk file yang sama. Ini tidak masuk akal untuk file SVG, karena diagram draw.io disimpan dalam metadata -nya.

Jika Anda menyukai ekstensi ini, Anda mungkin juga menyukai ekstensi saya yang lain: