首页 > 分享 > f分布表完整图a=0.01

f分布表完整图a=0.01

花匠小妙招
2025-01-17 14:56

使用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: 事件1note 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)->opcond()的参数似乎必须是"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, ...:critcritical, 关键任务事件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 : 内容3class 类名称{ }定义子类里面的内容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)->opcond()的参数似乎必须是"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, ...:critcritical, 关键任务事件1 :crit, ...des>description, 任务描述(指针或者选择器)des>, Mermaid类图语法名称(功能)方法(示例)classDiagram声明段首声明<|--带箭头的连线(实线)类a <|-- 类b主类名 :定义主类里面的内容类a : 内容1类a : 内容2类a : 内容3class 类名称{ }定义子类里面的内容class 类b{内容1内容2内容3} Mermaid状态图语法名称(功能)方法(示例)stateDiagram声明段首声明[*]状态点[*]-->对象a-->连接线(实线)对象a-->对象b(对象可以是状态点) Mermaid饼图语法名称(功能)方法(示例)pie声明段首声明title标题title 标题x" " :描述"部分a": "部分b": "部分c": "部分d": 只需填入数量, 百分比是Mermaid自动求解的点击" 阅读全文"即可前往本篇博客页面, 感谢您的阅读与支持顺便点个" 在看"或转发分享给朋友们吧