Diagramma come codice con Mermaid in Lucidchart

Scritto da:  Shanna S
Ultimo aggiornamento:  

Usa il diagramma come codice per generare un diagramma Lucidchart utilizzando Mermaid. Una volta scritto il codice Mermaid, puoi generare automaticamente un diagramma sul tuo documento Lucid.

Il codice Mermaid inserito per generare un diagramma è compatibile solo con la lingua inglese. Se stai lavorando in Lucid con un'altra lingua, il codice dovrà essere tradotto in inglese.

Disponibilità del piano: Individuale, Teame Aziendale.

Accedi al diagramma come menu del codice

Per accedere al menu del diagramma come codice in Lucidchart, procedi nel seguente modo:

  1. Seleziona diagramma-come-codice-icona-in-Lucidchart.jpg l'icona Diagramma come codice dalla barra degli strumenti principale sul lato sinistro dell'area di lavoro.

Genera un diagramma

Acquisisci familiarità con il diagramma come processo di codice sfruttando uno degli esempi forniti per ogni tipo di diagramma supportato. Quando sei pronto, genera un diagramma scrivendo il tuo codice Mermaid.

Nota: Se un diagramma non viene generato e vedi un "Errore di sintassi. Per favore, controlla la sintassi." messaggio sotto il diagramma come editor di codice, usa invece i numeri di riga e colonna forniti per assicurarti che il codice Mermaid sia formattato correttamente e riprova.

Utilizzare un esempio fornito

Per creare un diagramma utilizzando gli esempi forniti, attenersi alla seguente procedura dal menu diagramma come codice:

  1. Seleziona +Nuovo diagramma sirena.
  2. Nella parte inferiore dell'editor fornito, fai clic su una delle opzioni di esempio.
  3. Il codice verrà aggiunto automaticamente all'editor per il tipo di esempio selezionato.
  4. Modificare il codice di esempio in base alle esigenze.
  5. Fare clic su Genera.

Il diagramma verrà generato sul canvas.

diagramma-as-code-with-Mermaid-in-Lucidchart-diagramma-as-code-with-Mermaid-in-Lucidchart.gif

Crea da zero usando Mermaid

Per creare un nuovo diagramma da zero utilizzando il codice Mermaid, segui questi passaggi dal menu diagramma come codice:

  1. Seleziona +Nuovo diagramma sirena.
  2. Digita il tuo codice nell'editor fornito.
  3. Fare clic su Genera.

Il diagramma verrà generato sul canvas.

diagramma-di-flusso-co-di-mermaid-in-Lucidchart.gif

Ulteriori informazioni: Per istruzioni su come iniziare a usare Mermaid, consulta questa guida per l'utente di Mermaid dal centro assistenza Mermaid. Il link fornito ti porta fuori dal centro assistenza Lucid e non possiamo garantire l'accuratezza del contenuto.

Modificare un diagramma

Un diagramma generato dal codice viene visualizzato come immagine sul canvas e deve essere aggiornato aprendo e modificando il codice. Per farlo:

  1. Aprire l'editor di codice associato utilizzando uno dei modi seguenti:
    • Fare clic sul diagramma nella canvas.
    • Passare al diagramma come menu del codice, scorrere e selezionare il diagramma che si desidera modificare.
  2. Fai clic sull'editor e apporta le modifiche.
    • Mentre modifichi, il diagramma sulla tela si aggiornerà in tempo reale.

Il diagramma verrà aggiornato il canvas.

Tipi di diagramma supportati

I seguenti tipi di diagramma sono supportati utilizzando il codice Mermaid:

  • Classe: mappare la struttura di un particolare sistema modellandone le classi, gli attributi, le operazioni e le relazioni tra gli oggetti.
  • C4: Sfrutta i quattro livelli di modelli (contesto, contenitori, componenti e codice) a seconda del tuo pubblico.
  • Relazione tra entità: rappresenta visivamente un database per mostrare le relazioni tra i campi.
  • Diagramma di flusso: crea diagrammi di flusso facili da seguire che coprono sistemi e processi complessi.
  • Gantt: Rappresentare visivamente il programma e l'avanzamento nella gestione di un progetto.
  • Ishikawa: Costruire diagramma a spina di pesce per mappare visivamente le relazioni causa-effetto durante l'analisi della causa radice.
  • Mappa ad albero annidata: Visualizza strutture dati gerarchiche usando rettangoli annidati.
  • Grafico radar: Crea un grafico per confrontare più variabili quantitative su una griglia radiale.
  • Sequenza: rappresenta i processi e gli oggetti che vivono contemporaneamente e i messaggi scambiati tra di loro per eseguire una funzione, prima che la linea di vita finisca.
  • Stato: crea un diagramma comportamentale per mostrare le transizioni tra i vari oggetti.
  • Grafico XY: Crea diagrammi di linee, barre o scatter completi per visualizzare le relazioni tra i punti dati.

Ulteriori informazioni: Per saperne di più sulla sintassi Mermaid e su come utilizzare il diagramma supportato in Lucidchart, dai un'occhiata a questo post della community di Lucid

FAQ

Quale versione di Mermaid è supportata da Lucidchart? 
Lucidchart è ottimizzato per supportare la versione 11.14 di Mermaid. 

Come posso stilizzare e formattare un diagramma che ho generato usando il codice della sirena? 
Quando generi un diagramma in Lucid usando il codice Mermaid, viene visualizzato come immagine sull'area di disegno. Per modificare lo stile e il formato del tuo diagramma, includi direttamente la sintassi dello stile della Sirena nel codice.

Lascia un feedback su questo articolo

Hai un feedback su questo articolo? Raccontaci la tua esperienza qui

Hai trovato quello che stavi cercando?

Hai ancora una domanda o vuoi condividere ciò che hai imparato? Visita il nostro Community   per ricevere aiuto e collaborare con gli altri.