Sviluppatore / Diagrammi
Editor live di Mermaid
Scrivi codice Mermaid e guarda il diagramma mentre lo componi: diagrammi di flusso, sequenza e classi, diagrammi di Gantt e grafici a torta, con download in SVG e PNG.
Editor live di Mermaid: L'editor crea diagrammi con Mermaid, la libreria open source usata da GitHub, GitLab e molti strumenti di documentazione per i diagrammi scritti come testo. Funziona in modalità strict, quindi il codice di altre persone non può eseguire script né aggiungere gestori di clic. I download SVG restano nitidi a qualsiasi dimensione; i download PNG vengono creati a una dimensione doppia rispetto a quella sullo schermo, su sfondo bianco. Funziona al 100% localmente nel browser, senza caricare file sul server.
- Categoria
- Strumenti per sviluppatori
- Esecuzioni
- Nel browser
- Costo
- Gratuito · senza registrazione
- Disponibilità
- Pronto all'uso
Funziona interamente nel browser
I diagrammi vengono disegnati nel browser con Mermaid, in modalità strict, quindi il codice del diagramma non può eseguire script. Incolla lo stesso codice in GitHub, GitLab o Notion Markdown, all'interno di un blocco di codice mermaid, per visualizzarlo.
Diagrammi come testo
Un diagramma disegnato in un programma di grafica diventa obsoleto perché per modificarlo bisogna riaprire il file. Un diagramma Mermaid è composto da poche righe di testo che restano accanto al codice o al documento che descrivono, cambiano nello stesso commit e durante una revisione mostrano un diff leggibile.
Ogni diagramma inizia con il proprio tipo: flowchart con una direzione come TD (dall'alto verso il basso) o LR (da sinistra a destra), sequenceDiagram, classDiagram, gantt o pie. I nodi vengono scritti una volta con la relativa etichetta, A[Start], e poi richiamati per nome, A --> B.
Esportazione
SVG mantiene linee e testo nitidi a qualsiasi dimensione ed è la scelta migliore per documenti e presentazioni; PNG è adatto alle app di chat e ai luoghi che non accettano SVG. Per modificare a mano l'SVG esportato, aprilo nell'editor SVG.
Come usarlo
- Parti da un esempio oppure incolla il tuo codice Mermaid.
- Modifica il codice: il diagramma viene ridisegnato mentre scrivi oppure viene mostrato l'errore.
- Scarica il diagramma in SVG o PNG, oppure copia il codice.
Privacy e limitazioni
I diagrammi vengono creati nel tuo browser e il tuo codice viene conservato solo in questo browser, così sarà ancora disponibile la prossima volta.
Strumenti correlati
Domande frequenti
Che cos'è Mermaid?
È un modo per scrivere diagrammi come testo. Una riga come A --> B crea due riquadri collegati da una freccia, così i diagrammi possono essere inseriti nei file Markdown e nelle revisioni del codice e modificati con un intervento sul testo anziché con uno strumento di disegno.
Come faccio a mostrare il diagramma su GitHub?
Inserisci il codice in un blocco di codice delimitato contrassegnato con mermaid, all'interno di un file Markdown, di un issue o di una pull request: tre backtick seguiti dalla parola mermaid, dal codice e poi da tre backtick. GitHub, GitLab e Notion lo visualizzano direttamente.
Perché il mio diagramma mostra un errore?
Il messaggio indica la riga che Mermaid non è riuscito a leggere. Tra le cause più comuni ci sono l'assenza del tipo di diagramma nella prima riga, come flowchart TD, parentesi o virgolette non chiuse e testo con caratteri speciali da racchiudere tra virgolette.
Quali tipi di diagramma sono supportati?
Tutti i tipi inclusi nella versione di Mermaid caricata dall'editor, tra cui diagrammi di flusso, di sequenza, di classi, di stato ed entità-relazione, diagrammi di Gantt, grafici a torta, mappe mentali, linee del tempo e grafici Git. Gli esempi coprono i cinque tipi più comuni.
Strumento gratuito · nel browser esecuzioni · senza account