使用Mermaid在Markdown构建流程图

最新推荐文章于 2024-05-16 18:45:00 发布
最新推荐文章于 2024-05-16 18:45:00 发布
阅读量486 收藏
点赞数
分类专栏： markdown
原文链接：https://mermaid-js.github.io/mermaid/#/flowchart
版权

使用Mermaid在Markdown构建流程图

下面的内容都是在Mac的Markdown软件：Typora上能实现效果。

译文原址

1 方向
Start
Stop

原本内容

graph TD
    Start --> Stop

这里的TD指定方向，可选值与其含义有：

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

2 形状

2.1 基础形状

graph LR
		id
id

定义一个节点变量：变量名[填充的文字]

最低0.47元/天 解锁文章
trouble-i-am-in
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
markdown绘图插件----mermaid简介
weixin_33901641的博客
10-22 4701
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(fl...
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用法及例子
最新发布
敲厉害的燕宝的博客
05-16 1538
即流程图中每个文本块，包括开始、结束、处理、判断等。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 mermaid种草(1)_ mermaid简介
耳东小白的小笔记本儿
01-26 873
一款简化程序员文档写作的神器，一款可以帮程序员提升工作效率的神器，耳东小白倾情推荐，请接受种草！
Markdown绘图mermaid
海阔天空
06-09 232
一、流程图语法b([体育场型]) %%标识开始和结束 c[矩形] %% 标识流程（一些特定的操作） cc(圆角矩形) %% 标识流程（一些特定的操作） d[[流程]] %% 标识子流程 a[(圆柱体)] %% 表示数据库 e((圆 形)) %% 表示页面内引用 f>不规则形状] g{菱形} %% 表示判断条件 h{{六角形}} %% 表示预备流程/初始化 subgraph 平行四边形 %% 表示数据（输入数据（参数）/输出数据（结果） i[/平行四边形/] j[\平行四边形\] end subgraph
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 9412
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
discourse-mermaid:话语插件，允许使用Mermaid JavaScript库创建流程图
05-12
"discourse-mermaid"是一个专为Discourse论坛平台设计的插件，它引入了Mermaid JavaScript库，使得用户能够在论坛中直接创建和展示流程图、序列图、甘特图等多种图表。这个插件极大地增强了Discourse社区的互动性和...
JS流程图
06-11
它的语法简单直观，适合快速构建流程图。通过定义各个节点和连接线，可以轻松创建流程图。 创建流程图时，首先要定义各个步骤，这通常包括定义节点（如开始、结束、决策等）和它们之间的连接。节点可以通过对象的...
Mermrender使用MermaidforMarkdowndocs生成序列和UML图的RESTful渲染管道
08-11
这个工具利用了Mermaid的强大功能，使得在Markdown格式的文档中嵌入流程图、序列图以及UML类图变得简单易行，极大地提高了文档的可视化质量。 **Mermaid** 是一个JavaScript库，它允许开发者用简单的文本语法创建...
将代码JS转换为图形graphviz美人鱼流程图
08-10
"将代码JS转换为图形graphviz美人鱼流程图"的主题涉及使用JavaScript编程语言以及两个特定的开源工具：Graphviz和Mermaid。这两个工具可以帮助开发者将JavaScript代码转化为易于理解的图形表示。 Graphviz是一个...
typora-setup-x64
11-18
通过这种方式，你可以快速构建出清晰明了的流程图模板，方便在不同场景下复用。 时序图，也称为序列图，是一种UML建模语言中的图形表示，用于描述对象之间的交互关系，特别是在时间顺序上的行为。在Typora中，你...
markdown图表语法Mermaid介绍
测试开发小记
05-18 5988
Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。 目录流程图1. 定义流程图节点及节点名称2. 定义流程图方向3. 节点形状4. 节点连线5. 多节点连接6. 其它类型箭头7. 特殊字符8. 子图时序图类图状态图甘特图饼图 Mermaid 是一个
循序渐进-讲解Markdown进阶（Mermaid绘图）-附使用案例
qq_57508808的博客
02-13 7148
详细介绍了Markdown的进阶操作，详细介绍了Mermaid绘图的使用，并附有具体的案例参考。介绍了各式Mermaid的连接线、节点、语法设置。详细讲解了如何在Mermaid中设置时序图、流程图、饼图、需求图。给出了各种贴近生活的案例以解释各式图表该如何部署
在Markdown中用mermaid语法绘制图表
大邓和他的Python
06-19 4736
Python数据挖掘与文本分析＆Stata应用能力提升与实证前沿云特训~Mermaid可以用文本方式绘制图表和流程图，相比Visio而言更加的轻量便捷，此外Markdown内部支持Mer...
【Markdown】【mermaid】Mermaid 简介：使用Markdown动态创建和修改图表
hmywillstronger的博客
03-21 787
什么是 Mermaid图表类型1. 流程图 (Flowchart)2. 序列图 (Sequence diagram)3. 甘特图 (Gantt diagram)4. 类图 (Class diagram)5. Git 图 (Git graph)6. 实体关系图 (Entity Relationship Diagram)7. 用户旅程图 (User Journey Diagram)8. 象限图 (Quadrant Chart)9. XY 图 (XY Chart)安装和使用贡献和支持。
在Markdown中使用Mermaid来绘制类图
weixin_44943389的博客
07-07 1330
在Markdown中使用Mermaid来绘制流程图
mermaid流程图工具_Markdown Mermaid 流程图
weixin_33694136的博客
01-27 233
Markdown Mermaid 流程图语法笔记，以及 GitHub、Hexo-Next-Theme 和相关编辑器的支持一切从简，少用图，多用流程图Markdown语法Mermaid 语法代码块选择 mermaid 语言sequenceDiagramsequenceDiagramAlice->>John: Hello John, how are you?John-->>Al...
markdown小技巧：mermaid绘图工具介绍
codename_cys的博客
05-01 3103
markdown小技巧：mermaid绘图工具介绍 0. 引言 1. 流程图绘制方法 1. 画布定义 2. 节点定义 3. 连线定义 4. 子图定义 2. 时序图绘制方法 1. 基础用法说明 2. 画布以及参与参与元素定义 3. 时序图的连线定义 4. 注释的定义方式 5. 子图的定义方式 3. gantt图绘制方法 1. gantt图定义 2. section定义 4. 参考链接 0. 引言 最近在梳理之前工作的项目，于是就不可避免地需要绘制流程图，然后就又双叒叕发现自己又..
VSCode markdown 绘制流程图
05-26
2. 在Markdown文档中，使用Mermaid语法编写流程图。例如，以下是一个简单的流程图： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 表示A节点分别连接B和C节点，B和C节点再分别连接D节点。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值