Diagrammi scritti come codice
Diagram as Code
Disegna diagrammi di flusso, di sequenza e a torta di Mermaid mentre scrivi, con un parser e un motore di disposizione propri, dichiara esattamente quale sintassi accetta ed esporta in SVG o PNG.
Il testo Mermaid a sinistra, il disegno a destra, aggiornato mentre si scrive. L’analizzatore, la disposizione e il renderer sono di questo sito e non della libreria Mermaid, ed è per questo che la grammatica supportata è elencata per intero nella pagina: tre tipi di diagramma e, per ognuno, esattamente i costrutti che vengono letti.
Codice Mermaid
Anteprima
Grammatica supportata (tutto il resto viene segnalato come errore con il numero di riga)
Diagramma di flusso — graph / flowchart
- Direzioni TD, TB, LR, RL, BT
- Forme [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- Linee -->, ---, -.->, -.-, ==>, ===
- Etichette -->|testo|, -- testo -->, -. testo .->, == testo ==>
- A --> B --> C, A & B --> C
- subgraph nome [titolo] … end (si può annidare)
- style, classDef, class, :::nomeClasse
- %% commenti, ; separatori
Non supportati: click, linkStyle, direction, le frecce <-->, --o e --x, le stringhe Markdown
Sequenza — sequenceDiagram
- participant A as Nome, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
Non supportati: par, critical, break, rect, box, create/destroy, links
Torta — pie
- pie [showData] [title Qualcosa]
- "nome" : valore
I diagrammi di classe, di stato, ER, di Gantt, le mappe mentali e gli altri tipi non vengono ancora disegnati. Per i diagrammi di Gantt c’è uno strumento a parte.
Come si usa
Partire da un esempio
Diagramma di flusso, sequenza e torta hanno ciascuno un campione che usa quasi tutto quello che l’analizzatore capisce. Modificarne uno è più rapido che scrivere partendo dall’elenco della sintassi.
Leggere l’errore per numero di riga
Tutto quello che sta fuori dalla grammatica supportata viene rifiutato indicando la riga e che cosa non andava, invece di lasciare una tela bianca da bisecare.
Esportare o stampare
L’SVG tiene il testo selezionabile e si ingrandisce pulito; il PNG a 2× è la scelta sicura per una presentazione o un messaggio in chat.
Domande frequenti
Quali tipi di diagramma funzionano?
Diagramma di flusso (graph / flowchart), sequenceDiagram e pie. Class, state, ER, gantt, gitGraph, mindmap e gli altri sono nominati nell’errore invece di fallire in modo vago — e per un diagramma di Gantt c’è uno strumento a parte su questo sito.
Il mio diagramma funziona su mermaid.live e qui no
Probabilmente c’è un costrutto fuori dall’elenco della pagina: `click`, `linkStyle`, `direction` dentro un subgraph, le frecce `<-->`, `--o` e `--x`, il front matter YAML o le stringhe Markdown. L’errore dice quale, e l’elenco è tutto il contratto.
Il testo coreano viene disposto correttamente?
Sì. Le larghezze delle caselle sono misurate contando i caratteri CJK a larghezza piena, quindi un’etichetta coreana non trabocca dal suo nodo come succede nei renderer che presumono che ogni carattere sia a mezza larghezza.
Il mio diagramma viene mandato da qualche parte?
No. L’analisi e la resa avvengono dentro la pagina, e la bozza resta in questo browser. Non viene caricato niente, cosa che conta quando il diagramma è l’architettura interna della propria azienda.
Può ricevere da
Creare un diagramma di Gantt
Gantt Chart Builder
Trasforma una tabella di attività — digitata o incollata come CSV — in un diagramma di Gantt su scala giornaliera, settimanale o mensile, con frecce di dipendenza, traguardi, la linea di oggi e i fine settimana ombreggiati, da esportare in SVG o PNG o da stampare.
Lista di cose da fare
Todo List
Tiene una checklist con scadenze, etichette e modifica da tastiera, esportabile in Markdown — senza caricare nulla, tutto nel browser.
Blocco note al volo
Scratch Notepad
Un blocco di testo semplice che salva mentre scrivi, sopravvive a un ricaricamento della pagina e conta le parole.
Impacchettare uno sprite sheet
Sprite Sheet Packer
Impacchetta molte immagini in un unico atlante e produce accanto la mappa dei fotogrammi in CSS o in JSON.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Creare un diagramma di Gantt
Gantt Chart Builder
Trasforma una tabella di attività — digitata o incollata come CSV — in un diagramma di Gantt su scala giornaliera, settimanale o mensile, con frecce di dipendenza, traguardi, la linea di oggi e i fine settimana ombreggiati, da esportare in SVG o PNG o da stampare.
Editor Markdown
Markdown Editor
Scrive Markdown con anteprima dal vivo ed esporta l’HTML generato, con le tabelle e le liste di spunta del GFM.
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Lista di cose da fare
Todo List
Tiene una checklist con scadenze, etichette e modifica da tastiera, esportabile in Markdown — senza caricare nulla, tutto nel browser.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Togliere lo sfondo
Background Remover
Elimina uno sfondo piatto o di un colore solo lavorando in OKLab e restituisce un PNG trasparente, con un pennello per rifinire i bordi.