パイプ記号(|)階層リストを → 罫線囲みに変換ツール
パイプ(|)記号のリスト形式を、罫線で囲んだ構造に変換します。Claude等AIへのUI説明用などに。キーボード形式からの罫線素片入力も可能です。
▼テキストを入力してください
▼変換後のテキスト
罫線素片キーボード
使い方
💡 主な機能
- パイプで階層表現：
|の個数（1〜6個）で階層レベルを指定 - 罫線囲み変換：階層リストを罫線で囲んだボックス構造に自動変換
- Claude向け最適化：AIへのUI説明に適したコンパクトな表示
- 罫線素片キーボード：各種罫線文字を簡単入力
📝 記法ルール
| Multi Grep Replacer
|------------------------------------------
| Target Folder
|| /path/to/project/folder [ Browse... ]
|
| File Extensions
|| .html,.css,.js,.jsx,.tsx,.vue,.php
| ▼ Replacement Rule
|| From → To:
||| old-class → new-class [ Remove ]
|| + Add new rule
|
|------------------------------------------
| [Load Config] [Save Config] [Execute Replacement]
↓ 変換後
┌────────────────────────────┐
│ Multi Grep Replacer │
├────────────────────────────┤
│ Target Folder │
│┌──────────────────┐ │
││/path/to/project/folder │ [ Browse... ] │
│└──────────────────┘ │
│ │
│ File Extensions │
│┌──────────────────┐ │
││.html,.css,.js,.jsx,.tsx,.vue,.php │ │
│└──────────────────┘ │
│ │
│ ▼ Replacement Rule │
│┌──────────────────────────┐│
││From → To: ││
││┌──────┐ ┌──────┐ ││
│││ old-class │ → │ new-class │ [ Remove ] ││
││└──────┘ └──────┘ ││
││+ Add new rule ││
│└──────────────────────────┘│
│ │
├────────────────────────────┤
│ [Load Config] [Save Config] [Execute Replacement] │
└────────────────────────────┘
🎯 活用例
- AIへのUI説明：Claude等へのインターフェース構造の説明に
- 仕様書作成：階層構造を持つデータの視覚化
- プロンプト作成：AIプロンプトでの情報整理
- ドキュメント：技術文書での構造図作成
⚙️ 便利な機能
- 罫線素片キーボード：クリックで罫線文字を入力エリアのカーソル位置に挿入
- 自動幅調整：全角・半角文字を考慮した最適な罫線幅
- ネスト対応：最大6階層までの入れ子構造に対応
- クリップボード自動コピー：変換結果を自動でコピー
