Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités

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

    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
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre averti
    j'utilise draw.io en standalone depuis longtemps. ça va changer mes habitudes mais je vais le tester.

  3. #3
    Membre averti
    Pour moi super. Je ne dois pas laisser vscode! Merci

  4. #4
    Membre averti
    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.

  5. #5
    Membre régulier
    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
    Ma citation favorite : " Ce n’est pas parce que les choses sont difficiles que nous n’osons pas, c’est parce que nous n’osons pas qu’elles sont difficiles. "

    Blog perso
    : www.claudebueno.com

  6. #6
    Nouveau membre du Club
    Et flowcharting, vous connaissez ?
    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

  7. #7
    Candidat au Club
    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

  8. #8
    Membre chevronné
    Ca peut faire des diagrammes de classes ?
    Et de l'UML
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  9. #9
    Membre expérimenté

    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+
    La connaissance ne sert que si elle est partagée.
    http://ms2i.net

  10. #10
    Nouveau membre du Club
    Bonjour Mister Nono,

    C'est un plugin à intégrer à Grafana et pas l'inverse