Skip to content

LiteTree Component Usage Guide

Core Features

  • Lightweight
    • No third-party dependencies, small size.
  • Markdown Friendly
    • Uses indentation-based `lite` format, perfectly integrated into Markdown.
  • Highly Customizable
    • Supports custom node styles, tags, comments, and icons.
  • Powerful Variable System
    • Supports defining and reusing styles and icons.
  • Built-in Markers
    • Provides a set of preset markers to represent different states.

Using Custom Icons

A major feature of LiteTree is support for custom icons, but this requires converting SVG images to Base64-encoded Data URIs.

Basic Syntax

Creating Simple Tree Structures

Use indentation (4 spaces recommended) to represent hierarchical relationships.

Basic Tree Structure
  • Company Structure
    • Administrative Center
      • President's Office
      • Human Resources Department
    • Marketing Center
      • Marketing Department
      • Sales Department

md
<LiteTree>
Company Structure
    Administrative Center
        President's Office
        Human Resources Department
    Marketing Center
        Marketing Department
        Sales Department
</LiteTree>

Adding Status Markers

Use end-of-line comments // with specific symbols to add status markers to nodes.

Standard Markers
  • Project Status
    • Completed Tasks Success marker
    • +New Features Add marker
    • -Deprecated Code Delete marker
    • Found Errors Error marker
    • *Modified Files Modify marker
    • Important Projects Important marker

md
<LiteTree>
Project Status
    Completed Tasks      //v    Success marker
    New Features        //+    Add marker
    Deprecated Code     //-    Delete marker
    Found Errors        //x    Error marker
    Modified Files      //*    Modify marker
    Important Projects  //!    Important marker
</LiteTree>

Adding Tags

Use (tag,tag,tag) immediately after the node title to represent node tags, supporting multiple tags.

Basic Tags
  • Technology Stack
    • Frontend Development
      • Node.js ProjectJavaScriptTypeScriptReact
      • Vue.js ProjectVueVitePinia
    • Backend Development
      • API ServicesSpringExpressFastAPI

