Mermaid使用简介

最新推荐文章于 2025-03-09 10:24:36 发布
最新推荐文章于 2025-03-09 10:24:36 发布
阅读量1.4w 收藏 57
点赞数 16
分类专栏： 工具使用 文章标签： markdown mermaid

文章目录

mermaid简介

在这里插入图片描述

以与markdown类似的方式从文本生成图表和流程图。

在解释代码时，是否想过简化文档并避免使用像Visio这样的重量级工具?

这就是美人鱼诞生的原因，这是一种简单的类似markdown的脚本语言，用于通过javascript从文本生成图表。点击 这里 试用mermaid在线编辑器。

下面先来看几个例子：

流程图（flowchart）：

mermaid代码如下：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

生成的流程图如下：
A
B
C
D

时序图（sequence diagram）

mermaid代码如下：

sequenceDiagram
　　　participant Alice
　　　participant Bob
　　　Alice->John:Hello John, how are you?
　　　loop Healthcheck
　　　　　John->John:Fight against hypochondria
　　　end
　　　Note right of John:Rational thoughts <br/>prevail...
　　　John-->Alice:Great!
　　　John->Bob: How about you?
　　　Bob-->John: Jolly good!

生成的时序图如下：

Alice Bob John Hello John, how are you? Fight against hypochondria loop [ Healthcheck ] Rational thoughts prevail... Great! How about you? Jolly good! Alice Bob John

甘特图（gantt diagram）

mermaid代码如下：

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

生成的甘特图如下：

Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid A section Critical tasks Adding GANTT diagram functionality to mermaid

下游项目

Mermaid 已经被许多出版系统和编辑器所使用。下面列出了已知的一些插件/编辑器：

Mermaid详解

流程图基本语法

Graph

graph语句用于声明一个新的图形和这个图形布局的方向。

下面代码声明了一个从上到下的图。

graph TD
    Start --> Stop
Start
Stop

下面代码声明一个从左到右的图：

graph LR
    Start --> Stop
Start
Stop

可能方向有：

  • TB - 从上到下
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右
  • TD - 与TB相同

节点和形状

默认节点
graph LR
    id
id

请注意，id 是显示在框中的内容。

文本节点

也可以在与 id 不同的框中设置文本。如果多次这样做，则会使用节点的最后一个文本作为节点的内容。此外，如果稍后定义了节点的边缘，则可以省略文本定义。前面定义的节点的文本的将在呈现框时被使用。

graph LR
    id1[This is the text in the box]
This is the text in the box
圆角节点
graph LR
    id1(This is the text in the box)
This is the text in the box
圆形节点
graph LR
    id1((This is the text in the circle));
This is the text in the circle
非对称节点
graph LR
    id1>This is the text in the box]
This is the text in the box

请注意，现在只能绘制如上的形状，并不能绘制它的镜像图形，将来可能会支持这个功能。

菱形节点
graph LR
    id1{This is the text in the box}
This is the text in the box

节点间的连线

节点之间可以使用线或边进行连接。mermaid支持多种不同的线型，也可以在连线上附加文本。

带有箭头的连线
graph LR
    A-->B
A
B
开放的连线
graph LR
    A --- B
A
B
连线上的文本
graph LR
A -- This is the label text --- B;
This is the text
A
B

或者

graph LR
    A---|This is the text|B
This is the text
A
B
带有尖头和文本的连线
graph LR
    A-->|text|B
text
A
B

或者

graph LR
    A-- text -->B
text
A
B
虚连线
graph LR
    A-.->B
A
B
带有文本的虚连线
graph LR
    A-. text .-> B
text
A
B
粗连线
graph LR
    A ==> B
A
B
带有文本的粗连线
graph LR
    A == text ==> B
text
A
B

破坏语法的特殊字符

一般情况下，可以使用引号包裹文本，以包含会破坏语法的字符。如下例所示：

graph LR
    id1["This is the (text) in the box"]
This is the (text) in the box
用于转义字符的实体编码

可以使用下例所示的语法转义字符：

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]
A double quote:#quot;
A dec char:#9829;

CSDN的markdown编辑器好像不支持此转义语法

子图

subgraph title
    graph definition
end

示例：

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
three
two
one
c1
c2
b1
b2
a1
a2

交互

可以将单击事件绑定到节点，单击事件可以触发javascript回调函数或一个将在浏览器的新选项卡中打开的链接。

