Mermaid 图表绘制入门

作者：社区 / 开发者，用例
2023 年 6 月 16 日

导航至

本文由 Emma Bundi 撰写。向下滚动以阅读作者的简介。

geometry

以互动方式可视化数据对开发者、项目经理（显然）和数据可视化专家至关重要。您可以为网站和 Web 应用程序创建引人入胜的图表、图表和仪表板。您可以使用图表绘制和图表工具 Mermaid.js 轻松实现所有这些。

Mermaid.js 是基于 JavaScript 的。它在图表和图表中渲染受 Markdown 启发的文本定义。其语法易于学习，使得它非常适合程序员和非程序员。

在这篇文章中，我们将向您介绍如何开始使用 Mermaid.js，并使用它来创建交互式序列图、流程图、甘特图、饼图等，以便您 可视化您的数据。我们还将向您展示样式和主题配置的选项。

为什么您应该使用 Mermaid

组织进步需要解释清晰且不费时修改的图表和图表。Mermaid.js 为简单和高效性能而构建。使用 Mermaid.js，创建图表、图表或甚至文档都可以无缝完成，从而节省时间并生成互动且引人注目的图形。

设置 Mermaid

要开始在您的 IDE 中使用 Mermaid.js，请在命令行界面中运行以下命令以安装 Mermaid.js 包管理器

npm install -g @mermaid-js/mermaid-cli

您可以通过在 HTML 文件中添加 mermaid.initialize 来初始化您的 HTML 和脚本标签，如下所示

上面的代码允许您在HTML中定义一个类，使其以Mermaid.js语法呈现。或者，您可以在Visual Studio Code上安装Markdown Preview Mermaid Support插件，这是一个用于展示图表和图形的插件。在Mermaid的GitHub页面上还有更多的安装选项。根据您的最终目标，您还可以使用Mermaid.js的在线编辑器，这对于需要快速渲染图表和图形的程序员和非程序员来说都非常友好。

organizational progress

如何使用Mermaid创建图表和图形

可视化消息交互序列图

序列图侧重于对象之间的交互方式。因此，使用引人入胜的序列图可以使复杂的对象交互更容易解释和理解。

Mermaid.js通过利用Markdown代码创建交互图，简化了创建交互图的过程。序列图中的参与者或演员按照在图源文本中出现的顺序呈现。此外，演员可以分组在垂直框中，您可以选择定义它们的颜色。

身份验证请求和响应是消息应用中的常规交互。如下所示，您可以轻松展示两个参与者Brian和Ken之间的序列图。

sequenceDiagram 
Brian->>+Ken: Authentication Request 
Ken-->>+Brian: Authentication Response 
Ken->>+RequestHandler: Valid Authentication Request 
RequestHandler-->>+Ken: Valid Authenticatication Response

上面的Markdown语法展示了Brian和Ken之间的验证消息交互。以下是验证消息序列图的直接标记输出。

authentication-request

流程图的语法流程

Mermaid.js允许您创建不同类型的图表，这意味着您的Markdown语法必须首先定义标题和相应的图表，然后是您首选的数据规范。

声明标题始终先预定义标题字符串，如下所示：title: 数据结构流程图

接下来声明您正在构建流程图，例如flowchart。

流程图由具有方向性的节点组成。您可以选择流程图的方向规范，使用TD表示自上而下或LR表示自左向右。其他方向包括TB表示自上而下，BT表示自下而上，RL表示自右向左。

节点形状由包围节点文本的括号类型定义。方括号形成矩形，而双括号形成圆形节点。随后，具有圆角的节点将由单括号定义。

不同的节点也通过箭头相互连接。

fowchart on the wall

使用流程图可视化代码开发过程

Mermaid.js流程图由节点组成，通过使用不同的箭头类型和多维箭头将它们连接起来，来概述交互。

为了实现正确和吸引人的可视化效果，流程图可以很容易地通过使用Mermaid.js编写Markdown代码来展示公司的代码开发过程。流程图在展示特定架构中的代码流程或解释如何导航网站等用例中非常重要。例如，作为程序员，您可能想可视化一个组织从规划到部署和监控代码所采取的开发过程。以下是将显示此代码