md
<LiteTree>
Technology Stack
    Frontend Development
        Node.js Project(JavaScript,TypeScript,React)
        Vue.js Project(Vue,Vite,Pinia)
    Backend Development
        API Services({color:white;background-color:#ff9e9e;border:1px solid red}Spring,{color:white;background-color:#9e9eff;border:1px solid blue}Express,{color:white;background-color:#bfffbf;border:1px solid green}FastAPI)
</LiteTree>
Tags with Icons
  • Code Repository
    • Project Management
      • Main RepositoryGitHubGitee
      • Mirror RepositoryBackup Repository

md
<LiteTree>
// Define icons
github=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyIDJBMTAgMTAgMCAwIDAgMiAxMmMwIDQuNDIgMi44NyA4LjE3IDYuODQgOS41Yy41LjA4LjY2LS4yMy42Ni0uNXYtMS42OWMtMi43Ny42LTMuMzYtMS4zNC0zLjM2LTEuMzRjLS40Ni0xLjE2LTEuMTEtMS40Ny0xLjExLTEuNDdjLS45MS0uNjIuMDctLjYxLjA3LS42MWMxIDAtMS41MyAxLjAzLTEuNTMgMS4wM2MuODcgMS41MiAyLjM0IDEuMDcgMi45MS44M2MuMDktLjY1LjM1LTEuMDkuNjMtMS4zNGMtMi4yMi0uMjUtNC41NS0xLjExLTQuNTUtNC45MmMwLTEuMTEuMzgtMiAxLjAzLTIuNzFjLS4xLS4yNS0uNDUtMS4yOS4xLTIuNjRjMCAwIC44NC0uMjcgMi43NSAxLjAyYy44MS0uMjMgMS42OC0uMzQgMi41NC0uMzVjLjg2LjAxIDEuNzMuMTIgMi41NC4zNWMxLjkxLTEuMjkgMi43NS0xLjAyIDIuNzUtMS4wMmMuNTUgMS4zNS4yIDIuMzkuMSAyLjY0Yy42NS43MSAxLjAzIDEuNiAxLjAzIDIuNzFjMCAzLjgyLTIuMzQgNC42Ni00LjU3IDQuOTFjLjM2LjMxLjY4LjkyLjY4IDEuODV2Mi43NGMwIC4yNy4xNi41OS42Ny41QzE5LjE0IDIwLjE2IDIyIDE2LjQyIDIyIDEyQTEwIDEwIDAgMCAwIDEyIDJaIi8+PC9zdmc+
gitee=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiNkNzI4MjgiIGQ9Ik0xMiAyLjI1YzUuMzg0IDAgOS43NSA0LjM2NiA9Ljc1IDkuNzVzLTQuMzY2IDkuNzUtOS43NSA5Ljc1UzIuMjUgMTcuMzg0IDIuMjUgMTJTNi42MTYgMi4yNSAxMiAyLjI1WiIvPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTEuMzc4IDguNDc4SDcuNzIyYy0uMzMzIDAtLjYwMy4yNy0uNjAzLjYwM3YuOTE4YzAgLjMzMy4yNy42MDMuNjAzLjYwM2gzLjY1NnYuOTE4SDcuNzIyYy0uMzMzIDAtLjYwMy4yNy0uNjAzLjYwM3YuOTE4YzAgLjMzMy4yNy42MDMuNjAzLjYwM2gzLjY1NnYuOTE4SDcuNzIyYy0uMzMzIDAtLjYwMy4yNy0uNjAzLjYwM3YuOTE4YzAgLjMzMy4yNy42MDMuNjAzLjYwM2g4LjU1NmMuMzMzIDAgLjYwMy0uMjcuNjAzLS42MDNWOC40NzhjMC0uMzMzLS4yNy0uNjAzLS42MDMtLjYwM2gtNS41WiIvPjwvc3ZnPg==
---
Code Repository
    Project Management
        Main Repository([github]GitHub,Gitee)
        Mirror Repository([gitee]Backup Repository)
</LiteTree>

Adding Comments

Content after // represents node comments, displayed on the far right.

Basic Comments
  • Project Files
    • Configuration Files
      • package.json Project dependency configuration
      • vite.config.js Build configuration file
    • Source Code
      • main.js Application entry file
      • App.vue Root component

md
<LiteTree>
Project Files
    Configuration Files
        package.json                // Project dependency configuration
        vite.config.js             // {color:white;background-color:#ff9e9e;border:1px solid red}Build configuration file
    Source Code
        main.js                     // Application entry file
        App.vue                     // {color:blue;font-weight:bold}Root component
</LiteTree>
Comments with Icons and Links
  • Open Source Projects
    • Documentation Sites
      • VitePress Modern static site generator
      • Docusaurus Facebook open source documentation framework
    • Frontend Tools
      • Vite Build tool detailsWebsite
      • Vue.js ProgressiveJavaScript framework

md
<LiteTree>
// Define icons
star=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImdvbGQiIGQ9Im0xMiAxNS40bC0zLjc2IDIuMjdhMS0xIDAgMCAxLTEuNTMtMS4xMUw3LjMgMTMuNGwtMy4yMy0uMjhhMS0xIDAgMCAxLS41Ni0xLjc1bDIuNjctMi4xMmwtLjY1LTMuMDlhMS0xIDAgMCAxIDEuNDgtMS4xM0wxMiA3LjRsNC4yOC0yLjQ3YTEgMSAwIDAgMSAxLjQ4IDEuMTNsLS42NSAzLjA5TDE5Ljc4IDExYTEgMSAwIDAgMS0uNTYgMS43NWwtMy4yMy4yOGMtLjUxIDIuMTYtLjYzIDMuNTUtMS43NiAyLjM3WiIvPjwvc3ZnPg==
yes=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImdyZWVuIiBkPSJtMTAuNiAxNi4yIDcuODUtNy44NWMuMjMtLjIzLjIzLS42MSAwLS44NGwtLjg0LS44NGMtLjIzLS4yMy0uNjEtLjIzLS44NCAwTDEwLjE4IDE0LjJsLTMuNDktMy40OWMtLjIzLS4yMy0uNjEtLjIzLS44NCAwbC0uODQuODRjLS4yMy4yMy0uMjMuNjEgMCAuODRsNC43NiA0Ljc2Yy4yMy4yMy42MS4yMy44NCAwWiIvPjwvc3ZnPg==
---
Open Source Projects
    Documentation Sites
        VitePress                   // [star]Modern static site generator
        Docusaurus                  // [yes]Facebook open source documentation framework
    Frontend Tools
        Vite                        // Build tool details[Website:star](https://vitejs.dev/)
        Vue.js                      // [star]Progressive[yes]JavaScript framework
</LiteTree>

Variable System

Defining Style Variables (#name=styles)

Used to define reusable CSS styles.

Style Variables
  • Project Files
    • Critical Files
    • Completed Files

md
<LiteTree>
// Define style variables
#important=color:red;font-weight:bold;background:#ffe6e6;padding:2px 6px;border-radius:3px;
#success=color:green;font-weight:bold;background:#e6ffe6;padding:2px 6px;border-radius:3px;
---
Project Files
    {#important}Critical Files
    {#success}Completed Files
</LiteTree>

Defining Class Variables (.name=styles)

Used to define CSS classes for unified styling.

Class Variables
  • Source Code
    • main.js
    • config.json

md
<LiteTree>
// Define class variables
.folder=color:#1976d2;font-weight:500;
.file=color:#666;
---
{.folder}Source Code
    {.file}main.js
    {.file}config.json
</LiteTree>

Defining Icon Variables (name=base64data)

Use Base64-encoded SVG to define custom icons.

Icon Variables
  • Frontend Project
    • src
      • Header.vue
    • package.json

md
<LiteTree>
// Define icon variables (see conversion guide above)
folder=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEwIDRIOGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtM2wtMi0yWiIvPjwvc3ZnPg==
file=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4bC02LTZtNCA5VjlsNCA0aC00WiIvPjwvc3ZnPg==
---
[folder] Frontend Project
    [folder] src
        [file] Header.vue
    [file] package.json
</LiteTree>

Complete Example

Complete Example
  • CrychicDoc Project
    • .vitepress Configuration directory
      • config
        • index.ts Updated configuration
      • plugins Custom plugins
        • custom-alert.ts Alert plugin
      • theme
        • components Vue components
          • CustomAlert.vue New component
    • docs
      • zh Chinese documentation
        • styleList.md Needs update
      • en English documentation
        • litetree-guide.md This guide
    • package.json Project configuration
    • README.md Important documentation

md
<LiteTree>
// Style definitions
#new=color:white;background:#4caf50;padding:1px 4px;border-radius:2px;font-size:12px;
#deprecated=color:white;background:#f44336;padding:1px 4px;border-radius:2px;font-size:12px;
.important=font-weight:bold;color:#1976d2;
// Icon definitions
vue=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM0Y2FmNTAiIGQ9Ik0yIDIwaDIwTDEyIDR6Ii8+PC9zdmc+
ts=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTUgMTUiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMxNzhDNiIgZD0iTTEyLjUgOHYtLjE2N2MwLS43MzYtLjU5Ny0xLjMzMy0xLjMzMy0xLjMzM0gxMGExLjUgMS41IDAgMSAwIDAgM2gxYTEuNSAxLjUgMCAwIDEgMCAzaC0xQTEuNSAxLjUgMCAwIDEgOC41IDExTTggNi41SDNtMi41IDBWMTNNMS41LjVoMTN2MTRIOS41eiIvPjwvc3ZnPg==
---
{.important}CrychicDoc Project
    .vitepress                    // {.important}Configuration directory
        config
            [ts] index.ts         // {#new}Updated configuration
        plugins                   // {.important}Custom plugins
            [ts] custom-alert.ts  // {#new}Alert plugin
        theme
            [vue] components      // {.important}Vue components
                [vue] CustomAlert.vue  // {#new}New component
    docs
        zh                        // Chinese documentation
            styleList.md          // {#deprecated}Needs update
        en                        // English documentation
            litetree-guide.md   // {#new}This guide
    package.json                  //v    Project configuration
    README.md                     //!    {.important}Important documentation
</LiteTree>

Inline Styles

Direct Color Styles

Use {color:value} syntax to apply styles directly to text:

Inline Colors
  • Project Status
    • Completed Features
    • In Progress
    • Critical Issues
    • Important Notes

md
<LiteTree>
Project Status
    {color:green}Completed Features
    {color:orange}In Progress
    {color:red}Critical Issues
    {color:blue;font-weight:bold}Important Notes
</LiteTree>

Mixed Styles

Combining variables, inline styles, icons, and markers:

Complete Example
  • CrychicDoc Project
    • .vitepress Configuration directory
      • config
        • index.ts Updated configuration
      • plugins Custom plugins
        • custom-alert.ts Alert plugin
      • theme
        • components Vue components
          • CustomAlert.vue New component
    • docs
      • zh Chinese documentation
        • styleList.md Needs update
      • en English documentation
        • litetree-guide.md This guide
    • package.json Project configuration
    • README.md Important documentation

md
<LiteTree>
// Style definitions
#new=color:white;background:#4caf50;padding:1px 4px;border-radius:2px;font-size:12px;
#deprecated=color:white;background:#f44336;padding:1px 4px;border-radius:2px;font-size:12px;
.important=font-weight:bold;color:#1976d2;
// Icon definitions
vue=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM0Y2FmNTAiIGQ9Ik0yIDIwaDIwTDEyIDR6Ii8+PC9zdmc+
ts=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTUgMTUiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMxNzhDNiIgZD0iTTEyLjUgOHYtLjE2N2MwLS43MzYtLjU5Ny0xLjMzMy0xLjMzMy0xLjMzM0gxMGExLjUgMS41IDAgMSAwIDAgM2gxYTEuNSAxLjUgMCAwIDEgMCAzaC0xQTEuNSAxLjUgMCAwIDEgOC41IDExTTggNi41SDNtMi41IDBWMTNNMS41LjVoMTN2MTRIOS41eiIvPjwvc3ZnPg==
---
{.important}CrychicDoc Project
    .vitepress                    // {.important}Configuration directory
        config
            [ts] index.ts         // {#new}Updated configuration
        plugins                   // {.important}Custom plugins
            [ts] custom-alert.ts  // {#new}Alert plugin
        theme
            [vue] components      // {.important}Vue components
                [vue] CustomAlert.vue  // {#new}New component
    docs
        zh                        // Chinese documentation
            styleList.md          // {#deprecated}Needs update
        en                        // English documentation
            litetree-guide.md   // {#new}This guide
    package.json                  //v    Project configuration
    README.md                     //!    {.important}Important documentation
</LiteTree>

Advanced Features

Combined Use of Tags and Comments

Tags and comments can be used simultaneously to create richer node information.

Tags and Comments Combined
  • Product Development Plan
    • Core FeaturesVue.jsTypeScriptHighFramework core - {#status}In development
    • User InterfaceCSSVuetifyMediumUI component library - {#status}Design phase
    • API InterfaceNode.jsExpressBackend service - To be started

md
<LiteTree>
// Define icons and styles
#priority=color:white;background:#e91e63;padding:1px 4px;border-radius:2px;font-size:11px;
#status=color:white;background:#4caf50;padding:1px 4px;border-radius:2px;font-size:11px;
star=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImdvbGQiIGQ9Im0xMiAxNS40bC0zLjc2IDIuMjdhMS0xIDAgMCAxLTEuNTMtMS4xMUw3LjMgMTMuNGwtMy4yMy0uMjhhMS0xIDAgMCAxLS41Ni0xLjc1bDIuNjctMi4xMmwtLjY1LTMuMDlhMS0xIDAgMCAxIDEuNDgtMS4xM0wxMiA3LjRsNC4yOC0yLjQ3YTEgMSAwIDAgMSAxLjQ4IDEuMTNsLS42NSAzLjA5TDE5Ljc4IDExYTEgMSAwIDAgMS0uNTYgMS43NWwtMy4yMy4yOGMtLjUxIDIuMTYtLjYzIDMuNTUtMS43NiAyLjM3WiIvPjwvc3ZnPg==
---
Product Development Plan
    Core Features(Vue.js,TypeScript,{#priority}High)    // [star]Framework core - {#status}In development
    User Interface(CSS,Vuetify,{#priority}Medium)       // UI component library - {#status}Design phase
    API Interface(Node.js,Express)                      // Backend service - To be started
</LiteTree>

Deep Nesting and Complex Structures

LiteTree supports arbitrary depth nesting, suitable for representing complex hierarchical structures.

Complex Nested Structure
  • Large Frontend Project Architecture Micro-frontend architecture
    • Infrastructure Layer Core infrastructure
      • Build Tools Development toolchain
        • webpack.config.js Main configuration file
        • babel.config.js JS transpilation configuration
        • Plugin Extensions Custom plugins
          • custom-loader.js Custom loader
          • optimize-plugin.js Optimization plugin
      • Development Server Local development environment
        • dev-server.js Development server configuration
        • proxy.config.js Proxy configuration
    • Application Layer Business logic layer
      • Page Components Page-level components
        • User Management User-related pages
          • UserList.vue User list
          • UserDetail.vue User details
          • UserForm.vue User form
        • Order Management Order-related pages
          • OrderList.vue Order list
          • OrderTracking.vue Order tracking
      • Common Components Reusable components
        • Button.vue Button component
        • Modal.vue Modal component
        • DataTable.vue Data table
    • Service Layer Data service layer
      • API Services External interfaces
        • user.service.js User API service
        • order.service.js Order API service
      • State Management Application state
        • store.js Vuex/Pinia storage
        • modules State modules

md
<LiteTree>
// Define various styles and icons
#module=color:white;background:#2196f3;padding:2px 6px;border-radius:3px;font-size:12px;
#component=color:white;background:#ff9800;padding:2px 6px;border-radius:3px;font-size:12px;
#utility=color:#666;background:#f5f5f5;padding:2px 6px;border-radius:3px;font-size:12px;
.folder=color:#1976d2;font-weight:500;
.file=color:#666;
---
{.folder}Large Frontend Project Architecture                         // {#module}Micro-frontend architecture
    {.folder}Infrastructure Layer                          //! Core infrastructure
        {.folder}Build Tools                        // Development toolchain
            webpack.config.js                   // Main configuration file
            babel.config.js                     // JS transpilation configuration
            {.folder}Plugin Extensions                     // Custom plugins
                custom-loader.js                // {#utility}Custom loader
                optimize-plugin.js              // {#utility}Optimization plugin
        {.folder}Development Server                       // Local development environment
            dev-server.js                       // Development server configuration
            proxy.config.js                     // Proxy configuration
    {.folder}Application Layer                              // {#module}Business logic layer
        {.folder}Page Components                         // Page-level components
            {.folder}User Management                     // User-related pages
                UserList.vue                    // {#component}User list
                UserDetail.vue                  // {#component}User details
                UserForm.vue                    // {#component}User form
            {.folder}Order Management                     // Order-related pages
                OrderList.vue                   // {#component}Order list
                OrderTracking.vue               // {#component}Order tracking
        {.folder}Common Components                         // Reusable components
            Button.vue                          // {#component}Button component
            Modal.vue                           // {#component}Modal component
            DataTable.vue                       // {#component}Data table
    {.folder}Service Layer                              // {#module}Data service layer
        {.folder}API Services                         // External interfaces
            user.service.js                     // User API service
            order.service.js                    // Order API service
        {.folder}State Management                         // Application state
            store.js                            // Vuex/Pinia storage
            modules                             // State modules
</LiteTree>

Common Use Cases

Project File Structure

Project Structure
  • My Project
    • src Structure complete
      • +components Adding components
        • Header.vue Completed
        • +Footer.vue To do
      • pages
        • Home.vue Completed
        • *About.vue Updating
    • package.json Configured
    • *vite.config.js Optimizing
    • README.md Documentation needed

md
<LiteTree>
// File type styles
.folder=color:#1976d2;font-weight:500;
.file=color:#666;
.config=color:#f57c00;font-weight:500;
.doc=color:#8bc34a;
// Status styles
#completed=color:green;background:#e6ffe6;padding:1px 3px;border-radius:2px;font-size:11px;
#inprogress=color:orange;background:#fff3e0;padding:1px 3px;border-radius:2px;font-size:11px;
#todo=color:red;background:#ffe6e6;padding:1px 3px;border-radius:2px;font-size:11px;
---
{.folder}My Project
    {.folder}src                  //v    {#completed}Structure complete
        {.folder}components       //+    {#inprogress}Adding components
            {.file}Header.vue     //v    {#completed}Completed
            {.file}Footer.vue     //+    {#todo}To do
        {.folder}pages
            {.file}Home.vue       //v    {#completed}Completed
            {.file}About.vue      //*    {#inprogress}Updating
    {.config}package.json         //v    {#completed}Configured
    {.config}vite.config.js       //*    {#inprogress}Optimizing
    {.doc}README.md               //!    {#todo}Documentation needed
</LiteTree>

Team Organization

Team Structure
  • Development Team
    • Frontend Team Team Lead: Zhang San
      • +React Developers Team expansion
        • Li Si Senior Developer
        • Wang Wu Junior Developer
      • Vue Developers Complete team
        • Zhao Liu Senior Developer
        • Qian Qi Junior Developer
    • Backend Team Team Lead: Sun Ba
      • *API Development Refactoring
        • Zhou Jiu Senior Developer
        • Wu Shi Junior Developer
      • Database Team Critical project
        • Zheng Yi Senior Developer

md
<LiteTree>
// Team role styles
#lead=color:white;background:#1976d2;padding:2px 6px;border-radius:3px;font-size:12px;
#senior=color:#1976d2;background:#e3f2fd;padding:2px 6px;border-radius:3px;font-size:12px;
#junior=color:#666;background:#f5f5f5;padding:2px 6px;border-radius:3px;font-size:12px;
---
Development Team
    Frontend Team                      // {#lead}Team Lead: Zhang San
        React Developers              //+    Team expansion
            Li Si                  // {#senior}Senior Developer
            Wang Wu                  // {#junior}Junior Developer
        Vue Developers                //v    Complete team
            Zhao Liu                  // {#senior}Senior Developer
            Qian Qi                  // {#junior}Junior Developer
    Backend Team                      // {#lead}Team Lead: Sun Ba
        API Development                  //*    Refactoring
            Zhou Jiu                  // {#senior}Senior Developer
            Wu Shi                  // {#junior}Junior Developer
        Database Team                //!    Critical project
            Zheng Yi                  // {#senior}Senior Developer
</LiteTree>

VSCode Code Snippets

The project includes complete VSCode code snippets for LiteTree to help you quickly create various tree structures.

Basic Snippets

Snippet Prefix Description Purpose
@file-tree Basic tree structure Create simple file directory trees
@file-tree-advanced Advanced tree structure Complete tree with variable definitions and styles
@lite-tree-with-tags Tree with tags Tree structure showing tag functionality
@lite-tree-with-comments Tree with comments Tree structure showing comment functionality

Variable Definition Snippets

Snippet Prefix Description Generated Content
@lite-style-var Style variable definition #name=color:value;background:value;
@lite-class-var Class variable definition .name=color:value;font-weight:value;
@lite-icon-var Icon variable definition name=data:image/svg+xml;base64,...

Preset Icon Snippets

Snippet Prefix Icon Type Base64 Encoding
@icon-folder Folder icon Blue folder SVG
@icon-file File icon Generic file SVG
@icon-js JavaScript icon JS file type icon
@icon-ts TypeScript icon TS file type icon
@icon-vue Vue.js icon Vue component icon
@icon-github GitHub icon GitHub brand icon
@icon-star Star icon Gold star icon

Preset Style Snippets

Snippet Prefix Description Included Styles
@lite-status-styles Status style set Success, warning, error, info status styles
@lite-filetype-styles File type styles Folder, file, configuration file styles
@lite-priority-styles Priority styles High, medium, low priority tag styles

Complete Example Snippets

Tree Structure Created with Code Snippets
  • Project Root Directory Code snippet demo
    • src Source code directory
      • componentsVueReactComponent library
      • utils Utility functions

md
<LiteTree>
// Generated by @lite-status-styles
#success=color:white;background:#4caf50;padding:2px 6px;border-radius:3px;font-size:12px;
#warning=color:white;background:#ff9800;padding:2px 6px;border-radius:3px;font-size:12px;
#error=color:white;background:#f44336;padding:2px 6px;border-radius:3px;font-size:12px;
// Generated by @icon-folder etc.
folder=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEwIDRIOGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtM2wtMi0yWiIvPjwvc3ZnPg==
---
[folder] Project Root Directory                        // {#success}Code snippet demo
    src                                  // Source code directory
        components({#warning}Vue,React)   // Component library
        utils                            // {#error}Utility functions
</LiteTree>