メインコンテンツへスキップ

無料ASCIIツリージェネレーター

インデント付きリストをREADMEやドキュメント向けのきれいなフォルダツリー(├── └──)に変換します。Unicode・プレーンASCII出力に対応。ブラウザ内で完全に動作します。

読み込み後はオフラインでも動作
インポートオプション
既定では node_modules、.git、ビルド出力、キャッシュを除外します。

スペースまたはタブでインデントすると、項目が入れ子になります。インデントが深いほど、下の階層の項目になります。 ' # '、' // '、' - '、' <- ' の後ろにメモを書くと、出力でコメントとして揃えて表示されます。パスの一覧(git ls-files、find、dir /s /b)を貼り付けると階層化され、名前の末尾に / を付けると空のフォルダーを表します。 フォルダや .zip をインポート/ドロップしても、読み取るのはファイル名だけで中身は読みません。node_modules、.git などのビルド用フォルダは除外されます(インポートオプション参照)。

ツリー
コメントの形式
my-project
├── src
│   ├── components
│   │   ├── Button.tsx
│   │   └── Modal.tsx
│   ├── lib
│   │   └── utils.ts
│   └── index.ts  # entry point
├── public
│   └── favicon.ico
├── package.json
└── README.md

💡 フォルダ構造(または入れ子のアウトライン)を貼り付けると、README、コメント、ドキュメントにそのまま使えるきれいなツリーを作成します。罫線文字が使えない環境にはASCIIスタイルをお使いください。すべてブラウザ内で処理されます。

主な用途

  • READMEにフォルダーツリーを追加リポジトリを文書化するためのクリーンなプロジェクト構造ツリーを生成します。
  • プロジェクト構造をドキュメント化技術ドキュメントとWikiのディレクトリツリーを作成します。
  • コードコメント用にツリーを作成ソースコードコメントに埋め込むための構造図を生成します。
  • トークでファイルツリーを表示スライドとチュートリアル用のクリーンなディレクトリ図を作成します。
  • アウトラインをツリーに変換ファイルだけでなく、任意のネストされたアウトラインをツリーとして視覚化します。

使い方

READMEにフォルダ構造を載せるには、├── や └── の線を手で書く必要があるのがふつうです。このツールは、シンプルなインデント付きリストからそれらを自動で生成します。

  1. 1
    インデント付きのアウトラインを入力します
    1行に1項目。スペースまたはタブでインデントすると入れ子になります。インデントの深さが階層を決めます。
  2. 2
    ツリーとして解析されます
    スタックベースのパーサーが、ブラウザ内でインデントを入れ子構造に変換します。
  3. 3
    ツリーの線が描画されます
    適切な├──、└──、│のガイドが生成され、入れ子の枝にも正しい縦線が引き継がれます。
  4. 4
    結果をコピーします
    UnicodeまたはプレーンASCIIの線種を選び、ツリーをREADME、ドキュメント、コードコメントにコピーします。

端末上で完全に動作するシンプルなテキストツールです。何もアップロードされません。

ガイド

実例

ページを開くと12行の例が表示されます。「my-project」の下に「src」「public」「package.json」「README.md」があり、「src」の下に「components」「lib」「index.ts」があります。既定の「├── Unicode」スタイルでは、├── は下に兄弟がある項目を示し、└── は最後の項目を示し、│ は枝を下に伸ばします。「index.ts # entry point」のように入力した注釈は「index.ts # entry point」として出力され、すべての注釈は、注釈が付いた最も長い行の2文字分右の列にそろえられます。「- Markdown」を押すと入れ子の箇条書き(レベルごとに2スペース)になり、「|-- ASCII」を押すとプレーンな文字になります。3つのパス src/app/page.tsx、src/app/layout.tsx、src/lib/utils.ts を貼り付けると、src の下に app(page.tsx, layout.tsx)と lib(utils.ts)が配置されます。

