Qiita/note/zenn/GitHub/VSCodeのmermaidバージョン対応状況

:::note info
Qiita, note, zenn, GitHub, VS Code/Markdown Preview Enhancedのmermaidのバージョン対応状況
:::

私は、Qiita, note, VS Code/Markdown Preview Enhancedを日常的に、たまにGitHub, zennを使います。その時にmermaidの図が表示されたりエラーになったり困っていたので調べました。

# mermaidのバージョンと、ブログ・エディタの対応状況
|Ver.|主な変更|ブログ・エディタ対応状況|
|--:|---|---|
|11.6.0|**Radar Chart(radar-beta)**|**GitHub**|
|11.5.0|**animation of flowchart edges**<br/>**ER diagram/directions, hand drawn look**|**VS Code/Markdown Preview Enhanced**|
|11.4.0|**Kanban board(kanban)**<br/>Class diagram changes||
|11.3.0|**New Flowchart Shapes**|**Qiita**|
|11.1.1||**zenn**|
|11.1.0|**Architecture(architecture-beta)**<br/>iconify icons[^1]|
|11.0.0|customizable layout algorithms[^2]<br/>**visual styles**<br/>**Packet Diagram(packet-beta)**||
|10.9.0|**Katex**||
|10.8.0|**Block Diagram(block-beta)**||
|10.6.1||**note**|
|10.6.0|**xychart(xychart-beta)**|

[^1]: 諸設定が必要なようでまだ試せず c.f. https://mermaid.js.org/syntax/architecture.html#icons
[^2]: レイアウトがデフォルトから変更できるようだが、例示コードで何の変更もなく、まだよくわからず c.f. https://mermaid.js.org/intro/syntax-reference.html#layout-and-look

さすがGitHubですね。Qiitaも頑張って！

- mermaid履歴は
    - https://github.com/mermaid-js/mermaid/releases
- 各エディタのバージョン確認は(2025-04-27現在)

:::note info
mermaid対応ブログ・エディタでは下記でバージョンがわかります。
~~~
```mermaid
info
```
~~~
:::

# 図の例
以下最近のバージョンで追加された図

## Radar Chart(radar-beta)
- Qiitaではまだ描けなので画像貼り付け
~~~
```mermaid
---
title: "Grades"
---
radar-beta
  axis m["Math"], s["Science"], e["English"]
  axis h["History"], g["Geography"], a["Art"]
  curve a["Alice"]{85, 90, 80, 70, 75, 90}
  curve b["Bob"]{70, 75, 85, 80, 90, 85}

  max 100
  min 0
```
~~~

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/43222199-7e62-4a8d-9257-ccba464a796b.png" width=400 />

## animation of flowchart edges

~~~
```mermaid
flowchart LR
  A e1@==> B
  e1@{ animate: true }
```
~~~

- 画像で表現できないが、エッジの点線部分がAからBに流れ込むようなアニメーション表示になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/ce940bdf-8c4e-4007-b427-0afa2b10b08d.png)

## ER diagram/directions, hand drawn look
- 手書き風のhand drawn lookは前からありましたがER図に対応した模様
- これもQiitaはまだ未対応なので画像貼り付け

~~~
```mermaid
---
config:
  look: handDrawn
  theme: neutral
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
~~~

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/ce541a5b-1e19-4723-a521-3dba502db1a2.png" width=400/>


## Kanban board(kanban)
- Qiitaではまだ描けなので画像貼り付け
~~~
```mermaid
---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]
```
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/b36a9bdb-3d66-4f50-9b47-80b28cb54552.png)

## New Flowchart Shapes
- このような新しい形が色々表示できるようになった（他にもたくさんあります）

```mermaid
flowchart TB
    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}
```

## Architecture(architecture-beta)

~~~
```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```
~~~

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```



## Katex
- 数式が書けるやつですね
~~~
```mermaid
graph
    A["$$\int{f(x)dx}=F(x)+C$$"]
```
~~~

```mermaid
graph
    A["$$\int{f(x)dx}=F(x)+C$$"]
```

## visual styles
- 手書き風のhandDrawnなどの"look"が追加された
~~~
```mermaid
---
config:
  look: handDrawn
  theme: neutral
---
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
  B -->|No| D[Stop]
```
~~~

```mermaid
---
config:
  look: handDrawn
  theme: neutral
---
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
  B -->|No| D[Stop]
```

## Packet Diagtam(packet-beta)

~~~
```mermaid
---
title: "TCP Packet"
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```
~~~

```mermaid
---
title: "TCP Packet"
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```

## Block Diagram(block-beta)

~~~
```mermaid
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
```
~~~

```mermaid
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
```

## xychart(xychart-beta)

~~~
```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
~~~

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```