markdown 制作流程图

流程图 flow

创建流程（元素）：tag=>type: content:>url
七种类别：
注意书写的时候一定要有冒号和后面文本间的空格

开始
st=>start: 开始
操作
op1=>operation: 操作、执行说明
条件
cond=>condition: 确认？
子程序
sub1=>subroutine: 子程序操作说明
用户输入或输出
io1=>inputoutput: 输入密码
结束
e=>end: 结束
并列行
pa=>parallel: 并列行

元素之间使用->来建立联系
condition 还可以指定条件cond(yes), 还可以指定方向cond(yes, right)
parallel有path需要指定，比如pa(path1, top)
内容之后使用:>url可以跳转位置(但是在CSDN中间跳转不了)

pa=>parallel:  Edgar:> https://blog.csdn.net/weixin_44676081[blank]
st=>start:  登录窗口
e1=>end: 一般登录界面
e2=>end: 管理员界面
io1=>inputoutput: 输入用户名密码
sub1=>subroutine: 数据库查询子类
cond=>condition: 是否有此用户
cond1=>condition: 是否有账号
cond2=>condition: 密码是否正确
op=>operation: 读入用户信息
io2=>inputoutput: 注册

cond3=>condition: 数据库中是否有该用户
cond4=>condition: 是否是管理员
cond5=>condition: 两次密码是否相同

pa(path1, left)->st->cond1(no, right)->io2->cond5(yes, left)->io1
cond5(no,below)->io2

cond1(yes)->io1->sub1->cond(yes, right)->cond2(yes)->op->cond4(no)->e1
cond(no)->io1
cond2(no)->io1
cond4(yes)->e2

更多访问 flowcharts

关系图 mermaid

A --> B A带箭头指向B
A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B 
A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
A -- 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

mermaid
graph TD
    id[带文本的矩形]
    id4(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id1{带文本的菱形}
    id2((带文本的圆形))

写了一个简单的应用如下

graph TB
	Database -.数据库操作.-> Login
	Database -.数据库操作.-> Sign_Up
	Database -.数据库操作.-> Admin
	Sign_Up -.-> Login
	Admin -.-> Login
	Main -.-> Login

更多可访问 mermaid-js

序列图 sequence

title:This is a diagram for my emotion  # 表示标题
participant A  # 序列图对象
participant B
participant C

note left of A: What is this   # 在A左边的note
note right of A: It is me 
A->B: A->B  # 实线实箭头， 但是在CSDN中无法显示
A-->C: A-->C  # 虚线实箭头
B->>A: B->>A  # 实线虚箭头
note right of B: You are so cool
note over C: This is a note over C

title:test
participant A
participant B
participant C

note left of A: What is this 
note right of A: It is me 
A->>B: A->>B
A-->>C: A-->>C
B->>A: B->>A
note right of B: You are so cool
note over C: This is a note over C

可访问 js-sequence获取更多信息