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） 文件系统 AI Agent ColaMD 用户 文件系统 AI Agent ColaMD 用户 打开 .md 文件 fs.watch 监听文件 修改文件内容 触发变更事件 实时刷新显示 切换 Rendered/Raw 模式 渲染公式与图表 2.3 类图（Class Diagram） 2.4 状态图（State Diagram） 2.5 ER 图（Entity Relationship） 2.6 甘特图（Gantt Chart） 2026-01-04 2026-01-11 2026-01-18 2026-01-25 2026-02-01 2026-02-08 2026-02-15 2026-02-22 插件系统设计 插件管理器实现 KaTeX 集成 Mermaid.js 集成 行内/块级公式渲染 多图表类型支持 PNG 导出功能 主题适配 集成测试 文档编写 版本发布 基础架构 Math 插件 Mermaid 插件 测试与发布 ColaMD 扩展版开发计划 2.7 饼图（Pie Chart） 45% 35% 15% 5% ColaMD 用户操作系统分布 macOS Windows Linux 其他 2.8 用户旅程图（User Journey） AI 用户 打开文件 用户 启动应用 用户 打开 .md 编辑内容 用户 输入 Markdown 用户 AI 插入公式 用户 AI 插入图表 查看效果 用户 实时渲染 用户 切换模式 用户 导出 PNG 用户使用 ColaMD 的工作流 2.9 Git 图（Git Graph） main develop hotfix 初始提交 添加 Math 插件 添加 Mermaid 插件 合并插件系统 v2.0.0 修复渲染 bug 应用热修复 v2.0.1 新增主题适配 2.10 思维导图（Mindmap） 2.11 时间线（Timeline） 2024 Q1 v1.0 发布 基础编辑器功能 2024 Q2 v1.2 发布 实时文件热更新 主题系统 2024 Q3 v1.4 发布 幻灯片系统 2025 Q1 v1.5 发布 幻灯片导出 2026 Q1 v2.0 发布 显示插件系统 Math + Mermaid ColaMD 版本演进 2.12 四象限图（Quadrant Chart） 立即实施 计划实施 低优先级 考虑放弃 协作编辑 云同步 主题系统 Mermaid 图表 Math 公式 实时同步 低影响 高影响 低紧迫性 高紧迫性 编辑器功能优先级矩阵
2.13 XY 图表 / 柱状图（XY Chart） ColaMD 月活跃用户增长 1月 2月 3月 4月 5月 6月 50 45 40 35 30 25 20 15 10 5 0 用户数 (千) 2.14 C4 架构图（C4Context） <<person>> 用户 使用 ColaMD 编辑 Markdown 文件 <<system>> ColaMD Agent Native Markdown 编辑器 <<external_system>> AI Agent Claude Code / Cursor / Copilot 等 <<external_system>> 文件系统 本地 .md 文件 打开、编辑、查看文件 读写 .md 文件 fs.watch 监听变更 推送文件变更事件 ColaMD 系统上下文图 2.15 Sankey 图（Sankey Diagram） （桑吉图目前支持 beta 版本）
Agricultural 'waste'
124.73 Bio-conversion
388.93 Liquid
647.59 Losses
878.33 Solid
447.48 Gas
204.1 Biofuel imports
35 Biomass imports
35 Coal imports
11.61 Coal
75.57 Coal reserves
63.97 District heating
79.33 Industry
568.93 Heating and cooling - commercial
134.16 Heating and cooling - homes
372.2 Electricity grid
918.61 Over generation / exports
104.45 H2 conversion
27.14 Road transport
194.53 Agriculture
11.03 Rail transport
12.28 Lighting & appliances - commercial
90.01 Lighting & appliances - homes
93.49 Gas imports
40.72 NGas
122.95 Gas reserves
82.23 Thermal generation
1391.99 Geothermal
7.01 H2
20.9 Hydro
7 International shipping
128.69 Domestic aviation
14.46 International aviation
206.27 National navigation
33.22 Marine algae
4.38 Nuclear
839.98 Oil imports
504.29 Oil
611.99 Oil reserves
107.7 Other waste
134.4 Pumped heat
263.7 Solar PV
59.9 Solar Thermal
19.26 Solar
79.16 Tidal
9.45 UK land based bioenergy
182.01 Wave
19.01 Wind
289.37 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 ⊙ σ ′ \sigma' σ ′
四、操作指南 切换渲染模式 点击顶部菜单栏 Plug
选择 Math 或 Mermaid
点击 Rendered 查看渲染效果，或 Raw 查看/编辑源码
导出为 PNG 编辑源码 切换到 Raw 模式
在文本框中直接修改 LaTeX 或 Mermaid 代码
点击编辑器其他区域失焦，自动保存并重新渲染
提示 ：本文档中的所有公式和图表均可在 Rendered 和 Raw 模式之间自由切换，体验 ColaMD 的插件渲染控制能力。