用文字“畫出”時序圖：用 AI+Mermaid.js 解決互動過程中的問題

敏编程發表於2024-11-01
時序圖AIJS

什麼是時序圖

序列圖是一種用於描述物件之間在時間上的互動順序的圖表。
它可以展示物件之間是如何相互作用的，以及這些互動的順序。

什麼是Mermaid

Mermaid.js是一個開源專案，它允許你透過簡單的文字程式碼來繪製圖表。
無論你是開發者、學生還是普通使用者，它都能幫助你將複雜的資訊以直觀和易懂的方式呈現出來。

什麼是中文Mermaid

來自 min2k 的 中文Mermaid 在Mermaid的基礎上引入了AI技術，實現了自動生成時序圖的功能。
現在的使用者只需輸入內容，它就會自動將其轉化為時序圖。
這大大地提高了工作效率，省去了手寫程式碼的麻煩。

訪問 中文Mermaid 體驗 AI + Mermaid，提升你的效率，解決你的問題。

Mermaid時序圖的示例

文字程式碼

sequenceDiagram
  participant Client
  participant Server

  Client ->> Server:SYN
  note right of Client:傳送SYN請求
  Server -->> Client:SYN-ACK
  note right of Server:回覆SYN-ACK
  Client ->> Server:ACK
  note right of Client:確認SYN-ACK

  note over Client,Server:TCP連線已建立

  Client -->> Server:資料傳輸
  note right of Client:傳送資料
  Server -->> Client:資料傳輸
  note right of Server:接收資料

  Client -->> Server:FIN
  note right of Client:傳送FIN請求
  Server -->> Client:ACK
  note right of Server:確認FIN請求
  Server -->> Client:FIN
  note right of Server:傳送FIN請求
  Client -->> Server:ACK
  note right of Client:確認FIN請求

  note over Client,Server:TCP連線已關閉

由程式碼繪製出來的圖表

sequenceDiagram participant Client participant Server Client ->> Server:SYN note right of Client:傳送SYN請求 Server -->> Client:SYN-ACK note right of Server:回覆SYN-ACK Client ->> Server:ACK note right of Client:確認SYN-ACK note over Client,Server:TCP連線已建立 Client -->> Server:資料傳輸 note right of Client:傳送資料 Server -->> Client:資料傳輸 note right of Server:接收資料 Client -->> Server:FIN note right of Client:傳送FIN請求 Server -->> Client:ACK note right of Server:確認FIN請求 Server -->> Client:FIN note right of Server:傳送FIN請求 Client -->> Server:ACK note right of Client:確認FIN請求 note over Client,Server:TCP連線已關閉

上圖完整地展示了TCP協議在從連線到關閉的整個互動過程。

Mermaid時序圖的語法解釋

第1行是圖表型別，預設是：sequenceDiagram
接下來的 participant 定義了此次時序圖的參與者，分別有 Client 和 Server
接下來的 Client ->> Server:SYN，表示從 Client 繪製一條實心線到 Sever 上，其線的描述為：SYN
接下來的 note right of Client:傳送SYN請求，表示新增一個註解，放在 Client 的右側，內容為：傳送SYN請求
最後的 note over Client,Server:TCP連線已關閉，表示新增一個註解，橫跨在 Client 和 Sever 之上，內容為：TCP連線已關閉

以上就是Mermaid時序圖的常用語法。
若你不想手動編寫程式碼的話，可以使用 min2k 的 中文Mermaid 來自動生成時序圖。

相關文章