用 Markdown 画图 #

Typora 支持一些用于图表的 Markdown 扩展。

当导出为 HTML、PDF、epub、docx 时，那些渲染过的图表也会被包括在内，但在当前版本中，当把 markdown 导出为其他文件格式时，不支持图表功能。此外，你也应该注意到，标准的 Markdown、CommonMark 或 GFM 都不支持图表。因此，我们仍然建议你插入这些图表的图像，而不是直接在 Markdown 中写它们。

序列图（Sequence Diagrams） #

这个功能使用 js-sequence (opens new window) ，它把下面的代码块渲染成一个图表。

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

更多细节，请参见语法解释 (opens new window)。

序列图选项 #

你可以改变CSS变量--sequence-theme来设置序列图的主题，支持的值是simple（默认）和hand。

流程图（Flowcharts） #

这个功能使用flowchart.js (opens new window)，它将以下代码块变成了一个渲染的图表。

```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 (opens new window)集成，它支持顺序图、流程图、甘特图、类图和状态图以及饼图。

序列图 #

更多细节见这些说明 (opens new window)。

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

流程图 #

更多细节见这些说明 (opens new window)。

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

甘特图 #

更多细节见这些说明 (opens new window)。

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

类图 #

更多细节见这些说明 (opens new window)。

```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()
      }
```

状态图 #

更多细节见这些说明 (opens new window)。

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

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

饼图 #

```mermaid
pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150
```

需求图（Requirement Diagram） #

需求图提供了需求及其相互之间以及其他已记录元素之间的连接的可视化。建模规范遵循SysML v1.6定义的规范。

更多细节见这些说明 (opens new window)。

requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Git 图（Gitgraph Diagrams） #

Git 图是 git 提交和 git 操作（命令）在各个分支上的图形表示。

更多细节见这些说明 (opens new window)。

gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

C4 图（plantUML 兼容） #

Mermaid 的 c4 图语法与 plantUML 兼容。

更多细节见这些说明 (opens new window)。

思维导图 #

（此功能需要 Typora ≥ 1.5.0）思维导图是一种图表，用于将信息直观地组织成层次结构，显示整体各部分之间的关系。它通常是围绕一个单一的概念创建的，在空白页的中心绘制为图像，并向其中添加相关的想法表示，例如图像、文字和部分文字。主要思想直接与中心概念相关，其他思想从这些主要思想中分支出来。

更多细节见这些说明 (opens new window)。

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

全局选项 #

概述 #

你可以通过添加自定义CSS (opens new window)来改变Mermaid选项，支持的选项包括。

:root {
  --mermaid-theme: default; /*or base, dark, forest, neutral, night */ --mermaid-font-family:"trebuchet ms", verdana, arial, sans-serif; --mermaid-sequence-numbers: off; /* or "on", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/ --mermaid-flowchart-curve: linear /* or "basis", see https://github.com/typora/typora-issues/issues/1632*/; --mermaid-gantt-left-padding:75; /* see https://github.com/typora/typora-issues/issues/1665*/
}

请注意，如果你用其他主题导出文件，而不是当前使用的主题，一些美人鱼选项将不应用于导出的 HTML/ PDF/ 图片。例如，如果你目前使用的是 Github，但在导出 PDF 时，你为 PDF 导出设置了主题 YYY，而 YYY.css 定义了 --mermaid-sequence-numbers: on，那么 --mermaid-sequence-numbers: on 将不会应用于导出的 PDF。