# 快速开始

用一份源码生成图形，或把完整的文本绘图工作台放进自己的应用。

QuireKit Text Diagram 提供 **Mermaid、PlantUML、Graphviz / DOT** 的浏览器本地渲染，以及可单独使用的源码编辑工作台。保存的源码可以继续编辑，SVG 与 PNG 用于展示和导出。

[打开在线工作台 →](/playground) · [浏览模板 →](/reference/templates)

## 选择接入层

| 需要什么 | 公开入口 | 运行环境 |
| --- | --- | --- |
| 创建、读取、保存绘图对象，生成 Markdown 围栏 | `@quirekit/text-diagram` | 浏览器或 Node |
| 把源码渲染为 SVG / PNG | `@quirekit/text-diagram/browser` | 浏览器 DOM 与 Canvas |
| 自己的页面中嵌入完整工作台 | `@quirekit/text-diagram-editor/vue` | Vue 3.5+、浏览器 |
| 从按钮打开绘图弹窗 | `@quirekit/text-diagram-editor` | 浏览器，内部使用 Vue |

两个公共包均为 MIT，独立使用无需安装 Classic、Block 或 MSFE。捆绑引擎保留各自的许可文本，见[部署与资源](/guide/deployment)。

## 安装

当前为工作区预览版，尚未发布到 npm。在 QuireKit 工作区的应用目录内添加：

```sh
pnpm add '@quirekit/text-diagram@workspace:*'
# 需要可视工作台时再添加
pnpm add '@quirekit/text-diagram-editor@workspace:*' '@quirekit/ui@workspace:*' '@quirekit/unocss-preset@workspace:*' vue
```

正式发布后可移除 `@workspace:*` 使用公开包版本。源码模型可在服务端使用；`/browser` 和工作台必须在客户端生命周期调用。

## 先试一张图

进入[在线工作台](/playground)，选语言和模板，点击“应用模板”，修改源码并等待预览。可以直接下载 SVG / PNG；“保存图形”则把源码与对应 PNG 一起提交给宿主。

工作台提供 CodeMirror 行号、语法着色、缩进、查找替换和撤销。它使用 QuireKit 维护的 `@quirekit/cm-*` 源码版本，与 MSFE 共用同一套 vendor 包。

## 从哪里继续

- [仅渲染图形](/guide/rendering)：不挂载编辑器，获得可取消的 SVG / PNG。
- [嵌入 Vue 工作台](/guide/vue)：样式、Provider、请求与保存事件。
- [独立弹窗](/guide/dialog)：已有页面中的按钮入口、主题与释放。
- [保存与恢复](/guide/persistence)：源码权威、修订检查、失败后保留草稿。
- [三个编辑器](/guide/editors)：Classic、Block 与 Markdown 中的不同持久化方式。
- [支持范围](/reference/support)：引擎差异、离线资源和当前限制。