MermaidをQiitaで使用する（１）　フローチャート

QiitaやMiroでMermaid Diaglamが使用できるということで、試してみました。

http://mermaid.js.org/syntax/flowchart.html

Qiitaで使用するには、以下のように記述します。ただし、テキストに「＊＊」を使って強調表示を行うようなマークダウン機能は使用できませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/99c3437f-e6fb-a683-9e7d-1adec6c8faf7.png)

Miroでは、作成されたダイアグラムが画像に変換されるため、作成後にコードの修正を行うことはできません。

# テキストを含むノード

```mermaid
---
title: Sample 1
---
flowchart TB
    id1[1.This is the text in the box]
    id2(2.This is the text in the box)
    id3([3.This is the text in the box])
    id4[[4.This is the text in the box]]
    id1 --> id2 & id3 --> id4
```

```text:Sample 1
flowchart TB
    id1[1.This is the text in the box]
    id2(2.This is the text in the box)
    id3([3.This is the text in the box])
    id4[[4.This is the text in the box]]
    id1 --> id2 & id3 --> id4
```

# 図形

```mermaid
---
title: Sample 2
---
flowchart LR
    id1[(Database)] -->
    id2((Circle)) -->
    id3(((Circle))) -->
    id4{Rhombus}
```

```text:Sample 2
flowchart LR
    id1[(Database)] -->
    id2((Circle)) -->
    id3(((Circle))) -->
    id4{Rhombus}
```

# 接続

```mermaid
---
title: Sample 3
---
flowchart LR
id1[/Box 1/] --> 
id2[\Box 2\] -->
id3[/Box 3\] & id4[\Box 4/]
```

```text:Sample 3
flowchart LR
    id1[/Box 1/] --> 
    id2[\Box 2\] -->
    id3[/Box 3\] & id4[\Box 4/]
```

```mermaid
---
title: Sample 4
---
flowchart LR
A --- B --> C --> B
D -- This is the text --- E
E ---|This is the text| F
G -- text --> H
G -->|text| H
H -.-> I
H -. text .-> I
J === K
K ==> L
K == text ==> L
~~~ M
```

```text:Sample 4
flowchart LR
    A --- B --> C --> B
    D -- This is the text --- E
    E ---|This is the text| F
    G -- text --> H
    G -->|text| H
    H -.-> I
    H -. text .-> I
    J === K
    K ==> L
    K == text ==> L
    ~~~ M
```

```mermaid
---
title: Sample 5
---
flowchart LR
    a --> b & c --> d
```

```text:Sample 5
flowchart LR
    a --> b & c --> d
```

```mermaid
---
title: Sample 6
---
flowchart TB
    A & B--> C & D
```

```text:Sample 6
flowchart TB
    A & B--> C & D
```

```mermaid
---
title: Sample 7
---
flowchart LR
    A --o B
    B --x C
    D o--o E
    E <--> F
    F x--x G
```

```text:Sample 7
flowchart LR
    A --o B
    B --x C
    D o--o E
    E <--> F
    F x--x G
```

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

```text:Sample 8
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B --->|No| E[End]
```

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

```text:Sample 9
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```

# サブグラフ

```mermaid
---
title: Sample 10
---
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```

```text:Sample 10
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```

```mermaid
---
title: Sample 11
---
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
```

```text:Sample 11
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
```

# リンク

※QiitaもMiroも機能しません。

```mermaid
---
title:Sample 12
---
flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank
```

```text:Sample 12
flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank
```

# コメント

以下のように％％を記述することで、それに続く文字列をコメントにすることができます。

```mermaid
---
title: Sample 13
---
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```

```text:Sample 13
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```

# ノードのスタイル設定

```mermaid
---
title: Sample 14
---
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    C:::someclass --> D
    classDef someclass fill:#f96
    E:::foo & F:::bar --> G:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f
```

```text:Sample 14
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    C:::someclass --> D
    classDef someclass fill:#f96
    E:::foo & F:::bar --> G:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f
```