Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Draw.io intégré à VS Code : créez des diagrammes directement dans l'EDI
Avec cette extension open source

Le , par Coriolan

88PARTAGES

25  0 
Si vous étiez en quête d’un outil complet et gratuit pour réaliser vos diagrammes, alors vous serez heureux de savoir que l’excellent Draw.io a désormais une extension VS Code, l’éditeur de code extensible développé par Microsoft. Ce soft simple d’utilisation pouvait auparavant être utilisé en ligne ou via les applications desktop. Son interface intuitive et le nombre étonnant de modèles dont il regorge ont contribué à sa popularité, mais le fait qu’il soit open source et gratuit y sont aussi pour quelque chose.

Intégration de Draw.io à VS Code

« Serions-nous allés trop loin ? », ironise un développeur à propos de l'extension, ce commentaire à lui seul illustre l'ingéniosité de cet outil. Désormais, si vous souhaitez refaire un organigramme ou dresser une carte de votre réseau domestique, vous pouvez le faire sans quitter l’éditeur de code et même sans connexion à Internet.

Voici les principales fonctionnalités offertes par Draw.io dans VS Code :

  • Éditer les fichiers .drawio ou .dio dans l’éditeur de Draw.io en tant que XML ou les deux ;
  • Pour créer un nouveau diagramme, créez simplement un fichier vide *.drawio puis lancez-le ;
  • Utilise une version hors ligne de Draw.io par défaut ;
  • Un lien URL de Draw.io peut être configuré ;


Démo


Éditer des fichiers .drawio.png

Vous pouvez directement éditer et enregistrer des fichiers .drawio.png. Ces fichiers sont des images PNG parfaitement valides qui contiennent un diagramme Draw.io intégré. À Chaque fois que vous modifiez un tel fichier, la partie PNG est mise à jour. À noter que cette fonctionnalité n’est pas encore disponible du fait qu’elle s’appuie sur des API instables de VS Code, néanmoins le développeur promet une version stable dans la prochaine version de l’éditeur de code.


Modifier un diagramme et son XML côte à côte

Vous pouvez ouvrir un fichier *.drawio dans l’éditeur de Draw.io et en tant que fichier XML. Du fait de leur synchronisation, vous pouvez passer de l’un à l’autre sans aucun souci. Cette possibilité est pratique, car elle permet d’utiliser trouver/remplacer pour renommer du texte et faire usage de plein de fonctionnalités offertes par VS Code pour accélérer le processus de création et d’édition de votre diagramme. Utilisez la commande File: Reopen With... pour basculer entre le texte ou l'éditeur Draw.io. Vous pouvez ouvrir plusieurs éditeurs pour le même fichier.


À ce qu’il parait, cette extension open source est encore dans son état embryonnaire. Le développeur compte y ajouter d’autres fonctionnalités intéressantes, comme la possibilité de lire à travers le code et générer automatiquement un diagramme. Une telle option permettrait aux développeurs d’économiser du temps s’ils ont à documenter les flux de travail pour les clients par exemple.

Le développeur qui est aussi derrière Key Bindings Viewer pour VS Code, une autre extension sur laquelle il a travaillé pendant des mois, a informé qu’il lui a fallu deux jours seulement pour implémenter Draw.io pour VS Code, une prouesse achevée grâce à Electron. « Malgré ce que l'on dit sur l'électron, il rend ce genre de choses possibles », écrit un développeur ébloui par l’extension.

Source : Draw.io VS Code Integration

Et vous ?

Qu’en pensez-vous ?
En tant que développeur, avez-vous à réaliser des diagrammes ?
Pensez-vous que créer des diagrammes au sein de l'EDI pourrait vous être utile ?

Voir aussi

Visual Studio Code 1.45 est disponible et apporte des améliorations au débogueur JavaScript qui est en préversion, ainsi qu'une mise en évidence plus rapide des syntaxes

L'extension Docker pour Visual Studio Code passe en version 1.0, elle vient faciliter la création d'applications qui exploitent les conteneurs Docker

