Cette extension non officielle intègre Draw.io (également appelé diagrams.net) dans le code vs.
Mentionné dans le blog officiel des diagrammes.net.
.drawio , .dio , .drawio.svg ou .drawio.png dans l'éditeur Draw.io.*.drawio , *.drawio.svg ou *.drawio.png et ouvrez-le..drawio.svg sont des fichiers .svg valides qui peuvent être intégrés dans les fichiers GitHub Readme! Aucune exportation nécessaire..drawio.png sont des fichiers .png valides! Aucune exportation nécessaire. Vous devez utiliser .svg cependant chaque fois que possible - ils ont l'air beaucoup mieux!Draw.io: Convert To... commande.
Vous pouvez modifier directement et enregistrer les fichiers .drawio.svg et .drawio.png . Ces fichiers sont des images SVG / PNG parfaitement valides qui contiennent un diagramme Draw.io intégré. Chaque fois que vous modifiez un tel fichier, la partie SVG / PNG de ce fichier est tenue à jour.
Le logo de cette extension est un tel fichier .drawio.png qui a été créé avec l'extension elle-même!

Si les diffs sont importants pour vous, vous devez préférer .drawio et éviter les diagrammes .drawio.png .
Avec la version 1.0 de cette extension, une prise en charge approfondie de VS Code Liveshare a été ajoutée. Vous pouvez maintenant modifier ou présenter vos diagrammes Draw.io à distance, tout en voyant le curseur et la sélection de chaque participant! Cela peut être utilisé pour discuter, examiner ou réfléchir aux diagrammes. Avec l'outil de dessin à main levée de Draw.io et le support de latex intégré, cette extension devient une solution de tableau blanc avancé qui peut être utilisé pour des entretiens de code distant!

En interne, cette extension synchronise les diagrammes Draw.io avec des documents texte. Ces documents texte sont partagés par Liveshare. Comme Liveshare n'a aucune compréhension du texte, des conflits de modification peuvent se produire sur des modifications simultanées.
Dans la barre d'état, vous pouvez activer ou désactiver la fonction de liaison de code. S'il est activé et que vous double-cliquez sur un nœud dont l'étiquette commence par # , vous effectuez une recherche d'espace de travail pour un symbole correspondant au reste de l'étiquette.
Si vous avez un nœud étiqueté #MyClass et une classe de nom MyClass , vous sauterez à sa source si vous double-cliquez sur le nœud!
Veuillez noter que vous devez ouvrir au moins un fichier du projet qui contient le symbole. Sinon, le code vs ne tiendra pas compte de ce projet lors de la recherche de symboles. Ce fichier lui-même n'a cependant pas à contenir le symbole.
Grâce à mes derniers sponsors GitHub, cette fonctionnalité est open source et disponible gratuitement maintenant.
Astuce : si vous ouvrez l'éditeur Draw.io sur le côté droit (c'est-à-dire la deuxième colonne d'éditeur) et accédez à un symbole, le diagramme restera visible.

Thème "Atlas"

Thème "Kennedy"

Thème "min"

Thème "Dark"

.svg avec l'éditeur Draw.io Par défaut, cette extension ne gère que les fichiers *.drawio.svg . Ajoutez ceci à votre fichier VS Code settings.json si vous souhaitez l'associer avec des fichiers .svg :
"workbench.editorAssociations" : {
"*.svg" : " hediet.vscode-drawio-text " ,
}Vous ne pourrez cependant pas modifier des fichiers SVG arbitraires - seulement ceux qui ont été créés avec Draw.io ou cette extension!
Vous pouvez ouvrir le même fichier *.drawio avec l'éditeur Draw.io et le fichier XML. Ils sont synchronisés, vous pouvez donc basculer entre eux comme vous l'aimez. Ceci est super pratique si vous souhaitez utiliser Find / Remplacer pour renommer le texte ou d'autres fonctionnalités de Code vs pour accélérer votre processus de création / modification de diagramme. Utilisez la View: Reopen Editor With... Commande pour basculer entre le texte ou l'éditeur Draw.io. Vous pouvez ouvrir plusieurs éditeurs pour le même fichier. Cela n'a cependant pas beaucoup de sens pour les fichiers SVG, car le diagramme Draw.io est stocké dans ses métadonnées.

Si vous aimez cette extension, vous pourriez aussi aimer mes autres extensions: