IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

Visual Studio Discussion :

Draw.io intégré à VS Code : créez des diagrammes directement dans l'EDI


Sujet :

Visual Studio

  1. #1
    Expert éminent sénior
    Avatar de Coriolan
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2016
    Messages
    701
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2016
    Messages : 701
    Points : 51 807
    Points
    51 807
    Par défaut 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

    Nom : demo.gif
Affichages : 68446
Taille : 999,5 Ko

    É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.

    Nom : drawio-png.gif
Affichages : 10620
Taille : 897,3 Ko

    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.

    Nom : drawio-xml.gif
Affichages : 10918
Taille : 1,02 Mo

    À 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
    tlt
    tlt est déconnecté
    Membre averti Avatar de tlt
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juillet 2004
    Messages
    198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Madagascar

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 198
    Points : 403
    Points
    403
    Par défaut
    j'utilise draw.io en standalone depuis longtemps. ça va changer mes habitudes mais je vais le tester.

  3. #3
    Membre éprouvé
    Femme Profil pro
    Inscrit en
    juillet 2012
    Messages
    261
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Italie

    Informations forums :
    Inscription : juillet 2012
    Messages : 261
    Points : 987
    Points
    987
    Par défaut
    Pour moi super. Je ne dois pas laisser vscode! Merci

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2013
    Messages
    125
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2013
    Messages : 125
    Points : 660
    Points
    660
    Par défaut
    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
    Avatar de claudebueno
    Homme Profil pro
    Chef de projet en SSII
    Inscrit en
    octobre 2013
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Chef de projet en SSII

    Informations forums :
    Inscription : octobre 2013
    Messages : 30
    Points : 70
    Points
    70
    Billets dans le blog
    2
    Par défaut
    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
    Profil pro
    Inscrit en
    janvier 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2005
    Messages : 44
    Points : 36
    Points
    36
    Par défaut 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
    Homme Profil pro
    Ingé
    Inscrit en
    mai 2020
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingé

    Informations forums :
    Inscription : mai 2020
    Messages : 1
    Points : 2
    Points
    2
    Par défaut
    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 émérite

    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2013
    Messages
    1 004
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 1 004
    Points : 2 463
    Points
    2 463
    Par défaut
    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 chevronné Avatar de Mister Nono
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    septembre 2002
    Messages
    2 195
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Santé

    Informations forums :
    Inscription : septembre 2002
    Messages : 2 195
    Points : 1 825
    Points
    1 825
    Par défaut
    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
    Profil pro
    Inscrit en
    janvier 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2005
    Messages : 44
    Points : 36
    Points
    36
    Par défaut
    Bonjour Mister Nono,

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

Discussions similaires

  1. [AC-2007] PB dans code gestion des Pièce Jointes
    Par Tarro dans le forum VBA Access
    Réponses: 0
    Dernier message: 17/03/2010, 12h33
  2. Réponses: 5
    Dernier message: 22/12/2009, 14h09
  3. créez des video dans une page HTML
    Par brayndi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 11/12/2009, 17h52
  4. Code Lisp intégré dans Java
    Par belaidw dans le forum Général Java
    Réponses: 2
    Dernier message: 26/11/2007, 16h41
  5. Utiliser dans le code PPT des valeurs Excel
    Par Daejung dans le forum Powerpoint
    Réponses: 2
    Dernier message: 25/06/2007, 11h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo