星城哈哈

# 3.Markdown

常见的Markdown编辑器：

  • MarkwondPad
  • MacDown
  • MWeb
  • Typora（推荐）
  • ...
xcooo

# Markdown的基础语法

  • 标题

    主要的作用就是用于形成比较有层次的大纲，便于组织内容。

    示例：

xcooo

代码：

# 第1章 课程介绍

## 学什么

## 技术栈

## 案例演示

## 课程目标

## 前置

- HTML
- CSS
- JavaScript

# 第2章 基础入门

## 安装

## hello world

## 开发的三种方式

### 方式一

### 方式二

### 方式三

# 第3章 标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

  • 字体

    示例：

    粗体：这是加粗的文字

    斜体：这是倾斜的文字

    删除线：这是加删除线的文字

    代码：

    **这是加粗的文字**
*这是倾斜的文字*
***这是斜体加粗的文字***
~~这是加删除线的文字~~
    1
    2
    3
    4

  • 引用

    示例：

    这里是引用

    这里是引用

    这是引用的内容

    代码：

    >这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容
    1
    2
    3

  • 分割线

    示例：

    （上面的是分割线）

    代码：

    ---
----
***
*****
    1
    2
    3
    4

  • 图片

    示例：

    xcooo

    代码：

    ![图片名称](图片路径)
    1

  • 超链接

    Markdown语法：Markdown基本语法 (opens new window)

    Mermaid：甘特图、流程图、时序图 (opens new window)

    代码：

    [链接名称](链接地址)
    1

  • 列表

    无序列表示例：

    • 列表内容
    • 列表内容
    • 列表内容

    代码：

    - 列表内容
+ 列表内容
* 列表内容
    1
    2
    3

    注意：- + * 跟内容之间都要有一个空格

    有序列表示例：

    1. 列表内容
    2. 列表内容
    3. 列表内容

    代码：

    1. 列表内容
2. 列表内容
3. 列表内容
    1
    2
    3

    注意：序号跟内容之间要有空格

  • 表格

示例：

表头 表头 表头
内容 内容 内容
内容 内容 内容

代码：

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容
1
2
3
4

在表头下方的分隔线标记中加入 :，即可标记下方单元格内容的对齐方式：

  • :--- 代表左对齐

  • :--: 代表居中对齐

  • ---: 代表右对齐

  • 代码

    • 行内代码

      示例：

      这里是一串行内代码

      代码：

      `这里是一串行内代码`
      1

  • 代码块

    示例：

    const str = 'hello world'

function consoleFunc(params){
  console.log(params)
}

consoleFunc(str)
    1
    2
    3
    4
    5
    6
    7

# Mardown进阶表格

# 流程图flow

参考链接：http://flowchart.js.org/ (opens new window)

示例：

st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
1
2
3
4
5
6
7

代码：

​```flow
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
​```
1
2
3
4
5
6
7
8
9
st=>start: 开始
lg=>operation: 登录开始
cond=>condition: 校验用户输入
cg=>operation: 登录成功
e=>end: 结束
st->lg->cond
cond(yes)->cg
cond(no)->lg
cg->e
1
2
3
4
5
6
7
8
9

# Mermaid图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

之前用过 PlantUML，但是发现这个东西的实现原理是生成 UML 的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。

官网：https://mermaidjs.github.io/ Github 项目地址：https://github.com/knsv/mermaid

接下来介绍 Mermaid 的流程图及序列图的语法，也就是大家在工作中常使用的图表。

mermaid 图表是以````mermaid 开始，以的代码块。

Mermaid语法，不是所有的Markdown编辑器都支持，比如github就不支持，笑哭~~

Mermaid 支持多种图表的方向，语法如下：

graph 方向描述
    图表中的其他语句...
1
2

其中“方向描述”为

用词 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右

从上到下

graph TB
	A-->B
1
2

从下到上

graph BT
	A-->B
1
2

从右到左

graph RL
	A-->B
1
2

从左到右

graph LR
	A-->B
1
2

  1. 流程图

    节点类型

    表述 说明
    > 添加尾部箭头
    - 不添加尾部箭头
    -- 单线
    –text– 单线上加文字
    == 粗线
    ==text== 粗线加文字
    -.- 虚线
    -.text.- 虚线加文字

    节点定义

    即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。

    表述 说明
    id[文字] 矩形节点
    id(文字) 圆角矩形节点
    id((文字)) 圆形节点
    id>文字] 右向旗帜状节点
    id{文字} 菱形节点

    演示：

    graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
    1
    2
    3
    4
    5
    6
    7

    代码：

    ​```mermaid
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
​```
    1
    2
    3
    4
    5
    6
    7
    8
    9
    graph TB
	var1(start)-->var2[登录输入]
	var2-->var3{判断用户输入}
	var3--是-->var4[登录成功]
	var3--否-->var2
	var4-->var5(结束)
    1
    2
    3
    4
    5
    6

  2. 时序图（序列图）

    消息线

    类型 描述
    -> 无箭头的实线
    --> 无箭头的虚线
    ->> 有箭头的实线
    -->> 有箭头的虚线
    -x 末端为叉的实线（表示异步）
    --x 末端为叉的虚线（表示异步）

    处理中

    在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态； 在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

    或者使用以下语法直接说明某个参与者进入“处理中”状态:

    activate 参与者
    1

    标注

    语法如下

    Note 位置表述 参与者: 标注文字
    1

    其中位置表述可以为

    表述 含义
    right of 右侧
    left of 左侧
    over 在当中，可以横跨多个参与者

    循环

    语法如下

    loop 循环的条件
    循环体描述语句
end
    1
    2
    3

    判断

    alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end
    1
    2
    3
    4
    5
    6
    7

    如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：

    opt 条件描述
    分支描述语句
end
    1
    2
    3

    演示：

    sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z--xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    代码：

    ​```mermaid
sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z--xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end
​```
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

  3. 甘特图

示例：

gantt
dateFormat YYYY-MM-DD

section S1
T1: 2014-01-01, 9d

section S2
T2: 2014-01-11, 9d

section S3
T3: 2014-01-02, 9d
1
2
3
4
5
6
7
8
9
10
11

代码：

​```mermaid
   gantt
   dateFormat YYYY-MM-DD
   
   section S1
   T1: 2014-01-01, 9d
   
   section S2
   T2: 2014-01-11, 9d
   
   section S3
   T3: 2014-01-02, 9d
1
2
3
4
5
6
7
8
9
10
11
12
gantt
	dateFormat YYYY-MM-DD
	
	section UI设计
	T1: 2019-10-01, 3d
	
	section 后台开发
	T2: 2019-10-04, 5d
	
	section 前端开发-接口定义
	T3: 2019-10-04, 2d
	
	section 前端开发-交互开发
	T4: 2019-10-08, 3d
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 描述文档的书写方法

  • 项目简介
  • 功能特性
  • 环境依赖
  • 部署步骤
  • 目录结构描述
  • 版本内容更新
  • 声明
    • 主要项目负责人
    • 参与贡献方式
  • 协议
上次更新: 2020/11/7 下午6:47:53

← 4.小结 →