markdown 中画图表

markdown 中画图表表格流程图时序图复现微信支付的时序图

表格

项目	价格	数量
计算机	$1600	5
手机	$12	12
管线	$1	234

流程图

start=>start: 开始
end=>end: 结束
画流程图=>operation: 画流程图:> http://www.baidu.com
会不会画=>condition: 会不会画
去学习=>operation: 去学习

start->画流程图->会不会画
会不会画(yes)->end
会不会画(no)->去学习->end

效果如下：

image.png

目前简书的 Markdown 渲染没有支持到支持图表

时序图

复现微信支付的时序图

title: 微信支付时序图
participant 微信支付用户 as user
participant 微信客户端 as wxc
participant 商户APP客户端 as appc
participant 商户后台系统 as apps
participant 微信支付系统 as wxs

user->appc:1.打开商户APP客户端()
appc->appc:2.选择商品下单()
appc->apps:3.请求生成支付订单()
apps->wxs:4.调用统一下单API()
wxs->wxs:生成预付单()
wxs-->>apps:5.返回预付单信息(prepay_id)
apps->apps:6.生成带签名的客户端支付信息()
apps-->>appc:7:返回信息(prepay_id,sign等)
user->appc:8:用户确认支付()
appc-->wxc:9:支付参数通过调用SDK调起微信支付()
wxc->wxs:10.发起支付请求()
wxs->wxs:验证支付参数, APP支付权限等()
wxs-->>wxc:11.返回需要支付授权()
user->wxc:12.用户确认支付, 输入密码()
wxc->wxs:13:提交支付授权()
wxs->wxs:验证授权, 完成支付交易()
wxs-->>apps:15.异步通知商户支付结果()
apps->apps:接收和保存支付通知()
apps->>wxs:16.返回告知已成功接收处理()
wxs-->wxc:14.返回支付结果, 发送微信消息提示()
wxc->appc:将支付状态通过商户APP已实现的回调接口执行回调()
appc->apps:后台查询实际支付结果()
apps->wxs:调用微信查询API查询支付结果()
wxs-->>apps:返回支付结果()
apps-->appc:返回支付结果
appc-->user:展示支付结果()
appc->appc:商户发货()

预览如下：

image.png