当前位置: 首页 > 工具软件 > UML Graph > 使用案例 >

UML在md中的写法与示意

韩嘉胜
2023-12-01

flowchart

流程图marmaid flowchart for markdown.

基本语法

声明一个新图和图布局的方向

  • TB-顶底
  • BT-底部顶部
  • RL-右左
  • LR-左右
  • TD-与TB相同
graph TD
    Start --> Stop
Start
Stop

节点和形状

可以在流程图中输入注释,解析器将忽略它们。注释必须自己一行,并且必须以%%(双百分号)开头。注释开始到下一个换行符之后的所有文本都将被视为注释,包括任何流语法。

可以将文本放在引号中,以呈现更麻烦的字符。(将文字内容变成字符串)

graph LR
    id
    id1[这是一个带文本的节点]
    id2(这是一个圆角节点)
	id3((一个圆形))
	id4{菱形}
	id5{{一个六边形}}
	id6>书签式节点]
	id7[/平行四边形/]
	id8[/这是一个梯形\]
    id8["/这(是一个[梯形])\"]
        
    %%这是一段注释
id
这是一个带文本的节点
这是一个圆角节点
一个圆形
菱形

节点之间的链接

节点可以通过链接/边缘连接。可以具有不同类型的链接,也可以将文本字符串附加到链接

连接上的文字
箭头上的文字
箭头上的字
虚线连接加文字
箭头连接
A
开放连接
连接文字
箭头上文字
箭头上的字
虚线连接
虚线连接加文字
粗线连接
B

子图的设置

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
three
two
one
c1
c2
b1
b2
a1
a2

sequenceDiagram

顺序图marmaid sequenceDiagram for markdown.

基本示意语法

  • 顺序图是一个交互图,它显示了进程如何相互操作以及以什么顺序进行操作。

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpZ2FSQH-1593085675554)(C:\Users\gulu\Desktop\mermaid.assets\image-20200625185359500.png)]

  • 吃饭的整个流程与顺序图

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFzV6ept-1593085675557)(C:\Users\gulu\Desktop\mermaid.assets\image-20200625185533967.png)]

sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

当前支持的六种箭头方式

类型描述
->实线无箭头
->虚线无箭头
->>带箭头的实线
->>带箭头的虚线
-X实线,末端带有叉号(异步)
- X虚线末端带有十字(异步)

激活框的运用

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
Alice John Hello John, how are you? Great! Alice John

说明框的运用

sequenceDiagram
    participant John
	participant Alice
    Note right of Alice: Text in note
    Note over Alice,John: A typical interaction

John Alice Text in note A typical interaction John Alice

循环

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end
Alice John Hello John, how are you? Great! loop [ Every minute ] Alice John

class diagram

“在软件工程中,统一建模语言(UML)中的类图是一种静态结构图,它通过显示系统的类,其属性,操作(或方法)以及对象之间的关系来描述系统的结构。 ”。维基百科

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模,以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素,应用程序中的交互以及要编程的类。

UML提供了表示类成员的机制,例如属性和方法,以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区:

  • 顶部的小节包含类的名称。它以粗体和居中打印,并且第一个字母大写。它还可能包含描述类性质的可选注释文本。
  • 中间隔间包含该类的属性。它们左对齐,第一个字母为小写。
  • 底部的隔离区包含类可以执行的操作。它们也左对齐,首字母为小写。

定义一个类

定义类有两种方法:

  • 使用关键字**类(**如)明确定义一个类class Animal。这定义了动物类
  • 通过它们之间的关系定义两个类Vehicle <|-- Car。这定义了两个类Vehicle和Car及其关系。
classDiagram
    class Animal
    Vehicle <|-- Car
classDiagram
    class Animal
    Vehicle <|-- Car

定义类的成员

UML提供了表示类成员的机制,例如属性和方法,以及有关它们的其他信息。

美人鱼根据是否存在括号 ()来区分属性和功能/方法。与一起()被视为函数/方法,而其他被视为属性。

定义类成员的方法有两种,无论使用哪种语法定义成员,输出都将相同。两种不同的方式是:

  • 使用**:(**冒号)后跟成员名称来关联一个类的成员,这有助于一次定义一个成员。例如:
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

 类似资料: