多实例UML时序图(sequence-diagram)互相关联

最新推荐文章于 2022-09-30 15:05:02 发布

zhangxiaobo0715

最新推荐文章于 2022-09-30 15:05:02 发布

阅读量6.1k

点赞数

分类专栏： UML 文章标签： UML 序列图超链接交互服务器控制

本文链接：https://blog.csdn.net/zhangxiaobo0715/article/details/112981025

版权

UML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 语法： ref : https://plantuml.com/zh/sequence-diagram
2. example :

actor        USER1
participant  APP1
database     SERVER
participant  APP2
actor        USER2

USER1 -> APP1 : input Hi
APP1-> SERVER : send Hi
SERVER-> APP2 : transmit Hi
APP2 -> USER2 : Notify to user 
USER2 -> APP2 : input Hi
APP2-> SERVER : transmit Hi
SERVER-> APP1 : send Hi
APP1 -> USER1 : Notify to user

3. 多个UML关联，跳转

3.1.加入 ref , 如

actor        USER1
participant  APP1
database     SERVER
participant  APP2
actor        USER2

USER1 -> APP1 : input Hi
APP1-> SERVER : send Hi
SERVER-> APP2 : transmit Hi
ref over SERVER
<color blue><size:18>__Server Control__</size></color>
end ref
APP2 -> USER2 : Notify to user 
USER2 -> APP2 : input Hi
APP2-> SERVER : transmit Hi
SERVER-> APP1 : send Hi
APP1 -> USER1 : Notify to user

3.2. Submit -> View as SVG -> 右键 -> 查看网页源码
源码如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="476px" preserveAspectRatio="none" style="width:444px;height:476px;" version="1.1" viewBox="0 0 444 476" width="444px" zoomAndPan="magnify"><defs><filter height="300%" id="fvehvu1izofvg" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="31" x2="31" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="141.5" x2="141.5" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="212.5" x2="212.5" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="307" x2="307" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="417.5" x2="417.5" y1="88.2969" y2="392.4453"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="46" x="5" y="84.9951">USER1</text><ellipse cx="31" cy="15" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M31,23 L31,50 M18,31 L44,31 M31,50 L18,65 M31,50 L44,65 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="46" x="5" y="404.4404">USER1</text><ellipse cx="31" cy="417.7422" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M31,425.7422 L31,452.7422 M18,433.7422 L44,433.7422 M31,452.7422 L18,467.7422 M31,452.7422 L44,467.7422 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="51" x="114.5" y="53"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="37" x="121.5" y="72.9951">APP1</text><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="51" x="114.5" y="391.4453"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="37" x="121.5" y="411.4404">APP1</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="57" x="181.5" y="84.9951">SERVER</text><path d="M195,36 C195,26 213,26 213,26 C213,26 231,26 231,36 L231,62 C231,72 213,72 213,72 C213,72 195,72 195,62 L195,36 " fill="#FEFECE" filter="url(#fvehvu1izofvg)" style="stroke:#000000;stroke-width:1.5;"/><path d="M195,36 C195,46 213,46 213,46 C213,46 231,46 231,36 " fill="none" style="stroke:#000000;stroke-width:1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="57" x="181.5" y="404.4404">SERVER</text><path d="M195,417.7422 C195,407.7422 213,407.7422 213,407.7422 C213,407.7422 231,407.7422 231,417.7422 L231,443.7422 C231,453.7422 213,453.7422 213,453.7422 C213,453.7422 195,453.7422 195,443.7422 L195,417.7422 " fill="#FEFECE" filter="url(#fvehvu1izofvg)" style="stroke:#000000;stroke-width:1.5;"/><path d="M195,417.7422 C195,427.7422 213,427.7422 213,427.7422 C213,427.7422 231,427.7422 231,417.7422 " fill="none" style="stroke:#000000;stroke-width:1.5;"/><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="50" x="280" y="53"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="36" x="287" y="72.9951">APP2</text><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="50" x="280" y="391.4453"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="36" x="287" y="411.4404">APP2</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="45" x="392.5" y="84.9951">USER2</text><ellipse cx="418" cy="15" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M418,23 L418,50 M405,31 L431,31 M418,50 L405,65 M418,50 L431,65 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="45" x="392.5" y="404.4404">USER2</text><ellipse cx="418" cy="417.7422" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M418,425.7422 L418,452.7422 M405,433.7422 L431,433.7422 M418,452.7422 L405,467.7422 M418,452.7422 L431,467.7422 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><polygon fill="#A80036" points="130,115.4297,140,119.4297,130,123.4297,134,119.4297" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="31" x2="136" y1="119.4297" y2="119.4297"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="48" x="38" y="114.3638">input Hi</text><polygon fill="#A80036" points="201,144.5625,211,148.5625,201,152.5625,205,148.5625" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="142" x2="207" y1="148.5625" y2="148.5625"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="47" x="149" y="143.4966">send Hi</text><polygon fill="#A80036" points="295,173.6953,305,177.6953,295,181.6953,299,177.6953" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="213" x2="301" y1="177.6953" y2="177.6953"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="70" x="220" y="172.6294">transmit Hi</text><rect fill="#FFFFFF" filter="url(#fvehvu1izofvg)" height="46.0859" style="stroke:#000000;stroke-width:2.0;" width="144" x="178.5" y="185.6953"/><polygon fill="#EEEEEE" points="178.5,185.6953,246.5,185.6953,246.5,192.6953,236.5,202.6953,178.5,202.6953,178.5,185.6953" style="stroke:#000000;stroke-width:2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="23" x="191.5" y="199.7622">ref</text><text fill="#0000FF" font-family="sans-serif" font-size="18" lengthAdjust="spacing" text-decoration="underline" textLength="136" x="184.5" y="223.4033">Server Control</text><polygon fill="#A80036" points="406,253.9141,416,257.9141,406,261.9141,410,257.9141" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="307" x2="412" y1="257.9141" y2="257.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="87" x="314" y="252.8481">Notify to user</text><polygon fill="#A80036" points="318,283.0469,308,287.0469,318,291.0469,314,287.0469" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="312" x2="417" y1="287.0469" y2="287.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="48" x="324" y="281.981">input Hi</text><polygon fill="#A80036" points="224,312.1797,214,316.1797,224,320.1797,220,316.1797" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="218" x2="306" y1="316.1797" y2="316.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="70" x="230" y="311.1138">transmit Hi</text><polygon fill="#A80036" points="153,341.3125,143,345.3125,153,349.3125,149,345.3125" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="147" x2="212" y1="345.3125" y2="345.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="47" x="159" y="340.2466">send Hi</text><polygon fill="#A80036" points="42,370.4453,32,374.4453,42,378.4453,38,374.4453" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="36" x2="141" y1="374.4453" y2="374.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="87" x="48" y="369.3794">Notify to user</text><!--MD5=[abe675953de1f4981b5a835d0413ac6c]
@startuml
actor        USER1
participant  APP1
database     SERVER
participant  APP2
actor        USER2