Microsoft publie .NET Core Uninstall Tool, un utilitaire de désinstallation pour les SDK et Runtimes .NET Core qui est pour le moment uniquement disponible sur Mac et Windows

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de tlt
Membre averti https://www.developpez.com
Le 11/05/2020 à 13:39
j'utilise draw.io en standalone depuis longtemps. ça va changer mes habitudes mais je vais le tester.
1  0 
Avatar de dosy07
Nouveau membre du Club https://www.developpez.com
Le 12/05/2020 à 11:56
Bonjour,

Je suis l'auteur de Flowcharting, plugin sous Grafana permettant d'intégrer et de monitorer des architectures et schema conçu sous draw.io sur Grafana.
Si il y en a que cela intéresse (je me fais de la pub)
https://github.com/algenty/grafana-flowcharting/
Le fait que celui ci s'intègre maintenant à VSCODE permet de reduire encore plus le lien entre la conception et l'exploitation.
Si Developpez.com veut faire un article là dessus, je suis dispo
PS : J'y gagne que de la gloire, Flowcharting est open source.

Bisous
Arnaud
1  0 
Avatar de superlevure
Candidat au Club https://www.developpez.com
Le 12/05/2020 à 14:59
Citation Envoyé par dosy07 Voir le message
Bonjour,

Je suis l'auteur de Flowcharting, plugin sous Grafana permettant d'intégrer et de monitorer des architectures et schema conçu sous draw.io sur Grafana.
Si il y en a que cela intéresse (je me fais de la pub)
https://github.com/algenty/grafana-flowcharting/
Le fait que celui ci s'intègre maintenant à VSCODE permet de reduire encore plus le lien entre la conception et l'exploitation.
Si Developpez.com veut faire un article là dessus, je suis dispo
PS : J'y gagne que de la gloire, Flowcharting est open source.

Bisous
Arnaud
Je me crée un compte pour l'occasion, je viens d'aller jeter un coup d’œil sur ton plugin Arnaud et je suis très impressionné par l'idée et la réalisation. Je mets de côté pour un futur usage, bravo & merci !

Laurent
1  0 
Avatar de dosy07
Nouveau membre du Club https://www.developpez.com
Le 22/05/2020 à 23:48
Bonjour Mister Nono,

C'est un plugin à intégrer à Grafana et pas l'inverse
1  0 
Avatar de emilie77
Membre averti https://www.developpez.com
Le 11/05/2020 à 14:36
Pour moi super. Je ne dois pas laisser vscode! Merci
0  0 
Avatar de strato35
Membre averti https://www.developpez.com
Le 11/05/2020 à 18:14
Hooo oui !! Hooo OUI !
Cette annonce me réjouis bien plus que le déconfinement

Je l'utilise très régulièrement hors vscode, déjà avec SQLTool j'ai pas besoin de sortir de l'IDE pour voir la base, là même plus besoin de sortir pour la dessiner.

Manque plus qu'un navigateur web capable de reproduire le comportement de tout les autres et je serais aux anges.
0  0 
Avatar de claudebueno
Membre régulier https://www.developpez.com
Le 11/05/2020 à 20:11
Bonne idée pour l'intégration dans VS Code.

Plus d'excuse pour ne plus faire les diagrammes de flux ou BDD.

Je ne le quitte plus : dev. front ou mobile, c'est devenu mon EDI favori
0  0 
Avatar de CoderInTheDark
Membre chevronné https://www.developpez.com
Le 14/05/2020 à 5:40
Ca peut faire des diagrammes de classes ?
Et de l'UML
0  0 
Avatar de Mister Nono
Membre expérimenté https://www.developpez.com
Le 15/05/2020 à 12:18
Bonjour,

Je suis l'auteur de Flowcharting, plugin sous Grafana permettant d'intégrer et de monitorer des architectures et schema conçu sous draw.io sur Grafana.
Si il y en a que cela intéresse (je me fais de la pub)
https://github.com/algenty/grafana-flowcharting/
Le fait que celui ci s'intègre maintenant à VSCODE permet de reduire encore plus le lien entre la conception et l'exploitation.
Si Developpez.com veut faire un article là dessus, je suis dispo
PS : J'y gagne que de la gloire, Flowcharting est open source.

Bisous
Arnaud
Bonjour Arnaud,

Peux-tu m'indiquez comment intégrer grafana-flowcharting à draw.io ?

J'ai bien lu la documentation mais je n'ai pas trouvé l'information.

Merci.

A+
0  0