程序员画图利器Mermaid ：文本自动生成流程图、序列图等，快速出图无画图烦恼

最新推荐文章于 2025-03-01 19:24:27 发布

学会了没

最新推荐文章于 2025-03-01 19:24:27 发布

阅读量3.1k

点赞数 5

文章标签：流程图时序图 Mermaid 画图工具代码生成流程图软件设计图

本文链接：https://blog.youkuaiyun.com/zfj321/article/details/144656649

版权

功能介绍：

Mermaid 是一个基于 JavaScript 的图表绘制工具，可以将纯文本描述转换为多种类型的图表。以下是 Mermaid 支持的一些主要图表类型：

流程图 (Flowchart)
序列图 (Sequence Diagram)
类图 (Class Diagram)
状态图 (State Diagram)
实体关系图 (Entity Relationship Diagram, ERD)
甘特图 (Gantt Diagram)
饼图 (Pie Chart)
用户旅程图 (User Journey Diagram)
Git 图 (Git Graph)
需求图 (Requirement Diagram)

文本描述：

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

生成的图：

在html代码中使用：

<html>
  <body>
    Here is one mermaid diagram:
    <pre class="mermaid">
            graph TD
            A[Client] --> B[Load Balancer]
            B --> C[Server1]
            B --> D[Server2]
    </pre>

    And here is another:
    <pre class="mermaid">
            graph TD
            A[Client] -->|tcp_123| B
            B(Load Balancer)
            B -->|tcp_456| C[Server1]
            B -->|tcp_456| D[Server2]
    </pre>

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

运行效果：

在其它工具中使用：

Mermaid 官方提供的插件：

IDEA插件演示：

1.安装插件：

2.重启IDEA，创建 mmd 后缀的文件直接打开编辑即可：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

在线免费版- Mermaid Chart Editor

Mermaid 提供的免费在线服务，主要是一个在线编辑器，所见即所得，不提供保存等服务。

地址：http://mermaid.live

在线付费版 Mermaid Chart Editor

Mermaid 提供的在线付费服务(属于SAAS付费系统)，注册账号后可以直接适用，有免费试用额度

地址： https://www.mermaidchart.com/

Mermaid Chart提供一下服务：

编辑器 ：一个用于创建和编辑Mermaid图表的基于Web的编辑器。

Mermaid AI ： 大语言模型，使用我们嵌入的AI聊天功能，从自然语言描述中生成图表

白板：一个用于创建和编辑Mermaid图表的虚拟白板。

插件：一个用于扩展Mermaid功能的插件系统。

AI能力测试：