用 draw.io 製作時序圖 — 用點與線畫的步驟，以及加 Step 會走樣的地方

最後更新: 2026-09-24 ／分類: 時序圖、方法比較

draw.io 的時序圖，在編輯器畫好再貼上，比用點與線畫的更禁得起加 Step。本文寫給用 draw.io 畫架構圖、也想把時序圖放進同一個檔案的人。

PLC 與機器人的工件取出時序圖。nWorkNo（工件編號）從 Step 1 到 7 是 12。bPickReq（取出要求）從 Step 2 到 6 為 ON，bRobBusy（機器人動作中）從 Step 3 到 5 為 ON，bPickDone（取出完成）從 Step 6 到 7 為 ON。箭頭：工件編號 12 → 取出要求 ON、取出要求 ON → 機器人動作中 ON、取出完成 ON → 取出要求 OFF、取出要求 OFF → 取出完成 OFF。 — 用 Timing Chart Editor 畫 PLC 與機器人的工件取出，並匯出成 SVG 的圖。機器人看到取出要求 ON 才讀工件編號，所以編號提前 1 個 Step 確定。淡的直線每 5 個 Step 一條。匯出格式選 Draw.io 貼上後，波形與箭頭的排列相同（沒有值的區間不會有點線）。手機上可橫向捲動圖，或點按開啟。

1. 要用點與線畫，先把格線設成 Step 的寬度再放點

在 draw.io 畫時序圖，就是點、線與方框的組合。因為 draw.io（diagrams.net）既沒有範本，也沒有用來排列訊號的元件。官方的 UML 時序圖步驟也是把小點、線與方框組合起來畫。

把格線設成 Step 的寬度 格線預設是 10，所以把 1 個 Step 定為 4 格（40）。圖形與線的折點都會吸附格線，上下訊號的變化點就會對齊。移動變化點時不要按 Alt，否則會脫離格線。
BOOL 訊號放點再用線連 每個變化點放一個小點（航點圖形），用沒有箭頭的直線連起來。在一條線上加折點來畫，外觀也一樣。但加 Step 時右側的折點不會跟著動（第 2 節），所以每個變化點都放點。
數值與狀態用六角形對接 像工件編號這種數值，是寫著「12」的六角形。在值改變的地方，與相鄰的六角形端點對接。尖端互相接合，變化點就看起來像交叉（><）。
因果關係用箭頭從點連到點 從取出要求變 ON 的點，連到機器人動作中變 ON 的點。從點上方出現的藍色箭頭拖曳，在下一個點放開，線就會連到點上。連到點上的箭頭，移動點時會跟著動。

2. 修改與匯出會遇到困難。折點不會跟著加上的 Step 動

draw.io 的圖只有點的位置，不知道 Step 或訊號之間的關係。每次被要求「把取出完成延後 1 個 Step」，就得把點與折點一個一個重新移動。

單一線條的折點不會跟著加上的 Step 動 — 加 Step 的操作是拖曳出空白。按住 Alt、Ctrl、Shift 往右拖曳，只有按下位置右下方的圖形會動。用點畫的波形右側的點會動，但用一條線畫的波形起點在左邊，所以不會動。
同一 Step 變化的訊號要一個一個移 — 圖沒有「在同一 Step 變化」這種關係。把取出完成的 ON 延後 1 個 Step，同一 Step 變 OFF 的機器人動作中的點也要移。之後的取出要求 OFF 與取出完成 OFF 的點，也要自己移。連到點上的箭頭會跟著動，但就算有忘記移的點，圖也不會提醒。
無法從圖讀回值 — 選取點看［排列］頁籤，只會顯示位置座標。取出完成的 ON 是 Step 6 還是 7，得從數字反算或數格線確認。雖然有從 CSV 產生圖形與線的功能，但寫不了線的折點，在圖上的修改也不會回到 CSV。
SVG 的文字在其他應用程式會走樣 — draw.io 的 SVG 預設用 HTML 寫文字。無法顯示的應用程式會把那些文字換成簡陋的形式。要貼進規格書，就在［文字］頁籤勾選［將標籤轉換為 SVG］，沒有這個選項的 draw.io 版本就用 PNG。

3. 修改多的時序圖，在編輯器畫好再貼到 draw.io

這種時序圖，用 Timing Chart Editor 畫好再貼到 draw.io。匯出是單向的，在 draw.io 修改的圖無法讀回編輯器。在 draw.io 那邊只做加註解與框線。已開啟與上圖相同時序圖的編輯器（在新分頁開啟）可直接試下面的步驟 2〜4。

排列訊號 已分配位址的話，nWorkNo、bPickReq 從Address Map Editor送過來。用的是那邊的「送到時序圖 →」。還沒分配的話，把訊號清單貼到左側變數清單的「匯入…」。
塗波形、畫箭頭 BOOL 的列橫向拖曳塗 ON，數值的列雙擊輸入值即可。箭頭按工具列的「箭頭」，從工件編號出現的變化點拖到取出要求變 ON 的變化點。箭頭以 Step 編號記錄，所以插入 Step 時，後面的波形與箭頭會一起移動。
貼到 draw.io 匯出時選 Draw.io 複製，在新頁面按 Ctrl+V 貼上即可。若 XML 文字被原樣貼上，就刪掉並開啟［其他］→［編輯圖表…］。用 Ctrl+A 選取欄位內容後貼上，按［套用］。
把貼上的圖群組化，再加註解 貼上後立刻按 Ctrl+G 群組化，之後替換只要刪掉就好。貼上的圖形都在格線（10）上，註解文字與框線吸附格線放置就會與變化點對齊。波形與箭頭沒有相連，所以在 draw.io 內移動變化點，箭頭會留在原地。

4. 在 draw.io 上被修改的圖，把同樣的修改放進 JSON 再重新匯出

在 draw.io 上被修改的波形，先把同樣的修改放進編輯器的 JSON 再替換。把 .drawio 交給機器人側的負責人，有時會在 draw.io 上改了波形再回傳。那個修改不在 JSON 裡，下次匯出的圖一替換就會消失。JSON 用 Ctrl+S 儲存，和 .drawio 用相同名稱放在一起（JSON 資料結構規格）。

製作本文的圖所用的工具

本文的圖是用 Timing Chart Editor 畫好，再匯出成 SVG 的。

Timing Chart Editor — 排列訊號、塗 ON 的區間、畫因果關係的箭頭。匯出格式選 Draw.io，就成為可貼到 draw.io 的圖。

不用安裝也不用註冊，只要瀏覽器就能使用。

yk.builds