周梦康 发表于 2021-08-08 866 次浏览

开门见山 github 地址:https://github.com/mermaid-js/mermaid

前几日因为项目系统比较复杂,涉及的后端服务、前端组件庞杂,所以要求大家都梳理技术方案的时候,核心链路需要时序图记录。但是大家苦于好用的软件都要收费,所以想找一个好用的开源的。经过一些简单的对比我觉得 mermaid 确实是不错的选择,理由如下,顺便大家也一起看看其他免费开源的软件,有一些场景可能更合适

如果你的系统比较单一,那么在 Intellij 安装一个 SequenceDiagram 插件是非常不错的选择,不管是自己的接口逻辑梳理,还是分析别人的代码,就能快速的生成时序图。但是如果你的系统是分布式的、微服务的,就不能串起来了,这是它的局限性。

后来尝试使用 Typora 里绘制,但是生成的图特别小,不利于分享,当我的逻辑比较复杂,调用层次比较多,导出的图片,基本不可用。但是里面用到的纯文本语法就是Mermaid

如果自己写一个 html 嵌入Mermaid语法的纯文本,就能在浏览器渲染出比较清晰的大图了,可以截图保存。

<html>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>

        <div class="mermaid">
            <!--这里是画图的语法代码-->
        </div>

    </body>
</html>
<html>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>

        <div class="mermaid">
            sequenceDiagram
            autonumber
            participant controller as Controller<br>xxxxxxxxxxxxxxxxxxxx
            participant service as Service1<br>xxx
            participant eventBus as asyncEventBus
            participant listener as xxxx<br>Listener
            participant a as Service2<br>xxx
            participant b as Service3<br>xxx
            participant c as Service4<br>xxx
            participant d as Service5<br>xxx

            controller->>+service: xxx
            service->>+a: xxx
            a->>-service: success
            service->>+b: xxx
            b->>-service: success
            service->>-controller: success
            controller->>eventBus: xxxEvent
            eventBus-->>listener: xxx
            listener->>c: xxx
            c->>d: xxx
        </div>

    </body>
</html>

最后发现现在很多支持 markdown 的编辑器都支持了Mermaid语法,目前在语雀编辑器表现不错,可以放大图片。比如 https://www.yuque.com/chusong/ixrhbs/oi7ug5?inner=OaK25

👇 下面是我的公众号,高质量的博文我会第一时间同步到公众号,给个关注吧!

评论列表