博客园支持 mermaid

• 2022 年 3 月 3 日
• 筆記
• Markdown

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

类图

流程图 简视

流程图是使用 flowchart LR

• 设置节点

flowchart LR

    节点名称[节点内容]

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

例子：

    ```mermaid
    flowchart LR

        id
    ```

    ```mermaid
    flowchart LR

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

• 流程控制

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

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

flowchart 流程控制

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

例子：

    ```mermaid
    flowchart TD

        Start --> Stop
    ```

    ```mermaid
    flowchart LR

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

• 节点形状

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

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

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

比如：[/文本\]

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

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

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