Advanced Usage - Draw Folder Structure

Overview

This guide covers advanced features and techniques for using Draw Folder Structure in complex projects. Learn how to optimize performance, combine settings strategically, and handle edge cases.

Recursion Control

The allowRecursion setting controls whether the extension explores subdirectories when generating structures.

How It Works

When you right-click on a folder:

allowRecursion: true (default) - Generates a complete tree of all subdirectories
allowRecursion: false - Shows only immediate children (one level deep)

Configuration

{
  "draw.folder.structure.allowRecursion": false
}

Use Cases

Top-Level Overview

Disable recursion when you only want to show the main structure:

{
  "draw.folder.structure.allowRecursion": false,
  "draw.folder.structure.style": "ClassicDashes"
}

Result for a project:

my-project
  └── src
  └── tests
  └── docs
  ├── package.json
  └── README.md

Perfect for high-level documentation that doesn’t need implementation details.

Performance Optimization

For very large projects (1000+ files), disabling recursion on the root folder improves generation speed:

{
  "draw.folder.structure.allowRecursion": false
}

Then selectively run the command on specific subdirectories with recursion enabled.

Documentation Sections

Generate separate structures for different sections:settings.json:

{
  "draw.folder.structure.allowRecursion": true
}

Workflow:

Right-click src/ folder → Generate structure → Copy to “Source Code” section
Right-click tests/ folder → Generate structure → Copy to “Test Suite” section
Right-click docs/ folder → Generate structure → Copy to “Documentation” section

Recursion with Exclusions

Combine recursion with exclusions for fine-grained control:

{
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/dist",
    "**/coverage",
    "**/src/generated"  // Exclude specific deep paths
  ]
}

This allows recursive exploration but skips specified directories.

.gitignore Integration

The respectGitignore setting instructs the extension to honor your project’s .gitignore rules.

How It Works

When enabled, the extension:

Locates the .gitignore file in your project root
Parses the patterns defined in it
Excludes any matching files or folders from the generated structure

Configuration

{
  "draw.folder.structure.respectGitignore": true
}

Use Cases

Clean Repository View

Show only files that are tracked by Git:

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.exclude": [
    "**/.git"  // Still exclude .git folder itself
  ]
}

This is perfect for documentation that mirrors your repository structure.

Environment-Aware Structures

Your .gitignore typically excludes:

Environment files (.env, .env.local)
Build artifacts
Dependencies
IDE files

Enable respectGitignore to automatically exclude all of these without manually configuring exclusion patterns.

Team Consistency

When your team shares a .gitignore, enabling this setting ensures everyone generates consistent structure documentation:

{
  "draw.folder.structure.respectGitignore": true
}

Commit this configuration in .vscode/settings.json for team-wide consistency.

Combining with Exclusion Patterns

Exclusion patterns and .gitignore work additively:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/temp"  // Additional exclusions beyond .gitignore
  ],
  "draw.folder.structure.respectGitignore": true
}

Files matching either source will be excluded.

There’s no way to “un-exclude” something from .gitignore. If a file is ignored by Git and you want it in your structure, you must disable respectGitignore.

Example Scenario

Your .gitignore:

node_modules/
.env
*.log
dist/
coverage/

Your settings.json:

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.exclude": [
    "**/.git",
    "**/docs/drafts"  // Extra exclusion not in .gitignore
  ]
}

Result: Excludes everything from .gitignore PLUS docs/drafts/.

Combining Multiple Settings

The real power comes from combining all settings for complex scenarios.

Scenario 1: Large Monorepo

Challenge: Generate documentation for a monorepo with multiple packages. Solution:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/coverage",
    "**/.turbo",
    "**/packages/*/node_modules"  // Exclude nested node_modules
  ],
  "draw.folder.structure.style": "ClassicDashes",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": true
}

Workflow:

Right-click the packages/ folder to see all packages
Right-click individual packages for detailed views

Scenario 2: Documentation-Only Structure

