# Quick start

Render a diagram from source or embed the complete authoring workbench in your application.

QuireKit Text Diagram provides **Mermaid, PlantUML and Graphviz / DOT** rendering in the browser, plus a standalone source authoring workbench. Saved source stays editable; SVG and PNG are projections for display and export.

[Open the playground →](/en/playground) · [Browse templates →](/en/reference/templates)

## Choose an integration layer

| Goal | Public entry | Environment |
| --- | --- | --- |
| Create, validate and save objects; generate Markdown fences | `@quirekit/text-diagram` | Browser or Node |
| Render source to SVG / PNG | `@quirekit/text-diagram/browser` | Browser DOM and Canvas |
| Embed a complete workbench | `@quirekit/text-diagram-editor/vue` | Vue 3.5+, browser |
| Open an editor from a button | `@quirekit/text-diagram-editor` | Browser; uses Vue internally |

Both public packages are MIT. Standalone use requires no Classic, Block or MSFE dependency. Bundled engines retain their own license texts; see [deployment and assets](/en/guide/deployment).

## Install

This is an unreleased workspace preview. In a QuireKit workspace application, add:

```sh
pnpm add '@quirekit/text-diagram@workspace:*'
# Add the UI packages when you need the workbench
pnpm add '@quirekit/text-diagram-editor@workspace:*' '@quirekit/ui@workspace:*' '@quirekit/unocss-preset@workspace:*' vue
```

After public release, remove `@workspace:*` and use a published version. The source model works on the server; call `/browser` and the workbench during the client lifecycle.

## Try a diagram

Open the [playground](/en/playground), choose a language and template, click Apply template, edit the source and wait for the preview. Download SVG / PNG directly, or use Save diagram to submit the source and its matching PNG to the host.

CodeMirror provides line numbers, syntax highlighting, indentation, find/replace and undo. The workbench uses QuireKit's maintained `@quirekit/cm-*` source packages, the same vendor family used by MSFE.

## Continue

- [Render without an editor](/en/guide/rendering): cancellable SVG / PNG generation.
- [Embed in Vue](/en/guide/vue): styles, providers, requests and save events.
- [Open a dialog](/en/guide/dialog): button integration, theme and cleanup.
- [Save and restore](/en/guide/persistence): source authority, revision checks and recoverable failures.
- [Three editor integrations](/en/guide/editors): Classic, Block and Markdown persistence.
- [Support boundaries](/en/reference/support): engine differences, local assets and current limits.