Zeitdiagramm in draw.io erstellen — Zeichnen mit Punkten und Linien, und wo ein neuer Schritt alles verschiebt

Zuletzt aktualisiert: 2026-09-24 ／ Kategorie: Zeitdiagramme, Methodenvergleich

Ein draw.io-Zeitdiagramm übersteht neue Schritte besser, wenn es im Editor gezeichnet und eingefügt wird, als wenn es aus Punkten und Linien besteht. Dieser Leitfaden richtet sich an alle, die das Systemdiagramm in draw.io zeichnen und das Zeitdiagramm in derselben Datei haben wollen.

Zeitdiagramm einer Teileentnahme zwischen SPS und Roboter. nWorkNo (Teilenummer) ist von Schritt 1 bis 7 gleich 12. bPickReq (Entnahmeanforderung) ist von Schritt 2 bis 6 EIN, bRobBusy (Roboter aktiv) von Schritt 3 bis 5, bPickDone (Entnahme fertig) von Schritt 6 bis 7. Die Pfeile: Teilenummer 12 → Entnahmeanforderung EIN, Entnahmeanforderung EIN → Roboter aktiv EIN, Entnahme fertig EIN → Entnahmeanforderung AUS, Entnahmeanforderung AUS → Entnahme fertig AUS. — Eine Teileentnahme zwischen SPS und Roboter, im Timing Chart Editor gezeichnet und als SVG exportiert. Der Roboter liest die Teilenummer, sobald er die Entnahmeanforderung EIN sieht, also steht die Nummer einen Schritt früher fest. Die hellen senkrechten Linien stehen alle 5 Schritte. Als Draw.io exportiert und eingefügt sehen Wellenformen und Pfeile genauso aus (ohne die gepunkteten Linien leerer Bereiche). Auf dem Smartphone die Abbildung seitlich scrollen oder antippen.

1. Wer mit Punkten und Linien zeichnet, setzt erst das Raster auf die Schrittbreite und dann die Punkte

Ein Zeitdiagramm in draw.io ist eine Kombination aus Punkten, Linien und Rechtecken, denn draw.io (diagrams.net) hat weder eine Vorlage noch Formen zum Aufreihen von Signalen. Auch die offizielle Anleitung für UML-Zeitdiagramme baut es aus kleinen Punkten, Linien und Rechtecken.

Das Raster auf die Schrittbreite setzen Das Raster ist standardmäßig 10, also einen Schritt auf vier Rastereinheiten (40) festlegen. Formen und Wegpunkte rasten am Raster ein, sodass die Wechsel verschiedener Zeilen übereinanderstehen. Beim Verschieben eines Wechsels nicht Alt halten, sonst verlässt er das Raster.
BOOL-Signale als Punkte zeichnen, die durch Linien verbunden sind An jedem Wechsel einen kleinen Punkt (eine Wegpunktform) setzen und mit geraden Linien ohne Pfeilspitze verbinden. Eine einzige Linie mit zusätzlichen Wegpunkten sieht gleich aus, aber ihre rechten Wegpunkte folgen nicht, wenn ein Schritt hinzukommt (Abschnitt 2); daher jedes Mal einen Punkt setzen.
Für Zahlen und Zustände Sechsecke aneinanderstoßen lassen Eine Zahl wie die Teilenummer ist ein Sechseck mit „12“. Wo sich der Wert ändert, stößt es an das nächste Sechseck; die Spitzen treffen sich, und der Wechsel sieht wie eine Kreuzung aus (><).
Ursache und Wirkung als Pfeile von Punkt zu Punkt zeichnen Vom Punkt, an dem die Entnahmeanforderung EIN wird, zum Punkt, an dem Roboter aktiv EIN wird. Vom blauen Pfeil ziehen, der über einem Punkt erscheint, und auf dem nächsten Punkt loslassen; die Linie verbindet sich damit. Ein an einen Punkt angebundener Pfeil folgt, wenn der Punkt verschoben wird.

2. Ändern und Exportieren tun weh: Wegpunkte folgen einem neuen Schritt nicht

Eine draw.io-Zeichnung kennt nur Punktpositionen, nichts von Schritten oder Beziehungen zwischen Signalen. Jedes „Entnahme fertig um einen Schritt verzögern“ heißt, Punkte und Wegpunkte einzeln zu verschieben.

