CHOOSING AN OUTPUT
JSON・SVG・端末保存、どの方法を選ぶ?
同じフロー図でも、あとで編集するのか、図として渡すのか、いま使うブラウザで続けるのかで保存方法が変わります。形式を目的から選ぶための比較です。
架空例で考える
備品申請を「申請を受ける → 内容を確認 → 条件を連絡 → 対応を記録」の4工程で表す場面を想定します。架空の一方向の流れで、在庫や承認の判断は含めていません。この4工程を一度作り、同じ図を3つの方法で扱うと違いを確かめられます。
| 方法 | 向いている目的 | このツールでの動き | 気をつける点 |
|---|---|---|---|
| JSON | 同じ図を後から読み込んで編集する | 工程・レーン・矢印を含む図データを書き出し、JSONとして読み込む | 読込はこのツールのschemaVersion 1形式。ファイルは1MiB以内 |
| SVG | 図を静止したベクター画像として扱う | 表示中の図をSVGファイルとして書き出す | このツールはSVG読込機能を備えていません。再編集用の控えはJSONで保存 |
| 端末に保存 | 同じブラウザ上で作業を中断・再開する | ブラウザのlocalStorageへ保存し、「保存から復元」で読み戻す | ファイルとして持ち出す方法ではありません。サイトデータを消すと保存内容も消えます |
| 印刷 | 紙やPDFに出す操作へ進む | 「印刷」からブラウザの印刷画面を開く | 紙への出力やPDF保存の見え方は利用環境のプレビューで確認 |
試す手順と期待結果
- トップ画面の「空図から」を選び、担当レーンを1つ用意します。
- 表の4工程を追加し、順番に3本の矢印でつなぎます。完成時は1レーン・4ノード・3矢印です。
- JSONを書き出し、必要なら同じファイルを読み込んで、タイトル・工程・接続が戻ることを確認します。
- SVGを書き出すと静止図ファイルが作られます。端末保存を選んだ場合は保存状態が表示され、復元操作で作業中の図に戻ります。
4工程と3接続は例の構成数です。SVGの印刷品質や他アプリでの表示を保証するものではなく、配布前に実際の閲覧先・印刷プレビューを確認してください。
迷ったときの決め方
- あとで編集する、または別の端末へファイルで移す:JSONを選びます。
- 内容を固定して図として添付する:SVGを書き出します。編集可能な元データも必要ならJSONを併せて保管します。
- 同じブラウザで一時中断する:端末保存を使い、重要な控えにはJSONも書き出します。
- 紙やPDFが必要:印刷画面に進み、用紙・倍率・改ページをプレビューで確かめます。
このツールの上限は、レーン6件、ノード30件、矢印60件、ラベル80文字です。リアルタイム共同編集やサーバー保管は提供しません。
4工程の図を作る