关于『进击的Markdown』:第五弹

关于『进击的Markdown』:第五弹

建议缩放90%食用

路漫漫其修远兮，吾将上下而求索。

 我们要接受Mermaid的考验了呢 

Markdown 语法真香
(一如既往地安利)

( 进击吧！Markdown！)

Markdown进阶系列向你开炮，请注意接收

我们就不废话了

  又双叕要为大家带来 (正当时的) Markdown了呢~  

---

注：编者用的是CSDN-Markdown编辑器（没错我还是没换, 这个编辑器真的适合小白使用, 再推荐一款“作业部落 Cmd Markdown”，(支持在线！)）

声明：本弹所有图表都是CSDN-Markdown编辑器预览与Github截图而来，可放心食用

探索Mermaid流程图, 正文开始

Mermaid流程图 (下)

一. 破坏语法的特殊字符

• 可以将文本放在引号内以呈现容易误识的字符

代码:

```mermaid

 graph LR

  id1[“张三之家”]

```

效果:

⋙拓展: 转义字符的实体代码

• 允许使用 ASCII码 和 HTML字符名称(在此文章后半部分)
  代码：

```mermaid

 graph LR

  A[“A double quote:#quot;”] -->B[“A dec char:#9829;”]

```

效果：

---

二. 子图

格式:

subgraph title

 graph definition

end

代码：

```mermaid

 graph TB

  c1–>a2

  subgraph one

  a1–>a2

  end

  subgraph two

  b1–>b2

  subgraph three

  c1–>c2

```

效果：

• 还可以为子图设置显式 ID

代码：

```mermaid

 graph TB

  c1–>a2

  subgraph ide1 [one]

  a1–>a2

  end

```

效果：

子图中的方向

• 使用图形类型流程图，可以使用方向语句来设置子图将呈现的方向

代码：

```mermaid

 flowchart LR

  subgraph TOP

   direction TB

   subgraph B1

    direction RL

    i1 -->f1

   end

  subgraph B2

   direction TB

   subgraph B1

    direction BT

    i2 -->f2

   end

  end

  A --> TOP --> B

  B1 --> B2

```

效果：

在此鸣谢Github, 要不然真展示不了

---

三. 注释

• 可以在流程图中输入注释，解析器将忽略这些注释
• 注释需要在自己的行上，并且必须以%%（双百分号）开头

---

四. 样式和类

(一). 样式化节点

• 可以对节点应用特定样式

代码:

```mermaid

 graph LR

  istyle id1 fill:#f9f,stroke:#333,stroke-width:4px

  style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

```

效果:

(二). class

令人印象深刻的单词呢, 满脑子芳芳姐娇姐忠勇

• 比每次都定义样式更方便的是定义一个样式类并将这个类附加到应该具有不同外观的节点上

类定义形似以下:

classDef className(注:类的名称) fill:#f9f,stroke:#333,stroke-width:4px;

将类附加到节点:

class 节点名称 班级名称;

也可以在一个语句中将类附加到节点列表:

class 节点1名称,节点2名称 班级名称;

添加类的更简短形式是使用 ::: 运算符将类名附加到节点:

class 节点1名称,节点2名称 班级a名称;

代码:

```mermaid

 graph LR

  A:::nasa --> B

  classDef nasa fill:#002fa7,stroke:#888888,stroke-width:3px;

```

效果:

(三). 默认类

• 如果一个类被命名为 default，它将被分配给所有没有特定类定义的类

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

---

五. 对 fontawesome 的基本支持

• 可以从 fontawesome 添加图标
• 图标通过语法 fa:#icon class name# 访问

代码:

```mermaid

 graph TD

  B[“fa:fa-twitter for peace”]

  B–>C[fa:fa-ban forbidden]

  B–>D(fa:fa-spinner);

  B–>E(A fa:fa-camera-retro perhaps?);

```

效果:

这个线条为什么没有官网的丝滑, 差评

---

六. 顶点和链接之间有空格且没有分号的图形声明

• 在图形声明中，语句现在也可以不用分号结束。在 0.2.16 版本之后，以分号结束图形语句只是可选的 因此，下面的图形声明与图形的旧声明一起也有效
• 顶点和链接之间允许有一个空格。但是，顶点与其文本和链接与其文本之间不应有任何空格 图声明的旧语法也可以使用，因此这个新功能是可选的，引入是为了提高可读性

代码:

```mermaid

 graph LR

  [Hard edge] -->|Link text| B(Round edge)

  B --> C{Decision}

  C -->|One| D[Result one]

  C -->|Two| E[Result two]

```

效果:

---

关于『进击的Markdown』:第五弹 完结啦 []_(￣▽￣)(换朵花撒)

(猜猜第六弹什么时候更)

填坑.ING

跟我的好盆友比起来, 我就是个鸽王 (我还能再咕咕五百年)

不愧是我

关于『进击的Markdown』:第五弹 就酱紫结束啦~ 叭叭~(′▽`~)