在Markdown中用mermaid语法绘制图表

最新推荐文章于 2025-04-09 10:22:27 发布

邓旭东HIT

最新推荐文章于 2025-04-09 10:22:27 发布

阅读量5.5k

点赞数 4

本文链接：https://blog.csdn.net/weixin_38008864/article/details/106866122

版权

Python数据挖掘与文本分析＆Stata应用能力提升与实证前沿云特训~

Mermaid可以用文本方式绘制图表和流程图，相比Visio而言更加的轻量便捷，此外Markdown内部支持Mermaid语法，可以有效避免切换软件，让我们更加专注于内容本身。

mermaid官方文档

https://mermaid-js.github.io/mermaid/#/README

图表类型支持

饼形图(Pie Chart)
流程图（Flow Chart）
时序图（Sequence Diagram）
状态图(State Diagram)
甘特图（Gantt Diagram）
类图(class Diagram)
等等

饼形图

饼形图是我们经常用到的图表，在mermaid中最简单，基本上一看就会

代码

```mermaid
    pie 
    title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15 
``

用到的关键词

关键词

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

邓旭东HIT

关注关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在 Markdown 中使用 Mermaid 显示图表，例如流程图、甘特图、正态分布图和桑基图。应用场景：书写需求文档 (使用流程图、原型图、数据流图辅助说明复杂逻辑)

专注于计算机研发知识和资讯分享

03-20

582

比如流程图用graph TD，序列图用sequenceDiagram，甘特图用gantt。每个例子需要展示代码块的结构，注意使用三个反引号包裹，并标明mermaid语言，这样才能正确渲染。本地编辑器：VS Code 需安装插件 Markdown Preview Mermaid Support。可以直接在 Markdown 中通过特定语法绘制流程图、时序图、甘特图等。例如：功能需求需附业务流程图和界面原型图，标明字段校验规则和交互逻辑。k3/RFID电子标签/传感器/人工录入。应用场景：书写需求文档。

mermaid图表支持html标签,在Markdown中用mermaid语法绘制图表

weixin_36026440的博客

06-04

692

流程图该流程图就是用下方的代码再markdown中实现的```mermaidgraph RL;A-->B;A-->C;B-->D;C-->D;```关键词解读关键词功能graph定义流程图TD流程图方向。mermai的方位还有T、D、L、 R，分别代表上、下、左、右。两个方位组合成一个流动方向。本案例是从上到下，即TD-->有向箭头节点还可以用 ::: 调用修饰函数...

1 条评论您还未登录，请先登录后发表或查看评论

Markdown中的Mermaid语法

2401_83820329的博客

04-15

971

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中

Deepseek+Mermaid 打造图表的高效组合

SAYF001的博客

03-31

1332

Deepseek+Mermaid 打造图表的高效组合

使用 Markdown 绘制图表

qq_21197941的博客

02-01

1258

您可以通过添加自定义 CSS:root {请注意，如果您导出的文档具有当前使用的主题以外的其他主题，则某些mermaid选项将不会应用于导出的 HTML/PDF/图像。例如，如果您当前使用它们 Github，但在导出到 PDF 时，您为 PDF 导出设置了主题 YYY，并且 YYY.css 定义，则不会应用于导出的 PDF。

markdown图表语法Mermaid介绍

测试开发小记

05-18

7574

Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。目录流程图1. 定义流程图节点及节点名称2. 定义流程图方向3. 节点形状4. 节点连线5. 多节点连接6. 其它类型箭头7. 特殊字符8. 子图时序图类图状态图甘特图饼图 Mermaid 是一个

Markdown 表格语法

老实人张大傻

09-29

804

Markdown 表格语法文章目录Markdown 表格语法表格合并表格属性配置参考表格合并行合并 <table> <tr> <td rowspan="3" > rowspan 是行合并，3 是合并 3 行</td> </tr> </table> rowspan 是行合并，3 是合并 3 行 1.2 1.3 2.2 2.3 3.2

markdown mermaid 表格

08-25

- *2* [在Markdown中用mermaid语法绘制图表](https://blog.csdn.net/weixin_38008864/article/details/106866122)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

DeepSeek+Mermaid快速生成常用办公图表

最新发布

ylmx5201314的博客

04-09

986

本文介绍了饼图、流程图、思维导图、四象限图等常见图表类型，阐述了它们的应用场景及特点，并提供了DeepSeek指令生成Mermaid格式图表的示例。这些图表工具在数据分析、项目管理、学习辅助等多方面发挥着重要作用。

Markdown Diagrams-crx插件：在浏览器中渲染多语言图表

用户只需在Markdown文档中用特定的分隔符将图表代码括起来，并在代码前添加相应的语言标识符（如```plantuml）。然后，通过双击代码块中的语言标识符即可触发图表的渲染。此外，用户可以单击浏览器工具栏中的插件...

