mermaid:流程图

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版		 前一修订版
mermaid:流程图 [2023/05/08 09:07] – [Mermaid流程图] Ian Goomermaid:流程图 [2024/04/16 13:54] (当前版本) – [节点形状] Ian Goo
行 33: 行 33:
 <WRAP half column> <WRAP half column>
 <code> <code>
-flowchart TD+graph TD
  %% 什么都不写的话，就是普通的方框节点  %% 什么都不写的话，就是普通的方框节点
- Start 
  %% 可以通过<节点id><修饰符>的方式来定义节点，修饰符的可选写法如下：  %% 可以通过<节点id><修饰符>的方式来定义节点，修饰符的可选写法如下：
 +        %% id[Text]代表普通的方框节点
  %% 圆括号()代表圆角方框节点  %% 圆括号()代表圆角方框节点
  %% ([])代表胶囊形节点  %% ([])代表胶囊形节点
行 49: 行 49:
  %% ((()))代表双圆形节点  %% ((()))代表双圆形节点
  %% [[]]和{{}}好像在DokuWiki中无法正常显示，所以右图没有展示出来。  %% [[]]和{{}}好像在DokuWiki中无法正常显示，所以右图没有展示出来。
- Start --> nd1(圆角方框节点) --> nd2([胶囊形节点]) --> nd3[[双边框节点]] --> nd4[(圆柱形节点)] --> nd5((圆形节点)) --> nd6>旗帜形节点] --> nd7{菱形节点} --> nd8{{六边形节点}} --> nd9[/平行四边形节点/]+ nd0[Start] --> nd1(圆角方框节点) --> nd2([胶囊形节点]) --> nd3[[双边框节点]] --> nd4[(圆柱形节点)] --> nd5((圆形节点)) --> nd6>旗帜形节点] --> nd7{菱形节点} --> nd8{{六边形节点}} --> nd9[/平行四边形节点/]
  nd8 --> nd10[\另一个平行四边形节点\]  nd8 --> nd10[\另一个平行四边形节点\]
  nd9 --> nd11[/正梯形节点\]  nd9 --> nd11[/正梯形节点\]
行 60: 行 60:
 <WRAP half column> <WRAP half column>
 <mermaid> <mermaid>
-flowchart TD +graph TD 
- Start --> nd1(圆角方框节点) --> nd2([胶囊形节点]) --> nd4[(圆柱形节点)] --> nd5((圆形节点)) --> nd6>旗帜形节点] --> nd7{菱形节点} --> nd9[/平行四边形节点/]+ nd0[Start] --> nd1(圆角方框节点) --> nd2([胶囊形节点]) --> nd4[(圆柱形节点)] --> nd5((圆形节点)) --> nd6>旗帜形节点] --> nd7{菱形节点} --> nd9[/平行四边形节点/]
  nd7 --> nd10[\另一个平行四边形节点\]  nd7 --> nd10[\另一个平行四边形节点\]
  nd9 --> nd11[/正梯形节点\]  nd9 --> nd11[/正梯形节点\]
行 139: 行 139:
 ===== 子图 ===== ===== 子图 =====
  
-===== 备注 =====+<WRAP group> 
 +<WRAP half column> 
 +<code> 
 +flowchart TD 
 + %% 使用subgraph <方向>来声明一个子图 
 + A --> B 
 + subgraph ONE 
 + B --> C 
 + end 
 + subgraph 2[TWO] 
 + B --> D -.-> E 
 + end 
 + %% 子图之间也可以添加连接 
 + ONE ===> 2 
 +</code> 
 +</WRAP> 
 + 
 +<WRAP half column> 
 +<mermaid> 
 +flowchart TD 
 + %% 使用subgraph <方向>来声明一个子图 
 + A --> B 
 + subgraph ONE 
 + B --> C 
 + end 
 + subgraph 2[TWO] 
 + B --> D -.-> E 
 + end 
 + %% 子图之间也可以添加连接 
 + ONE ===> 2 
 +</mermaid> 
 +</WRAP> 
 +</WRAP> 
 + 
 + 
 +===== 交互特性 ===== 
 + 
 +可以将单击事件绑定到节点，单击可以调用JavaScript实现特定的交互效果。 
 + 
 +但是需要注意，这一功能在DokuWiki与VSCode MPE当中都没什么用。 
 + 
 +<WRAP group> 
 +<WRAP half column> 
 +<code> 
 +flowchart LR 
 + A --> B --> C --> D 
 + click A callback "Hello World" 
 + click B "https://www.bing.com/" "Welcome to Bing" 
 + click C call callback() "Hello World" 
 + click D href "https://www.microsoft.com/" "Another Link" 
 +</code> 
 +</WRAP> 
 + 
 +<WRAP half column> 
 +<mermaid> 
 +flowchart LR 
 + A --> B --> C --> D 
 + click A callback "Hello World" 
 + click B "https://www.bing.com/" "Welcome to Bing" 
 + click C call callback() "Hello World" 
 + click D href "https://www.microsoft.com/" "Another Link" 
 +</mermaid> 
 +</WRAP> 
 +</WRAP>
  
  • mermaid/流程图.1683508063.txt.gz
  • 最后更改: 2023/05/08 09:07
  • 由 Ian Goo