# xiaochong/markbun architecture

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

- Interactive diagram: https://gitdiagram.com/xiaochong/markbun
- Repository: https://github.com/xiaochong/markbun

## Overview

MarkBun is a cross-platform desktop Markdown editor. The main workflow is a writer opening or creating a document, editing it in WYSIWYG or source mode, and saving it through the desktop bridge; workspace browsing, navigation, export, recovery, and AI assistance support that workflow. The graph reflects documented capabilities and sampled call sites. Backend service wiring beyond the excerpts is represented only where README capabilities or source evidence supports it.

Main entry points: [`src/mainview/App.tsx`](https://github.com/xiaochong/markbun/blob/main/src/mainview/App.tsx) (Workspace app), [`src/mainview/lib/electrobun.ts`](https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/electrobun.ts) (Desktop bridge), [`src/bun/index.ts`](https://github.com/xiaochong/markbun/blob/main/src/bun/index.ts) (Desktop RPC), [`src/mainview/components/editor/hooks/useCrepeEditor.ts`](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/editor/hooks/useCrepeEditor.ts) (WYSIWYG editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_renderer["Writing workspace"]
  node_app["Workspace app<br/>[App.tsx]"]
  node_wysiwyg["WYSIWYG editor<br/>[useCrepeEditor.ts]"]
  node_source["Source editor<br/>[SourceEditor.tsx]"]
  node_search["Find and replace<br/>[useSearch.ts]"]
  node_outline["Outline navigation<br/>[useOutline.ts]"]
  node_explorer["File explorer<br/>[useFileExplorer.ts]"]
  node_quickopen["Quick Open<br/>[useQuickOpen.ts]"]
  node_filedialog["File dialogs<br/>[useFileDialog.ts]"]
  node_images["Image handling<br/>[index.ts]"]
  node_export["Document export<br/>[useExport.ts]"]
  node_settingsui["Settings UI<br/>[SettingsDialog.tsx]"]
  node_ui["Workspace chrome<br/>[index.ts]"]
  node_mermaid["Mermaid diagrams"]
  node_i18n["Localization<br/>[index.ts]"]
end

subgraph group_desktop["Desktop services"]
  node_bridge["Desktop bridge<br/>[electrobun.ts]"]
  node_rpc["Desktop RPC<br/>[index.ts]"]
  node_files["File operations<br/>[files.ts]"]
  node_folders["Folder operations<br/>[folders.ts]"]
  node_backup["Recovery and history<br/>[backup.ts]"]
  node_settings["Settings service<br/>[settings.ts]"]
  node_session["Session state<br/>[sessionState.ts]"]
end

subgraph group_ai["AI assistance"]
  node_aichat["AI chat UI<br/>[useAIChat.ts]"]
  node_aitools["Document AI tools<br/>[ai-tools.ts]"]
  node_aistream["AI streaming<br/>[ai-stream.ts]"]
  node_aikeys["Provider keys<br/>[ai-keys.ts]"]
end

subgraph group_shared["Shared commands"]
  node_commands["Command handlers<br/>[commandHandlers.ts]"]
  node_registry["Command registry<br/>[commandRegistry.ts]"]
  node_dispatcher["Command dispatcher<br/>[commandDispatch.ts]"]
end

node_writer(("Writer"))
node_providers{{"AI providers"}}
node_filesystem[("Local filesystem")]

node_writer -->|"uses"| node_app
node_app -->|"loads document"| node_wysiwyg
node_app -->|"loads document"| node_source
node_app -->|"requests file actions"| node_bridge
node_app -->|"processes images"| node_images
node_app -->|"updates headings"| node_outline
node_app -->|"manages workspace"| node_explorer
node_app -->|"provides search"| node_search
node_app -->|"exports document"| node_export
node_app -->|"shows assistant"| node_aichat
node_app -->|"renders workspace"| node_ui
node_filedialog -->|"requests paths"| node_bridge
node_explorer -->|"requests folders"| node_bridge
node_quickopen -->|"searches files"| node_bridge
node_search -->|"dispatches search"| node_wysiwyg
node_wysiwyg -->|"renders diagrams"| node_mermaid
node_settingsui -->|"loads settings"| node_bridge
node_bridge -->|"invokes RPC"| node_rpc
node_rpc -->|"dispatches file calls"| node_files
node_rpc -->|"dispatches folder calls"| node_folders
node_rpc -->|"backs up saves"| node_backup
node_rpc -->|"loads settings"| node_settings
node_rpc -->|"persists session"| node_session
node_files -->|"reads and writes"| node_filesystem
node_folders -->|"lists and changes"| node_filesystem
node_backup -->|"stores recovery"| node_filesystem
node_aichat -->|"sends prompts"| node_bridge
node_aichat -->|"invokes document tools"| node_aitools
node_bridge -->|"starts AI chat"| node_aistream
node_aistream -->|"loads credentials"| node_aikeys
node_aistream -.->|"requests completions"| node_providers
node_commands -->|"registers handlers"| node_dispatcher
node_dispatcher -->|"uses command definitions"| node_registry
node_commands -->|"dispatches formatting"| node_wysiwyg
node_writer -->|"configures editor"| node_settingsui
node_app -->|"initializes language"| node_i18n

click node_app "https://github.com/xiaochong/markbun/blob/main/src/mainview/App.tsx"
click node_wysiwyg "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/editor/hooks/useCrepeEditor.ts"
click node_source "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/editor/SourceEditor.tsx"
click node_search "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/search-bar/useSearch.ts"
click node_outline "https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useOutline.ts"
click node_explorer "https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useFileExplorer.ts"
click node_quickopen "https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useQuickOpen.ts"
click node_filedialog "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/file-dialog/useFileDialog.ts"
click node_images "https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/image/index.ts"
click node_export "https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useExport.ts"
click node_settingsui "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/settings/SettingsDialog.tsx"
click node_ui "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/layout/index.ts"
click node_bridge "https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/electrobun.ts"
click node_rpc "https://github.com/xiaochong/markbun/blob/main/src/bun/index.ts"
click node_files "https://github.com/xiaochong/markbun/blob/main/src/bun/ipc/files.ts"
click node_folders "https://github.com/xiaochong/markbun/blob/main/src/bun/ipc/folders.ts"
click node_backup "https://github.com/xiaochong/markbun/blob/main/src/bun/services/backup.ts"
click node_settings "https://github.com/xiaochong/markbun/blob/main/src/bun/services/settings.ts"
click node_session "https://github.com/xiaochong/markbun/blob/main/src/bun/services/sessionState.ts"
click node_aichat "https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useAIChat.ts"
click node_aitools "https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/ai-tools.ts"
click node_aistream "https://github.com/xiaochong/markbun/blob/main/src/bun/services/ai-stream.ts"
click node_aikeys "https://github.com/xiaochong/markbun/blob/main/src/bun/services/ai-keys.ts"
click node_commands "https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/commandHandlers.ts"
click node_registry "https://github.com/xiaochong/markbun/blob/main/src/shared/commandRegistry.ts"
click node_dispatcher "https://github.com/xiaochong/markbun/blob/main/src/shared/commandDispatch.ts"
click node_mermaid "https://github.com/xiaochong/markbun/blob/main/src/mainview/components/mermaid-viewer/MermaidDiagramViewer.tsx"
click node_i18n "https://github.com/xiaochong/markbun/blob/main/src/mainview/i18n/index.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_wysiwyg,node_source,node_search,node_outline,node_explorer,node_quickopen,node_filedialog,node_images,node_export,node_settingsui,node_ui,node_mermaid,node_i18n toneBlue
class node_bridge,node_rpc,node_files,node_folders,node_backup,node_settings,node_session,node_filesystem toneAmber
class node_aichat,node_aitools,node_aistream,node_aikeys toneMint
class node_commands,node_registry,node_dispatcher toneRose
class node_writer,node_providers toneIndigo
```

## Components

### Writing workspace

- [Workspace app](https://github.com/xiaochong/markbun/blob/main/src/mainview/App.tsx): `src/mainview/App.tsx`
- [WYSIWYG editor](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/editor/hooks/useCrepeEditor.ts): `src/mainview/components/editor/hooks/useCrepeEditor.ts`
- [Source editor](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/editor/SourceEditor.tsx): `src/mainview/components/editor/SourceEditor.tsx`
- [Find and replace](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/search-bar/useSearch.ts): `src/mainview/components/search-bar/useSearch.ts`
- [Outline navigation](https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useOutline.ts): `src/mainview/hooks/useOutline.ts`
- [File explorer](https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useFileExplorer.ts): `src/mainview/hooks/useFileExplorer.ts`
- [Quick Open](https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useQuickOpen.ts): `src/mainview/hooks/useQuickOpen.ts`
- [File dialogs](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/file-dialog/useFileDialog.ts): `src/mainview/components/file-dialog/useFileDialog.ts`
- [Image handling](https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/image/index.ts): `src/mainview/lib/image/index.ts`
- [Document export](https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useExport.ts): `src/mainview/hooks/useExport.ts`
- [Settings UI](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/settings/SettingsDialog.tsx): `src/mainview/components/settings/SettingsDialog.tsx`
- [Workspace chrome](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/layout/index.ts): `src/mainview/components/layout/index.ts`
- [Mermaid diagrams](https://github.com/xiaochong/markbun/blob/main/src/mainview/components/mermaid-viewer/MermaidDiagramViewer.tsx): `src/mainview/components/mermaid-viewer/MermaidDiagramViewer.tsx`
- [Localization](https://github.com/xiaochong/markbun/blob/main/src/mainview/i18n/index.ts): `src/mainview/i18n/index.ts`

### Desktop services

- [Desktop bridge](https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/electrobun.ts): `src/mainview/lib/electrobun.ts`
- [Desktop RPC](https://github.com/xiaochong/markbun/blob/main/src/bun/index.ts): `src/bun/index.ts`
- [File operations](https://github.com/xiaochong/markbun/blob/main/src/bun/ipc/files.ts): `src/bun/ipc/files.ts`
- [Folder operations](https://github.com/xiaochong/markbun/blob/main/src/bun/ipc/folders.ts): `src/bun/ipc/folders.ts`
- [Recovery and history](https://github.com/xiaochong/markbun/blob/main/src/bun/services/backup.ts): `src/bun/services/backup.ts`
- [Settings service](https://github.com/xiaochong/markbun/blob/main/src/bun/services/settings.ts): `src/bun/services/settings.ts`
- [Session state](https://github.com/xiaochong/markbun/blob/main/src/bun/services/sessionState.ts): `src/bun/services/sessionState.ts`

### AI assistance

- [AI chat UI](https://github.com/xiaochong/markbun/blob/main/src/mainview/hooks/useAIChat.ts): `src/mainview/hooks/useAIChat.ts`
- [Document AI tools](https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/ai-tools.ts): `src/mainview/lib/ai-tools.ts`
- [AI streaming](https://github.com/xiaochong/markbun/blob/main/src/bun/services/ai-stream.ts): `src/bun/services/ai-stream.ts`
- [Provider keys](https://github.com/xiaochong/markbun/blob/main/src/bun/services/ai-keys.ts): `src/bun/services/ai-keys.ts`

### Shared commands

- [Command handlers](https://github.com/xiaochong/markbun/blob/main/src/mainview/lib/commandHandlers.ts): `src/mainview/lib/commandHandlers.ts`
- [Command registry](https://github.com/xiaochong/markbun/blob/main/src/shared/commandRegistry.ts): `src/shared/commandRegistry.ts`
- [Command dispatcher](https://github.com/xiaochong/markbun/blob/main/src/shared/commandDispatch.ts): `src/shared/commandDispatch.ts`

### Other components

- **Writer**
- **AI providers**
- **Local filesystem**

## Connections

- Writer → Workspace app: uses
- Workspace app → WYSIWYG editor: loads document
- Workspace app → Source editor: loads document
- Workspace app → Desktop bridge: requests file actions
- Workspace app → Image handling: processes images
- Workspace app → Outline navigation: updates headings
- Workspace app → File explorer: manages workspace
- Workspace app → Find and replace: provides search
- Workspace app → Document export: exports document
- Workspace app → AI chat UI: shows assistant
- Workspace app → Workspace chrome: renders workspace
- File dialogs → Desktop bridge: requests paths
- File explorer → Desktop bridge: requests folders
- Quick Open → Desktop bridge: searches files
- Find and replace → WYSIWYG editor: dispatches search
- WYSIWYG editor → Mermaid diagrams: renders diagrams
- Settings UI → Desktop bridge: loads settings
- Desktop bridge → Desktop RPC: invokes RPC
- Desktop RPC → File operations: dispatches file calls
- Desktop RPC → Folder operations: dispatches folder calls
- Desktop RPC → Recovery and history: backs up saves
- Desktop RPC → Settings service: loads settings
- Desktop RPC → Session state: persists session
- File operations → Local filesystem: reads and writes
- Folder operations → Local filesystem: lists and changes
- Recovery and history → Local filesystem: stores recovery
- AI chat UI → Desktop bridge: sends prompts
- AI chat UI → Document AI tools: invokes document tools
- Desktop bridge → AI streaming: starts AI chat
- AI streaming → Provider keys: loads credentials
- AI streaming → AI providers: requests completions
- Command handlers → Command dispatcher: registers handlers
- Command dispatcher → Command registry: uses command definitions
- Command handlers → WYSIWYG editor: dispatches formatting
- Writer → Settings UI: configures editor
- Workspace app → Localization: initializes language