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

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

博客的意义

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

博客第一篇

第一篇博客，就说说写博客的那点事。写博客，不用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显示效果图：

Created with Raphaël 2.1.0 张三 张三 李四 李四 嘿，小四儿, 写博客了没? 李四愣了一下，说： 忙得吐血，哪有时间写。

• 关于 序列图 语法，参考 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显示效果图：

Created with Raphaël 2.1.0 开始 我的操作 确认？ 结束 yes no

• 关于 流程图 语法，参考 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
 ```

Created with Raphaël 2.1.0 AXI_interface序列图参照物 AXI_Master1 AXI_Master1 AXI_slaver AXI_slaver AXI_Master2 AXI_Master2 请求(valid) awvalid/arvalid 握手(ready) awready/arready 读返回(rdata) rvalid 请求(valid) awvalid/arvalid 握手(ready) awready/arready 读返回(rdata) 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
 ```

Created with Raphaël 2.1.0 序列图虚线和箭头 AXI_Master1 AXI_Master1 AXI_slaver AXI_slaver 请求(valid) awvalid/arvalid 握手(ready) awready/arready 读返回(rdata) 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
 ```

Created with Raphaël 2.1.0 Note left of AXI_Master2:左侧加注释 AXI_Master2 AXI_Master2 AXI_Master1 AXI_Master1 AXI_slaver AXI_slaver AXI_Master2左侧加注释----> <----AXI_Master2右侧加注释 AXI_Master1左侧加注释----> 请求(valid) awvalid/arvalid 握手(ready) awready/arready 读返回(rdata) rvalid 请求(valid) awvalid/arvalid 握手(ready) awready/arready 读返回(rdata) 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
 ```

Created with Raphaël 2.1.0 participant AXI_Master2 AXI_Master2 AXI_Master2 AXI_slaver AXI_slaver AXI_Master1 AXI_Master1 请求(valid) awvalid/arvalid 握手(ready) 读返回(rdata) rvalid 请求(valid) awvalid/arvalid 握手(ready) awready/arready 读返回(rdata) 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...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
 ```

Created with Raphaël 2.1.0 http://www.google.com Start http://www.google.com My Operation http://www.baidu.com Yes or No? http://www.baidu.com Good idea catch something... http://www.google.com End http://www.google.com Stuff My Subroutine yes no yes no

流程图的语法大体分为两段，第一段用来定义元素，第二段用来连接元素
定义元素阶段的语法是
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命令符号都要求前后保证空行。

---

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