System Diagram Editor 操作説明書
装置のシステム構成図（機器と通信のつながり）を描きながら、そのまま「アドレスマップの入れ物」として使えるデータを作るツールです。
1. 概要
System Diagram Editor は、PLC・サーボアンプ・ロボット・リモート I/O などの機器を置き、通信線でつないでシステム構成図を作るツールです。ふつうの作図ソフトと違うのは、描いた図がそのまま構造化されたデータになる点です。機器の位置は x, y、つながりは「どの機器とどの機器が、どの通信で結ばれているか」という関係として保存され、機器の中に作った「ブロック（モジュール・機能単位）」は、そのまま Address Map Editor の入れ物になります。
自由に図形や文字を置く汎用の作図ソフトではありません。描けるのは「機器」と「通信線」と「ブロック」だけですが、そのぶん図と仕様（変数・アドレス）が食い違わなくなります。ブラウザだけで動き、データはこの端末の中にしか保存されません。
2. チュートリアル（最初の構成図）
- ツールバーで種類「PLC / コントローラ」を選び「機器」を押します。名前を入力して Enter。
- 同じように「サーボアンプ」「ロボット」「リモート I/O」などを追加します。
- 機器を選ぶと右側に ○ が出ます。これを相手の機器へドラッグすると通信線が引かれます。
- 線をクリックし、右のプロパティで通信の種類（EtherCAT・CC-Link IE・RS-232C など）を選びます。
- 機器を選んで「ブロック」を押し、その機器の中の機能単位（指令・状態・パラメータなど）を作ります。
- Ctrl+L で自動整列。仕様書に貼るなら「出力」→「書き出し…」（Ctrl+E）、次の工程へ進むなら「アドレスマップへ →」。
3. 機器とブロック
機器には種類（PLC・HMI・サーボアンプ・インバータ・ロボット・リモート I/O・センサ／カメラ・ネットワーク機器・PC・その他）、型式、IP アドレス／局番、備考を持たせられます。種類は図の色分けと、Draw.io へ書き出したときの図形に反映されます。
ブロックは機器の中の機能単位です。「指令」「状態」「パラメータ」のように分けておくと、アドレスマップ側でその単位ごとにアドレスを割り付けたり、PLC ソフトへコピーしたりできます。ブロックを作らなくても構いません（アドレスマップ側で「未分類」として扱われます）。
4. 通信線のつなぎ方
機器を選ぶと右端に ○（ポート）が出ます。これを相手の機器へドラッグすると線が引かれます。線を選ぶと、通信の種類・ラベル・向き（片方向／双方向）をプロパティで変えられます。EtherCAT や CC-Link IE などのフィールドバスは実線、RS-232C などのシリアルは破線、デジタル I/O は点線で描き分けます。
同じ機器の組に 2 本以上の線を引くこともできます（例: EtherNet/IP と デジタル I/O の併用）。線のラベルには「Req/Ack」「局番 1」などの補足を書けます。
線の経路は機器の位置関係から自動で決まりますが、思いどおりにならない線は手で整えられます。線の途中をドラッグすると、その部分を平行に動かせます。動かすと折れ点（ウェイポイント）が線に記録され、以後は自動の経路の代わりにその折れ点を経由して描かれます。線を選ぶと折れ点が □ / ■ で表示され、ドラッグで位置を変えられます。つなぐ相手を間違えたときは、線を選んで端の □（つなぎ元）／●（つなぎ先）を別の機器へドラッグすれば付け替えられます。
折れ点をダブルクリックするか、動かした部分を元の直線の上に戻すと、折れ点が消えて自動の経路に戻ります。線を右クリックして「経路を自動に戻す」でも戻せます。自動整列（Ctrl+L）を行うと、すべての線が自動の経路に戻ります。折れ点は JSON の links[] に waypoints として保存されます。
どちらの端がマスターかも線ごとに決められます（線を選んでプロパティの「マスター」、または右クリック）。マスター側の端に M、スレーブ側に S が付きます。あるネットワークのスレーブが別のネットワークのマスターを兼ねる多段の構成（例: 管理 PC のスレーブである PLC が、リモート I/O のマスターを兼ねる）は、それぞれの線で指定すれば表せます。自動整列では、どこのスレーブでもないマスターがいちばん上に来ます。
5. 配置と自動整列
機器はドラッグで動かせます。動かした位置は座標データとして保存されるので、次に開いたときも同じ並びです。Ctrl+L の自動整列は、接続の関係から階層（PLC を上に、つながる機器を下に）を計算して並べ直します。まず自動整列してから、気になる機器だけ手で動かす使い方がおすすめです。
Shift か Ctrl を押しながらクリックするか、空いた所をドラッグして囲むと、複数の機器を選べます。選んだ機器はまとめてドラッグで動かせるほか、Ctrl+矢印で少しずつずらしたり、コピー・複製・削除したりできます。両端とも選んだ機器の線は、手で整えた経路ごと一緒に動きます。
6. 図と表の書き出し
書き出しは「出力」→「書き出し…」（Ctrl+E）の 1 か所にまとめてあります。形式の横にどこに貼るためのものかが書いてあるので、そこから選んで「クリップボードにコピー」か「ファイルに保存」を押します。選んだ形式は覚えているので、次からは開いて押すだけです。
- SVG: 白地・黒線の仕様書用の図。ファイルに保存して Word・Excel・PowerPoint の［挿入］→［画像］で読み込むと、拡大しても線がぼけません。
- 画像（PNG）: コピーして Word・Excel・PowerPoint やメール・チャットにそのまま貼り付けられます。
- Draw.io: 図形として編集できる形式。コピーして draw.io の画面で Ctrl+V。
- Markdown: 機器一覧・接続一覧の表と Mermaid 形式の構成図。GitHub や Notion に貼るとそのまま図として表示されます。
- JSON: 4 つのツール共通の形式。AI に読ませたり、ほかのツールへ渡したりできます。
7. 設計の流れ（4 つのツール）
このツールは、次の流れの入り口です。
- System Diagram Editor（このツール）: 機器・ブロック・通信を決める
- Address Map Editor: その入れ物に変数とアドレスを割り付ける
- Timing Chart Editor: 変数の時間的な動き（ハンドシェイク）と因果関係を決める
- Flowchart Editor: 因果関係からプログラムの流れに落とす
各ツールのツールバー右にある「→」のボタンで、データを持ったまま次のツールへ進めます。戻るときも同じ場所のボタンから行き来できます。1 つのツールだけを単体で使っても構いません。
8. ショートカットキー
| キー | 動作 |
|---|
| Ins | 機器を追加 |
| F2 / 文字キー | 名前の編集 |
| Delete | 選択中の機器・接続を削除（Ctrl+Z で戻せます） |
| Ctrl+L / Ctrl+0 | 自動整列 / 全体を表示 |
| Ctrl+D | 選択中の機器を複製 |
| Ctrl+C / X / V | 選んだ機器のコピー / 切り取り / 貼り付け |
| Ctrl+A | すべての機器を選択 |
| 矢印キー / Ctrl+矢印 | となりの機器へ選択を移す / 選んだ機器を少しずつずらす |
| Ctrl+Z / Ctrl+Y | 元に戻す / やり直し |
| Ctrl+Alt+N | 新規 |
| Ctrl+S / Ctrl+O | 保存 / 開く |
| Space+ドラッグ / Ctrl+ホイール | 画面の移動 / 拡大縮小 |
| F1 | 操作一覧 |
この図の考え方（何を 1 枚に載せるか、現場でハマる落とし穴）は システム構成図の書き方 に、4 つのツールの一覧は FA Spec Tools のトップページ にまとめています。
不具合の報告・機能の要望は yk.builds.space@gmail.com までお寄せください。再現手順と、可能であれば保存した JSON を添えていただけると調査が早くなります。