Typora基础使用教程-用Markdown画图表(流程图)

2021-03-13 17:49 阅读:2625

Typora支持一些图表的Markdown扩展,您可以从首选项面板启用此功能。

当导出为HTML、PDF、epub、docx时,还将包括那些呈现的图表,但在当前版本中将标记导出为其他文件格式时,不支持图表功能。此外,您还应该注意到,标准Markdown、CommonMark或GFM不支持图表。因此,Typora仍然建议您插入这些图的图像,而不是直接在Markdown中编写它们。

顺序图

这会将以下代码块转换为渲染图:

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

请参阅 这里 语法解释.

流程图

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

Typora还与 mermaid 相结合,支持序列、流程图和甘特图。

顺序图

文档 请点击这里查看

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

流程图

文档 请点击这里查看

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

甘特图

文档 请点击这里查看

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

{{commentTotal}} 条评论

{{item.nickname}}
{{item.create_date}}
{{item.content}}
- 上拉或点击加载更多 -
- 加载中 -
- 没有更多了 -
- 本文链接 -