Mermaidの配色テーマを切り替える方法

今夜キックオフ。

Mermaid

「flowchart」は「graph」と書いてもいいらしい。最初はgraphしかなかったのが、様々な表示に対応して分化してきた歴史でもあるのかな。

テーマ

「%%」で囲むとコメントになります。コメントは作図に影響しません。その代わり、コマンドを埋め込むことができます。

```mermaid
%%{init: {"theme" : "forest" }}%%
flowchart LR
日本 <--> ドイツ
```

コマンドの一つが「theme」で「テーマ」の設定ができます。用意されているのは5種類。default, base, dark, forest, neutralの5つ。forestは緑の森のイメージ。

%%{init: {"theme" : "forest" }}%%
flowchart LR
日本 <--> ドイツ

baseのときはthemeVariablesを使って、各要素の配色も変更できるのですが、複雑になるので省略します。

矢印のバリエーション

先端を「o」や「x」にできます。「--o」や「--x」と書くだけ。

%%{init: {"theme" : "dark" }}%%
flowchart LR
日本 --o コスタリカ

両端につけてもいい。

%%{init: {"theme" : "neutral" }}%%
flowchart LR
日本 x--x スペイン

混在はできないようです。勝ち負けの表記には向かない。

グループ化

もともとgraphなのでsubgraphだと思われます。

```mermaid
flowchart LR
subgraph グループE
    日本
    ドイツ
    コスタリカ
    スペイン
end
subgraph グループF
    ベルギー
    カナダ
    モロッコ
    クロアチア
end
```

こんな感じにグループ分けで使うのが初期の仕様じゃないかな。

%%{init: {"theme" : "base" }}%%
flowchart LR
subgraph グループE
    日本
    ドイツ
    コスタリカ
    スペイン
end
  subgraph グループF
    ベルギー
    カナダ
    モロッコ
    クロアチア
  end

グループEが下に来るのが謎。

まとめ

予選リーグで勝てる気がしない。