マーメイド#5 フローチャート②

ひとりマーメイド5日目
フローチャート②

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事では前回に引き続きフローチャートの記述について紹介します！

↓↓前回の記事はこちら

まーめいど！ふろーちゃーと！

前回の記事ではフローチャートのノードとエッジの記述方法について紹介しました！

引き続きフローチャートの記述について理解を深めていきましょう！！

エッジ記述の応用

連続するフローは1行でまとめて記述することができます。

mermaid

flowchart LR
    A --> B --> c

同一のノードから複数のエッジが出力される場合は&でまとめることができます。

mermaid

flowchart LR
    A --> B & C --> D

たくさんまとめても問題ないですよ！

mermaid

flowchart TB
    A & B & C --> D & E & F

ちなみにこれを従来通り記述すると以下のようになります。

mermaid

flowchart TB
    A --> D
    A --> E
    A --> F
    B --> D
    B --> E
    B --> F
    C --> D
    C --> E
    C --> F

&は偉大ですね！

双方向エッジ

エッジの両側に矢印を付けることもできます。

mermaid

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

エッジの長さ

エッジの長さを変更することができます。

mermaid

flowchart LR
    start --> A
    start ---> B
    start ----> C

どこまで伸ばせるのか試してみましたが、、、

mermaid

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

たぶんこれ無限ですね。

サブグラフ

フローチャートを領域で区切ってタイトルをつけることができます。

mermaid

flowchart LR
    A --> B
    subgraph one
        B --> C
    end
    C --> D

この黄色い部分がサブグラフです。

多重サブグラフも可能です。

mermaid

flowchart
    subgraph one
        subgraph two
            subgraph three
                subgraph four
                    subgraph five
                        A
                    end
                end
            end
        end
    end

サブグラフごとにフローの向きを変えることができます。
direction TB

mermaid

flowchart TB
    subgraph sub1
        direction BT
        subgraph sub3
            direction LR
            B --> C
        end
        
        sub3 --> D
    
        subgraph sub2
            direction RL
            E --> F
        end
        
        D --> sub2
    end
    A --> sub1 --> G

こんなん記述してたら頭おかしくなる

リンクの埋め込み

筆者がマーメイド史上一番感動した機能なんですが、ノードにURLを埋め込むことができます。

当アドカレの記事のリンクでも埋め込んでおきましょう。

mermaid

flowchart LR
    Day1 --> Day2 --> Day3
    click Day1 href "https://qiita.com/hirokiwa/items/841fcb749873f2847af7"
    click Day2 href "https://qiita.com/hirokiwa/items/37ccf5ad177b40aea682"
    click Day3 href "https://qiita.com/hirokiwa/items/fa819db950c89f68269e"

↑↑ノードをクリックすると本当に遷移します。

ノードのスタイリング

cssのノリでノードのデザインを自由に変えることができます。

mermaid

flowchart LR
    A(start) --> B(stop)
    style A fill:#00FF00,stroke:#FF22FF,stroke-width:10px
    style B fill:#bbf,stroke:#f66,stroke-width:4px,color:#006400,stroke-dasharray:6 4

簡単にダサいデザインを実装することができました。

styleパラメータは以下の通りです。

fill	ノードの背景色
stroke	ノードの縁の色
stroke-width	ノードの縁の太さ
color	文字の色
stroke-dasharray	縁の点線の長さの割合

class 定義

HTML/css のように class で定義したスタイルをノードに適用することもできます。
node_id:::class_name

mermaid

flowchart LR
    A(start):::node_A --> B(stop):::node_B

    classDef node_A fill:#00FF00,stroke:#FF22FF,stroke-width:10px;
    classDef node_B fill:#bbf,stroke:#f66,stroke-width:4px,color:#006400,stroke-dasharray:6 4;

まとめ

フローチャートの記法について一通りお伝えしました！

結構ボリュームあるでしょ？？？

↓↓次回の記事はこちら！！

参考