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

最新推荐文章于 2024-02-13 23:47:27 发布
最新推荐文章于 2024-02-13 23:47:27 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： markdown 文章标签： markdown 流程图 甘特图

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


如何在Markdown中画流程图呢？当然是用mermaid了，mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了 mermaid中流程图在markdown的使用。

如何在markdown中使用mermaid

mermaid语法
流程图方向有下面几个值

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

示例

从上到下

mermaid
graph TD
    A[A] --> B[B]

效果:
A
B

从左到右

mermaid
graph LR
    A[A] --> B[B]

效果:
A
B
小白TOO爱学习
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 1898
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
markdown-流程图mermaid
DCHAO的博客
05-26 165
http://flowchart.js.org/
typora 画流程图、时序图(顺序图)、甘特图
Lee_01的博客
03-13 5616
横向流程图 a=1a=2方形圆角条件a结果1结果2横向流程图 竖向流程图 a=1a=2方形圆角条件a结果1结果2竖向流程图 标准流程图 Created with Raphaël 2.2.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno 标准流程图源码格式（横向） Created with Raphaël 2.2.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno UM...
循序渐进-讲解Markdown进阶（Mermaid绘图）-附使用案例
qq_57508808的博客
02-13 7276
详细介绍了Markdown的进阶操作，详细介绍了Mermaid绘图的使用，并附有具体的案例参考。介绍了各式Mermaid的连接线、节点、语法设置。详细讲解了如何在Mermaid中设置时序图、流程图、饼图、需求图。给出了各种贴近生活的案例以解释各式图表该如何部署
Mermaid语法2-流程图方向、节点以及连接
Neptuneyut的博客
02-23 5697
文章目录Graph流程图方向节点节点形状节点之间的连接参考 Graph graph：绘制流程图 TD声明流程图的方向，声明了图是自上而下的(TD或TB) graph TD Start --> Stop %%注释，由A到B,自上而下排 %% graph ，声明绘制流程图，TD:top to down %% 第二行起建议缩进 %% 首行不可注释 %% --> 两个-,两边建议空格 #mermaid-svg-xGz2PDy03blXvl1N .label{fo
markdown图表语法Mermaid介绍
测试开发小记
05-18 5998
Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。 目录流程图1. 定义流程图节点及节点名称2. 定义流程图方向3. 节点形状4. 节点连线5. 多节点连接6. 其它类型箭头7. 特殊字符8. 子图时序图类图状态图甘特图饼图 Mermaid 是一个
在Markdown中使用Mermaid来绘制流程图
weixin_44943389的博客
07-07 1298
在Markdown中使用Mermaid来绘制流程图
Python库 | markdown-mermaid-to-images-0.1.2.tar.gz
03-06
Markdown 以其简洁易读的语法，被广泛用于编写文档和笔记，而 Mermaid 是一个图表生成器，通过简单的文本语法生成流程图、序列图、甘特图等。`markdown-mermaid-to-images-0.1.2.tar.gz` 是一个 Python 库，它将 ...
discourse-mermaid:话语插件，允许使用Mermaid JavaScript库创建流程图
05-12
1. **获取插件**：从GitHub上下载或克隆`discourse-mermaid-master`压缩包。 2. **安装依赖**：确保你的Discourse环境已经配置好，并且所有必要的依赖都已经安装。 3. **启用插件**：将`discourse-mermaid-master`...
小书匠语法说明之mermaid1
08-04
小书匠语法说明之mermaid1主要介绍了如何使用Mermaid语法在小书匠编辑器中创建各种图表，如流程图、序列图、甘特图等。Mermaid是一种强大的文本到图表的工具，允许用户通过纯文本的方式绘制图表，极大地提高了绘图...
typora-Markdown 编辑器 for Windows
02-20
此外，Typora 还支持一些高级功能，如通过 LaTeX 语法书写数学公式，通过 Mermaid 语言绘制流程图和序列图。 总的来说，Typora 是 Windows 用户理想的选择，无论你是初次接触 Markdown，还是希望提升编写效率的专业...
mermaid-js_docs.7z
09-08
Mermaid JS 是一个强大的JavaScript库，它允许开发者通过简单的语法在Markdown中嵌入代码来生成各种图表，如流程图、序列图、甘特图等。这个"mermaid-js_docs.7z"压缩包包含了官方的文档，对于想要学习和使用Mermaid...
Markdown绘图mermaid实用教程
406156440的博客
11-27 8734
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。 Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。 点击进入官网 点击进入Github 项目地址 1. mermaid 定义 2. 流程图 语法格式如下: graph LR; # 其中LR指的是方向 A --> B # 不同的箭头表示 #mermaid-svg-VSegGmCvjE0v13e9 .label{fo
markdown-Mermaid语法整理
槐安客迹
04-02 2240
Mermaid语法 语法: ```mermaid 内容 ``` 例子: #mermaid-svg-eG2tVRFbUPPScjOl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eG2tVRFbUPPScjOl .error-icon{fill:#552222;}#mermaid-svg-eG2tVRFbUPPScjOl .error-text{fill:#55
Mermaid使用简介
热门推荐
Bossen的学习历程
04-19 1万+
mermaid简介 以与markdown类似的方式从文本生成图表和流程图。 在解释代码时，是否想过简化文档并避免使用像Visio这样的重量级工具? 这就是美人鱼诞生的原因，这是一种简单的类似markdown的脚本语言，用于通过javascript从文本生成图表。点击 这里 试用mermaid在线编辑器。 下面先来看几个例子： 流程图（flowchart）： mermaid代码如下： grap...
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
Tuing_的博客
03-30 5458
mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 9462
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
Mermaid：流程图结点形状
还是应该要努力的（12点前睡觉！！！！！
08-24 2637
文章目录结点定义1. Node Shape 结点形状1.1 square-edge and round-edge 默认边框和圆形边框1.2 Stadium 运动场形状1.3 Subroutine 子程序边框1.4 圆柱体形状 Clindrical shape1.5圆形 Circle1.6 标签形状1.7 菱形 Rhombus1.8 六边形 Hexagon1.9 平行四边形 Parallelogram1.10 梯形 Typezoid 结点定义 通过指定一个 id 来定义一个结点，一个 id 对应一个结点，对同
markdown绘图插件----mermaid简介
weixin_33901641的博客
10-22 4702
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(fl...
markdown 流程图语法 +css
最新发布
07-13
Markdown流程图通常使用特定的符号和语法来表示流程和决策，而CSS则可以用于美化这些流程图，使其更易读和视觉上更具吸引力。以下是基本的Markdown流程图语法以及如何配合CSS增强效果： **Markdown流程图语法示例：...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值