click nodeId callback
  • nodeId 是节点的id
  • callback 是在显示图形的页面上定义的以 nodeId 作为参数的javascript函数的名称

下面是一个使用回调函数实现提示功能的例子：

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"

提示的文本包裹在双引号内。提示的格式由 .mermaidTooltip 类设置。

graph LR;
    A-->B;
    click A callback "Tooltip"
    click B "http://www.github.com" "This is a link"
A
B

提示功能和链接到URLs的功能从版本 0.5.2开始启用。

样式和类

连线的样式

可以设置连线的样式。例如，您可能想设计一个在流中向后走的连线。由于连线与节点一样没有id，因此使用在图形中定义连线时的序号来为连线指定特定的样式。在下面的例子中，定义在linkStyle语句中的样式将属于图中的第四个连线：

linkStyle 3 stroke:#ff3,stroke-width:4px;
节点的样式

可以对节点应用特定的样式，如较粗的边框或不同的背景颜色。

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
Start
Stop
类

与每次定义样式相比，更方便的方法是定义一个样式类并将该类附加到应该具有不同外观的节点上。

类定义如下例所示：

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

将一个类附加到一个节点的方式如下：

class nodeId1 className;

也可以在一条语句里将一个类附加到一个节点列表：

class nodeId1,nodeId2 className;
CSS 类

也可以在CSS样式中预定义类，这些类可以从图的定义中应用，如下例所示：

样式示例：

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

定义示例：

graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
    class A cssClass;
默人类

如果一个类被命名为 default，那么它将被分配给所有没有特定类定义的类。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

fontawesome的基础支持

可以从fontawesome加载图标。

可以通过如下语法访问图标：

fa:#icon class name#


graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);
for peace
forbidden
A perhaps?

顶点和连线之间带有空格并且没有分号的图形声明

  • 在图形声明中，语句现在也可以不用分号结束。在发布 0.2.16 版本之后，用分号结束图形语句是可选的。因此，下面的图声明与旧的图形声明同样有效。
  • 在顶点和连线之间允许有一个单独的空格。然而，在顶点和它的文本之间、连线和它的文本之间不应该有任何空格。图形声明的旧语法也可以工作，因此这个新特性是可选的，引入它是为了提高可读性。

下面是图形的边的新声明，它与图形的边的旧声明同样有效：

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

配置

调整渲染流程图的宽度。

可以通过定义 mermaid.flowchartConfig 或由CLI使用json文件配置来调整已渲染流的程图的宽度。如何使用CLI在mermaidCLI页面中进行了描述。mermaid.flowchartConfig 可以设置为带有配置参数的JSON字符串或相应的对象：

mermaid.flowchartConfig = {
    width: 100%
}

时序图基本语法

待补充

甘特图基本语法

待补充

DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
03-09 4298
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
MarkDown 的 mermaid gantt（甘特图）、mermaid sequenceDiagram （流程图） 语法解析和应用
简简单单Onlinezuozuo
01-02 1796
按日期gantttitle 显示在这里的标题section 分栏目标题1事情1: done, 2024 -12-30,2025-01-03事情2: active, 2024 -12-30,3d事情2: 2024 -12-30,36hsection 分栏目标题2事情1: done, 2024 -12-30,2025-01-03事情2: active, 2024 -12-30,3d事情2: 2024 -12-30,36h按开始节点定义数字gantt。
Mermaid使用教程（绘制各种图）
江月的博客
01-19 1万+
接下来，做一个小小的总结：我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。流程图：使用graph关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。序列图：也使用graph关键字，但通常指定方向（如LR表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。甘特图。
mermaid的使用
cherrylovedog的博客
06-16 2848
文章目录（一）MarkDown中使用mermaidGraph节点连线FLOW(流程图)（二）在vue中使用mermaid安装引入(在main.j s)使用时序图什么是时序图？时序图作用是什么时序图组成元素mermaid 中画时序图在mermaid中participants（参加者？对象？角色？）是按照定义顺序渲染的,所以改变参加者顺序就可以通过改变参加者定义顺序别名消息控制焦点(两种表示方式)no...
用DeepSeek+Mermaid打造智能图表助手
最新发布
JetLee的博客
03-09 548
把 DeepSeek + Mermaid 两种利器组合起来使用，让你制作流程图、时序图、饼图等等图表都能信手拈来！
Mermaid 实用教程
热门推荐
平头
03-04 10万+
Mermaid 实用教程 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。 之前用过 PlantUML，但是发现这个东西的实现原理是生成 UML 的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。 Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段...
Mermaid说明
pumpkin84514的博客
09-12 5732
在 Mermaid 中，注释使用%%符号添加。这些注释在生成的图形中不会显示，它们仅用于在 Mermaid 源代码中添加额外的说明或文档。可以根据具体的图类型在适当的位置添加注释，以提高代码的可读性和可维护性。
Mermaid 详解与实践
Jiuri的博客
01-01 5615
Mermaid 是一种基于文本的图表绘制语言，它巧妙地融合在 Markdown 文档里，让使用者无需复杂的图形编辑软件，仅靠敲代码就能生成专业美观的各类图表。这一特性使得它在技术写作、项目文档、知识分享等领域迅速走红，为可视化表达流程、架构、时间安排等信息提供了高效途径。官网地址 https://mermaid.nodejs.cn/intro/。
mermaid使用教程
02-18
### 关于 Mermaid 的使用教程 #### 简介 Mermaid 是一种基于文本的图表生成工具，允许用户通过简单的标记语言创建各种类型的图表。这种特性使得它非常适合集成到 Markdown 文件中，以便在文档内嵌入动态图形表示[^3...
mermaid-gen项目简介与使用教程
这个文档会详细介绍如何使用mermaid-gen项目，包括如何使用它的API来生成图表。 2.构建和测试 你可以通过简单的命令来构建mermaid-gen项目的代码，并运行测试来验证代码的功能。具体的构建和测试命令可以在项目的...
Mermaid 使用教程之流程图 - 从入门到精通
接受带人学编程，有意私信
01-07 5784
​Mermaid 流程图由节点（几何形状）和边（箭头或线）组成。Mermaid代码定义了如何创建节点和边，并适应不同的箭头类型、多方向箭头，以及与子图的链接。
mermaid-demo
10-30
mermaid是一款开源的画流程图、时序图、甘特度的工具，提供了命令行和html两种使用方法。本例是在html中使用mermaid画出各种图的例子。
mermaid-filter:Pandoc过滤器，用于在Markdown文档中的美人鱼语法块中创建图
05-12
Markdown文件中的序列图和图形图！ mermaid-filter是一个pandoc过滤器，它在markdown中添加了对语法图的支持。 像往常一样，在受保护的代码块中编写图表，如下所示： ~~~mermaid sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! ~~~ 并在呈现的文档中获取 安装及使用 npm install --global mermaid-filter 要将markdown文件something.md转换为something.html ，请使用pandoc -t html -F mermaid-filter -o something.html something.md WINDOWS-您需要在上面的行中输入mermaid-filter.
pandoc-dot-mermaid-luafilter
04-13
如何 首先，使用brew安装graphviz brew install graphviz 然后，在本地安装美人鱼cli。 yarn add @mermaid-js/mermaid-cli 或者 npm install @mermaid-js/mermaid-cli 测试 pandoc test.md --lua-filter=dot_mermaid.lua -o test.pdf pandoc test.md --lua-filter=dot_mermaid.lua -o test.docx
前端项目-mermaid.zip
09-02
前端项目-mermaid,用于生成流程图、序列图、类图和甘特图的标记语法。
Mermaid 教程
Persus & Xie
01-11 2037
Mermaid 是一个用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它使用类似于 Markdown 的文本语法，使得创建图表变得简单直观。以下是一个简单的 Mermaid 教程，介绍如何使用 Mermaid 创建流程图、时序图和甘特图。
开发人员必备工具！mermaid的详细教学
zhangqinhang1的博客
10-16 7420
Mermaid 是一个基于 JavaScript 的图表绘制库，它可以用于创建流程图、状态图、时序图以及甘特图等各种类型的图表。它以 HTML 形式渲染图表，而不是生成静态图片，这使得它更加灵活和安全。项目地址Mermaid 官方项目地址项目应用：Mermaid 用于在 web 环境中创建各种类型的图表。它可以用于文档、技术博客、项目文档等等，特别适合于与 Markdown 结合使用。Mermaid 可以帮助用户以直观的方式展示各种流程、状态、时序等信息，从而提高文档的可读性和可理解性。
Mermaid语法大全
weixin_45017098的博客
06-13 5889
​ Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
mermaid使用简介(画论文插图的一种解决方案)
思念殇千寻的博客
12-05 2129
　　官方IO： 　　https://mermaid-js.github.io/mermaid/#/ 　　官方对mermaid的简介是这样的：Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. 　　Markdown风格的语法...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值