# binaryoutlook/binary-markdown architecture

> Architecture diagram of the GitHub repository binaryoutlook/binary-markdown, 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/binaryoutlook/binary-markdown
- Repository: https://github.com/binaryoutlook/binary-markdown

## Overview

Binary Markdown is a visual Markdown editor for VS Code, with an Electron runtime also present in the tree. The main workflow is opening a Markdown document, editing it in the rendered webview (with source mode available), syncing changes through the host, and saving; users can also request local-format exports. The README documents broad editing, layout, outline, and export capabilities, but the sampled source excerpts show only parts of their wiring. The graph includes documented feature areas while limiting arrows to supported host, message, and export relationships.

Main entry points: [`src/editorProvider.ts`](https://github.com/binaryoutlook/binary-markdown/blob/main/src/editorProvider.ts) (Editor provider), [`src/export/controller.ts`](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/controller.ts) (Export controller), [`electron/src/main.ts`](https://github.com/binaryoutlook/binary-markdown/blob/main/electron/src/main.ts) (Electron main), [`src/webview/editor.js`](https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/editor.js) (Editor webview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_host["Editor hosts"]
  node_vscode["VS Code"]
  node_extension["Extension entry<br/>[extension.ts]"]
  node_provider["Editor provider<br/>[editorProvider.ts]"]
  node_electron["Electron main<br/>[main.ts]"]
  node_files["File manager<br/>[file-manager.ts]"]
end

subgraph group_editing["Editing experience"]
  node_webview["Editor webview<br/>[editor.js]"]
  node_webviewcontent["Webview assembly<br/>[webviewContent.ts]"]
  node_body["Editor interface"]
  node_tables["Table controls<br/>[table-toolbar.js]"]
end

subgraph group_shared["Shared document features"]
  node_layout["Layout and settings<br/>[editor-layout.js]"]
  node_outline["Outline state"]
  node_documentaux["Document structure<br/>[document-aux.js]"]
  node_images["Image and links<br/>[link-opener.ts]"]
  node_settings["Settings provider"]
end

subgraph group_export["Export"]
  node_exportui["Export interface<br/>[export-ui.js]"]
  node_controller["Export controller<br/>[controller.ts]"]
  node_html["HTML preparation<br/>[html.ts]"]
  node_pdf["PDF conversion<br/>[pdf.ts]"]
  node_pandoc["Pandoc conversion<br/>[pandoc.ts]"]
  node_tools["Tool discovery<br/>[tools.ts]"]
  node_output["Artifact output<br/>[output.ts]"]
end

node_user(("Markdown author"))
node_localfile["Local Markdown file"]
node_exporttools["Local conversion tools"]

node_user -->|"opens document"| node_vscode
node_vscode -->|"activates"| node_extension
node_extension -->|"registers editor"| node_provider
node_provider -->|"builds webview"| node_webviewcontent
node_webviewcontent -->|"assembles interface"| node_body
node_user -->|"edits Markdown"| node_webview
node_webview -->|"sends edits"| node_provider
node_provider -->|"saves document"| node_localfile
node_localfile -->|"loads document"| node_provider
node_webview -->|"uses controls"| node_tables
node_provider -->|"stores outline state"| node_outline
node_provider -->|"refreshes structure"| node_documentaux
node_provider -->|"opens local links"| node_images
node_provider -->|"reads settings"| node_settings
node_provider -->|"hosts export UI"| node_exportui
node_exportui -->|"requests export"| node_controller
node_controller -->|"checks fresh TOC"| node_documentaux
node_controller -->|"discovers tools"| node_tools
node_controller -->|"prepares HTML"| node_html
node_controller -->|"converts PDF"| node_pdf
node_controller -->|"converts formats"| node_pandoc
node_html -.->|"uses browser"| node_exporttools
node_pdf -->|"uses browser"| node_exporttools
node_pandoc -->|"invokes Pandoc"| node_exporttools
node_controller -->|"writes artifact"| node_output
node_user -.->|"opens desktop app"| node_electron
node_electron -->|"manages documents"| node_files
node_electron -.->|"loads shared settings"| node_settings

click node_extension "https://github.com/binaryoutlook/binary-markdown/blob/main/src/extension.ts"
click node_provider "https://github.com/binaryoutlook/binary-markdown/blob/main/src/editorProvider.ts"
click node_electron "https://github.com/binaryoutlook/binary-markdown/blob/main/electron/src/main.ts"
click node_files "https://github.com/binaryoutlook/binary-markdown/blob/main/electron/src/file-manager.ts"
click node_webview "https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/editor.js"
click node_webviewcontent "https://github.com/binaryoutlook/binary-markdown/blob/main/src/webviewContent.ts"
click node_body "https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/editor-body-html.js"
click node_tables "https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/table-toolbar.js"
click node_layout "https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/editor-layout.js"
click node_outline "https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/outline-state-store.js"
click node_documentaux "https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/document-aux.js"
click node_images "https://github.com/binaryoutlook/binary-markdown/blob/main/src/link-opener.ts"
click node_settings "https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/settings-provider.ts"
click node_exportui "https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/export-ui.js"
click node_controller "https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/controller.ts"
click node_html "https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/html.ts"
click node_pdf "https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/pdf.ts"
click node_pandoc "https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/pandoc.ts"
click node_tools "https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/tools.ts"
click node_output "https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/output.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_vscode,node_extension,node_provider,node_electron,node_files toneBlue
class node_webview,node_webviewcontent,node_body,node_tables toneAmber
class node_layout,node_outline,node_documentaux,node_images,node_settings toneMint
class node_exportui,node_controller,node_html,node_pdf,node_pandoc,node_tools,node_output toneRose
class node_user,node_localfile,node_exporttools toneIndigo
```

## Components

### Editor hosts

- **VS Code**
- [Extension entry](https://github.com/binaryoutlook/binary-markdown/blob/main/src/extension.ts): `src/extension.ts`
- [Editor provider](https://github.com/binaryoutlook/binary-markdown/blob/main/src/editorProvider.ts): `src/editorProvider.ts`
- [Electron main](https://github.com/binaryoutlook/binary-markdown/blob/main/electron/src/main.ts): `electron/src/main.ts`
- [File manager](https://github.com/binaryoutlook/binary-markdown/blob/main/electron/src/file-manager.ts): `electron/src/file-manager.ts`

### Editing experience

- [Editor webview](https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/editor.js): `src/webview/editor.js`
- [Webview assembly](https://github.com/binaryoutlook/binary-markdown/blob/main/src/webviewContent.ts): `src/webviewContent.ts`
- [Editor interface](https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/editor-body-html.js): `src/shared/editor-body-html.js`
- [Table controls](https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/table-toolbar.js): `src/webview/table-toolbar.js`

### Shared document features

- [Layout and settings](https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/editor-layout.js): `src/shared/editor-layout.js`
- [Outline state](https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/outline-state-store.js): `src/shared/outline-state-store.js`
- [Document structure](https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/document-aux.js): `src/shared/document-aux.js`
- [Image and links](https://github.com/binaryoutlook/binary-markdown/blob/main/src/link-opener.ts): `src/link-opener.ts`
- [Settings provider](https://github.com/binaryoutlook/binary-markdown/blob/main/src/shared/settings-provider.ts): `src/shared/settings-provider.ts`

### Export

- [Export interface](https://github.com/binaryoutlook/binary-markdown/blob/main/src/webview/export-ui.js): `src/webview/export-ui.js`
- [Export controller](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/controller.ts): `src/export/controller.ts`
- [HTML preparation](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/html.ts): `src/export/html.ts`
- [PDF conversion](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/pdf.ts): `src/export/pdf.ts`
- [Pandoc conversion](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/pandoc.ts): `src/export/pandoc.ts`
- [Tool discovery](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/tools.ts): `src/export/tools.ts`
- [Artifact output](https://github.com/binaryoutlook/binary-markdown/blob/main/src/export/output.ts): `src/export/output.ts`

### Other components

- **Markdown author**
- **Local Markdown file**
- **Local conversion tools**

## Connections

- Markdown author → VS Code: opens document
- VS Code → Extension entry: activates
- Extension entry → Editor provider: registers editor
- Editor provider → Webview assembly: builds webview
- Webview assembly → Editor interface: assembles interface
- Markdown author → Editor webview: edits Markdown
- Editor webview → Editor provider: sends edits
- Editor provider → Local Markdown file: saves document
- Local Markdown file → Editor provider: loads document
- Editor webview → Table controls: uses controls
- Editor provider → Outline state: stores outline state
- Editor provider → Document structure: refreshes structure
- Editor provider → Image and links: opens local links
- Editor provider → Settings provider: reads settings
- Editor provider → Export interface: hosts export UI
- Export interface → Export controller: requests export
- Export controller → Document structure: checks fresh TOC
- Export controller → Tool discovery: discovers tools
- Export controller → HTML preparation: prepares HTML
- Export controller → PDF conversion: converts PDF
- Export controller → Pandoc conversion: converts formats
- HTML preparation → Local conversion tools: uses browser
- PDF conversion → Local conversion tools: uses browser
- Pandoc conversion → Local conversion tools: invokes Pandoc
- Export controller → Artifact output: writes artifact
- Markdown author → Electron main: opens desktop app
- Electron main → File manager: manages documents
- Electron main → Settings provider: loads shared settings