程序员的画图工具-代码画图的美人鱼mermaid

最新推荐文章于 2025-04-12 12:44:42 发布

潘多编程

最新推荐文章于 2025-04-12 12:44:42 发布

阅读量3.4k

点赞数 3

文章标签： uml

本文链接：https://blog.csdn.net/h356363/article/details/127603197

版权

在画UML图的时候，总要花费很多时间去调整图像对齐，各个图像直接的距离是否合适，等等。我觉得是浪费时间。

对于程序员来说，如果我们直接通过代码来画图，瞬间就亲切多了，画出来的图也会看起来更加的专业，整洁。

Mermaid美人鱼就是一款可以实现通过代码画流程图，时序图，类图，甘特图，饼图等等的软件。

一共有四种方式使用mermaid，我个人觉得第一种最方便，不需要安装任何客户端，直接在线编辑。

可以直接打开在线的网站mermaid.live. ，里面有列子，也可以自己写代码画图。

Four ways of using mermaid:

Using the Mermaid Live Editor at mermaid.live.
Using mermaid plugins with programs you are familiar with.
Calling the Mermaid JavaScript API.
Deploying Mermaid as a dependency.

在线编辑地址：

https://mermaid.live/edit#pako:eNpVj82qwkAMRl8lZOUF-wJdCNdW3QgKuut0EdrUGXR-mKZcpO2736luNKvAOd9HMmLjW8Ycb5GChmupHKT5rQodTS-W-hqybDMdWMB6x88JtquDh177EIy7_bz97SJBMR4XjUG0cff5jYpX_uR4grI6UhAf6k9y_fMT7Cpz1qn-m-jIKbWvOso7yhqKUFCscY2WoyXTprPHJaBQNFtWmKe15Y6GhyhUbk4qDeIvT9dgLnHgNQ6hJeHSUHrYYup99Dz_A1H0VDQ

流程图

代码

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

效果

时序图

代码：

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?

Bob-->>John: Jolly good!

效果

饼图

代码

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

效果

官网

https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=four-ways-of-using-mermaid