Summary：
Typora supports the insert flow chart, the Gantt chart, the time sequence diagram. It's not just a simple insert chart, but you can use statements to make the charts beautifully. Today I'll show you how to use typora to insert exquisite graph.
之前简单介绍了typora可以插入流程图，其实我们可以借助于语句来实现精美的流程图，而且语法很简单，这里我们使用的是mermaid语句，下面我将展示如何使用该语句输出精美的流程图。
1.对typora进行设置，让它支持我们即将使用的mermaid语句
typora集成了很多模块，因此其实不仅仅可以绘制流程图，在我们绘制流程图之前，先确认下识别flow语句的引擎有没有打开，不然没办法绘制流程图。点击“file”文件菜单，选择“preferences”个人选项。在弹出的窗口，找到Syntax support(语法支持)，勾选 Diagrams(图表).
2.语法讲解
在typora输入的时候，都是按下面这个格式：
````mermaid
语句部分
````
下面讲解将直接显示语句部分：
Graph声明方向
graph LR
A --> B
这是声明一个水平向右的图，LR 就是属性之一。 A和B 只是obj
可能方向有：
TB 上下 BT 下上 RL 右左 LR 左右 TD 上下
节点与形状
数字节点
graph LR
1
文本节点
graph LR
id[这里输入的是文本]
圆角节点
graph LR
id(这里输入的是文本)
圆节点
graph LR
id((这里输入的是文本))
非对称节点
graph LR
id>这里输入的文字]
菱形节点
graph LR
id{这里输入的是文本}
连接线
节点间的连接线有多种形状，而且可以在连接线中加入标签：
箭头形连接
graph LR;
A-->B;
开放行连接
graph LR
A --- B
标签连接
graph LR
A -- 标签文本--- B;
箭头标签连接
graph LR
A-- text -->B
虚线
graph LR
A-.->B
虚线不带箭头 A-.-.B 标签虚线 A-.text.->B
粗实线
graph LR
A==>B
不带箭头粗线 A===B 标签粗线 Atext>B
特殊的语法
使用引号可以抑制一些特殊的字符的使用，可以避免一些不必要的麻烦。
graph LR\
d1[“This is the (text) in the box”]
html字符的转义字符
graph LR
A["A double quote:#quot;"]-->B["A dec char:#9829;"]
插入表情
如果想加入来自frontawesome的图表字体,需要像frontawesome网站上那样引用的那样
graph TD
B["fa:fa-twitter 哈哈"]
B-->C[fa:fa-ban 哈哈]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro 哈哈);
今天教程就介绍到这里，markdown编辑器，推荐使用typora。谢谢阅读！
Posted on Utopian.io - Rewarding Open Source Contributors