.mmd ファイルの開き方

表示されるもの

No diagram type detected matching given configuration for text: ```mermaid

原因

Markdown ファイルやチャットのメッセージから図をコピーしたときに、フェンスまで一緒に持ってきています。バッククォート 3 つは Markdown であって Mermaid ではないので、解析器は図の本体にたどり着けません。

対処

先頭の ```mermaid の行と、末尾の ``` の行を消します。ファイルは図のキーワードで始まる必要があります。

```mermaid
flowchart TD
    A[開始] --> B[終了]
```

flowchart TD
    A[開始] --> B[終了]

表示されるもの

Parse error、末尾が: got 'PS'

エラーの末尾: got 'PS'

原因

ノードラベルの中に半角の開き丸括弧があります。Mermaid では丸括弧は形の構文で、`A(文字)` は角丸ノードを意味します。そのため角括弧の中に裸で置かれた ( は、形の始まりとして読まれます。

対処

ラベル全体を二重引用符で囲みます。引用符の中はすべて文字として扱われます。全角の（）であれば囲まなくても通ります。

flowchart TD
    A[再試行 (最大 5 回)] --> B[完了]

flowchart TD
    A["再試行 (最大 5 回)"] --> B[完了]

表示されるもの

ノード ID を書いた行で Parse error

原因

ノード ID の中に全角空白が入っています。日本語入力のまま書いているとかなりの頻度で混入し、しかも画面上では半角空白と区別が付きません。ID は矢印の手前のトークンなので、空白がそこで打ち切ってしまい、置き場のない語がもう一つ残ります。

対処

ID は空白を含まない 1 語にして、読ませたい文字は角括弧のラベルに入れます。

flowchart TD
    認証　サービス --> DB[(ユーザー)]

flowchart TD
    auth[認証サービス] --> db[(ユーザー DB)]

表示されるもの

Parse error、末尾が: got 'STR'

エラーの末尾: got 'STR'

原因

ノードラベルの途中に半角の二重引用符があります。ラベルの解析器はそれを文字列の始まりとみなし、閉じ引用符を期待した位置でラベルの閉じ括弧に出くわします。

対処

ラベル全体を二重引用符で囲んだうえで、中では単引用符か、鉤括弧を使います。HTML 実体参照の #quot; でも書けます。

flowchart TD
    A[状態は "保留"] --> B[完了]

flowchart TD
    A["状態は '保留'"] --> B[完了]

表示されるもの

Parse error、末尾が: got 'end'

エラーの末尾: got 'end'

原因

`end` をノード ID に使っています。小文字の `end` はサブグラフを閉じるため、ノードがあるべき位置でブロックの終端が現れたことになります。流れの最後のノードに `end` と名付けるのは自然なので、よく起こります。

対処

先頭を大文字にするか、ノードに別の ID を付けてその語をラベルに入れます。どちらでも動きます。

flowchart TD
    A[開始] --> end

flowchart TD
    A[開始] --> End[終了]

表示されるもの

No diagram type detected matching given configuration for text: sequencediagram

原因

図のキーワードの綴りか、大文字小文字が違います。Mermaid のキーワードは大文字小文字を区別します。sequenceDiagram は通り、sequencediagram は通りません。stateDiagram-v2 や erDiagram も同じです。

対処

大文字小文字を直します。なお `graph` は `flowchart` の旧称として今も受け付けられるので、そこは原因ではありません。

sequencediagram
    利用者->>API: 注文を送信

sequenceDiagram
    利用者->>API: 注文を送信

表示されるもの

縦棒に挟まれた辺ラベルで Parse error

原因

辺ラベルの中に半角の丸括弧があります。`|…|` のラベルにもノードラベルと同じ制約があり、括弧はそこでも構文であって文字ではありません。

対処

辺ラベルも引用符で囲みます。

flowchart TD
    A -->|はい (常に)| B

flowchart TD
    A -->|"はい (常に)"| B

表示されるもの

ER 図で Parse error、末尾が: got 'NEWLINE'

エラーの末尾: got 'NEWLINE'

原因

関連にラベルがありません。フローチャートの辺と違って、ER の関連はコロンと動詞句が必須です。省略できないので、書かないと行が途中で終わったことになります。

対処

コロンと短い動詞句を足します。

erDiagram
    顧客 ||--o{ 注文

erDiagram
    顧客 ||--o{ 注文 : "発注する"

表示されるもの

図の最終行で Parse error が報告される

原因

開いたまま閉じていないブロックがあります。alt、opt、loop、par、subgraph はどれも対応する `end` を必要とします。Mermaid は入力を読み切った時点で失敗を報告するので、行番号は閉じ忘れたブロックではなくファイルの末尾を指します。

対処

ブロックを開いた数と `end` の数を数えます。エラー行が最終行のときは、ほぼ必ずこれが原因です。

sequenceDiagram
    利用者->>API: 注文を送信
    alt 在庫あり
        API-->>利用者: 受付完了

sequenceDiagram
    利用者->>API: 注文を送信
    alt 在庫あり
        API-->>利用者: 受付完了
    end

表示されるもの

Lexical error on line 1. Unrecognized text.

原因

図のキーワードの後ろの方向指定が不正です。フローチャートが受け付けるのは TB、TD、BT、LR、RL だけで、それ以外はノードを読む前の字句解析で失敗します。だからエラーは 1 行目を指します。

対処

5 つのうちどれかを使います。TD (上から下) と LR (左から右) でほぼ足ります。

flowchart XY
    A --> B

flowchart TD
    A --> B

表示されるもの

ここでは描画されるのに、GitLab や Confluence、古いツールでは描画されない

原因

バージョンの違いです。このビューアは Mermaid 11.12.2 で動いています。GitLab.com はバージョン 10 への対応を明記していますし、社内 Wiki は何年も遅れていることが珍しくありません。相手のバージョンより後に入った構文は、ここでは通り、向こうでは失敗します。

対処

相手のレンダラにバージョンを聞いてください。図の中に info という 1 語だけを書くと、Mermaid が自分のバージョン番号を描画します。リリースノートを読むより速いです。

info