Skip to main content

​
Overview

Draw Folder Structure offers 20+ distinct visual styles to render your folder and file structures. Each style uses different characters and symbols to create unique visual representations.

​
Available Styles

The extension provides styles ranging from classic tree views to emoji-enhanced designs. Choose the style that best fits your documentation aesthetic.

​
Classic Styles

ClassicDashes

Traditional tree structure with dashes and pipes.Example Output:
project
  └── src
  ├── index.ts
  └── utils.ts
Best for: Traditional documentation, technical docs, README files
Clean structure using pipes and hyphens.Example Output:
project
  |- src
  |- index.ts
  |- utils.ts
Best for: Technical documentation, minimalist style

​
Minimalist Styles

Simple structure with bullet points.Example Output:
project
  • src
  • index.ts
  • utils.ts
Best for: Clean, modern documentation
Combination of dots for folders and dashes for files.Example Output:
project
  • src
  - index.ts
  - utils.ts
Best for: Visual distinction between files and folders

​
Emoji Styles

EmojiDashes

Classic tree structure enhanced with emoji icons (default style).Example Output:
project
  └── 📁 src
  ├── index.ts
  └── utils.ts
Best for: Engaging documentation, tutorials, visual learners
Fun emoji-based structure with folder and file icons.Example Output:
project
  📁 src
  📄 index.ts
  📄 utils.ts
Best for: Playful documentation, beginner-friendly guides
Minimal emoji style with folder icons and simple dashes for files.Example Output:
project
  📁 src
  ─ index.ts
  ─ utils.ts
Best for: Clean emoji style without overwhelming visuals
Decorative style with sparkles and folder emojis.Example Output:
project
  📁✨ src
  ✨ index.ts
  ✨ utils.ts
Best for: Eye-catching documentation, creative projects
Path-inspired style with footprint emojis.Example Output:
project
  👣📁 src
  👣📄 index.ts
  👣📄 utils.ts
Best for: Tutorial guides, step-by-step documentation
Nature-inspired style with flower emojis.Example Output:
project
  🌸📁 src
  🌸📄 index.ts
  🌸📄 utils.ts
Best for: Creative projects, design documentation
Space-themed style with galaxy emojis.Example Output:
project
  🌌📁 src
  🌌📄 index.ts
  🌌📄 utils.ts
Best for: Futuristic themes, tech documentation

​
Symbolic Styles

Arrow-based structure.Example Output:
project
  ➜ src
  ➜ index.ts
  ➜ utils.ts
Best for: Flow-oriented documentation
Chevron symbols for hierarchy.Example Output:
project
  » src
  » index.ts
  » utils.ts
Best for: Modern, clean look
Triangle symbols for structure.Example Output:
project
  ▶ src
  ▶ index.ts
  ▶ utils.ts
Best for: Expandable-looking structures
Zigzag arrows for visual interest.Example Output:
project
  ↳ src
  ↳ index.ts
  ↳ utils.ts
Best for: Unique visual style

​
Geometric Styles

Circle symbols distinguishing folders (filled) and files (hollow).Example Output:
project
  ◉ src
  ○ index.ts
  ○ utils.ts
Best for: Clear file/folder distinction
Circles with horizontal lines.Example Output:
project
  ◯ src
  ─ index.ts
  ─ utils.ts
Best for: Minimal geometric style
Bold square blocks.Example Output:
project
  ■ src
  ■ index.ts
  ■ utils.ts
Best for: Strong visual hierarchy
Square symbols distinguishing folders (filled) and files (hollow).Example Output:
project
  ■ src
  □ index.ts
  □ utils.ts
Best for: Clear geometric distinction

​
Other Styles

Forward slashes for a path-like appearance.Example Output:
project
  / src
  / index.ts
  / utils.ts
Best for: Unix/Linux path-style documentation

​
Changing Your Style

There are multiple ways to change the style setting:
  1. Open VS Code Settings (Ctrl+, or Cmd+,)
  2. Search for “draw.folder.structure.style”
  3. Select your preferred style from the dropdown

​
Complete Style Reference

Here’s a quick reference table of all available styles:
Style NameTypeFile/Folder DistinctionEmojis
ClassicDashesClassicYesNo
PipesAndHyphensClassicNoNo
MinimalistDotsMinimalistNoNo
DotDashMixMinimalistYesNo
EmojiDashesEmojiYesYes
EmojiFunEmojiYesYes
EmojiMinimalistEmojiYesYes
SparklesDesingEmojiYesYes
TrailDesignEmojiYesYes
FloralDesignEmojiYesYes
GalacticDesignEmojiYesYes
ArrowsSymbolicNoNo
ChevronIndicatorsSymbolicNoNo
TrianglesSymbolicNoNo
ZigzagSymbolicNoNo
NestedCirclesGeometricYesNo
CirclesAndLinesGeometricYesNo
BoldBlocksGeometricNoNo
NestedSquaresGeometricYesNo
SlashSeparatorsOtherNoNo

​
Choosing the Right Style

For Technical Docs

Recommended: ClassicDashes, PipesAndHyphens, MinimalistDotsThese styles provide professional, clean output suitable for formal documentation.

For Tutorials

Recommended: EmojiDashes, EmojiFun, TrailDesignEmoji-enhanced styles make learning more engaging and help visual learners.

For README Files

Recommended: ClassicDashes, EmojiDashes, NestedCirclesBalanced styles that work well in GitHub and other Markdown renderers.

For Presentations

Recommended: BoldBlocks, EmojiFun, SparklesDesingEye-catching styles that stand out in slides and presentations.

​
Style Examples in Context

Here’s how different styles render the same project structure: 
my-project
  └── src
  ├── components
  ├── Button.tsx
  └── Card.tsx
  ├── utils
  └── helpers.ts
  └── index.ts
The extension automatically wraps the generated structure in Markdown code blocks (```) for proper formatting.

​
Next Steps

Configuration

Learn about all configuration options

Exclusion Patterns

Control which files and folders appear in your structure

Build docs developers (and LLMs) love

Get started for freeTalk to us