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>

在这里插入图片描述

Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

2025科研新风向！Top5文献阅读管理工具全测评

avatar GitCode 开源社区

文献管理神器大盘点：5款主流软件助你科研提效！

文献管理是科研的基础环节，选择一款合适的科研提效软件能让你的研究事半功倍。无论是EndNote的专业格式化、Zotero的免费灵活、Mendeley的云端协作、的中文支持，还是沁言学术的全流程AI辅助，每款工具都有独特优势，满足不同需求。尤其是沁言学术，凭借强大的文献管理功能、智能分类和写作支持，成为近年来新兴的科研效率利器，值得一试。科研之路漫漫，效率先行！建议每位大学生、研究生和科研人员根据自

avatar GitCode 开源社区
cover

2025学术利器揭晓！Top5文献管理工具助攻科研创新

avatar GitCode 开源社区