分散システムの“フロー”を操る。
多くのアーキテクチャ図はホワイトボードで終わります。
四角と矢印、時にはツールからの綺麗なエクスポート——でも会議が終われば、図はそのまま、静止したまま。
実際にトラフィックが流れ始めたらどうなる？ どこでキューが詰まり、どのサービスが先に息切れし、エラーはシステム全体にどう広がる？
それがまさに、私が Flowmancer を作った理由。図を“きれい”で終わらせない場所。
ここでは図が【動きます】。リクエストはサービス間を流れ、ロードバランサがトラフィックを分散し、キャッシュは救世主にもボトルネックの種にもなり得ます。
数秒で、アーキテクチャのふるまいがまるでX線透視のように見えてきます。
☕ コーヒーでも飲みながら…
自分の仕事のためのサンドボックスが欲しかった——毎日描く図をそのまま放り込んで、“再生”を押すと息を吹き込む場所。
Flowmancer はまさにそれをくれます。トポロジを安全に試し、ボトルネックをシミュレーションし、本番が高くつく前に学べる場所。
言うなれば、アーキテクトとエンジニアの遊び場。
エンタープライズの監視を置き換えるものではありません。これはその“手前”の一歩。
「キャッシュをもう一段足したら？」「このキューが埋まったら？」を、その場で目に見える形で確かめられます。
✨ できること
Flowmancer の魂は実験ですが、実は中身も盛りだくさん：
- ビジュアルグラフエディタ — ドラッグ＆ドロップでシステムを描き、レイアウトは ELK.js におまかせ。
- リアルタイムのトラフィックシミュレーション — リクエストが 60 FPS で滑らかに流れ、スループット・レイテンシ・エラー伝播を可視化。
- 高度なメトリクスダッシュボード — ボトルネック、利用率、パス分析、境界グループの統計を探索。
- インタラクティブなコンソール — コマンドでノード再設定、エラー率変更、サービス停止などをシミュレーション中に実行。
- インポート/エクスポート — PlantUML、Draw.io、JSON から開始し、結果をエクスポートして共有。
- カスタマイズ — ノードの処理能力、レイテンシ分布、ヒット率、ルーティング重みまで調整可能。
すべてブラウザ内で完結、バックエンド不要です。
🏢 仕事で役立つ理由
プロの現場では、システムの弱点に気づくのが遅くなりがちです——負荷試験の最中、あるいはもっと悪ければ本番で。
Flowmancer はそれらをもっと早く見抜くのに役立ちます。
こんなことができます：
- インフラを立ち上げずに、アーキテクチャの意思決定をストレステスト。
- なぜそのボトルネックが問題なのかを、チームに“見える形で”説明。
- ジュニアに、分散システムが負荷下でどう振る舞うかを教育。
- 新しい設計をプロトタイプし、シナリオを横並びで比較。
銀の弾丸ではありませんが、ホワイトボードの先を本当に理解したい人の強力な相棒です。
👨💻 技術的な中身
Vue 3・TypeScript・Vite で構築し、レイアウトには ELK.js を使用。
シミュレーションエンジンは決定的で再現性があり、結果は単なる綺麗なアニメーションに留まりません。
すべてはローカルのブラウザで動作——クリーンで高速、そして完全にオープンソースです。
🚀 試してみる
あなたの図が生きるところを見てみませんか？
👉 ライブデモ
👉 GitHub のソースコード