Mermaid修改流程图大小

最新推荐文章于 2025-01-07 11:44:37 发布

DexterLien

最新推荐文章于 2025-01-07 11:44:37 发布

阅读量1.2w

点赞数 4

分类专栏：前端开发

本文链接：https://blog.csdn.net/lpwmm/article/details/116073958

版权

前端开发专栏收录该内容

43 篇文章

订阅专栏

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" _blank
    </div>
    
    <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>