markdown图表语法Mermaid介绍

于 2025-05-25 00:18:27 发布
阅读量33 收藏
点赞数
分类专栏： 2025开发必备(限时特惠) 文章标签： Mermaid markdown图表语法 Mermaid语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41961749/article/details/148198482
版权

markdown图表语法Mermaid介绍

Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。

Mermaid 是一个基于 Javascript 的图表绘制工具，可用于创建流程图、时序图、甘特图、类图、状态图、饼图等。

Mermaid集成到了很多 Markdown 编辑器中，本文使用的是Typora编辑器，在代码块中编写Mermaid代码，编程语言名字设置为 mermaid 。

接下来介绍Mermaid语法。

流程图

了解本专栏 订阅专栏 解锁全文
在 Markdown 中使用 Mermaid 架构图语法基础极简教程
AI天才研究院
12-01 410
本文为您详细介绍 在 Markdown 中使用 Mermaid 架构图语法基础。
在Markdown中用mermaid语法绘制图表
大邓和他的Python
06-19 5616
Python数据挖掘与文本分析＆Stata应用能力提升与实证前沿云特训~Mermaid可以用文本方式绘制图表和流程图，相比Visio而言更加的轻量便捷，此外Markdown内部支持Mer...
markdown绘图插件----mermaid简介
weixin_33901641的博客
10-22 5625
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(fl...
Markdown中的Mermaid语法
平时不搬砖的博客
04-15 289
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中
mermaid 语法
weixin_30846599的博客
05-09 954
a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover { outline: 0; } a:active { outline: 0; } a:hover { color: #005580 !important; t...
markdown的mermaid用法及例子
敲厉害的燕宝的博客
05-16 4635
即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字表述说明id[文字]矩形节点id(文字)圆形矩形节点id((文字))圆形节点id>文字]右向旗帜状节点id{文字}菱形节点id[[文字]]双边框id[(文字)]圆柱id{{文字}}两边尖尖fill:#333;color:#333;color:#333;fill:none;文字1文字2文字3文字4文字5文字6文字7。
（每天进步一点点）Markdown语法学习笔记2（图表篇）
uuuuid123的博客
01-27 1692
Markdown作为一种轻量级的标记语言，由于其简单高效的特点，往往被用于书写博客和记录笔记。笔者认为，绘制图表并非Markdown的设计初衷，市面上有许多优秀的图表软件可以为更为快捷高效地绘图。Markdown高级技巧Markdown简明语法手册查看更多图表Markdown是我们常用的写博客，记笔记的工具。如果我们能够学会熟练地使用mermaid绘制一些简单图表，则势必能提高我们的工作效率。本篇文章正是本人为更好地利用Markdown所做的笔记，若有不足之处，还请多多海涵。
Markdown-mermaid语法
嵌入式系统开发
08-08 2716
基于支持Mermaid语法的Markdown编辑器Typora，使用文本和代码实现图表创建及可视化效果。
Mermaid语法
冰糖先生
06-10 1万+
文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 Mermaid 使用Markdown语法以相同的规则从纯文本生成图标和流程图。 当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具？ 这就是mermaid产生的原因，一个简单的类Markdown脚本语言，其通过javascript从纯文本中产生图表。 查看m
mermaid语法
由纪的博客
06-15 325
方向 graph TB表示图的走向是从上到下 形状 graph TB 默认方形 id1[方形] id2(圆边矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形)) graph id1{菱形} id2{{六角形}} ...
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
热门推荐
小嗷犬的博客
07-04 1万+
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
Mermaid 语法教程
最新发布
qq_56694800的博客
04-03 2851
语法来绘制流程图、时序图、甘特图等可视化图表的工具。它适用于技术文档、Wiki、开发文档等场景。Mermaid 提供了一种直观、简单的方式来绘制图表，使技术文档更加清晰直观！Mermaid 是一种使用。B -->|是| C。
Mermaid语法大全
weixin_45017098的博客
06-13 6250
​ Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
Markdown 文件中使用Mermaid绘制状态关系图
慕羽★的博客
01-04 1739
Mermaid 是一种基于 Markdown 的可视化图表工具，支持绘制流程图、状态图、甘特图等。**Mermaid**也是 Obsidian 支持的图表绘制语言之一，可以直接在 Obsidian或者其他软件、网页等创建的Markdown 文件中编写 Mermaid 代码来生成状态转换图。比如在 Obsidian 中打开或创建一个笔记或者在CSDN中的Markdown编辑器中，插入 Mermaid 代码块，并添加状态关系图的代码后，保存文件后，Obsidian 或者CSDN编辑器会自动渲染出关系图，切换至阅
Markdown绘图mermaid实用教程
406156440的博客
11-27 9136
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。 Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。 点击进入官网 点击进入Github 项目地址 1. mermaid 定义 2. 流程图 语法格式如下: graph LR; # 其中LR指的是方向 A --> B # 不同的箭头表示 #mermaid-svg-VSegGmCvjE0v13e9 .label{fo
Mermaid语法使用
weixin_42202992的博客
08-09 917
Mermaid语法使用
mermaid语法汇总
FHLKJJLDMW的博客
03-29 928
markdown语法mermaid
markdown使用mermaid语法老师报错
03-27
### 配置Mermaid语法以避免报错 为了在Markdown文档中正确使用Mermaid语法并避免常见的报错问题，可以从以下几个方面入手： #### 1. 替代特殊字符 当在Mermaid图表中的`text`部分遇到不被支持的特殊字符（如`@`），可以通过替换的方式解决问题。例如，可以用HTML实体编码来替代这些特殊字符。具体来说，对于`@`符号，可以将其替换成`@`[^1]。 以下是修正后的示例代码： ```mermaid graph LR A[Test@test.com] ``` 这样可以在大多数Markdown渲染器中正常显示而不会引发错误。 --- #### 2. 安装VSCode扩展 在本地编辑环境中配置Mermaid的支持非常重要。通过安装合适的VSCode扩展，能够确保开发过程中Mermaid图表得以正确预览和调试。推荐安装名为 **Markdown Preview Mermaid Support** 的扩展[^2]。该工具提供了实时预览功能，帮助开发者快速定位潜在问题。 完成安装后，重启VSCode使更改生效，并尝试重新加载包含Mermaid图表的Markdown文件以验证效果。 --- #### 3. 调整GitLab兼容性设置 尽管某些特性可能在VSCode环境下运行良好，但在其他平台（如GitLab）上可能会因解析差异而导致失败。因此需要注意以下几点调整策略[^3]: - 使用`graph`而非`flowchart`作为主要绘图方式，因为后者可能存在更多跨平台兼容性问题。 - 如果需要定义子图结构，则应谨慎处理方向声明语句以及连线样式。例如，避免使用带有三个短横线的形式（即 `- - ->`），而是采用标准形式 `--->` 或者更简单的 `-->` 来表示箭头连接关系。 下面给出一段经过优化适用于多环境下的例子： ```mermaid graph TB subgraph Group_A A[A] B[B] end subgraph Group_B C[C] D[D] end A --> C B --> D ``` 此外还需注意一些细节事项比如路径分隔符统一为正斜杠(`/`)而不是反斜杠(`\`)；另外确认图片链接地址完全匹配实际存储位置以免发生找不到资源的情况。 --- #### 总结说明 综上所述，要成功应用Mermaid语法于Markdown文档之中需兼顾三个方面的工作：一是妥善处置那些不受支持或者容易引起误解冲突的关键字项；二是借助专门设计用于增强体验感的功能插件提升工作效率；最后还要充分考虑到目标发布场所的具体需求从而做出相应修改直至满足其全部技术指标为止。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码简单说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值