博客园可以直接支持 mermaid 了

博客园可以直接支持 mermaid 了

Mermaid 简介

Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表

平时写博客时可以使用Markdown编写，嵌入Mermaid能让阅读体验更佳

在 Markdown 中使用 Mermaid

    ```mermaid
    绘图类型    
        Mermaid语句
    ```

支持绘图类型

• 流程图：使用graph关键字
• 序列图：使用sequenceDiagram关键字
• 类图：使用classDiagram关键字
• 状态图：使用stateDiagram关键字
• 实体关系图：使用erDiagram关键字
• 用户旅程图：使用journey关键字
• 甘特图：使用gantt关键字
• 饼状图：使用pie关键字
• 需求图：使用requirementDiagram关键字

注意：使用中文可能会出现异常

实例展示：

    ```mermaid
    erDiagram
        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
        CUSTOMER ||--o{ ORDER : places
        CUSTOMER ||--o{ INVOICE : "liable for"
        DELIVERY-ADDRESS ||--o{ ORDER : receives
        INVOICE ||--|{ ORDER : covers
        ORDER ||--|{ ORDER-ITEM : includes
        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
    ```

erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in"

类图

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

流程图 简视

流程图是使用 flowchart LR

• 设置节点

flowchart LR

    节点名称[节点内容]

如果没有设置[节点内容]，默认为节点名称

例子：

    ```mermaid
    flowchart LR

        id
    ```

flowchart LR id

    ```mermaid
    flowchart LR

        id[This is the text in the box]
    ```

flowchart LR id[This is the text in the box]

• 流程控制

  不同的流程控制会有不同的效果

  • TD - 自上而下/与TB相同
  • TB - 从上到下
  • BT - 从下而上
  • RL - 从右到左
  • LR - 从左到右

flowchart 流程控制

    节点名称[节点内容] --> 节点名称[节点内容]

例子：

    ```mermaid
    flowchart TD

        Start --> Stop
    ```

flowchart TD Start --> Stop

    ```mermaid
    flowchart LR

        id1[box1] --> id2[box2]
    ```

flowchart LR id1[box1] --> id2[box2]

• 节点形状

    ```mermaid
    flowchart LR
        id1(This is the text in the box)
    ```

flowchart LR id1(This is the text in the box)

    ```mermaid
    flowchart LR
        id1((This is the text in the circle))
    ```

flowchart LR id1((This is the text in the circle))

对于括号可以使用() [] {} / \进行组合，/ \ 只能内层不可单独使用

比如：[/文本\]

    ```mermaid
    flowchart LR
        id[/文本\]
    ```

flowchart LR id[/文本\]

总之Mermaid的内容很多在此不在继续介绍

拒绝伸手党，下面自助
建议自行探索mermaid官网资料

---

---

---