USER1 -> APP1 : input Hi
APP1-> SERVER : send Hi
SERVER-> APP2 : transmit Hi
ref over SERVER
<color blue><size:18>__Server Control__</size></color>
end ref
APP2 -> USER2 : Notify to user 
USER2 -> APP2 : input Hi
APP2-> SERVER : transmit Hi
SERVER-> APP1 : send Hi
APP1 -> USER1 : Notify to user
@enduml

PlantUML version 1.2021.01beta3(Unknown compile time)
(GPL source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Default Encoding: UTF-8
Language: en
Country: US
--></g></svg>

修改第一行里面的“Server Control” 改成 “<a href="Server_Control.html">Server Control</a>”
如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="476px" preserveAspectRatio="none" style="width:444px;height:476px;" version="1.1" viewBox="0 0 444 476" width="444px" zoomAndPan="magnify"><defs><filter height="300%" id="fvehvu1izofvg" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="31" x2="31" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="141.5" x2="141.5" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="212.5" x2="212.5" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="307" x2="307" y1="88.2969" y2="392.4453"/><line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="417.5" x2="417.5" y1="88.2969" y2="392.4453"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="46" x="5" y="84.9951">USER1</text><ellipse cx="31" cy="15" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M31,23 L31,50 M18,31 L44,31 M31,50 L18,65 M31,50 L44,65 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="46" x="5" y="404.4404">USER1</text><ellipse cx="31" cy="417.7422" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M31,425.7422 L31,452.7422 M18,433.7422 L44,433.7422 M31,452.7422 L18,467.7422 M31,452.7422 L44,467.7422 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="51" x="114.5" y="53"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="37" x="121.5" y="72.9951">APP1</text><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="51" x="114.5" y="391.4453"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="37" x="121.5" y="411.4404">APP1</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="57" x="181.5" y="84.9951">SERVER</text><path d="M195,36 C195,26 213,26 213,26 C213,26 231,26 231,36 L231,62 C231,72 213,72 213,72 C213,72 195,72 195,62 L195,36 " fill="#FEFECE" filter="url(#fvehvu1izofvg)" style="stroke:#000000;stroke-width:1.5;"/><path d="M195,36 C195,46 213,46 213,46 C213,46 231,46 231,36 " fill="none" style="stroke:#000000;stroke-width:1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="57" x="181.5" y="404.4404">SERVER</text><path d="M195,417.7422 C195,407.7422 213,407.7422 213,407.7422 C213,407.7422 231,407.7422 231,417.7422 L231,443.7422 C231,453.7422 213,453.7422 213,453.7422 C213,453.7422 195,453.7422 195,443.7422 L195,417.7422 " fill="#FEFECE" filter="url(#fvehvu1izofvg)" style="stroke:#000000;stroke-width:1.5;"/><path d="M195,417.7422 C195,427.7422 213,427.7422 213,427.7422 C213,427.7422 231,427.7422 231,417.7422 " fill="none" style="stroke:#000000;stroke-width:1.5;"/><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="50" x="280" y="53"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="36" x="287" y="72.9951">APP2</text><rect fill="#FEFECE" filter="url(#fvehvu1izofvg)" height="30.2969" style="stroke:#A80036;stroke-width:1.5;" width="50" x="280" y="391.4453"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="36" x="287" y="411.4404">APP2</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="45" x="392.5" y="84.9951">USER2</text><ellipse cx="418" cy="15" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M418,23 L418,50 M405,31 L431,31 M418,50 L405,65 M418,50 L431,65 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="45" x="392.5" y="404.4404">USER2</text><ellipse cx="418" cy="417.7422" fill="#FEFECE" filter="url(#fvehvu1izofvg)" rx="8" ry="8" style="stroke:#A80036;stroke-width:2.0;"/><path d="M418,425.7422 L418,452.7422 M405,433.7422 L431,433.7422 M418,452.7422 L405,467.7422 M418,452.7422 L431,467.7422 " fill="none" filter="url(#fvehvu1izofvg)" style="stroke:#A80036;stroke-width:2.0;"/><polygon fill="#A80036" points="130,115.4297,140,119.4297,130,123.4297,134,119.4297" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="31" x2="136" y1="119.4297" y2="119.4297"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="48" x="38" y="114.3638">input Hi</text><polygon fill="#A80036" points="201,144.5625,211,148.5625,201,152.5625,205,148.5625" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="142" x2="207" y1="148.5625" y2="148.5625"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="47" x="149" y="143.4966">send Hi</text><polygon fill="#A80036" points="295,173.6953,305,177.6953,295,181.6953,299,177.6953" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="213" x2="301" y1="177.6953" y2="177.6953"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="70" x="220" y="172.6294">transmit Hi</text><rect fill="#FFFFFF" filter="url(#fvehvu1izofvg)" height="46.0859" style="stroke:#000000;stroke-width:2.0;" width="144" x="178.5" y="185.6953"/><polygon fill="#EEEEEE" points="178.5,185.6953,246.5,185.6953,246.5,192.6953,236.5,202.6953,178.5,202.6953,178.5,185.6953" style="stroke:#000000;stroke-width:2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="23" x="191.5" y="199.7622">ref</text><text fill="#0000FF" font-family="sans-serif" font-size="18" lengthAdjust="spacing" text-decoration="underline" textLength="136" x="184.5" y="223.4033"><a href="Server_Control.html">Server Control</a></text><polygon fill="#A80036" points="406,253.9141,416,257.9141,406,261.9141,410,257.9141" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="307" x2="412" y1="257.9141" y2="257.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="87" x="314" y="252.8481">Notify to user</text><polygon fill="#A80036" points="318,283.0469,308,287.0469,318,291.0469,314,287.0469" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="312" x2="417" y1="287.0469" y2="287.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="48" x="324" y="281.981">input Hi</text><polygon fill="#A80036" points="224,312.1797,214,316.1797,224,320.1797,220,316.1797" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="218" x2="306" y1="316.1797" y2="316.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="70" x="230" y="311.1138">transmit Hi</text><polygon fill="#A80036" points="153,341.3125,143,345.3125,153,349.3125,149,345.3125" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="147" x2="212" y1="345.3125" y2="345.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="47" x="159" y="340.2466">send Hi</text><polygon fill="#A80036" points="42,370.4453,32,374.4453,42,378.4453,38,374.4453" style="stroke:#A80036;stroke-width:1.0;"/><line style="stroke:#A80036;stroke-width:1.0;" x1="36" x2="141" y1="374.4453" y2="374.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="87" x="48" y="369.3794">Notify to user</text><!--MD5=[abe675953de1f4981b5a835d0413ac6c]
@startuml
actor        USER1
participant  APP1
database     SERVER
participant  APP2
actor        USER2

USER1 -> APP1 : input Hi
APP1-> SERVER : send Hi
SERVER-> APP2 : transmit Hi
ref over SERVER
<color blue><size:18>__Server Control__</size></color>
end ref
APP2 -> USER2 : Notify to user 
USER2 -> APP2 : input Hi
APP2-> SERVER : transmit Hi
SERVER-> APP1 : send Hi
APP1 -> USER1 : Notify to user
@enduml

PlantUML version 1.2021.01beta3(Unknown compile time)
(GPL source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Default Encoding: UTF-8
Language: en
Country: US
--></g></svg>

存储为一个html,如 process.html

3.3. 在同等目录创建Server_Control.html，然后写server端的UML流程
参考：3.1 -> 3.2

然后打开 process.html，里面有个超链接，点击就可以跳到Server_Control.html里面，同样的Server_Control.html里面也可以做超链接...