f分布表完整图a=0.01_使用Typora绘制图(表)

使用Typora 绘制图(表)

@author: 加贝

🔔受限于微信公众平台政策, 不得插入非微信域名的链接, 因此本文不得不取消全部的跳转链接, 如果想要了解更多还请点击原文链接进入我的个人博客阅读😉

在学习语法之前, 不妨花一点时间阅读以下官方支持文档, 再决定学习本主题的范围和深度

(本篇文章中出现的译文均为笔者翻译或注释, 内容仅供参考)

Draw Diagrams With Markdown

August 15, 2016 by typora.io

Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel.

When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version*. Besides, you should also notice that diagrams is not supported by standard Markdown, CommonMark or GFM. Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.

---

使用Typora绘制图(表)

August 15, 2016 by typora.io

Typora 可以支持一些Markdown的图表扩展(语法), 如果你在偏好设置中选择开启(支持性)

当导出为.html, .PDF, .epub, .docx时这些渲染的图(表)依然会被包括进来但是图(表)特性在当前(四年前的远古版本)版本中由Markdown导出到其他格式时不被支持. 另外🔔, 你也应该注意到图(表)并不被标准Markdown, CommonMark 或 GFM 所支持;

因此💡, 我们依然建议你选择插入图片而不是使用直接使用Markdown书写

那么接下来, 就是正文内容!🎉

正文目录:

• 序列图

• 流程图

• Mermaid(一个Markdown语法扩展, 但是在Typora可查的文档中仅支持以下的子列表中列出的特性)

  • Mermaid序列图

  • Mermaid流程图

  • Mermaid甘特图

  • Mermaid类图

  • Mermaid状态图

  • Mermaid饼图

• 特性总结

  • 个人小结

🔔: Typora绘制的图(表)中对于对象的数量的支持或许是有限的, 因此建议在规划事件或逻辑顺序前先对所需对象数量的支持性进行检查

---

序列图

This feature uses js-sequence, which turns the following code block into a rendered diagram:

---

这个特性是通过 js-sequence所实现的, 可以将以下代码转换为渲染图

 ```sequenceAlice->Bob: Hello Bob, how are you?Note left of Alice: Alice thinksNote right of Alice: Alice thinksNote left of Bob: Bob thinksNote right of Bob: Bob thinksBob-->Alice: I am good thanks!```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

结果如下:

💡对象的数量并不局限于两个, 比如也可以写成👇这样; 但或许是有上限的, 因此还是建议在规划事件或逻辑顺序前先对所需对象数量的支持性进行检查

 ```sequencea-->b: a2ba-->c: a2ca-->d: a2da-->e: a2ea-->f: a2fa-->g: a2ga-->h: a2ha-->i: a2ia-->j: a2ja-->k: a2k```

特性表

语法	名称(功能)	方法(示例)
-> :	事件线(直线): 事件	对象a->对象b: 事件1
--> :	事件线(直线): 事件	对象a-->对象b: 事件1
note left/right of :	备注	note left of 对象a:  备注1note right of 对象b: 备注2

---

流程图

This feature uses flowchart.js, which turns the following code block into a rendered diagram:

---

这个特性是通过 flowchart.js所实现的, 可以将以下代码转换为渲染图

 ```flowst=>start: Startop=>operation: Your Operationcond=>condition: Yes or No?e=>endst->op->condcond(yes)->econd(no)->op```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

结果如下:

💡同样的, 对象的数量并不局限于两个, 但或许是有上限的, 因此还是建议在规划事件或逻辑顺序前先对所需对象数量的支持性进行检查

特性表

语法	名称(功能)	方法(示例)
st=>start:	开始(声明): 显示文本	st=>start: 开始
op=>operation:	选项(声明): 显示文本	op=>operation: 行为
cond=>condition:	条件(声明): 显示文本	cond=>condition: 是/否?
e=>end	结束(声明)	e=>end
->	事件线(实线)	st->op->condcond(yes)->econd(no)->op🔔cond()的参数似乎必须是"yes"和"no"

---

Mermaid

Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.

---

Typora还集成了mermaid, 支持其中的序列图, 流程图, 甘特图, 类图, 状态图和饼图

---

Mermaid序列图

For more details see these instructions.

---

通过👉Mermaid序列图文档查看更多细节

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

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表

语法	名称(功能)	方法(示例)
sequenceDiagram	声明	段首声明用
->> :	事件线(实线)	对象a->>对象b:事件文本
alt	情况替换文本	alt 条件/情况
else	(其他)情况替换文本	else 条件/情况
opt	选择性文本	opt 条件/情况
end	结束(声明)	段尾结束
%%	注释

---

Mermaid流程图

For more details see these instructions.

---

通过👉Mermaid流程图文档查看更多细节

语法

横向流程图

 ```mermaidgraph LRid1[alt] -->id2(alt)id2 --> id3{alt}id3 -->|情况1| id4[结果1]id3 -->|情况2| id5[结果2]```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

纵向流程图:

 ```mermaidgraph TDid1[alt] -->id2(alt)id2 --> id3{alt}id3 -->|情况1| id4[结果1]id3 -->|情况2| id5[结果2]id3 -->|情况3| id6[结果3]```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表

语法	名称(功能)	方法(示例)
graph LR/TD	声明	横向制图用"LR"纵向制图用"TD"
id[alt]	直角矩形	id[alt]
id(alt)	圆角矩形	id(alt)
id{alt}	菱形(结点)	id{alt}
-->	事件线(实线)	对象a-->对象b

---

Mermaid甘特图

For more details see these instructions.

---

通过👉Mermaid甘特图文档查看更多细节

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

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表

