树状图 (v11.14.0+)

🌐 TreeView Diagram (v11.14.0+)

介绍

🌐 Introduction

TreeView 图表用于以类似目录的结构表示层次数据，带有文件类型图标、连接线和可选注释。

🌐 A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure, with file-type icons, connector lines, and optional annotations.

语法

🌐 Syntax

树的结构仅取决于缩进。标签可以是裸的（不加引号）或加引号的（用于包含空格的名称）。

🌐 The structure of the tree depends only on indentation. Labels can be bare (unquoted) or quoted (for names containing spaces).

• 目录在标签上以尾随 / 表示——它们会显示文件夹图标和加粗文本。
• 文件会根据扩展名自动检测并分配相应的图标。
• 带引号的标签（"my file"）支持名称中的空格。

treeView-beta
    my-project/
        src/
            index.js
        package.json
        README.md

带引号的标签（向后兼容）：

🌐 Quoted labels (backward compatible):

treeView-beta
    "my project"
        "folder with spaces"
            "file.js"

注释

🌐 Annotations

使用 :::class 高亮显示

🌐 Highlighting with :::class

用 :::className 注释一个节点以应用 CSS 类。提供了一个内置的 highlight 类：

🌐 Annotate a node with :::className to apply a CSS class. A built-in highlight class is provided:

带有 ## 的行内描述

🌐 Inline descriptions with ##

在 ## 后添加可见描述 — 以斜体显示在标签旁边：

🌐 Add a visible description after ## — rendered next to the label in italic:

使用 icon() 的图标覆盖

🌐 Icon overrides with icon()

使用 icon(name) 覆盖自动检测的图标：

🌐 Override the auto-detected icon with icon(name):

组合注解

🌐 Combined annotations

注解可以以任意顺序组合：

🌐 Annotations can be combined in any order:

注释

🌐 Comments

使用 %% 来添加隐形评论（标准 Mermaid 规范）:

🌐 Use %% for invisible comments (standard Mermaid convention):

treeView-beta
    %% Generated files — do not edit
    src/
        generated/
        index.js

示例

🌐 Examples

带引号标签的基础示例：

🌐 Basic with quoted labels:

使用自定义配置：

🌐 With custom config:

配置变量

🌐 Config Variables

属性	描述	默认值
rowIndent	每行的缩进	10
paddingX	行的水平内边距	5
paddingY	行的垂直内边距	5
lineThickness	线条厚度	1
showIcons	是否显示文件/文件夹图标	true

主题变量

🌐 Theme Variables

属性	描述	默认值
labelFontSize	标签的字体大小	'16px'
labelColor	标签的颜色	'black'
lineColor	线条的颜色	'black'
iconColor	文件类型图标的颜色	'#546e7a'
descriptionColor	## 描述文本的颜色	'#6a9955'
highlightBg	高亮背景填充	rgba(255,193,7,0.15)
highlightStroke	高亮边框描边	#ffc107

支持的图标

🌐 Supported Icons

图标会根据文件扩展名和已知文件名自动检测：

🌐 Icons are auto-detected from file extensions and known filenames:

扩展名 / 文件名	图标
.js, .mjs, .cjs	javascript
.ts	typescript
.jsx, .tsx	react
.py	python
.json	json
.md, .mdx	markdown
.html, .htm	html
.css, .scss	css
.yaml, .yml	yaml
.sh, .bash	terminal
.sql, .db	database
.lock	lock
.gitignore	git
Dockerfile	docker
Makefile	terminal
目录 (/)	folder
未知扩展名	file