Graphic of Typora

杂文

流程图示例

在很多时候，图表能帮助我们更好地传达我们想表述的意思，也更加的直观，因此我们有必要学会各种绘图的技巧。这篇博客将介绍如何使用Typora绘制各种图（流程图、序列图、甘特图）。

1.流程图

  • 使用mermaid绘制（非标准）流程图（个人觉得难看）

    Typora指令：”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    使用标识符代表不同节点，如下面的A,B,C...连接线上的注释写在箭头后面用“|”包裹，也可以写在“--”和“-->”中间。

    连接线的样式：

    | -->  | 箭头   |
    | ---- | ------ |
    | ---  | 实线   |
    | ==>  | 粗箭头 |
    | ===  | 粗实线 |
    | -.-  | 虚线   |

    graph TD//TD表示Top->Down即纵向；横向为LR
    A[Hard edge]—>B(Round edge)//方括号为普通操作//圆括号为：开始/结束框

    B-->C{Decision}//花括号为条件框
C-- one -->D[result one]
C-->|two|E[result two]

    1
    2
    3
    4
    5
    6
    7
    8
    9

      

    ```mermaid
    graph TD
    A[Hard edge]-->B(Round edge)
    	B-->C{Decision}
    	C-- one -->D[result one]
    	C-->|two|E[result two]
  • 标准流程图flow

    Typora指令：”

    1
    2
    3
    4
    5
    6

    格式：分节点声明和连接两部分

    节点声明：如$\underset{标识符}{st}=>\underset{流程名类型}{start}: \underset{框中文本}{Start}$

    连接：只能用 “->”

    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    st->op->cond
    cond(yes)->e
    cond(no)->op

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

      

    ```flow
    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    st->op->cond
    cond(yes)->e
    cond(no)->op

  • 关于mermaid流程图和flow流程图更多用法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    graph TB
        sq[Square shape] --> ci((Circle shape))

        subgraph A subgraph
            od>Odd shape]-- Two line<br/>edge comment --> ro
            di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
            di==>ro2(Rounded square shape)
            
        end

        %% Notice that no text in shape are added here instead that is appended further down
        e --> od3>Really long text with linebreak<br>in an Odd shape]

        %% Comments after double percent signs
        e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

        cyr[Cyrillic]-->cyr2((Circle shape Начало));
    	
         classDef green fill:#9f6,stroke:#333,stroke-width:2px;
         classDef orange fill:#f96,stroke:#333,stroke-width:4px;
         class sq,e green
         class di orange
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A subgraph
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
        
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));
	
     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
1
2
3
4
5
graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);
1
2
3
4
5
graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

2.序列图

  • 序列图sequence

    Typora指令：”

    1
    2
    3
    4
    5
    6

    格式：对话和标注

    对话：对象1 -> 对象2：内容

    标注：Note {right of/left of/over(跨越多个对象，对象之间逗号相隔)}+对象：内容

    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob—>Alice: I am good thanks!

    1
    2
    3
    4
    5
    6
    7

      

    ```sequence
    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob-->Alice: I am good thanks!

一个示例（三次握手图解）

1
2
3
client->server: 客户端发送请求 SYN=1 Seq=X
server->client: 服务器响应请求 SYN=1 ACK=X+1 Seq=Y
client->server: 客户端确认响应 ACK=Y+1 Seq=Z
1
2
3
client->server: 客户端发送请求 SYN=1 Seq=X
server->client: 服务器响应请求 SYN=1 ACK=X+1 Seq=Y
client->server: 客户端确认响应 ACK=Y+1 Seq=Z
  • 序列图（mermaid版）

    第一行标识图的类型，其余与sequence类似。

    不同：participant声明对象；alt选择模式；loop循环模式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    sequenceDiagram
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
        Bob->>Alice: Not so good :(
        else is well
        Bob->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
        Bob->>Alice: Thanks for asking
        end
1
2
3
4
5
6
7
8
9
10
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end
1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
    participant Alice
    participant Bob
    participant John
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John-->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
    participant Alice
    participant Bob
    participant John
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John-->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
1
2
3
4
5
6
7
8
9
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a <br/>longlong time,<br/> so long that<br/> the text does<br/>not fit on a<br/> row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

3.甘特图

格式：

  • 第一行声明图的类型，第二行声明日期格式（类似于Format的写法），第三行声明标题

  • 每一个独立部分写在section里面，section后面为section的名字

    section的格式：

    • 每一行为一个任务，开头为任务名称；后面为任务状态；接着是时间的标识符（可有可无），用于其他任务的定位；最后是（时间起止）||（起始时间+时间间隔）||（标识符定位+时间间隔）

    • 任务状态：

      | done | 已完成 |
      | ——— | —————— |
      | crit | 处于重要阶段 |
      | active | 正在进行 |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
%% Example with slection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2              :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
%% Example with slection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2              :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

本文标题:Graphic of Typora

文章作者:ZhuMing

发布时间:2019-10-17, 00:57:15

最后更新:2019-10-17, 00:57:18

原始链接:http://zhumingcj.github.io/2019/10/17/graphic-of-typora/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 流程图示例
    1. 1.0.1. 1.流程图
      1. 1.0.1.0.1. 使用mermaid绘制（非标准）流程图（个人觉得难看）
      2. 1.0.1.0.2. 标准流程图flow
  2. 1.0.2. 2.序列图
    1. 1.0.2.0.1. 序列图sequence
    2. 1.0.2.0.2. 序列图（mermaid版）
  • 1.0.3. 3.甘特图