# 浏览器渲染 API

从公开源码生成的签名、参数、返回值与数据字段。

以下签名与说明从包的公开入口和 JSDoc 提取；中文说明与当前源码对账。Vue 组件接入见[嵌入 Vue 工作台](/guide/vue)。

## 渲染与栅格化

### renderTextDiagram

`@quirekit/text-diagram/browser` · MIT

根据明确语言 language 和精确草稿 source 执行可取消渲染，options 指定生命周期及 DOM 所有者。返回与这份源码绑定的静态 SVG 快照。

```ts
function renderTextDiagram(language: TextDiagramLanguage, source: string, options: TextDiagramRenderOptions): Promise<TextDiagramSnapshot>
```

### rasterizeTextDiagram

`@quirekit/text-diagram/browser` · MIT

从已经净化并绑定源码的 snapshot 生成 PNG；owner 为 Canvas 所有者，signal 为保存生命周期。返回受尺寸预算约束的 PNG，不再读取当前草稿。

```ts
function rasterizeTextDiagram(snapshot: TextDiagramSnapshot, owner: Document, signal: AbortSignal): Promise<TextDiagramRaster>
```


## 选项

### TextDiagramRenderOptions

`@quirekit/text-diagram/browser` · MIT

显式的渲染生命周期，不捕获宿主编辑器状态。

```ts
export interface TextDiagramRenderOptions {
    readonly signal: AbortSignal;
    readonly ownerDocument?: Document;
    readonly typography?: TextDiagramTypography;
}
```

**signal** — 取消这一次精确源码的渲染请求。

**ownerDocument** — 用于测量和隔离引擎的 DOM 所有者。

**typography** — Mermaid 文字样式；PlantUML 与 DOT 沿用源码定义的引擎排版。

### TextDiagramTypography

`@quirekit/text-diagram/browser` · MIT

Mermaid 测量排版配置，在编辑、阅读和导出之间共用。

```ts
export interface TextDiagramTypography {
    readonly fontFamily: string;
    readonly fontSize: number;
}
```

**fontFamily** — 宿主的实际字体栈。

**fontSize** — 以 CSS 像素表示的字号。