PlantUML 思维导图与文件系统图

puml.online
  2026-07-29 15:45 2026-07-29 15:45 创建   2026-08-14 21:34:29 2026-08-14 21:34:29 更新    

PlantUML 还支持思维导图（mindmap）和文件系统图（filesystem）这两类非传统 UML 图。它们从 Markdown 写大纲、画文件树时极好用。

思维导图 (Mindmap)

基本语法

1
2
3
4
5
6
7
8
9
10
11
@startmindmap
* 操作系统
** Linux
*** Ubuntu
*** Debian
*** CentOS
** Windows
*** Windows 10
*** Windows 11
** macOS
@endmindmap

* 是根节点，** 一级子节点，*** 二级，越多越深。

多根节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startmindmap
* 客户端
** Web 浏览器
** 移动 App
** 桌面 App

* 服务端
** Go 服务
** Java 服务
** Python 服务

* 数据
** 关系数据库
** NoSQL
** 缓存
@endmindmap

多个 * 是「同一画布上的多个根」。

节点排序

1
2
3
4
5
6
7
8
@startmindmap
* 项目
**_ 需求
**__ 设计
**__ 开发
**_ 测试
**__ 上线
@endmindmap

_ 强制从左到右排序。

多向 tree

1
2
3
4
5
6
7
8
9
10
11
@startmindmap

* 主根
** 左侧
**_ 第一层
**__ 第二层
** 右侧
**__ 一
**__ 二

@endmindmap

使用 _ 控制子节点走向（向左右双向）。

节点内容

1
2
3
4
5
6
7
8
9
10
11
12
13
@startmindmap

* 系统架构
**:前端层;
** React SPA
** Vue SPA
** 移动端

*:**后端层;**
** Node.js API
** Java 微服务

@endmindmap

:节点内容; 用分号隔离。

组合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startmindmap
* 项目

** 开发
***:前端;
**** React
**** Vue
***:后端;
**** Go
**** Java

** 部署
*** Docker
*** k8s

@endmindmap

配色与样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@startmindmap
<style>
mindmapDiagram {
  BackgroundColor #FAFAFA
  FontColor #1F2328
  Node {
    BackgroundColor #FAFAFA
    BorderColor #2F4858
    FontColor #1F2328
  }
  Node1 {
    BackgroundColor #A31F34
    FontColor #FAFAFA
  }
  Node2 {
    BackgroundColor #F4B40A
    FontColor #1F2328
  }
}
</style>

* 大纲
** 关键要点
** 关键要点 2
** 关键要点 3
@endmindmap

<style> 块定义外观：

  • Node1 是根节点
  • Node2 是一级子节点
  • Node3 是二级

文件系统图 (Filesystem)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startfilesystem

/ root
  home/
    dean/
      Documents/
        - report.docx
        - readme.md
      Downloads/
      Pictures/
  etc/
    - hosts
    - passwd

@endfilesystem

层级用缩进，文件用 - 开头，目录结尾加 /。

完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@startfilesystem
/ project-root
  src/
    components/
      - Button.tsx
      - Modal.tsx
    pages/
      - index.tsx
      - about.tsx
    utils/
      - helpers.ts
  docs/
    - README.md
    - ARCHITECTURE.md
  config/
    - dev.json
    - prod.json
  - package.json
@endfilesystem

多文件类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startfilesystem
/ workspace
  projects/
    app1/
      - main.go
      - go.mod
      - Dockerfile
    app2/
      - app.py
      - requirements.txt
  shared/
    - lib.js
    - types.ts

@endfilesystem

实用技巧

PlantUML 文件系统图很简，但可以加点注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startfilesystem
/ repl-app
  server/
    go.mod
    main.go <<service entry>>
    db/
      schema.sql
  client/
    package.json
    src/

note right of /repl-app
  Makefile 在根目录
end note

@endfilesystem

文件夹与文件

1
2
3
4
5
6
7
8
9
@startfilesystem
/ tree
  src/
    index.ts
    config.ts
  test/
    - setup.ts
  build/
@endfilesystem

WBS（工作分解结构）

WBS 跟 mindmap 类似但更正式：

1
2
3
4
5
6
7
8
9
10
11
12
@startwbs
* 项目启动
** 需求分析
*** 业务需求
*** 技术需求
** 系统设计
*** 概要
*** 详细
** 开发
*** 后端
*** 前端
@endwbs

WBS 节点颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@startwbs
<style>
wbsDiagram {
  BackgroundColor white
  FontColor black
  WBS {
    BackgroundColor #FAFAFA
    BorderColor #2F4858
  }
  Root {
    BackgroundColor #A31F34
    FontColor white
  }
}
</style>

* 系统迁移
** 数据迁移
** 服务迁移
** 流量切换

@endwbs

实战：技术选型思维导图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@startmindmap

* 技术选型
**:前端;
** React
** Vue
** Svelte

* 后端
** 单体
*** Spring
*** Express
** 微服务
*** Spring Cloud
*** Go-zero

* 数据库
** 关系型
*** PostgreSQL
*** MySQL
** 文档
*** MongoDB
*** DocumentDB

* 部署
** 容器化
*** Docker
*** k8s
** 平台
*** 阿里云
*** 自建 K8s

@endmindmap

实战：项目目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@startfilesystem
/ puml-online
  source/
    _posts/
      - plantuml-intro.md
      - plantuml-state-diagram.md
    _data/
      - config_zh-CN.yml
      - config_en.yml
    editor/
      index.html
      editor.js
      vendor/
        - plantuml.js
  themes/
    defaultone/
      _config.yml
      layout/
  scripts/
    - write-index.js
    - language-redirect.js
  _config.yml
  package.json

@endfilesystem

实战：WBS 项目拆解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@startwbs

* 短链项目
** 需求分析
*** 功能需求
*** 非功能需求
** 系统设计
*** 架构设计
*** 接口定义
** 实现
*** 短链生成
*** 短链解析
*** 跳转统计
** 测试
*** 单元测试
*** 集成测试
*** 性能测试
** 上线
*** 灰度发布
*** 正式上线

@endwbs

选哪个图

需求 用什么
大纲式梳理知识 mindmap
列举项目目录 filesystem
项目结构拆解 WBS

三者语法相近，@startmindmap / @startfilesystem / @startwbs 启动，@endX 结束。

评审 checklist

思维导图

  • 子节点深度 ≤ 3 层？
  • 节点文案精炼，不写长描述？
  • 配色清晰？

文件系统

  • 目录结尾加 /？
  • 文件前缀 -？
  • 缩进一致？

WBS

  • 100% 规则？
  • 叶子节点可估算时间？
  • 层级不超过 4 层？
  • 标题: PlantUML 思维导图与文件系统图
  • 作者: puml.online
  • 创建于 : 2026-07-29 15:45:00
  • 更新于 : 2026-08-14 21:34:29
  • 链接: https://puml.online/blog/plantuml-mindmap-wbs-fs/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
PlantUML 思维导图与文件系统图
  1. 思维导图 (Mindmap)
    1. 基本语法
    2. 多根节点
    3. 节点排序
    4. 多向 tree
    5. 节点内容
    6. 组合
    7. 配色与样式
  2. 文件系统图 (Filesystem)
    1. 完整示例
    2. 多文件类型
    3. 实用技巧
    4. 文件夹与文件
  3. WBS（工作分解结构）
    1. WBS 节点颜色
  4. 实战：技术选型思维导图
  5. 实战：项目目录结构
  6. 实战：WBS 项目拆解
  7. 选哪个图
  8. 评审 checklist
    1. 思维导图
    2. 文件系统
    3. WBS