一旦从首选项面板中启用,Typora就支持图表的某些Markdown扩展。
当导出为HTML,PDF,epub,docx时,这些渲染图也将包括在内,但将markdown导出为当前版本的其他文件格式时,不支持图功能。此外,您还应该注意,标准Markdown,CommonMark或GFM不支持图表。因此,我们仍然建议您插入这些图的图像,而不是直接将它们写在Markdown中。
顺序图
此功能使用js-sequence,它将以下代码块转换为呈现的图:
sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
有关更多详细信息,请参见此语法说明。
流程图
此功能使用流程图.js,它将以下代码块转换为呈现的图:
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集成,后者支持顺序图,流程图,Gantt Charts,类和状态图以及饼图。
顺序图
有关更多详细信息,请参见这些说明。
gfm
%% 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]
Gantt Charts
有关更多详细信息,请参见这些说明。
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
类图
有关更多详细信息,请参见这些说明。
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()
}
状态图
有关更多详细信息,请参见这些说明。
mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
饼状图
mermaid
pie
title Pie Chart
"Dogs" : 386
"Cats" : 85
"Rats" : 150
参考
作者:时刻在奔跑
链接:https://juejin.im/post/6893436635476819982
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com