Typora--Draw Diagrams With Markdown

最新推荐文章于 2025-06-20 11:15:14 发布

weixin_34357928

最新推荐文章于 2025-06-20 11:15:14 发布

阅读量518

点赞数

文章标签： markdown

本文介绍如何在Typora中利用Markdown语法扩展特性绘制流程图、序列图及甘特图等图表。借助js-sequence、flowchart.js及mermaid等工具，可以直接在Markdown文件中编写代码块来生成各种类型的图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 js-sequence, which would turn following code block into rendered diagrams:

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

Snip20160816_1

Please refer here for syntax explanation.

Flowchart

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

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

st->op->cond
cond(yes)->e
cond(no)->op
```

Snip20160816_2

Mermaid

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

Sequence

see this doc

```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 this doc

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

Snip20160816_4

Gantt

see this doc

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