Hierarchical representation(Tree, FileSystem, Folder)

Snow Flower Text supports drawing of hierarchical representation as an extension of AsciiDoc. Hierarchical representation is an expression frequently used in taxonomy, organization chart, visualization of structure analysis, etc. Hierarchical information can be expressed with a simple unified description.

The following types of hierarchical representation diagrams are available.

tree: Simple tree diagram
filesystem: Tree diagram of file system
folder: Folder hierarchy diagram
mindmap: Mindmap

This entry explains how to use the tree, filesystem, folder extension of Snow Flower Text. The description method of mindmap is explained at here.

The drawing function of the hierarchical representation (tree, filesystem, folder, mindmap) for AsciiDoc is a proprietary extension of Snow Flower Text.

How to use

The hierarchical representation has various expressions and it is necessary to use the block extension of the corresponding variant properly, but the unified description method is used in the block. Therefore you can easily change the appearance just by changing the block name. It is not difficult to master it according to the situation.

tree block

By selecting the AsciiDoc grammar and itemizing it in the [tree] block, you can embed a simple tree diagram in the document.

[tree]

[tree, width=25%, align=left]
-------------------------
* Color
** Red
** Green
** Blue
-------------------------

filesystem block

Select AsciiDoc grammar, You can embed the folder structure diagram in the document by itemizing in the [filesystem] block. You can make it interpret as a folder by setting the character at the end of the item name to / character.

[filesystem]

[filesystem, width=30%, align=left]
-------------------------
* Web App
** META-INF/
*** services/
** WEB-INF/
*** classes/
*** lib/
*** tags/
*** web.xml
** css/
** js/
** index.jsp
-------------------------

folder block

Select AsciiDoc grammar, You can embed the folder structure diagram in the document by itemizing in the [folder] block. You can make it interpret as a folder by setting the character at the end of the item name to / character.

[folder]

[folder]
--------------------------
* web
** img/
** css/
** js/
** index.html
--------------------------

The layout is “from top to bottom” by default. You can change to “Left to right” layout by specifying “lr” with dir attribute.

[folder, dir=lr]

[folder, dir=lr]
--------------------------
* web
** img/
** css/
*** style.css
** js/
** index.html
--------------------------

Adjust layout

The layout can be adjusted with the following attributes.

width: You can specify the width with the width attribute. As with HTML styles you can use% and px units.
align: You can specify alignment (left|center|right) with align attribute.
dir: You can specify the hierarchical layout direction (lr|tb) with the dir attribute. lr is laid out in left to right direction and tb is top to bottom direction. This attribute can only be used with the folder block.

Color theme

theme: You can specify the icon color scheme (blue|yellow) by specifying the theme attribute. This attribute can only be used with the filesystem block.

theme=blue (default)

theme=yellow