Mermaid修改流程图大小
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进行定义. 下面是完整的前端代码
<html>
<head><style>svg[id^="mermaid-"] {min-width: 900px;min-height: 600px;}.mermaid {width: 900px;margin: auto;}style>
head>
<body><div class="mermaid">graph TD受理登记 --> 指定处理方式指定处理方式-->转交处理指定处理方式-->归档指定处理方式-->完结click 完结 href "http://alian.fun" _blankdiv><script src="js/mermaid.min.js">script><script>let config = {startOnLoad: true,theme: 'neutral',flowchart: {useMaxWidth: true,htmlLabels: true,curve: 'Basis'},securityLevel: 'loose'}mermaid.initialize(config)script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！