语法	名称(功能)	方法(示例)
gantt	类型声明	段首声明
dateFormat	时间格式	dateformat: YYYY-MM-DDdatefomat: MM-DD-YYYYetc(更多的格式查看👉Mermaid甘特图文档)
title	甘特图标题	title xx项目管理表
section	项目名称(分区)	section 项目1
:done	完成(状态)	事件1    :done, ...
:active	正在进行(状态)	事件1    :active, ...
:crit	critical, 关键任务	事件1    :crit, ...
des>	description, 任务描述(指针或者选择器)	des>,

关于"des"的补充

description, 个人认为应该理解为一个对事件时间节点的快速标记语法;

首先这种标记的基础和原理是甘特图本身就是"在时间轴上基于事件地描述整个项目流程", 因此每个项目的事件还可以用"某事件后多久"来进行定位(和描述), 这样一来, 许多事件可以很方便的"挂"在几个时间标记之后, 举个例子:

首先回顾一下这张图:

对于A section的定义, 其实就是定义了des1 - des4 四个重要时间点

 section A sectionCompleted task:done, des1, 2014-01-06,2014-01-08Active task     :active, des2, 2014-01-09, 3dFuture task     :des3, after des2, 5dFuture task2:des4, after des3, 5d

用画笔辅助理解起来就是👇这样的

这下就可以很清晰的理解:

"每个项目的事件还可以用某事件后多久来进行定位(和描述)"

了吧😜; 同理, 再回看其他分区的代码就可以发现其中很多的事件其实是使使用了A区几个事件时间的一种相对描述方法, 有点类似与使用变量存储一个属性来调控整体的方案, 至于利弊就看个人需求取舍啦😉

---

Mermaid类图

For more details see these instructions.

---

通过👉Mermaid类图文档查看更多细节

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

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表

语法	名称(功能)	方法(示例)
classDiagram	声明	段首声明
<|--	带箭头的连线(实线)	类a <|-- 类b
主类名 :	定义主类里面的内容	类a : 内容1类a : 内容2类a : 内容3
class 类名称{ }	定义子类里面的内容	class 类b{内容1内容2内容3}

---

Mermaid状态图

For more details see these instructions.

---

通过👉Mermaid状态图文档查看更多细节

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

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表

语法	名称(功能)	方法(示例)
stateDiagram	声明	段首声明
[*]	状态点	[*]-->对象a
-->	连接线(实线)	对象a-->对象b(对象可以是状态点)

---

Mermaid饼图

这里官方文档并没有给出更多, 但是Mermaid官方对于饼图的支持还是有的👉Mermaid饼图文档

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

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

语法	名称(功能)	方法(示例)
pie	声明	段首声明
title	标题	title 标题x
" " :	描述	"部分a": "部分b": "部分c": "部分d": 💡只需填入数量, 百分比是Mermaid自动求解的

---

特性总结

序列图

语法	名称(功能)	方法(示例)
-> :	事件线(实线)	对象a -> 对象b :
--> :	事件线(虚线)	对象a --> 对象b :
note left/right of :	备注	note left of 对象a:  note right of 对象b:

流程图

语法	名称(功能)	方法(示例)
st=>start:	开始	st=>start: 开始
op=>operation:	选项	op=>operation: 行为
cond=>condition:	条件	cond=>condition: 是/否?
e=>end	结束
->	事件线(直线)	st->op->condcond(yes)->econd(no)->op🔔cond()的参数似乎必须是"yes"和"no"

Mermaid序列图

语法	名称(功能)	方法(示例)
sequenceDiagram	声明	段首声明用
->> :	事件线(实线)	对象a-->对象b:事件文本
alt	情况替换文本	alt 条件/情况
else	(其他)情况替换文本	else 条件/情况
opt	选择性文本	opt 条件/情况
end	结束(声明)	段尾结束
%%	注释

Mermaid流程图

语法	名称(功能)	方法(示例)
graph LR/TD	声明	横向制图用"LR"纵向制图用"TD"
id[alt]	直角矩形	id[alt]
id(alt)	圆角矩形	id(alt)
id{alt}	菱形(结点)	id{alt}
-->	事件线(实线)	对象a-->对象b

Mermaid甘特图

语法	名称(功能)	方法(示例)
gantt	类型声明	段首声明
dateFormat	时间格式	dateformat: YYYY-MM-DDdatefomat: MM-DD-YYYYetc(更多的格式查看👉Mermaid甘特图文档)
title	甘特图标题	title xx项目管理表
section	项目名称(分区)	section 项目1
:done	完成(状态)	事件1    :done, ...
:active	正在进行(状态)	事件1    :active, ...
:crit	critical, 关键任务	事件1    :crit, ...
des>	description, 任务描述(指针或者选择器)	des>,

Mermaid类图

语法	名称(功能)	方法(示例)
classDiagram	声明	段首声明
<|--	带箭头的连线(实线)	类a <|-- 类b
主类名 :	定义主类里面的内容	类a : 内容1类a : 内容2类a : 内容3
class 类名称{ }	定义子类里面的内容	class 类b{内容1内容2内容3}

Mermaid状态图

语法	名称(功能)	方法(示例)
stateDiagram	声明	段首声明
[*]	状态点	[*]-->对象a
-->	连接线(实线)	对象a-->对象b(对象可以是状态点)

Mermaid饼图

语法	名称(功能)	方法(示例)
pie	声明	段首声明
title	标题	title 标题x
" " :	描述	"部分a": "部分b": "部分c": "部分d": 💡只需填入数量, 百分比是Mermaid自动求解的

👇点击" 阅读全文"即可前往本篇博客页面, 感谢您的阅读与支持😊

顺便点个👉" 在看"或👉 转发分享给朋友们吧😉