Mermaid 状態遷移図エディタ

表示されるもの

描画はされるが、ひとつの状態が 2 つのラベルに割れている

原因

状態 ID の中に全角空白が入っています。日本語入力のまま書いていると最も混入しやすい文字で、しかも画面上では半角空白と見分けが付きません。Mermaid はこれを拒否せず、残りを説明として扱うこともしません。語ごとに別々の箱を作ります。出力された state ID を読んで実測しました。`[*] --> 検収　待ち` は「検収」と「待ち」という二つの状態を生み、矢印の先に付くのは前者だけで、後者はどこにもつながらないまま残ります。全角空白でも半角空白でも結果は同じでした。説明の記法自体は存在しますが、コロンが要ります——`待ち: 検収の完了を待っている` の形であり、この誤りはまさにそれと取り違えられたものです。

対処

`state "表示名" as ID` で宣言し、以後は ID だけで参照します。

stateDiagram-v2
    [*] --> 検収　待ち
    検収　待ち --> 完了

stateDiagram-v2
    state "検収待ち" as 検収
    [*] --> 検収
    検収 --> 完了

表示されるもの

Parse error、末尾が: got 'INVALID'

原因

状態 ID にハイフンが入っています。`sashimodoshi-machi` のようなケバブケースはつい書きたくなりますが、ハイフンは遷移の矢印の始まりとして読まれます。

対処

ID は 1 語か下線でつなぎ、読ませたい文字は引用符付きの表示名に入れます。

stateDiagram-v2
    [*] --> shinsa-chu
    shinsa-chu --> 完了

stateDiagram-v2
    state "審査中" as shinsaChu
    [*] --> shinsaChu
    shinsaChu --> 完了

表示されるもの

合成状態の内側で Parse error

原因

`{` で開いた合成状態が閉じられていません。閉じ波括弧は単独の行に置く必要があります。

対処

ブロックを閉じます。

stateDiagram-v2
    [*] --> 外側
    state 外側 {
        [*] --> 内側

stateDiagram-v2
    [*] --> 外側
    state 外側 {
        [*] --> 内側
    }

表示されるもの

Lexical error on line N. Unrecognized text.

原因

並行領域の区切りのハイフンの数が違います。合成状態の内側で、単独行に、ちょうど 2 つです。3 つはまったく別のトークンになります。

対処

`--` を使います。

stateDiagram-v2
    state 両方 {
        [*] --> A
        ---
        [*] --> B
    }

stateDiagram-v2
    state 両方 {
        [*] --> A
        --
        [*] --> B
    }

表示されるもの

Parse error on line 1、末尾が: got 'ID'

原因

存在しないバージョン指定です。`stateDiagram` と `stateDiagram-v2` の 2 つしかなく、`-v3` は 1 行目で落ちます。

対処

`stateDiagram-v2` を使います。

stateDiagram-v3
    [*] --> 下書き

stateDiagram-v2
    [*] --> 下書き

表示されるもの

描画はされるが、分岐点がふつうの状態として描かれる

原因

`<<choice>>` の宣言を、それを使う遷移より後に書いています。Mermaid は最初に名前が出てきた時点でその状態を作るので、あとから付けたステレオタイプは、すでに作られたものを変えません。

対処

疑似状態は、それを参照する遷移より前に宣言します。

stateDiagram-v2
    [*] --> 与信判定
    与信判定 --> 自動承認
    与信判定 --> 人手審査
    state 与信判定 <<choice>>

stateDiagram-v2
    state 与信判定 <<choice>>
    [*] --> 与信判定
    与信判定 --> 自動承認
    与信判定 --> 人手審査