使用typora绘制精美流程图/Typora tutorial: exquisite graph

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 标签粗线 A==text==>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

---