Nelle aziende, è prassi comune che diversi reparti lavorino su un unico processo con ruoli differenti. In questi casi, è opportuno utilizzare diagrammi a corsie (swimlane) per chiarire il processo passo dopo passo e i ruoli effettivi di ogni team.
Dividendo le corsie per ciascun reparto e responsabile, insieme al flusso del processo, si può comprendere a colpo d'occhio la divisione del lavoro e altro ancora. Questo aiuta anche a standardizzare e migliorare il flusso aziendale, rafforzando la comunicazione tra i team.
Questo articolo ti insegnerà come creare o disegnare una corsia di nuoto con l'aiuto di Mermaid e alcuni esempi che puoi facilmente copiare.
In questo articolo
Perché Disegnare una Corsia di Nuoto con Mermaid
Svantaggi degli Strumenti Convenzionali
In un esempio reale, un team di vendita ha incontrato diversi problemi mentre usava PowerPoint per creare un diagramma swimlane per l'elaborazione degli ordini:
- Sovraccarico di modifica: Quando il team della logistica ha aggiunto una nuova Passaggio di controllo qualità, hanno dovuto riposizionare manualmente ogni connettore.
- Problemi di collaborazione: Un cattivo controllo delle versioni ha portato il team di assistenza clienti a lavorare su un diagramma di processo obsoleto.
- Problemi di stampa: Titoli e contenuti spesso non sono allineati correttamente durante la stampa.
Cosa fa meglio Mermaid
Mermaidè uno strumento di diagrammi basato su testo che risolve molti di questi problemi grazie alle seguenti funzionalità:
- Tracciamento delle versioni: Funziona con Git per mantenere una chiara cronologia di tutte le modifiche al tuo swimlane.
- Nessun costo: L'editor Mermaid è completamente gratuito.
Limitazioni di Mermaid
Tuttavia, Mermaid non è privo di svantaggi. Per i swimlane, non è facile allineare tutto perfettamente, soprattutto quando si cerca di formattare ordinatamente le corsie, ma consente comunque di mostrare processi e reparti in un unico diagramma.
Poiché Mermaid utilizza il codice per creare diagrammi, c'è una curva di apprendimento. È adatto a chi si sente a proprio agio a scrivere codice. Ma se questo sembra troppo impegnativo, ci sono opzioni più semplici.
Strumenti come EdrawMax oppure Visio ti permette di creare swimlane trascinando e rilasciando forme e modelli—senza bisogno di codice.
Come Disegnare Corsie di Nuoto in Mermaid
Sintassi di base
Per disegnare le swimlane in Mermaid, inizia scrivendo un semplice diagramma di flusso usando questo formato:
flowchart LR subgraph Department A A[Step 1] end subgraph Department B B[Step 2] end subgraph Department C subgraph Sub-Dept C1 C[Step 3] end subgraph Sub-Dept C2 D[Step 4] end end A --> B --> C D --> B
Ecco una spiegazione dei codici usati nella sintassi per una migliore comprensione:
Diagramma di flusso LR
Questo comunica a Mermaid di disegnare un diagramma di flusso da sinistra a destra. Puoi cambiare LR in TB (dall’alto verso il basso), RL (da destra a sinistra) o BT (dal basso verso l’alto), a seconda delle tue esigenze di layout.
Utilizzare un Subgraph per creare le swimlane
Subgraph definisce un contenitore o “corsia”, come un dipartimento o un ruolo. Tutti i passaggi all’interno del subgraph sono raggruppati visivamente. Puoi anche annidare i subgraph per rappresentare una gerarchia, ad esempio un dipartimento con sottoteam. Esempio:
Example subgraph Department A A[Step 1] end
Ecco alcuni suggerimenti importanti:
- Includi sempre uno spazio tra il sotto-grafo e l'etichetta (ad esempio, subgraph Department A).
- Mermaid non richiede l'indentazione, ma aiuta a mantenere il codice leggibile, soprattutto quando si annidano i sotto-grafi.
Mostra il Flusso
Usa “-->” per collegare ogni passaggio in ordine. Questo mostra la direzione del processo.
Personalizzare le Swimlane in Mermaid
Puoi stilizzare ed etichettare i tuoi diagrammi swimlane di Mermaid per migliorare chiarezza e impatto visivo. Ecco un esempio:
Example flowchart LR subgraph Department A A[Step 1] style A fill:#e6f3ff end subgraph Department B B[Step 2] style B fill:#fffbe6 end A -->|Send request| B style Department A stroke:#1890ff style Department B stroke:#faad14
Ancora una volta, ecco una scomposizione della sintassi utilizzata:
Comando di stile
Utilizza lo stile per personalizzare l'aspetto dei nodi o dei sottografi. Puoi modificare:
- fill per il colore di sfondo
- stroke per il colore del bordo
Example style A fill:#e6f3ff style Department A stroke:#1890ff
Stili delle linee
Per modificare l'aspetto dei connettori:
- “-.->” crea una linea tratteggiata
- “==>” crea una freccia in grassetto
Aggiunta di etichette ai connettori
Usa |La tua etichetta| tra i nodi per spiegare il flusso.
Example A -->|Step A process| B B -.->|Conditional| C C ==> D
Questo ti consente di mostrare direttamente decisioni, messaggi o condizioni sulle linee—ottimo per mantenere il tuo diagramma leggibile.
Utilizzo di un Editor Mermaid
Una volta che hai scritto ilMermaid codice per il tuo diagramma swimlane, avrai bisogno di un editor per visualizzarlo. Di seguito sono riportati alcuni editor Mermaid consigliati che puoi utilizzare:
- Mermaid Live Editor.Uno strumento basato su browser che ti consente di incollare il tuo codice e vedere immediatamente il diagramma.
- Markdown Preview Enhanced.Un plugin per Visual Studio Code che visualizza i diagrammi Mermaid all’interno dei file markdown.
- EdrawMax.Supporta il codice Mermaid e la creazione di diagrammi tramite trascinamento della selezione ed è ideale per gli utenti che preferiscono strumenti visivi.
Come generare notazioni Swim Lane di Mermaid con l'IA e modificarle
Mentre imparare le basi di Mermaid è una cosa ottima, è anche utile affidarsi all'IA per ottenere risultati più rapidi. In questo modo, non sarà necessario digitare manualmente il codice.
Puoi utilizzare diversi strumenti come ChatGPT, Claude, Gemini o altri che preferisci.
Passaggio 1
Apri il tuo chatbot IA preferito, quindi crea il tuo prompt che descriva quanto segue:
- 1) che utilizzerà la notazione Mermaid;
- 2) il contenuto della tua swim lane;
- 3) il design del tuo diagramma, se presente. Ricorda che essere il più descrittivo possibile è fondamentale.
Ecco un esempio di prompt: “Crea un diagramma swim lane utilizzando la sintassi/notatione di Mermaid che mostri il flusso delle attività in un contesto di studio legale.”
Passaggio 2
Quindi, copia e incolla il codice generato su Mermaid.
Passaggio 3
Se desideri modificare una qualsiasi parte del diagramma, descrivi la modifica il più precisamente possibile all'IA.
Passaggio 4
Dopo che l'IA ha generato il nuovo codice del diagramma di flusso, copialo e incollalo nuovamente nel sito web live di Mermaid.
Due Esempi di Corsie di Nuoto Creati con la Notazione Mermaid
Flusso della visita medica
Ecco un esempio di diagramma swimlane creato utilizzando la sintassi di Mermaid, che mostra il flusso di una visita medica.
Alcuni punti chiave di design sono:
- Chiara separazione tra i reparti
- Utilizza un sottografo per suddividere il diagramma nei reparti di emergenza, radiologia e cardiologia.
- Applica colori distinti (ad esempio, rosso, blu, verde) a ciascun reparto per una maggiore chiarezza visiva.
- Flusso facile da seguire
- Disporre il processo da sinistra a destra (LR) per mostrare a colpo d'occhio la sequenza di risposta all'emergenza.
- Utilizza un flusso circolare (ad esempio, B → C → D → E → B) per mostrare come test, diagnosi e trattamenti si ripetano in un ciclo.
Flusso di Rimborso Spese
Questo esempio mostra un diagramma swimlane costruito con la sintassi Mermaid, delineando il processo di rimborso spese.
Ecco i punti chiave di progettazione in questo diagramma di flusso:
- Chiara separazione per dipartimento
- Utilizza un sottografo per dividere il flusso nelle sezioni Contabilità, Affari Generali e Richiedente.
- Questo aiuta a chiarire le responsabilità di ciascun dipartimento nel processo.
- Visualizzazione del processo di rimborso
- Disporre i passaggi da domanda ad approvazione fino al pagamento in un da sinistra a destra (LR)direzione.
- Includere un circuito di feedbackper la Passaggio di approvazione per mostrare che le domande incomplete vengono restituite al richiedente.
Domande Frequenti
-
D1. Posso personalizzare i diagrammi swimlane in Mermaid?
R1. Mermaid ha opzioni di stile limitate per impostazione predefinita, ma puoi applicare CSS personalizzato per un maggiore controllo. Un'altra opzione è esportare il diagramma come SVG e modificarlo con un software di grafica. -
D2. Esistono altri strumenti che rendono più semplice la creazione di diagrammi swimlane?
R2. Sì. Se desideri più funzionalità swimlane integrate, prova questi:- EdrawMax:Offre molti modelli e una personalizzazione flessibile.
- Draw.io (diagrams.net):Interfaccia facile da usare con drag-and-drop.
- Microsoft Visio:Ideale per creare diagrammi swimlane dettagliati orientati al business.
-
D3. Mermaid può gestire swimlane con diramazioni condizionali?
R3. Sì. Puoi usare le parentesi graffe {} per rappresentare i punti decisionali, simili ai rombi nei diagrammi di flusso standard. -
D4. Posso inserire un diagramma swimlane di Mermaid in PowerPoint?
R4. Sì. Esporta il tuo diagramma da Mermaid Live Editor come SVG o PNG, quindi inseriscilo in PowerPoint. Si consiglia SVG poiché si ridimensiona senza perdita di qualità e permette ulteriori modifiche.
EdrawMax DesktopEdrawMax Online
