マーメイド#20 ディレクティブの記述

**ひとりマーメイド20日目**
**ディレクティブの記述**

## 概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではディレクティブの記述について紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/fa4632efa50e2811770b

## ディレクティブとは
ディレクティブとはダイアグラムの外観を指定する記述のことを言います。cssによるスタイリングとは異なり、コードの先頭に記述します。

ディレクティブは以下のように囲って記述されます。
`%%{ }%%`

以下の例ではテーマを`forest`に指定してダイアグラムの外観を緑に変更しています。
```:mermaid
%%{
    init:{
        "theme": "forest"
    }
}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```

```mermaid
%%{
    init:{
        "theme": "forest"
    }
}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```

## theme
ダイアグラムの外観を指定します。
以下のテーマを指定することができます。
* `default`
* `base`
* `dark`
* `forest`
* `neutral`

テーマの指定は以下のように行います。
```js:directive
%%{
    init:{
        "theme": "default"
    }
}%%
```
**defalut**
```mermaid
%%{init:{"theme": "default"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**base**
```mermaid
%%{init:{"theme": "base"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**dark**
```mermaid
%%{init:{"theme": "dark"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**forest**
```mermaid
%%{init:{"theme": "forest"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**neutral**
```mermaid
%%{init:{"theme": "neutral"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
## fontFamily
ダイアグラム中のフォントを指定します。
cssで使用できるフォントであれば自由に設定することができます。

フォントの指定は以下のように行います。
```js:directive
%%{
    init:{
        "fontFamily": "Trebuchet MS"
    }
}%%
```

**Trebuchet MS**
```mermaid
%%{init:{"fontFamily": "Trebuchet MS"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**Verdana**
```mermaid
%%{init:{"fontFamily": "Verdana"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**Arial**
```mermaid
%%{init:{"fontFamily": "Arial"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```
**Sans-Serif**
```mermaid
%%{init:{"fontFamily": "Sans-Serif"}}%%

graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```

地味すぎますが一応変化しています。

## logLevel
ログレベルを指定します。
* `1` debug
* `2` info
* `3` warm
* `4` error
* `5` fatal errors

ログレベルの指定は以下のように行います。
```js:directive
%%{
    init:{
        "logLevel": 5
    }
}%%
```
`logLevel`は見た目には影響しません。
```mermaid
graph LR
	A([start])-->B{true?}
	B--Yes-->C[process]
	B--No-->D[exception]
	C-->E([end])
	D-->E
```

## フローチャートのディレクティブ
ダイアグラムごとに特有のディレクティブを持ちます。ここではフローチャートのディレクティブを扱います。

**htmlLabel** 
エッジのレンダリングにhtmlLabelを使用するかどうかを指定します。
* `true`
* `false`

**curve**
エッジの曲がり具合を指定します。
* `linear`
* `curve`

フローチャートのディレクティブの指定は以下のように行います。
```js:directive
%%{
    init:{
        "flowchart":{
            "htmlLabels": true,
            "curve": "linear"
        }
    }
}%%
```

[![](https://mermaid.ink/img/pako:eNpdUcFugzAM_ZXKElIrQQWlkJbDprXdrdthO22khwzcgQYJCmFrV_Hvc6DSpuUS-70X-zm-QKZyhAQc58LlhE4pS5NcY3s4HCv1lRVCGw5_iZEsTF3txRtWLbETozt0_0uyTn-iZTlUpUShOfxK-jGkq3ccLrl816IpJvsnis3dNG0NNT7MPO9mc7HVb3tLbDzvBVsCt2mjVYZte7jCj4rQXYqnDBtTKjngW8LupynK_DCz-c7m4EKNuhZlTuMPc3EwBdZXq7nQH9ZoTzrRGfV8lhkkw4DQNbkwuCsFma0hOYqqJbQRkj4ITpAEQTD3o0XEfBbFKz-OYhfOkCwCf772WcBWqzhYhMT2LnwrRSX8OYuXYRiHSxax9do-wLw0Sj-M6xm2NLR4HfTWR_8DpuKFKg?type=png)](https://mermaid.live/edit#pako:eNpdUcFugzAM_ZXKElIrQQWlkJbDprXdrdthO22khwzcgQYJCmFrV_Hvc6DSpuUS-70X-zm-QKZyhAQc58LlhE4pS5NcY3s4HCv1lRVCGw5_iZEsTF3txRtWLbETozt0_0uyTn-iZTlUpUShOfxK-jGkq3ccLrl816IpJvsnis3dNG0NNT7MPO9mc7HVb3tLbDzvBVsCt2mjVYZte7jCj4rQXYqnDBtTKjngW8LupynK_DCz-c7m4EKNuhZlTuMPc3EwBdZXq7nQH9ZoTzrRGfV8lhkkw4DQNbkwuCsFma0hOYqqJbQRkj4ITpAEQTD3o0XEfBbFKz-OYhfOkCwCf772WcBWqzhYhMT2LnwrRSX8OYuXYRiHSxax9do-wLw0Sj-M6xm2NLR4HfTWR_8DpuKFKg)

## まとめ
今回は便利なディレクティブの一部を紹介しました。

ディレクティブ一覧は以下を参照してください。

https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts

↓↓次回の記事はこちら!!

https://qiita.com/hirokiwa/items/1a792f4f87a77dd2c930

## 参考

https://mermaid.js.org/