Mermaid

外观

探索由Mermaid创作者推出的Mermaid白板

Mermaid 用户指南 ​

Mermaid 由三部分组成 ​

  1. 部署
  2. 语法
  3. 配置

本节讨论了部署 Mermaid 的不同方法。

如果你是初学者：

使用Mermaid的方式 ​

  1. 使用 Mermaid 实时编辑器
  2. 使用 Mermaid 图表编辑器
  3. 使用 Mermaid 插件和集成
  4. 调用 Mermaid JavaScript API
  5. 添加 Mermaid 作为依赖项

要了解更多信息，请访问使用页面。

1. 使用Mermaid实时编辑器 ​

可在Mermaid Live Editor网站上使用。

功能 ​


• 图表代码 ​

在Code面板中，编写或编辑Mermaid代码，并立即在图表面板中预览渲染结果。

以下是Mermaid代码及其渲染结果的示例：


• 配置 ​

配置选项可在Configuration面板中找到。这些选项将应用于Preview面板中的图表。

要了解更多信息，请访问配置参考页面

代码、配置和预览


• 编辑历史 ​

您的代码将自动保存并显示在Timeline选项卡的History部分中。每分钟保存一次编辑，并且只能查看最后30次编辑。

或者，您可以通过点击History部分中的Save图标手动保存代码。

信息

历史记录仅存储在浏览器存储中。


• 保存图表 ​

有多种方法可以从Actions部分保存您的图表：

  • 导出PNG
  • 导出SVG
  • 导出为Markdown

流程图


• 编辑你的图表 ​

要编辑您的图表，您可以将现有的Mermaid图表代码复制粘贴到Code部分的Live Editor中。

或者：

  • 从头开始创建一个新图表
  • 使用Sample Diagrams部分的示例图

• 从Gists加载 ​

您创建的Gist应该包含一个code.mmd文件，并且可以选择性地包含一个config.json，类似于这个示例。

信息

要了解Gists，请访问GitHub文档页面上的创建Gists。

一旦你创建了一个Gist，将Gist的URL复制粘贴到Actions部分的相应字段中，然后点击Load Gist按钮。

以下是将Gist加载到编辑器中的示例：

https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a

并且，这是上述示例的图表视图：

https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a

2. 使用Mermaid图表编辑器 ​

可在Mermaid Chart网站上获取。

Mermaid Chart 是一个基于网络的图表编辑器，允许您在浏览器中创建和编辑图表。它是由 Mermaid 背后的团队构建的。

功能包括：

  • AI 图表绘制
  • 协作与多用户编辑
  • 存储
  • 以及更多

要了解更多信息，请访问文档生态系统部分中的Mermaid Chart页面。

或者前往Mermaid Chart 网站注册一个免费账户。

3. 使用Mermaid插件 ​

Mermaid 插件 ​

您可以使用插件在流行的应用程序中生成Mermaid图表。

有关Mermaid插件和集成的列表，请访问集成页面。

Mermaid 图表插件 ​

Mermaid Chart 插件可用于：

要了解更多信息，请访问Mermaid Chart Plugins页面。

原生Mermaid支持 ​

对于支持markdown的应用程序（例如GitHub和GitLab），您可以通过创建一个mermaid代码块来添加Mermaid图表。

markdown
The following code-block will be rendered as a Mermaid diagram:

```mermaid
flowchart LR
  A --> B
```

4. 调用 Mermaid JavaScript API ​

此方法可以与任何常见的Web服务器一起使用，如Apache、IIS、Nginx和Node Express。

你还需要一个文本编辑工具，如Notepad++来生成一个html文件。然后通过网页浏览器进行部署，例如Firefox、Chrome、Safari。

信息

不支持Internet Explorer。

API 的工作原理是从源 mermaid.js 中提取渲染指令，以便在页面上渲染图表。

Mermaid API 的要求 ​

在编写html文件时，我们在html代码中向web浏览器提供了两条指令：

a. 我们想要创建的图表的Mermaid代码。

b. 通过mermaid.esm.mjs或mermaid.esm.min.mjs导入Mermaid库，以及mermaid.initialize()调用，该调用决定了图表的外观并启动渲染过程。

示例 ​

  • 这是一个嵌入在
    中的Mermaid图表定义的示例：
html
<body>
  Here is a mermaid diagram:
  <pre class="mermaid">
        graph TD
        A[Client] --> B[Load Balancer]
        B --> C[Server01]
        B --> D[Server02]
  </pre>
</body>
信息
每个Mermaid图表/图形/图表的定义都应该有单独的
标签。
  • 这是一个Mermaid导入和mermaid.initialize()调用的示例。
信息
一个 mermaid.initialize() 调用会包含在 
 标签中的所有定义，并将它们渲染成图表。
html
<body>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>
信息
在Mermaid中，渲染是通过mermaid.initialize()调用初始化的。然而，相反的操作可以让你控制何时开始使用mermaid.initialize()在网页中查找
标签。当你认为在执行mermaid.esm.min.mjs文件时，并非所有的
标签都已加载时，这非常有用。
startOnLoad 是可以通过 mermaid.initialize() 定义的参数之一
参数描述类型值
startOnLoad切换加载时渲染Booleantrue, false
在这个例子中，mermaidAPI 是通过 CDN 调用的：
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.js 在 src 中被引用为一个单独的 JavaScript 文件：
html
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <pre class="mermaid">
            graph LR
            A --- B
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner);
    </pre>
    <pre class="mermaid">
            graph TD
            A[Client] --> B[Load Balancer]
            B --> C[Server1]
            B --> D[Server2]
    </pre>
    <script type="module">
      import mermaid from 'The/Path/In/Your/Package/mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>
5. 添加 Mermaid 作为依赖项 ​
以下是添加Mermaid作为依赖项的步骤：
  1. 安装 node v16
信息
要了解更多关于下载和安装Node.js和npm的信息，请访问npm Docs网站。
  1. 使用以下命令通过 npm 安装 yarn：
    npm install -g yarn
  2. 在yarn安装完成后，输入以下命令：
    yarn add mermaid
  3. 要将 Mermaid 添加为开发依赖项，请输入以下命令：
    yarn add --dev mermaid
结束语 ​
信息
来自Mermaid的创建者Knut Sveidqvist的评论：
  • 在Mermaid的早期版本中，