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 → · Browse 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.
Install
This is an unreleased workspace preview. In a QuireKit workspace application, add:
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, 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: cancellable SVG / PNG generation.
- Embed in Vue: styles, providers, requests and save events.
- Open a dialog: button integration, theme and cleanup.
- Save and restore: source authority, revision checks and recoverable failures.
- Three editor integrations: Classic, Block and Markdown persistence.
- Support boundaries: engine differences, local assets and current limits.