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

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

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

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

テキストを含むノード

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

図形

Sample 2

flowchart LR
    id1[(Database)] -->
    id2((Circle)) -->
    id3(((Circle))) -->
    id4{Rhombus}

接続

Sample 3

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

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

Sample 5

flowchart LR
    a --> b & c --> d

Sample 6

flowchart TB
    A & B--> C & D

Sample 7

flowchart LR
    A --o B
    B --x C
    D o--o E
    E <--> F
    F x--x G

Sample 8

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

Sample 9

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

サブグラフ

Sample 10

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

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も機能しません。

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

コメント

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

Sample 13

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

ノードのスタイル設定

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