System Diagram Editor 操作説明書

装置のシステム構成図（機器と通信のつながり）を描きながら、そのまま「アドレスマップの入れ物」として使えるデータを作るツールです。

1. 概要

System Diagram Editor は、PLC・サーボアンプ・ロボット・リモート I/O などの機器を置き、通信線でつないでシステム構成図を作るツールです。ふつうの作図ソフトと違うのは、描いた図がそのまま構造化されたデータになる点です。機器の位置は x, y、つながりは「どの機器とどの機器が、どの通信で結ばれているか」という関係として保存され、機器の中に作った「ブロック（モジュール・機能単位）」は、そのまま Address Map Editor の入れ物になります。

自由に図形や文字を置く汎用の作図ソフトではありません。描けるのは「機器」と「通信線」と「ブロック」だけですが、そのぶん図と仕様（変数・アドレス）が食い違わなくなります。ブラウザだけで動き、データはこの端末の中にしか保存されません。

2. チュートリアル（最初の構成図）

1. ツールバーで種類「PLC / コントローラ」を選び「機器」を押します。名前を入力して Enter。
2. 同じように「サーボアンプ」「ロボット」「リモート I/O」などを追加します。
3. 機器を選ぶと右側に ○ が出ます。これを相手の機器へドラッグすると通信線が引かれます。
4. 線をクリックし、右のプロパティで通信の種類（EtherCAT・CC-Link IE・RS-232C など）を選びます。
5. 機器を選んで「ブロック」を押し、その機器の中の機能単位（指令・状態・パラメータなど）を作ります。
6. Ctrl+L で自動整列。仕様書に貼るなら「出力 → SVG をコピー」、次の工程へ進むなら「アドレスマップへ →」。

3. 機器とブロック

機器には種類（PLC・HMI・サーボアンプ・インバータ・ロボット・リモート I/O・センサ／カメラ・ネットワーク機器・PC・その他）、型式、IP アドレス／局番、備考を持たせられます。種類は図の色分けと、Draw.io へ書き出したときの図形に反映されます。

ブロックは機器の中の機能単位です。「指令」「状態」「パラメータ」のように分けておくと、アドレスマップ側でその単位ごとにアドレスを割り付けたり、PLC ソフトへコピーしたりできます。ブロックを作らなくても構いません（アドレスマップ側で「未分類」として扱われます）。

4. 通信線のつなぎ方

機器を選ぶと右端に ○（ポート）が出ます。これを相手の機器へドラッグすると線が引かれます。線を選ぶと、通信の種類・ラベル・向き（片方向／双方向）をプロパティで変えられます。EtherCAT や CC-Link IE などのフィールドバスは実線、RS-232C などのシリアルは破線、デジタル I/O は点線で描き分けます。

5. 配置と自動整列

機器はドラッグで動かせます。動かした位置は座標データとして保存されるので、次に開いたときも同じ並びです。Ctrl+L の自動整列は、接続の関係から階層（PLC を上に、つながる機器を下に）を計算して並べ直します。まず自動整列してから、気になる機器だけ手で動かす使い方がおすすめです。

6. 図と表の書き出し

SVG は白地・黒線の仕様書用の図、Draw.io は図形として編集できる形式です。Markdown には機器一覧・接続一覧の表と、Mermaid 形式の構成図が入るので、GitHub や Notion に貼るとそのまま図として表示されます。いずれも「〜をコピー」でファイルを作らずクリップボードに入れられます。

7. 設計の流れ（4 つのツール）

このツールは、次の流れの入り口です。

1. System Diagram Editor（このツール）: 機器・ブロック・通信を決める
2. Address Map Editor: その入れ物に変数とアドレスを割り付ける
3. Timing Chart Editor: 変数の時間的な動き（ハンドシェイク）と因果関係を決める
4. Flowchart Editor: 因果関係からプログラムの流れに落とす

各ツールのツールバー右にある「→」のボタンで、データを持ったまま次のツールへ進めます。戻るときも同じ場所のボタンから行き来できます。1 つのツールだけを単体で使っても構いません。

8. ショートカットキー

9. お問い合わせ

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