mermaid
約 553 字大約 2 分鐘
2024-10-21
Intro
A diagramming and charting tool that could write diagram in text like content.
一種可以用文字描述繪圖的工具。
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Usage
安裝後在 markdown 的 codeblock 中著名 mermaid 即可使用
```mermaid
graph here....
``Example
Sequence Diagram
- text in codeblock
sequenceDiagram
participant DC as DataCenter
participant PW as playwright
participant QAS as QA-Service
participant PG as PG_DB
note over PW: test start
PW -->> DC: DC kolSearch random
DC ->> PW: get random kol_id lists
loop check all the kol_id in lists
PW -->> QAS: main account api
activate QAS
QAS -->> PG: query ai_portal.kol_url
PG -->> QAS: return kol_urls data
QAS -->> PG: query ai_portal.view_kol_url_latest
PG -->> QAS: return kol_urls main account data
QAS ->> PW: kol urls data of single kol
deactivate QAS
PW -->> PW: verify if only one url is under same platform
end
note over PW: test finishGit Graph
相關信息
目前 vitepress mermaid package 好像暫不支援 gitGraph, 繪製不出來, 要體驗可以使用 notion
繪製出的圖如下 
gitGraph
commit id: "regression point"
branch v6.5_dh_dev
branch v6.5_dh_jeffery_dev
branch v6.5_dh_victor_dev
commit id: "feat v-1"
commit id: "feat v-2"
checkout v6.5_dh_jeffery_dev
commit id: "feat j-1"
commit id: "feat j-2"
commit id: "feat j-3"
checkout main
commit
commit
checkout v6.5_dh_dev
merge v6.5_dh_victor_dev
merge v6.5_dh_jeffery_dev
checkout main
merge v6.5_dh_dev id:"new regression point"MindMap
- text in codeblock
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
MermaidFlowChart
- text in codeblock
graph LR
v6.4_dh_victor_dev -- delete after MR --> v6.4_dh_dev
v6.4_jeffery_dev -- delete after MR --> v6.4_dh_dev
v6.4_dh_dev -- delete after MR --> master
victor_dh_dev -- MR --> master
victor_dh_dev -- new commit --> victor_dh_dev
jeffery_dh_dev -- MR --> master
jeffery_dh_dev-- new commit --> jeffery_dh_dev