2021年12月15日 更新

HackMDでツリー構造の表示

[TOC]

どうも、クラゲジュニアです。
今回は、HackMDでツリー構造を表示させます。

ゴール

今回は、以下の画像の形で表示するのがゴールです。

ソースコード

Salt記法のTree widgetを利用します。
以下のコードをHackMDに、貼り付けると上記の画像と同様のものが描画されます。

```plantuml
@startsalt
{
 {T
  +User
  ++Jelly
  +++Desktop
  +++Downloads
 }
}
@endsalt

### Saltに必要な記述
1. ` ```plantuml `を使用してHackMDにplantUMLを使用することを伝える
2. `@startsalt`と`@endsalt`で囲う

あとは`{}` の内部にコードを記述するだけです。  

@startsalt
{

}
@endsalt

### Tree widget
`Tree widget`を使用するには、`{T}`を記述し内部に表示したいディレクトリやファイルを入力します。  
名前の前の`+`が増えるごとに階層が深くなっていきます。  

{T +User ++Jelly
+++Desktop +++Downloads }

saltには複数のウィジェットが存在します。  
詳しくは、[こちら](https://plantuml.com/ja/salt)を参照してください。  

以上です。