Challenge: Show only source files relevant for documentation. Solution:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/build",
    "**/*.test.{js,ts,jsx,tsx}",
    "**/*.spec.{js,ts,jsx,tsx}",
    "**/__tests__",
    "**/coverage",
    "**/.vscode",
    "**/.idea",
    "**/*.config.{js,ts}",
    "**/package-lock.json"
  ],
  "draw.folder.structure.style": "EmojiDashes",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": false
}

This shows a clean structure with only source files and documentation.

Scenario 3: API Documentation

Challenge: Document only the API routes and handlers. Solution:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/components",  // Exclude frontend code
    "**/styles",
    "**/public",
    "**/*.test.*"
  ],
  "draw.folder.structure.style": "Arrows",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": false
}

Workflow: Right-click the api/ or routes/ folder to generate API-specific documentation.

Scenario 4: Quick Root Overview

Challenge: Show only the root-level structure for project README. Solution:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git"
  ],
  "draw.folder.structure.style": "MinimalistDots",
  "draw.folder.structure.allowRecursion": false,  // Key setting
  "draw.folder.structure.respectGitignore": false
}

Perfect for README files that need a birds-eye view.

Scenario 5: Multi-Language Project

Challenge: Document a project with backend and frontend in different languages. Solution:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/__pycache__",
    "**/venv",
    "**/.git",
    "**/dist",
    "**/build",
    "**/target",  // Rust/Java
    "**/vendor"   // Go/PHP
  ],
  "draw.folder.structure.style": "NestedCircles",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": true
}

Excludes common build artifacts across multiple language ecosystems.

Performance Tips

Optimize structure generation for large projects:

Exclude Large Directories First

Always exclude the largest directories:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",  // Often 100k+ files
    "**/.git",          // Git history
    "**/dist",
    "**/build"
  ]
}

This can reduce generation time from minutes to seconds.

Use Recursion Strategically

For projects with 1000+ files:

Disable recursion at root level:

{"draw.folder.structure.allowRecursion": false}

Generate top-level structure

Re-enable recursion:

{"draw.folder.structure.allowRecursion": true}

Generate structures for specific subdirectories

This gives you control over which parts to explore deeply.

Leverage .gitignore

Enable respectGitignore to automatically exclude most irrelevant files:

{
  "draw.folder.structure.respectGitignore": true
}

This is faster than maintaining extensive exclusion lists.

Use Specific Patterns

Slow (scans more files):

{"draw.folder.structure.exclude": ["**/test"]}

Faster (more specific):

{
  "draw.folder.structure.exclude": [
    "**/src/test",
    "**/lib/test"
  ]
}

More specific patterns reduce the scanning scope.

Workspace-Specific Configurations

For projects with unique requirements, use workspace settings.

Creating Workspace Settings

Create .vscode/settings.json in your project root:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/packages/legacy"  // Project-specific
  ],
  "draw.folder.structure.style": "EmojiDashes",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": true
}

Commit this file to version control
Team members get consistent structure generation

Multiple Profile Strategy

Use VS Code profiles for different documentation needs: Profile 1: Developer Documentation

{
  "draw.folder.structure.exclude": ["**/node_modules", "**/.git"],
  "draw.folder.structure.style": "ClassicDashes",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": false
}

Profile 2: User Documentation

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/tests",
    "**/*.test.*",
    "**/internal"
  ],
  "draw.folder.structure.style": "EmojiFun",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": true
}

Switch profiles depending on your documentation audience.

Advanced Exclusion Techniques

Dynamic Exclusions Based on Context

Adjust exclusions for different contexts:

API Documentation
Frontend Documentation
Full Stack Documentation

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/frontend",
    "**/components",
    "**/styles",
    "**/public"
  ]
}

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/api",
    "**/server",
    "**/database"
  ]
}

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/build",
    "**/coverage"
  ]
}

Excluding Generated Code

Many projects have code generation tools. Exclude generated files:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/__generated__",        // Relay, GraphQL
    "**/generated",
    "**/*.generated.{ts,js}",
    "**/migrations/*.ts",      // Database migrations
    "**/prisma/client"        // Prisma client
  ]
}

Troubleshooting

Structure Takes Too Long to Generate

Causes:

Not excluding large directories (node_modules, .git)
Too many files being scanned

