Hacer un cronograma en draw.io — Dibujar con puntos y líneas, y dónde se rompe al añadir un Step

Última actualización: 2026-09-24 ／ Categoría: Cronogramas, comparación de métodos

Un cronograma (diagrama de tiempos) en draw.io resiste mejor los Steps añadidos si se dibuja en el editor y se pega que si se dibuja con puntos y líneas. Esta guía es para quien dibuja el diagrama del sistema en draw.io y quiere el cronograma en el mismo archivo.

Cronograma de la toma de una pieza entre un PLC y un robot. nWorkNo (número de pieza) vale 12 del Step 1 al 7. bPickReq (petición de toma) está en ON del Step 2 al 6, bRobBusy (robot ocupado) del Step 3 al 5 y bPickDone (toma completada) del Step 6 al 7. Las flechas: número de pieza 12 → petición de toma ON, petición de toma ON → robot ocupado ON, toma completada ON → petición de toma OFF, petición de toma OFF → toma completada OFF. — Toma de una pieza entre un PLC y un robot, dibujada en el Timing Chart Editor y exportada a SVG. El robot lee el número de pieza cuando ve la petición de toma en ON, así que el número queda fijado un Step antes. Las líneas verticales tenues van cada 5 Steps. Si se exporta en formato Draw.io y se pega, las formas de onda y las flechas quedan igual (sin las líneas de puntos de los tramos sin valor). En el móvil, desplace la figura en horizontal o tóquela para abrirla.

1. Si dibuja con puntos y líneas, fije la cuadrícula al ancho del Step antes de colocar los puntos

Un cronograma en draw.io es una combinación de puntos, líneas y rectángulos, porque draw.io (diagrams.net) no tiene ni plantilla ni formas para alinear señales. Las instrucciones oficiales para diagramas de tiempo UML también lo construyen con puntos pequeños, líneas y rectángulos.

Fijar la cuadrícula al ancho del Step La cuadrícula es 10 por defecto, así que fije un Step en cuatro unidades de cuadrícula (40). Las formas y los puntos de paso de las líneas se ajustan a la cuadrícula, de modo que los cambios de las distintas filas quedan alineados. No mantenga pulsada Alt al mover un cambio, porque se sale de la cuadrícula.
Dibujar las señales BOOL con puntos unidos por líneas Coloque un punto pequeño (forma de punto de paso) en cada cambio y únalos con líneas rectas sin punta de flecha. Una sola línea con puntos de paso añadidos tiene el mismo aspecto, pero sus puntos de paso de la derecha no siguen cuando se añade un Step (apartado 2), así que coloque un punto cada vez.
Para números y estados, unir hexágonos por los extremos Un número como el número de pieza es un hexágono con el texto «12». Donde cambia el valor, se une por el extremo con el hexágono siguiente; las puntas se encuentran y el cambio se ve como un cruce (><).
Trazar las relaciones causales como flechas de punto a punto Desde el punto donde la petición de toma pasa a ON hasta el punto donde robot ocupado pasa a ON. Arrastre desde la flecha azul que aparece sobre un punto y suelte en el siguiente punto; la línea queda conectada. Una flecha conectada a un punto lo sigue cuando el punto se mueve.

2. Corregir y exportar da problemas: los puntos de paso no siguen al Step añadido

Un dibujo de draw.io solo guarda posiciones de puntos; no sabe nada de Steps ni de relaciones entre señales. Cada «retrasa la toma completada un Step» supone volver a mover los puntos y los puntos de paso uno a uno.

