Modifica i documenti Lucid all'interno del codice di Visual Studio

Connetti VS Code al tuo account Lucid

Per installare l'estensione Lucid per VS Code, segui questi passaggi:

1. Apri l'applicazione VS Code.
2. Naviga nel Marketplace delle Estensioni cliccando sull'icona delle Estensioni nella barra attività sul lato sinistro della finestra.
   • Oppure premi Ctrl + Shift + X (PC) oppure Cmd + Shift + X (Mac) per usare una scorciatoia da tastiera.
3. Cerca "lucid" nel mercato VS Code.
4. Clicca su Installa sul lato destro della scheda di prolunga.
5. Segui il prompt per accedere al tuo account Lucid.
6. Apri la Tavolozza dei Comandi e digita "Lucid".
   • Oppure premi Cmd + Shift + P (PC) oppure Ctrl + Shift + P (Mac).
7. Apri un diagramma esistente o creane uno nuovo.
8. Modifica il tuo diagramma.
9. Clicca su Salva in codice in alto a destra dell'editor.
10. Seleziona la cartella del tuo repository.
11. Segui le istruzioni sul tuo dispositivo per salvare.

Lavoro con diagrammi lucidi in VS Code

Crea e apri un diagramma lucido

Per creare o aprire diagrammi, segui questi passaggi all'interno di VS Code:

1. Apri la tavolozza dei comandi. 
   • Oppure premi Cmd + Shift + P (PC) o Ctrl + Shift + P (Mac) per usare la scorciatoia da tastiera.
2. Cerca e seleziona Lucid: Apri Documento o Lucid: Crea Nuovo Documento.
3. Dal selezionatore di documenti che si apre accanto al tuo codice sorgente, seleziona il tuo documento o clicca su Nuovo Documento.

Aggiornare un diagramma lucido esistente

Quando non modifichi un diagramma Lucid, appare come un'immagine statica salvata nel tuo codebase. Per modificare un diagramma esistente direttamente all'interno di VS Code, segui questi passaggi:

1. Apri un documento Lucid in VS Code.
2. Clicca sull'icona Lucid in alto nell'editor.
3. Modifica il tuo documento Lucid in VS Code.
4. Clicca su Salva nel codice base.
5. Seleziona la cartella del tuo repository.
6. Segui le istruzioni sul tuo dispositivo per salvare.

Per confermare che i tuoi aggiornamenti sono stati salvati con successo, segui questi passaggi:

1. Modifica e salva il tuo documento Lucid in VS Code.
2. Chiudi la scheda editor di Lucid e la scheda di anteprima di diagramma.
3. Nell'Esplora file, seleziona il file PNG del tuo diagramma per aprire l'anteprima aggiornata.

Converti la sintassi della sirena in oggetti lucidi

Per incollare Sirena da Claude Code, Cursor, Codex o da qualsiasi altra parte e ottenere forme modificabili in un documento Lucid, segui questi passaggi:

1. Copia il grezzo codice della sirena.
2. Incolla il codice ovunque nel pannello di estensione di Lucid.

L'estensione converte il codice in forme e righe Lucid standard e modificabili.

Converti il codice di Mermaid nei file del tuo progetto in Lucid

L'estensione di codice Lucid for VS può rilevare Diagramma Mermaid nei file del tuo progetto e convertirli in documenti Lucid. Funziona con i seguenti tipi di file:

• .md e .mdx: L'estensione rileva ed elabora ogni blocco di codice Mermaid nel file, senza limiti al numero di blocchi.
• .mmd: L'estensione tratta l'intero file come un unico diagramma.

Per convertire Mermaid da un file, segui questi passaggi in codice VS:

1. In VS Code, apri un .md, .mdx, o .mmd che contiene codice della Sirena.
2. Clicca su Converti in lucido. 
   • In un .md oppure .mdx file, appare in linea appena sopra ogni blocco di codice della Sirena. 
   • In un .mmd File, appare in cima al file.

L'estensione valida la sintassi della tua Sirena prima dell'esportazione. Se rileva un errore, evidenzia il problema e annulla il trasferimento a Lucid. Risolvi l'errore di sintassi, poi clicca di nuovo su Converti in Lucido .

Una volta convalidato, l'estensione crea un nuovo documento Lucid per quel diagramma insieme a due file locali salvati nella stessa cartella del file sorgente:

• Un diagramma esportato nel formato scelto da voi (PNG, SVG o JSON)

• Un file di riferimento .lucid

Le conversioni vengono gestite individualmente—ogni blocco di codice Sirena o .mmd il file genera un proprio documento Lucid. Per esportare più diagrammi dallo stesso file, clicca su Converti in Lucid sopra ogni diagramma che vuoi convertire.

Come vengono gestiti i tuoi file

• Scoperta locale: Quando apri un file supportato, l'estensione lo scansiona completamente sul tuo dispositivo per rilevare i blocchi di codice di Mermaid. Nessun dato lascia la tua macchina durante questo passaggio.
• Elaborazione on-demand: il contenuto dei tuoi file rimane strettamente locale fino a quando non avvii l'esportazione. I dati vengono inviati a Lucid solo dopo aver cliccato esplicitamente su Converti in Lucid.
• Validazione pre-upload: L'estensione valida localmente la sintassi della tua Sirena su tutti i tipi di file supportati. Se la sintassi contiene errori, il processo si interrompe immediatamente e nulla viene trasmesso.

Modifiche di sincronizzazione dall'editor web di Lucid a VS Code

Per assicurarti che la tua anteprima di VS Code rifletta le tue ultime modifiche in Lucid, segui questi passaggi:

1. Apri un documento Lucid in VS Code.
2. Clicca sull'icona di apertura del link esterno in alto nell'editor.
3. Segui le istruzioni per aprire la versione web di Lucid.
4. Dalla finestra pop-up della versione web di Lucid che appare, modifica il tuo diagramma.
5. Chiudi la versione web.
6. Torna a VS Code.
7. Nell'Esplora file VS Code, seleziona un altro file, poi torna sul file PNG del tuo diagramma per aggiornare la visualizzazione.
8. Clicca su Aggiorna Lucid PNG in basso a sinistra nell'editor per visualizzare l'ultima versione.

Salva i diagrammi nel tuo codice

Salva un'immagine PNG e un file di riferimento leggero (.lucid) direttamente nel repository locale così puoi compilarli con il tuo codice. Ecco come:

1. Modifica la tela direttamente all'interno di VS Code.
2. Seleziona Salva nel codice dalla parte in alto a destra del menu delle estensioni.
3. Seleziona la cartella del tuo repository.
4. Segui le istruzioni sul tuo dispositivo per salvare.

Limitazioni dell'editor VS Code

Con l'in-Esperienza dell'editore, ottieni un sottoinsieme focalizzato dell'editor web Lucid, pensato per una visione rapida e aggiornamenti direttamente insieme al tuo codice. Per accedere a tutte le funzionalità, incluse quelle elencate nella tabella sottostante, apri il tuo documento nella versione web di Lucid.

Ho ancora bisogno di aiuto

FAQ

Risorse

Per saperne di più su questa funzione, esplora le risorse aggiuntive qui sotto. Queste risorse sono disponibili solo in inglese.

Post sulla comunità

Lucid ora funziona all'interno di VS Code

Dai un feedback su questo articolo