本文へスキップ
AZ Tools

フォルダーツリー視覚化

インデント付きのファイル・フォルダー名リストを、README や Unix の `tree` コマンド出力でおなじみの罫線ツリー(`├──`、`└──`、`│`)に変換します。パーサーは各行の先頭の空白だけで深さを判断するので — ソースに合わせてレベルごとに 2 スペース、4 スペース、タブ 1 つを選んでください — どんなエディターでも構造を下書きして貼り付けられます。子を持つ項目はディレクトリとして扱われ、末尾に `/` を付けられます。子のない項目はファイルとして表示され、トップレベルのルートが複数あっても問題ありません。 すべての処理は入力と同時にブラウザー内で行われます。何もアップロードされず、下書きはローカルストレージに保持されるので再読み込みしても消えません。出力に使う Unicode 罫線文字は、モダンなターミナル、GitHub/GitLab のコードブロック、ほとんどのドキュメントシステムで正しく表示されます — 等幅フォントで枝が揃うよう、ツリーはコードブロックで囲んでください。

ASCII ツリー
project/
├── src/
│   ├── components/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── lib/
│   │   └── utils.ts
│   └── index.ts
├── public/
│   ├── favicon.ico
│   └── robots.txt
├── package.json
└── README.md

出力は Unicode 罫線文字を使用 — モダンなターミナルや GitHub でレンダリングされる。

使い方

  1. インデント付きリストを貼り付けるか入力します — 1 行に 1 つのファイルまたはフォルダー、子は親より 1 レベル深くインデントします。
  2. リストのインデント方式に合わせてオプション(2 スペース、4 スペース、タブ)を設定します。設定が違うとツリーが平坦になったり過剰に入れ子になったりします。
  3. ディレクトリに `/` を付けたければ末尾スラッシュをオンにします。
  4. 結果をコピーして、README やドキュメントのコードブロック(バッククォート 3 つ)に貼り付けます。

よくある質問

タブとスペースが混在していたら?
パーサーは選択したインデント単位 1 つしか認識しないため、混在すると深さがずれます。多数派の方式を選ぶか、エディターの正規表現置換で `\t` をスペース 2 つに直すなど、先に統一してください。
ディレクトリの末尾スラッシュはなぜ重要?
プレーンテキストにはアイコンがないので、`/` の接尾辞だけが、その項目が拡張子なしのファイルではなくフォルダーだと伝える手がかりです。GitHub の README、ターミナルのドキュメント、Unix の `tree -F` オプションも同じ慣習を使います。
空のフォルダーはどう表示しますか?
子が 1 つ以上ある行だけがディレクトリと判定されるため、空のフォルダーはファイルのように表示されます。フォルダーとして見せたい場合は `.gitkeep` のようなプレースホルダーの子を入れてください — Git で空ディレクトリを保持する慣習でもあります。
GitHub でもツリーは正しく表示されますか?
はい — `├──`/`└──` はただの Unicode テキストです。バッククォート 3 つのコードブロックに入れれば等幅フォントで表示されます。コードブロックの外では空白が詰められ、枝がずれます。
入力は保存・アップロードされますか?
ブラウザーの外には出ません。ただし再読み込み後も残るよう、最新の入力をブラウザーのローカルストレージに保持します。消すにはテキストエリアを空にするか、サイトデータを削除してください。

関連ツール