使用Typora绘制图(表)

使用Typora 绘制图(表)

@author: NandHyf

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

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

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所实现的, 可以将以下代码转换为渲染图

​```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Note left of Alice: Alice thinks
Note right of Alice: Alice thinks
Note left of Bob: Bob thinks
Note right of Bob: Bob thinks
Bob-->>Alice: I am good thanks!
​```

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

结果如下:

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

​```mermaid
sequenceDiagram
a-->>b: a2b
a-->>c: a2c
a-->>d: a2d
a-->>e: a2e
a-->>f: a2f
a-->>g: a2g
a-->>h: a2h
a-->>i: a2i
a-->>j: a2j
a-->>k: a2k
​```

特性表

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

---

流程图

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

---

这个特性是通过 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
​```

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

结果如下:

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

特性表

语法	名称(功能)	方法(示例)
st=>start:	开始(声明): 显示文本	st=>start: 开始
op=>operation:	选项(声明): 显示文本	op=>operation: 行为
cond=>condition:	条件(声明): 显示文本	cond=>condition: 是/否?
e=>end	结束(声明)	e=>end
->	事件线(实线)	st->op->cond cond(yes)->e cond(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流程图文档查看更多细节

语法

横向流程图

​```mermaid
graph LR
id1[alt] -->id2(alt)
id2 --> id3{alt}
id3 -->|情况1| id4[结果1]
id3 -->|情况2| id5[结果2]
​```

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

纵向流程图:

​```mermaid
graph TD
id1[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-DD datefomat: MM-DD-YYYY etc(更多的格式查看👉Mermaid甘特图文档)
title	甘特图标题	title xx项目管理表
section	项目名称(分区)	section 项目1
:done	完成(状态)	事件1 :done, …
:active	正在进行(状态)	事件1 :active, …
:crit	critical, 关键任务	事件1 :crit, …
des<x>	description, 任务描述(指针或者选择器)	des<x>, <对项目事件的时间描述>

关于"des"的补充

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

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

首先回顾一下这张图:

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

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

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

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

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

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

---

Mermaid类图

For more details see these instructions.

---

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

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

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

特性表

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

---

Mermaid状态图

For more details see these instructions.

---

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

​```mermaid
stateDiagram
    [*] --> Still
    Still --> [*]

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

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

特性表

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

---

Mermaid饼图

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

​```mermaid
pie
    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->cond cond(yes)->e cond(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-DD datefomat: MM-DD-YYYY etc(更多的格式查看👉Mermaid甘特图文档)
title	甘特图标题	title xx项目管理表
section	项目名称(分区)	section 项目1
:done	完成(状态)	事件1 :done, …
:active	正在进行(状态)	事件1 :active, …
:crit	critical, 关键任务	事件1 :crit, …
des<x>	description, 任务描述(指针或者选择器)	des<x>, <对项目事件的时间描述>

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自动求解的