프로그래밍 교육용 mermaid를 사용하여 시퀀스 다이어그램 작성

소개

아무래도! 생산 기술부의 엔지니어입니다. 프로그래밍 교육을 실시할 때 프로젝트의 개요를 그림에서 알 수 있으면 좋겠다고 생각하고 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]: ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기=비에 r네 r. 마르크 w w-me r 마이 d

마지막으로

평상시, 시퀀스도라든지 쓰지 않기 때문에 잘 모릅니다만, 그림으로 이해받기 위해서는 편리한 툴이었으므로, 앞으로도 제대로 공부해 이용해 가고 싶습니다.

참고

mermaid를 사용하여 Markdown에서 시퀀스 다이어그램 만들기