概要
OpenFLOW は、ReactとIsoflowを用いた オープンソースのPWA で、ブラウザ上で動作する アイソメトリック図作成ツール。 オフライン対応 や 自動保存 など、利便性とプライバシーを重視。 JSONインポート/エクスポート、 静的ホスティング が可能。 コントリビューション歓迎、ライセンスはMITおよびUnlicense。 主要ブラウザ対応、トラブルシューティング情報も充実。
OpenFLOWとは
- オープンソース かつ 無料 のアイソメトリック図作成ツール
- React と Isoflowライブラリ で構築
- PWA対応、ブラウザのみで動作・インストール可能
- オフライン利用、データはすべてローカル保存
- 美しい3D風技術図 を簡単作成
主な機能
- アイソメトリック図作成 機能
- ライブラリからキャンバスへ ドラッグ&ドロップ で部品追加
- コネクタ で部品同士の関係を可視化
- 色・ラベル・プロパティ のカスタマイズ
- パン・ズーム による快適な操作性
- 自動保存 機能
- 5秒ごとに 自動保存
- クイックセーブ で即時保存
- 名前を付けて保存 で複製も可能
- インポート/エクスポート
- JSON形式 での図面保存・共有・バックアップ
- ストレージマネージャ でローカル保存容量の管理
- キーボードショートカット
- Delete: 選択アイテム削除
- Ctrl/Cmd + Z: アンドゥ（対応ブラウザのみ）
- マウスホイール: ズームイン・アウト
- ドラッグ: キャンバス移動
クイックスタート
- ローカル実行手順
- リポジトリをクローン:
git clone https://github.com/stan-smith/OpenFLOW - ディレクトリ移動:
cd openflow-local - 依存関係インストール:
npm install - 開発サーバ起動:
npm start - ブラウザで
http://localhost:3000を開く
- リポジトリをクローン:
保存・管理
- 保存方法
- 自動保存：5秒ごとにローカルストレージへ
- クイックセーブ：ワンクリックで即時保存
- 名前を付けて保存：複製やバージョン管理に便利
- 管理機能
- ロード：保存済み図面一覧から選択
- インポート：他ユーザーのJSONファイル読み込み
- エクスポート：作成図面をJSONでダウンロード
- ストレージマネージャ：不要データの整理・削除
デプロイ・運用
- 本番ビルド
- 最適化ビルド作成：
npm run build - ローカルサーバで確認：
npx serve -s build
- 最適化ビルド作成：
- 静的ホスティング対応
- GitHub Pages、Netlify、Vercel、AWS S3など
- 任意のWebサーバで配信可能
- PWA要件
- HTTPS必須（localhost除く）
- ブラウザローカルストレージ利用（上限5〜10MB）
- 重要データは定期的にエクスポート推奨
対応ブラウザ
- Chrome/Edge （推奨）
- Firefox
- Safari
- PWA対応モバイルブラウザ
トラブルシューティング
- ストレージ容量不足
- ストレージマネージャで不要図面削除
- 古い図面をエクスポート後削除
- 最終手段としてブラウザデータ全消去（全図面消失注意）
- PWAインストール不可
- HTTPS利用確認
- Chrome/Edge推奨
- すでにインストール済みか確認
- 図面消失時
- ブラウザのローカルストレージ確認
- 自動保存版を探す
- 必要な図面は必ずエクスポートしてバックアップ
技術スタック
- React ：UIフレームワーク
- TypeScript ：型安全性
- Isoflow ：アイソメトリック図エンジン
- PWA ：オフラインファースト設計
コントリビューションとライセンス
- 誰でもコントリビューション歓迎、Pull Request受付中
- MITライセンス （Isoflowコミュニティ版）
- Unlicense （OpenFLOW本体）：改変・再配布自由
謝辞・関連リンク
- Isoflow ライブラリ利用（https://github.com/markmanx/isoflow）
- 開発者Webサイト： x0z.co