# sudharadev/toonii architecture

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

- Interactive diagram: https://gitdiagram.com/sudharadev/toonii
- Repository: https://github.com/sudharadev/toonii

## Overview

Toonii is a desktop sticky-note app built around one window per note. Users create or restore notes, edit text or draw, customize and arrange the note windows, and have note data saved locally. The renderer communicates with the Tauri main process through a small command/event bridge; the main process manages windows and note state, while the store handles JSON persistence. The README documents tray actions, shortcuts, recently closed notes and platform-specific pinning; unsampled implementation details are represented at subsystem level.

Main entry points: [`src/renderer/note.js`](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js) (Note interface), [`src-tauri/src/main.rs`](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs) (Window and app control), [`src/renderer/bridge.js`](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/bridge.js) (Tauri page bridge), [`src/renderer/menu.js`](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/menu.js) (Custom context menu)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop runtime"]
  node_main_runtime["Window and app control<br/>[main.rs]"]
  node_note_lifecycle["Note lifecycle<br/>[main.rs]"]
  node_tray_shortcuts["Tray and shortcuts<br/>[main.rs]"]
  node_native_window["Floating note windows<br/>[main.rs]"]
  node_bridge["Tauri page bridge<br/>[bridge.js]"]
end

subgraph group_note_ui["Note experience"]
  node_note_page["Note interface<br/>[note.js]"]
  node_text_editing["Rich text and checklists<br/>[note.js]"]
  node_drawing["Drawing and undo<br/>[note.js]"]
  node_note_customization["Style and layout<br/>[note.js]"]
  node_character_effects["Eyes and effects<br/>[note.js]"]
end

subgraph group_context_menu["Context menu"]
  node_menu_backend["Menu actions<br/>[main.rs]"]
  node_menu_page["Custom context menu<br/>[menu.js]"]
end

subgraph group_persistence["Local persistence"]
  node_store["Note store<br/>[store.rs]"]
  node_notes_file[("Local notes JSON<br/>[store.rs]")]
end

node_user(("Desktop user"))
node_external_services["Network services"]

node_user -->|"creates or hides"| node_tray_shortcuts
node_user -->|"edits and draws"| node_note_page
node_user -->|"customizes note"| node_menu_page
node_tray_shortcuts -->|"requests note actions"| node_note_lifecycle
node_note_page -->|"uses page API"| node_bridge
node_bridge -->|"invokes commands"| node_main_runtime
node_main_runtime -->|"manages note state"| node_note_lifecycle
node_main_runtime -->|"manages windows"| node_native_window
node_note_lifecycle -->|"creates and updates notes"| node_store
node_main_runtime -->|"loads store"| node_store
node_store -->|"reads and writes"| node_notes_file
node_text_editing -.->|"renders in"| node_note_page
node_drawing -.->|"renders in"| node_note_page
node_note_customization -.->|"updates appearance"| node_note_page
node_character_effects -.->|"animates"| node_note_page
node_note_page -.->|"provides editing"| node_text_editing
node_note_page -.->|"provides drawing"| node_drawing
node_note_page -.->|"provides controls"| node_note_customization
node_note_page -.->|"shows reactions"| node_character_effects
node_bridge -->|"invokes menu API"| node_menu_backend
node_menu_backend -->|"sends menu spec"| node_menu_page
node_menu_page -->|"reports picks"| node_bridge
node_external_services -.->|"no network access"| node_notes_file

click node_main_runtime "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs"
click node_note_lifecycle "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs"
click node_tray_shortcuts "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs"
click node_native_window "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs"
click node_bridge "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/bridge.js"
click node_note_page "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js"
click node_text_editing "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js"
click node_drawing "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js"
click node_note_customization "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js"
click node_character_effects "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js"
click node_menu_backend "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs"
click node_menu_page "https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/menu.js"
click node_store "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/store.rs"
click node_notes_file "https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/store.rs"

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_main_runtime,node_note_lifecycle,node_tray_shortcuts,node_native_window,node_bridge,node_user toneBlue
class node_note_page,node_text_editing,node_drawing,node_note_customization,node_character_effects toneAmber
class node_menu_backend,node_menu_page toneMint
class node_store,node_notes_file toneRose
class node_external_services toneIndigo
```

## Components

### Desktop runtime

- [Window and app control](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs): `src-tauri/src/main.rs`
- [Note lifecycle](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs): `src-tauri/src/main.rs`
- [Tray and shortcuts](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs): `src-tauri/src/main.rs`
- [Floating note windows](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs): `src-tauri/src/main.rs`
- [Tauri page bridge](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/bridge.js): `src/renderer/bridge.js`

### Note experience

- [Note interface](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js): `src/renderer/note.js`
- [Rich text and checklists](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js): `src/renderer/note.js`
- [Drawing and undo](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js): `src/renderer/note.js`
- [Style and layout](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js): `src/renderer/note.js`
- [Eyes and effects](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/note.js): `src/renderer/note.js`

### Context menu

- [Menu actions](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/main.rs): `src-tauri/src/main.rs`
- [Custom context menu](https://github.com/sudharadev/toonii/blob/tauri-port/src/renderer/menu.js): `src/renderer/menu.js`

### Local persistence

- [Note store](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/store.rs): `src-tauri/src/store.rs`
- [Local notes JSON](https://github.com/sudharadev/toonii/blob/tauri-port/src-tauri/src/store.rs): `src-tauri/src/store.rs`

### Other components

- **Desktop user**
- **Network services**

## Connections

- Desktop user → Tray and shortcuts: creates or hides (evidence: `README.md`)
- Desktop user → Note interface: edits and draws (evidence: `README.md`)
- Desktop user → Custom context menu: customizes note (evidence: `README.md`)
- Tray and shortcuts → Note lifecycle: requests note actions (evidence: `README.md`)
- Note interface → Tauri page bridge: uses page API (evidence: `src/renderer/note.js`)
- Tauri page bridge → Window and app control: invokes commands (evidence: `src/renderer/bridge.js`)
- Window and app control → Note lifecycle: manages note state (evidence: `src-tauri/src/main.rs`)
- Window and app control → Floating note windows: manages windows (evidence: `src-tauri/src/main.rs`)
- Note lifecycle → Note store: creates and updates notes (evidence: `src-tauri/src/main.rs`)
- Window and app control → Note store: loads store (evidence: `src-tauri/src/main.rs`)
- Note store → Local notes JSON: reads and writes (evidence: `README.md`)
- Rich text and checklists → Note interface: renders in (evidence: `src/renderer/note.js`)
- Drawing and undo → Note interface: renders in (evidence: `src/renderer/note.js`)
- Style and layout → Note interface: updates appearance (evidence: `src/renderer/note.js`)
- Eyes and effects → Note interface: animates (evidence: `src/renderer/note.js`)
- Note interface → Rich text and checklists: provides editing (evidence: `src/renderer/note.js`)
- Note interface → Drawing and undo: provides drawing (evidence: `src/renderer/note.js`)
- Note interface → Style and layout: provides controls (evidence: `src/renderer/note.js`)
- Note interface → Eyes and effects: shows reactions (evidence: `src/renderer/note.js`)
- Tauri page bridge → Menu actions: invokes menu API (evidence: `src/renderer/bridge.js`)
- Menu actions → Custom context menu: sends menu spec (evidence: `src/renderer/menu.js`)
- Custom context menu → Tauri page bridge: reports picks (evidence: `src/renderer/menu.js`)
- Network services → Local notes JSON: no network access (evidence: `README.md`)