Mermaid学习笔记

官网

• https://mermaid.js.org/intro/

示例

流程图

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

序列图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

类图

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

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

git图

gitGraph
    commit
    commit
    branch develop
    commit
    commit
    commit
    checkout main
    commit
    commit

gitGraph
    commit
    commit
    branch develop
    commit
    commit
    commit
    checkout main
    commit
    commit

图

graph TD
    subgraph "Check pathname validity"
        B{Check pathname validity}
    end

    B -->|Invalid Pathname| C(Render 404 page)

    B -->|Valid Pathname| D{Check authentication status}

    subgraph "If authenticated:"
        D -->|Authenticated| E{Redirect or Render Index page}
    end

    subgraph "If not authenticated:"
        D -->|Not Authenticated| F{Render Login or Redirect to Login}
    end

    E -->|Pathname is /login| G{Redirect to Main Page}
    E -->|Pathname is not /login| H(Render Index Page)

    F -->|Pathname is /login| I(Render Login Page)
    F -->|Pathname is /relogin| J(Render Login Page with relogin)
    F -->|Other Pathnames| K(Redirect to Login Page)

graph TD
    subgraph "Check pathname validity"
        B{Check pathname validity}
    end

    B -->|Invalid Pathname| C(Render 404 page)

    B -->|Valid Pathname| D{Check authentication status}

    subgraph "If authenticated:"
        D -->|Authenticated| E{Redirect or Render Index page}
    end

    subgraph "If not authenticated:"
        D -->|Not Authenticated| F{Render Login or Redirect to Login}
    end

    E -->|Pathname is /login| G{Redirect to Main Page}
    E -->|Pathname is not /login| H(Render Index Page)

    F -->|Pathname is /login| I(Render Login Page)
    F -->|Pathname is /relogin| J(Render Login Page with relogin)
    F -->|Other Pathnames| K(Redirect to Login Page)

样式

缩放

<div id="mermaid-container">
  <!-- Mermaid图的内容 -->
</div>

在CSS文件中，为该元素添加样式，使用transform属性来放大图像。例如：

#mermaid-container {
  transform: scale(1.5); /* 放大倍数 */
}

CLI

command-line interface (CLI) for mermaid.

• https://github.com/mermaid-js/mermaid-cli

安装

npm install -g @mermaid-js/mermaid-cli

渲染并导出

• 黑色主题，透明背景，导出为png

mmdc -i input.mmd -o output.png -t dark -b transparent