博客园支持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"

类图

classDiagramClass01 <|-- AveryLongClass : CoolClass03 *-- Class04Class05 o-- Class06Class07 .. Class08Class09 --> C2 : Where am i?Class09 --* C3Class09 --|> Class07Class07 : equals()Class07 : Object[] elementDataClass01 : size()Class01 : int chimpClass01 : int gorillaClass08 <--> 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官网资料

---

---

---