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 是一種帶樣式的時序圖
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帶描述的加粗箭頭指向
- A
stateDiagram 狀態圖
第二版本：
classDiagram 類圖
https://mermaid-js.github.io/mermaid/#/classDiagram
對類的注解，在單獨行聲明
<<interface>>接口類<<abstract>>抽象類<<service>>服務類<<enumeration>>枚舉
類成員的可見性有四種：
-
- public
-
- private
-
protected
- ~ package/internal
行程圖journey
描述都干了什么，干的好不好
gantt 甘特圖
基本語法：
-
使用
mermaid解析語言，在開頭使用關鍵字gantt指明 -
deteFormat格式 指明日期的顯示格式 -
title標題 設置圖標的標題 -
section描述 定義縱向上的一個環節 -
定義步驟：每個步驟有兩種狀態done
（已完成）/active（執行中）- 描述: 狀態,
id,開始日期,結束日期/持續時間 - 描述: 狀態
[,id],after id2,持續時間 crit：可用於標記該步驟需要被修正，將高亮顯示- 如果不指定具體的開始時間或在某個步驟之后，將默認依次順序排列
- 描述: 狀態,
pie 餅圖
注意數字后面不能有空格
數字支持兩位小數，百分比是按照數字總量自動計算的
線上畫圖工具：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;
}
)
- img標簽
- 線上圖片
- 本地svg圖片
畫圖地址：
http://dreampuf.github.io/GraphvizOnline/
http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
typora的markdown文件轉換成思維導圖
圖形轉換工具：
將typora文件導出未opml文件，導入xmid或幕布，即可轉換成思維導圖
typora在文檔中間添加錨點
同一文檔中添加錨點 折疊 跳轉只需要用#標識即可，不管幾級標題都可以跳轉，#與字符之間不需要空格
不同文檔中添加錨點:
跳轉到任意位置，使用a標簽 a標簽跳轉