MarkDown编辑器中有意思的柱状图+代码实现

01-06

这是生成的效果 {∣∣∣∣050100基础信用:100+练习情况:61+社区贡献:25+比赛情况:0+获得成就:0+总估值:186\def{\cGreen}{#52C41A} \def{\cOrange}{#F39C11} \def{\cYellow}{#FADB14} \def{\cRed}{#E74C3C} \def{\colorOfLine}{#A9A9A9} \def{\colorOfDivide}{#000000} \def{\colorOfName}{#000000} \def{\colorOfBox}{#000000} \def{\colorOfContent}{#000000}

Markvis在Markdown中生成可视化图表

08-10

Markvis 在 Markdown 中生成可视化图表

Markdown之创建表格语法

RunFromHere的博客

03-20

4504

文章目录1. 最简单的方式2. 通常方法这里介绍两种方法写markdown的表格 1. 最简单的方式 name | 价格 | 数量 -|-|- 香蕉 | $1 | 5 | 苹果 | $1 | 6 | 草莓 | $1 | 7 | name 价格数量香蕉 $1 5 苹果 $1 6 草莓 $1 7 2. 通常方法 name | 111 | 222 | 333...

【Markdown】【mermaid】Mermaid时序图基础语法Sequence Diagrams - Basic Syntax

hmywillstronger的博客

03-21

1840

时序图是一种交互图，显示了流程如何相互操作以及它们的执行顺序。它可以用来描述用例场景或设计一个良好的面向对象系统。Mermaid可以渲染时序图。时序图的代码如下所示：fill:#333;Great!

Markdown语法

java_resolver的博客

10-13

291

有道笔记中编辑：可参考网站： https://mermaidjs.github.io/ MarkDown语法格式： # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题这是第一个段落。换行是在同一个段落我是句号后面的下一个段落需要两个换行隔开 **文字加粗是两个*** 斜体是*一个** ~~删除这段文字~~ ==突...

【markdown】使用 Mermaid 制作的图表和图形的一些示例

cxyhjl的博客

08-17

3102

Mermaid是一种用于绘制流程图,状态图,序列图和甘特图的文本标记语言。Mermaid的主要特点包括:基于文本 - 使用类似Markdown的语法来描述图表,之后可以转换为SVG图表。支持流程图 - 使用图形节点和箭头来表示流程步骤和流转方向。支持状态图 - 可以绘制状态之间的转换条件。支持序列图 - 用于描绘不同对象之间消息传递的时序。支持甘特图 - 项目管理常用的甘特图也可以通过Mermai...

【每天1分钟】MarkDown语法学习之流程图-mermaid-demo

小白TOO爱学习的博客

07-03

457

【每天1分钟】MarkDown语法学习之流程图-mermaid-demo demo 绘制一个流程图,找出 A、 B、 C 三个数中最大的一个数。写法 mermaid graph LR start[开始] --> input[输入A,B,C] input --> conditionA{A是否大于B} conditionA -- YES --> condit...

OD(13)之Mermaid饼图和象限图

Once_day的回忆

02-29

1853

Mermaid是一种流行的基于文本的图表绘制语法和工具，它使得开发人员能够使用简洁的文本描述来生成复杂的图表，而饼图是其支持的多种图表类型之一。Mermaid最初由Knut Sveidqvist创造，目的是为了简化图表的创建过程，让非设计专业的开发人员也能轻松作图。自从它的推出以来，Mermaid迅速赢得了广泛的用户基础，尤其是在程序员和技术文档编写者中。Mermaid的饼图（Pie chart）通过简单的文本标记语言提供了创建饼图的能力。