Markdown里面使用mermaid画流程图（基础）

最新推荐文章于 2024-09-12 00:12:51 发布
最新推荐文章于 2024-09-12 00:12:51 发布
阅读量6w 收藏 84
点赞数 26
文章标签： markdown typroa mermaid 流程图 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Subson/article/details/78054689
版权

Markdown里面使用mermaid画流程图（基础）

之前有介绍如何在Markdown里面使用flowchart.js插件支持画流程图。Markdown编辑器Typora同样支持使用mermaid插件来进行画图。

Graph

关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如

graph LR
​ A –> B

表示如下一个从左到右的图。

这里写图片描述

流程图的定义仅由graph开始，但是方向的定义不止一种。

  1. TB（ top bottom）表示从上到下
  2. BT（bottom top）表示从下到上
  3. RL（right left）表示从右到左
  4. LR（left right）表示从左到右
  5. TD与TB一样表示从上到下

节点

有以下几种节点和形状：

  1. 默认节点 A
  2. 文本节点 B[bname]
  3. 圆角节点 C(cname)
  4. 圆形节点 D((dname))
  5. 非对称节点 E>ename]
  6. 菱形节点 F{fname}

以上大写字母表示节点，name表示它的名字，如下图。默认节点的A同时表示该节点和它的名字，例如上图的A和B。

这里写图片描述

连线

节点间的连接线有多种形状，而且可以在连接线中加入标签：

  1. 箭头连接 A1–>B1
  2. 开放连接 A2—B2
  3. 标签连接 A3–text—B3 或者 A3—|text|B3
  4. 箭头标签连接 A4–text –>B4 或者 A4–>|text|B4
  5. 虚线开放连接 A5.-B5 或者 A5-.-B5 或者 A5..-B5
  6. 虚线箭头连接 A6.->B6 或者 A6-.->B6
  7. 标签虚线连接 A7-.text.-B7
  8. 标签虚线箭头连接 A8-.text.->B8
  9. 粗线开放连接 A9===B9
  10. 粗线箭头连接 A10==>B10
  11. 标签粗线开放连接 A11==text===B11
  12. 标签粗线箭头连接 A12==text==>B12

这里写图片描述

这里写图片描述

例子

Markdown里面的流程图中的使用flow画的第一个流程图，同样可以使用mermaid来画，如下图：

这里写图片描述

Subson
关注
Markdown(五)——绘图工具mermaid之流程图Flowchart
qq_36749906的博客
08-12 4086
前言：更新下mermaid画图的流程图。 流程图 1. 流程图流向   在最初设计流程图的时候，首先要确定流程图的总体流向，流程图流动方向有如下几种: 方向 标记 备注 上=>下 TB Top to Bottom 上=>下 BT Bottom to Top 左=>右 LR Left to Right 右=>左 RL Right to Left   表示流向时，在最开始用关键字graph+ 上述方向标记符确定流程图流向。 从上往下 TB grap
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 2349
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 1万+
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
Mermaid说明
最新发布
pumpkin84514的博客
09-12 1557
在 Mermaid 中，注释使用%%符号添加。这些注释在生成的图形中不会显示，它们仅用于在 Mermaid 源代码中添加额外的说明或文档。可以根据具体的图类型在适当的位置添加注释，以提高代码的可读性和可维护性。
mermaid绘制流程图
wlh2067的博客
03-16 1825
meimaid绘制流程图 平时撰写公众号、知乎、CSDN等使用Typora Typora是一款Markdown编辑器，支持meimaid，十分方便 下面来学一下流程图语法： 首先要有以下格式 ```mermaid 召唤mermaid编辑栏 开始写代码 节点文本框 graph LR; id #mermaid-svg-yCfSMf6coClPfYmO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}
Mermaid流程图
拱卒的博客
08-10 4590
官网 Github 项目地址 一、介绍 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中 二、流程图基础 1、流程图符号和含义 Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来也不难，比如矩形 [],圆角矩形(),圆形(()) 图形 符号含义 圆角矩形 表示开始和结束 id(“文字”) 矩形 表示过程环节 id["文字"] 单向箭头线段 表示流程进行方向
Mermaid绘制UML图教程
踏雨歌青春，诗酒趁年华
02-14 3830
本文介绍如何使用Mermaid绘制UML图。Mermaid是一款简单而强大的图形描述语言，通过简单的文本语法，用户可以绘制各种类型的图表。它适用于各种场景，包括流程图、时序图、甘特图等。使用Mermaid，你可以更轻松地表达和分享你的图形设计。
MERMAID流程图
qq_43600632的博客
08-07 223
MERMAID流程图MERMAID流程图图形画法连接线画法字符画法子图设计 MERMAID流程图 图形画法 此处存在代码块，请查看代码： #mermaid-svg-fGsVa7xLvT2srPXG .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-fGsVa7xLvT2srPXG .label text{fill:
vscode-markdown-mermaid:将人鱼图和流程图支持添加到VS Code的内置markdown预览中
04-28
将人鱼图和流程图支持添加到VS Code的内置markdown预览中 用法 使用mermaid围栏代码块在markdown中创建图： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 您也可以使用:::块： ::: ...
如何在Markdown中用Mermaid画流程图
lrnanfayer的博客
03-02 2159
只挑了自己感兴趣的功能写下来, 其他更多的需求可以参考这里. 正在学SAS, 所以想养成每条语句后面加 ;的习惯, mermaid语句里其实可以不用;结尾 以下两句没有试成功 graph LR; a --> b & c--> d; graph TB; A & B--> C & D; 整体布局 第一行的graph LR中graph...
使用Mermaid在Markdown构建流程图
TROUBLE I AM IN
03-13 529
使用Mermaid在Markdown构建流程图 下面的内容都是在Mac的Markdown软件：Typora上能实现效果。 译文原址 1 方向 #mermaid-svg-Fcmh8QMLqtLP6ylx .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Fcmh8QMLqtLP6ylx .label text{fil
mermaid 流程图
GIS探索之路
12-24 485
流程图 流程图1 #mermaid-svg-zsm5NKyw9lzancW4 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-zsm5NKyw9lzancW4 .label text{fill:#333}#mermaid-svg-zsm5NKyw9lzancW4 .node rect,#mermaid-svg-z
mermaid之流程图
热门推荐
小妖的博客
07-10 1万+
mermaid中的流程图 1. 图形 图形布局分四个方向，上下、下上、左右、右左，分别是TB(TD)/BT(DT)/RL/LR，字母必须为大写，具体代码如下： ```mermaid graph TD; 开始 --> 结束; 开始结束 2. 节点和形状 带文字节点：为节点设置一个id，id后括号中写该节点内容 graph TD; id1[这是一个节点] 这是一个节点 圆边节点：...
Mermaid 编写流程图
hujincai_55的博客
11-18 1710
Mermaid 编写流程图教程 Mermaid 允许使用文本和代码表示图表，简化了复杂图的维护。它是一个基于javascript的图表绘制工具，从时间成本上大大的解决了画图的时间，而这个图表可呈现Markdown启发的文本定义，可以动态创建和修改图表内容。 Mermaid可以渲染的图表 Mermaid可以画，流程图，时序图，甘特图，类图，实体关系图等等，接下来我们来具体看看如何操作，在操作之前我们需要先下载一个工具：Typora。 以下是Typora工具的打开后的界面如下： 工具的主题颜色皮肤可以点–主题
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
Tuing_的博客
03-30 6134
mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
mermaid基本流程图
健身房
07-28 1189
  mermaid画出流程图的基本语法如下： graph LR A --> B A --> C B --> D C --> D 结果如下： #mermaid-svg-NwghdVVYPqWvUg9a .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Nwg
