pipeline-viz v0.1.0 · Goose × oh-my-mermaid

Pipeline Viz

データ処理工程を、生きた設計図に。Goose が出力する実行時メトリクスと oh-my-mermaid の Perspective 構造を接合し、パイプラインの流れ・健康状態・ボトルネックを一枚で把握するダッシュボード試作です。

ダッシュボードを開く 提案資料 Goose 解説

このツールは何のためにあるのか

データ処理パイプラインは、ステップが増えるほど「いま何が起きているか」を把握するコストが急増します。ログを追い、メトリクスを突き合わせ、どのステップが遅いのか、どこでレコードが落ちているのかを推測する。Pipeline Viz は、その確認作業を図の上に引き寄せます。

Goose の低オーバーヘッドな計測と、oh-my-mermaid の構造化されたダイアグラムを組み合わせ、「構造」と「状態」を同じ枠組みで管理するのが本試作の狙いです。図は静的なドキュメントではなく、実行時メトリクスを反映するライブ・ビューになります。

why

処理の流れを、状態つきで見る

Extract → Transform → Load の各ステップに、レコード数・処理時間・ステータスを重ねて表示します。異常のあるステップは色とアラートで即座に分かります。

visibilitylive-status
who

開発・運用・データ担当へ

パイプラインを開発する人、日々の実行を監視する人、ボトルネックを特定したい人。ブラウザで開くだけで、同じビューを共有できます。

developersredata
how

計測・蓄積・可視化をまっすぐに

Goose が metrics.json を出力し、.omm/ ストアを介してビューアが読み込みます。静的ファイルだけで動作します。

Goose.omm/static

本試作が答えるのは、次の4つの問いです。

  1. いま、どのステップが動いているか

    各ステップのレコード数とレイテンシをライブ表示します。実行のたびに値が更新され、最終更新時刻も確認できます。

  2. どこで詰まっているか

    遅延の大きいステップを強調し、ステップ別レイテンシの内訳を表示します。クリックすると詳細パネルで入出力を確認できます。

  3. 前回から何が変わったか

    Diff モードで、前回スナップショットとのレコード数・処理時間の差分をノード上に表示します。

  4. エラーはどこへ隔離されたか

    検証に失敗したレコードは @error-handler に分岐します。隔離件数と最近のエラーを追跡できます。

ダッシュボード

ブラウザで開くと、サンプルメトリクスの読み込みとライブ更新が始まります。ノードのクリック、Diff、アラート、Perspective の切り替えを試せます。

Pipeline Viz data-pipeline · live

データ処理パイプライン

4 nodes · 4 perspectives
1,240RECORDS
198MS TOTAL
4.84%QUARANTINE RATE
60QUARANTINED
1WARNING
LIVEPOLL 2.5S
Extract1,240 rec · 46 ms in 1,240 Healthy
Transform1,180 rec · 121 ms 60 quarantined Warning
Load1,180 rec · 31 ms in 1,180 Healthy
@error-handler60 rec · 8 ms quarantine External

主な機能

提案資料の UI 仕様をもとに、静的サイトで動く範囲を実装したプロトタイプです。バックエンドなしで動作し、サンプルデータを差し替えるだけで自分のパイプラインに適用できます。

live

ライブ更新

meta.yaml の poll_interval_ms 間隔でメトリクスを再取得。更新がなければブラウザ内シミュレーションで動きを保ち、LIVE / PAUSED を切り替えられます。

pollingstatus
meta-driven

meta.yaml 駆動

メトリクス URL、ポーリング間隔、ステータス色、パイプライン一覧を .omm/data-pipeline/meta.yaml から読み込みます。設定変更は「meta.yaml を再読込」で即時反映できます。

.omm/configmulti-pipeline
validate

スキーマ検証

必須フィールド、数値、ステータス、前段との件数整合、隔離件数を表示前にチェック。修復結果と警告・エラーを Meta カードに表示します。

schemaquality
diff

Diff モード

前回スナップショットとの差分をノードに表示。レコード数やレイテンシの変化を、図を見たまま確認できます。

snapshotdelta
alert

アラートと隔離

Warning / Error のステップを上部とサイドバーにピン留め。隔離レコードの件数と最近のエラーを一覧します。

error-handlerquarantine
drill-down

ドリルダウン

ノードをクリックすると、入出力・処理時間・メッセージ・差分を右パネルに表示。Escape で選択を解除できます。

inspector@link
perspectives

4 つの Perspective

data-pipeline、overall-architecture、error-handler、performance-metrics を切り替え、構造と状態を多角的に確認できます。

.omm/view
mermaid

Mermaid ソース出力

現在の状態から Mermaid 定義を生成して表示。classDef による状態色を含み、既存の oh-my-mermaid ワークフローへ持ち出せます。

classDefexport
metrics

時系列チャート

