Gayhub上发现个web绘制流程图的宝藏repo: Mermaid

先存一下Live Editor: https://mermaid-js.github.io/mermaid-live-editor

具体的使用方法看官方文档就行了:

https://mermaid-js.github.io/mermaid/

也可以参考平头某的这篇文章总结的不错:

https://blog.csdn.net/fenghuizhidao/article/details/79440583

画好流程图之后想要调整一下图的大小, 结果官方文档中只有一个useMaxWidth的配置项, 说的是能自适应宽度高度到100%, 不过试了下没效果, 在外面加一层固定大小的div也不行, 最后还是直接重写css样式解决了. 需要注意的是要同时对svg[id^="mermaid-"]和.mermaid进行定义. 下面是完整的前端代码