markdown mermaid 画图
时间:2022-07-25
本文章向大家介绍markdown mermaid 画图,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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
```
定义元素的语法
tag=>type: content:>url
tag就是元素名字,
type是这个元素的类型,有6中类型,分别为
- start # 开始
- end # 结束
- operation # 操作
- subroutine # 子程序
- condition # 条件
- inputoutput # 输入或产出
- content就是在框框中要写的内容,注意type后的冒号与文本之间一定要有个空格。
- 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.主动退出
```
标题
- title 图的标题
sequenceDiagram
title: 图的标题
participant participant
参与者
- participant 可以通过这个来启用别名
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1->p2: 链接
备注方向控制
- 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: 链接
循环
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
note over p1: 准备循环
loop 条件
note over p2: notev2
note over p1: notev2
end
箭头
-
->
表示实线 -
-->
表示虚线 -
->>
表示实线箭头 -
-->>
表示虚线箭头
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1 -> p2: 实线
p1-->p2: 虚线
p1 ->> p2: 实线箭头
p1-->>p2: 虚线箭头
激活块
+ 开始激活块
- 结束激活块
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1 -> +p2: 实线
p2-->> -p1: 返回
类图 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()
}
状态图 state diagram
[*]
标识开始/结束
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
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
饼图 pie diagram
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
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"
资料
- 厚土Go学习笔记 | 02. 打印当前时间time.Now()时不我待
- 厚土Go学习笔记 | 01. Hello World开篇
- Golang精编100题
- IntelliJ idea配置Go开发环境
- 仰望PHPSHE1.5漏洞
- Golang负载均衡
- 构建Docker镜像两种方式的比较-Dockerfile方式和S2I方式
- Golang单例模式
- 2018,我要Axublog。
- 厚土Go学习笔记 | 16. go语言有指针 没有指针运算
- 嗤!给你来点fiyocms漏洞喷雾
- 厚土Go学习笔记 | 15. defer语句延迟函数的执行
- Nodejs学习笔记(九)--- 与Redis的交互(mranney/node_redis)入门
- Nodejs学习笔记(十)--- 与MongoDB的交互(mongodb/node-mongodb-native)、MongoDB入门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C#中的信号量---Semaphore
- C# excel文件导入导出
- 「变更管理」成功的变更管理—Kotter的8步变更模型
- C# 获取txt文件邮箱号码并去重复
- C#中Enum用法小结
- Python爬虫基础总结
- C# TASK使用实例
- [打造自己的监控系统之执行Oracle命令]获取Oracle执行次数等于一的语句(硬解析状况)
- [打造自己的监控系统之执行Oracle命令]检查未绑定变量的语句(硬解析状况)
- httpclient使用HTTP代理实践
- 使用Python利用微信企业号发送报警信息
- C# Task.Delay() 和 Thread.Sleep() 区别
- Csharp实例:武汉智能安检闸机数据接收和解析
- [周末往期回顾]Oracle基本参数(LOG_ARCHIVE_DEST_n)
- [周末往期回顾]Oracle基本参数(SGA_TARGET)