# quoilam/cv-gen architecture

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

- Interactive diagram: https://gitdiagram.com/quoilam/cv-gen
- Repository: https://github.com/quoilam/cv-gen

## Overview

CvGen is a browser-based Markdown resume editor. The main workflow is managing local resumes, opening one to edit Markdown and styles with a live paginated preview, then exporting the result. The graph also captures documented math, cross-reference, font, icon, CSS, and backup capabilities. Some wiring is inferred only from the README and component names because the editor page and rendering implementation were not sampled; those links are kept at the feature level.

Main entry points: [`site/src/pages/editor/[id].vue`](https://github.com/quoilam/cv-gen/blob/main/site/src/pages/editor/%5Bid%5D.vue) (Resume editor), [`site/src/composables/useResume.ts`](https://github.com/quoilam/cv-gen/blob/main/site/src/composables/useResume.ts) (Resume operations), [`site/src/components/shared/ResumeRender.vue`](https://github.com/quoilam/cv-gen/blob/main/site/src/components/shared/ResumeRender.vue) (Resume renderer), [`site/src/utils/markdown.ts`](https://github.com/quoilam/cv-gen/blob/main/site/src/utils/markdown.ts) (Markdown rendering)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_manage["Resume management"]
  node_dashboard["Resume dashboard<br/>[index.vue]"]
  node_resume_api["Resume operations<br/>[useResume.ts]"]
  node_repository["Resume repository<br/>[repository.ts]"]
  node_local_db[("Browser resume storage<br/>[localForage.ts]")]
end

subgraph group_edit["Editing and rendering"]
  node_editor_route["Resume editor<br/>[&#91;id&#93;.vue]"]
  node_editor_code["Markdown editor<br/>[Code.vue]"]
  node_style_panels["Style controls"]
  node_style_store["Style state<br/>[style.ts]"]
  node_data_store["Resume state<br/>[data.ts]"]
  node_preview["Live preview<br/>[Preview.vue]"]
  node_resume_render["Resume renderer<br/>[ResumeRender.vue]"]
  node_markdown["Markdown rendering<br/>[markdown.ts]"]
  node_math_plugin["KaTeX support<br/>[index.ts]"]
  node_xref_plugin["Cross-references<br/>[index.ts]"]
  node_pagination["Page breaking<br/>[useSmartPages.ts]"]
end

subgraph group_output["Export"]
  node_export_service["Export handlers<br/>[handlers.ts]"]
  node_docx_export["DOCX export<br/>[docx.ts]"]
end

subgraph group_backup["Backup"]
  node_backup_api["Backup management"]
  node_backup_file[("User backup folder")]
end

node_person(("Resume author"))

node_person -->|"manages resumes"| node_dashboard
node_dashboard -->|"loads resumes"| node_resume_api
node_resume_api -->|"requests operations"| node_repository
node_repository -->|"queries and writes"| node_local_db
node_person -->|"opens resume"| node_editor_route
node_editor_route -->|"edits Markdown"| node_editor_code
node_editor_route -->|"customizes appearance"| node_style_panels
node_style_panels -->|"updates styles"| node_style_store
node_editor_code -->|"edits content"| node_data_store
node_editor_route -->|"views preview"| node_preview
node_preview -->|"renders resume"| node_resume_render
node_resume_render -->|"converts Markdown"| node_markdown
node_markdown -.->|"supports math"| node_math_plugin
node_markdown -.->|"supports references"| node_xref_plugin
node_resume_render -->|"breaks pages"| node_pagination
node_person -->|"exports resume"| node_export_service
node_export_service -->|"dispatches DOCX"| node_docx_export
node_resume_api -->|"syncs changes"| node_backup_api
node_backup_api -->|"reads or imports snapshot"| node_repository
node_backup_api -->|"writes or restores JSON"| node_backup_file

click node_dashboard "https://github.com/quoilam/cv-gen/blob/main/site/src/pages/index.vue"
click node_resume_api "https://github.com/quoilam/cv-gen/blob/main/site/src/composables/useResume.ts"
click node_repository "https://github.com/quoilam/cv-gen/blob/main/site/src/utils/storage/repository.ts"
click node_local_db "https://github.com/quoilam/cv-gen/blob/main/site/src/utils/storage/localForage.ts"
click node_editor_route "https://github.com/quoilam/cv-gen/blob/main/site/src/pages/editor/%5Bid%5D.vue"
click node_editor_code "https://github.com/quoilam/cv-gen/blob/main/site/src/components/editor/Code.vue"
click node_style_panels "https://github.com/quoilam/cv-gen/blob/main/site/src/components/editor/panels/AppearancePanel.vue"
click node_style_store "https://github.com/quoilam/cv-gen/blob/main/site/src/composables/stores/style.ts"
click node_data_store "https://github.com/quoilam/cv-gen/blob/main/site/src/composables/stores/data.ts"
click node_preview "https://github.com/quoilam/cv-gen/blob/main/site/src/components/editor/Preview.vue"
click node_resume_render "https://github.com/quoilam/cv-gen/blob/main/site/src/components/shared/ResumeRender.vue"
click node_markdown "https://github.com/quoilam/cv-gen/blob/main/site/src/utils/markdown.ts"
click node_math_plugin "https://github.com/quoilam/cv-gen/blob/main/site/src/internal/markdown-it-katex/index.ts"
click node_xref_plugin "https://github.com/quoilam/cv-gen/blob/main/site/src/internal/markdown-it-cross-ref/index.ts"
click node_pagination "https://github.com/quoilam/cv-gen/blob/main/site/src/internal/vue-smart-pages/useSmartPages.ts"
click node_export_service "https://github.com/quoilam/cv-gen/blob/main/site/src/utils/export/handlers.ts"
click node_docx_export "https://github.com/quoilam/cv-gen/blob/main/site/src/utils/export/docx.ts"
click node_backup_api "https://github.com/quoilam/cv-gen/blob/main/site/src/composables/useStorageBackup.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_dashboard,node_resume_api,node_repository,node_local_db toneBlue
class node_editor_route,node_editor_code,node_style_panels,node_style_store,node_data_store,node_preview,node_resume_render,node_markdown,node_math_plugin,node_xref_plugin,node_pagination toneAmber
class node_export_service,node_docx_export toneMint
class node_backup_api,node_backup_file toneRose
class node_person toneIndigo
```

## Components

### Resume management

- [Resume dashboard](https://github.com/quoilam/cv-gen/blob/main/site/src/pages/index.vue): `site/src/pages/index.vue`
- [Resume operations](https://github.com/quoilam/cv-gen/blob/main/site/src/composables/useResume.ts): `site/src/composables/useResume.ts`
- [Resume repository](https://github.com/quoilam/cv-gen/blob/main/site/src/utils/storage/repository.ts): `site/src/utils/storage/repository.ts`
- [Browser resume storage](https://github.com/quoilam/cv-gen/blob/main/site/src/utils/storage/localForage.ts): `site/src/utils/storage/localForage.ts`

### Editing and rendering

- [Resume editor](https://github.com/quoilam/cv-gen/blob/main/site/src/pages/editor/%5Bid%5D.vue): `site/src/pages/editor/[id].vue`
- [Markdown editor](https://github.com/quoilam/cv-gen/blob/main/site/src/components/editor/Code.vue): `site/src/components/editor/Code.vue`
- [Style controls](https://github.com/quoilam/cv-gen/blob/main/site/src/components/editor/panels/AppearancePanel.vue): `site/src/components/editor/panels/AppearancePanel.vue`
- [Style state](https://github.com/quoilam/cv-gen/blob/main/site/src/composables/stores/style.ts): `site/src/composables/stores/style.ts`
- [Resume state](https://github.com/quoilam/cv-gen/blob/main/site/src/composables/stores/data.ts): `site/src/composables/stores/data.ts`
- [Live preview](https://github.com/quoilam/cv-gen/blob/main/site/src/components/editor/Preview.vue): `site/src/components/editor/Preview.vue`
- [Resume renderer](https://github.com/quoilam/cv-gen/blob/main/site/src/components/shared/ResumeRender.vue): `site/src/components/shared/ResumeRender.vue`
- [Markdown rendering](https://github.com/quoilam/cv-gen/blob/main/site/src/utils/markdown.ts): `site/src/utils/markdown.ts`
- [KaTeX support](https://github.com/quoilam/cv-gen/blob/main/site/src/internal/markdown-it-katex/index.ts): `site/src/internal/markdown-it-katex/index.ts`
- [Cross-references](https://github.com/quoilam/cv-gen/blob/main/site/src/internal/markdown-it-cross-ref/index.ts): `site/src/internal/markdown-it-cross-ref/index.ts`
- [Page breaking](https://github.com/quoilam/cv-gen/blob/main/site/src/internal/vue-smart-pages/useSmartPages.ts): `site/src/internal/vue-smart-pages/useSmartPages.ts`

### Export

- [Export handlers](https://github.com/quoilam/cv-gen/blob/main/site/src/utils/export/handlers.ts): `site/src/utils/export/handlers.ts`
- [DOCX export](https://github.com/quoilam/cv-gen/blob/main/site/src/utils/export/docx.ts): `site/src/utils/export/docx.ts`

### Backup

- [Backup management](https://github.com/quoilam/cv-gen/blob/main/site/src/composables/useStorageBackup.ts): `site/src/composables/useStorageBackup.ts`
- **User backup folder**

### Other components

- **Resume author**

## Connections

- Resume author → Resume dashboard: manages resumes
- Resume dashboard → Resume operations: loads resumes
- Resume operations → Resume repository: requests operations
- Resume repository → Browser resume storage: queries and writes
- Resume author → Resume editor: opens resume
- Resume editor → Markdown editor: edits Markdown
- Resume editor → Style controls: customizes appearance
- Style controls → Style state: updates styles
- Markdown editor → Resume state: edits content
- Resume editor → Live preview: views preview
- Live preview → Resume renderer: renders resume
- Resume renderer → Markdown rendering: converts Markdown
- Markdown rendering → KaTeX support: supports math
- Markdown rendering → Cross-references: supports references
- Resume renderer → Page breaking: breaks pages
- Resume author → Export handlers: exports resume
- Export handlers → DOCX export: dispatches DOCX
- Resume operations → Backup management: syncs changes
- Backup management → Resume repository: reads or imports snapshot
- Backup management → User backup folder: writes or restores JSON