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

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

概要

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

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

↓↓前回の記事はこちら

ディレクティブとは

ディレクティブとはダイアグラムの外観を指定する記述のことを言います。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

theme

ダイアグラムの外観を指定します。
以下のテーマを指定することができます。

• default
• base
• dark
• forest
• neutral

テーマの指定は以下のように行います。

directive

%%{
    init:{
        "theme": "default"
    }
}%%

defalut

base

dark

forest

neutral

fontFamily

ダイアグラム中のフォントを指定します。
cssで使用できるフォントであれば自由に設定することができます。

フォントの指定は以下のように行います。

directive

%%{
    init:{
        "fontFamily": "Trebuchet MS"
    }
}%%

Trebuchet MS

Verdana

Arial

Sans-Serif

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

logLevel

ログレベルを指定します。

• 1 debug
• 2 info
• 3 warm
• 4 error
• 5 fatal errors

ログレベルの指定は以下のように行います。

directive

%%{
    init:{
        "logLevel": 5
    }
}%%

logLevelは見た目には影響しません。

フローチャートのディレクティブ

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

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

• true
• false

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

• linear
• curve

フローチャートのディレクティブの指定は以下のように行います。

directive

%%{
    init:{
        "flowchart":{
            "htmlLabels": true,
            "curve": "linear"
        }
    }
}%%

まとめ

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

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

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

参考