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

Der_带鱼
发布于 2021-7-22 17:38
浏览
3收藏

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

本文引言

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

注:

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

一、社区可用图表声明

  • //格式:
``` + 关键字
内容
```
关键字 作用
flow 声明流程图
seq 声明时序图
gantt 声明甘特图

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

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

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

二、流程图

  • 流程图由节点和边构成,格式如下:

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

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

注:

1.必须以start开始

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

  • 示例文解:

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

  • 平台演示

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

注:

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

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

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

三、时序图

  • 由对象和消息构成,格式如下:

  • ```sqe
    对象+箭头类型+对象+“:”+消息
    小贴士
    ```
    
  • 箭头类型(均实测可用):

类型 描述
-> 没有箭头的实线
–> 没有箭头的虚线
->> 带箭头的实线
–>> 带箭头的虚线
-X 实线末尾有一个十字
- X 末端带有十字的虚线。
-) 实线末尾有一个开放箭头(异步)
–) 末尾带有开放箭头的虚线(异步)
  • 小贴士位置:
    • Note left of 对象:
    • Note right of 对象:
  • 别名:
    • participant 对象 as 别名

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

  • 示例文解:

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

  • 平台演示

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

四、甘特图

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

  • 标题

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

  • 节语句

您可以将图表分成不同的部分,例如将项目的不同部分(如开发和文档)分开。

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

  • 设置日期

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

  • 设置输入日期格式

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

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

  • 在轴上的输入日期格式

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

  • 示例文解

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

  • 平台演示

晚照-基于51CTO社区下的制图功能详解-鸿蒙开发者社区

总结

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
8
收藏 3
回复
举报
3条回复
按时间正序
/
按时间倒序
Anzia
Anzia

楼主把写贴研究很细致hhh,写出来的文章让人感觉很舒服

1
回复
2021-7-22 23:03:59
SummerRic
SummerRic

也太优秀了吧,做MD的技术小哥哥诚惶诚恐啊。

回复
2021-7-23 12:04:06
SummerRic
SummerRic 回复了 Anzia
楼主把写贴研究很细致hhh,写出来的文章让人感觉很舒服

这回复极度舒适。

回复
2021-7-23 12:07:58
回复
    相关推荐