File Tree

Visualize folder and file structures.

Basic Usage

  • src
    • components
      • Button.tsx
      • Card.tsx
    • utils
      • helpers.ts
    • index.ts

Highlighting Files

Mark important files with *:

  • src
    • components
      • Button.tsx
      • Card.tsx
    • index.ts

With Comments

Add annotations with #:

  • my-docs
    • docyard.ymlSite configuration
    • docs
      • _sidebar.ymlNavigation structure
      • index.mdLanding page
      • publicStatic assets

Project Structure

  • my-docs
    • docyard.ymlMain config
    • docs
      • _sidebar.ymlSidebar navigation
      • index.mdLanding page
      • getting-started
        • quickstart.md
        • installation.md
        • project-structure.md
      • write-content
        • markdown.md
        • components
          • callouts.md
          • tabs.md
          • code-blocks.md
      • public
        • logo.svg
        • favicon.ico
        • images
    • distBuild output (generated)

Nested Folders

  • app
    • controllers
      • api
        • v1
          • users_controller.rb
          • posts_controller.rb
        • v2
          • users_controller.rb
      • application_controller.rb
    • models
      • user.rb
      • post.rb
    • views
      • layouts
        • application.html.erb

Mixed Content

  • project
    • .github
      • workflows
        • ci.ymlCI pipeline
        • deploy.ymlDeployment
    • src
      • index.ts
      • config.ts
    • tests
      • index.test.ts
    • package.json
    • tsconfig.json
    • README.md

Syntax 

```filetree
folder/
  subfolder/
    file.txt
  another-file.js
  highlighted.md *
  annotated.yml # This is a comment
```

Reference

Feature Syntax Description
Folder name/ Trailing slash marks directories
File name.ext No trailing slash for files
Nesting 2 spaces Indentation creates hierarchy
Highlight name * Visual emphasis
Comment name # text Inline annotation
Edit this page
Last updated
Built with Docyard