Los puntos de paso de una sola línea no siguen al Step añadido — Añadir un Step es un arrastre que abre espacio. Arrastre a la derecha con Alt, Ctrl y Mayús pulsadas y solo se mueven las formas que están abajo y a la derecha del clic. En una forma de onda dibujada con puntos se mueven los puntos de la derecha, pero una forma de onda dibujada como una sola línea empieza a la izquierda y no se mueve.
Las señales que cambian en el mismo Step se mueven una a una — El dibujo no tiene la noción de «cambia en el mismo Step». Si retrasa un Step la toma completada ON, también tiene que mover el punto donde robot ocupado pasa a OFF en ese Step, y después los puntos de petición de toma OFF y toma completada OFF. Las flechas conectadas a puntos los siguen, pero el dibujo no avisa de ningún punto que haya olvidado.
No se pueden leer valores desde el dibujo — Seleccione un punto y la pestaña Organizar solo muestra coordenadas. Si la toma completada pasa a ON en el Step 6 o en el 7 hay que deducirlo de ese número o contarlo en la cuadrícula. Existe una función para crear formas y líneas desde CSV, pero no admite puntos de paso, y lo corregido en el dibujo nunca vuelve al CSV.
El texto del SVG se rompe en otras aplicaciones — draw.io escribe por defecto el texto del SVG como HTML, y las aplicaciones que no lo pueden mostrar lo sustituyen por una forma tosca. Para una especificación, marque Convertir etiquetas a SVG en la pestaña Texto, o use PNG en las versiones de draw.io que no lo tienen.

3. Los cronogramas que se corrigen mucho se dibujan en el editor y se pegan en draw.io

Esos cronogramas se dibujan en el Timing Chart Editor y se pegan en draw.io. La exportación es de un solo sentido: un cronograma corregido en draw.io no se puede volver a cargar en el editor. En draw.io solo se añaden notas y marcos. El editor con el cronograma de arriba ya abierto (se abre en otra pestaña) permite probar tal cual los pasos 2 a 4 de abajo.

Alinear las señales Si ya están asignadas, envíe nWorkNo y bPickReq desde el Address Map Editor con su «Al cronograma →». Si aún no lo están, pegue la lista de señales en «Importar…» de la lista de variables de la izquierda.
Pintar las formas de onda y trazar las flechas En las filas BOOL, arrastre en horizontal para pintar el ON; en las filas numéricas, haga doble clic para escribir el valor. Pulse «Flecha» en la barra de herramientas y arrastre desde el cambio donde aparece el número de pieza hasta el cambio donde la petición de toma pasa a ON. Las flechas se guardan por número de Step, así que al insertar un Step las formas de onda y las flechas posteriores se desplazan juntas.
Pegar en draw.io Elija Draw.io en la exportación, copie y pegue en una página nueva con Ctrl+V. Si el XML se pega como texto plano, bórrelo y abra Extras → Editar diagrama…; seleccione el contenido con Ctrl+A, pegue y pulse Aplicar.
Agrupar el cronograma pegado y añadir notas Si lo agrupa con Ctrl+G nada más pegarlo, sustituirlo después es solo borrarlo. Las formas pegadas están sobre la cuadrícula (10), así que los textos de las notas y los marcos ajustados a la cuadrícula quedan alineados con los cambios. Las formas de onda y las flechas no están conectadas: si mueve un cambio dentro de draw.io, la flecha se queda donde estaba.

4. Si el cronograma se corrige en draw.io, haga la misma corrección en el JSON y vuelva a exportar

Una forma de onda corregida en draw.io se vuelve a corregir en el JSON del editor antes de sustituir el cronograma. Si entrega el .drawio al responsable del robot, puede devolvérselo con las formas de onda corregidas en draw.io; esa corrección no está en el JSON, así que la siguiente exportación la borra. Guarde el JSON con Ctrl+S y déjelo junto al .drawio con el mismo nombre (especificación de la estructura de datos JSON).

La herramienta con la que se hizo la figura de este artículo

La figura de este artículo se dibujó en el Timing Chart Editor y se exportó a SVG.

Timing Chart Editor — Alinee las señales, pinte los tramos ON y trace las flechas de causalidad. Si elige Draw.io como formato de exportación, obtiene un diagrama que se puede pegar en draw.io.

Sin instalación ni registro. Funciona solo con el navegador.