Scrivi frecce come User -> API -> Database e ottieni un diagramma di architettura o di flusso già impaginato. Comprimi i gruppi per il quadro generale, numera i passi per il dettaglio.
100%
Scrivi a sinistra una riga come User -> App -> Database, o fai doppio clic qui per aggiungere un riquadro.
Trascina i riquadri per spostarli. Doppio clic per rinominarne uno o aggiungerne uno. Trascina il punto di un riquadro per collegarlo. Ctrl+Z annulla.
Non viene caricato nulla: il diagramma resta nel browser e nei link che scegli di condividere.
Informazioni Creatore di diagrammi di sistema
Su una lavagna digitale disegni ogni riquadro e ogni freccia e li allinei a mano. Qui scrivi chi parla con chi, una riga per freccia, e l'impaginazione si fa da sola. Raggruppa i servizi collegati e comprimi il gruppo in un riquadro per il quadro generale; riaprilo per il dettaglio.
Cosa fa
Layout automatico, da sinistra a destra o dall'alto in basso, che si aggiorna mentre scrivi.
Forme scelte dal nome: DB diventa un database, Kafka una coda, User una persona, un nome che finisce con ? una decisione.
Gruppi che si comprimono in un riquadro, così un solo diagramma vale sia per la panoramica sia per il dettaglio.
Puoi anche trascinare, collegare, rinominare e aggiungere riquadri sulla tela; ogni modifica torna nel testo.
Passi numerati, stile a mano libera, esportazione PNG e SVG e link da condividere. Non viene caricato nulla.
Come funziona
1Scrivi righe come User -> Web App -> Orders DB o parti da un modello.
2Aggiungi gruppi con Nome { ... }, etichette dopo i due punti e --> per le chiamate asincrone.
3Passa da Panoramica a Dettagli, sistema i riquadri trascinandoli, poi esporta o copia un link.
Domande
In cosa è diverso da Excalidraw?
Excalidraw è una lavagna libera: posizioni tu ogni forma e ogni freccia. Qui il testo è il diagramma e il layout è automatico, quindi aggiungere un servizio è una riga invece di disegnare e riallineare riquadri. Per uno schizzo libero Excalidraw resta più adatto.
Come mostro una vista d'insieme e una dettagliata?
Metti i riquadri collegati in un gruppo con Nome { ... }. Panoramica comprime ogni gruppo in un solo riquadro e unisce le frecce; Dettagli li riapre. Puoi anche comprimere un gruppo alla volta dalla sua intestazione.
Il mio diagramma viene salvato da qualche parte?
No. Viene disegnato nel browser e tenuto nella sua memoria locale. Un link condiviso contiene il diagramma nel link stesso, dopo il simbolo #, che i browser non inviano mai al server.
Posso incollare un diagramma di flusso Mermaid?
Non direttamente: non c'è un'importazione da Mermaid. Le righe semplici come A -> B funzionano, ma tre cose cambiano. Cancella l'intestazione graph TD, altrimenti diventa un riquadro, e scrivi al suo posto direction: down. Togli le etichette Mermaid tra parentesi quadre, perché qui il testo tra [ ] viene letto come tag di forma e colore. E qui --> disegna una freccia tratteggiata per una chiamata asincrona, mentre in Mermaid è una freccia normale; usa -> per una freccia continua.
Cosa posso scrivere oltre ad A -> B?
A -> B: testo mette un'etichetta sulla freccia, A --> B disegna una freccia tratteggiata, A <-> B una a doppio senso e A <- B punta all'indietro. Nome [db, blue] imposta forma e colore; le forme sono service, db, cache, queue, actor, client, storage, external, decision, terminal e note. title: dà il nome al diagramma, direction: down lo dispone dall'alto in basso e una riga che inizia con # o // è un commento. Un diagramma contiene fino a 300 riquadri, 600 frecce e 20.000 caratteri di testo.