Skip to main content
This guide will walk you through using Draw Folder Structure for the first time. You’ll learn how to generate a Markdown representation of your project’s folder structure and customize it to your needs.

​
Generate your first structure

1

Open your project

Open any project folder in VS Code. Make sure you can see the file explorer in the sidebar (View > Explorer or Ctrl+Shift+E).
2

Right-click on a folder

In the Explorer view, right-click on any folder you want to visualize. You can also right-click on individual files.
Start with a small folder to see how the extension works. You can try it on larger folders once you’re familiar with the output.
3

Select 'Generate Markdown structure'

From the context menu, click on “Generate Markdown structure”. The extension will immediately start processing your folder.
4

View the result

Two things happen automatically:
  • A new editor tab opens showing the generated structure
  • The structure is copied to your clipboard
You’ll also see a notification: “Markdown structure copied to clipboard!”

​
Example output

When you generate a structure for a typical project folder, the output looks like this: 
└── 📁 my-project
  └── 📁 src
    ├── index.ts
    ├── types.ts
    └── 📁 utils
      └── helper.ts
  ├── package.json
  ├── README.md
  └── tsconfig.json
The structure is automatically wrapped in Markdown code blocks and ready to paste into your documentation.
By default, the extension uses the EmojiDashes style and excludes common directories like node_modules, .git, dist, .next, and out.

​
Understanding the output

The generated structure includes:
  • Hierarchical indentation - Shows the nesting level of each file and folder
  • Visual indicators - Icons and lines that make the structure easy to read
  • File and folder names - The basename of each item in your directory tree
  • Markdown formatting - Wrapped in code blocks for proper rendering

​
What gets included

By default, the extension:
  • Includes: All files and folders recursively
  • Excludes: node_modules, .git, dist, .next, and out directories
  • Respects: Your configured exclusion patterns
  • Ignores: .gitignore rules (unless you enable respectGitignore)

​
Try different styles

The extension comes with 20+ visual styles. To try a different style:
1

Open Settings

Press Ctrl+, (Windows/Linux) or Cmd+, (macOS) to open Settings, or use the Command Palette and search for “Preferences: Open Settings”.
2

Search for Draw Folder Structure

Type “draw folder structure” in the search bar to filter the settings.
3

Change the style

Click on the Style dropdown and select a different style like:
  • ClassicDashes - Traditional tree structure with dashes
  • MinimalistDots - Clean look with dots
  • Arrows - Arrow-based hierarchy
  • BoldBlocks - Bold block characters
  • SparklesDesing - Decorative sparkles theme
  • And 15+ more styles!
4

Generate again

Right-click on a folder and select “Generate Markdown structure” again to see the new style in action.
You can quickly switch between styles to find the one that best matches your documentation aesthetic. Each style is optimized for readability in Markdown.

​
Common workflows

​
Adding structure to README files

  1. Generate the structure for your project folder
  2. Open your README.md file
  3. Paste the structure from your clipboard (it’s already there!)
  4. The structure will render perfectly in Markdown viewers

​
Documenting specific modules

  1. Right-click on a specific subfolder (e.g., src/components)
  2. Generate the structure for just that module
  3. Include it in your module documentation

​
Sharing project structure

  1. Generate the structure for your project root
  2. Paste it into GitHub issues, pull requests, or team chat
  3. Team members see the exact folder layout instantly

​
Next steps

Customize exclusions

Learn how to exclude specific files and folders using glob patterns

Explore all styles

See all 20+ available visual styles and examples

Configure recursion

Control whether to generate deep or shallow structures

Use gitignore

Automatically exclude files listed in .gitignore

Build docs developers (and LLMs) love

Get started for freeTalk to us