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

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 ER diagram/directions, hand drawn look	VS Code/Markdown Preview Enhanced
11.4.0	Kanban board(kanban) Class diagram changes
11.3.0	New Flowchart Shapes	Qiita
11.1.1		zenn
11.1.0	Architecture(architecture-beta) iconify icons1
11.0.0	customizable layout algorithms2 visual styles 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)

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

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

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
```

animation of flowchart edges

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

• 画像で表現できないが、エッジの点線部分がAからBに流れ込むようなアニメーション表示になっています。
  

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
```

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]
```

New Flowchart Shapes

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

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
```

Katex

• 数式が書けるやつですね

```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]
```

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)"
```

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
```

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]
```

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 ↩