# 0ldfive/vue-print-designer architecture

> Architecture diagram of the GitHub repository 0ldfive/vue-print-designer, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/0ldfive/vue-print-designer
- Repository: https://github.com/0ldfive/vue-print-designer

## Overview

Vue Print Designer is a visual print-template editor and runtime for labels, forms and receipts, with template management, data variables, pagination, export and browser/local/remote printing. The principal workflow is to edit a template on the canvas, manage its data and settings, then preview, print or export it. The README documents Web Components integration and client/cloud printing; some implementation paths are supported only at directory level because their source was not sampled.

Main entry points: [`src/components/PrintDesigner.vue`](https://github.com/0ldfive/vue-print-designer/blob/master/src/components/PrintDesigner.vue) (Designer workspace), [`src/utils/print/usePrint.ts`](https://github.com/0ldfive/vue-print-designer/blob/master/src/utils/print/usePrint.ts) (Print orchestration), [`src/stores/designer`](https://github.com/0ldfive/vue-print-designer/tree/master/src/stores/designer) (Designer state), [`src/components/canvas/Canvas.vue`](https://github.com/0ldfive/vue-print-designer/blob/master/src/components/canvas/Canvas.vue) (Canvas editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["App integration"]
  node_app["Vue app shell<br/>[App.vue]"]
  node_wc["Web Component API<br/>[web-component.ts]"]
end

subgraph group_designer["Template design"]
  node_editor["Designer workspace<br/>[PrintDesigner.vue]"]
  node_canvas["Canvas editor<br/>[Canvas.vue]"]
  node_elements["Print elements"]
  node_layout["Editor panels"]
  node_floating["Floating panels"]
end

subgraph group_data["Template and data"]
  node_store["Designer state"]
  node_actions["Editing actions"]
  node_templates["Template management<br/>[templates.ts]"]
  node_variables["Variable processing<br/>[variables.ts]"]
  node_types["Design model<br/>[index.ts]"]
end

subgraph group_output["Rendering and print"]
  node_preview["Preview UI<br/>[PreviewModal.vue]"]
  node_renderer["Print renderer<br/>[PrintRenderer.vue]"]
  node_print["Print orchestration<br/>[usePrint.ts]"]
  node_engine["Render engine"]
  node_settings["Print settings"]
end

node_user(("Designer user"))
node_client["Print client"]
node_printer["Browser printer"]
node_remote["Remote print service"]
node_crud["Template API"]

node_app -->|"renders"| node_editor
node_app -->|"renders"| node_renderer
node_wc -->|"wraps"| node_editor
node_user -->|"edits templates"| node_editor
node_editor -->|"renders"| node_canvas
node_editor -->|"renders"| node_layout
node_editor -->|"renders"| node_floating
node_canvas -->|"reads and updates"| node_store
node_canvas -->|"renders"| node_elements
node_editor -->|"uses"| node_store
node_store -->|"delegates to"| node_actions
node_store -->|"models state"| node_types
node_editor -->|"manages templates"| node_templates
node_templates -->|"reads design state"| node_store
node_templates -.->|"fetches remotely"| node_crud
node_canvas -->|"uses"| node_variables
node_preview -->|"loads template data"| node_templates
node_preview -->|"invokes"| node_print
node_print -->|"reads design state"| node_store
node_print -->|"uses settings"| node_settings
node_print -->|"renders pages"| node_engine
node_print -->|"browser prints"| node_printer
node_print -->|"dispatches local jobs"| node_client
node_print -->|"dispatches cloud jobs"| node_remote
node_settings -->|"connects by WebSocket"| node_client
node_renderer -.->|"renders output"| node_engine

click node_app "https://github.com/0ldfive/vue-print-designer/blob/master/src/App.vue"
click node_wc "https://github.com/0ldfive/vue-print-designer/blob/master/src/web-component.ts"
click node_editor "https://github.com/0ldfive/vue-print-designer/blob/master/src/components/PrintDesigner.vue"
click node_canvas "https://github.com/0ldfive/vue-print-designer/blob/master/src/components/canvas/Canvas.vue"
click node_elements "https://github.com/0ldfive/vue-print-designer/tree/master/src/components/elements"
click node_layout "https://github.com/0ldfive/vue-print-designer/tree/master/src/components/layout"
click node_floating "https://github.com/0ldfive/vue-print-designer/tree/master/src/components/print-designer"
click node_store "https://github.com/0ldfive/vue-print-designer/tree/master/src/stores/designer"
click node_actions "https://github.com/0ldfive/vue-print-designer/tree/master/src/stores/designer/actions"
click node_templates "https://github.com/0ldfive/vue-print-designer/blob/master/src/stores/templates.ts"
click node_variables "https://github.com/0ldfive/vue-print-designer/blob/master/src/utils/variables.ts"
click node_types "https://github.com/0ldfive/vue-print-designer/blob/master/src/types/index.ts"
click node_preview "https://github.com/0ldfive/vue-print-designer/blob/master/src/components/layout/PreviewModal.vue"
click node_renderer "https://github.com/0ldfive/vue-print-designer/blob/master/src/components/print/PrintRenderer.vue"
click node_print "https://github.com/0ldfive/vue-print-designer/blob/master/src/utils/print/usePrint.ts"
click node_engine "https://github.com/0ldfive/vue-print-designer/tree/master/src/utils/print/renderEngine"
click node_settings "https://github.com/0ldfive/vue-print-designer/blob/master/src/composables/usePrintSettings.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_wc,node_user,node_client,node_printer toneBlue
class node_editor,node_canvas,node_elements,node_layout,node_floating toneAmber
class node_store,node_actions,node_templates,node_variables,node_types,node_crud toneMint
class node_preview,node_renderer,node_print,node_engine,node_settings toneRose
class node_remote toneIndigo
```

## Components

### App integration

- [Vue app shell](https://github.com/0ldfive/vue-print-designer/blob/master/src/App.vue): `src/App.vue`
- [Web Component API](https://github.com/0ldfive/vue-print-designer/blob/master/src/web-component.ts): `src/web-component.ts`

### Template design

- [Designer workspace](https://github.com/0ldfive/vue-print-designer/blob/master/src/components/PrintDesigner.vue): `src/components/PrintDesigner.vue`
- [Canvas editor](https://github.com/0ldfive/vue-print-designer/blob/master/src/components/canvas/Canvas.vue): `src/components/canvas/Canvas.vue`
- [Print elements](https://github.com/0ldfive/vue-print-designer/tree/master/src/components/elements): `src/components/elements`
- [Editor panels](https://github.com/0ldfive/vue-print-designer/tree/master/src/components/layout): `src/components/layout`
- [Floating panels](https://github.com/0ldfive/vue-print-designer/tree/master/src/components/print-designer): `src/components/print-designer`

### Template and data

- [Designer state](https://github.com/0ldfive/vue-print-designer/tree/master/src/stores/designer): `src/stores/designer`
- [Editing actions](https://github.com/0ldfive/vue-print-designer/tree/master/src/stores/designer/actions): `src/stores/designer/actions`
- [Template management](https://github.com/0ldfive/vue-print-designer/blob/master/src/stores/templates.ts): `src/stores/templates.ts`
- [Variable processing](https://github.com/0ldfive/vue-print-designer/blob/master/src/utils/variables.ts): `src/utils/variables.ts`
- [Design model](https://github.com/0ldfive/vue-print-designer/blob/master/src/types/index.ts): `src/types/index.ts`

### Rendering and print

- [Preview UI](https://github.com/0ldfive/vue-print-designer/blob/master/src/components/layout/PreviewModal.vue): `src/components/layout/PreviewModal.vue`
- [Print renderer](https://github.com/0ldfive/vue-print-designer/blob/master/src/components/print/PrintRenderer.vue): `src/components/print/PrintRenderer.vue`
- [Print orchestration](https://github.com/0ldfive/vue-print-designer/blob/master/src/utils/print/usePrint.ts): `src/utils/print/usePrint.ts`
- [Render engine](https://github.com/0ldfive/vue-print-designer/tree/master/src/utils/print/renderEngine): `src/utils/print/renderEngine`
- [Print settings](https://github.com/0ldfive/vue-print-designer/blob/master/src/composables/usePrintSettings.ts): `src/composables/usePrintSettings.ts`

### Other components

- **Designer user**
- **Print client**
- **Browser printer**
- **Remote print service**
- **Template API**

## Connections

- Vue app shell → Designer workspace: renders (evidence: `src/App.vue`)
- Vue app shell → Print renderer: renders (evidence: `src/App.vue`)
- Web Component API → Designer workspace: wraps (evidence: `src/web-component.ts`)
- Designer user → Designer workspace: edits templates (evidence: `README.md`)
- Designer workspace → Canvas editor: renders (evidence: `src/components/PrintDesigner.vue`)
- Designer workspace → Editor panels: renders (evidence: `src/components/PrintDesigner.vue`)
- Designer workspace → Floating panels: renders (evidence: `src/components/PrintDesigner.vue`)
- Canvas editor → Designer state: reads and updates (evidence: `src/components/canvas/Canvas.vue`)
- Canvas editor → Print elements: renders (evidence: `src/components/canvas/Canvas.vue`)
- Designer workspace → Designer state: uses (evidence: `src/components/PrintDesigner.vue`)
- Designer state → Editing actions: delegates to (evidence: `src/stores/designer/index.ts`)
- Designer state → Design model: models state (evidence: `src/stores/designer/state.ts`)
- Designer workspace → Template management: manages templates (evidence: `src/components/PrintDesigner.vue`)
- Template management → Designer state: reads design state (evidence: `src/stores/templates.ts`)
- Template management → Template API: fetches remotely (evidence: `README.md`)
- Canvas editor → Variable processing: uses (evidence: `src/components/canvas/Canvas.vue`)
- Preview UI → Template management: loads template data (evidence: `src/components/layout/PreviewModal.vue`)
- Preview UI → Print orchestration: invokes (evidence: `src/components/layout/PreviewModal.vue`)
- Print orchestration → Designer state: reads design state (evidence: `src/utils/print/usePrint.ts`)
- Print orchestration → Print settings: uses settings (evidence: `src/utils/print/usePrint.ts`)
- Print orchestration → Render engine: renders pages (evidence: `src/utils/print/usePrint.ts`)
- Print orchestration → Browser printer: browser prints (evidence: `README.md`)
- Print orchestration → Print client: dispatches local jobs (evidence: `README.md`)
- Print orchestration → Remote print service: dispatches cloud jobs (evidence: `README.md`)
- Print settings → Print client: connects by WebSocket (evidence: `src/composables/usePrintSettings.ts`)
- Print renderer → Render engine: renders output