Editor di diagrammi temporali

Timing Chart Editor 操作説明書

PLC・マイコン・上位 PC など、機器どうしの信号のやり取りを「タイミングチャート」として設計し、仕様書・フローチャート・検証用テキストまで一気通貫で作るためのツールです。

1. 概要

Timing Chart Editor は、横軸を Step（時間の区切り）、縦軸を信号とした表の上で波形を塗っていく、表計算ソフトに近い操作感の作図ツールです。BOOL の信号は ON / OFF の波形、数値や状態の信号は値を書いたブロック（バス表記）で表し、値が変わるところは交差（><）で表します。

ブラウザだけで動き、外部のライブラリやサーバーは使いません。入力したデータはこの端末のブラウザの中にだけ自動保存され、どこにも送信されません。作ったチャートは仕様書用の SVG、Draw.io、Markdown に書き出せるほか、同じフォルダにある Flowchart Editor に渡して、制御プログラムの流れ（フローチャート）の下書きを自動で作れます。

2. チュートリアル（最初の 1 枚を作る）

1. ツールバーの「マスター」「スレーブ」に機器名を入れます（例: PLC / サーボ）。方向の表示とフローチャートの担当名に使われます。
2. 左の変数リストの「取込…」を押し、Excel の信号一覧をコピーして貼り付けます。1 行目が見出しなら、列の並び順に関係なく「変数名・型・コメント・方向」を自動で見つけます。
3. 変数をダブルクリック（またはチャートへドラッグ）して行を追加します。行番号をドラッグすると並べ替えられます。
4. BOOL の行をクリック / 横にドラッグして ON の区間を塗ります。数値の行はダブルクリックで値を入力し、値のあるセルから横へドラッグすると延長できます。
5. ツールバーの「矢印」を押し、要求信号の変わり目から、それに応えて変わる信号の変わり目へドラッグして因果関係を引きます。
6. 「出力」→「書き出し…」（Ctrl+E）で Markdown を選び「クリップボードにコピー」を押して、Notion や GitHub に貼り付けます。

ヘルプメニューの「チュートリアル」を開くと、サンプルを読み込んで画面の該当箇所を確かめながら同じ手順をたどれます。

3. 波形の描き方

ツールバーの「エッジ」で、BOOL の切り替わりの描き方を選べます。「垂直」は理想的な論理波形、「斜め」は立ち上がり・立ち下がりに時間がかかる実際の信号に近い表現です。特定の行だけ変えたいときは、行ラベルを右クリックして「エッジ」を選びます。

数値・状態の行（バス表記）は、値が変わるところをいつも交差（><）で描きます。タイミングチャートの決まりごとなので、「エッジ」の設定には従いません。交差の幅は Step の幅についてきます。

4. 連続して変わる量（波形表示）

「位置決め完了はいつ ON になるのか」「圧力がいくつを超えたら加圧完了か」のように、離散信号が変わる条件を仕様書で示したいことがあります。条件になっている軸の位置・速度・アナログ入力のような連続して変わる量は、値のブロックでは描けません。行ラベルを右クリックして「波形で描く」を選ぶと、値を行の高さに対してプロットした波形になります。「行の表示…」では単位（mm・ms・V・rpm など）と目盛り（上下の値）も決められます。目盛りを空にすると、その行の値の範囲に合わせます。複数の行を見比べるときは同じ値を入れてください。

値はこれまでどおりセルに入れます。Excel からの貼り付け・範囲選択・コピー・元に戻すが、そのまま使えます。順に値を打つ代わりに、範囲を選んで「直線（ランプ）で埋める…」（セルの右クリック、または「編集」メニュー）を使うと、始めの値から終わりの値まで一定の割合で埋められます。0 → 100 なら上昇、100 → 0 なら下降です。台形にしたいときは、上りの範囲・平らな範囲・下りの範囲を順に埋めます。

波形の行は表示専用です。フローチャートを作るときは読みません。処理や待ちになるのは、その波形を受けて変わる BOOL の信号（位置決め完了など）のほうです。

