markdown mermaid 画图

原创
2020/09/11 14:38
阅读数 449

markdown mermaid 画图

流程图 flow chart

时序图代码如下, 写到typroa下面即可, 查看源码是这种格式即可

```mermaid
flowchat
st=>start: 开始
op=>operation: 普通操作
cond=>condition: 结果是否成功?
op2=>operation: 操作2
op3=>operation: 操作3
sub1=>subroutine: 子程序1:>url
i1=>inputoutput: inputoutput1
e=>end: 结束
st->op->cond->
cond(yes)->op2->e
cond(no)->op3->sub1->i1->e
```
Created with Raphaël 2.2.0 开始 普通操作 结果是否成功? 操作2 结束 操作3 子程序1 inputoutput1 yes no

定义元素的语法

tag=>type: content:>url

tag就是元素名字,

type是这个元素的类型,有6中类型,分别为

  1. start # 开始
  2. end # 结束
  3. operation # 操作
  4. subroutine # 子程序
  5. condition # 条件
  6. inputoutput # 输入或产出
  7. content就是在框框中要写的内容,注意type后的冒号与文本之间一定要有个空格。
  8. url是一个连接,与框框中的文本相绑定

连接元素的语法

c2(yes)->io->e 
c2(no)->op2->e

时序图 sequence diagram

时序图代码如下, 写到typroa下面即可, 查看源码是这种格式即可

​```mermaid
sequenceDiagram
title: 提现流程图
client->> + web: 1. 跳转提现页面
web->> + server: 2. 发起提现
server -->> - web : 3. 返回提现结果
note over web : 提现结果处理
alt 提现失败
web ->> web : 4. 提现失败处理
note over web : 详细查看 提现失败处理时序图
else 提现成功
web ->> web : 5.通知成功
note over web : 详细查看 提现成功处理时序图
end
web -->>- client : 6.主动退出
​```
client web server 1. 跳转提现页面 2. 发起提现 3. 返回提现结果 提现结果处理 4. 提现失败处理 详细查看 提现失败处理时序图 5.通知成功 详细查看 提现成功处理时序图 alt [提现失败] [提现成功] 6.主动退出 client web server 提现流程图

标题

  • title
    图的标题
sequenceDiagram
title: 图的标题
participant participant
participant participant 图的标题

参与者

  • participant
    可以通过这个来启用别名
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1->p2: 链接
participant1 participant2 链接 participant1 participant2 图的标题

备注方向控制

  • left of
    生命线的左边

  • right of
    生命线的右边

  • over
    生命线中间

sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
note left of  p1: left
note right of p2: right
note over p2 : over
p1->p2: 链接
participant1 participant2 left right over 链接 participant1 participant2 图的标题

循环

sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
note over p1: 准备循环
loop 条件
note over p2: notev2
note over p1: notev2
end
participant1 participant2 准备循环 notev2 notev2 loop [条件] participant1 participant2 图的标题

箭头

  1. -> 表示实线
  2. --> 表示虚线
  3. ->> 表示实线箭头
  4. -->> 表示虚线箭头
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1 -> p2: 实线
p1-->p2: 虚线
p1 ->> p2: 实线箭头
p1-->>p2: 虚线箭头
participant1 participant2 实线 虚线 实线箭头 虚线箭头 participant1 participant2 图的标题

激活块

+ 开始激活块
- 结束激活块
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1 -> +p2: 实线
p2-->> -p1: 返回
participant1 participant2 实线 返回 participant1 participant2 图的标题

类图 class diagram

用的比较少, 毕竟IDEA有直接生成的

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

状态图 state diagram

[*] 标识开始/结束

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

甘特图 gantt diagram

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2020-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2020-01-12  , 12d
    another task      : 24d
            
Mon 06 Mon 13 Mon 20 Mon 27 Mon 03 Mon 10 Mon 17 A task Another task Task in sec another task Section Another A Gantt Diagram

饼图 pie diagram

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
79% 17% 3% Pets adopted by volunteers Dogs Cats Rats

ER图

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"
            
CUSTOMER DELIVERY-ADDRESS ORDER INVOICE ORDER-ITEM PRODUCT-CATEGORY PRODUCT has places liable for receives covers includes contains ordered in

资料

基于mermaid的时序图,流程图, 甘特图

mermaid时序图–知乎

mermaid在线图

本文同步分享在 博客“suveng”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部