树状图 (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/folder 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).

• 目录在标签末尾以 / 表示——它们以粗体文本显示。
• 图标默认是隐藏的 —— 使用 showIcons 配置选项启用内置文件/文件夹图标，或使用 icon() 为每个节点单独设置一个。
• 带引号的标签（"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:

代码:

⌘ + 回车键|

图标

🌐 Icons

图标默认是隐藏的。将 showIcons 配置选项设置为 true 以显示内置图标 — file 用于文件，folder 用于目录：

🌐 Icons are hidden by default. Set the showIcons config option to true to show the built-in icons — file for files and folder for directories:

代码:

⌘ + 回车键|

通过配置映射的文件类型图标

🌐 File-type icons via config maps

Mermaid 不对文件名/扩展名进行映射——文件类型图标完全通过 filenameIcons 和 extensionIcons 配置选项由用户配置，使用来自注册的 图标包（例如 material-icon-theme）的图标。值的解析方式类似 icon() 引用——pack:name 按原样使用，未加前缀的名称通过 defaultIconPack 解析，none 会隐藏匹配文件的图标。目录和未映射的文件将保留内置的 folder/file 图标：

🌐 Mermaid ships no filename/extension mapping — file-type icons are fully user-configured through the filenameIcons and extensionIcons config options, using icons from a registered icon pack such as material-icon-theme. Values are resolved like icon() references — pack:name is used as-is, unprefixed names resolve via defaultIconPack, and none hides the icon for matching files. Directories and unmapped files keep the built-in folder/file icons:

代码:

⌘ + 回车键|

使用 icon() 的图标覆盖

🌐 Icon overrides with icon()

使用 icon(name) 明确设置节点的图标，其中 name 是来自已注册的 图标包 的任意图标，引用方式为 pack:name。即使 showIcons 关闭，显式图标也总会渲染：

🌐 Set a node's icon explicitly with icon(name), where name is any icon from a registered icon pack, referenced as pack:name. Explicit icons always render, even when showIcons is off:

代码:

⌘ + 回车键|

当设置 defaultIconPack 时，无前缀的名称将在该包中解析——icon(rust) 变成 icon(material-icon-theme:rust) 的简写。内置的 file 和 folder 图标始终可以在不加前缀的情况下引用，例如 icon(folder)。

🌐 When defaultIconPack is set, unprefixed names resolve in that pack — icon(rust) becomes shorthand for icon(material-icon-theme:rust). The built-in file and folder icons can always be referenced without a prefix, e.g. icon(folder).

信息

图标包不随 Mermaid 打包提供——必须由嵌入图表的网站通过 registerIconPacks 注册。请参阅 注册图标包。未注册的图标会显示为问号。

隐藏图标

🌐 Hiding icons

当启用 showIcons 时，使用 icon() 或 icon(none) 来隐藏单个节点的图标：

🌐 When showIcons is enabled, use icon() or icon(none) to hide the icon of a single node:

代码:

⌘ + 回车键|

组合注解

🌐 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:

代码:

⌘ + 回车键|

标签中的 Unicode 和表情符号：

🌐 Unicode and emoji in labels:

标签会完全按照书写显示——Unicode 字符和连续空格都会被保留。由于内置图标默认是隐藏的，表情符号成为了方便的行内图标：

🌐 Labels are rendered exactly as written — unicode characters and consecutive spaces are preserved. Since the built-in icons are hidden by default, emoji make handy inline icons:

代码:

⌘ + 回车键|

使用自定义配置：

🌐 With custom config:

代码:

⌘ + 回车键|

配置变量

🌐 Config Variables

属性	描述	默认值
rowIndent	每行的缩进	10
paddingX	行的水平内边距	5
paddingY	行的垂直内边距	5
lineThickness	线的粗细	1
showIcons	是否显示默认的文件/文件夹图标（显式 icon() 总是渲染）	false
defaultIconPack	用于解析无前缀图标引用的已注册 iconify 图标包	''
filenameIcons	文件名 → 图标映射，用于文件类型图标	{}
extensionIcons	文件扩展名 → 图标映射，用于文件类型图标	{}

主题变量

🌐 Theme Variables

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