Se sei uno sviluppatore, probabilmente ti è capitato di sprecare ore trascinando e rilasciando forme per visualizzare sistemi complessi, faticando a organizzare i flussi di lavoro e passando da uno strumento all’altro, interrompendo così il tuo flusso di codice.
È noioso, inefficiente e non vale il tempo che ci dedichi.
Scopri Mermaid, uno strumento leggero e basato sul codice che trasforma una semplice sintassi in diagrammi di flusso di lavoro chiari e scalabili in pochi secondi. Niente interfaccia utente macchinosa. Niente incubi legati all’allineamento al pixel. Basta scrivere la logica e lasciare che Mermaid si occupi della parte visiva.
È un modo efficace per visualizzare il tuo flusso di lavoro. Come? Leggi questa guida dettagliata per scoprire tutto al riguardo!
❗️Perché la maggior parte dei diagrammi Mermaid smette di funzionare
Un esempio di diagramma ben strutturato può rivelarsi una scelta sbagliata: ecco il quadro di riferimento per scegliere quello giusto.
Cosa sono i diagrammi Mermaid? 🧜♀️
I diagrammi Mermaid sono diagrammi basati su codice generati direttamente dal testo, che eliminano la necessità di ricorrere a strumenti di progettazione che richiedono molto tempo. Utilizzano una sintassi ispirata al Markdown (una sintassi di testo normale che consente di aggiungere elementi di formattazione) per illustrare i processi.
Basta fornire istruzioni chiare e strutturate in formato testo e Mermaid tradurrà automaticamente il testo in un diagramma professionale. Questo rende Mermaid uno strumento potente per sviluppatori, redattori tecnici e project manager che vogliono concentrarsi sui contenuti e sulle funzionalità piuttosto che sulla formattazione.
Ecco un esempio di un semplice grafico a torta Mermaid:
Cosa rende Mermaid ancora migliore? È open source. Ciò significa che lo strumento continua a migliorare grazie agli aggiornamenti e alle nuove funzionalità/funzioni apportate dalla comunità.
✨ Curiosità: Mermaid deve il suo nome a una fonte di ispirazione davvero interessante! L'autore di Mermaid, Knut Sveidahl, ha tratto ispirazione dai suoi figli mentre guardavano " La sirenetta " a casa.
⭐ Modello in primo piano
Hai bisogno di un modello per un diagramma? Ottieni assistenza immediata con il modello di diagramma entità-relazione di ClickUp... Provalo subito!
Tipi di diagrammi Mermaid
Ecco i diversi tipi di diagrammi che puoi creare con Mermaid:
- Diagrammi di flusso: illustrano processi, flussi di lavoro o percorsi decisionali. I diagrammi di flusso sono ideali per scomporre i sistemi o spiegare la logica passaggio dopo passaggio
- Diagrammi di sequenza: mostrano le interazioni tra diversi componenti o partecipanti nel corso del tempo. I diagrammi di sequenza sono perfetti per visualizzare chiamate API, flussi di lavoro di sistema o azioni collaborative
- Diagrammi di Gantt: pianifica e monitora i progetti con i diagrammi di Gantt, che mettono in evidenza sequenze, attività e dipendenze
- Diagrammi di classe: rappresentano le strutture della programmazione orientata agli oggetti, tra cui classi, attributi e relazioni. Questi diagrammi sono ottimi per comprendere visivamente il proprio codice sorgente
- Grafici Git: visualizza i flussi di lavoro Git illustrando i rami, l'unione e la cronologia dei commit. È utile per i team che gestiscono sistemi di controllo delle versioni complessi
- Diagrammi ER: definiscono le relazioni tra le entità di un database. I diagrammi ER sono fondamentali per progettare schemi di database o comprendere le strutture dei dati
- Diagrammi del percorso dell’utente: mappa le esperienze degli utenti per visualizzare i punti di contatto, le azioni e le emozioni. Questi diagrammi aiutano i designer UX e i team di prodotto a migliorare il percorso dei clienti
- Grafici a torta: rappresentano rapidamente proporzioni e percentuali. I grafici a torta sono un modo efficace per presentare dati statistici o risultati di sondaggi
- Mappe mentali: organizza e struttura le idee in modo gerarchico. Le mappe mentali sono perfette per il brainstorming, la pianificazione e la semplificazione di argomenti complessi
Esempi popolari di diagrammi Mermaid
Ecco alcuni esempi comuni di diagrammi e come puoi utilizzare Mermaid per crearli:
1. Diagramma di flusso per il rilascio di un software
Questo diagramma di flusso mostra i punti decisionali per il deployment del codice in produzione a seconda che sia venerdì. Si apre con l’azione «Distribuisci in produzione» e conduce a un nodo decisionale che chiede: «È venerdì?». Se la risposta è «Sì», il flusso passa a «Non distribuire!». Altrimenti, procede a «Esegui deploy.sh per distribuire!». La sintassi «flowchart TD» indica che il diagramma deve scorrere dall’alto verso il basso.
💡 Consiglio da esperto: Se stai cercando un'alternativa alla creazione manuale di diagrammi di flusso con la sintassi Mermaid, valuta l'utilizzo di modelli di diagrammi di flusso o di strumenti dedicati alla loro creazione per semplificare il processo.
2. Diagramma di Gantt per il monitoraggio delle tempistiche dei progetti
Con Mermaid puoi anche creare diagrammi di Gantt. Questo esempio di diagramma di Gantt rappresenta visivamente la tempistica del progetto suddividendola in attività. Ogni attività ha una data di inizio, una data di fine e una durata, che mostrano le dipendenze e le sovrapposizioni tra di esse. Il diagramma offre una chiara panoramica della pianificazione del progetto, dello stato di avanzamento e delle scadenze.
3. Diagramma di sequenza per spiegare i flussi delle API
I diagrammi di sequenza aiutano a illustrare il flusso di messaggi o eventi tra i componenti di un sistema. Mappando ogni passaggio — come richieste, risposte o trigger — rendono facile capire come i componenti interagiscono, in quale ordine e come i dati fluiscono attraverso il sistema.
Questo diagramma di sequenza illustra il processo di autenticazione tramite nome utente/password e JSON Web Token (JWT). Rappresenta l’interazione tra tre entità: il client, il server e il database.
4. Diagramma ERD per progettare la struttura di un database
Un diagramma entità-relazione (ERD) visualizza le entità (come utenti, prodotti o ordini) all'interno di una struttura di database e le relazioni tra di esse (uno-a-molti, uno-a-uno o molti-a-molti).
Puoi creare facilmente un diagramma ER con il modello di diagramma entità-relazione di ClickUp. Il modello offre una struttura organizzata per visualizzare i database relazionali e mappare le relazioni logiche tra le varie entità.
Con questo modello potrai:
- Illustra strutture di dati complesse senza utilizzare alcun codice
- Riduci gli errori nelle strutture dei database
- Individua i potenziali problemi nel tuo database
I modelli di diagrammi di contesto possono anche aiutarti a delineare i confini e le interazioni del sistema prima di passare ai dettagli dello schema del database. Ad esempio, un diagramma di contesto potrebbe mostrare i clienti che effettuano ordini e i fornitori che aggiornano le scorte. Questo passaggio ti garantisce di comprendere il quadro generale prima di concentrarti sui dettagli.
5. Diagramma a corsie per visualizzare il flusso di lavoro del team
I diagrammi a corsie sono ideali per ripartire le attività tra team o reparti. È possibile assegnare ogni corsia a un team specifico, come progettazione, sviluppo o marketing. Ciò consente di visualizzare chi si occupa di cosa e come si verifica il flusso delle attività tra i vari team, assicurando che tutti comprendano le proprie responsabilità.
Utilizza il modello di diagramma a corsie di ClickUp per creare diagrammi di flusso chiari, gestendo al contempo priorità, scadenze e stati, al fine di ottenere un processo snello ed efficiente.
Questo modello ti aiuta a:
- Chiarire le responsabilità: assegna le attività a team o persone specifiche in modo che tutti conoscano il proprio ruolo. Esempio: il reparto marketing si occupa delle campagne; lo sviluppo si concentra sull’implementazione
- Ottimizza il passaggio delle attività: visualizza il flusso delle attività tra i team per garantire transizioni più fluide. Esempio: una funzionalità/funzione passa dalla fase di progettazione a quella di sviluppo, quindi al controllo qualità
- Individua le inefficienze: individua i colli di bottiglia o i ritardi per risolvere i problemi più rapidamente
- Semplifica la complessità: suddividi i flussi di lavoro complessi in passaggi chiari e facili da seguire
📖 Per saperne di più: I migliori software per diagrammi a corsie per terminare i tuoi progetti
6. Mappa mentale del progetto
Una mappa mentale è una rappresentazione visiva di idee o concetti che ruotano attorno a un tema centrale. Viene utilizzata per collegare idee correlate, strutturare o analizzare informazioni e delineare piani per i progetti.
Puoi creare una semplice mappa mentale per la pianificazione del progetto con il modello di mappatura del progetto di ClickUp. Ti aiuta a organizzare le attività del progetto, a identificare gli ostacoli e a effettuare il monitoraggio delle attività cardine.
Con questo modello potrai:
- Identifica le aree di sovrapposizione e i rischi del progetto
- Stima la durata e il budget del progetto
- Migliora la trasparenza e la responsabilità all’interno del team
Ora che hai visto quanto possano essere versatili i diagrammi Mermaid, è ora di salpare e metterli in pratica! Ti aiuteranno a organizzare le idee, a spiegare processi complessi e a collaborare con il tuo team.
📖 Per saperne di più: Come creare un diagramma a corsie in Visio?
I vantaggi dell’utilizzo di Mermaid per la creazione di diagrammi
Se sei uno sviluppatore, un project manager o una persona che apprezza la chiarezza visiva, ecco perché Mermaid si distingue:
✏️ I diagrammi in tutta semplicità
Dimentica le difficoltà legate alle forme e agli allineamenti degli strumenti tradizionali. Mermaid trasforma poche righe di testo in un diagramma curato. Niente più trascinamenti, rilasci o complicazioni: solo immagini chiare ed efficaci in pochi secondi.
🔗 Perfetta integrazione nel tuo flusso di lavoro
Mermaid si integra perfettamente con gli strumenti che già utilizzi. Non hai bisogno di nuovi software o plugin aggiuntivi. Funziona in modo nativo con piattaforme come GitHub, rendendo facile incorporare i diagrammi nella documentazione, nei piani dei progetti o nelle revisioni del codice.
📊 Documentazione visiva
Aggiornare diagrammi complessi per adattarli alle modifiche dei processi può essere un lavoro faticoso. Mermaid lo rende semplicissimo. Poiché i diagrammi vengono creati come codice, sono facili da modificare e aggiornare di pari passo con il tuo progetto. Ciò significa che puoi gestire il controllo delle versioni, modificare e aggiornare i tuoi diagrammi man mano che il tuo flusso di lavoro o la tua architettura si evolvono.
🎨 Facile personalizzazione
Mermaid ti offre opzioni di stile sufficienti per personalizzare i tuoi diagrammi, pur mantenendo la semplicità. Puoi modificare colori e layout senza perderti in infiniti menu di personalizzazione. Utilizza un tema in modalità scura per le presentazioni oppure modifica le forme e i colori dei nodi per allinearli al branding della tua azienda o alle esigenze del progetto.
🧠 Lo sapevi? Mermaid funziona interamente sui browser utilizzando JavaScript, il che lo rende leggero e indipendente dalla piattaforma. Non sono necessari rendering lato server né plugin aggiuntivi.
Come creare diagrammi Mermaid?
Segui questi semplici passaggi per creare i tuoi diagrammi Mermaid:
Passaggio 1: Decidi il tipo e lo scopo del tuo diagramma
Pensa a quale tipo di diagramma ti serve effettivamente. Stai creando un diagramma di flusso per illustrare un processo? Un diagramma Gantt per effettuare il monitoraggio dello stato di avanzamento di un progetto? Decidere il tipo e lo scopo del diagramma ti aiuta a rimanere concentrato e a scegliere la struttura più adatta al tuo diagramma.
Passaggio 2: Scrivi il codice Mermaid
Una volta deciso il tipo di diagramma che desideri, è il momento di scrivere il codice. La sintassi di Mermaid è semplicissima.
Ecco la sintassi di base per creare diagrammi Mermaid:
| Tipo di diagramma | Sintassi | Esempio |
| Diagramma di flusso | diagramma di flusso TDA –> B | diagramma di flusso TDA[Inizio] –> B[Processo] –> C[Fine] |
| Diagramma di sequenza | diagramma di sequenza, partecipante AA->>B: Messaggio | sequenceDiagram partecipante Un partecipante BA->>B: Ciao B->>A: Ciao! |
| Diagramma di Gantt | gantttitle Progetto Sezione 1A :a1, 01/01/2025, 30 giorni | gantttitle I miei diagrammi di Gantt Sezione Pianificazione Attività 1: a1, 01/01/2025, 10 giorni Attività 2: dopo a1, 15 giorni |
| Diagramma delle classi | classDiagramClassName : AttributeClassName : Method() | classDiagramclass CarCar : +start()Car : +stop() |
| Grafico a torta | pietitle Titolo del grafico “Slice A” : 30 | pietitle Frutta preferita: “Mela” : 40 “Banana” : 30 “Uva” : 30 |
| Diagramma entità-relazione | erDiagramEntity1 {Field1 stringa} | erDiagramCustomer {ID int, Name string}Order {OrderID int, CustomerID int} |
Passaggio 3: Apri l'editor live di Mermaid
Ora vai all’editor live di Mermaid. Incolla il codice che hai scritto nel pannello di sinistra e osserva il tuo diagramma apparire in tempo reale sul lato destro.
Passaggio 4: Modifica e perfeziona il tuo diagramma
Una volta che il tuo diagramma è pronto, puoi modificarlo secondo necessità. Aggiungi altri nodi e collegamenti, oppure modifica il layout per ottenere il risultato desiderato. L’editor in tempo reale mostra immediatamente tali modifiche, quindi è facile sperimentare e perfezionare il tuo diagramma.
Passaggio 5: copia il codice Markdown
Dopo aver completato il diagramma, copia il codice Markdown dall'editor in tempo reale. Si tratta del codice di testo che definisce il diagramma.
Troverai il codice in fondo al pannello di sinistra.
Passaggio 6: Incolla il codice Markdown
Una volta che il tuo diagramma è pronto, è il momento di inserirlo nel contesto più ampio.
Puoi incollare il codice Mermaid nei file Markdown su GitHub o Gitlab e la piattaforma genererà automaticamente il diagramma quando visualizzi il file in un repository. Si tratta di un'ottima opzione se stai lavorando a un progetto collaborativo e hai bisogno di un modo semplice per integrare i diagrammi direttamente nel tuo codice.
Tuttavia, se stai cercando un software versatile per la creazione di diagrammi di flusso di lavoro che ti consenta di collegare i tuoi diagrammi visivi al tuo flusso di lavoro effettivo, prova ClickUp. È l’app completa per il lavoro grazie alla quale puoi trasformare le tue idee in attività concrete, definire roadmap di progetto, creare documenti, visualizzare i processi e fare molto altro ancora.
Crea diagrammi Mermaid in ClickUp
Puoi copiare il codice del tuo diagramma Mermaid e incollarlo in ClickUp Docs per visualizzare processi, flussi di lavoro o Sequenze direttamente nel contesto del tuo progetto.
Che tu stia sviluppando un piano per il progetto o organizzando le tue idee, ClickUp Docs è lo strumento perfetto per tenere tutto in un unico posto.
Vai su ClickUp Docs, nella pagina in cui desideri aggiungere il tuo diagramma. Ora, digita il /comando nel tuo documento per aprire il menu e seleziona Markdown. Questo è il punto di partenza per incorporare ogni tipo di contenuto, e i diagrammi Mermaid si inseriscono perfettamente!
Una volta copiato il codice del diagramma Mermaid dall’editor Mermaid Live, incollalo nel blocco Markdown che hai creato.
Non preoccuparti della formattazione: ci pensa ClickUp al posto tuo. Dopo aver inserito il codice sopra riportato, clicca su Incollare. ClickUp leggerà il codice e renderà immediatamente il diagramma in un formato chiaro e visivo, per una comprensione immediata.
Hai il tuo diagramma di flusso, il diagramma di sequenza o qualsiasi altro diagramma tu abbia scelto, posizionato in modo perfetto affinché tutti possano vederlo.
Incorporare i diagrammi Mermaid direttamente in ClickUp Documenti semplifica la visualizzazione dei flussi di lavoro e la loro trasformazione in passaggi concreti in pochissimo tempo.
Non c’è bisogno di aspettare che qualcuno finisca di aggiornare il documento: tutti possono contribuire contemporaneamente. Basta evidenziare qualsiasi parte del documento o del diagramma e lasciare un commento direttamente lì. Puoi taggare i membri del team, assegnare i commenti come attività o persino effettuare il monitoraggio dello stato.
Se non sei un esperto di tecnologia, usa ClickUp Brain, l’assistente IA integrato in ClickUp, per generare automaticamente il codice del diagramma Mermaid.
Visualizza i processi con le lavagne online di ClickUp
Collega il tuo documento alle lavagne online di ClickUp e migliora ulteriormente la collaborazione. Tu e il tuo team potrete mappare i flussi di lavoro, creare diagrammi e aggiungere grafici in tempo reale.
Ad esempio, se il tuo team di sviluppo sta progettando una nuova funzionalità, le lavagne online semplificano la creazione di uno schema dell’architettura. Puoi inserire diagrammi per mostrare come comunicheranno le API, delineare le relazioni tra i database o mappare il percorso dell’utente.
La parte migliore? Mentre fai brainstorming, i membri del team possono assegnare le responsabilità e collegare ogni elemento alla Sequenza del progetto direttamente dalla bacheca. Questo garantisce che l’intero processo proceda senza intoppi e assicura che tutti siano sulla stessa lunghezza d’onda.
Qualsiasi idea che annoti su una lavagna online può essere convertita istantaneamente in un'attività, per passare dal concetto all'esecuzione senza perdere un colpo.
E la collaborazione? È semplicissima. Basta andare su Impostazioni dello spazio, cliccare su Condivisione e autorizzazioni e invitare i membri del tuo team. Potranno unirsi al progetto, contribuire ai diagrammi e perfezionare i flussi di lavoro insieme a te.
Scopri come sviluppare e mettere in pratica le tue idee con le lavagne online di ClickUp. 👇
Organizza idee e processi con le mappe mentali di ClickUp
Una volta visualizzata la struttura generale, ClickUp Mappe mentali ti permette di approfondire ulteriormente le idee. Puoi aggiungere attività secondarie, tracciare connessioni e raggruppare concetti correlati all’interno di un’interfaccia personalizzabile e interattiva.
Il modello di diagramma a blocchi di ClickUp trasforma le tue immagini statiche in uno spazio di lavoro interattivo e dinamico.
Il modello ti permette di:
- Rispetta le scadenze: imposta le date di inizio e di scadenza per ogni blocco del tuo diagramma, in modo che nulla venga tralasciato
- Chiarezza visiva: utilizza elementi contrassegnati da colori diversi per raggruppare le attività, rendendo più facile individuare a colpo d’occhio le priorità e le dipendenze
- Flessibilità grazie al drag-and-drop: riorganizza i blocchi senza sforzo per ottimizzare il tuo flusso di lavoro senza perdere la struttura
📮ClickUp Insight: Circa il 43% dei lavoratori invia da 0 a 10 messaggi al giorno. Sebbene ciò suggerisca conversazioni più mirate o ponderate, potrebbe anche indicare una mancanza di collaborazione fluida, con discussioni importanti che si svolgono altrove (ad esempio via email).
Per evitare inutili passaggi da una piattaforma all’altra e continui cambi di contesto, hai bisogno di un’app completa per il lavoro, come ClickUp, che riunisca progetti, conoscenze e chat in un unico posto, il tutto grazie all’IA che ti aiuta a lavorare in modo più efficiente.
Sfide e best practice relative ai diagrammi Mermaid
I diagrammi Mermaid offrono un approccio efficiente e basato sul testo che semplifica il processo di creazione dei diagrammi.
Sebbene offrano numerosi vantaggi, è importante essere consapevoli di alcuni aspetti che potrebbero essere migliorati.
1. La modifica può risultare complessa
L'editor in tempo reale di Mermaid non dispone di un'interfaccia drag-and-drop, il che significa che gli utenti devono codificare manualmente i nodi e le connessioni. Questo può risultare complicato per gli sviluppatori che non hanno familiarità con la sintassi di Mermaid.
✅ Best practice: abbozza il tuo diagramma su carta o su una semplice lavagna online prima di iniziare a programmare. Una volta che hai un'idea di massima, suddividila in componenti più piccoli e testali frequentemente. Per flussi di lavoro più fluidi, valuta l'utilizzo di strumenti come ClickUp, che combina interfacce visive con la modifica del codice, rendendo più facile creare e perfezionare i diagrammi senza dover scrivere tutto da zero.
📌 Esempio: se stai creando un diagramma di flusso per un'API, inizia abbozzando gli endpoint su una lavagna online. Quindi, crea gradualmente il tuo diagramma Mermaid aggiungendo endpoint e connessioni, testandoli uno per uno man mano che procedi.
2. Diagrammi obsoleti
Man mano che il codice si evolve, i diagrammi complessi possono diventare rapidamente obsoleti, specialmente se rappresentano elementi in rapida evoluzione come i microservizi o le strutture dati complesse.
✅ Best practice: incarica qualcuno di revisionare e aggiornare i diagrammi nell’ambito della manutenzione del progetto. Integra un sistema di controllo delle versioni o tieni un registro delle modifiche per effettuare il monitoraggio degli aggiornamenti apportati ai diagrammi parallelamente allo sviluppo del progetto.
📌 Esempio: se stai lavorando all’architettura backend di un prodotto SaaS, aggiorna il diagramma dell’architettura di sistema ogni volta che viene aggiunto un nuovo servizio o una nuova funzionalità al codice. Il controllo delle versioni ti aiuterà a mantenere tutto in sincronia con le ultime modifiche.
3. Non abbastanza interattivo
I diagrammi Mermaid non dispongono di funzionalità interattive come i tooltip o gli elementi cliccabili, il che può rappresentare un limite per l’utilizzo in presentazioni dinamiche o su siti web.
✅ Best practice: per aggiungere più contesto o interattività, abbina i diagrammi Mermaid a piattaforme come ClickUp Documenti. Queste ti consentono di incorporare i diagrammi e aggiungere commenti, link e altre annotazioni per migliorare l’esperienza dell’utente.
📌 Esempio: per il flusso di onboarding di un’app mobile, incorpora il tuo diagramma Mermaid in un documento ClickUp condiviso pubblicamente e utilizza i link per indirizzare gli utenti alla documentazione o alle risorse pertinenti, offrendo loro un’esperienza più ricca e interattiva.
4. Opzioni di animazione limitate
Mermaid offre animazioni di base ma non fornisce supporto per quelle complesse, il che può ridurne l’attrattiva per la narrazione dinamica o per immagini accattivanti.
✅ Best practice: usa i diagrammi Mermaid per flussi di lavoro statici o per una rapida panoramica. Per rappresentazioni più dinamiche, prova gli strumenti di mappatura mentale che ti consentono di esplorare le idee in modo interattivo e visivamente accattivante.
📌 Esempio: quando presenti l’architettura di una nuova funzionalità al tuo team, usa Mermaid per creare un diagramma di flusso semplice e chiaro, ma passa alle mappe mentali se vuoi rappresentare visivamente i diversi rami di funzionalità e le loro interazioni in modo dinamico.
5. Problemi con il browser
I diagrammi Mermaid potrebbero non essere visualizzati in modo uniforme su tutti i browser, causando potenzialmente problemi ad alcuni utenti.
✅ Best practice: Testa sempre i tuoi diagrammi nei browser più utilizzati dal tuo pubblico, come Chrome, Firefox ed Edge. Se riscontri problemi di rendering, esporta il diagramma Mermaid in formato PNG o PDF per garantire l'accessibilità su tutte le piattaforme.
Crea diagrammi Mermaid in ClickUp
L'approccio intuitivo di Mermaid alla creazione di diagrammi lo rende uno strumento indispensabile per semplificare concetti complessi e organizzare i flussi di lavoro. Dalla mappatura dei processi alla visualizzazione dei progetti, è il tipo di strumento a cui ti ritroverai a ricorrere più e più volte.
Vuoi illustrare meglio i tuoi flussi di lavoro? Integra ClickUp per generare diagrammi, effettuare il monitoraggio dello stato e collaborare con il tuo team, tutto in un unico posto.
I team di sviluppo possono utilizzarlo per mappare l’architettura e i flussi di lavoro, i project manager possono effettuare il monitoraggio e la gestione delle attività direttamente dai propri diagrammi, mentre i team interfunzionali possono coordinarsi facilmente tra i vari reparti grazie a immagini chiare e condivisibili.
Iscriviti oggi stesso a ClickUp per creare diagrammi Mermaid in tutta semplicità!