markdown中的UML图

最新推荐文章于 2024-02-05 18:36:25 发布

原创最新推荐文章于 2024-02-05 18:36:25 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

Mermaid 是一款创新工具，允许用户通过简单的文本语法创建复杂的文档图形，如流程图、时序图和甘特图等。它为文档中嵌入图形提供了便捷的方式，支持流程图、状态图、类图等多种图表类型。

部署运行你感兴趣的模型镜像

mermaid

官网地址：https://mermaid-js.github.io/mermaid/#/
线上解释器地址（点击跳转）

mermaid 美人鱼, 是一个类似 markdown，用文本语法来描述文档图形(流程图、时序图、甘特图)的工具，可以在文档中嵌入一段 mermaid 文本来生成 SVG 形式的图形

词汇表

词汇	释意	说明
mermaid	美人鱼	ˈmərˌmād
graph	图片
flowchart	流程图
Sequence	顺序
diagram	图标	ˈdīəˌɡram
calss diagram	类图
state	州、状态
state diagram	状态图
Entity Relationship Diagrams	实体关系图
User Journey Diagram	用户旅程图（用户体验链路图）
gantt	甘特图
pie	饼图

Flowchart_流程图

graph TB;
		id1((用户登录)) --> 验证是否有账号;
		用户登录 --> 验证是否存在;
		验证是否存在 --> 验证是否有账号;
		验证是否有账号 --> 我们下一次确定要去;
		我说了一定要去

Sequence diagram_顺序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram_甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d


gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

classDiagram_类图

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

pie chart_饼图

pie
    title X产品的关键要素
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

在这里插入图片描述

state diagram_状态图

stateDiagram
	[*] --> Still
	Still --> [*]

	Still --> Moving
	Moving --> Still
	Moving --> Crash
	Crash --> [*]

在这里插入图片描述

· ER diagram_实体关系图

erDiagram
        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
        CUSTOMER ||--o{ ORDER : places
        CUSTOMER ||--o{ INVOICE : "liable for"
        DELIVERY-ADDRESS ||--o{ ORDER : receives
        INVOICE ||--|{ ORDER : covers
        ORDER ||--|{ ORDER-ITEM : includes
        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
        PRODUCT ||--o{ ORDER-ITEM : "ordered in"

在这里插入图片描述

· Git graph

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

在这里插入图片描述

· user journey_体验图

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

3077389297)]

· user journey_体验图

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me