メインコンテンツまでスキップ

Flowchart

flowchatについて学習します

flowchartはシステム、アルゴリズム、タスクなどの手順を図形や記号を用いて視覚的に表現するものです

また、アクターとエンティティに所属するアクトを結び付けて表示する、という観点からユースケース図の作図にも用いられます

Node​

Nodeは図形を表す

宣言​

デフォルトは四角形

ここで記述された名前が識別子となり、Nodeの連結などに用いられる

```mermaid
---
title: Node
---
flowchart LR
    id
```

テキスト​

Nodeに対してテキストを付けられる

このとき、日本語・記号でレンダリングエラーが起きる可能性があるため、ダブルクォーテーションで囲うことを推奨する

```mermaid
---
title: Text
---
flowchart LR
    id["Text"]
```

図形の種類​

いくつかの図形の種類があり、必要に応じてかき分ける

```mermaid
flowchart
    id1(This is A node with round edges)
    id2([This is A stadium-shaped node])
    id3[[This is A node in a subroutine shape]]
    id4[(This is A node in a cylindrical shape)]
    id5((This is A node in the form of a circle))
    id6>This is A node in an asymmetric shape]
    id7{This is A node (rhombus)}
    id8{{This is A hexagon node}}
    id9[/This is the Parallelogram/]
    id10[\This is the Parallelogram alt\]
    id11[/This is the Trapezoid\]
    id12[\This is the Trapezoid alt/]
    id13(((This is the Double circle)))
```

Node同士をつなぐことができる

線にもいくつかの種類がある

flowchart LR
    A-->B
flowchart LR
    A --- B

Text on links​

flowchart LR
    A-- This is the text! ---B

or

flowchart LR
    A---|This is the text|B

A link with arrow head and text​

flowchart LR
    A-->|text|B

or

flowchart LR
    A-- text -->B
flowchart LR
   A-.->B;

Dotted link with text​

flowchart LR
   A-. text .-> B
flowchart LR
   A ==> B

Thick link with text​

flowchart LR
   A == text ==> B

Subgraph​

subgraph title
        graph definition
    end

という形で領域を区切ることができる

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

Sample​

flowcart​

```mermaid
---
title: うるう年を判定するアルゴリズム
---
graph TB
    s["西暦を入力"]
    j1{{"4で割り切れるか"}}
    j2{{"100で割り切れるか"}}
    j3{{"400で割り切れるか"}}
    r1[うるう年でない]
    r2[うるう年である]
    r3[うるう年でない]
    r4[うるう年である]

    s-->j1
    j1-->|yes|j2
    j1-->|no|r1
    j2-->|yes|j3
    j2-->|no|r2
    j3-->|yes|r3
    j3-->|no|r4
```

usecase​

```mermaid
---
title: オンラインショッピング
---
graph LR
    User[ユーザー]
    subgraph App [アプリ]
        direction TB
        App.search["商品を検索"]
        App.add["カートに追加"]
        App.check["支払処理"]
    end
    subgraph Payment ["金融機関"]
        Payment.transfer["資金転送"]
    end
    subgraph Transport [運送]
        Transport.transfer["荷物配送"]
    end
        User-->App.search
        User-->App.add
        User-->App.check
        App.check-->Payment.transfer
        App.check-->Transport.transfer
```

Reference​