轻量级作图神器Typora

轻量级作图神器Typora，小白秒变大神

你好！今天是2022年3月27日，这是我的处女作，望大家多多支持！

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。

注：需勾选扩展语法
福利：免费版Typora可私信我获取

一、流程图(graph)

1、概述
关键字graph表示一个流程图的开始，同时需要指定该图的方向

其中“方向”为：

TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN

常用布局为TB和LR

二、序列图(sequence diagram)

参与者（participant）

传统时序图概念中参与者有角色和类对象之分，但这里我们不做此区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线（主动发出消息）
–->>	有箭头的虚线（响应）
-x	末端为叉的实线（表示异步）
–x	末端为叉的虚线（表示异步）

处理中-激活框

从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。

在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

注解（note）

表述	含义
right of	右侧
left of	左侧
over	在当中，可以横跨多个参与者

循环（loop）

在条件满足时，重复发出消息序列。（相当于编程语言中的 while 语句）

选择（alt）

在多个条件中作出判断，每个条件将对应不同的消息序列。（相当于 if 及 else if 语句。）

可选（opt）

在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。

并行（Par）

将消息序列分成多个片段，这些片段并行执行。

三、饼图（Pie）

四、甘特图（gantt）

%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2021-01-06,2014-01-08
        原型                      :active,  des2, 2021-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2021-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
 
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

五、状态图

六、类图

<|–表示继承，+表示public，-表示private

五、导出svg

绘制好的图片可以选择菜单/文件/导出，导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的，你可以复制 SVG 内容，导入到 SVG 的图片编辑器中进一步操作。导出成网页类型，再使用浏览器打开

参考注解：
[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/