Connecter Lucid à Visual Studio Code

Connectez VS Code à votre compte Lucid

Pour installer l'extension Lucid pour VS Code, veuillez suivre les étapes suivantes :

1. Ouvrez l'application VS Code.
2. Accédez à la boutique d’extensions en cliquant sur l’icône « Extensions » située dans la barre d’activités, à l’extrême gauche de la fenêtre.
   • Vous pouvez également appuyer sur Ctrl + Maj + X (PC) ou Cmd + Maj + X (Mac) pour utiliser un raccourci clavier.
3. Recherchez « Lucid » dans la boutique VS Code.
4. Cliquez sur « Installer » à droite de la fiche de l'extension.
5. Suivez les instructions pour vous connecter à votre compte Lucid.
6. Ouvrez la palette de commandes et saisissez « Lucid ».
   • Ou appuyez sur Cmd + Maj + P (PC) ou Ctrl + Maj + P (Mac).
7. Ouvrez un diagramme existant ou créez-en un nouveau.
8. Modifier le diagramme.
9. Cliquez sur « Enregistrer dans la base de code » en haut à droite de l'éditeur.
10. Sélectionnez le dossier de votre référentiel.
11. Suivez les instructions qui s'affichent sur votre appareil pour enregistrer.

Travailler avec les diagrammes Lucid dans VS Code

Créer et ouvrir un diagramme Lucid

Pour créer ou ouvrir des diagrammes, procédez comme suit dans VS Code :

1. Ouvrez la palette de commandes. 
   • Vous pouvez également appuyer sur Cmd + Maj + P (PC) ou Ctrl + Maj + P (Mac) pour utiliser le raccourci clavier.
2. Recherchez et sélectionnez « Lucid : Ouvrir un document » ou « Lucid : Créer un nouveau document ».
3. Dans le sélecteur de documents qui s'ouvre à côté de votre code source, sélectionnez votre document ou cliquez sur « Nouveau document ».

Mettre à jour un diagramme Lucid existant

Lorsque vous ne modifiez pas un diagramme Lucid, celui-ci s'affiche sous la forme d'une image statique enregistrée dans votre base de code. Pour modifier un diagramme existant directement dans VS Code, procédez comme suit :

1. Ouvrez un document Lucid dans VS Code.
2. Cliquez sur l'icône « » de Lucid située en haut de l'éditeur.
3. Modifiez votre document Lucid dans VS Code.
4. Cliquez sur « Enregistrer dans la base de code ».
5. Sélectionnez le dossier de votre référentiel.
6. Suivez les instructions qui s'affichent sur votre appareil pour enregistrer.

Pour vérifier que vos modifications ont bien été enregistrées, procédez comme suit :

1. Modifiez et enregistrez votre document Lucid dans VS Code.
2. Fermez l'onglet de l'éditeur Lucid et l'onglet d'aperçu du diagramme.
3. Dans l'Explorateur de fichiers, sélectionnez le fichier PNG de votre diagramme pour ouvrir l'aperçu mis à jour.

Convertir la syntaxe Mermaid en objets Lucid

Pour coller du contenu Mermaid provenant de Claude Code, Cursor, Codex ou de toute autre source et obtenir des formes modifiables dans un document Lucid, procédez comme suit :

1. Copiez le code brut de Mermaid.
2. Collez le code à n'importe quel endroit dans le panneau d'extension de Lucid.

Cette extension convertit le code en formes et lignes Lucid standard et modifiables.

Synchroniser les modifications apportées dans l'éditeur Web de Lucid vers VS Code

Pour vous assurer que votre aperçu dans VS Code reflète vos dernières modifications dans Lucid, veuillez suivre les étapes suivantes :

1. Ouvrez un document Lucid dans VS Code.
2. Cliquez sur l'icône « Ouvrir » (lien externe) située en haut de l'éditeur.
3. Suivez les instructions pour ouvrir la version Web de Lucid.
4. Dans la fenêtre contextuelle de la version web de Lucid qui s'affiche, modifiez votre diagramme.
5. Fermez la version Web.
6. Revenez à VS Code.
7. Dans l'explorateur de fichiers de VS Code, sélectionnez n'importe quel autre fichier, puis cliquez à nouveau sur le fichier PNG de votre diagramme pour actualiser l'affichage.
8. Cliquez sur « Mettre à jour le fichier PNG Lucid », en bas à gauche de l'éditeur, pour générer la dernière version.

Enregistrez les schémas dans votre base de code

Enregistrez une image au format PNG et un fichier de référence léger (.lucid) directement dans votre dépôt local afin de pouvoir les valider avec votre code. Voici comment procéder :

1. Modifiez le canevas directement dans VS Code.
2. Sélectionnez « Enregistrer dans la base de code » en haut à droite du menu de l'extension.
3. Sélectionnez le dossier de votre référentiel.
4. Suivez les instructions qui s'affichent sur votre appareil pour enregistrer.

Limites de l'éditeur VS Code

Grâce à l'expérience intégrée à l'éditeur, vous disposez d'un sous-ensemble ciblé de l'éditeur Lucid en ligne, spécialement conçu pour permettre une consultation et des mises à jour rapides directement à côté de votre code. Pour accéder à l'ensemble des fonctionnalités, y compris celles répertoriées dans le tableau ci-dessous, ouvrez votre document dans la version Web de Lucid.

FAQ

Avec quelle version de VS Code Lucid est-il compatible ?
Lucid pour VS Code est compatible avec toutes les installations standard de VS Code prenant en charge la version 1.82.0 ou supérieure du moteur VS Code.

Ai-je besoin d'un compte Lucid pour utiliser l'extension VS Code ?
Oui, vous devez disposer d'un compte Lucid actif. L'utilisation de l'extension est soumise aux Conditions générales d'utilisation et à la Politique de confidentialité de Lucid, qui s'appliquent à votre utilisation de l'extension, mais non à votre utilisation de toute application non Lucid (telle que définie dans nos Conditions générales d'utilisation) en lien avec l'extension.

Ressources

Lucid fonctionne désormais au sein de VS Code

Donnez votre avis sur cet article