nymph

AI が生成した Markdown・Mermaid をレビューするための軽量ツール。

nymph output.md

ブラウザが開き、ファイルを監視して自動再レンダリングします。

スタック: Bun · React 18 · TypeScript · Vite 7

要件

• Bun (mise use -g bun または bun.sh)

インストール

bunx（インストール不要）

bunx @fillu87gyc/nymph *.md

グローバルインストール

bun install -g @fillu87gyc/nymph
nymph *.md

単一バイナリ（Bun 不要で配布可）

bun build --compile src/cli.ts --outfile nymph
./nymph *.md

ローカル開発

git clone https://github.com/fillu87gyc/nymph
cd nymph
bun install
bun run src/cli.ts output.md

使い方

nymph output.md
# nymph   http://localhost:6276
# 監視中  /path/to/output.md
# Ctrl+C で停止

複数ファイルや glob も指定できます：

nymph *.md

ディレクトリを渡すと、VSCode のようにサイドバーへ階層ツリーを表示して .md を開けます：

nymph ./docs
nymph ./           # カレントディレクトリをツリー表示

オプション

使い方: nymph [オプション] [ファイル|ディレクトリ ...]

引数:
  ファイル ...          監視する .md ファイル（glob 対応）
  ディレクトリ          サイドバーにツリー表示して .md を開けるようにする

オプション:
  -p, --port <番号>    使用するポート番号 (デフォルト: 6276)
  --no-open            ブラウザを自動的に開かない
  -v, --version        バージョンを表示して終了
  -h, --help           このヘルプを表示して終了

nymph -p 8080 output.md        # ポートを指定
nymph --no-open output.md      # ブラウザを開かずに起動
nymph --version                # バージョン確認

機能

ホットリロード

ファイルの変更を SSE で検知し、即座に再レンダリングします。

ディレクトリツリー（エクスプローラー）

nymph ./docs のようにディレクトリを渡すと、サイドバーに階層ツリーが表示されます（.md のみ、隠しディレクトリと node_modules は除外）。クリックしたファイルはタブに追加されます。ツールバーの フォルダを開く からパスを入力して、起動後にツリーのルートを切り替えることもできます。

最近開いたファイル

開いたファイルの履歴を ~/.local/share/nymph/recent.json に保存します（最大 20 件）。ツールバーの 最近 メニュー（Ctrl+R / Cmd+R）と、引数なし起動時の画面から再オープンできます。

引数なしで起動すると、履歴とブックマークが起動画面に表示されます。

ブックマーク

ツールバーの ★ で、表示中のファイル（未選択時はツリーのルートディレクトリ）を登録できます。最近 メニューと起動画面に表示され、ファイルは開く・ディレクトリはツリーのルート切替になります。

Quick Open（Ctrl+P）

Ctrl+P / Cmd+P で検索パレットを開き、タブ・履歴・ブックマーク・ツリー内の全ファイルを横断して絞り込み、Enter で開けます。

Mermaid レンダリング + draw.io エクスポート

Mermaid コードブロックをインラインでレンダリングします。各ダイアグラムに → draw.io ボタンがあり、.drawio ファイルのダウンロードまたはコードのコピーができます。

インラインコメント

レンダリングされた各ブロックにホバーすると ＋ ボタンが表示されます。テキスト選択でも範囲コメントが追加できます。コメントは output.md.comments.json として自動保存されます。

レビューのコピー

レビューをコピー ボタンで全コメントを JSON 形式でクリップボードにコピーします。

チェックポイント / Diff

📍 ボタンでチェックポイントを設定し、± diff ボタンで変更箇所をハイライト表示できます。

ユビキタス言語辞書

プロジェクトルートの .nymph/config.yml を使って、docs/UBIQUITOUS_LANGUAGE.md から辞書ファイルを生成できます。

nymph dict build

.nymph/dict.json に辞書ファイルが出力されます（.gitignore 対象のため生成ファイルは追跡しません）。

# デバッグ出力（ノード木とマッチ結果を .nymph/debug/ に保存）
nymph dict build --debug

用語集のソースは docs/UBIQUITOUS_LANGUAGE.md です。新しいモジュールや概念を追加したときはこちらも更新してください。

開発

bun install
bun run dev        # API サーバー(:6276) + Vite(:5173) を同時起動
bun run test       # 単体 + コンポーネントテスト (Vitest 3)
bun run test:e2e   # E2E テスト (Playwright)
bun run build      # プロダクションビルド (Vite 7)

ghq を使っている場合の開発用ショートカット（~/.zshrc）

nymphx() {
  local nymph_dir origdir="$PWD"
  if [[ -f package.json ]] && grep -q '"name": "@fillu87gyc/nymph"' package.json; then
    nymph_dir="$PWD"
  else
    nymph_dir="$(ghq list --full-path nymph | grep '/nymph$' | head -1)"
  fi
  local -a a
  for f in "$@"; do
    case "$f" in
      /*) a+=("$f") ;;
      *)  a+=("$origdir/$f") ;;
    esac
  done
  local port=6276
  while (: < /dev/tcp/127.0.0.1/$port) 2>/dev/null; do ((port++)); done
  (cd "$nymph_dir" && NYMPH_PORT="$port" NYMPH_FILES="${a[*]}" bun run dev)
}

nymphx *.md   # HMR 有効な開発モードで起動

Claude Code との連携

Claude Code のプロジェクトに nymph を追加すると、Edit ツールによるファイル編集時にコメントの行番号が自動追従します。

claude plugin install github:fillu87gyc/nymph

Claude Code 上でフックをインストール：

/nymph:install

仕組み：PostToolUse フックが Edit ツールの old_string / new_string を /edit-op エンドポイントに転送し、編集前後の行数差分でコメント位置を自動補正します。

ライセンス

MIT