Shift+クリックや矢印キーで範囲を選び、Space（反転）・1（ON）・0（OFF）・Delete（消去）でまとめて編集できます。範囲は Excel と相互にコピー・貼り付けできます。

5. 因果関係の矢印

矢印は「A が変わったのを見てから B を変える」という関係を表します。矢印モード中（または Alt を押している間）は、各信号の変わり目に小さな ○ が表示されます。○ は変わり目の上下 2 つの角（High と Low）に出るので、近いほうを掴んでください。数値・状態の信号は交差の中心に 1 つだけです。原因の ○ から結果の ○ へドラッグして離すと矢印になり、矢印の先も掴んだ角を指します。結果は原因と同じ Step か、それより右に置きます。

波形を描き直して変わり目がなくなった矢印は、点線（警告色）で表示されます。矢印をクリックして Delete で消すか、波形を直してください。

6. 設計の考え方（M→S / S→M）

各信号には「誰が出力するか」を方向として付けます。M→S はマスターが出してスレーブが受ける信号（要求・指令）、S→M はスレーブが出してマスターが受ける信号（応答・状態）、内部 は機器の中だけで使う信号です。方向をそろえると、どちらの機器のプログラムで何を書くべきかがはっきりします。

矢印はこの「確かめてから変える」関係をチャート上に明示するものです。矢印を引いておくと、フローチャートを作るときに「どの入力を待ってから、どの出力を変えるか」を矢印どおりに組み立てます。矢印のない変化は、タイマーなど自分の都合で起きる変化として Step の順に並べます。

7. 取り込みと出力

• 取り込み: 「ファイル」→「取り込み…」の 1 か所にまとめてあります。JSON を貼り付ける・変数の一覧（表）を貼り付ける・ファイルを開く、の 3 つから選びます。Excel の貼り付け、CSV / TSV、アドレスマップ（Address Map Editor）の JSON を読み込めます。アドレスや初期値の列は変数リストに保持されます。
• 書き出し: 「出力」→「書き出し…」（Ctrl+E）の 1 か所にまとめてあります。形式の横にどこに貼るためのものかが書いてあるので、そこから選んで「クリップボードにコピー」か「ファイルに保存」を押します。
• 画像（PNG）: コピーして Word・Excel・PowerPoint やメール・チャットにそのまま貼り付けられます。
• SVG: 白地・黒線固定の仕様書用の図。矢印も描かれます。
• Draw.io: 図形として編集できる形式。「Draw.io をコピー」で draw.io の画面へ直接貼り付けられます。
• Markdown: 信号一覧・タイミング表・変化点・因果関係・シーケンス図（Mermaid）をまとめた仕様書。
• AI 検証用テキスト: 生成 AI にロジックの矛盾を指摘してもらうための表形式のテキスト。

8. ショートカットキー

9. データの保存と連携

作業内容はブラウザに自動保存され、次に開いたときに復元されます。ファイルとして残すときは Ctrl+S で JSON に保存します。JSON はプラットフォーム共通のスキーマ（variables と triggers）を含み、ほかの 3 つのツールと同じ形式で変数と因果関係をやり取りできます。ブラウザのデータを消去すると自動保存も消えるため、大切なチャートは必ずファイルに保存してください。

このツールは 4 つの設計ツールの 3 番目です。ツールバー右の行き来ボタンで前後へ移動できます。

1. System Diagram Editor: 機器・ブロック・通信のつながりを決める
2. Address Map Editor: 変数とアドレスを割り付ける（「← アドレスマップ」で開けます。向こうの「タイミングチャートへ →」でこちらに変数が届きます）
3. Timing Chart Editor（このツール）: 時間的な動きと因果関係を決める
4. Flowchart Editor: 「フローチャートへ →」で、因果関係を反映した流れ図を自動生成

この図の考え方（何を 1 枚に載せるか、現場でハマる落とし穴）は タイミングチャートの書き方 に、4 つのツールの一覧は FA Spec Tools のトップページ にまとめています。

10. お問い合わせ

不具合の報告・機能の要望は yk.builds.space@gmail.com までお寄せください。再現手順と、可能であれば保存した JSON を添えていただけると調査が早くなります。