測試 mermaid.js 圖表

發表於 更新於 分類於 Disqus：

  測試一下 mermaid.js 的各種圖表。

流程圖

  參考自這篇教學文章。下圖是高度簡化的 OFDM 收發機的方塊圖。


flowchart LR
subgraph Tx
    A[info bits]-->B[QAM mapper]-->C[IDFT]
end
subgraph channel
    C-->D[H]
end
subgraph Rx
    D-->E[DFT]-->G[QAM demapper]-->H[bits]
end

  程式瑪如下(使用 Hexo 的 tag 外掛)：

1
2
3
4
5
6
7
8
9
10
11
{% mermaid flowchart LR %}
subgraph Tx
    A[info bits]-->B[mapper]-->C[IDFT]
end
subgraph channel
    C-->D[H]
end
subgraph Rx
    D-->E[DFT]-->G[demapper]-->H[bits]
end
{% endmermaid %}

方塊圖


block-beta
columns 3
Frontend space:1 Backend
space:3
Disk space:1 Database[("Database")]

Frontend --> Backend
Backend --> Database
Database[("Database")] --> Disk

  下圖是較完整的離散時間 OFDM 基頻收發機方塊圖。相較之下，flowchart 因為不能改變箭頭方向，不適合畫這種方塊圖。也許是圖表內容使然，沒有想像中好畫。


block-beta
columns 13
    tx_bits["info\nbits"] space:1 source_coder["source\ncoding"] space:1 channel_coder["channel\ncoding"] space:1 mapper space:1 S/P space:1 IDFT space:1 P/S
    space:13
    space:12 channel
    space:13
    space:10 AWGN space:1 awgnplus((" + "))
    space:13
    rx_bits["received\nbits"] space:1 source_decoder["source\ndecoding"]space:1 channel_decoder["channel\ndecoding"] space:1 demapper space:1 P2S["P/S"] space:1 dftneq["DFT &\nequal"] space:1 S2P["S/P"]
    tx_bits --> source_coder
    source_coder --> channel_coder
    channel_coder --> mapper
    mapper --> S/P
    S/P --> IDFT
    IDFT --> P/S
    P/S --> channel
    channel --> awgnplus
    awgnplus --> S2P
    S2P --> dftneq
    dftneq --> P2S
    P2S --> demapper
    demapper --> channel_decoder
    channel_decoder --> source_decoder
    source_decoder --> rx_bits
    AWGN --> awgnplus

  程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{% mermaid block-beta %}
columns 13
    tx_bits["info\nbits"] space:1 source_coder["source\ncoding"] space:1 channel_coder["channel\ncoding"] space:1 mapper space:1 S/P space:1 IDFT space:1 P/S
    space:13
    space:12 channel
    space:13
    space:10 AWGN space:1 awgnplus((" + "))
    space:13
    rx_bits["received\nbits"] space:1 source_decoder["source\ndecoding"]space:1 channel_decoder["channel\ndecoding"] space:1 demapper space:1 P2S["P/S"] space:1 dftneq["DFT &\nequal"] space:1 S2P["S/P"]
    tx_bits --> source_coder
    source_coder --> channel_coder
    channel_coder --> mapper
    mapper --> S/P
    S/P --> IDFT
    IDFT --> P/S
    P/S --> channel
    channel --> awgnplus
    awgnplus --> S2P
    S2P --> dftneq
    dftneq --> P2S
    P2S --> demapper
    demapper --> channel_decoder
    channel_decoder --> source_decoder
    source_decoder --> rx_bits
    AWGN --> awgnplus
{% endmermaid %}

圓餅圖



pie
    title Smartphone SoC Market Share - 2026 Q1
    "MediaTek" : 32
    "Samsung" : 7
    "Qualcomm" : 23
    "Apple" : 19
    "UNISOC" : 14
    "HiSilicon" : 4
    "others" : 1

  程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
pie
    title Smartphone SoC Market Share - 2026 Q1
    "MediaTek" : 32
    "Samsung" : 7
    "Qualcomm" : 23
    "Apple" : 19
    "UNISOC" : 14
    "HiSilicon" : 4
    "others" : 1
{% endmermaid %}

使用者旅程圖



journey
    title Goals
    section Master thesis
        Core concept: 3: Raymond, Jack
        Formulation: 2: Raymond
        Simulation: 1: Raymond
    section Life
        Girlfriend: 0: Raymond
        Weight: 0: Raymond

  以前從來沒有聽過這種圖表，可能是商業相關的分析比較用得到。程式碼如下(加上 css 直接設定高度，否則圖表底部會有一大片空白)：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="height: 320px; overflow: hidden;">
{% mermaid %}
journey
    title Goals
    section Master thesis
        Core concept: 3: Raymond, Jack
        Formulation: 2: Raymond
        Simulation: 1: Raymond
    section Life
        Girlfriend: 0: Raymond
        Weight: 0: Raymond
{% endmermaid %}
</div>

Git 樹狀圖


gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit

  程式碼如下，詳細用法請參考官方網站的教學：

1
2
3
4
5
6
7
8
9
10
11
12
{% mermaid gitGraph %}
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
{% endmermaid %}

狀態圖



---
title: Personal System
---
stateDiagram-v2
    direction LR
    [*] --> Sleep
    Sleep --> Eat: hungry
    Eat --> Sleep: full
    Eat --> Die: too old
    Die --> [*]

  程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
{% mermaid %}
---
title: Personal System
---
stateDiagram-v2
    direction LR
    [*] --> Sleep
    Sleep --> Eat: hungry
    Eat --> Sleep: full
    Eat --> Die: too old
    Die --> [*]
{% endmermaid %}