PlantUML mindmap & filesystem diagrams

puml.online
  2026-07-29 15:45 2026-07-29 15:45 Created   2026-08-14 21:34:29 2026-08-14 21:34:29 Updated    

PlantUML also draws two non-classic-UML diagrams: mindmap and filesystem. They shine when you need to outline Markdown content or sketch a file tree.

Mindmap

Basic syntax

1
2
3
4
5
6
7
8
9
10
11
@startmindmap
* Operating systems
** Linux
*** Ubuntu
*** Debian
*** CentOS
** Windows
*** Windows 10
*** Windows 11
** macOS
@endmindmap

* is root, ** first-level, *** second-level, etc.

Multiple roots

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startmindmap
* Client
** Web browser
** Mobile app
** Desktop app

* Server
** Go service
** Java service
** Python service

* Data
** Relational DB
** NoSQL
** Cache
@endmindmap

Multiple * are co-existing roots on the same canvas.

Direction control

1
2
3
4
5
6
7
8
@startmindmap
* Project
**_ Requirements
**__ Design
**__ Development
**_ Testing
**__ Launch
@endmindmap

Use _ to force left-to-right ordering.

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

* Main root
** Left
**_ Level 1
**__ Level 2
** Right
**__ A
**__ B

@endmindmap

_ controls which side children render.

Block content

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

* System architecture
**:Frontend layer;
** React SPA
** Vue SPA
** Mobile

*:**Backend layer;**
** Node.js API
** Java microservices

@endmindmap

:content; uses semicolons to delimit content.

Combined

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

** Development
***:Frontend;
**** React
**** Vue
***:Backend;
**** Go
**** Java

** Deployment
*** Docker
*** k8s

@endmindmap

Color and styling

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>

* Outline
** Key point
** Key point 2
** Key point 3
@endmindmap

<style> controls appearance:

  • Node1 is the root
  • Node2 are first-level children
  • Node3 are second-level

Filesystem diagram

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

Indentation for hierarchy, - for files, / for directories.

Detailed example

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

Notes

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 in root directory
end note

@endfilesystem

WBS

1
2
3
4
5
6
7
8
9
10
11
12
@startwbs
* Project kickoff
** Requirements
*** Business
*** Technical
** System design
*** High-level
*** Detailed
** Development
*** Backend
*** Frontend
@endwbs

WBS styling

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

* Migration
** Data
** Services
** Traffic switch

@endwbs

Real example: tech-selection mindmap

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

* Tech choice
**:Frontend;
** React
** Vue
** Svelte

* Backend
** Monolith
*** Spring
*** Express
** Microservices
*** Spring Cloud
*** Go-zero

* Database
** Relational
*** PostgreSQL
*** MySQL
** Document
*** MongoDB
*** DocumentDB

* Deployment
** Container
*** Docker
*** k8s
** Platform
*** Aliyun
*** Self-hosted

@endmindmap

Real example: project directory

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

Which diagram to pick

Need Use
Outline-as-knowledge mindmap
List project directories filesystem
Project structure breakdown WBS

The three share similar grammar: start with @startmindmap / @startfilesystem / @startwbs, end with @endX.

Review checklist

Mindmap

  • Children depth ≤ 3?
  • Node text crisp, no long descriptions?
  • Color contrast clean?

Filesystem

  • Directories end with /?
  • Files prefixed - ?
  • Indentation consistent?

WBS

  • 100% rule?
  • Leaves are time-estimable?
  • Depth ≤ 4?
  • Title: PlantUML mindmap & filesystem diagrams
  • Author: puml.online
  • Created at : 2026-07-29 15:45:00
  • Updated at : 2026-08-14 21:34:29
  • Link: https://puml.online/blog/plantuml-mindmap-wbs-fs-en/
  • License: This work is licensed under CC BY-NC-SA 4.0.
On this page
PlantUML mindmap & filesystem diagrams
  1. Mindmap
    1. Basic syntax
    2. Multiple roots
    3. Direction control
    4. Block content
    5. Combined
    6. Color and styling
  2. Filesystem diagram
    1. Detailed example
    2. Notes
  3. WBS
    1. WBS styling
  4. Real example: tech-selection mindmap
  5. Real example: project directory
  6. Which diagram to pick
  7. Review checklist
    1. Mindmap
    2. Filesystem
    3. WBS