Zenn
🧜‍♀️

Mermaid のテーマ・スタイルの変更方法

2021/10/05に公開
Mermaid
tech

本記事では、Zenn で使えるダイアグラム表示ツール mermaid.js のテーマ・スタイルの変更方法について紹介します。

フォント、色などの変更

theme を使う

すでに用意されているテーマを使う方法です。

base

```mermaid
%%{init:{'theme':'base'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

default

```mermaid
%%{init:{'theme':'default'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

forest

```mermaid
%%{init:{'theme':'forest'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

dark

```mermaid
%%{init:{'theme':'dark'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

neutral

```mermaid
%%{init:{'theme':'natural'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

themeVariables を使う

テーマ変数を使う方法です。

```mermaid
%%{init:{'theme':'base','themeVariables':{'primaryColor':'#6A7FAB','primaryTextColor':'#FAFBF9','primaryBorderColor':'#6A7FAB','lineColor':'#6A7FABCC','textColor':'#6A7FABCC','fontSize':'20px'}}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

```mermaid
%%{init:{'theme':'base','themeVariables':{'primaryColor':'#6A7FAB','primaryTextColor':'#FAFBF9','primaryBorderColor':'#6A7FAB','secondaryColor':'#6A7FAB','lineColor':'#6A7FABCC','noteTextColor':'#FAFBF9','noteBkgColor':'#6A7FABBB','textColor':'#6A7FABCC','fontSize':'20px'},'themeCSS':"text.actor {font-size:24px !important;}"}}%%
sequenceDiagram
    participant bss as boot-shim.S
    participant bsc as boot-shim.c
    participant zbi as zbi.c
    participant dt as devicetree.c

    Note over bss: QEMU から起動
    activate bss
    bss ->> bsc: boot_shim()
    activate bsc
    bsc ->> dt: dt_walk()
    bsc ->> zbi: zbi_check()
    bsc ->> zbi: zbi_create_entry_with_payload()
    deactivate bsc
    deactivate bss
    Note over bss: physboot へジャンプ
```

大体、これで対応できる感じです。
どの変数が、どの要素に対応するかは、試行錯誤が必要でした。

themeCSS を使う

CSS を使う方法です。

```mermaid
%%{init:{'theme':'base','themeCSS':" .node rect {fill: #6A7FAB;} .label text {fill: #FAFBF9 !important;} .output {font-size:30px;}"}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

最後の手段、何でもできる感じです。
ただし、環境によって見え方が異なる可能性を考慮する必要があります。

Chrome のデベロッパーツールで対象のクラス名などを調べる必要があります。
場合によっては !important が必要でした。

SVG で使用できる属性 を指定可能だと思います。

style を使う

ノードごとにテーマを適用できます。サブグラフにも適用可能です 。

```mermaid
graph TB
  subgraph mygraph[サブグラフ]
    mynode[ノード]
  end
  style mygraph fill:#ffa23e
  style mynode fill:#7BCCAC
```

SVG で使用できる属性 を指定可能だと思います。

linkStyle を使う

リンクにテーマを適用できます。リンクの指定は 0.. と番号で行います。

```mermaid
graph LR
  qemu(QEMU) --> zircon[ZIRCON]
  zircon --> fuchsia[FUCHSIA]
  linkStyle 0 stroke:#7BCCAC,stroke-width:4px
  linkStyle 1 stroke:#ffa23e,stroke-dasharray:4
```

QEMU - ZIRCON 間のリンクを 0 で指定しています。
矢印部分の色を変えたい場合、themeVariables の textColor を使います。

SVG で使用できる属性 を指定可能だと思います。

classDef を使う

複数ノードに同一のテーマを適用可能です。ノード名:::クラス名 と適用します。

```mermaid
graph LR
  classDef class1 fill:#7BCCAC,fill-opacity:0.5
  classDef class2 fill:#ffa23e

  qemu(QEMU):::class1 --> zircon[ZIRCON]:::class2
  zircon --> fuchsia[FUCHSIA]:::class1
```

SVG で使用できる属性 を指定可能だと思います。

マージン、パディングなど

図のサイズ、要素間の間隔などを指定する方法です。

フローチャート

https://github.com/mermaid-js/mermaid/blob/develop/docs/Setup.md#flowchart

```mermaid
%%{init:{'theme':'default','flowchart':{'rankSpacing':100}}}%%
flowchart LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

要素間の間隔を 100 にした例です。

'flowchart':{...} と、グラフ種別ごとに分けて記述する必要があります。

おまけ

単純なデータ構造

```mermaid
%%{init:{'theme':'base','themeVariables':{'primaryColor':'#6A7FAB','primaryTextColor':'#FAFBF9',  'primaryBorderColor':'#6A7FAB','lineColor':'#fff','textColor':'#6A7FABCC','fontSize':'20px'},  'flowchart':{'rankSpacing':1}}}%%
graph LR
  classDef default stroke:#fff
  c[Container Header] --- b[Boot Item] --- b2[...] --- b3[Boot Item]
```

スライド風デザイン

```mermaid
%%{init:{'theme':'base','themeCSS':" .cluster .label {font-size:32px;font-weight:bold;} .output {font-size:24px;}",'flowchart':{'nodeSpacing':80}}}%%
graph LR
subgraph border[ ]
  subgraph title[まとめ]
    n1["・mermaid.js は修正→確認のサイクルが短い<br> <br>・管理が楽"]:::node
  end
end
  style title fill:#6A7FAB,color:#FAFBF9,stroke:#6A7FAB,height:32px
  classDef node color:#6A7FAB,fill-opacity:0,stroke-width:0,width:500px
```

Discussion