はじまり#

135ml

Mermaidをどう書くとどういうレイアウトになるのかどうかを今回の記事では観察してみたいと思います。

リサちゃん

かんさつかんさつぅ〜。目を皿にしてみました。

元のソース#

今回は、この記事で作成した概要図を作る際に使ったMermaidに関する記事になります。

エンドルフィン風呂に浸かる。

【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する（FirebaseでCORS対応）

Zenn、Qiita、ブログ、noteに投稿した記事のURLをREADM.mdに掲載するアプリを作成しました。このアプリを参考にして自分のGitHubのプロフィールページをカッコよくしてみましょう！GitHub ActionsやFirebaseを題材にしています。

www.endorphinbath.com

今回試すソースは、こちらになります。その下に実際に描画されるものも貼っています。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph Landmaster135;
4
      A[fab:fa-github GitHub Actions&nbsp]
5
      B(README.md)
6
    end
7
    subgraph dev environment;
8
      I[fa:fa-laptop MacBook &nbsp]
9
      J[fab:fa-docker Docker &nbsp]
10
    end
11
    subgraph Firebase;
12
      K[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
13
      L(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
14
    end
15
    subgraph target sites;
16
      D(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
17
      E(<img src='https://simpleicons.org/icons/qiita.svg' width='20' /><br>Qiita)
18
      F(<img src='https://simpleicons.org/icons/wordpress.svg' width='20' /><br>WordPress)
19
      M(far:fa-sticky-note<br>note)
20
    end
21
    subgraph feed-fetcher: app;
22
      C[fab:fa-node feed-fetch &nbsp]
23
    end
24
    A -->|Step2. Update| B
25
    A -->|Step1. Install app: GET| C
26
    C -->|Step1. Install app: Response| A
27
    C -->|GET| D
28
    D -->|Response <br>with feed|C
29
    C -->|GET| E
30
    E -->|Response <br>with feed|C
31
    C -->|GET| F
32
    F -->|Response <br>with feed|C
33
    C -->|GET| L
34
    L -->|Response <br>with feed|C
35
    L -->|GET| M
36
    M -->|Response <br>with feed|L
37
    C -->|clone| I
38
    I -->|build &<br> copy source| J
39
    J -->|test source| I
40
    I -->|Request<br>to deploy|K
41
    I -->|push| C
42
    K -->|deploy<br>functions| L
43
    style D fill:#ffffff,color:#000000,stroke:#000000,stroke-width:2
44
    style E fill:#ffffff,color:#000000,stroke:#000000,stroke-width:2
45
    style F fill:#ffffff,color:#000000,stroke:#000000,stroke-width:2
46
    style K fill:#ffffff,color:#000000,stroke:#000000,stroke-width:2
47
    style L fill:#ffffff,color:#000000,stroke:#000000,stroke-width:2
48
    style M fill:#ffffff,color:#000000,stroke:#000000,stroke-width:2
49
    linkStyle 0 stroke:#ee3,stroke-width:4px
50
    linkStyle 1 stroke:#ee3,stroke-width:4px
51
    linkStyle 2 stroke:#ee3,stroke-width:4px
52
    end
53
  style Overview fill:#3c4451

試験1#

このソースは、元のソースからdev environmentとLandmaster135を入れ替えました。この場合は、入れ替えた２つが上下で入れ替わりました。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph dev environment;
4
      I[fa:fa-laptop MacBook &nbsp]
5
      J[fab:fa-docker Docker &nbsp]
6
    end
7
    # ↑↓dev environmentとLandmaster135を入れ替えた。
8
    subgraph Landmaster135;
9
      A[fab:fa-github GitHub Actions&nbsp]
10
      B(README.md)
11
    end
12
    subgraph Firebase;
13
      K[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
14
      L(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
15
    end
16
    subgraph target sites;
17
      D(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
18
      E(<img src='https://simpleicons.org/icons/qiita.svg' width='20' /><br>Qiita)
19
      F(<img src='https://simpleicons.org/icons/wordpress.svg' width='20' /><br>WordPress)
20
      M(far:fa-sticky-note<br>note)
21
    end
22
    subgraph feed-fetcher: app;
23
      C[fab:fa-node feed-fetch &nbsp]
24
    end
25
    # 略...

試験2#

このソースは、元のソースからfeed-fetcher: appとtarget sitesを入れ替えました。この場合は、target sitesが下に移動しました。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph Landmaster135;
4
      A[fab:fa-github GitHub Actions&nbsp]
5
      B(README.md)
6
    end
7
    subgraph dev environment;
8
      I[fa:fa-laptop MacBook &nbsp]
9
      J[fab:fa-docker Docker &nbsp]
10
    end
11
    subgraph Firebase;
12
      K[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
13
      L(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
14
    end
15
    subgraph feed-fetcher: app;
16
      C[fab:fa-node feed-fetch &nbsp]
17
    end
18
    # ↑↓feed-fetcher: appとtarget sitesを入れ替えた。
19
    subgraph target sites;
20
      D(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
21
      E(<img src='https://simpleicons.org/icons/qiita.svg' width='20' /><br>Qiita)
22
      F(<img src='https://simpleicons.org/icons/wordpress.svg' width='20' /><br>WordPress)
23
      M(far:fa-sticky-note<br>note)
24
    end
25
    # 略...

試験3#

このソースは、元のソースからFirebaseとtarget sitesを入れ替えました。表示に変化はありません。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph Landmaster135;
4
      A[fab:fa-github GitHub Actions&nbsp]
5
      B(README.md)
6
    end
7
    subgraph dev environment;
8
      I[fa:fa-laptop MacBook &nbsp]
9
      J[fab:fa-docker Docker &nbsp]
10
    end
11
    subgraph target sites;
12
      D(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
13
      E(<img src='https://simpleicons.org/icons/qiita.svg' width='20' /><br>Qiita)
14
      F(<img src='https://simpleicons.org/icons/wordpress.svg' width='20' /><br>WordPress)
15
      M(far:fa-sticky-note<br>note)
16
    end
17
    # ↑↓ Firebaseとtarget sitesを入れ替えた。
18
    subgraph Firebase;
19
      K[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
20
      L(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
21
    end
22
    subgraph feed-fetcher: app;
23
      C[fab:fa-node feed-fetch &nbsp]
24
    end
25
    # 略...

試験4#

このソースは、元のソースからtarget sitesを一番上に持ってきました。これも描画内容は変わりません。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph target sites;
4
      D(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
5
      E(<img src='https://simpleicons.org/icons/qiita.svg' width='20' /><br>Qiita)
6
      F(<img src='https://simpleicons.org/icons/wordpress.svg' width='20' /><br>WordPress)
7
      M(far:fa-sticky-note<br>note)
8
    end
9
    subgraph Landmaster135;
10
      A[fab:fa-github GitHub Actions&nbsp]
11
      B(README.md)
12
    end
13
    subgraph dev environment;
14
      I[fa:fa-laptop MacBook &nbsp]
15
      J[fab:fa-docker Docker &nbsp]
16
    end
17
    subgraph Firebase;
18
      K[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
19
      L(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
20
    end
21
    subgraph feed-fetcher: app;
22
      C[fab:fa-node feed-fetch &nbsp]
23
    end
24
    # 略...

試験5#

このソースは、元のソースからコーディングするsubgraphを逆順にしたものです。Landmaster135が最下段に移動しています。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph feed-fetcher: app;
4
        C[fab:fa-node feed-fetch &nbsp]
5
    end
6
    subgraph target sites;
7
      D(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
8
      E(<img src='https://simpleicons.org/icons/qiita.svg' width='20' /><br>Qiita)
9
      F(<img src='https://simpleicons.org/icons/wordpress.svg' width='20' /><br>WordPress)
10
      M(far:fa-sticky-note<br>note)
11
    end
12
    subgraph Firebase;
13
      K[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
14
      L(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
15
    end
16
    subgraph dev environment;
17
      I[fa:fa-laptop MacBook &nbsp]
18
      J[fab:fa-docker Docker &nbsp]
19
    end
20
    subgraph Landmaster135;
21
      A[fab:fa-github GitHub Actions&nbsp]
22
      B(README.md)
23
    end

おさらい（描画ロジックの予測）#

ここまで観察してみて、graph LR;を描画する際の描画ロジックが以下のようになっていると予測しています。

上に書かれているsubgraphは、下に書かれているsubgraphの上に描画される。→ コード順のロジック
subgraph A、subgraph B、subgraph Cとsubgraph Dがある場合、BがAより下でも、それらの上に描画されているDとCについて、DがCより下であり、BがCのみ結合し、AがCとDに結合している場合、BはAよりも上に描画される。→ 結合してるgraphのコード順ロジック

結合してるgraphのコード順ロジックは、図示するとこんな感じです。

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph C;
4
      C1[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
5
      C2(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
6
    end
7
    subgraph D;
8
      D1[fa:fa-laptop MacBook &nbsp]
9
    end
10
    subgraph A;
11
      A1[fab:fa-node feed-fetch &nbsp]
12
      A2[fab:fa-node feed-fetch &nbsp]
13
    end
14
    subgraph B;
15
      B1(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
16
    end
17
    A1 --> C1
18
    B1 --> C1
19
    A1 --> D1
20
  end
21
  # 略...

しかし、以下のように書き換えると、描画が結合してるgraphのコード順ロジック」と違います。どうやら、結合する子要素の順番もロジックに入るようです。→ 子要素のコード順のロジック

1
graph LR;
2
  subgraph Overview[Overview];
3
    subgraph C;
4
      C1[<img src='https://simpleicons.org/icons/firebase.svg' width='20' /><br>Firebase-tools]
5
      C2(<img src='https://simpleicons.org/icons/googlecloud.svg' width='20' /><br>cloud functions)
6
    end
7
    subgraph D;
8
      D1[fa:fa-laptop MacBook &nbsp]
9
    end
10
    subgraph A;
11
      A1[fab:fa-node feed-fetch &nbsp]
12
      A2[fab:fa-node feed-fetch &nbsp]
13
    end
14
    subgraph B;
15
      B1(<img src='https://simpleicons.org/icons/zenn.svg' width='20' /><br>Zenn)
16
    end
17
    A1 --> C1
18
    B1 --> C2 // ここをC1→C2に書き換えた。
19
    A1 --> D1
20
  end
21
  # 略...

おしまい#

135ml

ある程度、挙動は掴めたかな？

リサちゃん

まあ、graph LR;の挙動は大体。目を皿にしてみました。

以上になります！

音楽

音楽

はじまり#

元のソース#

試験1#

試験2#

試験3#

試験4#

試験5#

おさらい（描画ロジックの予測）#

おしまい#

記事を共有

音楽

目次

音楽

音楽

【Markdown】mermaid.jsのコードを変えて描画の変化を観察してみた

はじまり#

元のソース#

試験1#

試験2#

試験3#

試験4#

試験5#

おさらい（描画ロジックの予測）#

おしまい#

記事を共有

音楽

目次