README用ディレクトリ階層図ビルダー｜テキストやフォルダから綺麗なツリー図を自動生成

プロジェクトのREADMEファイルに掲載する、見やすいディレクトリ階層図を瞬時に生成するオンラインツールです。インデント付きのテキストリストや、実際のプロジェクトフォルダから、罫線付きのツリー図を自動で作成します。

💡 ツール概要

このツールは、GitHubリポジトリ等のREADME.mdでプロジェクトの構造を視覚的に説明する際に役立ちます。手作業で罫線を描く手間を省き、正確な階層図を簡単に作成できます。

• 2つの入力モードに対応 インデント（スペースやタブ）で階層を表現したテキストを貼り付けるだけでツリーを生成できます。また、実際のプロジェクトフォルダをドラッグ＆ドロップして、その構造から直接ツリーを生成することも可能です。
• 不要なディレクトリを自動除外 フォルダ入力モードでは、.gitやnode_modules, distなど、一般的に階層図に含める必要のないディレクトリやファイルを自動的に除外するため、すっきりとした見やすい図が生成されます。
• コメントの保持/削除 テキスト入力時に # や // を使って各ファイルやフォルダに注釈を追記できます。生成時にこれらのコメントを残すか、クリーンなツリーにするかを選択できます。
• プライバシー保護 フォルダを読み込む処理はすべてブラウザ内で行われます。ファイルやフォルダの情報がサーバーに送信されることは一切ありません。

🧐 よくある質問

Q. フォルダをドラッグ＆ドロップした際に、node_modulesや.gitが表示されません。

A. これらのディレクトリは、多くのプロジェクトで非常に多くのファイルを含んでおり、階層図に含めると可読性が著しく低下するため、デフォルトで除外される仕様となっています。もし特定のファイルを含めたい場合は、お手数ですがテキスト入力モードをご利用ください。

Q. テキスト入力のインデント（字下げ）にルールはありますか？

A. スペースまたはタブによるインデントに対応しています。インデントの深さ（文字数）の相対的な違いによって階層構造を自動で判定するため、厳密にスペース数を揃える必要はありません。例えば、親要素より深いインデントを持つ項目は、その子要素として認識されます。

📚 README用ディレクトリ階層図ビルダーの豆知識

LinuxやmacOS、Windowsのコマンドラインには、同様の機能を持つtreeという標準コマンドが存在します。このコマンドはカレントディレクトリ以下のファイル構造をツリー形式で表示する非常に便利なツールです。例えば、tree -I "node_modules|.git"のように-Iオプションを使うことで、特定のディレクトリを除外して表示できます。

このWebツールは、treeコマンドの利便性をブラウザ上で実現したものです。コマンドラインに不慣れな方や、GUIで直感的に操作したい場合、あるいは手元のテキストリストから素早く整形したい場合に特に役立ちます。生成されたツリーはそのままコピーしてMarkdownファイルに貼り付けるだけで使えるため、ドキュメント作成の効率を大幅に向上させます。