树状图 (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"

框线输入

🌐 Box-Drawing Input

作为缩进的替代方法，你可以使用框线字符来定义树结构。解析器会自动检测格式——不需要额外的关键字或配置。这也是大多数文件树图已经使用的方式，因此你可以用很少的努力将它们转换为Mermaid图表。

🌐 As an alternative to indentation, you can use box-drawing characters to define the tree structure. The parser auto-detects the format — no extra keyword or config is needed. This is how most file tree diagrams are drawn already, so you can turn those into Mermaid diagrams with very little effort.

支持标准（├──、└──、│）和加重（┣━━、┗━━、┃）的 Unicode 变体。

🌐 Both standard (├──, └──, │) and heavy (┣━━, ┗━━, ┃) Unicode variants are supported.

代码:

⌘ + 回车键|

所有注释的工作方式相同——只需将它们附加在标签后面即可：

🌐 All annotations work the same way — just append them after the label:

代码:

⌘ + 回车键|

深度是根据分支字符的列位置推断的，因此更深的嵌套可以自然工作：

🌐 Depth is inferred from the column position of the branch character, so deeper nesting works naturally:

代码:

⌘ + 回车键|

注意： 如果发生解析错误，错误消息中的行号指的是你的原始输入。制表符会自动扩展为空格。

注释

🌐 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