ひとりマーメイド3日目
基本の構文構造
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではマーメイドの構文構造について紹介します！
↓↓前回の記事はこちら
共通基本文法
前回の記事ではマーメイドの主なエディタと書き方について紹介しました。もういつでも記述できますね。
今日からはいよいよ細かい記法について学んでいこうと思います。まずは全てのダイアグラムで共通となる基本的な構文構造について見ていきましょう。
ダイアグラムの宣言
マーメイドの記述ではまずダイアグラムの種類を宣言します。フローチャートを書きたい場合は "graph" です。
mermaid
graph
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
ダイアグラム宣言一覧
| 宣言 | ダイアグラム |
|---|---|
| graph | フローチャート |
| sequenceDiagram | シーケンス図 |
| classDiagram | クラス図 |
| stateDiagram-v2 | 常態遷移図 |
| erDiagram | ER図 |
| gantt | ガントチャート |
| gitGraph | gitグラフ |
| journey | カスタマージャーニーマップ |
| pie | 円グラフ |
| requirementDiagram | 要求図 |
| C4Context | C4モデル |
| mindmap | マインドマップ |
ディレクティブ
先頭に以下の記述を加えるとダイアグラムの外観を変更することができます。
%%{ }%%
以下のように記述するとダイアグラムを森モードに変身させることができます。
mermaid
%%{init: { "theme": "forest" } }%%
graph
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
緑になりました。
細かいディレクティブの仕様は後日紹介しますね！
予約語
endは予約語なので使用を避けましょう。
まとめ
マーメイドの記述にもいろいろルールがあるんですね。
楽しいぃぃぃ
↓↓次回の記事はこちら！！
参考
'