# Creatore di diagrammi di sistema

URL: https://discuvr.org/system-diagram/?hl=it
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Disegna diagrammi di architettura e di flusso scrivendo A -> B. Layout automatico, gruppi comprimibili, passi numerati, esportazione PNG e SVG.

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

1. Scrivi righe come User -> Web App -> Orders DB o parti da un modello.
2. Aggiungi gruppi con Nome { ... }, etichette dopo i due punti e --> per le chiamate asincrone.
3. Passa 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.

**Cosa succede alle frecce quando comprimo un gruppo?**

Le frecce tra riquadri all'interno del gruppo compresso vengono nascoste, e quelle che ne attraversano il bordo ora partono o arrivano sul riquadro del gruppo. Più frecce tra gli stessi due riquadri si uniscono in una freccia più spessa che mantiene la prima etichetta e aggiunge un conteggio. Esempio: con Payments API e Ledger dentro Payments { ... }, le righe Checkout -> Payments API e Checkout -> Ledger diventano un'unica freccia Checkout -> Payments x2 in Panoramica. Un gruppo dentro un gruppo compresso si comprime con esso e, con Passi attivo, i numeri seguono le frecce ancora visibili, nell'ordine in cui sono scritte.

## Altro in Strumenti per sviluppatori

- [Formattatore JSON](https://discuvr.org/json-formatter/?hl=it)
- [Formattatore Python](https://discuvr.org/python-formatter/?hl=it)
- [Visualizzatore HTML](https://discuvr.org/html-viewer/?hl=it)
- [Calcolatore di Sottorete IP](https://discuvr.org/ip-subnet-calculator/?hl=it)

## Spesso usato con

- [Confronto testi](https://discuvr.org/text-diff/?hl=it)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.