可编辑示例

TreeView 树状图 Mermaid 模板

从一个干净的 TreeView 树状图示例开始，调整 Mermaid 语法，实时预览结果，并导出适合文档、需求或演示的图片。

试用这个TreeView 树状图

treeView-beta
root
  app
    page.tsx
    layout.tsx
  components
    MermaidWorkspace.tsx
    seo-landing-page.tsx
  public
    logo.png
    ads.txt

TreeView 树状图 Mermaid 模板是什么？

TreeView 树状图 Mermaid 模板是一个可编辑 Mermaid 示例页面。你可以查看语法结构、打开完整工作台继续修改，并导出 PNG、JPG、SVG 或 PDF 图片。

干净的 Mermaid 起步语法

导出前实时预览

支持 PNG、JPG、SVG、PDF 输出

浏览器本地渲染

不只是 Mermaid 在线预览

Mermaid2Img 把在线编辑器、模板、样式控制、本地历史和多格式导出放在一个工作台里，适合文档、产品和工程团队反复使用。

实时预览 Mermaid 语法和布局

PNG、JPG、SVG、PDF 一站式导出

22 种图表模板覆盖主流文档场景

浏览器本地处理，适合私密图表

选择合适的 Mermaid 导出格式

Mermaid2Img 可以把同一张图导出为不同格式，先按使用场景选择，再下载会更稳。

PNG

README、工单、文档和聊天分享

需要兼容性最强、显示清晰的位图时，优先用 PNG。

JPG

小文件和快速分享

不需要透明背景，只想得到更轻量预览图时，用 JPG。

SVG

网页、矢量文档和设计交付

需要无限缩放、可选中文字或后续再调整样式时，用 SVG。

PDF

打印、方案文档和演示材料

图表需要作为正式文档附件流转时，用 PDF。

语法提示

Mermaid 11.16 TreeView 图使用 `treeView-beta` 声明。

用空格缩进子级行，形成清晰层级。

TreeView 适合文件结构、导航树和嵌套文档地图。

如何使用

打开TreeView 树状图示例。

把节点、标签和关系替换成你的内容。

导出图表，或进入工作台继续编辑。

常见问题

Mermaid 中的TreeView 树状图是什么？

TreeView 树状图是一种用文本语法编写，并渲染成可视化图表的 Mermaid 图表类型，常用于文档和规划。

这个TreeView 树状图模板可以导出 PNG 吗？

可以。你可以在 Mermaid2Img 中直接导出 PNG、JPG、SVG 或 PDF。

渲染在哪里完成？

图表渲染和导出会在你的浏览器中完成。

立即在线编辑和导出

下面的编辑器可直接试用；需要更多主题、尺寸和背景控制时，可打开完整工作台。

完整工作台

Loading editor...