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

2024-06-16 09:18
文章标签 操作 博客 编辑 markdown csdn 第一篇 流程图 序列图

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

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

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...|requestst->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 ↩

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


http://www.chinasem.cn/article/1066057。

相关文章

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式，需要不断条件和优化提示词。记录一下调整好的提示词，以后在继续优化迭代。 1. 提示词 英文版本： You are an AI assistant tasked with extracting the content of
阅读更多...
动手学深度学习【数据操作+数据预处理】

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join('.', 'data'), exist_ok=True)data_file = os.path.join('.', 'data', 'house_tiny.csv')with open(data_file, 'w') as f:f.write('NumRooms,Alley,Price\n') # 列名f.write('NA
阅读更多...
线程的四种操作

线程的四种操作

所属专栏：Java学习        1. 线程的开启 start和run的区别： run：描述了线程要执行的任务，也可以称为线程的入口 start：调用系统函数，真正的在系统内核中创建线程（创建PCB，加入到链表中），此处的start会根据不同的系统，分别调用不同的api，创建好之后的线程，再单独去执行run（所以说，start的本质是调用系统api，系统的api
阅读更多...
Java IO 操作——个人理解

Java IO 操作——个人理解

之前一直Java的IO操作一知半解。今天看到一个便文章觉得很有道理（ 原文章），记录一下。 首先，理解Java的IO操作到底操作的什么内容，过程又是怎么样子。          数据来源的操作： 来源有文件，网络数据。使用File类和Sockets等。这里操作的是数据本身，1,0结构。    File file = new File("path");   字
阅读更多...
PDF 软件如何帮助您编辑、转换和保护文件。

PDF 软件如何帮助您编辑、转换和保护文件。

如何找到最好的 PDF 编辑器。 无论您是在为您的企业寻找更高效的 PDF 解决方案，还是尝试组织和编辑主文档，PDF 编辑器都可以在一个地方提供您需要的所有工具。市面上有很多 PDF 编辑器 — 在决定哪个最适合您时，请考虑这些因素。 1. 确定您的 PDF 文档软件需求。 不同的 PDF 文档软件程序可以具有不同的功能，因此在决定哪个是最适合您的 PDF 软件之前，请花点时间评估您的
阅读更多...
MySQL——表操作

MySQL——表操作

目录 一、创建表 二、查看表 2.1 查看表中某成员的数据 2.2 查看整个表中的表成员 2.3 查看创建表时的句柄 三、修改表 alter 3.1 重命名 rename 3.2 新增一列 add 3.3 更改列属性 modify 3.4 更改列名称 change 3.5 删除某列 上一篇博客介绍了库的操作，接下来来看一下表的相关操作。 一、创建表 create
阅读更多...
封装MySQL操作时Where条件语句的组织

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中，条件语句应该是相对难以处理的，毕竟条件语句太过于多样性。 条件语句大致分为以下几种： 1、单一条件，比如：where id = 1; 2、多个条件，相互间关系统一。比如：where id > 10 and age > 20 and score < 60; 3、多个条件，相互间关系不统一。比如：where (id > 10 OR age > 20) AND sco
阅读更多...
PHP7扩展开发之流操作

PHP7扩展开发之流操作

前言 啥是流操作？简单来讲就是对一些文件，网络的IO操作。PHP已经把这些IO操作，封装成流操作。这节，我们将使用PHP扩展实现一个目录遍历的功能。PHP示例代码如下： <?phpfunction list_dir($dir) {if (is_dir($dir) === false) {return;} $dh = opendir($dir);if ($dh == false) {ret
阅读更多...
浙大数据结构：树的定义与操作

浙大数据结构：树的定义与操作

四种遍历 #include<iostream>#include<queue>using namespace std;typedef struct treenode *BinTree;typedef BinTree position;typedef int ElementType;struct treenode{ElementType data;BinTree left;BinTre
阅读更多...
UML- 统一建模语言（Unified Modeling Language）创建项目的序列图及类图

UML- 统一建模语言（Unified Modeling Language）创建项目的序列图及类图

陈科肇 ============= 1.主要模型 在UML系统开发中有三个主要的模型： 功能模型：从用户的角度展示系统的功能，包括用例图。 对象模型：采用对象、属性、操作、关联等概念展示系统的结构和基础，包括类图、对象图、包图。 动态模型：展现系统的内部行为。 包括序列图、活动图、状态图。 因为要创建个人空间项目并不是一个很大的项目，我这里只须关注两种图的创建就可以了，而在开始创建UML图
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2