Markdown学习之(2)－绘制表格和流程图

MarkDown表格 + 流程图绘制

表格绘制

在Markdown上写一个表格真是让人头疼的事情，写的不流畅还要担心格式。我为大家总结了以下三种方法，前两种大家或许司空见惯了，第三种是神器。。。

一、md原生

| 水果        | 价格    |  数量  |
| --------   | -----:   | :----: |
| 香蕉        | $1      |   5    |
| 苹果        | $1      |   6    |
| 草莓        | $1      |   7    |

这种写法出来的效果如下:

水果	价格	数量
香蕉	$1	5
苹果	$1	6
草莓	$1	7

二、html表格

暂时不表，后续学习html语法是深入

三、excel表格

这个可以说是大杀器了，我们只需要下载一个东西就行了，这个是知乎用户幻灰龙写的东西，亲测有效

下载链接

解压下来就能把excel变成md表格了

在解压目录下，使用以下命令行，把xx的部分换成表格名称就行了（注意路径问题），windows就行了，不需要linux

整个表格：    exceltk.exe -t md -xls xxx.xls  
              exceltk.exe -t md -xls xxx.xlsx
指定sheet：  
              exceltk.exe -t md -xls xx.xls -sheet sheetname   
              exceltk.exe -t md -xls xx.xlsx -sheet sheetnameexceltk
特性：
     转换Excel表格到MarkDown表格
     支持Excel单元格带超链接
     如果Excel里有合并的跨行单元格，在转换后的MarkDown里是分开的单元格，这是因为MarkDown本身不支持跨行单元格
     如果Excel表格右侧有大量的空列，则会被自动裁剪，算法是根据前100行来检测并计算

这个方法真心方便了好多

---

流程图

因为Markdown没有统一的标准，不同的脚本解释器对相同的标签的的解析结果不一致，markdown只是把引用编译成quoteblock标签，什么样子还要由css决定。

而MardDown绘制流程图的插件尤为突出，MarkDown中嵌入的不同的脚本解析工具形成了不同类型的MardDown。比如有道云笔记的MardDown使用的是mermaid绘图插件。mermaid是JS库，可用于绘制时序图、流程图、甘特图等，功能比较强大，输出格式为SVG。 而CSDN博客上使用的MardDown的绘图插件使用的是flowchart.js插件。这两种不同插件的MarkDown化流程图的语法完全不一样。所以在使用有道云笔记和CSDN博客的时候需要分开学习。

对于各种脚本绘图工具的总结，请查看此链接

1.有道云流程图(mermaid语法)

```
graph TD

A[Start] --> B[Your Operation]
B --> C{Yes or No?}
C --> |yes| D[end]
C --> |no| B

```

如上脚本生成如下流程图：

graph TD

A[Start] --> B[Your Operation]
B --> C{Yes or No?}
C --> |yes| D[end]
C --> |no| B

2.上述流程图在CSDN画法

如下代码在csdn上可以正常显示流程图,但是在有道云的markdown下不能正常显示.

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```

具体显示的流程图样式也和有道云的不一样，请复制此脚本语言放入CSDN验证。具体的语法请参考文档末尾的参考文档

---

参考文档

1. markdown绘图插件—-mermaid简介
2. 脚本绘图工具总结
3. CSDN的MarkDown使用说明
4. 有道云MardDow使用说明
5. Markdown学习笔记:如何画流程图 (flowchart.js)
6. https://github.com/adrai/flowchart.js

---

感谢

2017 …… ,卷起裤管跑，撸起袖子干！

yanxiangyfg的专栏 ：　“忠于实践，记录点滴”

---