Creare un diagramma temporale in draw.io — Disegnare con punti e linee, e dove si rompe aggiungendo uno Step

Ultimo aggiornamento: 2026-09-24 ／ Categoria: Diagrammi temporali, confronto tra metodi

Un diagramma temporale in draw.io regge meglio gli Step aggiunti se lo disegni nell'editor e lo incolli, anziché con punti e linee. Questa guida è per chi disegna lo schema di sistema in draw.io e vuole il diagramma nello stesso file.

Diagramma temporale del prelievo di un pezzo tra PLC e robot. nWorkNo (numero pezzo) è 12 dallo Step 1 al 7. bPickReq (richiesta di prelievo) è ON dallo Step 2 al 6, bRobBusy (robot in movimento) dallo Step 3 al 5, bPickDone (prelievo completato) dallo Step 6 al 7. Le frecce: numero pezzo 12 → richiesta di prelievo ON, richiesta di prelievo ON → robot in movimento ON, prelievo completato ON → richiesta di prelievo OFF, richiesta di prelievo OFF → prelievo completato OFF. — Prelievo di un pezzo tra PLC e robot, disegnato nel Timing Chart Editor ed esportato in SVG. Il robot legge il numero del pezzo quando vede la richiesta di prelievo passare a ON, quindi il numero è fissato uno Step prima. Le linee verticali sottili sono ogni 5 Step. Esportato in formato Draw.io e incollato, forme d'onda e frecce vengono uguali (senza le linee tratteggiate degli intervalli senza valore). Su smartphone, scorri la figura in orizzontale o toccala per aprirla.

1. Se disegni con punti e linee, imposta la griglia sulla larghezza dello Step prima di posare i punti

Un diagramma temporale in draw.io è una combinazione di punti, linee e rettangoli, perché draw.io (diagrams.net) non ha né un modello né forme per allineare i segnali. Anche le istruzioni ufficiali per i diagrammi temporali UML lo costruiscono con piccoli punti, linee e rettangoli.

Imposta la griglia sulla larghezza dello Step La griglia è 10 per impostazione predefinita, quindi fai uno Step pari a quattro unità di griglia (40). Le forme e i punti intermedi delle linee si agganciano alla griglia, così le transizioni delle diverse righe si allineano. Non tenere premuto Alt mentre sposti una transizione, altrimenti esce dalla griglia.
Disegna i segnali BOOL come punti uniti da linee Posa un piccolo punto (forma waypoint) a ogni transizione e uniscili con linee rette senza punta di freccia. Una sola linea con punti intermedi aggiunti ha lo stesso aspetto, ma i suoi punti intermedi a destra non seguono quando aggiungi uno Step (sezione 2), quindi posa un punto ogni volta.
Accosta esagoni per numeri e stati Un numero come il numero del pezzo è un esagono con l'etichetta «12». Dove il valore cambia, accostalo all'esagono successivo; le punte si incontrano e il cambio appare come un incrocio (><).
Disegna le relazioni causali come frecce da punto a punto Dal punto in cui la richiesta di prelievo passa a ON al punto in cui robot in movimento passa a ON. Trascina dalla freccia blu che compare sopra un punto e rilascia sul punto successivo; la linea si collega al punto. Una freccia collegata a un punto lo segue quando il punto si sposta.

2. Modifiche ed esportazione danno problemi: i punti intermedi non seguono lo Step aggiunto

Un disegno draw.io contiene solo le posizioni dei punti; non sa nulla degli Step né delle relazioni tra i segnali. Ogni «ritarda prelievo completato di uno Step» significa spostare punti e punti intermedi uno alla volta.

