流程图之Mermaid

Mermaid是一个用 Markdown 风格语法来定义图表的 JavaScript 库，图形化的流程图语言。Mermaid中文网，Mermaid 在线编辑器 

AI大模型生成使用Mermaid格式，Mermaid支持流程图、序列图、类图、甘特图、状态图，饼图，思维导图等，文本书写在支持的工具（markdown/Typora、Obsidian、VS Code 插件、Notion（部分支持））以图形显示并支持渲染。

 一 流程图：

矩形（）；体育场形状：（【】）；圆形：（（））；圆柱形：【（）】；子程序节点【【】】；菱形{}；6边型：{{}}；平行四边形【\\】;【/梯形\】；【

\倒梯形/】；（（（双圈）））；

二 状态图：

状态以及一个状态如何通过转换更改为另一种状态来描述的。

状态描述：state "text" as s2或者s2:text.

状态转换及条件：s1 --> s2: A transition

【*】表示开始或结束。

定义一个选择分支：state if_state <<choice>>，后面对if_state节点进行状态分支。

便利贴：note right/left/top/bottom of State1 .....endnote

注释：%%

子流程：state xxx {}

样式的定义与应用：classDef badBadEvent fill:#f00,color:white      。样式的使用：状态：：：样式；class state1,state2 样式

三 时序图 

是一种交互图，显示进程如何彼此运行以及以什么顺序运行。

定义参与者或角色（不用方框表示而是用角色符号）：participant A   ；actor A

激活和停用角色：(de)activation A  .方法2：在消息箭头后附加 +/- 后缀：->>+或->>-。

注释：Note [ right of | 角色；Note [ over| 角色

换行符：<br/>

别名：participant A as Alice

创建和销售，决定参与者出现的时机：create participant B  /destroy B

分组：box Purple Alice & John

　　　　participant A

　　　　participant J

end

循环：

　　 loop Every minute

         ...

         end

分支替代：

　　alt A

　　　　... statementsA ...
　　else
　　　　... statements B...

　　opt   default

　　　　... statements default...
end

并行/平行线：

　　　　par [Action 1]

　　　　　　... statements ...
　　　　and [Action 2]
　　　　　　... statements ...
　　　　and [Action N]
　　　　　　... statements ...
　　　　end

临界区：

　　critical [Action that must be performed]

　　　　... statements ...

　　option [Circumstance A]

　　　　... statements ...

　　option [Circumstance B]

　　　　... statements ...

　　end

中断：

　　break [something happened]

　　　　... statements ...

　　end

 给流高亮背景色：COLOR  为rgb或rgba

　　rect COLOR  

　　　　... content ...

　　end

注释：%%

转义字符：如#9829代表♥ 

sequenceNumbers:

　　可以在时序图中的每个箭头上附加一个序列号.只需要在开头插入以下或者使用autonumber打开：

　　<script>

　　　　 mermaid.initialize({ sequence: { showSequenceNumbers: true } });

       </script>

角色菜单

　　参与者可以拥有包含指向外部页面的个性化链接的弹出菜单。操作方法：link <actor>: <link-label> @ <link-url>或者高级菜单语法links <actor>: <json-formatted link-name link-url pairs>

样式：

　　样式是通过定义许多 CSS 类（src/themes/sequence.scss 的文件）来完成的。

配置：

　　调整渲染时序图的边距，通过定义 mermaid.sequenceConfig 或通过 CLI （mermaidCLI ）使用带有配置的 json 文件来完成

 

信息：