markdown 流程图js_如何在Markdown中画流程图
如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用(现在简书的markdown还不支持mermaid,我本地使用的是MWeb)。
如何在markdown中使用mermaid
1.png
流程图方向有下面几个值
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右
TD 同TB
示例
从上到下
mermaid
graph TD
A --> B
效果:
22.png
从左到右
graph LR
A --> B
效果:
3.png
基本图形
id + [文字描述]矩形
id + (文字描述)圆角矩形
id + >文字描述]不对称的矩形
id + {文字描述}菱形
id + ((文字描述))圆形
示例
mermaid
graph TD
id[带文本的矩形]
id4(带文本的圆角矩形)
id3>带文本的不对称的矩形]
id1{带文本的菱形}
id2((带文本的圆形))
效果:
4
节点之间的连接
A --> B A带箭头指向B
A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
A -- 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述
示例
mermaid
graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
效果:
6
子流程图
格式
subgraph title
graph definition
end
示例
mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
效果:
7
自定义样式
语法:style id 具体样式
示例
mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
效果:
9
demo
绘制一个流程图,找出 A、 B、 C 三个数中最大的一个数。
写法
mermaid
graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA{A是否大于B}
conditionA -- YES --> conditionC{A是否大于C}
conditionA -- NO --> conditionB{B是否大于C}
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> stop
printB --> stop
效果:
99
markdown 流程图js_如何在Markdown中画流程图相关推荐
- 如何在word中制作流程图_如何在Word中创建流程图
如何在word中制作流程图 Microsoft Word provides built-in tools for creating and arranging different types of f ...
- word流程图怎么做虚线框_如何在visio中画虚线框以及将visio图形复制到word文档
这两个问题都不是什么复杂的事情,但是如果对visio用的不多或者只是临时用起来碰到了这种问题还真是麻烦事儿. ============================================= ...
- xmind可以画流程图吗_如何在XMind 中绘制流程图?
XMind 是专业强大的思维导图软件,由于其结构没有任何限制,很多朋友特别喜欢用它来绘制流程图.那么,就出现这样一个问题,如何在 XMind 中绘制流程图?下面就和小编一起来看看吧! 如何在 XMin ...
- word里双横线怎么打_如何在word中画线 怎么在word中输入横线[图文]
小编在这段时间遇到好多广大网友的咨询,今天免费分享一下关于电脑系统和电脑操作教程的知识大全,这篇文字是关于如何在word中画线 怎么在word中输入横线[图文]的文字,欢迎大金仔细阅读,如果不懂请多多 ...
- 如何在EXCEL中画横线并输入汉字
如何在EXCEL中画横线并输入汉字 目录 如何在EXCEL中画横线并输入汉字 1.第一种:利用下划线输入,点U即可 2.第二种:利用表格下框线,点击下框线即可 3.第三种:利用直线画,在"插 ...
- 如何在PS中画任意形状虚线
很久以前困惑我很久的一件事---"那就是如何在ps中画圆角虚线",今天终于被我解决了.在这里跟大家分享一下,这只是我个人的愚见而已,如果你已经知道了,或者还有更好的方法的话,请多多 ...
- cad画流程图的插件_在cad中画流程图的方法图解步骤
使用图形表示算法的思路是一种极好的方法,因为千言万语不如一张图.流程图在汇编语言和早期的BASIC语言环境中得到应用.我们还可以用cad画流程图.下面是学习啦小编带来关于在cad中怎么画流程图的内容, ...
- 如何在PPT中画波浪线?
如何在PPT中画波浪线? 如何在PPT中画出如下的正弦波呢?插入图片形式当然是可以,但是非矢量图放大后不可避免的失真,强迫症表示无法忍受. 插入矩形形状.然后不断复制,排列整齐.填充透明,边框最细. ...
- 如何在word中制作流程图_在Word 2007中创建流程图
如何在word中制作流程图 Flowcharts are a very good way to get a new idea explained in a presentation. Office ...
最新文章
- 理解伪元素 :before 和 :after
- 跟燕十八学习PHP-第十五天-php增删改查表数据
- 信用卡还不起会有什么严重后果?
- 阿里云ubuntu mysql_Ubuntu下安装MySQL(阿里云服务器)
- python copy
- 性能测试很难吗?一文带你学会性能测试核心流程和概念
- Python爬虫入门教程 46-100 Charles抓取手机收音机-手机APP爬虫部分
- 电脑连接android手机测试,Android系统手机通过USB连接电脑上网
- 概率论与数理统计,基础知识、公式、定理、概念(一)
- c语言str系列函数
- 【API调用】人脸检测+人脸属性(旷视 / 百度)
- Vue生命周期中对mounted、beforeUpdate、updated的理解
- 天龙八部TLBB系列 - 网单获取数据库密码和服务端密码(超简单)
- 机器学习——支持向量机——硬间隔与支持向量
- 网络安全工程师要学习哪些编程语言?哪里学网络安全知识可靠?
- word文档生成方案
- GSI-PDP管网勘测综合数据处理软件操作手册
- 【转】常用电源转换芯片
- 基于Web的IM简介
- ChatGPT中文网
热门文章
- [PyTorch] 基于python和pytorch的多项式回归
- matlab设计一个简单图像直方图均衡的GUI程序
- Manjaro启动项目及服务配置备忘
- BZOJ 1059: [ZJOI2007]矩阵游戏
- 为什么每次进入命令都要重新source /etc/profile 才能生效?
- angular中的MVVM模式
- 使用annotation配置hibernate(1)
- 易学易用的Windows PowerShell(转)
- [转载] Java中为什么要有重载现象
- deepin(debian)下使用Git