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 文件到本地磁盘。
此外,您可以右键单击图表以将其复制到剪贴板中。