Skip to main content

​
Overview

Draw Folder Structure offers 20+ predefined styles to customize the visual appearance of your folder structure output. Each style uses different characters, symbols, or emojis to represent folders and files.

​
Available Styles

​
Classic Styles

​
ClassicDashes
string
Traditional tree-style structure using dashes and corner characters.Characters:
  • Folders: └── / 📁
  • Files: ├── or └── (last item)
Best for: Professional documentation, READMEs, traditional project documentation
​
MinimalistDots
string
Clean and minimal style using bullet points.Characters:
  • Folders: •
  • Files: •
Best for: Simple, uncluttered documentation with minimal visual noise
​
PipesAndHyphens
string
Box-drawing style with pipes and hyphens.Characters:
  • Folders: |-
  • Files: |-
Best for: Technical documentation, system diagrams

​
Emoji Styles

​
EmojiDashes
string
Combines classic tree structure with folder emoji. Default style.Characters:
  • Folders: └── 📁
  • Files: ├── or └── (last item)
Best for: Modern documentation with visual hierarchy
​
EmojiFun
string
Fun emoji-based style using folder and document icons.Characters:
  • Folders: 📁
  • Files: 📄
Best for: Casual documentation, tutorials, friendly guides
​
EmojiMinimalist
string
Minimalist approach with selective emoji use.Characters:
  • Folders: 📁
  • Files: ─
Best for: Balance between visual interest and simplicity

​
Themed Emoji Styles

​
SparklesDesing
string
Adds sparkle emoji for a magical, highlighted appearance.Characters:
  • Folders: 📁✨
  • Files: ✨
Best for: Highlighting new or special features, festive documentation
​
TrailDesign
string
Uses footprint emoji to suggest a path or journey.Characters:
  • Folders: 👣📁
  • Files: 👣📄
Best for: Tutorial paths, learning journeys, step-by-step guides
​
FloralDesign
string
Floral theme with flower emoji.Characters:
  • Folders: 🌸📁
  • Files: 🌸📄
Best for: Creative projects, design documentation, artistic themes
​
GalacticDesign
string
Space-themed with galaxy emoji.Characters:
  • Folders: 🌌📁
  • Files: 🌌📄
Best for: Sci-fi projects, astronomy-related documentation, cosmic themes

​
Symbol Styles

​
Arrows
string
Arrow-based navigation style.Characters:
  • Folders: ➜
  • Files: ➜
Best for: Navigation documentation, flow diagrams
​
ChevronIndicators
string
Double-angle quotation marks for hierarchy.Characters:
  • Folders: »
  • Files: »
Best for: Nested navigation, menu structures
​
Triangles
string
Triangle pointers for directional emphasis.Characters:
  • Folders: ▶
  • Files: ▶
Best for: Expandable/collapsible structure references
​
Zigzag
string
Curved arrow style suggesting flow.Characters:
  • Folders: ↳
  • Files: ↳
Best for: Process flows, dependencies

​
Shape Styles

​
NestedCircles
string
Circular shapes to show hierarchy.Characters:
  • Folders: ◉ (filled circle)
  • Files: ○ (hollow circle)
Best for: Visual distinction between folders and files
​
CirclesAndLines
string
Combines circles with horizontal lines.Characters:
  • Folders: ◯
  • Files: ─
Best for: Clean hierarchy with clear file/folder distinction
​
NestedSquares
string
Square shapes for geometric appearance.Characters:
  • Folders: ■ (filled square)
  • Files: □ (hollow square)
Best for: Structured, grid-like documentation
​
BoldBlocks
string
Bold square blocks for emphasis.Characters:
  • Folders: ■
  • Files: ■
Best for: High-contrast, bold documentation

​
Mixed Styles

​
DotDashMix
string
Combines dots for folders and dashes for files.Characters:
  • Folders: •
  • Files: -
Best for: Clear visual separation between folders and files
​
SlashSeparators
string
Forward slash style suggesting paths.Characters:
  • Folders: /
  • Files: /
Best for: Path-like representations, URL structures

​
Style Enum Reference

The styles are defined in the TypeScript enum located at src/types/style.ts:
src/types/style.ts
export enum Style {
  ClassicDashes = 'ClassicDashes',
  SparklesDesing = 'SparklesDesing',
  TrailDesign = 'TrailDesign',
  FloralDesign = 'FloralDesign',
  GalacticDesign = 'GalacticDesign',
  MinimalistDots = 'MinimalistDots',
  EmojiFun = 'EmojiFun',
  EmojiMinimalist = 'EmojiMinimalist',
  EmojiDashes = 'EmojiDashes',
  Arrows = 'Arrows',
  NestedCircles = 'NestedCircles',
  BoldBlocks = 'BoldBlocks',
  SlashSeparators = 'SlashSeparators',
  ChevronIndicators = 'ChevronIndicators',
  DotDashMix = 'DotDashMix',
  Triangles = 'Triangles',
  Zigzag = 'Zigzag',
  PipesAndHyphens = 'PipesAndHyphens',
  NestedSquares = 'NestedSquares',
  CirclesAndLines = 'CirclesAndLines',
}

​
Setting a Style

To configure a style, set the draw.folder.structure.style option in your settings.json:
settings.json
{
  "draw.folder.structure.style": "ClassicDashes"
}
Or use the VS Code settings UI:
  1. Open Settings (Ctrl+, or Cmd+,)
  2. Search for “Draw Folder Structure”
  3. Select your preferred style from the dropdown

​
Style Selection Guide

Recommended: ClassicDashes, PipesAndHyphens, MinimalistDotsThese styles provide clean, professional output suitable for technical documentation and README files.
Recommended: EmojiDashes, EmojiFun, SparklesDesingThese styles add visual interest while maintaining readability.
Recommended: TrailDesign, FloralDesign, GalacticDesignThese styles add personality and thematic consistency to your documentation.
Recommended: MinimalistDots, EmojiMinimalist, SlashSeparatorsThese styles reduce visual noise while maintaining structure clarity.

Build docs developers (and LLMs) love

Get started for freeTalk to us