Typora画图教程

一时失言乱红尘 2022-12-26 10:24 321阅读 0赞

本文主要介绍如何在Typora中画图，翻译自Typora官网中关于画图的[文章][Link 1]介绍。

之前已经介绍过如何使用Typora，请参看如下教程入门使用：[https://blog.csdn.net/qq\_41261251/article/details/102817673][https_blog.csdn.net_qq_41261251_article_details_102817673]

### 文章目录 ###

*   *  一、概述
     *  二、开始画图
     *   *  2.1 序列图
         *  2.2 流程图
         *  2.3 Mermaid
         *   *  2.3.1 序列图
             *  2.3.2 流程图
             *  2.3.3 甘特图
             *  2.3.4 类图
             *  2.3.5 状态图
             *  2.3.6 饼图
     *  三、参考资料

## 一、概述 ##

> Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel.
> 
> When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version. Besides, you should also notice that diagrams is not supported by standard Markdown, CommonMark or GFM. Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.

译文：

Typora支持一些Markdown图表插件，只需要在偏好设置中开启即可（设置如下）。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjYxMjUx_size_16_color_FFFFFF_t_70_pic_center]

当把导出为HTML、PDF、epub、docx时，被渲染好的图表也会被导出，但是在当前版本（原文发表于2016.8.15，我也不知道那时候是什么版本）中，图表特性在导出文件中不被支持。另外，你应该注意图表在标准Markdown、CommonMark或GFM中不被支持。因此，我们仍然建议你将这些图表作为图像插入到文章中，而不是直接用Markdown绘制。

## 二、开始画图 ##

### 2.1 序列图 ###

> This feature uses [js-sequence][], which turns the following code block into a rendered diagram:

这个特性使用了`js-sequence`，它能将以下代码块转换为渲染好的图表：

```mermaid
    sequenceDiagram
    title : 这是标题
    Alice->>Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob-->>Alice: I am good thanks!
    Bob ->> Henry: Hello Henry, How are you?
    ```

AliceBobHenryHello Bob, how are you?Bob thinksI am good thanks!Hello Henry, How are you?AliceBobHenry这是标题

相信你能看出一些基本元素的语法，了解更多语法规则，请查看以下链接：

\[1\]https://bramp.github.io/js-sequence-diagrams/

\[2\]https://github.com/bramp/js-sequence-diagrams/blob/master/src/grammar.jison

### 2.2 流程图 ###

> This feature uses [flowchart.js][], which turns the following code block into a rendered diagram:

这个特性使用了`flowchart.js`，它能将下列代码块转换为图表：

```mermaid
    flowchat
    %% 注释
    %% 将起始点start命名为st(随便取),然后起始点内容为Start(冒号后的文本)
    %% :>超链接地址,当点击该元素时，会跳转到相应网站
    st=>start: Start:>http://www.lee-0o0.com
    op1=>operation: Your Operation1
    op2=>operation: Your Operation2:>http://www.lee-0o0.com
    cond=>condition: Yes or No?
    io=>inputoutput: catch something...
    e=>end
    
    st->op1->op2->io->cond
    cond(yes)->e
    cond(no)->op1
    ```

Created with Raphaël 2.2.0  Start Your Operation1  Your Operation2 catch something...Yes or No?Endyesno

关于更多的案例，请查看以下链接：

\[1\]http://flowchart.js.org/

### 2.3 Mermaid ###

> Typora also has integration with [mermaid][], which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.

Typora同样支持`Mermaid`，它将序列图、流程图、甘特图、类图、状态图和饼图整合在一起。

了解更多语法规则，查看以下链接：

\[1\]https://mermaid-js.github.io/mermaid/\#/

#### 2.3.1 序列图 ####

```mermaid
    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
    ```

AliceBobHello Bob, how are you?Not so good :(Feeling fresh like a daisyalt\[is sick\]\[is well\]Thanks for askingopt\[Extra response\]AliceBob这是标题

#### 2.3.2 流程图 ####

```mermaid
    graph LR
    A[Hard edge] -->B(Round edge)
        B --> C{Decision}
        C -->|One| D[Result one]
        C -->|Two| E[Result two]
    ```

One

Two

Hard edge

Round edge

Decision

Result one

Result two

#### 2.3.3 甘特图 ####

```mermaid
    %% Example with selection 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
    ```

Mon 06Mon 13Mon 20Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo pageA section Critical tasks Documentation Last sectionAdding GANTT diagram functionality to mermaid

#### 2.3.4 类图 ####

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

Animal\+age:int \+gender:String\+isMamal() \+mate()Duck\+String beakColor\+swim() \+quack()Fish\-int sizeInFeet\-canEat()Zebra\+bool is\_wild\+run()

#### 2.3.5 状态图 ####

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

StillMovingCrash

#### 2.3.6 饼图 ####

```mermaid
    pie
    	title 饼图标题
    	"dogs":156
    	"cats":100
    	"birds":60
    ```

49% 32% 19% 饼图标题dogscatsbirds

## 三、参考资料 ##

\[1\]http://support.typora.io/Draw-Diagrams-With-Markdown/

[Link 1]: http://support.typora.io/Draw-Diagrams-With-Markdown/
[https_blog.csdn.net_qq_41261251_article_details_102817673]: https://blog.csdn.net/qq_41261251/article/details/102817673
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjYxMjUx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/42c5e303bdc8474bac7d433a66916acb.png
[js-sequence]: https://bramp.github.io/js-sequence-diagrams/
[flowchart.js]: http://flowchart.js.org/
[mermaid]: https://mermaid-js.github.io/mermaid/#/