Editor Mermaid
Crea diagrammi di flusso, di sequenza, Gantt e altro dal testo con l'editor Mermaid. Renderizza, fai zoom ed esporta in SVG o PNG nel browser.
Cos'è Mermaid?
Mermaid è un linguaggio open source per diagrammi che permette di crearli da testo semplice, simile a Markdown. Descrivi nodi e collegamenti con una sintassi semplice e il renderer disegna il diagramma automaticamente.
Quali tipi di diagramma sono supportati?
L'editor include esempi per diagrammi di flusso, sequenza, classi, stati, ER, Gantt, a torta, mappe mentali e linee temporali. Mermaid 11 supporta molte altre varianti da digitare manualmente.
Come creo un diagramma?
Scegli un esempio dal menu o digita il codice nell'editor a sinistra. L'anteprima si aggiorna circa 350 ms dopo la digitazione; se la sintassi non è valida, un pannello rosso mostra l'errore esatto e il diagramma precedente resta invariato.
Il mio codice viene inviato da qualche parte?
No. Tutto viene renderizzato localmente nel browser con JavaScript. Il codice non lascia mai il dispositivo.
Come esporto il diagramma?
Usa Scarica SVG per un vettore scalabile o Scarica PNG per un'immagine a doppia risoluzione, con sfondo trasparente opzionale. Copia codice mette il sorgente Mermaid negli appunti.
Perché l'esportazione PNG a volte fallisce?
Alcune funzionalità di Mermaid vengono renderizzate tramite foreignObject, che il browser può rifiutare di rasterizzare. In tal caso il PNG segnala un errore, ma il download SVG funziona sempre perché non richiede rasterizzazione.
Come funziona lo zoom?
L'anteprima supporta uno zoom da 0,5x a 2x. I pulsanti + e - avanzano del 10%, Adatta ridimensiona il diagramma all'area di anteprima e 100% ripristina la dimensione originale.
Posso usare Mermaid nella mia documentazione?
Sì. GitHub, GitLab e molti strumenti di documentazione renderizzano i blocchi Mermaid nativamente: racchiudi il codice in un blocco recintato mermaid e viene disegnato automaticamente.
L'editor supporta la modalità scura?
Sì. Il diagramma segue il tema della piattaforma: passando alla modalità scura viene nuovamente renderizzato con il tema dark di Mermaid.
Consigli per diagrammi leggibili?
Usa etichette brevi, scegli la direzione adatta (TD verticale o LR orizzontale), dividi grafi molto grandi in sottografi e usa gli esempi integrati come modello per ogni tipo.
Come usare Editor Mermaid
Mermaid trasforma testo semplice in diagrammi di flusso, di sequenza, Gantt e altro. Questo editor live re-renderizza il codice mentre scrivi, interamente nel browser — nulla lascia il tuo dispositivo.
- Scegli un punto di partenza dal menu a discesa «Esempio»: nove diagrammi pronti coprono flusso, sequenza, classi, stati, ER, Gantt, torta, mappa mentale e timeline, e selezionandone uno il suo codice viene caricato nell'editor.
- Modifica il codice Mermaid nel pannello a sinistra; l'anteprima a destra si ri-renderizza circa un terzo di secondo dopo che smetti di digitare. Quando nel pannello rosso compare un errore di sintassi, l'ultimo diagramma valido resta visibile mentre correggi.
- Ingrandisci dal 50% al 200% con i pulsanti più e meno, premi «Adatta» per scalare il diagramma al riquadro di anteprima oppure «100%» per tornare alla dimensione reale.
- Spunta «Sfondo trasparente» se vuoi il PNG senza sfondo bianco, poi premi «Scarica SVG» o «Scarica PNG» — il PNG viene esportato a risoluzione doppia e resta nitido quando lo incorpori.
- Premi «Copia codice» per portare il sorgente Mermaid negli appunti e incollarlo in documentazione, wiki o repository.
Quando un diagramma non si renderizza, commenta le righe modificate di recente per isolare l'errore — il messaggio indica la riga incriminata e l'anteprima conserva l'ultima versione valida finché la sintassi non torna corretta.
Strumenti correlati
- Codice in Immagine Converti frammenti di codice in immagini condivisibili con evidenziazione sintassi, temi personalizzati e decorazioni finestra. 100% privacy, tutto nel tuo browser.
- Anteprima Markdown Editor Markdown online gratuito con anteprima live. Scrivi, renderizza ed esporta Markdown con supporto GFM completo.
- Visualizzatore e Editor SVG Visualizza, modifica e ottimizza file SVG online. Anteprima in tempo reale, modifica del codice e strumenti di ottimizzazione.
- Visualizzatore albero JSON Visualizza i dati JSON come albero collassabile interattivo. Cerca chiavi e valori, traccia JSONPath al passaggio del mouse e gestisci file di grandi dimensioni con caricamento lazy. Supporta il drag & drop di file .json.
- Verifica Hash Calcola e verifica hash MD5, SHA-1, SHA-256, SHA-512 localmente
- Calcolatrice Chmod Calcolatrice chmod online gratuita per visualizzare e calcolare i permessi dei file Linux con caselle di controllo. Converti istantaneamente tra notazione numerica (755, 644) e simbolica (rwxr-xr-x). Supporta permessi speciali come setuid, setgid, sticky bit.
- Tabella ASCII Riferimento completo per la codifica dei caratteri ASCII con codici decimali, esadecimali, ottali, binari, entità HTML e descrizioni. Ricerca e filtro istantanei.
- Visualizzatore Hex Visualizza i contenuti dei file in formato hex dump con ricerca, navigazione offset e scorrimento virtuale