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。 — PLC とロボットのワーク取出しを Timing Chart Editor で描き、SVG で書き出した図。ロボットは取出要求の ON を見てワーク番号を読むので、番号は 1 Step 先に確定させている。縦の薄い線は 5 Step ごと。書き出しの形式に Draw.io を選んで貼っても、波形と矢印の並びは同じ（値の無い区間の点線は入らない）。スマホでは図を横にスクロールするか、押して開く。

1. 点と線で描くなら、方眼を Step の幅に決めてから点を置く

draw.io でタイミングチャートを描くなら、点と線と四角の組み合わせになります。 draw.io（diagrams.net）には、テンプレートが無いからです。図形も、電気の図形集に方形波やパルスの記号がある程度。信号を並べて描くための部品はありません。公式の UML タイミング図の手順も、小さな点と線と四角を組み合わせて描くやり方です。

方眼を Step の幅に決める draw.io の方眼は既定で 10 です。1 Step を方眼 4 つ分（40）のように決め、左側を信号名の欄にします。図形も線の折れ点も方眼に吸い付くので、上下の信号の変わり目がそろいます。変わり目を動かすときは Alt を押しません。押していると、方眼から外れるからです。
BOOL の信号は、点を置いて線でつなぐ 公式の手順では、変わり目ごとに小さな点の図形（ウェイポイント）を置きます。矢印の無い直線でつなぎ、描き終えたら点を見えなくします。 1 本の線に折れ点を足して描いても、見た目は同じです。ただ、Step を足したときに右側の折れ点が付いてきません（2 章）。点をいちいち置くのはそのためです。
数値や状態は、六角形を突き合わせる ワーク番号のような数値は、「12」と書いた六角形です。値が変わる所で、隣の六角形と端を突き合わせます。とがった端どうしが合わさって、変わり目が交差（><）に見えます。
因果関係は、点から点へ矢印でつなぐ 取出要求が ON になる点から、ロボット動作中が ON になる点へ。点の上に出る青い矢印からドラッグし、次の点で離すと線が点につながります。点につないだ矢印は、点を動かすと付いてきます。

2. 直しと書き出しで困る。足した Step に折れ点は付いてこない

draw.io の図は点の位置しか持たず、Step や信号の関係を知りません。「取出完了を 1 Step 遅らせて」と言われるたびに、点や折れ点を 1 つずつ動かし直すことになります。

足した Step に、1 本の線の折れ点は付いてこない — Step を足す操作は、空白を空けるドラッグです。 Alt と Ctrl と Shift を押しながら、チャートのいちばん上の何も無い所で押し、右へ動かします。動くのは、左上の角が押した所より右下にある図形だけです。点で描いた波形なら右側の点が動き、点につないだ線も付いてきます。境目の上の点も動かすには、境目より少し左で押します。 1 本の線に折れ点を足して描いた波形は、線の始まりが左にあるので動きません。右側の折れ点を 1 つずつ動かすことになるでしょう。また、Alt を押しているので、空ける幅は方眼に吸い付きません。空けたあとで動いた点をまとめて選び、Alt を押さずにドラッグして方眼に合わせ直します。
同じ Step で変わる信号は、1 つずつ動かす — 図は「同じ Step で変わる」という関係を持っていません。取出完了の ON を 1 Step 遅らせたら、同じ Step で OFF になるロボット動作中の点も動かします。そのあとの取出要求 OFF と取出完了 OFF の点も、自分で動かします。点につないだ矢印は付いて動きますが、動かし忘れた点があっても図は何も言いません。
図から値を読み返せない — 点を選んで［配置］タブを見ても、出るのは位置の座標（左と上の数）だけです。取出完了の ON が Step 6 か 7 かは、その数から逆算するか、方眼を数えて確かめます。 CSV から図形と線を作る機能はあり、図形の位置も列で決められます。ただ、線の折れ点は書けません。図で直したことも CSV には戻りません。
SVG の文字が、ほかのアプリで崩れる — draw.io の SVG は、文字を HTML で書くのが既定です。書式付きの文字は、SVG の中の HTML（foreignObject）。表示できないアプリでは、文字が簡単な形に置き換わります。「Text is not SVG - cannot display」の注意書きが、その印です。仕様書に貼るなら、図をすべて選び、右のフォーマットパネルの［テキスト］タブを開きます。［ラベルをSVGに変換］に印を入れてから、SVG で書き出します。この項目が見当たらない draw.io なら PNG です。

3. 直しの多いチャートは、エディタで描いて draw.io に貼る

