不想看文章的可以看视频:
知乎视频www.zhihu.com今天继续分享一下使用 Typora 在画图方面的小技巧。是的,你没看错,Typora 也能”画“图。
说是画图,但并不像其他专业的绘图软件那样,通过拖拖拽拽一些元素,画出流程图、时序图等。Typora 的制图功能是由 Mermaid 强力驱动,如果你使用过 PlantUML,那么 Mermaid 也非常容易上手。
Mermaid
Mermaid[1] 是一种简单的类似 Markdown 的脚本语言,通过 JavaScript 编程语言,将文本转换为图片。因此,真正实现画图功能的并不是 Typora 本身,它只是内置了对 Mermaid 的支持。
![ef6bb6e35dd37db59166f9a8539abccf.png](https://i-blog.csdnimg.cn/blog_migrate/300cdb463de2884ee6e58f93227baf52.jpeg)
Mermaid 支持绘制非常多种类的图,常见的有时序图、流程图、类图、甘特图等等。下面分享一下如何绘制这些图,语法非常容易掌握。
先在 Typora 中,输入 ```mermaid 然后敲击回车,即可初始化一张空白图。
流程图
语法解释:graph
关键字就是声明一张流程图,TD
表示的是方向,这里的含义是 Top-Down 由上至下。
graph TD;
A-->B;
A-->C;
B-->D;
![7242babc4c534146cfa7f45a0ef619c5.png](https://i-blog.csdnimg.cn/blog_migrate/b350cb3a687e3feee134425d8d886382.png)
时序图
语法解释:->>
代表实线箭头,-->>
则代表虚线。
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
![d8e3b8ad96b94f369f363c2c9f98f351.png](https://i-blog.csdnimg.cn/blog_migrate/dc1ddba1c201edb6cc9b878bbc846430.png)
状态图
语法解释:[*]
表示开始或者结束,如果在箭头右边则表示结束。
stateDiagram
[*] --> s1
s1 --> [*]
![f9ddd2b8055066d68e9758c76316f53e.png](https://i-blog.csdnimg.cn/blog_migrate/25f2c3d373f2274640967507d6f31a62.png)
类图
语法解释:<|--
表示继承,+
表示 public
,-
表示 private
,学过 Java 的应该都知道。
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()
}
![1e8d7d00f1b6282a2f4f4dc728cfc804.png](https://i-blog.csdnimg.cn/blog_migrate/876071179af969cc0ffe202ba86772d5.png)
甘特图
甘特图一般用来表示项目的计划排期,目前在工作中经常会用到。
语法也非常简单,从上到下依次是图片标题、日期格式、项目、项目细分的任务。
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A task :a1, 2020-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2020-01-12 , 12d
another task : 24d
![d9b6a9eddade811a28df372b0f326109.png](https://i-blog.csdnimg.cn/blog_migrate/632a68951e17dd86d9c2ac0826ee6951.jpeg)
饼图
饼图使用 pie
表示,标题下面分别是区域名称及其百分比。
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
![db41548c350351e3906dd6d82688b3a2.png](https://i-blog.csdnimg.cn/blog_migrate/1d760bf75ad409c938ea7bbe2442c49e.jpeg)
导出
绘制好的图片可以选择菜单/文件/导出,导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的,你可以复制 SVG 内容,导入到 SVG 的图片编辑器中进一步操作。
![1066ef81c868ffaad8bc991d781e0cb0.png](https://i-blog.csdnimg.cn/blog_migrate/b97b5d9236a12b46e621d21deef50dd6.jpeg)
Mermaid 官方有一个在线的工具,可以导出 SVG 和 PNG。
Mermaid live editormermaid-js.github.io小结
可以看到,Mermaid 使用非常简洁优雅的语法,让使用者可以快速地画出常用的图形,并且图片的非常美观,配色和谐,富有现代感。这个 Typora 画图的功能,你学会了吗?
我还写过关于 Typora 的一些使用小技巧,欢迎阅读
https://zhuanlan.zhihu.com/p/163608242zhuanlan.zhihu.com![7b85318e5d6c7bf7cedba9d98da7fa24.png](https://i-blog.csdnimg.cn/blog_migrate/63a3c1b76e157ed595cc500371776d8d.png)
有人在评论区提到了「语雀」,我也写了一篇文章。和 Typora 相比,语雀具有更强大的在线编辑器,同样也支持 Mermaid 语法进行制图,对各种文档附件支持程度极高。
https://zhuanlan.zhihu.com/p/220504919zhuanlan.zhihu.com![a7511fa7ffcf80a7a51a168be65e1403.png](https://i-blog.csdnimg.cn/blog_migrate/0f9e108a05dd4dff8554a5af6c077aed.jpeg)
参考资料
[1]
Mermaid: https://mermaid-js.github.io/mermaid/#/