使用する設定と制限事項

  • ツリーの出力先に合わせてスタイルを選択します。 「├── Unicode」はREADMEやドキュメントで最も見栄えが良くなります。「|-- ASCII」はプレーンな文字のみを使用し、罫線文字が表示されない可能性のある端末、ログ、コードコメントに適しています。「- Markdown」は箇条書きリストを作成します。「ダウンロード」は tree.txt を保存します。Markdown スタイルの場合は tree.md を保存します。
  • インデントでネストするか、パスを貼り付けます。 インデントを深くするたびに、上の行の子が作成されます。タブは4つのスペースとしてカウントされ、ボックス内でのTabキーは2つのスペースを挿入します(Shift+Tabで削除します。ボックスから出るにはEscapeを押してからTabを押します)。git ls-files、find、dir /s /b の出力のようなパスのリストを、/ または \ 区切りで貼り付けることもでき、それらは1つのツリーにマージされます。名前の末尾に / を付けると空のフォルダとしてマークされます。
  • 区切り文字の後に注釈を追加します。 名前の後ろに「 # 」「 // 」「 - 」「 <- 」を、両側にスペースを入れて書くと、行の残りの部分が注釈になり、1つの列にそろえられます。「コメントの形式」で、出力に #、//、<-- のいずれを表示するかを選びます。「My Doc - final.docx」のように、名前にスペース、ダッシュ、スペースが含まれる場合、名前と注釈に分割されるため、ダッシュの前後にスペースを入れずに書いてください。
  • フォルダを先に並べ、フォルダにスラッシュを付けます。 「フォルダを先に表示」は、すべての階層でフォルダをファイルより前に並べ、それ以外は元の順序を保ちます。「末尾のスラッシュ」は、すべてのフォルダ(子を持つ名前、または / で終わらせた名前)の後ろに / を付けます。
  • ツリーを貼り付けてスタイルを変更します。 貼り付けたテキストがすでにツリーの形(├──、└──、|-- または +-- の行。Linux の tree や Windows の tree /f の出力を含む)をしている場合、ボックスはそれをインデント付きリストに変換し、「貼り付けたツリーを検出しました。編集できるインデント付きリストに変換しました。」と表示します。そのあと、スタイルの切り替え、並べ替え、注釈の追加ができます。Windows が出力する「Folder PATH listing」や「Volume serial number」などのヘッダー行は取り除かれます。
  • フォルダまたはzipから名前をインポートします。 「フォルダをインポート」(スマートフォンでは非表示)、フォルダをボックスにドロップする方法、または「.zip をインポート」は、ファイル名だけを読み取り、内容は一切読み取りません。「インポートオプション」の「除外する名前(カンマ区切り、* 使用可)」では、初期状態で node_modules、.git、dist、build、.next、__pycache__、.venv などの一般的なビルド用フォルダが除外され、「最大の深さ」は初期値が7で、1から30の範囲で設定できます。深さはファイルより上のフォルダ数で数え、最上位のフォルダも含みます。スキップされたファイルの数は注釈に表示されます。

よくある問題とその解決方法

ツリーがフラットに出力され、枝が表示されません。
インデントがなかったため、すべての行が最上位の項目になりました。子項目はスペースまたはTabキーでインデントしてください。唯一の例外はパスのリスト(名前に / または \ を含むもの)で、どの行もインデントされていない場合に限り自動的にネストされます。
ファイル名の一部が注釈として表示されます。
スペース、#、//、-、または <- の後にスペースが続くと、注釈が始まります。"My Doc - final.docx" は、名前 "My Doc" に注釈 "final.docx" が付いたものになります。"My Doc-final.docx" のようにダッシュの前後のスペースを削除してください。# や - の前後にスペースがない場合("C# notes.md" など)は、名前の一部として扱われます。
「その .zip を読み取れませんでした。暗号化されていない有効な zip ファイルか確認してください。」と表示されます。
ファイルをzipとして開けませんでした。破損している、パスワードで保護されている、または実際にはzipではない可能性があります。通常のzipを作成して、もう一度お試しください。「その .zip にはエントリがありません。」は、アーカイブが空であることを意味します。
フォルダをインポートしたあと、ファイルが足りません。
ボックスの下にある「12個のファイルをスキップ(除外対象または深すぎる階層)」などの注釈を確認してください。フォルダ名またはファイル名が「除外する名前」に一致する場合、または「最大の深さ」より深い階層にある場合、ファイルはスキップされます。「インポートオプション」を開いてリストを編集するか、「最大の深さ」の値を上げてください。テキストを編集していない限り、変更は最後のインポートに適用されます。また、ドロップしたフォルダは、除外リストが適用される前に最大約50,000個の名前までしか読み取られないため、巨大な node_modules を含むプロジェクトでは実際のファイルが欠ける可能性があります。代わりに「フォルダをインポート」を使うか、node_modules を含まないzipを作成してください。
「ドロップしたフォルダまたはファイルを読み取れませんでした。」と表示されます。
ブラウザがドロップしたアイテムの一覧表示を拒否しました。代わりに「フォルダをインポート」を使うか、.zip を作成して「.zip をインポート」を使ってください。スマートフォンではフォルダのオプションは非表示になるため、zipを使ってください。

比較

すでにあるフォルダなら、ターミナルで tree コマンド(Windowsでは tree /f)を使うと、正確な一覧を一度に取得でき、このツールはその出力のスタイルを整え直せます。まだ存在しないレイアウトを計画したいとき、フォルダの一部だけを見せたいとき、注釈を加えたいとき、Unicode、ASCII、Markdownを切り替えたいときは、このツールが向いています。扱うのは名前だけで、ファイルサイズ、日付、権限、内容は扱いません。また、インポート時は、リストを変更しない限り、一般的なビルド用フォルダを除外します。スタイルの違いとして、Unicodeは最も読みやすい反面、罫線文字が表示されない場所があります。ASCIIは端末やコードコメントで安全に使え、Markdownは箇条書きとして表示させたいリストに向いています。

関連ツール

よくある質問