そういうチャートは、Timing Chart Editor で描いて draw.io に貼ります。このサイトの、ブラウザで動くタイミングチャートのエディタです。書き出しは一方通行で、draw.io で直した図はエディタに読み込めません。draw.io の側でするのは、注釈や枠の書き足しだけです。上の図と同じチャートを開いたエディタ（別のタブで開きます）で、下の手順 2〜4 をそのまま試せます。

信号を並べる 割り付け済みなら、nWorkNo や bPickReq はアドレスマップエディタから送ります。使うのは、向こうの「タイミングチャートへ →」。割り付けがまだなら、左の変数リストの「取込…」に信号一覧を貼ります。
波形を塗り、矢印を引く BOOL の行は、マスをクリックするか横にドラッグして ON の区間を塗るだけです。nWorkNo のような数値の行は、マスをダブルクリックして値を書きます。同じ値の区間に延ばすには、値のあるマスから横にドラッグ。矢印は、ツールバーの「矢印」を押してから引きます。ワーク番号が出た変わり目から、取出要求が ON になる変わり目へドラッグします。矢印は座標ではなく、Step の番号で覚えている作りです。チャートを右クリックして Step を挿入すると、後ろの波形と矢印はまとめて 1 Step ずれます。足した Step は全部の行が空（BOOL は OFF、数値は値なし）です。直前の Step で ON だった行や値のあった行は、その 1 マスを塗るか値を延ばして前とつなぎましょう。 OFF になる変わり目の位置に足すと、そこに付いていた矢印は外れて点線になります。その行の 1 マスを ON に塗れば、OFF も 1 Step 後ろへ動いて矢印は実線に戻る仕組みです。
draw.io に貼る 「出力」→「書き出し…」で Draw.io を選び、「クリップボードにコピー」を押します。draw.io で新しいページを開き、Ctrl+V で貼ります。 XML の文字がそのまま貼られたときの入れ方は、次のとおりです。貼られた文字を消し、メニューバーの［その他］→［図を編集する…］を開きます。メニューバーが無い表示なら、ツールバーの［＋］→［高度な設定］の中です。欄には今のページの XML が入っているので、Ctrl+A で選んでから貼り付け、［適用］を押します。［適用］でそのページの中身が置き換わるので、ここも新しいページで行います。「ファイルに保存」した .drawio を draw.io で開いても、同じ図です。
貼った図をグループにして、注釈を足す Ctrl+V で貼った直後は、その図形がすべて選ばれた状態です。［図を編集する…］で入れたときは、Ctrl+A で全部を選びます。そのまま Ctrl+G でグループにしておくと、貼り替えるときはグループを選んで消すだけで済みます。貼られるのは、題名、縮尺、5 Step ごとの Step 番号、信号名と補足です。ほかに、信号ごとの波形の線、数値の六角形、薄い灰色の行の区切りと 5 Step ごとの縦線、点線の矢印。縮尺は、ツールバーの「チャート情報…」で 1 Step の時間を入れたときに付きます。1 Step = 100 ms などの形です。灰色の線もふつうの線なので、要らなければ消しても構いません。 Step の区切りと行の高さは、draw.io の方眼（10）に乗っています。注釈の文字や枠は、方眼に吸い付けて置けば変わり目とそろいます。波形は信号ごとに 1 本の線で、因果関係の矢印も波形につながっていません。draw.io の中で変わり目をずらすと、矢印はその場に残ります。

4. draw.io の上で直された図は、JSON に同じ直しを入れて書き出し直す

draw.io の上で直された波形は、エディタの JSON に同じ直しを入れてから貼り替えます。元になるのは、エディタで Ctrl+S で保存した JSON です（形式は JSON データ構造の仕様）。 .drawio と同じフォルダに、同じ名前で置いておきます。「ワーク取出.drawio」と「ワーク取出.json」のように。 .drawio をロボット側の担当者に渡すと、波形を draw.io の上で直して返してくることがあります。その直しは JSON に入っていないので、次に書き出した図を貼り替えると残りません。返ってきた図と見比べ、エディタで JSON を開いて（Ctrl+O）同じ直しを入れ、書き出し直してから貼り替えます。 draw.io の側で書き足すのは、注釈と図を囲む枠にとどめます。注釈は、「取出要求 ON から 8 秒で取出完了が来なければ異常」のような文です。

この記事の図を作ったツール

この記事の図は、Timing Chart Editor で描き、SVG に書き出したものです。

Timing Chart Editor — 信号を並べて ON の区間を塗り、因果関係の矢印を引きます。書き出しの形式に Draw.io を選ぶと、draw.io に貼れる図になります。

インストールも登録も要らず、ブラウザだけで使えます。