mermaidによるステートマシン設計

ステートマシン描きたい. <a name='more'></a> FPGAを設計するときにステートマシンを描くことはよくあるものの, 自分の中でツールや描き方が確立できていない. ということでmermaid[[1](#mermaid)]を使ってステートマシンを描いてみる. mermaidはテキスト形式で図を描くことのできるツール. Typora[[2](typora_qiita)]やMarkdown Preview Enhanced(MPE)[[3](#mpe)]などで描画できる(ちなみにMPEでは`mermaid.css`に`"theme": "default"`を追記しないと残念なことになる). 詳しくは参考を見ていただきたい. ## テンプレート まずは簡単な例で示す. ```text graph TB Idle((Idle)) --> |Condition A| StateA Idle --> |Condition B| StateB StateA(StateA) --> StateC StateC --> StateB StateB --> TurnAround TurnAround(TurnAround) --> Idle ```

graph TB Idle((Idle)) --> |Condition A| StateA Idle --> |Condition B| StateB StateA(StateA) --> StateC StateC --> StateB StateB --> TurnAround TurnAround(TurnAround) --> Idle

上の例では**初期状態のステート**(Idle)を丸で示している. また**遷移条件を持たないステート**つまり次のクロックサイクルで別のステートに遷移するもの(StateA, TurnAround)を角丸の四角形. **遷移条件を持つステート**(StateB, StateC)を四角で示した. また通常の遷移条件は記載せず, ステート遷移が分岐する場合に条件(Condition A, Condition B)を記載した. ## I${\sf {}^2}$Cバスアクセスのステートマシン より具体的な例としてI${\sf {}^2}$Cバス(I2Cと書くとI${\sf {}^2}$C警察がやってくる)にアクセスするステートマシンを描いてみる. バスアクセスは以下のライトとリードを想定する. #### ライトアクセス 1. スタートコンディション 2. デバイスアドレス 3. レジスタアドレス 4. データ書き込み 5. ストップコンディション #### リードアクセス 1. スタートコンディション 2. デバイスアドレス 3. レジスタアドレス 4. リスタートコンディション 5. デバイスアドレス 6. データ読み出し 7. ストップコンディション よくあるI${\sf {}^2}$Cバスアクセスはこんなもんだと思う. M24のE2Pとかこんな感じ. 描いたのが以下の通り. リスタートコンディションをスタートコンディションへの折返しで表現している(そもそもリスタートコンディションというものはない). ```text graph TB Idle((Idle)) --> StartCondition StartCondition --> DeviceAddress DeviceAddress --> |Register write| RegisterAddress RegisterAddress --> WriteData WriteData --> StopCondition DeviceAddress --> |Read| ReadData ReadData --> StopCondition RegisterAddress --> StartCondition StopCondition --> TurnAround TurnAround(TurnAround) --> Idle ```

graph TB Idle((Idle)) --> StartCondition StartCondition --> DeviceAddress DeviceAddress --> |Register write| RegisterAddress RegisterAddress --> WriteData WriteData --> StopCondition DeviceAddress --> |Read| ReadData ReadData --> StopCondition RegisterAddress --> StartCondition StopCondition --> TurnAround TurnAround(TurnAround) --> Idle

ここで注意したいのが, 記述の順序によって図の位置が変化するということである. `DeviceAddress --> |Read| ReadData`の行を上にもっていくと下のように図が変化する. ```text graph TB Idle((Idle)) --> StartCondition StartCondition --> DeviceAddress DeviceAddress --> |Register write| RegisterAddress RegisterAddress --> WriteData WriteData --> StopCondition DeviceAddress --> |Read| ReadData ReadData --> StopCondition RegisterAddress --> StartCondition StopCondition --> TurnAround TurnAround(TurnAround) --> Idle ```

graph TB Idle((Idle)) --> StartCondition StartCondition --> DeviceAddress WriteData --> StopCondition DeviceAddress --> |Read| ReadData DeviceAddress --> |Register write| RegisterAddress RegisterAddress --> WriteData ReadData --> StopCondition RegisterAddress --> StartCondition StopCondition --> TurnAround TurnAround(TurnAround) --> Idle

この例では分岐が少ないためあまり変化しないが, 分岐が増えて横に広がると順序によってはめちゃめちゃになるので注意してほしい. すばやくステートマシンをスケッチできるのでざっくり考えて頭の中を整理するのには使えそう. ## 参考 [1]<a name="mermaid"></a> [Flowcharts - mermaid](https://mermaidjs.github.io/#/flowchart?id=flowcharts-basic-syntax) [2]<a name="typora_qiita"></a> [Typoraでシーケンス図、フローチャート、ガントチャートを描くための書き方まとめ - Qiita](https://qiita.com/snova301/items/037ebb66658b181e659c) [3]<a name="mpe"></a> [Diagrams - Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/diagrams)