Die Wegpunkte einer einzelnen Linie folgen einem neuen Schritt nicht — Einen Schritt einzufügen ist ein Ziehen, das Platz schafft. Mit gehaltenem Alt, Strg und Umschalt nach rechts ziehen, und nur die Formen rechts unterhalb des Klicks bewegen sich. Bei Wellenformen aus Punkten wandern die rechten Punkte, aber eine als eine Linie gezeichnete Wellenform beginnt links und bewegt sich nicht.
Signale, die im selben Schritt wechseln, werden einzeln verschoben — Die Zeichnung kennt keinen Begriff von „wechselt im selben Schritt“. Entnahme fertig EIN um einen Schritt verzögern, und man verschiebt auch den Punkt, an dem Roboter aktiv in diesem Schritt AUS wird, dann die Punkte für Entnahmeanforderung AUS und Entnahme fertig AUS dahinter. An Punkte angebundene Pfeile folgen, aber die Zeichnung sagt nichts über einen vergessenen Punkt.
Werte lassen sich aus der Zeichnung nicht zurücklesen — Einen Punkt markieren, und der Reiter Anordnen zeigt nur Koordinaten. Ob Entnahme fertig in Schritt 6 oder 7 EIN wird, muss aus dieser Zahl zurückgerechnet oder am Raster abgezählt werden. Formen und Linien lassen sich aus CSV erzeugen, Wegpunkte aber nicht, und Änderungen in der Zeichnung fließen nie in die CSV zurück.
SVG-Text bricht in anderen Anwendungen — draw.io schreibt SVG-Text standardmäßig als HTML, und Anwendungen, die das nicht darstellen können, ersetzen den Text durch einen groben Ersatz. Für eine Spezifikation im Reiter Text „Beschriftungen in SVG umwandeln“ anhaken oder in draw.io-Versionen ohne diese Option PNG verwenden.

3. Diagramme, die sich oft ändern: im Editor zeichnen und in draw.io einfügen

Solche Diagramme werden im Timing Chart Editor gezeichnet und in draw.io eingefügt. Der Export ist eine Einbahnstraße: Ein in draw.io geändertes Diagramm lässt sich nicht zurückladen. Auf der draw.io-Seite nur Anmerkungen und Rahmen ergänzen. Der Editor mit dem obigen Diagramm bereits geöffnet (öffnet in einem neuen Tab) lässt die Schritte 2 bis 4 unten direkt ausprobieren.

Die Signale aufreihen Sind sie schon zugewiesen, nWorkNo und bPickReq aus dem Address Map Editor mit dessen „Zum Zeitdiagramm →“ senden. Wenn nicht, die Signalliste in „Importieren…“ der Variablenliste links einfügen.
Wellenformen färben und Pfeile zeichnen In BOOL-Zeilen seitlich ziehen, um EIN zu färben; in Zahlenzeilen doppelklicken, um einen Wert einzutragen. In der Werkzeugleiste „Pfeil“ drücken und vom Wechsel, an dem die Teilenummer erscheint, zum Wechsel ziehen, an dem die Entnahmeanforderung EIN wird. Pfeile werden mit der Schrittnummer gespeichert, sodass ein eingefügter Schritt die Wellenformen und Pfeile dahinter gemeinsam verschiebt.
In draw.io einfügen Beim Export Draw.io wählen, kopieren und mit Strg+V auf einer neuen Seite einfügen. Landet das XML als reiner Text, diesen löschen und Extras → Diagramm bearbeiten… öffnen; den Inhalt mit Strg+A markieren, einfügen und Übernehmen drücken.
Das eingefügte Diagramm gruppieren und Anmerkungen ergänzen Direkt nach dem Einfügen mit Strg+G gruppieren, dann ist das spätere Ersetzen nur ein Löschen. Die eingefügten Formen liegen auf dem Raster (10), also stehen am Raster eingerastete Anmerkungen und Rahmen bündig mit den Wechseln. Wellenformen und Pfeile sind nicht verbunden; wer einen Wechsel in draw.io verschiebt, lässt den Pfeil stehen.

4. Ein in draw.io geändertes Diagramm: dieselbe Änderung im JSON machen und neu exportieren

Eine in draw.io geänderte Wellenform wird im JSON des Editors nachgezogen, bevor das Diagramm ersetzt wird. Gibt man die .drawio dem Roboterkollegen, kommt sie mitunter mit in draw.io geänderten Wellenformen zurück; die Änderung fehlt im JSON, und der nächste Export löscht sie. Das JSON mit Strg+S speichern und unter demselben Namen neben der .drawio ablegen (JSON-Datenformat).

Das Werkzeug für die Abbildung in diesem Artikel

Die Abbildung in diesem Artikel wurde im Timing Chart Editor gezeichnet und als SVG exportiert.

Timing Chart Editor — Signale aufreihen, EIN-Bereiche färben, Ursache-Wirkung-Pfeile zeichnen. Mit Draw.io als Exportformat entsteht ein Diagramm, das sich in draw.io einfügen lässt.

Ohne Installation und Registrierung, direkt im Browser.