OpenFLOW - ローカルで美しいインフラ図をすばやく作成できるツール

 (github.com/stan-smith)
46 ポイント 投稿者 GN⁺ 2025-07-02 | 1件のコメント | WhatsAppで共有
  • ブラウザベースで動作するオープンソースのアイソメトリック（3Dスタイル）ダイアグラム作成PWA
  • React と Isoflow エンジンベースで、インストール不要・オフライン動作に対応し、プライバシー保護・自動保存・簡単な Import/Export など多彩な機能を提供
  • すべてのデータをブラウザのローカルストレージに保存し、ダイアグラムを JSON ファイルとして自由に共有・バックアップ可能
  • GitHub Pages、Netlify などの静的ホスティングに対応し、HTTPS 環境では PWA 機能を完全に利用可能

OpenFLOW の概要とプロジェクトの価値

  • OpenFLOW は、開発者や IT 専門家がインフラ設計やネットワーク構成を可視化する際に役立つ無料のオープンソース PWA（プログレッシブ Web アプリ）
  • 競合ツールと比べてローカルで高速かつ安全に作業でき、ネットワーク接続がなくても機能を利用可能
  • Isoflow エンジンを活用し、美しい 3D スタイルのダイアグラムを作成でき、すべてのデータが外部サーバーへ送信されない強力なプライバシー保護を実現
  • 直感的な UI、自動保存、インポート/エクスポートなど実務で便利な機能により、さまざまなチームや個人がネットワークやアーキテクチャの文書化を簡単に行える
  • 開発環境への要求が低く、特別なインストールなしで Web ブラウザだけですぐに作業可能

主な機能

  • アイソメトリックダイアグラム作成: 3D 感のあるネットワーク、システム、技術ダイアグラムなどを可視化
  • 自動保存: 5 秒ごとに作業内容を自動保存
  • プライバシー保護: データはブラウザのローカルにのみ保存（5〜10MB 制限）
  • Import/Export: JSON ファイルでダイアグラムの共有とバックアップに対応
  • オフラインモード: インターネットがなくてもすべての機能を利用可能
  • 高速起動: PWA としてインストール・実行可能

デプロイとホスティング

  • 静的ホスティング: build フォルダを GitHub Pages、Netlify、Vercel、AWS S3 などにデプロイ
  • HTTPS 必須: PWA を正常に動作させるには HTTPS が必要（ローカルは例外）
  • 定期バックアップ推奨: 重要な作業は JSON としてエクスポートしてバックアップ

技術スタック

  • React, TypeScript, Isoflow, PWA

対応ブラウザ

  • Chrome/Edge（推奨）、Firefox、Safari、モバイル PWA 対応

オープンソースと貢献

  • Isoflow Community Edition（MIT ライセンス） + OpenFLOW（Unlicense）
  • 誰でも自由に利用・修正・配布可能

関連記事

1件のコメント

 
GN⁺ 2025-07-02
Hacker Newsのコメント
  • Mermaid.js は見た目が好みではなく、文法も難しく、バグも多いほうだが、静的サイトジェネレーターで最もよくサポートされているダイアグラムツールの1つなので使っている、Isoflow のダイアグラムも Markdown にこれほど簡単に埋め込めるようになれば本当にうれしい、という感想
    • 面白い意見をありがとう、TODO リストに追加する予定とのこと
    • mermaid というアイデア自体は良いが、文法が複雑すぎて GitLab のようなツールとの統合も不安定だという指摘
    • Markdown 統合機能があれば、ユーザーにとってはるかに大きな利点になるという意見
  • Isoflow と Styus を一緒に使うと良さそうだという提案。Stylus は CSS クラスを自動で変更する軽量なホームステートサーバーで、関連リンクも共有: https://github.com/mmastrac/stylus。Isoflow ライブラリと相性が良さそうだという期待
  • Clive Maxfield の本に出てくる isometric ダイアグラムが昔から好きで、回路図の中には非平面的な構造が多くあり（フリップフロップ、半導体レイヤー、FPGA アーキテクチャなど）、視点を加えることで情報の複雑さが減り、理解や記憶がしやすくなるという体験の共有。さまざまな技術分野にもよく合う方式だという評価。https://www.clivemaxfield.com
  • 最近 Snowflake が Openflow という製品をリリースしたので見つけにくいかもしれない、ネーミングを考える必要があるかもしれないという注意
  • Isoflow の上に何が載っているのかよく分からない、Isoflow がいちばん中核の役割を果たしているのではないか、という質問
    • 実際に Isoflow が作業の 90% を担っており、隠しているものは何もなく、コミュニティパックをそのまま使える形がなかったので自分で提供しただけだと率直に説明
  • 特別な作業なしで ISOFLOW コミュニティエディション https://github.com/markmanx/isoflow をラップし、非常に簡単にセットアップして実行できるようにした点を強調。ダイアグラムの JSON バックアップをエクスポートして再読み込みできるため、実質的に無制限にダイアグラムを作成できるという利便性があり、コミュニティ版の制限を直接補っているという案内
    • Node.js に詳しくないユーザーからの質問で、Isoflow のコード内で 3D スタイルのアイコンのグラフィックがどこにあるのか、SVG ファイルなのか、カスタムアイコンを追加できるのかという疑問
  • ダイアグラムの品質を称賛し、過去に似たプロジェクトが収益化で苦労して終了したことを思い出したというコメント。このプロジェクトは MIT OSS なので、現時点では収益化が主目的ではないように見えるとも述べ、下部の "Built with the Isoflow library" リンクが 404 エラーになっていることも報告。https://github.com/isoflow/isoflow
    • デザインやアイコンに関する功績はほぼすべて Isoflow にあり、コミュニティエディションが Pro 版へのアップセルにつながる構造だと説明。収益化の計画はまったくなく、人々が楽しく使ってくれればよいと思っていること、誤ったリンクの指摘はすぐ反映する予定だと回答
  • GitHub Pages にもホスティングできるのか、またデモリンクはあるのかという質問
  • 面白いアプリだという評価と、詳しい情報共有への前向きなフィードバック