Install Sequence Diagram
npm install -g sequence-diagram
DemoFirst
sequenceDiagram
title Search Book : Use Case
participant Customer
participant SearchPage as "Search Page"
participant SearchResultsPage as "Search Results Page"
participant Catalog
participant SearchResults as "Search Results"
Customer->>SearchPage: onSearch(author)
Note right of SearchPage: The system validates thenCustomer's search criteria.
alt author entered
SearchPage->>Catalog: searchByAuthor(author)
Catalog->>SearchResults: create()
SearchResults->>SearchResultsPage: display()
else author not entered
SearchPage->>SearchResultsPage: displayErrorMessage()
end
Note over SearchResultsPage: When the search is complete,nthe system displays the search results onnthe Search Results page.
Annotate
对象1->对象2: 操作1: 这是一个注释
对象2-->对象1: 操作2: 另一个注释
Message Styles
标记
描述
->
无箭头实线
-->
无箭头虚线
->>
有箭头的实线
-->>
有箭头的虚线
-x
终点为 x 的实线
--x
终点为 x 的虚线
Warp/NewLine
sequenceDiagram
a->>b:visit sitenwww.80aj.com
Use Actor
actor 用户 as 用户
对象1->用户: 请求登录
用户->对象2: 提供凭据
对象2-->用户: 认证结果
SetColor
对象1->对象2: 操作1 #FF5733
对象2-->对象1: 操作2 #3498DB