# 11suixing11/mindnotes-pro architecture

> Architecture diagram of the GitHub repository 11suixing11/mindnotes-pro, 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/11suixing11/mindnotes-pro
- Repository: https://github.com/11suixing11/mindnotes-pro

## Overview

MindNotes Pro is a local-first whiteboard: users draw and edit one board, organize it with layers and workspace settings, then rely on local autosave or export/import portable files. The React workspace routes interaction through canvas handlers into the Zustand document state; saving is managed separately through the document repository and recovery journal. README-documented templates, Mermaid import, export formats, and offline/desktop runtimes are included. Several feature modules were not sampled, so their implementation links are limited to paths supported by the tree.

Main entry points: [`src/store/appStore.ts`](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/appStore.ts) (Application store), [`src/App.tsx`](https://github.com/11suixing11/mindnotes-pro/blob/main/src/App.tsx) (App workspace), [`src/components/toolbar/Toolbar.tsx`](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/toolbar/Toolbar.tsx) (Tools and actions), [`src/components/export-menu/ExportMenu.tsx`](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/export-menu/ExportMenu.tsx) (Export actions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Workspace UI"]
  node_app["App workspace<br/>[App.tsx]"]
  node_lifecycle["App lifecycle<br/>[useAppLifecycle.ts]"]
  node_toolbar["Tools and actions<br/>[Toolbar.tsx]"]
  node_layersui["Layers panel<br/>[LayersPanel.tsx]"]
end

subgraph group_canvas["Canvas Editing"]
  node_canvasui["Canvas interaction<br/>[Canvas.tsx]"]
  node_pointer["Pointer engine"]
  node_draw["Drawing handlers"]
  node_select["Selection handlers"]
  node_renderer["Canvas renderer"]
  node_geometry["Canvas geometry"]
  node_templates["Editable templates"]
  node_mermaid["Mermaid import<br/>[mermaidImport.ts]"]
end

subgraph group_document["Document State"]
  node_store["Application store<br/>[appStore.ts]"]
  node_slices["Document operations<br/>[canvasElements.ts]"]
  node_layers["Layer model<br/>[layers.ts]"]
  node_save["Autosave manager<br/>[saveManager.ts]"]
  node_repo["Document repository"]
  node_indexeddb[("IndexedDB documents")]
  node_recovery["Recovery journal<br/>[recovery.ts]"]
end

subgraph group_portability["Portability"]
  node_exportmenu["Export actions<br/>[ExportMenu.tsx]"]
  node_export["Canvas exports<br/>[documentExport.ts]"]
  node_backup["JSON backup<br/>[backup.ts]"]
  node_import["Legacy import<br/>[v4Import.ts]"]
end

node_user(("Whiteboard user"))
node_browser(("Browser runtime"))
node_desktop["Electron shell<br/>[main.mts]"]

node_user -->|"uses"| node_app
node_app -->|"renders"| node_canvasui
node_app -->|"renders"| node_toolbar
node_app -->|"renders"| node_layersui
node_app -->|"initializes"| node_lifecycle
node_canvasui -->|"dispatches input"| node_pointer
node_pointer -->|"dispatches drawing"| node_draw
node_pointer -->|"dispatches selection"| node_select
node_draw -->|"commits elements"| node_store
node_select -->|"updates selection"| node_store
node_canvasui -->|"renders board"| node_renderer
node_renderer -->|"reads document"| node_store
node_draw -->|"uses geometry"| node_geometry
node_select -->|"uses geometry"| node_geometry
node_layersui -->|"updates layers"| node_store
node_toolbar -->|"issues actions"| node_store
node_toolbar -->|"opens templates"| node_templates
node_templates -->|"inserts content"| node_store
node_lifecycle -->|"initializes board"| node_store
node_store -->|"delegates mutations"| node_slices
node_store -->|"schedules saves"| node_save
node_save -->|"persists document"| node_repo
node_repo -->|"reads and writes"| node_indexeddb
node_save -->|"writes draft"| node_recovery
node_toolbar -->|"opens export"| node_exportmenu
node_exportmenu -->|"exports visuals"| node_export
node_exportmenu -->|"backs up"| node_backup
node_exportmenu -->|"imports backup"| node_import
node_import -->|"replaces board"| node_store
node_app -->|"handles paste"| node_mermaid
node_mermaid -->|"imports diagram"| node_store
node_browser -->|"hosts"| node_app
node_desktop -->|"loads UI"| node_app

click node_app "https://github.com/11suixing11/mindnotes-pro/blob/main/src/App.tsx"
click node_lifecycle "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/app/useAppLifecycle.ts"
click node_toolbar "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/toolbar/Toolbar.tsx"
click node_layersui "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/layers/LayersPanel.tsx"
click node_canvasui "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/Canvas.tsx"
click node_pointer "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/usePointerEngine.ts"
click node_draw "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/useDrawingPointerHandlers.ts"
click node_select "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/useSelectPointerHandlers.ts"
click node_renderer "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/useCanvasRenderer.ts"
click node_templates "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/templates/TemplateGallery.tsx"
click node_mermaid "https://github.com/11suixing11/mindnotes-pro/blob/main/src/core/mermaidImport.ts"
click node_store "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/appStore.ts"
click node_slices "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/slices/canvasElements.ts"
click node_layers "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/layers.ts"
click node_save "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/saveManager.ts"
click node_repo "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/documentRepository.ts"
click node_indexeddb "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/indexedDbDocumentRepository.ts"
click node_recovery "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/recovery.ts"
click node_exportmenu "https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/export-menu/ExportMenu.tsx"
click node_export "https://github.com/11suixing11/mindnotes-pro/blob/main/src/canvas/documentExport.ts"
click node_backup "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/backup.ts"
click node_import "https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/v4Import.ts"
click node_desktop "https://github.com/11suixing11/mindnotes-pro/blob/main/electron/main.mts"

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_lifecycle,node_toolbar,node_layersui,node_user,node_browser toneBlue
class node_canvasui,node_pointer,node_draw,node_select,node_renderer,node_geometry,node_templates,node_mermaid toneAmber
class node_store,node_slices,node_layers,node_save,node_repo,node_indexeddb,node_recovery toneMint
class node_exportmenu,node_export,node_backup,node_import toneRose
class node_desktop toneTeal
```

## Components

### Workspace UI

- [App workspace](https://github.com/11suixing11/mindnotes-pro/blob/main/src/App.tsx): `src/App.tsx`
- [App lifecycle](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/app/useAppLifecycle.ts): `src/components/app/useAppLifecycle.ts`
- [Tools and actions](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/toolbar/Toolbar.tsx): `src/components/toolbar/Toolbar.tsx`
- [Layers panel](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/layers/LayersPanel.tsx): `src/components/layers/LayersPanel.tsx`

### Canvas Editing

- [Canvas interaction](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/Canvas.tsx): `src/components/canvas/Canvas.tsx`
- [Pointer engine](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/usePointerEngine.ts): `src/components/canvas/usePointerEngine.ts`
- [Drawing handlers](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/useDrawingPointerHandlers.ts): `src/components/canvas/useDrawingPointerHandlers.ts`
- [Selection handlers](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/useSelectPointerHandlers.ts): `src/components/canvas/useSelectPointerHandlers.ts`
- [Canvas renderer](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/canvas/useCanvasRenderer.ts): `src/components/canvas/useCanvasRenderer.ts`
- **Canvas geometry**
- [Editable templates](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/templates/TemplateGallery.tsx): `src/components/templates/TemplateGallery.tsx`
- [Mermaid import](https://github.com/11suixing11/mindnotes-pro/blob/main/src/core/mermaidImport.ts): `src/core/mermaidImport.ts`

### Document State

- [Application store](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/appStore.ts): `src/store/appStore.ts`
- [Document operations](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/slices/canvasElements.ts): `src/store/slices/canvasElements.ts`
- [Layer model](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/layers.ts): `src/store/layers.ts`
- [Autosave manager](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/saveManager.ts): `src/store/saveManager.ts`
- [Document repository](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/documentRepository.ts): `src/store/documentRepository.ts`
- [IndexedDB documents](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/indexedDbDocumentRepository.ts): `src/store/indexedDbDocumentRepository.ts`
- [Recovery journal](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/recovery.ts): `src/store/recovery.ts`

### Portability

- [Export actions](https://github.com/11suixing11/mindnotes-pro/blob/main/src/components/export-menu/ExportMenu.tsx): `src/components/export-menu/ExportMenu.tsx`
- [Canvas exports](https://github.com/11suixing11/mindnotes-pro/blob/main/src/canvas/documentExport.ts): `src/canvas/documentExport.ts`
- [JSON backup](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/backup.ts): `src/store/backup.ts`
- [Legacy import](https://github.com/11suixing11/mindnotes-pro/blob/main/src/store/v4Import.ts): `src/store/v4Import.ts`

### Other components

- **Whiteboard user**
- **Browser runtime**
- [Electron shell](https://github.com/11suixing11/mindnotes-pro/blob/main/electron/main.mts): `electron/main.mts`

## Connections

- Whiteboard user → App workspace: uses
- App workspace → Canvas interaction: renders
- App workspace → Tools and actions: renders
- App workspace → Layers panel: renders
- App workspace → App lifecycle: initializes
- Canvas interaction → Pointer engine: dispatches input
- Pointer engine → Drawing handlers: dispatches drawing
- Pointer engine → Selection handlers: dispatches selection
- Drawing handlers → Application store: commits elements
- Selection handlers → Application store: updates selection
- Canvas interaction → Canvas renderer: renders board
- Canvas renderer → Application store: reads document
- Drawing handlers → Canvas geometry: uses geometry
- Selection handlers → Canvas geometry: uses geometry
- Layers panel → Application store: updates layers
- Tools and actions → Application store: issues actions
- Tools and actions → Editable templates: opens templates
- Editable templates → Application store: inserts content
- App lifecycle → Application store: initializes board
- Application store → Document operations: delegates mutations
- Application store → Autosave manager: schedules saves
- Autosave manager → Document repository: persists document
- Document repository → IndexedDB documents: reads and writes
- Autosave manager → Recovery journal: writes draft
- Tools and actions → Export actions: opens export
- Export actions → Canvas exports: exports visuals
- Export actions → JSON backup: backs up
- Export actions → Legacy import: imports backup
- Legacy import → Application store: replaces board
- App workspace → Mermaid import: handles paste
- Mermaid import → Application store: imports diagram
- Browser runtime → App workspace: hosts
- Electron shell → App workspace: loads UI