使用markdown玩转代码架构设计

文章目录

• 前言：
• 平台介绍：
• 正文开始：
• • 流程图：
  • 泳道图
  • UML类图
• 补充：
• 代码：

前言：

如果你像我一样是一名IT开发工程师的话，你应该不会没有听过markdown文件；

或者你现在正在前往这条不归路的话，那你也应该学习markdown，它的强大之处和编写效率可能超乎你的想象~~

平时开发生活中基本上替代一大部分word/notepad等文本类软件的职能是完全没有问题的，想目前这篇博客就是使用markdown写的

不过这还没啥，本期我将介绍给大家如何使用markdown进行代码架构设计图的**“绘画”**，在文章的最后会附上代码链接~

平台介绍：

目前用过几款编写markdown文件，个人还是习惯使用typora，不过今年这个软件最新版要收费了，大家不想花钱下载beta版本版本就行，下载点我，问题不大

正文开始：

一口吃不出来一个胖子，入坑先入门，我们从简单开始“循序渐进”地来~~

流程图：

单向流程很简单，于是你可以灵活变动去改换式样，或者画成从上往下的也行，如下：

字母表示	含义
TB	从上到下
BT	从下到上
LR	从左到右
RL	从右到左

表述	说明	含义
id[文字]	矩形节点	表示过程
id(文字)	圆角矩形节点	表示开始与结束
id((文字))	圆形节点	表示连接。为避免流程过长或有交叉，可将流程切开成对
id{文字}	菱形节点	表示判断、决策
id>文字 ]	右向旗帜节点

1. T、B、L、T分别是Top/Bottom/Left/Right的缩写

2. id为节点的唯一标识，类似于变量。括号内为节点要显示的文字

3. 单向箭头为流程进行方向。支持虚线与实线，有箭头与无箭头、有文字与无文字。分别是—、-.-、 -->、-.->、–文字–>、-.文字.->、–文字—、-.文字.-

4. 支持子图。如代码的subgraph。

泳道图

也叫序列图，一般包括5个部分，分别是：参与者、消息线、循环、选择、可选、并行、注解。

还是一样，先来个简单的

再来个复杂点的， 包括更多骚 *** 作

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线(主动发出消息)
–>>	有箭头的虚线(响应)
-x	末端为X的实线(主动发出异步消息)
–x	有箭头的实线(以异步形式响应消息)

alt 可以理解为可替代的方案，可能的情况

opt可以理解为一个if语句，满足条件下执行的 *** 作

UML类图

这个比较复杂，简单入个门就行，

要指定类成员(即任何属性或方法)的可见性，这些符号可以放在成员名之前，但它是可选的:

可见性	Java	UML
对所有类可见(公共的)	public	+
仅对本类可见(私有的)	private	-
对本包和所有子类可见(受保护的)	protected	#
对本包可见(包内部)	默认，不需要修饰符	_

还能指定类型

类的关系也很重要，如果一开始设计的时候就能设计好，那么后期编码会简单很多~

	描述	描述	说明
<|–	Inheritance	继承	一般而言，如果类A扩展类B,类A不但包含从类B继承的方法，还会拥有一些额外的功能。
*–	Composition	组合
o–	Aggregation	聚合	聚合关系意味着类A 的对象包含类B 的对象。
–>	Association	单向关联
–	Link (Solid)	双向关联
…>	Dependency	依赖	如果一个类的方法 *** 纵另一个类的对象， 我们就说一个类依赖于另一个类。
…|>	Realization	实现
…	Link (Dashed)

   
classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

不同的基数选项是:

• 1 只有1个
• 0..1 零或一
• 1..* 一个或多个
• * 许多
• n n {其中n> 1}
• 0..n 0至n {其中n> 1}
• 1..n 1至n{其中n> 1}

复杂的uml使用请参考：https://mermaid-js.github.io/mermaid/#/classDiagram

补充：

md文本还具备可迁移性，使用https://planttext.com/可以导出为图片，在一些需要使用图片的场景直接就可以使用了

代码：

个人惯例，直接上一波代码，或者大家可以直接git clone代码，大家赶紧收藏起来吧
本页面的md文本是被平台渲染过的，查看代码内容直接看链接
→
https://github.com/junkaitongxue/DreamKiteToolkit/blob/master/release/md/mermaid.md

欢迎大家留言评论~~

（以上为DreamKite本人原创，转载请附上原文链接）