I punti intermedi di una sola linea non seguono lo Step aggiunto — Aggiungere uno Step è un trascinamento che apre spazio. Trascina verso destra tenendo premuti Alt, Ctrl e Shift e si spostano solo le forme in basso a destra del punto di clic. Le forme d'onda disegnate a punti spostano i punti di destra, ma una forma d'onda disegnata come una sola linea inizia a sinistra e non si sposta.
I segnali che cambiano nello stesso Step si spostano uno alla volta — Il disegno non ha il concetto di «cambia nello stesso Step». Ritarda prelievo completato ON di uno Step e devi spostare anche il punto in cui robot in movimento passa a OFF in quello Step, poi i punti di richiesta di prelievo OFF e prelievo completato OFF che seguono. Le frecce collegate ai punti seguono, ma il disegno non dice nulla di un punto dimenticato.
I valori non si possono rileggere dal disegno — Seleziona un punto e la scheda Disponi mostra solo le coordinate. Se prelievo completato passa a ON allo Step 6 o 7 va ricavato da quel numero o contato sulla griglia. Forme e linee si possono generare da CSV, ma non i punti intermedi, e le modifiche fatte nel disegno non tornano mai nel CSV.
Il testo dell'SVG si rompe in altre applicazioni — draw.io scrive il testo dell'SVG come HTML per impostazione predefinita, e le applicazioni che non lo sanno visualizzare lo sostituiscono con una resa grossolana. Per una specifica, spunta Converti etichette in SVG nella scheda Testo, oppure usa PNG nelle versioni di draw.io che non ce l'hanno.

3. I diagrammi che cambiano spesso: disegnali nell'editor e incollali in draw.io

Questi diagrammi si disegnano nel Timing Chart Editor e si incollano in draw.io. L'esportazione è a senso unico: un diagramma modificato in draw.io non si può ricaricare nell'editor. Sul lato draw.io aggiungi solo note e cornici. L'editor con il diagramma qui sopra già aperto (si apre in una nuova scheda) ti permette di provare i passi da 2 a 4 qui sotto così come sono.

Allinea i segnali Se sono già assegnati, invia nWorkNo e bPickReq dall'Address Map Editor con il suo «Al diagramma temporale →». Altrimenti incolla l'elenco dei segnali in «Importa…» nell'elenco variabili a sinistra.
Colora le forme d'onda e traccia le frecce Nelle righe BOOL trascina in orizzontale per colorare l'ON; nelle righe numeriche fai doppio clic per scrivere il valore. Premi «Freccia» nella barra degli strumenti e trascina dalla transizione in cui compare il numero del pezzo alla transizione in cui la richiesta di prelievo passa a ON. Le frecce sono memorizzate per numero di Step, quindi inserendo uno Step le forme d'onda e le frecce successive si spostano insieme.
Incolla in draw.io Scegli Draw.io nell'esportazione, copia e incolla in una nuova pagina con Ctrl+V. Se l'XML viene incollato come testo semplice, cancellalo e apri Extra → Modifica diagramma…; seleziona il contenuto con Ctrl+A, incolla e premi Applica.
Raggruppa il diagramma incollato e aggiungi le note Raggruppalo con Ctrl+G subito dopo averlo incollato, così sostituirlo in seguito è solo una cancellazione. Le forme incollate stanno sulla griglia (10), quindi note e cornici agganciate alla griglia si allineano con le transizioni. Forme d'onda e frecce non sono collegate, quindi spostando una transizione dentro draw.io la freccia resta dov'era.

4. Un diagramma modificato in draw.io: riporta la stessa modifica nel JSON ed esporta di nuovo

Una forma d'onda modificata in draw.io va rifatta nel JSON dell'editor prima di sostituire il diagramma. Consegna il .drawio al responsabile del robot e può tornare con le forme d'onda modificate in draw.io; quella modifica non è nel JSON, quindi la sostituzione con l'esportazione successiva la cancella. Salva il JSON con Ctrl+S e tienilo accanto al .drawio con lo stesso nome (formato dati JSON).

Lo strumento usato per la figura di questo articolo

La figura di questo articolo è stata disegnata nel Timing Chart Editor ed esportata in SVG.

Timing Chart Editor — Allinea i segnali, colora gli intervalli ON, traccia le frecce causali. Scegli Draw.io come formato di esportazione per ottenere un diagramma da incollare in draw.io.

Nessuna installazione, nessuna registrazione. Funziona nel browser.