markdown 流程图js_MarkDown 流程图示例
后知后觉的我,最近才知道MarkDown支持mermaid语法,可以用MarkDown画流程图!
犹记得当初做毕业设计时,自己用Word插入一个个形状再插入一条条线的方式作图,流程稍微有点改动就要牵一发而动全身,机械又低效。MarkDown的语法简洁又优雅,利用编程的方式来作图,腰也不疼了,背也不酸了,一口气可以做六张。
效果图
先来看一张效果图:
MarkDown画的流程图效果图
对应的mermaid语法是这样的:
graph LR
rect["[]表示正方形"] -->roundedRect("()表示圆角矩形")
roundedRect --> condition{"{}表示菱形"}
condition -->|"||用来在线条间插入文字"| result1["再来个[]"]
condition -->|"||用来在线条间插入文字"| result2["再来个[]"]
效果还不错,接下来就让我们一起来学习一下mermaid有哪些语法。
一、格子形状
有以下几种格子形状:
格子形状
对应的mermaid语法如下:
graph LR
默认方形
rect[方形]
roundedRect(圆角矩形)
round((圆形))
condition{菱形}
tag>标签]
二、连接线样式
有以下几种连接线样式:
连接线样式
对应的mermaid语法如下:
graph LR
test((指我干啥))
直线 --- test
虚线 -.- test
箭头 --> test
虚线箭头 -.-> test
粗直线 === test
粗箭头 ==> test
双竖线加标签 ---|"||加标签"| test
三、子图
mermaid支持将图的一部分包裹起来,形成子图,效果如下:
子图
对应的mermaid语法如下:
graph LR
subgraph 第一个子图
测试数据1 --> 指我干啥
end
subgraph 第二个子图
测试数据2 --> 你也指我干啥
end
—— 我就是这么写的,但为啥第二个子图在第一个子图上面???
—— 算了算了,不求甚解,用到再说。
四、流程图方向
有以下几个方向:
从上到下
从左到右
从下到上
从右到左
对应的mermaid语法如下:
graph TB
从上到下 --> 指我干啥
graph LR
从左到右 --> 指我干啥
graph BT
从下到上 --> 指我干啥
graph RL
从右到左 --> 指我干啥
很容易看出规律:T表示Top,B表示Bottom,L表示Left,R表示Right
五、特殊字体
fontAwesome
对应的mermaid语法如下:
graph LR
B["比如:fa:fa-android fa:fa-flag fa:fa-github fa:fa-apple fa:fa-star"]
六、Hey MarkDown
学习了MarkDown的基本语法之后,让我们来实践一下。之前我在网上看到过一张“Hey Jude”的歌词流程图,还挺有意思的。我们就来试着画一下,语法如下:
graph TB
heyJude[hey Jude] --> doNot(don't)
doNot --> makeItBad[make it bad]
doNot --> beAfraid[be afraid]
doNot --> letMeDown[let me down]
makeItBad --> takeASadSong[take a sad song and make it better]
beAfraid --> youWereMade[you were made to go out and get her]
letMeDown --> youHaveFound[you have found her, now go and get her]
takeASadSong --> rememberTo[remember to]
youWereMade --> rememberTo
youHaveFound --> rememberTo
rememberTo --> letHerInto[let her into your heart]
rememberTo --> letHerUnder[let her under your skin]
letHerInto --> thenYou[then you]
letHerUnder --> thenYou
thenYou --> canStart[can start]
thenYou --> begin[begin]
canStart --> toMakeItBetter[to make it better]
begin --> toMakeItBetter
toMakeItBetter --> betterbetter[better better better better better waaaaa]
betterbetter --> na((na))
na --> na
效果图:
hey Jude
Excuse me? 我不是刚学了一样很厉害的技能吗?怎么画出来这个鬼样子...
好吧,理想和现实是有差距的。MarkDown还支持另一种语法的流程图,以及时序图、甘特图,我们下次再学习。
markdown 流程图js_MarkDown 流程图示例相关推荐
- markdown 流程图js_科学网—让Markdown支持ASCII流程图和JavaScript流程图 - 李继存的博文...
2014-12-25 12:08:34 计算机领域中一直存在两种不同的理念并彼此竞争, 可视化与可控化, 或称为所见即所得与所愿即所得. 前者是Windows的典型做法, 而后者是Linux的典型理念 ...
- markdown 流程图js_如何在Markdown中画流程图
如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用(现在 ...
- Markdown Flow 画流程图详解
VScode Markdown Flow 安装插件Markdown Preview Enhanced 流程图 有个东西叫做flowchart.js,就是专门用于绘画流程图,节点和连接是分开定义的,这样 ...
- Markdown 里 mermaid 流程图(flowchart)教程
作者: Jintao 日期:2021-7-12 简介: 未完待续 Markdown 里 mermaid 流程图flowchart教程 前言: 1.0 流程图的方向 TD LR BT RL 2.0 节点 ...
- 【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图
平常使用Typora撰写内容的时候,偶尔会用到流程图,原来一直使用Word来作图,在插入到文档中,昨天偶然间了解到Typora支持使用mermaid来绘制流程图,才发现自己差点Out了.此处整理一下如 ...
- (一)Markdown编辑器的使用示例 | 以 CSDN自带MD编辑器 为例
CSDN自带Markdown编辑器使用指南 (一)Markdown编辑器的使用示例 | 以 CSDN自带MD编辑器 为例 (二)Markdown编辑器的使用效果 | 以 CSDN自带MD编辑器 为例 ...
- 数据流程图 状态图 流程图
数据流程图 状态图 流程图 数据流程图 数据流程图(DFD)提供了通过系统的数据流的图形表示.它逻辑上显示了我们的系统进程和外部接口或数据存储交换了哪些信息,但是它没有明确显示信息交换的时间或顺序. ...
- 绘制业务流程图:流程图绘制工具
文章描述:什么是流程图?流程图和其他图表(如线框图,概念图,架构图,用例图)有什么不同? 图1:用即时贴与白板做的简单流程图 转载请注明来处,关注我请点击:http://weibo.com/heidi ...
- 画流程图activiti流程图_干货!小白也能一天画100张高逼格流程图
今天是在一起两周年零128天纪念日~ 你喜滋滋地订好了花,买好了酒,暗暗盘算着下班以后赶紧走~ 不料老板的命令从天而降 "出100张流程图,今天给我!" What???100张!! ...
最新文章
- java基础面试题整理-2021
- 2021春季学期-创新设计与实践-Lesson5
- CentOS7安装iptables防火墙
- Hibernate总结1
- 关于oracle监听程序的相关问题及解决方法
- 台达b2伺服说明书_三菱Q系列定位模块及伺服参数不会设置?看这一篇就够了!...
- 解惑烟草行业工控系统如何风险评估
- 九度OJ1486 /POJ 1029/2012北京大学研究生复试上机
- java中的Sort函数,你值得看
- C 语言fopen打开模式
- 37. 反转一个3位整数 Java
- run rhadoop
- 计算机处理技术职业道德与论文,计算机职业道德j论文.doc
- linux下tomcat热部署,怎样将项目部署到Linux上tomcat热部署
- 金财致远咨询有限公司莅临美和易思参观交流
- red linux更换显卡,转:Linux(centos6.0/redhat) 安装 ATI / Nvidia 显卡驱动
- 【一起学Rust | 框架篇 | Frui框架】rust一个对开发者友好的GUI框架——Frui
- linux线程篇,linux线程篇 (二) 线程的基本操作
- kodi树莓派_树莓派如何安装最新版Kodi 18.6 及树莓派4B针对Kodi的优化
- 使用这个vue snippets,提高百倍开发效率
热门文章
- 腾讯云首次公开边缘计算网络开源平台,拥抱5G与万物互联
- ISO base media file format---iso 基础媒体文件格式(专业名称)
- vlc源码分析(五) 流媒体的音视频同步
- java基础---流程控制
- leetcode 572. 另一个树的子树(Java版)
- 【PAT甲级 排序】1012 The Best Rank (25 分) C++ 全部AC
- 【PAT甲级 补全前导0 vector作为函数参数】1025 PAT Ranking (25 分) Java、C++
- 【PAT甲级 StringBuilder的使用】1005 Spell It Right (20 分) Java版 7/7通过
- 网络协议之:socket协议详解之Datagram Socket
- java安全编码指南之:文件IO操作