首頁 >web前端 >js教程 >Markdown中的序列圖的詳解(圖文)

Markdown中的序列圖的詳解(圖文)

不言
不言原創
2018-09-07 17:52:162909瀏覽

這篇文章帶給大家的內容是關於Markdown中的序列圖的詳解(圖文),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

在眾多的markdown編輯器中,作者使用Typora, 它具有實時渲染可見與編輯的特點, 並且還支持自定義渲染效果(只需要更改CSS文件即可). 該軟體的流程圖由js-sequence支援, 序列圖的程式碼段包裹在markdown格式的程式碼區塊中, 只需要更改對應的標記即可. 例如:

"sequence
title: 序列图sequence(示例)
participant A
participant B
participant C
note left of A: A左侧说明
note over B: 覆盖B的说明
note right of C: C右侧说明
A->A:自己到自己
A->B:实线实箭头
A-->C:虚线实箭头
B->>C:实线虚箭头
B-->>A:虚线虚箭头"

這段程式碼渲染出來的流程圖如下:

Markdown中的序列圖的詳解(圖文)


其主要有以下幾個關鍵字:

  1. title, 定義該序列圖的標題

  2. participant, 定義時序圖中的物件

  3. note, 定義對時序圖中的部分說明

  4. #{actor}, 表示時序圖中的具體物件(名稱自訂)

其中針對note的方位控制主要包含以下幾種關鍵字:

  1. left of, 表示目前物件的左側

  2. right of, 表示目前物件的右側

  1. # #over, 表示覆蓋在目前物件(們)的上面
  2. 其中針對{actor}的箭頭分為以下幾種:
  3. ->  表示實線實箭頭

–> 表示虛線實箭頭


->> 表示實線虛箭頭Markdown中的序列圖的詳解(圖文)

–>> 表示虛線虛箭頭

Markdown中的序列圖的詳解(圖文)#另外,時序圖中的物件定義語句可以忽略,note語句也辨識換行符,如下:

"sequence
颜回->孔子: 吃饭了没?note right of 孔子: 孔子思考\n如何回答
孔子-->颜回: 吃过了。你咧?颜回->>孔子: 吃过了,吃过了!
"


本篇文章帶給大家的內容是關於Markdown中的序列圖的詳解(圖文) ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

總結來說js-sequence模組對sequence程式碼的語法解析執行過程如下圖(圖來自Railroad Diagram Generator):

########相關推薦:# ########詳解PHP序列化反序列化的方法,詳解php序列化反################markdown基本語法與使用方法######

以上是Markdown中的序列圖的詳解(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn