mermaid基本语法

在markdown中绘制UML图

工具: Mermaid, Typora

官网教程

Mermaid支持flowchart, sequence char, class diagram等

Typora已经集成了Mermaid直接插入代码块即可，其他markdown编辑器可能需要下载插件

基本语法

直接在typora中新建代码块，选择mermaid语言即可直接开始

Flowchart

flowchar由节点，节点间连边和连边上的箭头组成

graph LR
	id(default) --> 
	id1[This is the text in the box] & b{"{test} #9829;"} ---
	id2([a]) -.->
	id3((a)) -- text-->
	id4[[a]] -. txt .->
	id5[(a)] == txt ==> id

• graph LR: Left to Right，类似的还有TD/TB(Top down/Top bottom)

• id(context): id为节点唯一识别不能重复
• 括号内为显示内容，特数字符使用""

• 括号类型决定边框形状

• -->连线: 可以选择不同的连线类型，箭头类型或是添加文字

• 使用&组合节点来简单表达

subgraph

template

subgraph title
	graph definition
end

example

graph TB
    c1(t) -->a2
    style c1 fill: #f9f,stroke:#333,stroke-width:4px
    subgraph idx [one]
    	a1-->a2
    end
    subgraph two
    	b1-->b2
    end
    subgraph three
    	c1-->c2
    end

Style & Classes

graph LR
	id --> id2(txt)
	--> id3(tttt):::orangeNode
	style id fill:#f9f,stroke:#333,stroke-width:4px
	style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
	classDef orangeNode fill:#f96;

• style id fill: xxxxxx

• 使用classDef className fill:xxxx统一定义节点风格，调用时用:::连接在id(context)后

• classDef default将对所有节点应用

Sequence Diagram

template

```mermaid
sequenceDiagram
	participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

也可以直接sequence代码快，画出来简陋一点

```sequence
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```

    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Note over John, Alice: TTTTT

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    activate J
    J->>A: Great!
    deactivate J
    Note right of J: text

• alias: participant short-name as full-name，注意简写和全称别反了
• 箭头：和flowchar中的箭头差不多

• 生命周期：使用activate/deactivate激活/关闭，或者+/-（仅限mermaid）

• Notes: Note right of id: Text，除了right of还有over/left of等

Loop(仅mermaid)

template

loop Loop text
... statement ...
end

example

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

Class Diagram

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal: +String name
      Animal: +bite(Animal animal)
      class Animal{
      	+int age
      	+String gender
      	+isMammal() bool
      }
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

• 类定义和java基本一致，属性/方法可见性使用+/-/#/~表示
• 方法名后接()，返回值在方法名后

• 抽象方法/静态方法abstractMethod()*/staticMethod()$

• 属性和方法可以在类中定义也可以使用Class: attr添加

• 类间关系
  • <|--继承
  • *--组合
  • o--聚合
  • -->关联
  • --相关（实线）
  • ..>依赖
  • ..|>实现
  • ..虚线

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
<<interface>> classN
classO .. classP : Link(Dashed)

• 对应关系

classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

• 类标签<<interface>> Shape

classDiagram
%% 聪明 
	class Shape {
		<<interface>>
		draw()*
		put()$
	}

• markdown
• uml