Mermaid Editor

Editor mermaid online gratis, visivo e codice nello stesso posto

La maggior parte degli editor mermaid offre solo una casella di testo e un'anteprima. Questo aggiunge anche una tela per creare diagrammi online: clicca per aggiungere un blocco, trascina una freccia, raggruppa gli elementi in aree — e il codice mermaid si scrive da solo. Passa alla scheda codice e modificalo a mano; la tela si aggiorna di conseguenza.

  • Si aggiorna mentre scrivi

    Il vero motore mermaid, ridisegnato poche centinaia di millisecondi dopo l'ultimo tasto premuto.

  • Codice e tela sincronizzati

    Modifica un lato o l'altro. L'altro si aggiorna da solo — niente copia-incolla tra due strumenti.

  • 14 forme di nodo

    Rettangolo, arrotondato, pillola, cerchio, rombo, database, esagono e altre ancora, un clic per ciascuna.

  • Gratuito, senza registrazione

    Niente prova né filigrana: l'editor si apre subito. Accedi solo se vuoi più di un diagramma.

Una tela, non solo una casella di testo

La scheda visiva è un vero editor sopra il diagramma renderizzato: clicca su un nodo per selezionarlo, doppio clic per rinominarlo sul posto, trascina ovunque per spostare la vista.

  • Clicca per costruireAggiungi un blocco, punta una freccia verso un altro, etichetta la freccia. Nessuna sintassi da ricordare prima di iniziare.

  • Scegli una formaQuattordici forme di flowchart mermaid — rombi decisionali, cilindri database, sottoprocessi — da un unico selettore.

  • Colora tuttoOtto preset più un selettore colore, applicabili a un singolo nodo o a un'intera area.

Codice mermaid che resta tuo

La scheda testo è puro mermaid — la stessa sintassi che GitHub, GitLab, Notion e Obsidian già renderizzano. Niente qui è un formato proprietario.

  • Scrivilo a manoDigita mermaid direttamente e guardalo renderizzarsi. Sei esempi già pronti per iniziare.

  • Andata e ritornoI flowchart incollati vengono analizzati e riportati sulla tela — nodi, forme, colori, sottografi e tutto il resto.

  • Ogni tipo di diagrammaFlowchart, sequenza, classi, stato, ER, gantt, git graph, torta — l'anteprima renderizza tutto ciò che mermaid supporta.

I diagrammi grandi restano leggibili

I diagrammi di architettura superano presto lo spazio di uno schermo. Panoramica, zoom e raggruppamento sono pensati proprio per questo, non per ostacolarlo.

  • Aree e nidificazioneRaggruppa i blocchi in sottografi, annida un'area dentro un'altra, sposta un intero sottoalbero con un solo gesto.

  • Zoom dal 2% al 1600%Scorri per spostare la vista, ctrl+scorri per ingrandire, oppure ricentra con un pulsante.

  • Salvato mentre lavoriIl diagramma si salva da solo nel browser mentre modifichi. Se accedi, si salva nel tuo account e ti segue su qualsiasi dispositivo.

Esporta e vai avanti

Niente resta vincolato. Prendi l'immagine, prendi il codice sorgente, oppure prendi un blocco Markdown pronto da incollare in un documento.

  • Nessun paywallOgni funzionalità, esportazione inclusa, è gratuita. Non esiste un piano a pagamento a cui passare.

  • Renderizzato nel tuo browserIl rendering avviene nel tuo browser; senza account il diagramma non lo lascia mai, con un account il documento salvato ti segue su qualsiasi dispositivo.

  • SVG, PNG, .mmd, .mdCopia il markup SVG, scarica un PNG a 2x, salva il codice sorgente mermaid o prendi un blocco Markdown pronto.

Come si confronta con le soluzioni abituali

Gli strumenti diagram-as-code ti costringono a scrivere tutto a mano. Gli strumenti drag-and-drop ti danno un'immagine che non puoi confrontare (diff). Questo si rifiuta di scegliere una parte.

