# ColaMD 插件演示文档

> 本文档用于演示 ColaMD 扩展版的 Math 公式渲染 与 Mermaid 图表渲染 能力。
> 每个插件均支持 Rendered（渲染模式） 和 Raw（源码模式） 一键切换。

## 一、Math 数学公式

### 1.1 行内公式（Inline Math）

行内公式使用单个 `$` 包裹，可嵌入段落中：

- 质能方程：E=m c 2 E = mc^2 E=m c 2

- 欧拉公式：e i π+1=0 e^{i\pi} + 1 = 0 e iπ+1=0

- 勾股定理：a 2+b 2=c 2 a^2 + b^2 = c^2 a 2+b 2=c 2

- 导数定义：f′(x)=lim⁡h→0 f(x+h)−f(x)h f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}f′(x)=lim h→0​h f(x+h)−f(x)​

- 求和公式：∑i=1 n x i=x 1+x 2+⋯+x n\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n∑i=1 n​x i​=x 1​+x 2​+⋯+x n​

- 积分公式：∫a b f(x) d x=F(b)−F(a)\int_a^b f(x)\,dx = F(b) - F(a)∫a b​f(x)d x=F(b)−F(a)

### 1.2 块级公式（Block Math）

块级公式使用 `$$` 包裹，居中显示：

二次方程求根公式：

x=−b±b 2−4 a c 2 a x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2 a−b±b 2−4 a c
​​

高斯积分：

∫−∞∞e−x 2 d x=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞​e−x 2 d x=π
​

傅里叶变换：

f^(ξ)=∫−∞∞f(x) e−2 π i x ξ d x\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx f^​(ξ)=∫−∞∞​f(x)e−2 π i x ξ d x

麦克斯韦方程组（微分形式）：

{∇⋅E=ρ ε 0∇⋅B=0∇×E=−∂B∂t∇×B=μ 0 J+μ 0 ε 0∂E∂t\begin{cases} \nabla \cdot \mathbf{E} = \dfrac{\rho}{\varepsilon_0} \\[8pt] \nabla \cdot \mathbf{B} = 0 \\[8pt] \nabla \times \mathbf{E} = -\dfrac{\partial \mathbf{B}}{\partial t} \\[8pt] \nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \dfrac{\partial \mathbf{E}}{\partial t} \end{cases}⎩
⎨
⎧​∇⋅E=ε 0​ρ​∇⋅B=0∇×E=−∂t∂B​∇×B=μ 0​J+μ 0​ε 0​∂t∂E​​

爱因斯坦场方程：

G μ ν+Λ g μ ν=8 π G c 4 T μ ν G_{\mu\nu} + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4} T_{\mu\nu}G μν​+Λ g μν​=c 4 8 π G​T μν​

矩阵形式：

A=[a 11 a 12 a 13 a 21 a 22 a 23 a 31 a 32 a 33],A−1=1 det⁡(A)[C 11 C 21 C 31 C 12 C 22 C 32 C 13 C 23 C 33]\mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{bmatrix}, \quad \mathbf{A}^{-1} = \frac{1}{\det(\mathbf{A})} \begin{bmatrix} C_{11} & C_{21} & C_{31} \\ C_{12} & C_{22} & C_{32} \\ C_{13} & C_{23} & C_{33} \end{bmatrix}A=
​a 11​a 21​a 31​​a 12​a 22​a 32​​a 13​a 23​a 33​​
​,A−1=det(A)1​
​C 11​C 12​C 13​​C 21​C 22​C 23​​C 31​C 32​C 33​​
​

## 二、Mermaid 图表

### 2.1 流程图（Flowchart / Graph）

### 2.2 时序图（Sequence Diagram）

### 2.3 类图（Class Diagram）

### 2.4 状态图（State Diagram）

### 2.5 ER 图（Entity Relationship）

### 2.6 甘特图（Gantt Chart）

### 2.7 饼图（Pie Chart）

### 2.8 用户旅程图（User Journey）

### 2.9 Git 图（Git Graph）

### 2.10 思维导图（Mindmap）

### 2.11 时间线（Timeline）

### 2.12 四象限图（Quadrant Chart）

### 2.13 XY 图表 / 柱状图（XY Chart）

### 2.14 C4 架构图（C4Context）

### 2.15 Sankey 图（Sankey Diagram）

（桑吉图目前支持 beta 版本）

### 2.16 Block 图（Block Diagram）

### 2.17 复杂流程图（带聚群）

### 2.18 ZENUML图

Error: No diagram type detected matching given configuration for text: zenuml title Order Service @Actor Client #FFEBE6 @Boundary OrderController #0747A6 @EC2 <<BFF>> OrderService #E3FCEF group BusinessService { @Lambda PurchaseService @AzureFunction InvoiceService } @Starter(Client) // POST /orders OrderController.post(payload) { OrderService.create(payload) { order = new Order(payload) if (order != null) { par { PurchaseService.createPO(order) InvoiceService.createInvoice(order) } } } }

## 三、混合内容演示

以下段落同时包含 行内公式、块级公式 和 Mermaid 图表，展示插件的协同工作能力：

在机器学习领域，线性回归模型的损失函数定义为：

J(θ)=1 2 m∑i=1 m(h θ(x(i))−y(i))2 J(\theta) = \frac{1}{2m} \sum_{i=1}^{m} \left( h_\theta(x^{(i)}) - y^{(i)} \right)^2 J(θ)=2 m 1​i=1∑m​(h θ​(x(i))−y(i))2

其中 h θ(x)=θ T x h_\theta(x) = \theta^T x h θ​(x)=θ T x 是假设函数，m m m 是样本数量。梯度下降算法的更新规则为：

θ j:=θ j−α∂∂θ j J(θ)\theta_j := \theta_j - \alpha \frac{\partial}{\partial \theta_j} J(\theta)θ j​:=θ j​−α∂θ j​∂​J(θ)

下面是一个机器学习工作流的流程图：

神经网络的反向传播可以用矩阵形式表示。设第 l l l 层的误差为 δ(l)\delta^{(l)}δ(l)，则：

δ(l)=((W(l))T δ(l+1))⊙σ′(z(l))\delta^{(l)} = \left( (W^{(l)})^T \delta^{(l+1)} \right) \odot \sigma'(z^{(l)})δ(l)=((W(l))T δ(l+1))⊙σ′(z(l))

其中 ⊙\odot⊙ 表示 Hadamard 积，σ′\sigma'σ′ 是激活函数的导数。

## 四、操作指南

### 切换渲染模式

1. 点击顶部菜单栏 Plug

2. 选择 Math 或 Mermaid

3. 点击 Rendered 查看渲染效果，或 Raw 查看/编辑源码

### 导出为 PNG

- Math 公式：右键点击公式 → Save Equation as PNG

- Mermaid 图表：右键点击图表 → Save Diagram as PNG

### 编辑源码

1. 切换到 Raw 模式

2. 在文本框中直接修改 LaTeX 或 Mermaid 代码

3. 点击编辑器其他区域失焦，自动保存并重新渲染

> 提示：本文档中的所有公式和图表均可在 Rendered 和 Raw 模式之间自由切换，体验 ColaMD 的插件渲染控制能力。