Typora常用操作,怎么用typora

摘要：

2，对象对象代表时序图中的对象在交互中所扮演的角色，位于时序图顶部和对象代表类角色。有的时候可能有多个打印机，那么这些打印机都是同一角色的不同对象3，生命线生命线代表时序图中的对象在一段时期内的存在。时序图中每个对象和底部中心都有一条垂直的线，这就是对象的生命线，对象间的消息存在于两条虚线间。4，激活期激活期代表时序图中的对象执行一项操作的时期，在时序图中每条生命线上的窄的矩形代表活动期。

Typora常用操作

折叠typora大纲

mac上使用command+, 打开偏好设置，或者点击菜单栏 Typora-偏好设置
在外观配置中勾选大纲视图的折叠和展开

使用Typora画流程图

Typora支持的画图格式种类

mermaid 标准图形语言
- sequenceDiagram 时序图
- graph LR 横向流程图
- graph TD 纵向流程图
- stateDiagram 状态图
- classDiagram 类图
- gantt 甘特图
- pie 饼图
flow 流程图
sequence UML时序图
与mermaid相比，sequence可以创建没有连接的对象，箭头可以为实心也可以为空心，但不箭头不能缺失
graphviz图（不能直接支持，需要其他方法）

mermaid

sequenceDiagram 时序图

时序图元素
时序图主要有一下几个元素：角色，对象，生命线，激活器和消息