flowchart TD
A([Planning]) -->B{Analysis}
B-->C(Design)
C -->D[Development]
D-->E{Testing}
E-->F[Implementation]
F -->G{Maintenance}

flowchart

使用甘特图可视化调查过程

甘特图通过指示谁做什么以及他们的活动状态来简化项目管理和服务。您还可以使用它们来概述不同数据收集过程的进度。然而，简化甘特图的创建和修改，以便编辑信息不会成为头疼的事情。甘特图中的项目部分可以通过使用section关键字来分割。

这是一个甘特图，以代码作为图表展示了公司通过调查收集数据的过程

gantt
    title A Survey Process Gantt Chart
    dateFormat  YYYY-MM-DD
    section Sect1
    Short Survey           :a1, 2023-01-01, 20d
    Data Processing     :after a1  , 20d
    section Sect2
    Periodical Feedback Report      :2023-01-12  , 12d
    User Testing and Data Exploration      : 20d

survey-processes-gantt-chart

使用饼图可视化药物滥用流行情况

饼图是一种图表类型，它使用圆形表示法，将圆形分成扇区来展示信息。假设你是一位数据可视化专家，想要根据年龄段展示记录的药物滥用案例数量。你可以使用饼图来完成这项工作。

以下是使用 Mermaid.js 创建饼图的 Markdown 语法

pie title Recorded Cases of Drug Abuse in St.Peter's Ward
    "18-25" : 1000
    "26-35" : 850
    "36-42" : 450

chart recorde-cases

Mermaid.js 视觉化样式

根据开发选择和具体情况，Mermaid.js 有不同的方式来设置视觉化的样式。这些样式可以根据所讨论的图表和图表的类型、组织的字体和颜色品牌或您工作所偏好的主题来决定。此外，样式选项范围从更改边框宽度和颜色主题到添加图标。

使用 Mermaid.js，您可以使用自定义 CSS 来设置您的图表样式。为了设置您的 Mermaid.js HTML 类，您需要在 CSS 中预定义在图表定义中初始化的类。但是请注意，目前无法在图表本身中定义 CSS 类。

v

以下是如何在流程图中预定义您的 HTML 类并使用自定义 CSS 进行设置的示例：index.html

html-code-bock

Mermaid.js 允许对您的 Markdown 语法和样式进行进一步指定。在序列图中，您可以使用 messsageLine0 类来设置实线消息或使用 actor 类来设置图表顶部的参与者框。这些类和默认样式根据图表或图表的类型而不同。您可以查阅文档以了解更多信息。

主题配置

Mermaid 还允许您使用 init 指令来配置您首选的主题。以下是可以用的主题

  • default，所有图表的默认主题

  • dark，用于深色元素或暗色模式

  • neutral，用于打印元素

  • forest，加入一丝绿色

  • base，是唯一可以修改的 Mermaid.js 主题

通过 init 的 themeVariables 允许修改您的 base 主题。您可以在实时编辑器的配置标签中添加您的配置语法，或者在您的 IDE 中的 Markdown 图表之前定义语法，如下所示。

%%{init: { "theme": "forest" } }%%
flowchart TD
A([Planning]) -->B{Analysis}
B-->C(Design) 
C -->D[Development] 
D-->E{Testing} 
E-->F[Implementation]
F -->G{Maintenance}

结论

Mermaid.js 在允许数据专家、项目经理和前端程序员创建视觉吸引人的图表方面具有革命性。修改这些数据比以往任何时候都更加节省时间，因为您可以轻松更改语法以适应新计划和数据的即时变化。同时，您可以打破制作图表和图表的繁琐工作。

关于作者

本文由 Emma Bundi 撰写。 Emma 是一位网页开发人员和技术作家。她对开源软件及其对编程的巨大影响充满热情。她还热衷于通过技术写作教授其他开发者她所学到的知识。Mwendwa 是那个爱读书的书呆子，几乎总是在阅读。