フローチャート・業務フロー図HTMLを共有する方法

フロー図はレビューしやすい形で共有する

業務フローやシステムの処理フローを設計するとき、関係者でレビューを重ねながら図を固めていきます。図を画像に書き出して送ると、解像度の問題で細部が読みにくかったり、修正のたびに再書き出しが必要だったりと手間がかかります。

フロー図をHTMLとして共有URL化すれば、相手はブラウザで拡大縮小しながら細部まで確認できます。テキストベースで図を記述するmermaidなどを使えば、修正もテキストを直して再生成するだけで済み、レビューのサイクルを速く回せます。

mermaidなどでフロー図HTMLを作る

mermaidは、テキストでノードと矢印を記述するとフローチャートを描画してくれるツールです。HTMLにmermaidのスクリプトと図の定義を書けば、ブラウザ上に図が表示されます。フローチャートのほかシーケンス図や状態遷移図なども描けます。

共有用には、mermaidのスクリプトをCDNから読み込む場合は参照先が公開状態かを確認するか、スクリプトを同梱しておくと安心です。図を画像として静的に持つ構成でも、SVGなら拡大しても劣化しないため確認に向きます。複数の図を1ページに並べると、フロー全体を見渡せます。

共有前チェックリスト

フローチャート・業務フロー図HTMLを共有は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。

チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
• 操作: ボタン、リンク、フォーム、遷移先を確認する
• 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
• 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める

ギガサイト便でフロー図をURL化する

ギガサイト便なら、フロー図のHTML一式をドロップするだけで共有URLが発行されます。単一HTMLならそのまま、スクリプトや画像が別ファイルならZIPにまとめてアップロードします。

1. フロー図のHTML（必要ならスクリプトや画像）を用意する
2. 別ファイルがある場合は1つのフォルダにまとめてZIP化する
3. ローカルで図が正しく描画されるか確認する
4. ギガサイト便のトップページにファイルまたはZIPをドロップする
5. 認証方式を選ぶ（社内レビューなら会社ドメイン認証など）
6. 発行された確認用URLを関係者に共有する

差し替えでレビューサイクルを速くする

フロー図はレビューで何度も修正が入ります。そのたびに新しいURLを発行すると、関係者がどれを見ているか分からなくなります。ギガサイト便は同じURLのままファイルを差し替えられるので、修正版をアップロードすれば関係者は同じリンクから最新の図を確認できます。

mermaidのようなテキスト記述なら、修正・再生成・差し替えの流れがスムーズです。レビューのコメントを反映してすぐ更新し、同じリンクで見直してもらうという速いサイクルを回せます。

関係者限定と検索除けの扱い

業務フローには社内の手順や取引の流れなど、外部に見せたくない情報が含まれることがあります。会社ドメイン認証で社内に限定したり、社外の協力会社にはパスワードやメール認証で範囲を絞ったりできます。

一時公開ページにはnoindexが付くため検索結果には出ませんが、これは検索除けでありアクセス制御ではありません。機密性のあるフロー図には認証を併用してください。アクセスログで誰がいつ図を見たかも確認できるため、レビュー状況の把握にも役立ちます。