Markdown mermaid图表
q2412322029的博客
04-29 722
一.流程图 1. 绘图方向 命令 方向 TB（TD） 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 2. 节点形状 命令 形状 A[text] 文本框（默认形状） B(text) 圆角框 C([text]) 体育场型框 D[(text)] 数据库型框 E((text)) 圆形框 F>text] 非对称框 G{text} 菱形框 H{{text}} 六边形框 I[/text/] J[\text] 平行四边形框
juypter markdown 画流程图
09-04
使用Jupyter Markdown画流程图需要借助于一些扩展库或者工具。下面介绍一种常用的方法： 1. 首先，你需要安装jupyter_contrib_nbextensions这个库。打开终端或者命令提示符，输入以下命令安装库： ``` pip install jupyter_contrib_nbextensions ``` 2. 安装完成后，运行以下命令激活扩展并设置为自动加载： ``` jupyter contrib nbextension install --user jupyter nbextension enable python-markdown/main ``` 3. 接下来，你需要在Jupyter Notebook中创建一个新的Notebook文件。点击上方菜单栏的"New"按钮，选择"Python 3"或者"Markdown"（若已经打开了一个Notebook文件，则可跳过此步骤）。 4. 在新的Notebook文件中，将单元格类型切换为Markdown。点击上方菜单栏的"Cell"，选择"Cell Type"，再选择"Markdown"。 5. 开始编写Markdown语法以绘制流程图。Markdown中并没有内置的绘制流程图的语法，但可以使用特定的扩展语法，例如Mermaid或Graphviz。 - Mermaid是一种绘图语言，可以用来创建各种类型的图表，包括流程图。在Markdown中，你可以使用Mermaid语法来绘制流程图。例如，创建一个简单的流程图可以使用以下语法： ``` ```mermaid graph LR A --> B B --> C C --> D ``` ``` - Graphviz也是一种用来绘制图表的语言，包括流程图。你可以在Markdown中使用Graphviz语法来绘制流程图。例如，创建一个简单的流程图可以使用以下语法： ``` ```graphviz digraph { start -> A A -> B B -> C C -> D } ``` ``` 6. 编写完流程图的Markdown语法后，按下Shift+Enter运行单元格即可显示流程图。 需要注意的是，上述的方法使用了扩展库或者工具来实现绘制流程图的功能，并非Jupyter Markdown的原生支持。如果需要更多复杂的流程图，还可以考虑使用其他更专业的图表绘制工具，例如Microsoft Visio、Lucidchart等，并将生成的图片插入到Markdown中。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值