Typora--Draw Diagrams With Markdown

阅读量：5813 次

发布时间：2019-06-18

本文共 2859 字，大约阅读时间需要 9 分钟。

Typora

Typora supports some Markdown extension for diagrams, you could enable this feature 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.

Sequence

It is powered by , which would turn following code block into rendered diagrams:

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

Snip20160816_1

Please refer for syntax explanation.

Flowchart

It is powered by , which would turn following code block into rendered diagrams:

```flowst=>start: Startop=>operation: Your Operationcond=>condition: Yes or No?e=>endst->op->condcond(yes)->econd(no)->op```

Snip20160816_2

Mermaid

Typora also has integration with , which supports sequence, flowchart and Gantt.

Sequence

see

```mermaid%% Example of sequence diagram  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```

Snip20160816_3

Flowchart

see

```mermaidgraph LRA[Hard edge] -->B(Round edge)    B --> C{Decision}    C -->|One| D[Result one]    C -->|Two| E[Result two]```

Snip20160816_4

Gantt

see

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

https://support.typora.io/Draw-Diagrams-With-Markdown/

转载于:https://www.cnblogs.com/softidea/p/9447192.html

你可能感兴趣的文章