mermaid

像以下的流程图的预览器，使用的是github.com/bytedance/b…
而底层的流程图，使用的是
github.com/mermaid-js/… 其对于流程图的解析，使用的是d3来绘制，d3-dagre来进行布局，dagre布局，是对有层次图的一种布局，详细算法，可以查看： codesandbox.io/s/d3-dagre-… 而目前的darge布局，基本都使用d3，对于g6的，还没有去看，有时间看下g6 g6的dagre布局：simplejason.com/posts/dagre… d3资源：github.com/d3/d3/blob/… 拖动：juejin.cn/post/706125… zoom：？ memarid：github.com/mermaid-js/… dagre： juejin.cn/post/707793… 对于代码展示器，使用的技术是

graph TD
0-- 打发发达jkjkkjkjkjkkjkj --> 1
1-- 打发发达 --> 2
2-- 打发发达 --> 3
3-- 打发发达 --> 4
4-- 打发发达 --> 5
5-- 打发发达 --> 3
3-- 打发发达 --> 6
6-- 打发发达 --> 3
3-- 打发发达 --> 7
7-- 打发发达 --> 8
8-- 打发发达 --> 9
9-- 打发发达 --> 1
4-- 打发发达 --> 7
8-- 打发发达 --> 4
5-- 打发发达 --> 6
6-- 打发发达 --> 5
9-- 打发发达 --> 4
5-- 打发发达 --> 7
7-- 打发发达 --> 5
9-- 打发发达 --> 1000

graph TD
创建component --> jenkins部署component
jenkins部署component -- 部署成功 --> 推送版本到microservice后台
推送版本到microservice后台
创建app --> 创建appDeployRequest
创建appDeployRequest --> 选择本次关联的component
选择本次关联的component -- 创建成功 --> 推送至对应环境