在 Jekyll 博客中添加 Mermaid 图表

I’m happy to help translate the article, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have the article, I’ll translate it into Simplified Chinese while preserving the original formatting, markdown, and any code blocks or URLs.

什么是 Mermaid？

Mermaid 是一种基于文本的图表生成工具。它使用类似 Markdown 的语法来创建各种图表。

支持的图表类型

• Flowchart (流程图)
• Sequence Diagram (时序图)
• Class Diagram (类图)
• State Diagram (状态图)
• Entity Relationship Diagram (ERD)
• Gantt Chart (甘特图)
• Pie Chart (饼图)
• 以及其他多种

在 Jekyll 中设置 Mermaid

1. 在 head.html 中添加脚本

在 _includes/head.html 文件中插入以下代码。

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false });

// Convert Jekyll code blocks to mermaid diagrams
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('pre code.language-mermaid, div.language-mermaid pre code')
    .forEach(function(codeBlock) {
      const container = codeBlock.closest('div.language-mermaid') || codeBlock.parentElement;
      const pre = document.createElement('pre');
      pre.className = 'mermaid';
      pre.textContent = codeBlock.textContent;
      container.replaceWith(pre);
    });
  mermaid.run();
});

此脚本会

• 从 CDN 加载 Mermaid 库，
• 将 Jekyll 生成的 language‑mermaid 代码块转换为 Mermaid 可识别的形式，
• 在页面加载完成后渲染图表。

使用方法

在 Markdown 文件中编写指定 mermaid 语言的代码块即可。

graph TD
    A[시작] --> B{조건 확인}
    B -->|Yes| C[처리]
    B -->|No| D[종료]
    C --> D

上述代码将渲染如下。

graph TD
    A[시작] --> B{조건 확인}
    B -->|Yes| C[처리]
    B -->|No| D[종료]
    C --> D

图表示例

流程图 (플로우차트)

方向选项: TB (上→下), BT (下→上), LR (左→右), RL (右→左)

graph LR
    A[사용자 요청] --> B[API Gateway]
    B --> C[인증 서버]
    C --> D{인증 성공?}
    D -->|Yes| E[서비스 처리]
    D -->|No| F[401 에러]
    E --> G[응답 반환]

节点形状

• [텍스트] – 方形
• (텍스트) – 圆角矩形
• {텍스트} – 菱形（条件）
• ((텍스트)) – 圆形
• [[텍스트]] – 子程序

时序图 (시퀀스 다이어그램)

sequenceDiagram
    participant U as User
    participant C as Client
    participant S as Server
    participant DB as Database

    U->>C: 로그인 요청
    C->>S: POST /api/login
    S->>DB: 사용자 조회
    DB-->>S: 사용자 정보
    S-->>C: JWT 토큰
    C-->>U: 로그인 성공

类图 (클래스 다이어그램)

classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +int orderId
        +Date orderDate
        +calculate()
    }
    class Product {
        +String name
        +float price
    }

    User "1" --> "*" Order : places
    Order "*" --> "*" Product : contains

状态图 (상태 다이어그램)

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : 요청 수신
    Processing --> Success : 처리 완료
    Processing --> Error : 처리 실패
    Success --> [*]
    Error --> Idle : 재시도

实体关系图 (ERD)

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

    USER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int user_id FK
        date created_at
    }
    PRODUCT {
        int id PK
        string name
        decimal price
    }

甘特图 (간트 차트)

gantt
    title 프로젝트 일정
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석    :a1, 2026-01-01, 7d
    설계 문서 작성   :a2, after a1, 5d
    section 개발
    백엔드 개발      :b1, after a2, 14d
    프론트엔드 개발  :b2, after a2, 14d
    section 테스트
    통합 테스트      :c1, after b1, 7d

饼图 (파이 차트)

pie title 기술 스택 비율
    "JavaScript" : 40
    "Python" : 30
    "Java" : 20
    "기타" : 10

主题设置

Mermaid 支持多种主题。调用 mermaid.initialize() 时指定 theme 选项即可。

mermaid.initialize({
  startOnLoad: false,
  theme: 'dark'   // default, dark, forest, neutral
});

结束

使用 Mermaid，甚至复杂的图表也可以轻松地用文本编写。可以使用 Git 进行版本管理，修改也很方便。请在技术文档或博客文章中积极使用它。

参考资料

• Mermaid 官方文档
• Mermaid Live Editor – 实时预览