晚照-基于51CTO社区下的制图功能详解

本文引言

都说文不如表，表不如图。近日社区出文Markdown重磅新增流程图、序列图和甘特图，欢迎各位创者继续使用，标志着在社区发帖的时候可以使用上述图来更好输出。但很多小伙伴不知道可以制作哪些图、如何制图。现笔者通过对Typora官网的学习，总结了社区可用的流程图、序列图、甘特图的制图办法。

注：

1. 标准 Markdown、CommonMark 或 GFM 不支持图表。
2. 社区暂不支持Mermaid美人鱼语言进行制图。****Mermaid的功能很强大呀！希望早日上线！

一、社区可用图表声明

• //格式：

``` + 关键字
内容
```

对于时序图，Typora的关键字是sequence

对于甘特图，Typora需要在Mermaid下用gantt

二、流程图

• 流程图由节点和边构成，格式如下：

• ```flow
  //描述节点的模块
  节点类型格式：节点名称
  
  //描述边的模块
  节点-->节点
  ```
  

• 节点类型格式：

  • st=>start：开始
  • op=>operation：普通节点
  • cond=>condition: 分支节点

注：

1.必须以start开始

2.节点格式后面务必跟一个空格然后再写节点名称

• 示例文解：

• 平台演示

注：

1. 感觉在平台上做流程图有些局限（如果有Mermaid的话效果和可用的东西会更丰富）

2. 流程图的模块如果重复，将会覆盖。

三、时序图

• 由对象和消息构成，格式如下：

• ```sqe
  对象+箭头类型+对象+“：”+消息
  小贴士
  ```
  

• 箭头类型（均实测可用）：

• 小贴士位置：
  • Note left of 对象：
  • Note right of 对象：
• 别名：
  • participant 对象 as 别名

上下均不能，严格保持有且仅有一个空格

• 示例文解：

• 平台演示

四、甘特图

• 甘特图将每个计划任务记录为一个从左向右延伸的连续条。x 轴代表时间，y 轴记录不同的任务及其完成的顺序。

• 标题

的title是一个可选的甘特图的顶部被显示来描述图表整个字符串。

• 节语句

您可以将图表分成不同的部分，例如将项目的不同部分（如开发和文档）分开。

为此，请以section关键字开始一行并为其命名。（请注意，与整个图表的标题不同，此名称是必需的。

• 设置日期

dateFormat定义甘特图元素的日期输入格式。这些日期在呈现的图表输出中的表示方式由 定义axisFormat。

• 设置输入日期格式

默认输入日期格式为YYYY-MM-DD. 您可以定义您的自定义dateFormat.

• 在轴上的输入日期格式

• 示例文解

• 平台演示

总结

• 社区推出的三个图可以有效帮助各位更好输出内容
• 希望Mermaid可以早日上线！社区越来越好！