1、角色（Actor）
任何主体都可以是角色，角色对外发布消息。示例中，客户端，打印机，数据库都是角色。
2，对象(Object)
对象代表时序图中的对象在交互中所扮演的角色，位于时序图顶部和对象代表类角色。有的时候可能有多个打印机，那么这些打印机都是同一角色的不同对象
3，生命线(Lifeline)
生命线代表时序图中的对象在一段时期内的存在。时序图中每个对象和底部中心都有一条垂直的线，这就是对象的生命线，对象间的消息存在于两条虚线间。
4，激活期(Activation)
激活期代表时序图中的对象执行一项操作的时期，在时序图中每条生命线上的窄的矩形代表活动期。它可以被理解成C语言语义中一对花括号“{}”中的内容。csdn的Markdown中并没有这一举行，只能以右侧或左侧的注解来表示“` python
5，消息(Message)
消息是定义交互和协作中交换信息的类，用于对实体间的通信内容建模，信息用于在实体间传递信息。允许实体请求其他的服务，类角色通过发送和接受信息进行通信。

sequenceDiagram 是一种带样式的时序图

sequenceDiagram 对象A->对象B:中午吃什么？对象B->>对象A: 随便 loop 思考对象A->对象A: 努力搜索 end 对象A-->>对象B: 火锅？对象B->>对象A: 可以 Note left of 对象A: 我是一个对象A Note right of 对象B: 我是一个对象B participant 对象C Note over 对象C: 我自己说了算

graph LR 横向流程图

graph LR 横向，graph TD 纵向

元素的形状定义：
- id[描述] 以直角矩形绘制
- id(描述) 以圆角矩形绘制
- id{描述} 以菱形绘制
- id>描述] 以不对称矩形绘制
- id((描述)) 以圆形绘制
线条定义：
- A-->B 带箭头指向
- A---B 不带箭头连接
- A-.-B 虚线连接
- A-.->B 虚线指向
- A==>B 加粗箭头指向
- A--描述---B 不带箭头指向并在线段中间添加描述
- A--描述-->B 带描述的箭头指向
- A-.描述.->B 带描述的虚线连指向
- A==描述==>B 带描述的加粗箭头指向

graph LR A(开始)-->B(起床) B--天气不好---C>干活] C==>D{休息时间到了} D-.yes.->E((休息)) D-.no.->C E-->F(干饭)

graph TD A(开始)-->B(起床) B--天气不好---C>干活] C==>D{休息时间到了} D-.yes.->E((休息)) D-.no.->C E-->F(干饭)

stateDiagram 状态图

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

第二版本：

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

classDiagram 类图

https://mermaid-js.github.io/mermaid/#/classDiagram

对类的注解，在单独行声明

<<interface>> 接口类
<<abstract>> 抽象类
<<service>> 服务类
<<enumeration>> 枚举

类成员的可见性有四种：

- public
- private
protected
~ package/internal

classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +Sring gender Animal : +isMammal() Animal : +mate() <<abstract>> Animal class Duck{ +String beakColor +swim() +quack() } <<interface>> Duck class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

行程图journey

描述都干了什么，干的好不好

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me, Mary, John,Simon,Chris,Zee Sit down: 3: Me

gantt 甘特图

基本语法：

使用 mermaid 解析语言，在开头使用关键字 gantt 指明
deteFormat 格式指明日期的显示格式
title 标题设置图标的标题
section 描述定义纵向上的一个环节
定义步骤：每个步骤有两种状态done
（已完成）/active（执行中）
- 描述: 状态,id,开始日期,结束日期/持续时间
- 描述: 状态[,id],after id2,持续时间
- crit ：可用于标记该步骤需要被修正，将高亮显示
- 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列

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

pie 饼图

注意数字后面不能有空格

数字支持两位小数，百分比是按照数字总量自动计算的

pie title 产品中的关键成分 "钙": 10.5 "钾": 24.5 "镁": 30.0 "铁": 35

线上画图工具：https://mermaid-js.github.io/mermaid-live-editor

flow流程图

st=>start: 海信广告SDK
op1=>operation: 调用命令调用
e=>end: 承接apk
st->op1->e

完整示例：

start=>start: 开始
input=>inputoutput: 输入
operation=>operation: 操作
condition=>condition: 操作出错？
output=>inputoutput: 输出
error=>operation: 请重新输入
end=>end: 结束

start->input
input->operation
operation->condition
condition(no, bottom)->output
condition(yes)->error(top)->input
output->end

Hey Jude示例：

start=>start: Start
end=>end: End
heyJude=>operation: hey Jude
doNot=>operation: don't
makeItBad=>condition: make it bad
beAfraid=>condition: be afraid
letMeDown=>condition: let me down
takeASadSong=>operation: take a sad song and make it better
youWereMade=>operation: you were made to go out and get her
youHaveFound=>operation: you have found her, now go and get her
rememberTo=>operation: remember to
letHerInto=>condition: let her into your heart
letHerUnder=>operation: let her under your skin
thenYou=>operation: then you
canStart=>condition: can start
begin=>operation: begin
toMakeItBetter=>operation: to make it better
betterbetter=>operation: better better better better better waaaaa
na=>operation: na

start->heyJude->doNot->end
doNot->makeItBad
makeItBad(no)->beAfraid
makeItBad(yes)->takeASadSong
beAfraid(no)->letMeDown
beAfraid(yes)->youWereMade
letMeDown(yes)->youHaveFound
takeASadSong->rememberTo
youWereMade->rememberTo
youHaveFound->rememberTo
rememberTo->letHerInto
letHerInto(no)->letHerUnder
letHerInto(yes)->thenYou
letHerUnder->thenYou
thenYou->canStart
canStart(no)->begin
canStart(yes)->toMakeItBetter
begin->toMakeItBetter
toMakeItBetter->betterbetter
betterbetter->na
na->end

加入url的流程图：

st=>start: Start|past:>http://www.baidu.com
e=>end: End|future:>http://www.baidu.com
op1=>operation: My Operation
st->op1->e

sequence 时序图

基本语法：

Title:标题：指定时序图的标题
Note direction of 对象:描述：在对象的某一侧添加描述，direction 可以为 right/left/over ，对象可以是多个对象，以 , 作为分隔符
participant 对象：创建一个对象
loop...end ：创建一个循环体
```
对象A->对象B
```
:描述：绘制A与B之间的对话，以实线连接
- -> 实线实心箭头指向
- --> 虚线实心箭头指向
- ->> 实线小箭头指向
- -->> 虚线小箭头指向

客户端->打印机: 打印请求（id）
打印机->数据库: 请求数据（id）
Note right of 数据库: 执行SQL获取数据

数据库-->打印机: 返回数据信息
Note right of 打印机:使用数据打印
打印机-->>客户端: 返回打印结果
客户端->客户端: 等待提取结果

graphviz 图

在typora中不能直接使用graphviz，需要转换成其他方式展示

1 在typora中嵌入在线方式的图

地址链接

![Alt text](https://g.gravizo.com/svg?
digraph G {
aize ="4,4";
main [shape=box];
main -> parse [weight=8];
parse -> execute;
main -> init [style=dotted];
main -> cleanup;
execute -> { make_string; printf}
init -> make_string;
edge [color=red];
main -> printf [style=bold,label="100 times"];
make_string [label="make a string"];
node [shape=box,style=filled,color=".7 .3 1.0"];
execute -> compare;
}
)