Solutions:

Add common exclusions:

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist"
  ]
}

Enable respectGitignore
Try allowRecursion: false for initial scan

Important Files Are Missing

Causes:

Too aggressive exclusion patterns
.gitignore excluding necessary files

Solutions:

Review your exclusion patterns

Disable respectGitignore temporarily:

{"draw.folder.structure.respectGitignore": false}

Use negation patterns to include specific files:

{
  "draw.folder.structure.exclude": [
    "**/config",
    "!**/config/important.js"
  ]
}

Structure Doesn't Match Expectations

Causes:

Recursion disabled when you need it
Workspace settings overriding user settings

Solutions:

Check recursion setting:

{"draw.folder.structure.allowRecursion": true}

Check for workspace settings in .vscode/settings.json
Verify exclusion patterns are correct

Best Practices Summary

Start Simple

Begin with default settings and add exclusions as needed. Don’t over-configure initially.

Use .gitignore

Enable respectGitignore for automatic, consistent exclusions across your team.

Document Your Config

Add comments in .vscode/settings.json to explain project-specific patterns.

Test Incrementally

Make one configuration change at a time and test the output before adding more.

Real-World Examples

Next.js Blog Project

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/.next",
    "**/out",
    "**/public/images",  // Large image directory
    "**/*.lock"
  ],
  "draw.folder.structure.style": "EmojiDashes",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": true
}

React Component Library

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/storybook-static",
    "**/*.test.tsx",
    "**/*.stories.tsx",
    "**/coverage"
  ],
  "draw.folder.structure.style": "NestedCircles",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": false
}

Express.js API Server

{
  "draw.folder.structure.exclude": [
    "**/node_modules",
    "**/.git",
    "**/dist",
    "**/logs",
    "**/*.log",
    "**/coverage",
    "**/*.test.js"
  ],
  "draw.folder.structure.style": "ClassicDashes",
  "draw.folder.structure.allowRecursion": true,
  "draw.folder.structure.respectGitignore": true
}

Next Steps

Configuration Reference

Detailed reference for all configuration options

Exclusion Patterns

Deep dive into glob pattern syntax

Styling Options

Explore all available visual styles

API Reference

Complete API documentation

Get Started

Guides

Examples

​Overview

​Recursion Control

​How It Works

​Configuration

​Use Cases

​Recursion with Exclusions

​.gitignore Integration

​How It Works

​Configuration

​Use Cases

​Combining with Exclusion Patterns

​Example Scenario

​Combining Multiple Settings

​Scenario 1: Large Monorepo

​Scenario 2: Documentation-Only Structure

​Scenario 3: API Documentation

​Scenario 4: Quick Root Overview

​Scenario 5: Multi-Language Project

​Performance Tips

​Workspace-Specific Configurations

​Creating Workspace Settings

​Multiple Profile Strategy

​Advanced Exclusion Techniques

​Dynamic Exclusions Based on Context

​Excluding Generated Code

​Troubleshooting

​Best Practices Summary

Start Simple

Use .gitignore

Document Your Config

Test Incrementally

​Real-World Examples

​Next.js Blog Project

​React Component Library

​Express.js API Server

​Next Steps

Configuration Reference

Exclusion Patterns

Styling Options

API Reference

Build docs developers (and LLMs) love

Overview

Recursion Control

How It Works

Configuration

Use Cases

Recursion with Exclusions

.gitignore Integration

How It Works

Configuration

Use Cases

Combining with Exclusion Patterns

Example Scenario

Combining Multiple Settings

Scenario 1: Large Monorepo

Scenario 2: Documentation-Only Structure

Scenario 3: API Documentation

Scenario 4: Quick Root Overview

Scenario 5: Multi-Language Project

Performance Tips

Workspace-Specific Configurations

Creating Workspace Settings

Multiple Profile Strategy

Advanced Exclusion Techniques

Dynamic Exclusions Based on Context

Excluding Generated Code

Troubleshooting

Best Practices Summary

Real-World Examples

Next.js Blog Project

React Component Library

Express.js API Server

Next Steps