Architecture Diagram Generator
Genera diagrammi Mermaid da descrizione testuale - flowchart, sequence, class diagram.
Nodi
Connessioni
Codice Mermaid
flowchart TD
A(["Start"])
B["Process"]
C(["End"])
A --> B
B --> CCome utilizzare Architecture Diagram Generator
Scegli il tipo di diagramma
Seleziona tra flowchart, sequence, class, entity-relation o state machine. Solo il flowchart ha builder visuale completo; gli altri mostrano un esempio Mermaid di partenza da modificare a mano.
Carica un preset o costruisci da zero
Per il flowchart puoi partire da un preset (Microservizi, CI/CD Pipeline, Auth Flow) oppure aggiungere manualmente nodi e connessioni con ID, nome, forma e tipo di linea.
Genera il codice Mermaid
Premi Genera diagramma per convertire nodi e connessioni in sintassi Mermaid valida, aggiornata automaticamente a ogni modifica.
Copia e visualizza il diagramma
Copia il codice generato e incollalo su mermaid.live, in un README GitHub o in qualsiasi editor che supporti Mermaid per vedere il diagramma renderizzato.
Suggerimenti
- Usa i preset come punto di partenza e poi personalizza nodi e connessioni invece di ricominciare da zero.
- Le etichette sulle connessioni (es. "HTTPS", "JWT verify") rendono il diagramma molto più leggibile per chi non conosce già l'architettura.
- Mantieni gli ID dei nodi brevi (A, B, client, db) e usa il campo nome per la descrizione leggibile: la sintassi Mermaid resta più pulita.
Domande frequenti
Cos'è Mermaid e perché usarlo per i diagrammi?
Mermaid è un linguaggio testuale per generare diagrammi (flowchart, sequence, class, ER, state machine) a partire da semplice testo, senza strumenti grafici dedicati. È supportato nativamente da GitHub, GitLab, Notion e molti editor Markdown, rendendo i diagrammi versionabili insieme al codice.
Perché solo il flowchart ha un builder visuale?
Il flowchart è il tipo di diagramma più comune per rappresentare architetture software e flussi di processo, quindi ha priorità nel builder interattivo. Gli altri tipi (sequence, class, ER, state) mostrano un template Mermaid di esempio che puoi copiare e personalizzare manualmente seguendo la sintassi Mermaid ufficiale.
Che differenza c'è tra le forme dei nodi (rectangle, round, diamond, circle)?
Per convenzione Mermaid: rectangle rappresenta un processo o componente generico, round (stondato) indica punti di inizio/fine, diamond è usato per decisioni/condizioni, circle per nodi speciali come database o eventi. Sono solo forme visive: non cambiano la logica del diagramma.
Come faccio a visualizzare il diagramma generato?
Copia il codice Mermaid generato e incollalo su mermaid.live per un'anteprima immediata, oppure inseriscilo in un blocco di codice ```mermaid dentro un file README.md su GitHub/GitLab, che lo renderizza automaticamente.