Mermaid使用技巧

Categories:

  少于1分钟  

001.how to set style patter(color etc.,) in mermaid
a. single node setting method
style d fill:#6a0035,stroke:#333,stroke-width:1px

  like the css code above, the “d” node will be set to the following pattern as u said

b. multi nodes setting method
#anything above#
    c --> d{"1st_Key\nIMMDeviceEnumerator.\nEnumAudioEndpoints()"}:::css_keypoint
    d --> |"((HRESULT)(hr)) < 0"| e(Release Object of\nIMMDeviceEnumerator)
    e --> z[end]
    d --> |"((HRESULT)(hr)) >= 0"|f(Return \nIMMDeviceCollection)
    f --> g("2nd_Key\nIMMDeviceCollection.\nGetCount()"):::css_keypoint


classDef css_keypoint fill:#6a0035,stroke:#333,stroke-width:1px

  now node “d” & “g” will be set to special css pattern

002. summary of all kinds of shapes in mermaid
a. 方形（Square）

Represents ordinary nodes or process steps.
Denoted by “[]”.

A[Ordinary node or process]
b. 圆形（Round）

Represents start or end points.
Denoted by “()” .

A((Start or end))
c. 菱形（Diamond）

Represents decision points or conditions.
Denoted by “{}”.

A{Decision or condition}
d. 流程（Flowchart）

Represents general flowchart nodes with specific shapes.

A>Flowchart node]
e. 矩形（Rectangle）

Represents emphasized nodes or specific operation steps.
Denoted by “()” .

A(Rectangle node)
003.how to show parentheses in mermaid

use quotes to embrace the parentheses

$$A0((start)) --> A{"CoCreateInstance()"\nCreate COM Object}$$

005. 如何在Markdown里面嵌入一个Mermaid图(常规方式无效)

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>

只要在要显示Mermaid图的md文档头部, 插入这句话,就可以正常显示mermaid啦.