Elementi e Stili
Ogni livello C4 supporta diversi tipi di elemento. Comprenderli ti aiuta a creare diagrammi architetturali accurati e significativi.
Elementi per Livello
Livello 1: Contesto di Sistema
Il livello più alto mostra il tuo sistema nel suo ambiente:
| Elemento | Descrizione |
|---|---|
| Sistema Software | Il tuo sistema o prodotto principale |
| Persona | Utenti o personas che interagiscono con il sistema |
| Sistema Esterno | Sistemi di terze parti con cui il tuo sistema si integra |
Livello 2: Container
Mostra i blocchi tecnici all'interno di un sistema:
| Elemento | Descrizione |
|---|---|
| Servizio | Servizi backend o microservizi |
| API | API REST, GraphQL o gRPC |
| App Web | Applicazioni web frontend |
| App Mobile | Applicazioni iOS o Android |
| Database | Database SQL o NoSQL |
| Cache | Redis, Memcached, ecc. |
| Coda Messaggi | Kafka, RabbitMQ, SQS, ecc. |
| File Storage | S3, blob storage, file system |
Livello 3: Componente
Mostra la struttura interna di un container:
| Elemento | Descrizione |
|---|---|
| Controller | Gestori di richieste HTTP |
| Handler | Gestori di eventi o messaggi |
| Repository | Livello di accesso ai dati |
| Adapter | Adattatori per sistemi esterni |
| Middleware | Processori di richiesta/risposta |
| Utility | Funzioni helper e utility |
| Model | Modelli di dominio ed entità |
Livello 4: Codice
Mostra i dettagli implementativi:
| Elemento | Descrizione |
|---|---|
| Classe | Classi orientate agli oggetti |
| Interfaccia | Definizioni di interfaccia |
| Struct | Strutture dati |
| Funzione | Funzioni standalone |
| Metodo | Metodi di classe |
| Enum | Tipi enumerazione |
| Costante | Valori costanti |
| Tipo | Definizioni di tipo |
Aggiungere Elementi
Usando il Pulsante Aggiungi
- Clicca su Aggiungi nella barra degli strumenti
- Seleziona il tipo di elemento
- Inserisci nome e descrizione
- Clicca su Crea
Usando il Menu Contestuale
- Fai clic destro sull'area vuota del canvas
- Seleziona Aggiungi [Tipo Elemento]
- Compila i dettagli
- Clicca su Crea
Drag and Drop
Per container e componenti, puoi trascinare gli elementi dalla barra laterale direttamente sul canvas.
Personalizzazione dello Stile
Accesso alle Opzioni di Stile
Fai clic destro su qualsiasi elemento per accedere allo stile:
- Colore di sfondo: Colore di riempimento dell'elemento
- Colore del bordo: Colore del contorno
- Colore del testo: Colore dell'etichetta
- Icona: Icona visiva che rappresenta l'elemento
Palette dei Colori
Archyl fornisce una palette di colori curata:
- Tonalità blu: Servizi, API
- Tonalità verde: Database, storage
- Tonalità viola: Sistemi esterni
- Tonalità arancione: Code messaggi, asincrono
- Tonalità grigio: Utility, infrastruttura
Suggerimenti per uno Stile Consistente
- Usa lo stesso colore per tipi di elemento simili
- Abbina i colori alle convenzioni della tua organizzazione
- Considera palette accessibili per daltonici
- Documenta il tuo schema di colori nelle note del progetto
Overlay
Gli overlay sono raggruppamenti visivi colorati che aiutano a organizzare gli elementi sul diagramma.
Creare un Overlay
- Clicca su Aggiungi e seleziona Overlay
- Dagli un nome (es. "Servizi Backend", "App Frontend")
- Scegli un colore dalla palette
- Clicca su Crea
Usare gli Overlay
- Trascina gli elementi nell'area dell'overlay
- L'overlay fornisce un raggruppamento visivo
- Gli overlay sono specifici per livello
- Raggruppamenti diversi a ogni livello C4
Casi d'Uso degli Overlay
- Raggruppare per responsabilità del team
- Raggruppare per unità di deploy
- Raggruppare per dominio (bounded context DDD)
- Evidenziare componenti del percorso critico
- Mostrare confini di sicurezza
Best Practice per gli Overlay
- Mantienili semplici: Massimo 3-5 overlay per livello
- Usa nomi significativi: "Dominio Pagamenti" non "Gruppo 1"
- Colori consistenti: Stesso colore dell'overlay tra i livelli per raggruppamenti correlati
- Non sovrapporre: Evita overlay sovrapposti confusi
Stile delle Relazioni
Anche le relazioni possono essere personalizzate:
| Proprietà | Opzioni |
|---|---|
| Colore | Abbinare i colori degli elementi o usare neutro |
| Stile linea | Solida, tratteggiata, punteggiata |
| Spessore linea | Sottile, medio, spesso |
| Stile freccia | Standard, vuota, nessuna |
Suggerimenti per lo Stile delle Relazioni
- Usa linee tratteggiate per comunicazione asincrona
- Usa linee più spesse per i flussi di dati principali
- Usa colori diversi per protocollo (HTTP, gRPC, eventi)
Prossimi Passi
- Relazioni - Connettere gli elementi
- Panoramica Modello C4 - Comprendere il modello
- Guida al Primo Progetto - Applicare questi concetti