Hibi Flow

CHOOSING AN OUTPUT

JSON・SVG・端末保存、どの方法を選ぶ?

同じフロー図でも、あとで編集するのか、図として渡すのか、いま使うブラウザで続けるのかで保存方法が変わります。形式を目的から選ぶための比較です。

架空例で考える

備品申請を「申請を受ける → 内容を確認 → 条件を連絡 → 対応を記録」の4工程で表す場面を想定します。架空の一方向の流れで、在庫や承認の判断は含めていません。この4工程を一度作り、同じ図を3つの方法で扱うと違いを確かめられます。

方法向いている目的このツールでの動き気をつける点
JSON同じ図を後から読み込んで編集する工程・レーン・矢印を含む図データを書き出し、JSONとして読み込む読込はこのツールのschemaVersion 1形式。ファイルは1MiB以内
SVG図を静止したベクター画像として扱う表示中の図をSVGファイルとして書き出すこのツールはSVG読込機能を備えていません。再編集用の控えはJSONで保存
端末に保存同じブラウザ上で作業を中断・再開するブラウザのlocalStorageへ保存し、「保存から復元」で読み戻すファイルとして持ち出す方法ではありません。サイトデータを消すと保存内容も消えます
印刷紙やPDFに出す操作へ進む「印刷」からブラウザの印刷画面を開く紙への出力やPDF保存の見え方は利用環境のプレビューで確認

試す手順と期待結果

  1. トップ画面の「空図から」を選び、担当レーンを1つ用意します。
  2. 表の4工程を追加し、順番に3本の矢印でつなぎます。完成時は1レーン・4ノード・3矢印です。
  3. JSONを書き出し、必要なら同じファイルを読み込んで、タイトル・工程・接続が戻ることを確認します。
  4. SVGを書き出すと静止図ファイルが作られます。端末保存を選んだ場合は保存状態が表示され、復元操作で作業中の図に戻ります。

4工程と3接続は例の構成数です。SVGの印刷品質や他アプリでの表示を保証するものではなく、配布前に実際の閲覧先・印刷プレビューを確認してください。

迷ったときの決め方

このツールの上限は、レーン6件、ノード30件、矢印60件、ラベル80文字です。リアルタイム共同編集やサーバー保管は提供しません。
4工程の図を作る