Mermaid使い方メモ

# Mermaid とは
- UML やフローチャートなどの図をテキストで記述できるツール
- JavaScript 製
- 似たものとして [PlantUML](https://qiita.com/opengl-8080/items/98c510b8ca060bdd2ea3) がある
    - こっちはJava製
    - PlantUML は名前の通り UML に特化している
    - Mermaid は UML だけでなくガントチャートや Git グラフ、折れ線グラフや円グラフなどその他の様々な図も描ける
- GitHub や Qiita などでは Markdown 中に簡単に埋め込むことができる
- ここでは個人的に気になった図だけに絞って書き方をまとめている

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

# 環境構築
VS Code を使って Mermaid を書ける環境を用意する。

[Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/) という Extension を入れると、 Markdown の中で Mermaid を書けるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/dbddd92b-c7b2-c7f3-a421-5701b2d48272.png)

# 基本構文
```
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

- Mermaid の構文は、まず最初に図の種類を記述するところがあり、そのあとに図の内容を記述する形になっている
    - `sequenceDiagram` が図の種類を表している

## 設定
```
---
title: Hello Title
config:
  theme: forest
---
flowchart
	Hello --> World
```

```mermaid
---
title: Hello Title
config:
  theme: forest
---
flowchart
	Hello --> World
```

- 図の種類の前に設定を記述できる
    - これを **Frontmatter** と呼ぶらしい
    - v10.5.0 以降はこの書き方が推奨されている
    - それ以前は [Directives](https://mermaid.js.org/config/directives.html) という書き方があったようだが、現在は非推奨となっている
    - でも、 Qiita でこの Frontmatter を利用すると一部の設定しか反映されない（`themeVariables` とかは無視される。同じテキストを本家のオンラインエディタで試したら普通に反映されたので、 Qiita の問題っぽい）
- 設定は Yaml 形式で記述する
- `title` には図のタイトルを記載できる
- `config` では、図の細かい設定を指定できる
    - 設定できる項目については [Mermaid Config Schema](https://mermaid.js.org/config/schema-docs/config.html) で確認できる

```text
flowchart

Hello --> World
```

```mermaid
flowchart

Hello --> World
```

- 図の部分は別にインデントが無くても良いっぽい


## フォントサイズの変更
```
---
title: Hello Title
config:
  theme: forest
  themeVariables:
    fontSize: 10px
---
flowchart
	Hello --> World
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/453c1c7e-030c-8f6a-dff1-95a7ee801d00.png)

※Qiita だと `themeVariables` が反映されないので、VSCodeでのレンダリング結果画像を添付している。