Per iniziare

IQ Mermaid: Doppio clic sulla tela e appare un nodo. Puoi imparare la sintassi più tardi, o mai.

Strumento tipico: Leggi prima il riferimento della sintassi, oppure accetta uno strumento di disegno senza alcuna rappresentazione testuale.

Il formato di output

IQ Mermaid: Puro mermaid — lo stesso testo che GitHub, GitLab e Notion renderizzano nativamente.

Strumento tipico: Un file proprietario che si apre solo nello strumento che lo ha creato.

Modificare in seguito

IQ Mermaid: Cambia il codice o sposta i blocchi. Entrambe le direzioni funzionano sullo stesso diagramma.

Strumento tipico: Una sola direzione: gli strumenti code-first non hanno tela, gli strumenti canvas-first non hanno sorgente.

Prezzo

IQ Mermaid: Gratuito — nemmeno un'email.

Strumento tipico: Piano gratuito limitato a pochi diagrammi, con esportazione o collaborazione dietro abbonamento.

Dove vivono i dati

IQ Mermaid: Nel tuo browser, o nel tuo account se vuoi che ti segua su qualsiasi dispositivo.

Strumento tipico: Un account sul server di qualcun altro, con i tuoi diagrammi collegati ad esso.

Domande sull'editor mermaid

Per iniziare basta aprire la pagina.

Cos'è mermaid?

Mermaid è una sintassi testuale per i diagrammi: descrivi nodi e frecce in poche righe, e un motore di rendering disegna l'immagine. GitHub, GitLab, Notion e Obsidian lo renderizzano dentro Markdown, quindi un blocco mermaid resta leggibile in una pull request o in una pagina wiki.

Questo editor mermaid è davvero gratuito?

Sì. Ogni funzione, compresa l'esportazione in SVG e PNG, è gratuita e puoi usare l'editor senza creare nulla. Un account gratuito opzionale aggiunge più diagrammi salvati e la sincronizzazione tra dispositivi: non c'è alcun piano a pagamento e nulla viene trattenuto.

Devo conoscere la sintassi mermaid?

No. Inizia dalla scheda visiva: doppio clic sulla tela per aggiungere un blocco, selezionalo e disegna una freccia verso un altro. Il codice mermaid viene generato per te e puoi leggerlo quando vuoi per imparare la sintassi.

Quali tipi di diagramma sono supportati?

La scheda codice renderizza tutto ciò che mermaid supporta — flowchart, sequenza, classi, stato, entità-relazione, gantt, git graph, torta e altro. La tela visiva modifica in particolare i flowchart, che sono il tipo di diagramma più comune.

Posso esportare in PNG o SVG?

Sì. Copia il markup SVG negli appunti, scarica il file SVG, oppure scarica un PNG renderizzato a 2x per presentazioni e documenti. Puoi anche salvare il codice sorgente mermaid come .mmd o come blocco Markdown.

Dove viene salvato il mio diagramma?

Senza account, il tuo unico diagramma è salvato nel browser, quindi è lì quando torni sullo stesso dispositivo. Se accedi, viene salvato nel tuo account e può seguirti su un altro dispositivo. Esporta il sorgente se vuoi una copia tua.

Posso incollare un diagramma mermaid già esistente?

Sì. Incollalo nella scheda codice; un flowchart viene analizzato e riportato sulla tela visiva con nodi, forme, colori e sottografi intatti. Gli altri tipi di diagramma vengono renderizzati nell'anteprima ma restano solo codice.

Funziona offline?

Il rendering avviene interamente nel browser: una volta caricata la pagina, l'editor funziona anche senza connessione.

Apri l'editor. Gratuito — senza registrazione.

Una tela vuota, una scheda codice e ogni opzione di esportazione — gratis, nel tuo browser, subito.