Flowchart Editor 操作説明書
JIS X 0121 の記号で制御の流れを描き、仕様書用の図・Markdown・AI 検証用テキストに書き出すツールです。タイミングチャートからの自動生成にも対応しています。
1. 概要
Flowchart Editor は、端子・処理・判断・待機などの記号を置き、矢印でつないで処理の流れを描くためのツールです。記号は選択中の記号の下に自動で並び、下にある記号は自動でずれるため、キーボードだけでも手早く流れを組み立てられます。線は重ならないよう自動で経路が決まり、必要な箇所だけ手で経路を整えられます。
ブラウザだけで動作し、データはこの端末のブラウザの中にだけ自動保存されます。外部への送信はありません。
2. チュートリアル（最初の流れを作る）
- 「開始」の端子をクリックして選び、Enter を押すと下に「処理」が追加されます。そのまま文字を入力して Enter で確定します。
- Shift+Enter で「判断」を追加し、「起動ボタン ON ?」のように条件を書きます。
- 判断の横に出る「NO」のつまみを、判断自身へドラッグすると「条件が成立するまで待つ」ループになります。
- 最後の処理から出口のつまみを「終了」へドラッグしてつなぎます。
- Ctrl+L で自動整列すると、YES の流れが縦一列、NO の流れが右の列にそろいます。
- 「出力」メニューの「Markdown をコピー」で、Mermaid 形式の図と処理の一覧をクリップボードに入れ、Notion や GitHub に貼り付けます。
ヘルプメニューの「チュートリアル」では、サンプルを読み込んで画面を確かめながら同じ手順をたどれます。
3. 記号とつなぎ方
左の記号パレットをクリックすると選択中の記号の下に追加され、ドラッグすると好きな位置に置けます。線の上に落とすとその線の間に挿入されます。記号を選ぶと出口のつまみ（○）が表示され、ドラッグして別の記号に落とすとつながります。何もない所に落とすと新しい処理を作ってつなぎます。判断の YES / NO の表記は「分岐の表記」で全体を切り替えられ、判断ごとに個別の表記も指定できます。
4. 線の経路を手で整える
線は通常、記号を避けて自動で経路が決まります。思いどおりにならない線は、線の途中をドラッグするとその部分を平行に動かせます。動かすと折れ点（ウェイポイント）が線に記録され、以後は自動の経路の代わりにその折れ点を経由して描かれます。線を選ぶと折れ点が □ / ■ で表示され、ドラッグで位置を変えられます。
折れ点をダブルクリックするか、動かした部分を元の直線の上に戻すと、折れ点が消えて自動の経路に戻ります。線を右クリックして「経路を自動に戻す」でも戻せます。自動整列（Ctrl+L）を行うと、すべての線が自動の経路に戻ります。
5. レーンと信号線
マスターとスレーブのように担当が分かれる処理は、「挿入 → レーンを追加」で縦の帯（スイムレーン）に分けて描けます。記号を別のレーンへドラッグすると担当が変わります。担当をまたぐ信号の受け渡しは、記号の横の □ を相手の記号へドラッグして「信号線」（点線の矢印）で表します。信号線は「受けた側はそれをきっかけに次の処理をする」という意味です。
6. タイミングチャートから作る
このツールは 4 つの設計ツール（System Diagram → Address Map → Timing Chart → Flowchart）の最後です。ツールバー右の「← タイミングチャート」で前の工程へ戻れます。タイミングチャート側を直したあとは「作り直す」を押すと、前と同じ設定でこの図を作り直せます（手を入れた図は置き換わるので、残したいときは先に保存してください）。
Timing Chart Editor の「フローチャートへ →」、または「チャートから作成...」で JSON を読み込むと、信号の変化から流れを自動で作ります。自分の信号の変化は「処理」、相手の信号の変化は「待ち（判断 / 待機）」になります。タイミングチャートで因果関係の矢印を引いておくと、矢印の原因を待ってから結果の出力を変えるよう順序を組み立て、左右に並べる書き方では矢印どおりに信号線を引きます。矢印のない変化は Step の順に並べます。
7. ショートカットキー
| キー | 動作 |
|---|
| Enter / Shift+Enter | 下に処理 / 判断を追加 |
| F2 / 文字キー | 文字の編集（Shift+Enter で改行） |
| 矢印キー | 線をたどって隣の記号へ（Ctrl+矢印で位置を微調整） |
| X | 判断の YES と NO の行き先を入れ替え |
| Ctrl+L / Ctrl+0 | 自動整列 / 全体を表示 |
| Ctrl+C / V / D | コピー / 貼り付け / 複製 |
| Ctrl+Z / Ctrl+Y | 元に戻す / やり直し |
| Delete | 削除（前後が 1 本ずつなら自動でつなぎ直す） |
| Space+ドラッグ | 画面の移動（Ctrl+ホイールで拡大縮小） |
8. 出力と保存
SVG は白地・黒線固定の仕様書用の図、Draw.io は記号を図形として編集できる形式です。Markdown には Mermaid 形式のフローチャートと処理の一覧・信号の受け渡しが入り、GitHub や Notion では図として表示されます。それぞれ「〜をコピー」でファイルを作らずにクリップボードへ入れられます。作業内容はブラウザに自動保存されますが、残しておくときは Ctrl+S で JSON に保存してください。
不具合の報告・機能の要望は yk.builds.space@gmail.com までお寄せください。再現手順と、可能であれば保存した JSON を添えていただけると調査が早くなります。