Skip to main content
Draw Folder Structure is a Visual Studio Code extension designed to visually represent your project’s folder and file structure in Markdown format. Ideal for documentation and overview purposes, this tool simplifies the process of sharing and understanding project structures.

Installation

Install the extension from VS Code Marketplace

Quickstart

Generate your first folder structure in seconds

Configuration

Customize styles, exclusions, and behavior

​
What it does

Draw Folder Structure generates a clean, visual representation of your project’s directory tree in Markdown format. Simply right-click any folder in VS Code’s file explorer, select “Generate Markdown structure”, and the extension will create a formatted structure that’s automatically copied to your clipboard and displayed in a new editor tab. The generated structure is wrapped in Markdown code blocks and can be pasted directly into README files, documentation, or shared with team members.

​
Key features

  • Quick and easy visualization - Instantly generate a Markdown representation of your folder structure with a single click
  • 20+ customizable designs - Choose from a variety of visual styles including ClassicDashes, EmojiDashes, MinimalistDots, Arrows, BoldBlocks, and many more
  • Automatic formatting - Generated structures are automatically wrapped in backticks for proper Markdown code formatting
  • Clipboard integration - Automatically copies the generated structure to the clipboard with user notification for easy pasting
  • Flexible exclusions - Exclude specific files and folders using glob patterns (like **/node_modules, **/*.log) for precise control over the generated structure
  • Recursive control - Toggle between full recursive exploration or shallow, top-level directory views
  • Gitignore support - Optionally respect .gitignore rules to exclude files that aren’t relevant to your documentation
  • Enhanced usability - Designed for convenience, making folder structure sharing effortless

​
How it works

The extension integrates directly into VS Code’s file explorer context menu. When you right-click on any folder or file and select “Generate Markdown structure”, the extension:
  1. Reads the folder structure using the configured settings
  2. Applies exclusion patterns and respects .gitignore if enabled
  3. Generates a formatted tree structure using your selected visual style
  4. Wraps the output in Markdown code blocks
  5. Copies the result to your clipboard
  6. Opens a new editor tab showing the generated structure
The extension uses fast-glob for efficient file scanning and supports deep customization through VS Code’s settings system.

​
Next steps

Install the extension

Get started by installing from the VS Code Marketplace

Follow the quickstart

Learn how to generate your first folder structure

Build docs developers (and LLMs) love

Get started for freeTalk to us