[電腦][文書] Mermaid 圖
===
###### tags: `學科`
###### tags: `學科`, `電腦`, `文書`, `HackMD`, `語法`, `markdown`, `Mermaid`, `Mermaid Live Editor`

<br>

**目錄：**
[TOC]

<br>

## 語法
- https://mermaid.js.org/
<br>

## 範例

### gantt-1

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-2
> Source: https://hackmd.io/MathJax-and-UML-tw
>

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d

### graph-1: 流程圖
> https://hackmd.io/ujpj0b1DQQ6RXzyS2660rg?both

graph LR;
id1("你好嗎？<br>test，123") --> id2((B));
id2 --> id3[C]; 
id3 ==粗線加文字==> id4>D];
id4 -.-> id5{E};
id5 -.test.-> id5;
id5 --> id6;
id3 --細線加文字--> id1;

- id1: A
- id2: B
- id3: C
- id4: D
- id5: E

<br>

### graph-2: LMCache 架構圖
> - https://github.com/LMCache/LMCache
> - by Claude Sonnet 4.0 (2025/10/23)
> - 可由 [Mermaid Live Editor 匯出](https://mermaid.live) 輸出高清晰版

graph TB
    subgraph "External LLM Engines"
        vLLM[vLLM Engine]
        SGLang[SGLang Engine]
    end

    subgraph "Integration Layer"
        VAdapter[vLLM Connector V1<br/>lmcache_connector_v1.py]
        SAdapter[SGLang Adapter<br/>sglang_adapter.py]
        ReqTracker[Request Tracker]
    end

    subgraph "API Layer"
        InternalAPI[Internal API Server<br/>v1/internal_api_server]
        CacheAPI[Cache API]
        InferAPI[Inference API]
        MetricsAPI[Metrics API]
    end

    subgraph "Cache Controller Layer"
        CtrlMgr[Controller Manager<br/>controller_manager.py]
        KVCtrl[KV Controller]
        RegCtrl[Registration Controller]
        Worker[LMCache Worker]
    end

    subgraph "Cache Engine Layer"
        V0Engine[LMCache Engine V0<br/>cache_engine.py]
        V1Engine[LMCache Engine V1<br/>v1/cache_engine.py]
        TokenDB[Token Database]
        EventMgr[Event Manager]
        CacheInterface[Cache Interface]
    end

    subgraph "Compute Layer"
        Attention[Attention Module<br/>flash_attn/flash_infer]
        Blender[Cache Blender<br/>blend/blender.py]
        Models[Model Implementations<br/>llama/qwen3]
    end

    subgraph "Storage Management Layer"
        StorageMgr[Storage Manager]
        MemAlloc[Memory Allocator]
        GPUConn[GPU Connector<br/>gpu_connector.py]
    end

    subgraph "Storage Backend Layer"
        Abstract[Abstract Backend]
        Local[Local Backend<br/>CPU/Disk]
        Remote[Remote Backend<br/>Redis/LM]
        Hybrid[Hybrid Backend]
        P2P[P2P Backend]
    end

    subgraph "Serialization Layer"
        Serde[Serialization<br/>serde/]
        CacheGen[CacheGen Encoder/Decoder]
        TorchSerde[Torch Serde]
    end

    subgraph "Memory Pool Layer"
        LocalPool[Local Pool]
        BasePool[Base Pool]
    end

    subgraph "Hardware Layer"
        GPU[GPU Memory<br/>CUDA]
        CPU[CPU DRAM]
        Disk[Local Disk<br/>SSD/HDD]
        Network[Network Storage<br/>Redis/Valkey]
    end

    %% External connections
    vLLM --> VAdapter
    SGLang --> SAdapter

    %% Integration to Engine
    VAdapter --> V1Engine
    SAdapter --> V0Engine
    VAdapter --> ReqTracker
    
    %% API connections
    InternalAPI --> CacheAPI
    InternalAPI --> InferAPI
    InternalAPI --> MetricsAPI
    CacheAPI --> CtrlMgr
    
    %% Controller connections
    CtrlMgr --> KVCtrl
    CtrlMgr --> RegCtrl
    CtrlMgr --> Worker
    KVCtrl --> V1Engine
    
    %% Cache Engine connections
    V0Engine --> TokenDB
    V1Engine --> TokenDB
    V1Engine --> EventMgr
    V1Engine --> CacheInterface
    V1Engine --> StorageMgr
    
    %% Compute connections
    V1Engine --> Blender
    Blender --> Attention
    Attention --> Models
    
    %% Storage Management
    StorageMgr --> MemAlloc
    StorageMgr --> GPUConn
    StorageMgr --> Abstract
    
    %% Storage Backends
    Abstract --> Local
    Abstract --> Remote
    Abstract --> Hybrid
    Abstract --> P2P
    
    %% Serialization
    Local --> Serde
    Remote --> Serde
    Serde --> CacheGen
    Serde --> TorchSerde
    
    %% Memory Pool
    Local --> LocalPool
    LocalPool --> BasePool
    
    %% Hardware connections
    GPUConn --> GPU
    Local --> CPU
    Local --> Disk
    Remote --> Network

    %% Styling
    classDef integration fill:#e1f5ff,stroke:#01579b
    classDef api fill:#f3e5f5,stroke:#4a148c
    classDef engine fill:#fff3e0,stroke:#e65100
    classDef compute fill:#e8f5e9,stroke:#1b5e20
    classDef storage fill:#fce4ec,stroke:#880e4f
    classDef hardware fill:#f5f5f5,stroke:#424242
    
    class VAdapter,SAdapter,ReqTracker integration
    class InternalAPI,CacheAPI,InferAPI,MetricsAPI api
    class V0Engine,V1Engine,TokenDB,EventMgr,CacheInterface engine
    class Attention,Blender,Models compute
    class StorageMgr,Abstract,Local,Remote,Hybrid,P2P,Serde storage
    class GPU,CPU,Disk,Network hardware

<br>

---

<br>

## 討論

### 要如何把圖儲存下來？
- ### gpt-5 (2025/10/23)
可以，用這幾種做法（依方便度→可控性排列）：

### 1) 在 HackMD 預覽區直接存成 SVG（最快）

1. 在右側預覽看到 Mermaid 圖時，對著圖**右鍵 → 另存影像為…**（通常會存成 `.svg`）。
2. 如果右鍵被擋：開 **開發者工具**，選到外層的 `<svg class="mermaid">`，右鍵「**另存為**」或「**Copy → Copy outerHTML**」，貼到檔案 `diagram.svg`。
3. 需要 PNG：用工具轉檔

* Inkscape：`inkscape diagram.svg --export-filename=diagram.png`
* librsvg：`rsvg-convert diagram.svg -o diagram.png`

> 小提醒：**SVG 是向量圖**，放大不失真，拿去貼投影片最清晰；若一定要 PNG，匯出時加高解析度。

---

### 2) Mermaid Live Editor 匯出
> https://mermaid.live

把程式碼貼到 **mermaid.live**，點 **Export** 選 **SVG/PNG/PDF**。適合臨時輸出單張圖。

---

### 3) Mermaid CLI（最可自動化／可控解像度）

1. 安裝：`npm i -g @mermaid-js/mermaid-cli`
2. 存成 `diagram.mmd`（內容以 `flowchart TB` 或 `graph TB` 開頭）。
3. 匯出：

       # 輸出向量圖
       mmdc -i diagram.mmd -o diagram.svg

       # 輸出高解析 PNG（透明底、2x 縮放、指定寬度）
       mmdc -i diagram.mmd -o diagram.png -b transparent -s 2 -w 1600

常用參數：

* `-s` / `--scale`：拉高像素密度（1.5~3 常用）
* `-w` / `--width`：指定寬度像素
* `-b transparent`：透明背景

---

### 4) VS Code 外掛

裝「Markdown Preview Mermaid Support」→ 打開預覽 → **Export** 成 **SVG/PNG**。

---

### 5) 整頁輸出

HackMD 的 **Export → PDF** 可把整篇（含圖）存成 PDF。若只要圖，建議用上面 1~3 的方法。

---

**建議**：先存 **SVG** 保留最佳品質；需要點陣圖再轉成 PNG（並提高 scale/width），做簡報或文件會更清晰。

<br>

{%hackmd vaaMgNRPS4KGJDSFG0ZE0w %}