第一篇博客--CSDN写博客的markdown编辑操作---序列图和流程图

本文主要是介绍第一篇博客--CSDN写博客的markdown编辑操作---序列图和流程图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSDN写博客的markdown编辑操作序列图和流程图
- 博客的意义
- 博客第一篇
1序列图
- 1源代码
- 2显示效果图
2流程图
- 1源代码
- 2显示效果图
3序列图应用举例 1
- 1序列图-简单示例后续示例的参照对象
- 2序列图的虚线和箭头
- 3序列图加注释的位置
- 4序列图的对象重排序
4流程图举例 2

CSDN写博客的markdown编辑操作—序列图和流程图

博客的意义

总结回顾，温故知新；
用于与朋友技术交流；
常写博客，可以锻炼语言描述的能力，可以改善思维逻辑；对今后工作交流的正确性/完善性，很有益处。

博客第一篇

第一篇博客，就说说写博客的那点事。写博客，不用markdown编辑，对不起程序员的出身。

CDSN作为程序员的博客群，支持markdown编辑。
详情见
CSDN-Markdown更轻松地记录你的技术博文，感谢CSDN热心博友的分享！ - CSDN 官方博客 - 博客频道 - CSDN.NET
http://blog.csdn.net/blogdevteam/article/details/44590961

markdown以前只是听说，语法简单，花了一天感觉已入门。

熟悉vi/emacs的用户，可以选择下面的markdown编辑阅读器。最好下载客户端，很好的支持vi/emacs操作。
Cmd Markdown 编辑阅读器 - 作业部落出品
https://www.zybuluo.com/mdeditor#

这里只讲一下序列图和流程图的markdown操作。是否能替代visio有待研究。

1序列图：

1.1源代码：

源代码里的3个反单引号，要顶格写。鉴于markdown的语法原因。在最后一行行首加了一个空格。
代码复制使用时，要注意删减这个空格。后面的markdown源代码均有此问题。

```sequence
张三->李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四-->张三: 忙得吐血，哪有时间写。```

1.2显示效果图：

关于 序列图 语法，参考 js-sequence-diagrams by bramp

2流程图：

2.1源代码：

```flow
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？st->op->cond
cond(yes)->e
cond(no)->op```

2.2显示效果图：

关于 流程图 语法，参考 flowchart.js

3序列图应用举例 1

3.1序列图-简单示例（后续示例的参照对象）

```sequence
Title:AXI_interface序列图参照物
AXI_Master1->AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver->AXI_Master1: 握手(ready)  \nawready/arready
AXI_slaver->AXI_Master1: 读返回(rdata)\n rvalid
AXI_Master2->AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver->AXI_Master2: 握手(ready)\n awready/arready
AXI_slaver->AXI_Master2: 读返回(rdata)\n rvalid```

3.2序列图的虚线和箭头

```sequence
Title:序列图虚线和箭头
AXI_Master1-->>AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver-->AXI_Master1: 握手(ready)  awready/arready
AXI_slaver->AXI_Master1: 读返回(rdata)\n rvalid```

3.3序列图加注释的位置

```sequence
Title:Note left of AXI_Master2:左侧加注释
Note left of AXI_Master2:AXI_Master2左侧加注释---->
Note right of AXI_Master2:<----AXI_Master2右侧加注释
Note left of AXI_Master1:AXI_Master1左侧加注释---->
AXI_Master1->AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver->AXI_Master1: 握手(ready)  awready/arready
AXI_slaver->AXI_Master1: 读返回(rdata)\n rvalid
AXI_Master2->AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver->AXI_Master2: 握手(ready)\n awready/arready
AXI_slaver->AXI_Master2: 读返回(rdata)\n rvalid```

3.4序列图的对象重排序

```sequence
Title:participant AXI_Master2
participant AXI_Master2
participant AXI_slaver
participant AXI_Master1
AXI_Master1->AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver->AXI_Master1: 握手(ready) 
AXI_slaver->AXI_Master1: 读返回(rdata)\n rvalid
AXI_Master2->AXI_slaver: 请求(valid)\n awvalid/arvalid
AXI_slaver->AXI_Master2: 握手(ready)\n awready/arready
AXI_slaver->AXI_Master2: 读返回(rdata)\n rvalid```

4流程图举例 2

```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes 
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|requestst->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e```

流程图的语法大体分为两段，第一段用来定义元素，第二段用来连接元素
定义元素阶段的语法是
tag=>type: content:>url

tag就是一个标签，在第二段连接元素时用
type是这个标签的类型，从上段内容看有6种类型，分别为：

start
end
operation
subroutine
condition
inputoutput

content就是在框框中要写的内容，中英文均可，但有一点需要特别注意，就是type后的冒号与文本之间一定要有个空格，没空格会出问题。
url就是一个连接，与框框中的文本相绑定

连接元素阶段的语法就简单多了，直接用->来连接两个元素，需要注意的是condition类型，因为他有yes和no两个分支，所以要写成

c2(yes)->io->e 
c2(no)->op2->e

这样的格式。

<留给自己的一句备注>[^引用文献] 每个文献要加一行空行，否则markdown不识别。遇到的很多markdown命令符号都要求前后保证空行。

CSDN-Markdown编辑器之UML序列图 - 无知人生，记录点滴 - 博客频道 - CSDN.NET
http://blog.csdn.net/testcs_dn/article/details/44274339 ↩
markdown流程图语法 - aizhaoyu的专栏 - 博客频道 - CSDN.NET
http://blog.csdn.net/aizhaoyu/article/details/44350821 ↩

这篇关于第一篇博客--CSDN写博客的markdown编辑操作---序列图和流程图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！