スループットと隔離レコード数の推移をインライン SVG で描画。ステップ別レイテンシも横棒で比較できます。

svghistory
demo

障害注入

「障害を注入」で Transform を一時的に Error 状態にし、アラートや色の変化を確認できます。「復旧させる」で戻ります。

demoerror
static

GitHub Pages 対応

ビルド不要の HTML / CSS / JavaScript と JSON だけで構成。相対パスで動作するため、プロジェクト Pages のサブパスにも配置できます。

pagesno-build

Perspective 構成

oh-my-mermaid の考え方に合わせ、視点ごとに構造と状態を整理します。.omm/config.yaml の Perspective 一覧をダッシュボードのナビゲーションに対応させ、各ビューはダッシュボード内に実装しています。

Perspective確認する内容ダッシュボードでの表示
data-pipelineETL 本流のステップと隔離分岐ノード図、Diff、アラート、インスペクタ
overall-architectureGoose エンジンと .omm ストア、ビューアの関係全体構成図とレイヤー表
error-handler隔離と最近のエラーエラー経路図、件数、イベント一覧
performance-metricsスループット、レイテンシ、隔離レコード数の推移時系列チャート、ステップ別バー、履歴表

使い方

  1. ダッシュボードを開く

    公開サイトの PipelineViz/viewer/ を開きます。ビルドは不要です。ローカルで確認する場合は fetch() の制約があるため、リポジトリのルートで静的サーバーを起動してから開きます。

    python3 -m http.server 8000
# http://localhost:8000/PipelineViz/viewer/

  2. サンプルデータを自分のパイプラインに差し替える

    .omm/data-pipeline/meta.yaml の pipelines[] にメトリクス URL を追加し、viewer/data/ の JSON を編集します。複数パイプラインはサイドバーのセレクタで切り替えられます。取得に失敗した場合は、HTML 内の埋め込みサンプルで動作します。

    pipelines:
  - id: etl-main
    label: ETL 本流
    metrics_url: ../../viewer/data/metrics.json
    prev_url: ../../viewer/data/metrics-prev.json

  3. GitHub Pages に配置する

    GitHub Actions でリポジトリ全体をデプロイします。Sandbox のルート index.html はプロジェクト一覧、PipelineViz/index.html が本プロジェクトの LP、viewer/ がダッシュボードです。相対パスのため、https://user.github.io/repo/PipelineViz/ のようなサブパスでも動作します。

プロジェクト構成

goose-sandbox/
├── PipelineViz/                  # このプロジェクト
│   ├── index.html                # プロジェクト LP
│   ├── viewer/
│   │   ├── index.html            # ダッシュボード試作
│   │   ├── lib/
│   │   │   ├── data-source.js    # meta.yaml パーサー・検証
│   │   │   └── data-source.test.js # Node.js テスト
│   │   └── data/
│   │       ├── metrics.json      # ETL 本流の現在スナップショット
│   │       ├── metrics-prev.json # 同・Diff 用
│   │       ├── etl-reporting.json      # 日次レポート
│   │       └── etl-reporting-prev.json # 同・Diff 用
│   ├── assets/
│   │   └── brutalist-doc.css     # ドキュメント共通スタイル
│   ├── .omm/
│   │   ├── config.yaml           # Perspective 一覧
│   │   └── data-pipeline/
│   │       ├── meta.yaml         # live_metrics_url / pipelines / status_map / prev_diagram
│   │       └── diagram.mmd       # Mermaid 定義サンプル
│   ├── pipeline_viz_proposal.html # 実装提案資料
│   ├── goose_language_guide.html # Goose 言語ガイド
│   └── README.md                 # プロジェクト README
├── index.html                    # Sandbox ホーム
├── README.md                     # Sandbox 全体の README
├── .github/workflows/pages.yml   # GitHub Pages デプロイ
├── LICENSE                       # MIT
└── .nojekyll                     # GitHub Pages 用

現在の制限

  • メトリクスはサンプル JSON とブラウザ内シミュレーションで、実際の Goose プロセスとは接続していません。
  • ライブ更新はポーリング方式です。SSE / WebSocket による配信は今後の実装対象です。
  • Mermaid の描画は独自の HTML / SVG 表現で、Mermaid ランタイムは読み込んでいません。ソース出力のみ対応しています。
  • 大規模ダイアグラムの仮想化や、複数パイプラインの同時監視は未対応です。
  • Perspective は 4 種類の固定ビューで、.omm/ の各ディレクトリを読み込むわけではありません。パンくずのファイル名も想定パスの表示です。
  • oh-my-mermaid 本体への組み込みは未実施で、UI とデータ構造の試作段階です。

処理の流れを、確かめる。

サンプルデータとライブシミュレーションで、パイプラインの状態可視化をすぐに試せます。

ダッシュボードを開く 提案資料を読む