markdown 流程图_Markdown 进阶技能:用代码画流程图(编程零基础也适用)
这篇文章主要介绍
- 流程图基础
- 以写代码的方式画流程图
相比于使用画图工具拖拽画图,用代码画图有什么好处?
- 首先,这种方式非常轻便,无需安装复杂的画图应用。Typora 等多种 Markdown 编辑器自带有画图扩展(这也是 Markdown 能画图的原因,因为用到了扩展)
- 其次,拖拽画图时需要考虑图形尺寸和对齐问题,而代码画图不需要考虑这些,一切均自动调整
- 另外,想象下你在写文档时,随手一段代码就插入了一幅流程图,这多么酷炫!
虽说要使用代码,但其实这些代码非常简单,编程零基础也可以轻松学会,只要运用一些联想记忆即可。
一、流程图基础
考虑到有些读者可能不了解流程图,为此这里先作一些简单介绍,如果你熟悉流程图可以跳过这段内容直接看下一小节。
流程图,顾名思义,就是表示一个事件或活动的流程的图示。
流程图常用符号及含义
流程图的符号有很多,但常用的也就几个。
- 圆角矩形:表示开始和结束
2. 矩形:表示过程,也就是整个流程中的一个环节
3. 单向箭头线段:表示流程进行方向
4. 菱形:表示判断、决策
5. 圆形:表示连接。为避免流程过长或有交叉,可将流程切开,圆形即相当于切口处的连接头(成对出现)
6. 另外还有嵌入在以上符号中的描述文本
图示布局方向
在画流程图时,最常用的布局方向是
- 从上向下
- 从左向右
当然也允许从下向上画、从右向左画,但是这两种很少见。
二、代码画图
工具
君欲善其事,必先利其器。想要用代码画图,就得有支持这种方式的画图工具。这里介绍两款工具:
1) 免费 Markdown 编辑器 Typora,非常好用且美观。其自带 mermaid 画图扩展。
在用 Typora 编写 Markdown 文本时,插入这样一个代码块:
```mermaid……流程图代码……
```
其中流程图的代码便会自动被 mermaid 解析和渲染。
https://www.zhihu.com/video/1123992275965067264
这样的使用方式很简单,其它的能支持 mermaid 的编辑器也可以这样来用,比如说印X笔记。
2) 如果你不想用 Markdown,可以选择网页版 mermaid 编辑器,免费且无需注册:
Online FlowChart & Diagrams Editordwz.cn
利器有了,现在来善其事。
起始代码
每次作图时,代码以「graph <布局方向>」开头,如:
graph TB......
TB(Top Bottom)表示从上向下布局,另外三种是
BT
LR(Left Right)
RL
节点的画法
接下来,来画之前介绍过的四种节点(圆形、矩形、菱形、圆形)。四种节点对应四行代码,请仔细观察代码差异,并与对应的节点相比较。
graph TBA(开始)B[打开冰箱门]C{"冰箱小不小?"}D((连接))
看出玄机了吗?其实很简单,就是
- 不同种类的括号对应不同的节点图形
- 括号中的文字就是显示在节点中的描述
- A B C D 这些字符是为节点取的名字,这个名字可以在之后反复利用(在编程里这相当于定义变量)
线段的画法
前面是节点的画法,再来看下线段的画法。线段用于连接节点,所以请结合刚才所学的节点一同来看:
graph TBA[把大象放进去] --> B{"冰箱小不小?"}B -->|不小| C[把冰箱门关上]B -->|小| D[换个大冰箱]
是不是又发现了玄机!
上述 -->
是带箭头线段,-->|不小|
是加了描述文字的带箭头线段。它们都位于两个节点之间。
好了,要学的内容就是这些,意不意外!东西不多也不复杂,只要根据图案联想记忆即可。稍加练习后便能运用自如。
额外提示
- 上一个代码示例中,B{"冰箱小不小?"} 这里的描述文字加了引号,是因为其中包含特殊字符(问号),用引号包裹防止出错
- 为节点取名为 A B C 不太合适,如果节点很多时往往容易混淆,不方便后续使用和阅读(编程时命名的重要性)。建议起有意义的名字
- 除上述带箭头线段 --> 外,还有带箭头虚线线段
-.->
、 带箭头加粗线段==>
、不带箭头线段---
三、完整示例
完成了上面的教程后,我们再来看个完整例子体会下:
graph TBStart(开始) --> Open[打开冰箱门]Open --> Put[把大象放进去]Put[把大象放进去] --> IsFit{"冰箱小不小?"}IsFit -->|不小| Close[把冰箱门关上]Close --> End(结束)IsFit -->|小| Change[换个大冰箱]Change --> Open
花式用法
当然节点和线段的表现力可以很丰富,不仅限于用于流程图,你也可以借助它们来表现其它内容。如下面是火锅冒菜麻辣烫的关系图!
作者相关阅读:
《轻松上手写作利器 Markdown:从此文章排版无烦恼》
《会用 Markdown 还不够,还得知道排版规范》
《Markdown 高级玩法:用代码画时序图》
markdown 流程图_Markdown 进阶技能:用代码画流程图(编程零基础也适用)相关推荐
- Markdown 进阶技能:用代码画流程图(编程零基础也适用)
这篇文章主要介绍 流程图基础 以写代码的方式画流程图 相比于使用画图工具拖拽画图,用代码画图有什么好处? 首先,这种方式非常轻便,无需安装复杂的画图应用.Typora 等多种 Markdown 编辑器 ...
- 可以用什么软件画流程图?看看这几款画流程图软件
我们在日常的学习和工作中,经常会需要制作一些流程图来帮助我们梳理工作的流程或知识点,帮助我们能够更好地理清思路,让我们可以更加顺利地完成学习和工作任务.那大家知道在线画流程图工具有哪些吗?还不知道的小 ...
- 用python画漂亮图-零基础用 Python 画图表,让你的论文更美观
曾经我在高中的时候有一篇数学探索的小作业,其中我需要画出一张比较复杂的函数图.由于 X 和 Y 的坐标轴标签都需要一定的自定义,所以微软 Office 自带的画图工具自然无法满足我的要求.经过一段时间 ...
- php 动态彩码辨色 接口的调用_好用的云函数!后端低代码接口开发,零基础编写API接口...
前言 在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作. 不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人, ...
- C语言代码注释 - C语言零基础入门教程
目录 方法一:使用// 方法二:使用/* */ 方法三:使用宏 #if #else #end 猜你喜欢 零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C 语言基础入门 ...
- 好用的云函数!后端低代码接口开发,零基础编写API接口
前言 在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作. 不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人, ...
- java门禁系统设计流程图_RFID门禁系统代码+pcb+流程图+论文+参考资料
如有疑问可联系QQ525658917 测试视频链接: 一.实现功能:存储5张IC卡 1.用户密码以及IC卡号和IC卡刷入序列号,保存到STC12C5A60S2的EEPROM中,实现掉电数据保存功能. ...
- 零基础python必背代码-编程零基础应当如何开始学习 Python?
学Python,最高效的方法其实就是自学+自问+实战(海伦泰勒学习法的精简版). 本文分为3大板块,不仅要帮你0基础入门,还专门写了进阶内容. 进阶内容中这51个Python的秘密,你可不一定知道. ...
- python开启新代码块_20课零基础快速学python完成简单邮件完整邮件代码块
通过前两节课的学习, 我们已经掌握了模块的使用,能够解决现实中的问题.纸上得来终觉浅,绝知此事要躬行.以前小K给大家说过,实战项目是编程快速成长的一个途径.到现在应该是我们的第三个项目了,项目需求越来 ...
最新文章
- [转] apache2: bad user name ${APACHE_RUN_USER}
- shell中的数值判断
- Objective-C:GCC+GNUstep配置
- 十四、“沥沥雨丝如落泪,麻麻密密总为愁。”(2021.5.2)
- 【java实训课】web网页相关知识点总结
- 可变参数(不定项参数)
- 如何设置CentOS 7获取动态及静态IP地址
- 美国高校开源迄今为止最大新冠肺炎CT数据集
- iOS :Object-C 语言merge两个字典对象
- 安卓实现tcp连接(安卓作为客户端,电脑作为服务端)
- startActivityForResult调用后立即响应了OnActivityResult()方法,导致setResult()后无响应
- 游戏角色设计有哪些风格类型
- 考研失利,找工作感悟
- 关于一名零基础蒟蒻ACM变强的路子
- 判断用户首次登录的两种方式
- 【AI视野·今日CV 计算机视觉论文速览 第158期】Mon, 23 Sep 2019
- vue实现ps辅助线功能
- 传统数仓如何转型大数据
- hive行转列的高级用法later view explode
- [leetcode]1140.捡石头(动态规划做法)