【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图

本文链接：https://blog.csdn.net/gavinbj/article/details/104903318

平常使用Typora撰写内容的时候，偶尔会用到流程图，原来一直使用Word来作图，在插入到文档中，昨天偶然间了解到Typora支持使用mermaid来绘制流程图，才发现自己差点Out了。此处整理一下如何使用Typora进行图表的绘制。

mermaid支持三种图形的绘制：流程图、时序图、甘特图。

2.1 流程图绘制

流程图方向定义：字母反过来就是相应箭头方向相反

LR（Left-Right）：表示横向左至右流程图，
TD（Top-Down）：表示纵向上至下流程图用
TB（Top-Bottom）：同TD。

基本图形

id + [文字描述]矩形
id + (文字描述)圆角矩形
id + >文字描述]不对称的矩形
id + {文字描述}菱形
id + ((文字描述))圆形

节点连线

A --> B A带箭头指向B
A — B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A – 描述 — B A不带箭头指向B并在中间加上文字描述
A – 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

# 基本语法说明
graph LR
    A0[A] --> B0[B] 
    A1[A] --- B1[B] 
    A4[A] -.- B4[B] 
    A5[A] -.-> B5[B] 
    A7[A] ==> B7[B] 
    A2[A] -- 描述 --- B2[B] 
    A3[A] -- 描述 --> B3[B] 
    A6[A] -. 描述 .-> B6[B] 
    A8[A] == 描述 ==> B8[B]

样式渲染

style id1 fill:#f9f,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
fill:#f9f 			表示框框中填充的颜色，由RGB表示，但只有0~F，如#f00表示填充红色
stroke:#000 		表示外框的颜色，也是由RGB表示
stroke-width:2px 		表示外框短线的宽度为2个像素，
stroke-das