vscode drawio

draw.io vs代碼集成

此非官方擴展名將draw.io（也稱為圖表）集成到VS代碼中。
在“官方圖”博客中提到。

特徵

• 編輯.drawio ， .dio ， .drawio.svg或.drawio.png文件中的draw.io編輯器中的文件。
  • 要創建一個新圖，只需創建一個空*.drawio ， *.drawio.svg或*.drawio.png文件並打開它。
  • .drawio.svg是有效的.svg文件，可以嵌入github readme文件中！無需出口。
  • .drawio.png是有效的.png文件！無需出口。您應該在可能的情況下使用.svg它們看起來好多了！
  • 要在不同格式之間轉換，請使用Draw.io: Convert To...命令。
• 默認情況下使用draw.io的離線版本。
• 有多個draw.io主題可用。
• 使用Liveshare與他人協作編輯圖表。
• 節點/邊緣可以與代碼跨度鏈接。

演示

到目前為止喜歡嗎？您可能還喜歡我的開源Chrome擴展名，可增強GitHub Markdown編輯器！

編輯.drawio.svg/.drawio.png文件

您可以直接編輯並保存.drawio.svg和.drawio.png文件。這些文件是包含嵌入式draw.io圖的完全有效的SVG/PNG圖像。每當您編輯此文件時，該文件的SVG/PNG部分將保持最新狀態。

此擴展程序的徽標是使用擴展程序本身創建的一個.drawio.png文件！

如果差異對您很重要，則應該更喜歡.drawio並避免.drawio.png圖。

合作編輯或現在圖

隨著此擴展版的1.0版，已經添加了對VS Code Liveshare的廣泛支持。現在，您可以在看到每個參與者的光標和選擇的同時遠程編輯或顯示您的draw.io圖！這可用於討論，審查或集思廣益圖。借助draw.io的徒手繪圖工具和集成的乳膠支持，該擴展名成為一種高級白板解決方案，可用於遠程代碼訪談！

在內部，此擴展名將draw.io圖與文本文檔同步。這些文本文檔由Liveshare共享。由於Liveshare對文本沒有理解，因此可能會在同時修改上發生修改衝突。

代碼鏈接功能

在狀態欄中，您可以啟用或禁用代碼鏈接功能。如果它已啟用，然後雙擊其標籤以#開頭的節點，則將執行與標籤其餘部分相匹配的符號的工作區搜索。

如果您的節點標有#MyClass和一類名稱MyClass ，則雙擊節點，您將跳到其源！

請注意，您必須至少打開包含符號的項目的一個文件。否則，在搜索符號時，VS代碼將不會考慮此項目。但是，此文件本身不必包含符號。

多虧了我最新的GitHub贊助商，此功能是開源的，現在可以自由使用。

提示：如果將draw.io編輯器打開到右側（即第二個編輯器列）並導航到符號，則該圖將保持可見。

主題

可用的draw.io主題

• 主題“ Atlas”

  

• 主題“肯尼迪”

  

• 主題“最低”

  

• 主題“黑暗”

  

與draw.io編輯器相關.svg文件

默認情況下，此擴展名僅處理*.drawio.svg文件。如果要將其與.svg文件相關聯，請將其添加到VS代碼settings.json中。

 "workbench.editorAssociations" : {
    "*.svg" : " hediet.vscode-drawio-text " ,
}

但是，您將無法編輯任意SVG文件 - 只有那些使用draw.io或此擴展名創建的文件！

編輯圖表及其XML並排編輯

您可以使用draw.io編輯器和XML文件打開相同的*.drawio文件。它們是同步的，因此您可以隨心所欲地在它們之間切換。如果您想使用查找/替換來重命名文本或VS代碼的其他功能來加快圖表創建/編輯過程，這將是非常實用的。使用View: Reopen Editor With...在文本或draw.io編輯器之間切換。您可以為同一文件打開多個編輯器。但是，這對於SVG文件並沒有多大意義，因為draw.io圖存儲在其元數據中。

貢獻者

• Henning Dieterichs，Github上的Hediet（主要貢獻者 /作者）
• VincentRouillé，Github上的Speedy37

另請參閱 /類似的擴展

• draw.io-此擴展名取決於draw.io的巨大作品。他們的嵌入功能可以實現此擴展！此擴展程序將最新版本的draw.io捆綁在一起。
• vscode-drawio by八百。

其他很酷的擴展

如果您喜歡此擴展名，則可能也喜歡我的其他擴展名：

• 調試可視化器：調試時可視化數據結構的擴展程序。
• 實時調試：此擴展程序可視化您的代碼的執行方式。