使用 Markdown 绘制图表

---

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

• Markdown
  date: 2024-01-13 22:41:36

---

1 前提

Typora 支持一些图表的 Markdown 扩展，要使用此功能，请先在 Markdown 部分的首选项面板→启用图表。

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

2 时序图

此功能使用 js-sequence，它将以下代码块转换为呈现的图表：

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

有关详细信息，请参阅此语法说明。

2.1.1 序列图选项

您可以更改 CSS 变量来设置序列图的主题，支持的值为 （默认） 和 .例如，在自定义 CSS 中添加以下 CSS，您将获得：--sequence-theme``simple``hand

:root {
  --sequence-theme: hand
}

–sequence-theme：简单	–序列主题：手绘

|

3 流程图

此功能使用 flowchart.js，它将以下代码块转换为呈现的关系图：

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

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

4 mermaid

Typora 还与 mermaid 集成，支持序列图、流程图、甘特图、类和状态图以及饼图。

4.1 时序图

有关详细信息，请参阅这些说明。

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

4.2 流程图

有关详细信息，请参阅这些说明。

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

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

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

4.5 状态图

有关详细信息，请参阅这些说明。

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

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

4.6 饼图

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

4.7 需求图

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

您可以在此处找到详细信息。

```mermaid
requirementDiagram

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

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
```

4.8 Gitgraph 图表

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

您可以在此处找到详细信息。

```mermaid
gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit
```

4.9 C4 图（兼容 plantUML）

Mermaid 的 c4 图语法与 plantUML 兼容。

您可以在此处找到详细信息。

4.10 思维导图

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

您可以在此处找到详细信息。

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

4.11 全局Mermaid选项

4.11.1 概述

您可以通过添加自定义 CSS 来更改 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*/
}

请注意，如果您导出的文档具有当前使用的主题以外的其他主题，则某些mermaid选项将不会应用于导出的 HTML/PDF/图像。例如，如果您当前使用它们 Github，但在导出到 PDF 时，您为 PDF 导出设置了主题 YYY，并且 YYY.css 定义 --mermaid-sequence-numbers: on ，则 --mermaid-sequence-numbers: on 不会应用于导出的 PDF。

4.11.2 图对齐

您可以在添加自定义 CSS 以左对齐图表之后添加以下自定义 CSS。

.md-diagram-panel-preview {text-align:left;}

4.11.3 Mermaid主题

新增 --mermaid-theme css 变量，快速定义适合你主题的美人鱼主题，取值可以是base, default, dark, forest, neutral, night （夜间主题用到的那个），例如：

CSS的	美人鱼演示
:root {--mermaid-theme:dark;}
:root {--mermaid-theme:neutral;}
:root {--mermaid-theme:forest;}

4.11.4 自动编号

添加自定义 CSS 将为美人鱼中的序列启用自动编号：--mermaid-sequence-numbers: on;

–mermaid-sequence-numbers：关闭	–mermaid-sequence-numbers：开

您可以在 https://mermaid-js.github.io/mermaid/#/./directives 上找到完整的文档。

5 在图表上另存为/复制

您可以右键单击图表以将其保存为 SVG、PNG 或 JPG 文件到本地磁盘。

此外，您可以右键单击图表以将其复制到剪贴板中。

获取 Typora / 帮助改进我们的文档