本文集中演示 Blowfish 的数据可视化与数学公式能力。

Chart.js 图表

#

Blowfish 内置 Chart.js，通过 chart 短代码即可使用，并自动套用 colorScheme 主题色。

柱状图

#

折线图

#

环形图

#

Mermaid 图表

#

流程图

#

graph TD
A[开始] -->|获取数据| B(处理数据)
B --> C{是否成功?}
C ==>|是| D[输出结果]
C -->|否| E[记录错误]
E --> B

时序图

#

sequenceDiagram
autonumber
participant Client
participant Server
participant DB
Client->>Server: GET /api/posts
Server->>DB: SELECT * FROM posts
DB-->>Server: rows
Server-->>Client: 200 OK (JSON)

甘特图

#

gantt
title 项目计划
dateFormat  YYYY-MM-DD
section 设计
需求分析   :a1, 2024-05-01, 7d
原型设计   :after a1, 5d
section 开发
前端开发   :2024-05-13, 10d
后端开发   :2024-05-13, 12d
section 上线
测试与上线 :2024-05-26, 4d

类图

#

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +String name
Animal: +isMammal()
Duck: +swim()
Fish: +dive()

KaTeX 数学公式

#

先启用 KaTeX：

行内公式

#

行内公式用 \( \) 包裹，例如黄金分割比 \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887\ldots\)

块级公式

#

块级公式用 $$ 包裹：

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

更多示例

#

欧拉公式：

$$ e^{i\pi} + 1 = 0 $$

高斯积分：

$$ \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} $$

矩阵：

$$ \begin{bmatrix} a & b \ c & d \end{bmatrix} \begin{bmatrix} x \ y \end{bmatrix}

#

\begin{bmatrix} ax + by \ cx + dy \end{bmatrix} $$