QuireKit Text Diagram 提供 Mermaid、PlantUML、Graphviz / DOT 的浏览器本地渲染，以及可单独使用的源码编辑工作台。保存的源码可以继续编辑，SVG 与 PNG 用于展示和导出。
选择接入层
| 需要什么 | 公开入口 | 运行环境 |
|---|---|---|
| 创建、读取、保存绘图对象，生成 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。捆绑引擎保留各自的许可文本，见部署与资源。
安装
当前为工作区预览版，尚未发布到 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 和工作台必须在客户端生命周期调用。
先试一张图
进入在线工作台，选语言和模板，点击“应用模板”，修改源码并等待预览。可以直接下载 SVG / PNG；“保存图形”则把源码与对应 PNG 一起提交给宿主。
工作台提供 CodeMirror 行号、语法着色、缩进、查找替换和撤销。它使用 QuireKit 维护的 @quirekit/cm-* 源码版本，与 MSFE 共用同一套 vendor 包。