- 前述の [Mermaid Config Schema](https://mermaid.js.org/config/schema-docs/config.html) だと、 `theme` とかと同じ並びで `fontSize` を設定できそうな書き方になっているけど、実際は `themeVariables` の下に記載する必要がある
- 指定は `10pt` とか `80%` など、 CSS で指定できる書き方が使えるっぽい
- 反映されるのは図中のフォントサイズだけで、タイトル部分のフォントには反映されないっぽい

## テーマ

### default
```text
---
config:
  theme: default
---
flowchart
    Hello --> World
```

```mermaid
---
config:
  theme: default
---
flowchart
    Hello --> World
```

- デフォルトのテーマ
- なにも指定しなければこれが適用される

### neutral
```text
---
config:
  theme: neutral
---
flowchart
	Hello --> World
```

```mermaid
---
config:
  theme: neutral
---
flowchart
	Hello --> World
```

- 白黒印刷に適したテーマ

### dark
```text
---
config:
  theme: dark
---
flowchart
	Hello --> World
```

```mermaid
---
config:
  theme: dark
---
flowchart
	Hello --> World
```

- ダークモードに合うテーマ

### forest
```text
---
config:
  theme: forest
---
flowchart
	Hello --> World
```

```mermaid
---
config:
  theme: forest
---
flowchart
	Hello --> World
```

- 緑を基調としたテーマ

### base
```text
---
config:
  theme: base
---
flowchart
	Hello --> World
```

```mermaid
---
config:
  theme: base
---
flowchart
	Hello --> World
```

- 細かいカスタマイズをする場合の元（ベース）となるテーマ


## コメント
```text
flowchart

    %% comment
	Hello --> World
```

```mermaid
flowchart

    %% comment
	Hello --> World
```

- `%%` で始まる部分はコメントとして無視される



# ◆クラス図
[Class diagrams | Mermaid](https://mermaid.js.org/syntax/classDiagram.html)

```mermaid
classDiagram

Hoge <|-- Fuga
```

- UML のクラス図を書くことができる

## クラスの定義
```text
classDiagram

class Hoge
class Fuga
```

```mermaid
classDiagram

class Hoge
class Fuga
```

- `class <クラス名>` でクラスを定義できる

### クラスラベル
```text
classDiagram

class Hoge ["Hoge Label"]
class Fuga ["Fuga Label"]

Hoge --> Fuga
```

```mermaid
classDiagram

class Hoge ["Hoge Label"]
class Fuga ["Fuga Label"]

Hoge --> Fuga
```

- クラス名のうしろに `["ラベル"]` とつけることで、クラスの表示名を変更できる

## メンバーの定義
```text
classDiagram

class Hoge {
  attr1
  attr2: String
  method1()
  attr3: int = 10
  method2(param1: int)
  method3() String
}
```

```mermaid
classDiagram

class Hoge {
  attr1
  attr2: String
  method1()
  attr3: int = 10
  method2(param1: int)
  method3() String
}
```

- クラス宣言の後に波括弧 `{}` を追加すると、その中でメンバーを定義できる
    - メンバーを定義する記法は[もう１つある](https://mermaid.js.org/syntax/classDiagram.html#defining-members-of-a-class)けど、属性の型を記述できなかったりして不便なのと個人的にこちらの書き方のほうが好きなので、こちらだけ記載する
- 属性とメソッドの違いは丸括弧 `()` の有無で判定される
- 属性の方は、書いたママが適用されるっぽい
- メソッドの方は、戻り値の型を書くときに `method() String` のようにコロンは書かないようにする(書くとコロンが二重に表示されてしまう)

### 可視性
```text
classDiagram

class Hoge {
    + publicAttribute
    # protectedAttribute
    ~ packagePrivateAttribute
    - privateAttribute

    + publicMethod()
    # protectedMethod()
    ~ packagePrivateMethod()
    - privateMethod()
}
```

```mermaid
classDiagram

class Hoge {
    + publicAttribute
    # protectedAttribute
    ~ packagePrivateAttribute
    - privateAttribute

    + publicMethod()
    # protectedMethod()
    ~ packagePrivateMethod()
    - privateMethod()
}
```

- 可視性は各メンバーの先頭に記号を記述する
    - 記号自体は UML のクラス図のルールのママ

### 静的メンバ、抽象メンバ
```text
classDiagram

class Hoge {
    staticAttribute: String $
    staticMethod() String $
    abstractMethod() String *
}
```

```mermaid
classDiagram

class Hoge {
    staticAttribute: String $
    staticMethod() String $
    abstractMethod() String *
}
```

- メンバーの定義の末尾に `$`, `*` を追加することで、静的メンバ、抽象メンバを定義できる
- 静的メンバが `$`
- 抽象メンバが `*`


## 関連
```text
classDiagram

ClassA -- ClassB: --
ClassC --> ClassD: -->
ClassE .. ClassF: ..
ClassG ..> ClassH: ..>
ClassI <|-- ClassJ: <|--
ClassK <|.. ClassL: <|..
ClassM *-- ClassN: *--
ClassO o-- ClassP: o--
```

```mermaid
classDiagram

ClassA -- ClassB: --
ClassC --> ClassD: -->
ClassE .. ClassF: ..
ClassG ..> ClassH: ..>
ClassI <|-- ClassJ: <|--
ClassK <|.. ClassL: <|..
ClassM *-- ClassN: *--
ClassO o-- ClassP: o--
```

- `<クラス> <関連> <クラス>` という形でクラス間の関連を定義できる
- `<-->` のように双方向で記述することも可能
- 継承や実現に関しては、この方法でしか記述できないもよう
    - PlantUML のような `class Hoge extends Fuga implements Piyo` みたいな書き方はダメっぽい

### 関連のラベル
```text
classDiagram

Hoge -- Fuga: ラベル
```

```mermaid
classDiagram

Hoge -- Fuga: ラベル
```

- 関連を書いた後に `: ラベル` と続けることで、関連にラベルを付けることができる

### 多重度
```text
classDiagram

Hoge "1" -- "0..*" Fuga
```

```mermaid
classDiagram

Hoge "1" -- "0..*" Fuga
```

- 関連の線の前後にダブルクォーテーションで括った多重度を記述できる

## 名前空間
```text
classDiagram

namespace Foo {
    class Hoge
}

namespace Bar {
    class Fuga
}
```

```mermaid
classDiagram

namespace Foo {
    class Hoge
}

namespace Bar {
    class Fuga
}
```

- `namespace <名前> {}` で名前空間を定義できる
- 名前空間の入れ子はできないっぽい
- 名前空間の間で関連を定義することはできないっぽい

## 総称型
```mermaid
classDiagram

class Hoge~T~ {
    attribute: List~T~
    method(map: Map~String, T~) T
    method(list: List~List~T~~) T
}
```

- `List<T>` のような総称型を記述したい場合は `List~T~` のようにチルダ `~` を使用して記述する
- `List<List<T>>` のような単純な入れ子は `List~List~T~~` でできるが、入れ子の中にカンマがあると記述できない
    - `List<Map<String, String>>` のようなケースは記述できない、ということ

## ステレオタイプ
```text
classDiagram

class Hoge
<<interface>> Hoge
```

```mermaid
classDiagram

class Hoge
<<interface>> Hoge
```

- クラスの宣言とは別に `<<ステレオタイプ>> クラス名` と記述することでステレオタイプを設定できる

## 向きの変更

### LR : Left -> Right
```text
classDiagram
direction LR

Hoge -- Fuga
Piyo -- Fuga

class Foo
class Bar
```

```mermaid
classDiagram
direction LR

Hoge -- Fuga
Piyo -- Fuga
```

### RL : Right -> Left
```text
classDiagram
direction RL

Hoge -- Fuga
Piyo -- Fuga
```

```mermaid
classDiagram
direction RL

Hoge -- Fuga
Piyo -- Fuga
```

### TB : Top -> Bottom (デフォルト)
```text
classDiagram
direction TB

Hoge -- Fuga
Piyo -- Fuga
```

```mermaid
classDiagram
direction TB

Hoge -- Fuga
Piyo -- Fuga
```

### BT : Bottom -> Top
```text
classDiagram
direction BT

Hoge -- Fuga
Piyo -- Fuga
```

```mermaid
classDiagram
direction BT

Hoge -- Fuga
Piyo -- Fuga
```

- `direction <向き>` と記述することで、図の配置の向きを変更できる

## ノート
```text
classDiagram

note "普通のノート"
note for Hoge "Hogeのノート"

class Hoge
```

```mermaid
classDiagram

note "普通のノート"
note for Hoge "Hogeのノート"

class Hoge
```

- `note "テキスト"` でノートを追加できる
- `note for <クラス名>` で、クラスに対してノートを設定できる

## URLリンク
```text
classDiagram

class Hoge
link Hoge "https://www.google.co.jp"
```

```mermaid
classDiagram

class Hoge
link Hoge "https://www.google.co.jp"
```

- `link <クラス名> "URL"` と記述することで、クラスをリンクにできる
- Qiita 上だと、そのままクリックしてもリンク先には飛べない（セキュリティ的な制限？）
    - 右クリックして別タブで開くことはできる

## スタイルの調整
```mermaid
classDiagram

class Hoge {
    attribute
    method()
}
style Hoge fill:lightgreen,stroke:#F00,color:#00F,stroke-width:3px,stroke-dasharray:5
```

- `style <クラス名> <スタイル定義>` と記述することで、クラスのスタイルを変更できる
    - CSS でスタイルを定義しておいて class を割り当てる方法もあるが、現状図の中で CSS を定義する方法がないので Markdown の中とかで記述する場合は利用できない
    - 近々対応するみたいな感じのことがドキュメントには書かれている
    - > Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. Coming soon!
- スタイル定義で指定可能な項目について、ドキュメントを見ても特に言及がなかったので上記以外に指定可能なものがあるのかどうかは不明
    - `fill`: クラスの背景色
    - `stroke`: 枠線の色
    - `stroke-width`: 枠線の太さ
    - `stroke-dasharray`: 枠線を点線にする場合の間隔
    - `color`: 文字の色
- 色に関してはカラーコードか色名を指定できるっぽい
    - `color` に関してはカラーコードしか指定できなかったりで、なんか動きが安定していない印象

# ◆シーケンス図
[Sequence diagrams | Mermaid](https://mermaid.js.org/syntax/sequenceDiagram.html)

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

- シーケンス図を記述できる

## 基本
```text
sequenceDiagram

hoge ->> fuga: hi
```

```mermaid
sequenceDiagram

hoge ->> fuga: 友情は見返りを
fuga -->> hoge: 求めない
```

- `->>` で同期メッセージを記述できる
- メッセージ送信先のライフラインの後に `: <テキスト>` と続けることで、メッセージのテキストを記述できる
    - メッセージのテキストは必須
- `-->>` でリプライメッセージを記述できる


## 非同期メッセージ
```text
sequenceDiagram

hoge -) fuga: hello
```

```mermaid
sequenceDiagram

hoge -) fuga: hello
```

- `-)` で非同期メッセージを記述できる

## ライフラインの順序を指定する
```text
sequenceDiagram

participant hoge
participant fuga
participant piyo

piyo ->> hoge: hello
hoge ->> fuga: hello
```

```mermaid
sequenceDiagram

participant hoge
participant fuga
participant piyo

piyo ->> hoge: hello
hoge ->> fuga: hello
```

- 何も指定していない場合、ライフラインは登場した順番で左から並べられる
- `participant <ライフライン名>` という形でライフラインをあらかじめ定義しておけば、その順番でライフラインを並べることができる

## ライフラインのアイコンをアクターにする
```text
sequenceDiagram

actor hoge
actor fuga

hoge ->> fuga: hello
```

```mermaid
sequenceDiagram

actor hoge
actor fuga

hoge ->> fuga: hello
```

- `actor <ライフライン名>` で、ライフラインのアイコンをアクターにできる

## ライフラインのラベルを変更する
```text
sequenceDiagram

participant hogefuga as hoge fuga
participant foobar as foo bar

hogefuga ->> foobar: hello
```

```mermaid
sequenceDiagram

participant hogefuga as hoge fuga
participant foobar as foo bar

hogefuga ->> foobar: hello
```

- `participant <ID> as <ラベル>` と記述することで、ライフラインのラベルを変更できる

## ライフラインの生成と破棄
```text
sequenceDiagram

participant hoge

create participant fuga
hoge ->> fuga: create

destroy fuga
fuga -->> hoge: reply
```

```mermaid
sequenceDiagram

participant hoge

create participant fuga
hoge ->> fuga: create

destroy fuga
fuga -->> hoge: reply
```

- `create participant <ライフライン名>` を生成するメッセージの直前に記述することで、ライフラインの生成ができる
    - 生成するライフラインは `create` のタイミングで初めて記述される必要がある
    - したがって、あらかじめ `participant` で宣言して順序を定義しておくことはできない
- `destroy <ライフライン名>` を破棄するメッセージの直前に記述することで、ライフラインの破棄ができる

## ライフラインの活性化(アクティベーション)
```text
sequenceDiagram

hoge ->> fuga: hello
activate fuga
fuga -->> hoge: hello

hoge ->> fuga: hi
fuga -->> hoge: hi
deactivate fuga
```

```mermaid
sequenceDiagram

hoge ->> fuga: hello
activate fuga
fuga -->> hoge: hello

hoge ->> fuga: hi
fuga -->> hoge: hi
deactivate fuga
```

- `activate <ライフライン名>` で、ライフラインを活性化(アクティベーション)できる
- `deactivate <ライフライン名>` で、ライフラインを非活性化できる
- 活性化と非活性化は必ずセットで記述する必要がある

### 省略記法
```text
sequenceDiagram

hoge ->> +fuga: hello
fuga -->> hoge: hello

hoge ->> fuga: hi
fuga -->> -hoge: hi
```

```mermaid
sequenceDiagram

hoge ->> +fuga: hello
fuga -->> hoge: hello

hoge ->> fuga: hi
fuga -->> -hoge: hi
```

- 活性化させるライフライン名の前に `+`, `-` をつけることでも、活性化を制御できる
- 活性化を開始するタイミングで `+` を記述し、非活性化させるタイミングで `-` をつける

## ノート
```text
sequenceDiagram

hoge ->> fuga: hello

note right of hoge: right of hoge
note left of hoge : left of hoge

note over hoge: over hoge
note over hoge,fuga: over<br>hoge fuga
```

```mermaid
sequenceDiagram

hoge ->> fuga: hello

note right of hoge: right of hoge
note left of hoge : left of hoge

note over hoge: over hoge
note over hoge,fuga: over<br>hoge fuga
```

- `note <right of | left of | over> <ライフライン名>: <テキスト>` で、ライフラインに対してノートをつけることができる
- `over` の場合は、カンマ区切りで複数のライフライン名を並べることで、複数のライフラインにまたがったノートをつけられる
- 改行は `<br>` と記述する

## ループ
```text
sequenceDiagram

loop condition
    hoge ->> fuga: hello
end
```

```mermaid
sequenceDiagram

loop condition
    hoge ->> fuga: hello
end
```

- `loop <条件> ... end` でループを記述できる

## 条件分岐
```text
sequenceDiagram

alt condition
    foo ->> bar: hoge
else condition
    foo ->> bar: fuga
else
    foo ->> bar: piyo
end
```

```mermaid
sequenceDiagram

alt condition
    foo ->> bar: hoge
else condition
    foo ->> bar: fuga
else
    foo ->> bar: piyo
end
```

- `alt <条件> ... else <条件> ... end` で条件分岐を記述できる

## メッセージに番号をつける
```text
sequenceDiagram
autonumber

hoge ->> fuga: hi
fuga ->> piyo: hi
piyo -->> fuga: hi
fuga -->> hoge: hi
```

```mermaid
sequenceDiagram
autonumber

hoge ->> fuga: hi
fuga ->> piyo: hi
piyo -->> fuga: hi
fuga -->> hoge: hi
```

- `autonumber` と指定することで、メッセージに番号がふられる

# ◆ブロック図
[Block Diagram Syntax | Mermaid](https://mermaid.js.org/syntax/block.html)

```mermaid
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
```

- システムのアーキテクチャを説明したりするような図を描ける

## ブロックの定義
```text
block-beta

hoge fuga piyo
foo bar
fizz buzz
```

```mermaid
block-beta

hoge fuga piyo
foo bar
fizz buzz
```

- 任意のテキストを記述すると、個々のテキストがブロックとして定義される
- デフォルトでは、ブロックは単純に左から順番に一行で並べられる

### ブロックのラベル
```text
block-beta

hoge["Hoge"]
```

```mermaid
block-beta

hoge["Hoge"]
```

- ブロック名の後ろに `["ラベル"]` と記述することで、ブロックのラベルを変更できる

## カラム数を指定する
```text
block-beta

columns 3
hoge fuga piyo
foo bar
fizz buzz
```

```mermaid
block-beta

columns 3
hoge fuga piyo
foo bar
fizz buzz
```

- `columns <カラム数>` と記述することで、ブロックを並べる列数を指定できる
- カラム数を越えたブロックは自動的に次の行にずれる

## 空のブロックを差し込む
```text
block-beta

columns 3
hoge fuga piyo
foo bar space
fizz space buzz
```

```mermaid
block-beta

columns 3
hoge fuga piyo
foo bar space
fizz space buzz
```

- `space` は特殊なブロックで、空のブロックを差し込むことができる

## ブロックのカラム数を指定する
```text
block-beta

columns 3

hoge fuga piyo
foo:2 bar
fizz space:2
buzz["BUZZ"]:3
```

```mermaid
block-beta

columns 3

hoge fuga piyo
foo:2 bar
fizz space:2
buzz["BUZZ"]:3
```

- ブロック名の後ろに `:<カラム数>` と続けることでブロックが占有するカラム数を指定できる
    - ラベルを付けている場合は、その後ろに続ける
- `space` もカラム数を指定できる


## グループ
```text
block-beta

columns 3

hoge fuga piyo

block
    foo bar
end

block:FizzBuzzGroup:2
    fizz buzz
end
```

```mermaid
block-beta

columns 3

hoge fuga piyo

block
    foo bar
end

block:FizzBuzzGroup:2
    fizz buzz
end
```

- `block` と `end` で囲うことでグループを定義できる
- グループは１つのブロックとしてサイズが調整される
- `block:<グループの識別子>:<カラムサイズ>` と記述することでカラムサイズを指定できる

### グループの入れ子
```text
block-beta

columns 3

hoge fuga piyo

block:group:3
    foo bar
    block
        fizz buzz
    end
end
```

```mermaid
block-beta

columns 3

hoge fuga piyo

block:group:3
    foo bar
    block
        fizz buzz
    end
end
```

- グループは入れ子にできる

## 矢印でつなげる
```text
block-beta

columns 5
hoge space fuga space piyo
space:5
foo bar

hoge --> fuga
piyo --> fuga

hoge --> foo
foo --> hoge

piyo --> bar
```

```mermaid
block-beta

columns 5
hoge space fuga space piyo
space:5
foo bar

hoge --> fuga
piyo --> fuga

hoge --> foo
foo --> hoge

piyo --> bar
```

- ブロックの名前通しを `-->` で繋げることで、ブロック間に矢印を引くことができる
- ブロックの間にスペースがないと矢印が潰れるので `space` でうまく間をあける必要がある
- 矢印は右向きの `-->` しか記述できず、 `<--` や `<-->` といった記述はできない
    - したがって、双方向の矢印を書きたい場合は二行に分けて記述が必要

## グループ間に矢印を引く
```text
block-beta

columns 2
hoge fuga
space:2
block:FooBar:2
    foo bar
end
space:2
block:FizzBuzz:2
    fizz buzz
end

hoge --> FooBar
fuga --> bar
FooBar --> FizzBuzz
foo --> fizz
```

```mermaid
block-beta

columns 2
hoge fuga
space:2
block:FooBar:2
    foo bar
end
space:2
block:FizzBuzz:2
    fizz buzz
end

hoge --> FooBar
fuga --> bar
FooBar --> FizzBuzz
foo --> fizz
```

- グループ同士、グループとブロック、いずれも矢印で繋げることができる

## 矢印にテキストを追加する
```text
block-beta

hoge space:2 fuga

hoge -- "テキスト" --> fuga
```

```mermaid
block-beta

hoge space:2 fuga

hoge -- "テキスト" --> fuga
```

- 矢印を `-- "テキスト" -->` のように記述することで、任意のテキストを追加できる

## ブロックの形状を変更する
ブロックの形状はデフォルトの四角以外にも様々な形に変更できる。

### 角丸四角
```text
block-beta

hoge("Hoge")
```

```mermaid
block-beta

hoge("Hoge")
```

- ラベルを丸括弧 `()` で囲むことで、角が丸いブロックにできる

### スタジアムブロック
```text
block-beta

hoge(["Hogeeeeeeeeee"])
```

```mermaid
block-beta

hoge(["Hogeeeeeeeeee"])
```

- ラベルを丸括弧と角括弧 `([])` で囲むことで、左右が丸いブロックにできる

### サブルーチン
```text
block-beta

hoge[["Hoge"]]
```

```mermaid
block-beta

hoge[["Hoge"]]
```

- ラベルを二重の角括弧 `[[]]` で囲むことで、サブルーチンを表すブロックにできる

### 円筒
```text
block-beta

hoge[("Hoge")]
```

```mermaid
block-beta

hoge[("Hoge")]
```

- ラベルを角括弧と丸括弧 `[()]` で囲むことで、円筒形のブロックにできる

### 円
```text
block-beta

hoge(("Hoge"))
```

```mermaid
block-beta

hoge(("Hoge"))
```

- ラベルを二重の丸括弧 `(())` で囲むことで、ブロックを円にできる

### 非対称形
```text
block-beta

hoge>"Hoge"]
```

```mermaid
block-beta

hoge>"Hoge"]
```

- ラベルを `>]` で囲むことで、ブロックを非対称な形にできる

### ひし形
```text
block-beta

hoge{"Hoge"}
```

```mermaid
block-beta

hoge{"Hoge"}
```

- ラベルを波括弧 `{}` で囲むことで、ブロックをひし形にできる

### 六角形
```text
block-beta

hoge{{"Hoge"}}
```

```mermaid
block-beta

hoge{{"Hoge"}}
```

- ラベルを二重の波括弧 `{{}}` で囲むことで、ブロックを六角形にできる

### 平行四辺形
```text
block-beta

hoge[/"Hoge"/]
fuga[\"Fuga"\]
```

```mermaid
block-beta

hoge[/"Hoge"/]
fuga[\"Fuga"\]
```

- ラベルを角括弧と、スラッシュ `[//]` またはバックスラッシュ `[\\]` で囲うことで、ブロックを平行四辺形にできる

### 台形
```text
block-beta

hoge[/"Hoge"\]
fuga[\"Fuga"/]
```

```mermaid
block-beta

hoge[/"Hoge"\]
fuga[\"Fuga"/]
```

- ラベルを角括弧とスラッシュおよびバックスラッシュ `[/\]`, `[\/]` で囲うことで、ブロックを台形にできる

### 二重円
```text
block-beta

hoge((("Hoge")))
```

```mermaid
block-beta

hoge((("Hoge")))
```

- ラベルを三重の丸括弧 `((()))` で囲うことで、ブロックを二重円にできる

### ブロック矢印
```text
block-beta

arrow1<["Right"]>(right)
arrow2<["Left"]>(left)
arrow3<["Up"]>(up)
arrow4<["Down"]>(down)
arrow5<["LeftRight"]>(x)
arrow6<["UpDown"]>(y)
```

```mermaid
block-beta

arrow1<["Right"]>(right)
arrow2<["Left"]>(left)
arrow3<["Up"]>(up)
arrow4<["Down"]>(down)
arrow5<["LeftRight"]>(x)
arrow6<["UpDown"]>(y)
```

- ラベルを `<[]>` で囲い、その後ろに `(向き)` を付けることで、ブロックを矢印にできる
- `向き` には以下を指定できる
    - `right`: 右向き
    - `left`: 左向き
    - `up`: 上向き
    - `down`: 下向き
    - `x`: 左右双方向
    - `y`: 上下双方向

## ブロックのスタイル調整
### 個別に指定する
```text
block-beta

hoge fuga piyo

style hoge fill:lightgreen
style fuga fill:pink,stroke:red,color:blue,stroke-width:3px,stroke-dasharray:4
```

```mermaid
block-beta

hoge fuga piyo

style hoge fill:lightgreen
style fuga fill:pink,stroke:red,color:blue,stroke-width:3px,stroke-dasharray:4
```

- `style <ブロック名> <スタイル定義>` と記述することで、個々のブロックに直接任意のスタイルを指定できる


### クラスを定義する
```text
block-beta

hoge fuga piyo

classDef danger fill:pink,stroke:red
classDef disabled fill:lightgray,stroke:gray
classDef important stroke-width:3px

class hoge danger
class fuga,piyo disabled
class piyo important
```

```mermaid
block-beta

hoge fuga piyo

classDef danger fill:pink,stroke:red
classDef disabled fill:lightgray,stroke:gray
classDef important stroke-width:3px

class hoge danger
class fuga,piyo disabled
class piyo important
```

- `classDef <クラス名> <スタイル定義>` でスタイルのクラスを定義する
- `class <ブロック名,...> <クラス名>` で、指定したブロックにスタイルのクラスを適用する
    - ブロックはカンマ区切りで複数指定できる

# ◆ER図
```mermaid
---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

- ER図を作成できる

## エンティティを定義する
```mermaid
erDiagram

HOGE
```

- 名前を記述すると、それがエンティティになる

### ラベルを変更する
```text
erDiagram

HOGE["HOGEテーブル"]
```

```mermaid
erDiagram

HOGE["HOGEテーブル"]
```

- エンティティ名の後ろに `["ラベル"]` と続けることで、エンティティのラベルを変更できる


### エンティティの属性を定義する
```text
erDiagram

HOGE {
    int ID
    string NAME
}
```

```mermaid
erDiagram

HOGE {
    int ID
    string NAME
}
```

- エンティティ名の後の `{}` ブロックで属性を定義できる
- `<型名> <属性名>` で各属性を記述できる

### 主キーを定義する
```text
erDiagram

HOGE {
    int ID PK
    string NAME
}
```

```mermaid
erDiagram

HOGE {
    int ID PK
    string NAME
}
```

- 属性名の後ろに `PK` とつけることで、その属性を主キーにできる

### ユニークキーを定義する
```text
erDiagram

HOGE {
    int ID PK
    string code UK
    string name
}
```

```mermaid
erDiagram

HOGE {
    int ID PK
    string CODE UK
    string NAME
}
```

- 属性名の後ろに `UK` とつけることで、その属性をユニークキーにできる

### 外部参照制約を定義する
```text
erDiagram

HOGE {
    int ID PK
    int PIYO_ID FK
}

HOGE_FUGA {
    int HOGE_ID PK, FK
    int FUGA_ID PK, FK
}
```

```mermaid
erDiagram

HOGE {
    int ID PK
    int PIYO_ID FK
}

HOGE_FUGA {
    int HOGE_ID PK, FK
    int FUGA_ID PK, FK
}
```


- 属性名の後ろに `FK` とつけることで、外部参照制約を表現できる
- PKなどと並べる場合は `,` でつなげる

### 属性にコメントをつける
```text
erDiagram

HOGE {
    int ID PK "一意なキー"
    string NAME "名前"
}
```

```mermaid
erDiagram

HOGE {
    int ID PK "一意なキー"
    string NAME "名前"
}
```

- 属性名の最後にコメントを付けられる
- コメントはダブルクォーテーションで囲う必要がある

## リレーションを定義する
```text
erDiagram

HOGE |o--|{ FUGA : "ラベル"
FOO  ||..o{ BAR  : "ラベル"
```

```mermaid
erDiagram

HOGE |o--|{ FUGA : "ラベル"
FOO ||..o{ BAR : "ラベル"
```

- エンティティ間のリレーションを定義するには `<エンティティ名１> <関連> <エンティティ名２> : <ラベル>` と記述する
- ラベルは、日本語を使うならダブルクォーテーションで囲う必要がある
- 関連は以下の3つのパートに分けられる
    1. エンティティ名１に対するカーディナリティ
    1. 依存・非依存の識別
    1. エンティティ名２に対するカーディナリティ
- カーディナリティは以下のいずれかで表現する

|左側|右側|意味|
|---|---|---|
| `\|o`  | `o\|`  |０または１|
| `\|\|` | `\|\|` |１|
| `}o`   | `o{`   |０以上|
| `}\|`  | `\|{`  |１以上|

- 依存・非依存の識別は、依存なら `--`、非依存なら `..` で記述する

# ◆XYチャート
[XY Chart | Mermaid](https://mermaid.js.org/syntax/xyChart.html)

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

- 2つの軸を持ったグラフ（棒グラフ、折れ線グラフ）を作成できる

## 基本
```text
xychart-beta

x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
line [50, 100, 0]
```

```mermaid
xychart-beta

x-axis [hoge, fuga, piyo]
bar [50, 80, 30]
line [50, 80, 30]
```

- `x-axis` でX軸の各カテゴリを定義する
    - ここでは `hoge`, `fuga`, `piyo` という3つのカテゴリを定義している
- `bar` および `line` で各カテゴリの数量を指定する
    - ここでは `hoge` に `50`, `fuga` に `100`, `piyo` に `0` を割り当てている
- `bar` を指定すると棒グラフで表示される
- `line` を指定すると折れ線グラフで表示される
- Y軸のメモリは、デフォルトでは実際のデータから自動的に調整されるようになっている
    - データの最小値から最大値までだけを表示する

## Y軸の範囲を指定する
```text
xychart-beta

x-axis [hoge, fuga, piyo]
y-axis 0 --> 100
line [50, 80, 30]
```

```mermaid
xychart-beta

x-axis [hoge, fuga, piyo]
y-axis 0 --> 100
line [50, 80, 30]
```

- `y-axis <最小値> --> <最大値>` と記述することで、Y軸の最小値と最大値を指定できる


## グラフのタイトルを指定する
```title
xychart-beta

title "タイトル"
x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
```

```mermaid
xychart-beta

title "タイトル"
x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
```

- `title "..."` でグラフのタイトルを記述できる
- スペースなしのアルファベット記号のみならダブルクォーテーションなしでも記述できる

## x,y軸のタイトル
```text
xychart-beta

x-axis "X軸タイトル" [hoge, fuga, piyo]
y-axis "Y軸タイトル"
bar [50, 100, 0]
```

```mermaid
xychart-beta

x-axis "X軸タイトル" [hoge, fuga, piyo]
y-axis "Y軸タイトル"
bar [50, 100, 0]
```

- `x-axis "タイトル"`, `y-axis "タイトル"` とすることで各軸のタイトルを設定できる

## 横向きにする
```text
xychart-beta horizontal

x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
line [50, 100, 0]
```

```mermaid
xychart-beta horizontal

x-axis [hoge, fuga, piyo]
bar [50, 100, 0]
line [50, 100, 0]
```

- `xychart-beta` の後に `horizontal` とつけることでグラフを横向きにできる

# ◆円グラフ
[Pie chart diagrams | Mermaid](https://mermaid.js.org/syntax/pie.html)

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

- 円グラフを記述できる

## 基本
```text
pie

title "タイトル"
"hoge": 10.11
"fuga": 20
"piyo": 14.5
```

```mermaid
pie

title "タイトル"
"hoge": 10.11
"fuga": 20
"piyo": 14.5
```

- `"ラベル": <値>` という記述を並べることで、自動的に値から割合を算出して円グラフにしてくれる
- `title "タイトル"` でタイトルを記述できる

# ◆クアドラントチャート
[Quadrant Chart | Mermaid](https://mermaid.js.org/syntax/quadrantChart.html)

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

- 4つの象限に分けて各データの配置を確認できるクアドラントチャートを作成できる

## 基本
```text
quadrantChart

x-axis "foo" --> "bar"
y-axis "fizz" --> "buzz"

hoge: [0, 0]
fuga: [1, 1]
piyo: [0.5, 0.5]
```

```mermaid
quadrantChart

x-axis "foo" --> "bar"
y-axis "fizz" --> "buzz"

hoge: [0, 0]
fuga: [1, 1]
piyo: [0.5, 0.5]
```

- `x-axis "..." -> "..."` でX軸方向の象限の説明を記述する
- `y-axis "..." -> "..."` でY軸方向の象限の説明を記述する
- `<ラベル>: [座標]` で各データを指定した座標に配置する
    - 座標は左下の端が `[0, 0]`、右上の端が `[1, 1]`、中央が `[0.5, 0.5]` となっている

## 各象限にラベルをつける
```text
quadrantChart

quadrant-1 "第一象限"
quadrant-2 "第二象限"
quadrant-3 "第三象限"
quadrant-4 "第四象限"
```

```mermaid
quadrantChart

quadrant-1 "第一象限"
quadrant-2 "第二象限"
quadrant-3 "第三象限"
quadrant-4 "第四象限"
```

- `quadrant-N "ラベル"` で、各象限にラベルを設定できる
    - `N` には `1` ～ `4` の象限の値を指定する

# ◆Gitグラフ
[Gitgraph Diagrams | Mermaid](https://mermaid.js.org/syntax/gitgraph.html)

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

- Gitのブランチやコミットを表現する図を描ける

## コミットを追加する
```text
gitGraph

commit
commit
commit
```

```mermaid
gitGraph

commit
commit
commit
```

- `commit` と記述すると、コミットが追加される
- デフォルトでは `main` ブランチにコミットが追加される
- コミットハッシュはランダムに設定される

### デフォルトブランチ名を変更する
```text
---
config:
  gitGraph:
    mainBranchName: master
---
gitGraph

commit
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/ec7bb1ab-8bb9-a41e-0880-d94494e21326.png)

- `mainBranchName` でデフォルトブランチ名を変更できる


### コミットハッシュを変更する
```text
gitGraph

commit id: "hoge"
commit id: "fuga"
commit id: "piyo"
```

```mermaid
gitGraph

commit id: "hoge"
commit id: "fuga"
commit id: "piyo"
```

- `commit` のあとに `id: "ハッシュ値"` と続けることで、任意の値をコミットハッシュに設定できる

### コミットの種類を変更する
```text
gitGraph

commit type: NORMAL
commit type: REVERSE
commit id: "hoge" type: HIGHLIGHT
```

```mermaid
gitGraph

commit type: NORMAL
commit type: REVERSE
commit id: "hoge" type: HIGHLIGHT
```

- `commit` のあとに `type: <種別>` と指定することで、コミットの種類を変更できる
- `<種別>` には以下のいずれかを指定できる
    - `NORMAL`: デフォルトの種別
    - `REVERSE`: 打ち消しコミットを表す種別
    - `HIGHLIGHT`: 強調用の種別

## タグを追加する
```text
gitGraph

commit tag: "v1.0.0"
commit
commit id: "hoge" tag: "v2.0.0"
```

```mermaid
gitGraph

commit tag: "v1.0.0"
commit
commit id: "hoge" tag: "v2.0.0"
```

- `commit` のあとに `tag: "タグ名"` と指定することで、コミットにタグをつけることができる

## ブランチを作成する
```text
gitGraph

commit
commit
branch develop
commit
commit
commit
```

```mermaid
gitGraph

commit
commit
branch develop
commit
commit
commit
```

- `branch <ブランチ名>` で、新たにブランチを作成できる
- ブランチを作成すると、自動的にそのブランチに移動する

## ブランチを切り替える
```text
gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
commit
```

```mermaid
gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
commit
```

- `checkout <ブランチ名>` で、現在のブランチを切り替えることができる

## ブランチをマージする
```text
gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
merge develop
commit
```

```mermaid
gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
merge develop
commit
```

- `merge <ブランチ名>` で、現在のブランチに指定したブランチをマージできる
    - ここでは `main` ブランチに移動してから `develop` ブランチをマージしている

### マージコミットを装飾する
```text
gitGraph

commit
branch develop
commit
checkout main
merge develop id: "hoge" tag: "v1.0.0" type: HIGHLIGHT
```

```mermaid
gitGraph

commit
branch develop
commit
checkout main
merge develop id: "hoge" tag: "v1.0.0" type: HIGHLIGHT
```

- `commit` と同様の方法でマージコミットもタグ付けなどの装飾ができる

## cherry-pick
```text
gitGraph

commit
branch develop
commit
checkout main
commit id: "target"
commit
checkout develop
cherry-pick id: "target"
```

```mermaid
gitGraph

commit
branch develop
commit
checkout main
commit id: "target"
commit
checkout develop
cherry-pick id: "target"
```

- `cherry-pick id: "対象のID"` で指定したIDのコミットを `cherry-pick` できる

### マージコミットを cherry-pick する
```text
gitGraph

commit id: "1"
branch develop
commit id: "2"
branch foo
commit id: "3"
checkout main
merge develop id: "target"
checkout foo
cherry-pick id: "target" parent: "1"
```

```mermaid
gitGraph

commit id: "1"
branch develop
commit id: "2"
branch foo
checkout main
merge develop id: "target"
checkout foo
cherry-pick id: "target" parent: "1"
```

- マージコミットを `cherry-pick` する場合は、 `parent: "親のID"` を指定する
    - `親のID` とは、そのマージコミットの本線となるブランチの1つ前のコミットを指す
    - ここでは `main` ブランチに対して `develop` をマージしたときのマージコミットを `cherry-pick` しているので、本線のブランチ(`main` ブランチ)の１つ前のコミットは `1` になる

## ブランチの順序を指定する
```text
gitGraph

commit
branch a order: 3
branch b order: 2
branch c order: 1
```

```mermaid
gitGraph

commit
branch a order: 3
branch b order: 2
branch c order: 1
```

- `branch` コマンドの後ろに `order: <順序>` を指定することで、そのブランチの順序を指定できる
- ブランチの順序は `0` 以上の整数を指定する
- デフォルトブランチ(`main`) はデフォルトの順序が `0` なので、他のブランチは `1` 以上の値を指定する

### デフォルトブランチの位置を指定する
```text
---
config:
    gitGraph:
        mainBranchOrder: 2
---
gitGraph

commit
branch a order: 3
branch b order: 1
branch c order: 0
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/b9ce504a-563b-8165-a06c-cbcba0d0fa6a.png)

- `mainBranchOrder` でデフォルトブランチの順序を指定できる

## 縦向きにする
```text
gitGraph TB:

commit
commit
branch develop
commit
commit
```

```mermaid
gitGraph TB:

commit
commit
branch develop
commit
commit
```

- `gitGraph TB:` と指定することで、グラフの向きを縦にできる

## パラレルコミット
```text
---
config:
    gitGraph:
        parallelCommits: true
---
gitGraph

commit
commit
branch develop
commit
commit
checkout main
commit
merge develop
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/538e0645-8591-a78d-0878-f4617b34bc01.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/d7137bd6-56e1-1b50-cc80-234a92473f99.png)

- デフォルトでは、各コミットはブランチが異なっていても時間軸に対してシーケンシャルに並ぶ
- `parallelCommits` を `true` にすると、異なるブランチのコミットが時間軸に対して横並びになる

# ◆フローチャート
[Flowcharts Syntax | Mermaid](https://mermaid.js.org/syntax/flowchart.html)

```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
```

- フローチャートを記述できる

## ノードを作成する
```text
flowchart

hoge
```

```mermaid
flowchart

hoge
```

- 任意の文字列を記述すると、それがノードになる
- この文字列は、ノードの識別子(ID)となる

### ノードのテキストを設定する
```text
flowchart

hoge[Hoge text]
fuga[Fuga
text]
```

```mermaid
flowchart

hoge[Hoge text]
fuga[Fuga
text]
```

- ノードの宣言の後に `[テキスト]` と続けることで、ノードのテキストを指定できる
- 改行はそのまま反映される

### Markdown で記述する
```text
flowchart

hoge["`**bold** _itaric_
new line`"]
```

```mermaid
flowchart

hoge["`**bold** _itaric_ new line`"]
```

- テキストの `[]` の中を `"``"` で囲うことで Markdown でテキストを記述できる
- 利用できるのは太字やイタリックなどの一部のものだけ
- 改行はそのままテキストに反映される(末尾の半角スペース2つは不要)

### ノードの形状を変更する

ノードの形はブロック図と同じ要領で変更できる。
詳しくは [ブロックの形状を変更する](#ブロックの形状を変更する) を参照。

## ノード間のリンク
### 直線
```text
flowchart

hoge --- fuga
foo -- text --- bar
fizz --- |text| buzz
```

```mermaid
flowchart

hoge --- fuga
foo -- text --- bar
fizz --- |text| buzz
```

- `---` で、ノードを直線で繋げることができる
- `-- ラベル ---` または `--- |ラベル|` で、ラベルをつけられる

### 矢印
```text
flowchart

hoge --> fuga
foo -- text --> bar
fizz --> |text| buzz
alice <--> bob
alpha <--> |text| beta
```

```mermaid
flowchart

hoge --> fuga
foo -- text --> bar
fizz --> |text| buzz
alice <--> bob
alpha <--> |text| beta
```

- `-->` で、ノードを矢印で繋げることができる
- `-- ラベル -->` または `--> |ラベル|` で、ラベルをつけられる
- `<-->` で双方向になる
- 双方向の場合は `<--> |ラベル|` でラベルをつけられる

### 破線
```text
flowchart

hoge -.- fuga
foo -. text .- bar
fizz -.- |text| buzz
```

```mermaid
flowchart

hoge -.- fuga
foo -. text .- bar
fizz -.- |text| buzz
```

- `-.-` で、ノードを破線矢印で繋げることができる
- `-. ラベル .-` または `-.- |ラベル|` で、ラベルをつけられる

### 破線矢印
```text
flowchart

hoge -.-> fuga
foo -. text .-> bar
fizz -.-> |text| buzz
alice <-.-> bob
alpha <-.-> |text| beta
```

```mermaid
flowchart

hoge -.-> fuga
foo -. text .-> bar
fizz -.-> |text| buzz
alice <-.-> bob
alpha <-.-> |text| beta
```

- `-.->` で、ノードを破線矢印で繋げることができる
- `-. ラベル .->` または `-.-> |ラベル|` で、ラベルをつけられる
- `<-.->` で双方向になる
- 双方向の場合は `<-.-> |ラベル|` でラベルをつけられる

### 太線
```text
flowchart

hoge === fuga
foo == text === bar
fizz === |text| buzz
```

```mermaid
flowchart

hoge === fuga
foo == text === bar
fizz === |text| buzz
```

- `===` で、ノードを太線で繋げることができる
- `== ラベル ===` または `=== |ラベル|` で、ラベルをつけられる

### 太線矢印
```text
flowchart

hoge ==> fuga
foo == text ==> bar
fizz ==> |text| buzz
alice <==> bob
alpha <==> |text| beta
```

```mermaid
flowchart

hoge ==> fuga
foo == text ==> bar
fizz ==> |text| buzz
alice <==> bob
alpha <==> |text| beta
```

- `==>` で、ノードを太線矢印で繋げることができる
- `== ラベル ==>` または `==> |ラベル|` で、ラベルをつけられる
- `<==>` で双方向になる
- 双方向の場合は `<==> |ラベル|` でラベルをつけられる

### 非表示線
```text
flowchart

hoge ~~~ fuga
foo ~~ text ~~~ bar
fizz ~~~ |text| buzz
```

```mermaid
flowchart

hoge ~~~ fuga
```

- `~~~` で、ノードを非表示の線で繋げることができる
- これはノードの位置を調整したい場合に利用できる(らしい)

### 丸エッジ線
```text
flowchart

hoge --o fuga
foo -- text --o bar
fizz --o |text| buzz
alice o--o bob
alpha o--o |text| beta
```

```mermaid
flowchart

hoge --o fuga
foo -- text --o bar
fizz --o |text| buzz
alice o--o bob
alpha o--o |text| beta
```

- `--o` で、ノードを端が丸の線で繋げることができる
- `-- ラベル --o` または `--o |ラベル|` で、ラベルをつけられる
- `o--o` で双方向になる
- 双方向の場合は `o--o |ラベル|` でラベルをつけられる

### ×エッジ線
```text
flowchart

hoge --x fuga
foo -- text --x bar
fizz --x |text| buzz
alice x--x bob
alpha x--x |text| beta
```

```mermaid
flowchart

hoge --x fuga
foo -- text --x bar
fizz --x |text| buzz
alice x--x bob
alpha x--x |text| beta
```

- `--x` で、ノードを端が×の線で繋げることができる
- `-- ラベル --x` または `--x |ラベル|` で、ラベルをつけられる
- `x--x` で双方向になる
- 双方向の場合は `x--x |ラベル|` でラベルをつけられる

### リンクの連鎖
```text
flowchart

hoge --> fuga --> piyo
```

```mermaid
flowchart

hoge --> fuga --> piyo
```

- ノード間のリンクは、1行にまとめて書くことができる

### 複数のノードをまとめてリンクさせる
```text
flowchart

hoge --> foo & bar --> fuga
```

```mermaid
flowchart

hoge --> foo & bar --> fuga
```

- `&` でノードをつなげることで複数のノードにまとめてリンクをつなげることができる
- ただし、やりすぎると読みづらくなるらしいので注意が必要

### 線の長さを調整する
```text
flowchart

start --> hoge --> foo --> bar
start ---> fuga
start ----> piyo
```

```mermaid
flowchart

start --> hoge --> foo --> bar
start ---> fuga
start ----> piyo
```

- `--->` のように線の部分を伸ばすことで、矢印の長さを任意に調整できる
- 他の線の伸ばし方は下記を参照

|長さ|1|2|3|
|---|---|---|---|
|実線|`---`|`----`|`-----`|
|矢印|`-->`|`--->`|`---->`|
|太線|`===`|`====`|`=====`|
|太線矢印|`==>`|`===>`|`====>`|
|破線|`-.-`|`-..-`|`-...-`|
|破線矢印|`-.->`|`-..->`|`-...->`|

## 向きの指定
```text
flowchart LR

hoge --> fuga
```

```mermaid
flowchart LR

hoge --> fuga
```

- `flowchart <向き>` と記述することで、フローチャート全体の向きを指定できる
- `向き` には、以下のいずれかを指定できる

|向き|説明|
|---|---|
|`TB`|上から下(デフォルト)|
|`TD`|上から下|
|`BT`|下から上|
|`RL`|右から左|
|`LR`|左から右|

## サブグラフ
```text
flowchart

subgraph sub1
    foo --> bar
end

bar --> hoge
```

```mermaid
flowchart

subgraph sub1
    foo --> bar
end

bar --> hoge
```

- `subgraph <ID> ... end` でサブグラフを定義できる

### サブグラフのラベルを変更する
```text
flowchart

subgraph sub1 [Sub A]
    foo --> bar
end

bar --> hoge
```

```mermaid
flowchart

subgraph sub1 [Sub A]
    foo --> bar
end

bar --> hoge
```

- `subgraph <ID> [<ラベル>]` とすることで、サブグラフのラベルを変更できる

### リンクをつなげる
```text
flowchart

subgraph sub1
    foo --> bar
end

subgraph sub2
    fizz --> buzz
end

subgraph sub3
    hoge --> fuga
end

sub1 --> sub2
buzz --> fuga
```

```mermaid
flowchart

subgraph sub1
    foo --> bar
end

subgraph sub2
    fizz --> buzz
end

subgraph sub3
    hoge --> fuga
end

sub1 --> sub2
buzz --> sub3
```

- サブグラフ同士、サブグラフとノード、いずれもリンクをつなげることができる

### サブグラフを入れ子にする
```text
flowchart

subgraph sub1
    foo --> bar
    subgraph sub2
        fizz --> buzz
    end
end
```

```mermaid
flowchart

subgraph sub1
    foo --> bar
    subgraph sub2
        fizz --> buzz
    end
end
```

- サブグラフは入れ子にできる

### サブグラフごとに向きを指定する
```text
flowchart LR

subgraph sub1
    hoge --> fuga
end

subgraph sub2
    direction LR

    subgraph sub3
        fizz --> buzz
    end
    subgraph sub4
        direction RL
        alice --> bob
    end

    foo --> sub3
    sub3 --> sub4
end

sub1 --> sub2
```

```mermaid
flowchart LR

subgraph sub1
    hoge --> fuga
end

subgraph sub2
    direction LR

    subgraph sub3
        fizz --> buzz
    end
    subgraph sub4
        direction RL
        alice --> bob
    end

    foo --> sub3
    sub3 --> sub4
end

sub1 --> sub2
```

- `direction <向き>` と記述することで、サブグラフごとに向きを指定できる
- 未指定の場合は、デフォルトは `TB` (上から下)になる
    - 親の向きが継承されるとかではない

#### 向き指定の限界
```text
flowchart LR

subgraph sub1
    direction TB
    foo --> bar
end
subgraph sub2
    direction TB
    fizz --> buzz
end

hoge --> sub1
hoge --> fizz
```

```mermaid
flowchart LR

subgraph sub1
    direction TB
    foo --> bar
end
subgraph sub2
    direction TB
    fizz --> buzz
end

hoge --> sub1
hoge --> fizz
```

- サブグラフ内のノードに外部からリンクがつながっている場合、 `direction` の指定は無視される
    - この場合、親の向きが適用される
- 上の例では、 `sub2` は `direction TB` (上から下) を指定しているが、 `fizz` ノードが外部からリンクされているため親の向きである `LR` (左から右) になっている

## スタイル指定
```text
flowchart

hoge

style hoge fill:pink,color:red,stroke:green,stroke-width:3px,stroke-dasharray: 5
```

```mermaid
flowchart

hoge

style hoge fill:pink,color:red,stroke:green,stroke-width:3px,stroke-dasharray: 5
```

- `style <ノードID> <スタイル定義>` で、ノードのスタイルを調整できる

### クラス定義
```text
flowchart

hoge --> fuga

classDef warn fill:yellow
classDef dotted stroke-dasharray: 5
class hoge warn
class hoge,fuga dotted
```

```mermaid
flowchart

hoge --> fuga

classDef warn fill:yellow
classDef dotted stroke-dasharray: 5
class hoge warn
class hoge,fuga dotted
```

- `classDef <クラス名> <スタイル定義>` で、スタイルのクラスを定義できる
- `class <ノードID> <クラス名>` で、ノードに対してスタイルのクラスを割り当てられる
    - `ノードID` はカンマ区切りで複数指定できる

## FontAwesome を使用する
```text
flowchart

hoge["fa:fa-file-lines Hoge"] --> fuga["fa:fa-keyboard Fuga"]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/275600cd-1337-083a-c581-bb82ce9771a3.png)

- ラベルの中で `fa:クラス名` と指定することで [FontAwesome](https://fontawesome.com/) のアイコンを利用できる
    - 使えるのは無償版だけっぽい？
- Qiita では利用できないっぽい


# ◆ガントチャート
[Gantt diagrams | Mermaid](https://mermaid.js.org/syntax/gantt.html)

```mermaid
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

- ガントチャートを記述できる

## 基本
```text
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: 2023-03-20, 1d
task2: 2d
task3: 3d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: 2023-03-20, 1d
task2: 2d
task3: 3d
```

- `<タスク名> : <メタデータ>` の書式で各タスクを記述する
- メタデータには、そのタスクの開始・終了などを記述する
- いくつか書式があるが、ここでは開始日と期間を指定しているもの(`task1`)と期間だけを指定しているもの(`task2`, `task3`)を記載している
    - 開始を指定していない場合は、1つ前のタスクの終了がそのまま次のタスクの開始になる

### はまりポイント

```text
gantt

tickInterval 1day

task1: 2023-03-20, 1d
```

```mermaid
gantt

tickInterval 1day

task1: 2023-03-20, 1d
```

- `dateFormat YYYY-MM-DD` を指定していないと、開始や終了がなんだか中途半端なところになる
- この理由は、ガントチャートを時刻まで表示させるとわかる

```text
gantt

tickInterval 3hour
axisFormat %m/%d %H

task1: 2023-03-20, 1d
```

```mermaid
gantt

tickInterval 3hour
axisFormat %m/%d %H

task1: 2023-03-20, 1d
```

- １日の長さは、9:00が起点になっている
- `dateFormat YYYY-MM-DD` を指定すると、起点が 00:00 になって日付の線と一致するようになる

```text
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: 2023-03-20, 1d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: 2023-03-20, 1d
```

- ドキュメントには `dateFormat` のデフォルトは `YYYY-MM-DD` と[書かれている](https://mermaid.js.org/syntax/gantt.html#input-date-format)
- なので指定しなくても良いだろと思って未指定にしていると、上記のように１日の起点が 09:00 になって少しずれたガントチャートになってしまう


## メタデータの指定
メタデータ部分は以下のような構文となっている。

```plantuml
@startebnf

metadata = {tag, ","}, [ taskID, "," ], [ startDate, "," ], endDate;
tag = "active" | "done" | "crit" | "milestone";
startDate = "after", taskID | date;
endDate = "until", taskID | date | length;
@endebnf
```

- 大きく `tag`, `taskID`, `startDate`, `endDate` から成る
- `endDate` 以外は省略が可能
    - ただし `startDate` が省略できるのは、そのタスクの開始が自動的に定まる場合のみ
    - 例えば1つ前のタスクが存在すれば `startDate` は省略できる
        - 1つ前のタスクの終了が、そのまま次のタスクの開始になるため

### 開始の指定
```text
gantt

dateFormat YYYY-MM-DD

%% 開始を日付で指定
task1: 2024-01-01, 1d

%% 開始を省略
task2: 2d

%% 開始を他のタスクで指定
task3: after task1, 3d
```

```mermaid
gantt

dateFormat YYYY-MM-DD

%% 開始を日付で指定
task1: 2024-01-01, 1d

%% 開始を省略
task2: 2d

%% 開始を他のタスクで指定
task3: after task1, 3d
```

- `task1` は開始を日付(`date`)で指定している
- `task2` は開始を省略している
    - この場合、 `task2` の開始は `task1` (1つ前のタスク)の終了になる
    - 1つ前のタスクが定まらない場合、開始は省略できない
- `task3` は `after task1` (`task1` の後) という形で相対的な指定をしている

### 終了の指定
```text
gantt

dateFormat YYYY-MM-DD

%% 終了を期間で指定
task1: 2024-01-01, 1d

%% 終了を日付で指定
task2: 2024-01-02, 2024-01-05

%% 終了を他のタスクで指定
task3: 2024-01-01, until task2
```

```mermaid
gantt

dateFormat YYYY-MM-DD

%% 終了を期間で指定
task1: 2024-01-01, 10h

%% 終了を日付で指定
task2: 2024-01-02, 2024-01-05

%% 終了を他のタスクで指定
task3: 2024-01-01, until task2
```

- `task1` は、そのタスクの期間を指定することで相対的な終了を指定している
- `task2` は、日付で絶対的な終了を指定している
- `task3` は、他のタスクを指定することで終了を指定している
    - 他のタスクの開始が、このタスクの終了になる

#### 期間の指定方法
- 公式ガイドでは、期間の指定書式について明確な説明は見つけられなかった
- `1d`, `1h` のように、期間の量と単位をつなげて記述するもよう
- `1d1h` のように、異なる単位をつなげて記述することは**できない**
- 量は、`1.1`のように小数点も指定可能
- 単位については、たぶん以下が指定可能

|文字|単位|
|---|---|
|`y`|年|
|`M`|月|
|`d`|日|
|`w`|週|
|`h`|時|
|`m`|分|
|`s`|秒|

### タスクのID
```tex
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: t1, 2024-01-01, 1d
task2: t2, after t1, 2d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

task1: t1, 2024-01-01, 1d
task2: t2, after t1, 2d
```

- `taskID` を指定することで、タスクのIDを定義できる
- 定義したIDは、 `after taskID` や `until taskID` などで指定できる

### タグ
```text
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

normal task: 2024-01-01, 1d
active task: active, 1d
done task: done, 1d
crti task: crit, 1d
m1: milestone, 2024-01-05, 1d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

normal task: 2024-01-01, 1d
active task: active, 1d
done task: done, 1d
crti task: crit, 1d
m1: milestone, 2024-01-05, 1d
```

- タグには以下のいずれかを指定できる

|タグ|説明|
|---|---|
|`active`   |アクティブ|
|`done`     |完了済み|
|`crit`     |クリティカル|
|`milestone`|マイルストーン|

#### マイルストーンのマーク位置
- マイルストーンのマークは、開始と終了の中央のところに表示されるので注意が必要
- 日付の線の上にマークを乗せたい場合は、期間を短くするなどの調整が必要


```text
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

m1: milestone, 2024-01-05, 1d
m2: milestone, 2024-01-05, 1s
```

```mermaid
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

m1: milestone, 2024-01-05, 1d
m2: milestone, 2024-01-05, 1s
```

## セクション
```text
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

section A
task1: 2024-01-01, 1d
task2: 1d

section B
task3: 1d

section C
task4: 1d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
tickInterval 1day

section A
task1: 2024-01-01, 1d
task2: 1d

section B
task3: 1d

section C
task4: 1d
```

- `section <名前>` で、タスクをセクションに分けることができる

## 開始・終了の日付フォーマット
```text
gantt

dateFormat HH:mm
axisFormat %H:%M

task1: 00:00, 3h
task2: 07:00, 15:30
```

```mermaid
gantt

dateFormat HH:mm
axisFormat %H:%M

task1: 00:00, 3h
task2: 07:00, 15:30
```

- `dateFormat <フォーマット>` で、開始・終了に指定する日時のフォーマットを指定できる
- フォーマットに指定できる文字の一部を以下に記載
    - 全量は[公式ガイド](https://mermaid.js.org/syntax/gantt.html#input-date-format)を参照

|文字|例|説明|
|---|---|---|
|`YYYY`|`2014`|4桁の年|
|`MM`|`01`..`12`|月|
|`DD`|`01`..`31`|日|
|`HH`|`00`..`23`|時間|
|`mm`|`00`..`59`|分|
|`ss`|`00`..`59`|秒|
|`SSS`|`000`..`999`|ミリ秒|

## 軸の日付フォーマット
```text
gantt

dateFormat YYYY-MM-DD
axisFormat %m-%d %H:%M

task1: 2024-01-01, 1d
task2: 1d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
axisFormat %m-%d %H:%M

task1: 2024-01-01, 1d
task2: 1d
```

- `axisFormat <フォーマット>` で、横に表示される日付のフォーマットを指定できる
- フォーマットに指定できる文字の一部を以下に記載
    - 全量は[公式ガイド](https://mermaid.js.org/syntax/gantt.html#output-date-format-on-the-axis)を参照

|フォーマット|説明|
|---|---|
|`%Y`|西暦(4桁)|
|`%y`|西暦(2桁)|
|`%m`|月|
|`%d`|日|
|`%a`|曜日(省略形)|
|`%H`|時間(24時間表記)|
|`%M`|分|
|`%S`|秒|
|`%L`|ミリ秒|

## 軸の間隔を指定する
```text
gantt

dateFormat YYYY-MM-DD
axisFormat %H:%M
tickInterval 30minute

task1: 2024-01-01, 1.5h
task2: 90m
```

```mermaid
gantt

dateFormat YYYY-MM-DD
axisFormat %H:%M
tickInterval 30minute

task1: 2024-01-01, 1.5h
task2: 90m
```

- `tickInterval <間隔>` で、時間軸の間隔を指定できる
- `間隔` は `30minute` のように間隔の量と単位で指定する
- 単位には以下が指定できる

|単位|説明|
|---|---|
|`month`|月|
|`week`|週|
|`day`|日|
|`hour`|時|
|`minute`|分|
|`second`|秒|
|`millisecond`|ミリ秒|

<del>日付に関するフォーマットが全然統一されてなくてヤバイ</del>

## 今日のマーカーを削除する
```text
gantt

dateFormat YYYY-MM-DD

task1: 2024-03-25, 2d
task2: 3d
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/e6d9d1b7-6050-4db2-b2fd-6531a70af6d1.png)

- デフォルトではシステム日時の場所に赤い線が表示される
- これを非表示にしたい場合は、以下のように設定する

```text
gantt

todayMarker off
dateFormat YYYY-MM-DD

task1: 2024-03-25, 2d
task2: 3d
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/86f74f73-402a-6be5-f434-de0ce69f32d4.png)

- `todayMarker off` とすれば、線が表示されなくなる

## 非稼働日を設定する
```text
gantt

dateFormat YYYY-MM-DD
axisFormat %m/%d(%a)
tickInterval 1day
excludes weekends, 2024-03-20

task1: 2024-03-14, 3d
task2: 2d
```

```mermaid
gantt

dateFormat YYYY-MM-DD
axisFormat %m/%d(%a)
tickInterval 1day
excludes weekends, 2024-03-20

task1: 2024-03-14, 3d
task2: 2d
```

- `excludes <非稼働日>` と指定することで、特定の日を非稼働日にできる
- 非稼働日は除外した形でタスクの線が引かれるようになる
- `weekends` と指定すると、すべての土日が非稼働日になる
- カンマ (`,`) 区切りで複数の非稼働日を指定できる
- `YYYY-MM-DD` 書式で特定の日を非稼働日にすることもできる
- `monday` のように曜日指定もできる

# ◆マインドマップ
[Mindmap | Mermaid](https://mermaid.js.org/syntax/mindmap.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/a1f0929b-5f5f-8c2b-134a-0c4412dedbbe.png)

- マインドマップを記述できる
- Qiita ではうまく動作しないもよう

## 基本
```text
mindmap
root
    hoge
        foo
        bar
    fuga
        fizz
        buzz
    piyo
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/d684b7c4-88ea-b97e-c890-f2a6110db6bf.png)

- 各ノードをインデントの高さで分類していく形で記述する
- 最初にルートノードを記述し、その下にインデントを下げて一段目のノードを並べる
    - `mindmap` とルートノードの間に空行があるとパースエラーになるので注意

## ラベルを変更する
```text
mindmap
root
    hoge[foo bar]
    fuga[
        fizz
        buzz
    ]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/0f0c2dac-6e70-bea5-86c0-a1bc332d9cea.png)

- ノード名の後ろに `[テキスト]` と続けることで、ノードのラベルを変更できる
- 改行はそのまま反映される（前後はトリムされるもよう）


## ノードの形状を変える
```text
mindmap
root
    a["[長方形]"]
    b("(角丸長方形)")
    c(("((円))"))
    d))"))爆発(("((
    e)")雲("(
    f{{"{{六角形}}"}}
    デフォルト
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28302/5cab20ee-5208-a81e-fce8-0ef8aeb44046.png)

- 角括弧 `[]` で長方形
- 丸括弧 `()` で角丸長方形
- 丸括弧2つ `(())` で円
- 丸括弧2つを逆向き `))((` で爆発
- 丸括弧を逆向き `)(` で雲
- 波括弧2つ `{{}}` で六角形



# PlantUML との比較

※個人的な感想です
※同じ図がPlantUMLに無い場合は、用途が近いっぽい図と比較(その場合は括弧でPlantUML側の図を記載→「ブロック図(コンポーネント図)」など)


|図|Mermaid|PlantUML|備考|
|---|---|---|---|
|クラス図|△|○|PlantUMLのほうがJava実装ぽくかけたりするのが嬉しい(継承や実現の定義が楽にできるので)|
|シーケンス図|○|○|ライフラインの生成を使うと順序の宣言が冒頭にまとめられないのがちょっと微妙。それ以外は必要十分な機能を備えている？|
|ER図|△|○|Mermaidのほうは属性の必須を表現できないのが致命的な気がする(コメントで表現するしかない？)。|
|XYチャート|○|-||
|Pieチャート|○|-||
|ブロック図(コンポーネント図)|○|△|Mermaidのほうがシンプルなのと、配置の制御がグリッドシステム？なのが調整しやすそうな気がして個人的に好み|
|Git Graph|○|-||
|ガントチャート|○|○|PlantUMLのほうが高機能そうだが、簡単なものをサクっと作りたい場合はMermaidも良いかも|
|フローチャート(アクティビティ図)|○|△|PlantUMLのアクティビティ図は文法に癖があると個人的に感じる。Mermaidのフローチャートの方が柔軟に書けそうな気がする|
|マインドマップ|○|○|PlantUMLの方が高機能だが最低限の機能はあるので軽く書く分にはMermaidでも十分そう|

UMLの記述に関しては、さすが名前にUMLを冠しているだけあってPlantUMLの方が便利な印象。
クラス図・シーケンス図（あとER図）については、今後もPlantUMLで良いかなと感じた。

それ以外でMermaidとPlantUMLの両方でサポートされている図に関しては、PlantUMLの方が機能は豊富で細かい調整がきくようになっている印象。
ただし、高機能な分覚えることが多くて学習コストや調整コストは高くなりそう。
Mermaidの方は、機能はPlantUMLに比べて少ないかもしれないが、その分覚えることは少なくなっていて手早く覚えてサクッと書きたい場合に有用そうな印象。

XYチャートやGitGraphなど、PlantUMLに無くて便利そうなものはMermaidを活用していくのがよさそう。



# 参考
- [About Mermaid | Mermaid](https://mermaid.js.org/intro/)