Snow Flower Text では AsciiDoc の拡張として階層表現の作図をサポートしています。階層表現は分類や、組織図、構造分析の可視化等で頻繁に使われる表現です。簡単な統一された記述で階層的な情報を表現することが出来ます。
以下の種類の階層表現の図が使用できます。
- tree
シンプルなツリー図
- filesystem
ファイルシステムのツリー図
- folder
フォルダー階層図
- mindmap
マインドマップ
このエントリーでは Snow Flower Text の tree, filesystem, folder 拡張の利用方法について説明します。mindmap の記述方法については こちらの記事 で説明しています。
| AsciiDoc のための階層表現(tree, filesystem, folder, mindmap) の作図機能は Snow Flower Text の独自拡張です。 |
使い方
階層表現の図は複数のブロック拡張を使い分ける必要がありますが、ブロック内は統一の記述方法を用います。従ってブロック名を変更するだけで簡単に見た目の変更ができます。状況に応じて使いこなすのは難しくありません。
tree ブロック
AsciiDoc 文法を選択して、[tree] ブロックに箇条書きすることでシンプルなツリー図を文書に埋め込むことができます。
[tree, width=25%, align=left]
-------------------------
* Color
** Red
** Green
** Blue
-------------------------
filesystem ブロック
AsciiDoc 文法を選択して、 [filesystem] ブロックに箇条書きすることでフォルダー構造図を文書に埋め込むことができます。項目名の末尾を / 文字にすることでフォルダーとして解釈させることできます。
[filesystem, width=30%, align=left]
-------------------------
* Web App
** META-INF/
*** services/
** WEB-INF/
*** classes/
*** lib/
*** tags/
*** web.xml
** css/
** js/
** index.jsp
-------------------------
folder ブロック
AsciiDoc 文法を選択して、 [folder] ブロックに箇条書きすることでフォルダー構造図を文書に埋め込むことができます。項目名の末尾を / 文字にすることでフォルダーとして解釈させることできます。
[folder]
--------------------------
* web
** img/
** css/
** js/
** index.html
--------------------------
レイアウトは上から下 (Top to bottom) がデフォルトになります。dir属性で lr を指定することで、左から右 (Left to right) レイアウトに変更できます。
[folder, dir=lr]
--------------------------
* web
** img/
** css/
*** style.css
** js/
** index.html
--------------------------
レイアウトの調整
以下の属性でレイアウトの調整ができます。
- width
width 属性で横幅を指定できます。HTMLのスタイルと同様に %とpx の単位が使用できます。
- align
align 属性で配置(
left|center|right)が指定できます。- dir
dir 属性で階層のレイアウト方向(
lr|tb)を指定できます。lrは左から右(left to right) 方向、tbは 上から下(top to bottom) の方向にレイアウトします。 この属性はfolderブロックのみで使用できます。
カラーテーマ
- theme
theme 属性を指定することでアイコンの配色(
blue|yellow)を指定できます。 この属性はfilesystemブロックのみで使用できます。
