Mermaid 系列
-
如何使用 Mermaid、GitHub 和 VSCode 用代碼創(chuàng)建關(guān)系圖一
1. 如何使用 Mermaid 生成圖表
Mermaid 是一個基于 JavaScript 的工具，可將 Markdown 樣式的文本轉(zhuǎn)換為動態(tài)圖表，讓您可以毫不費(fèi)力地創(chuàng)建和修改它們。
Mermaid 使使用簡單的文本和代碼輕松生成圖表和視覺效果變得容易。
它遵循一個簡單的語法：
使用 Mermaid，您可以生成以下圖表類型：
- Flowchart 流程圖
- Sequence Diagram 序列圖
- Class Diagram 類圖
- Gantt 甘特
- Pie Chart 餅圖
讓我們一一探討它們。
2. 如何創(chuàng)建流程圖 flowchart
流程圖是一張使用符號顯示過程步驟的圖片，有助于以清晰有條理的方式解釋過程。流程圖由通過箭頭連接的節(jié)點(diǎn)組成。
您可以使用以下示例在 mermaid 中渲染流程圖：
語法細(xì)分：
-
flowchart：此關(guān)鍵字表示我們正在創(chuàng)建流程圖。 -
TD: 這是流程圖的方向，代表自上而下。其他流程圖方向包括： -
TB- 從上到下，與TD相同。 -
BT- 從下到上 -
LR- 從左到右 -
RL- 從右到左 -
-->：連接節(jié)點(diǎn)的箭頭方向。
3. 如何創(chuàng)建序列圖 sequenceDiagram
序列圖是流程之間交互的說明性表示，展示了它們的操作流程和執(zhí)行順序。
您可以使用以下語法在 mermaid 中渲染序列圖：
語法細(xì)分：
-
sequenceDiagram：此關(guān)鍵字指定我們正在制作序列圖。 -
participant：這些是序列圖中的參與者或actor。 -
activate/ deactivate：可以激活和停用 actor。激活在交互之間顯示為一個小矩形。 -
-->>：連接線（虛線）。 -
->：連接線（實(shí)心）。
4. 如何創(chuàng)建類圖 classDiagram
類圖用于可視化類、接口的結(jié)構(gòu)和關(guān)系，以及它們在面向?qū)ο缶幊?（OOP） 中的交互。您可以使用以下語法在 Mermaid 中渲染類圖：
語法細(xì)分：
- 定義類
class：使用class關(guān)鍵字后跟類名定義單個類。 - 添加類屬性：類屬性添加時帶有
+號。在上面的示例中，+breed是一個屬性。 - 添加方法：mermaid使用圓括號
()識別方法。請注意，所有屬性和方法都使用大括號{}分組到同一類下。 - 定義返回類型：返回類型在方法名稱/類名之后定義。
string和void是上述代碼中的返回類型。 - 定義關(guān)系：在 OOP 中，關(guān)系是在類圖和對象圖上找到的特定類型的邏輯連接。mermaid支持以下關(guān)系類型：
| TYPE類型 | DESCRIPTION描述 |
|---|---|
<!-- 注意把!換成中劃線 |
Inheritance 繼承 |
*-- |
Composition 組合 |
o-- 或 --
|
Aggregation 聚合 |
--> |
Association 協(xié)作 |
-- |
Link (Solid)鏈接（實(shí)心） |
..> |
Dependency 依賴 |
..!> 注意把!換成中劃線 |
Realization實(shí)現(xiàn) |
.. |
Link (Dashed)鏈接（虛線） |
下面是繼承的快速實(shí)現(xiàn)：
代碼
https://github.com/zgpeace/pets-name-langchain/tree/develop文章來源：http://www.zghlxwxcb.cn/news/detail-841385.html
參考
https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/文章來源地址http://www.zghlxwxcb.cn/news/detail-841385.html
到了這里，關(guān)于如何使用 Mermaid、GitHub 和 VSCode 用代碼創(chuàng)建關(guān)系圖二的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
