プログラミング教育用にmermaidを使ってシーケンス図を作成してみる

2393 ワード
mermaid Markdown VSCode GitLab Markdown テキストリンク

はじめに

どうも！生産技術部のエンジニアです。プログラミングの教育を実施するにあたって、プロジェクトの概要が図でわかればいいなと思い、mermaidを使ってシーケンス図を作成しました。mermaidを使うと以下の様な図がmarkdownで簡単に作成出来ます。作成したマークダウンと、VSCodeの便利な拡張機能について紹介します。

gitlabプロジェクトのREADME.mdに追加しましたので、よければご覧下さい。
作成したプロジェクト「lsg1050-controller-sample」

作成したマークダウン

-->などを使って書くと自動的にシーケンス図を生成してくれます。便利。

```mermaid
sequenceDiagram;

participant A as ユーザーアプリ
participant B as usbser.sys
participant C as LSG 1050ファームウェア

A->>B:ポートのOpenリクエスト
  alt ポートのOpenに成功
    B -->> A:ハンドル生成(hCom)
  else ポートのOpenに失敗
    B -->> A:INVALID_HANDLE_VALUE
  end

A->>B:通信の初期設定
  alt 設定に成功
    B -->> A:０
  else 設定に失敗
    B -->> A:０以外
  end

A->>B:コマンド送信リクエスト
B->> C:LSG 1050にコマンド送信
  alt 通信に成功
   C -->> B:成功
   B -->> A: ０    
  else 通信に失敗
    C -->> B: エラー
    B -->> A: ０以外
  end

A->>B:ハンドルのクローズ

VSCodeの拡張機能

[Markdown Preview Mermaid Support][link-mermaid]を使う事で、VSCodeのプレビュー画面にシーケンス図を表示出来るため、編集もスムーズに行えます。

[link-mermaid]:https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

最後に

普段、シーケンス図とか書かないのでよくわかりませんが、図で理解してもらうためには便利なツールでしたので、今後もしっかり勉強して利用していきたいです。

ご参考